/* global React, ReactDOM */
const { useState, useEffect, useMemo, useRef, useCallback } = React;

// ─── i18n helper (mirrors app/assets/js/lib/i18n.js) ──────
function _t(key) {
  if (!key) return '';
  if (window._i18n && window._i18n[key] !== undefined) return window._i18n[key];
  return key;
}

// ─── Country-scoped localStorage key ─────────────────────
function _geoKey(base) {
  const country = (window.__nbGeo && window.__nbGeo.current) || 'CV';
  return base + '_' + country;
}

// ─── Feature flag check (from DB via PHP) ────────────────
function _feat(code) {
  const features = window.__nbFeatures;
  // If no features configured, default all enabled (backwards compat)
  if (!features || !Array.isArray(features) || features.length === 0) return true;
  return features.includes(code);
}

// ─── API Client (mirrors ApiClient from api-client.js) ──────
const API = (() => {
  const BASE = (window.__nbConfig && window.__nbConfig.apiUrl) || '/api';
  const PLATFORM = (window.__nbConfig && window.__nbConfig.platformToken) || '';

  // Auth endpoint paths — never clear token on 401 for these (wrong credentials, not expired session)
  const AUTH_PATHS = ['/client/auth/login', '/client/auth/register', '/client/auth/google-login',
    '/client/auth/facebook-login', '/client/auth/apple-login', '/client/auth/redeem-token'];

  function headers(extra = {}) {
    const lang = localStorage.getItem('nb_preferred_lang') || 'pt';
    const h = { 'Accept': 'application/json', 'Accept-Language': lang, ...extra };
    const token = localStorage.getItem('sanctum_token');
    if (token) h['Authorization'] = 'Bearer ' + token;
    if (PLATFORM) h['X-Platform-Token'] = PLATFORM;
    return h;
  }

  function buildUrl(path, params) {
    const url = new URL(BASE + path, window.location.origin);
    if (params) {
      Object.entries(params).forEach(([k, v]) => {
        if (v !== null && v !== undefined && v !== '') url.searchParams.set(k, v);
      });
    }
    return url.toString();
  }

  async function handleResponse(r, path) {
    if (r.status === 401) {
      let data = {};
      try { data = await r.json(); } catch (_e) {}
      // Non-auth 401 = expired/invalid token — clear it
      const isAuth = AUTH_PATHS.some(p => path.includes(p));
      if (!isAuth && localStorage.getItem('sanctum_token')) {
        console.warn('[API] 401 — token expired/invalid, clearing session');
        localStorage.removeItem('sanctum_token');
      }
      return { message: data.message || 'not-logged', data: data.data || null };
    }
    if (r.status === 422) {
      try {
        const data = await r.json();
        return { message: 'validation-error', errors: data.errors || {}, detail: data.message || '', data: null };
      } catch (_e) {
        return { message: 'validation-error', errors: {}, data: null };
      }
    }
    if (!r.ok) {
      try {
        const d = await r.json();
        if (d && d.message) {
          return { message: d.message, detail: d.detail || d.error || '', error: d.error || d.detail || '', code: d.code || '', data: d.data || null };
        }
      } catch (_e) {}
      console.warn('[API]', r.status, path);
      return { message: 'error', detail: '', error: '', code: '', data: null };
    }
    return r.json();
  }

  // Dedup: cache in-flight GET requests to avoid concurrent duplicate calls
  const _inflight = {};
  async function get(path, params = {}) {
    const key = path + JSON.stringify(params);
    if (_inflight[key]) return _inflight[key];
    const promise = fetch(buildUrl(path, params), { headers: headers(), credentials: 'include' })
      .then(r => handleResponse(r, path))
      .finally(() => { delete _inflight[key]; });
    _inflight[key] = promise;
    return promise;
  }

  async function post(path, body = {}) {
    const r = await fetch(buildUrl(path), {
      method: 'POST',
      headers: headers({ 'Content-Type': 'application/json' }),
      body: JSON.stringify(body),
      credentials: 'include',
    });
    return handleResponse(r, path);
  }

  async function put(path, body = {}) {
    const r = await fetch(buildUrl(path), {
      method: 'PUT',
      headers: headers({ 'Content-Type': 'application/json' }),
      body: JSON.stringify(body),
      credentials: 'include',
    });
    return handleResponse(r, path);
  }

  async function del(path) {
    const r = await fetch(buildUrl(path), {
      method: 'DELETE',
      headers: headers(),
      credentials: 'include',
    });
    return handleResponse(r, path);
  }

  async function upload(path, formData) {
    const r = await fetch(buildUrl(path), {
      method: 'POST',
      headers: headers(), // No Content-Type — browser sets multipart boundary
      body: formData,
      credentials: 'include',
    });
    return handleResponse(r, path);
  }

  return { get, post, put, del, upload };
})();

// ─── Ticket data normalizer ─────────────────────────────────
// API returns Service/Agency/TicketWait but components expect ServiceName/AgencyName/People
function normalizeTicket(t) {
  return {
    ...t,
    ServiceName: t.ServiceName || t.Service || '',
    AgencyName: t.AgencyName || t.Agency || '',
    CompanyName: t.CompanyName || '',
    CategoryName: t.CategoryName || '',
    Code: t.Code || t.Number || '',
    People: t.People ?? t.TicketWait ?? 0,
    WaitTime: t.WaitTime || (t.EstimatedWait ? Math.ceil(t.EstimatedWait / 60) + ' min' : null),
  };
}

// ─── Pusher Client ──────────────────────────────────────────
const PusherClient = (() => {
  let _pusher = null;
  let _channels = {};

  function init(key, cluster) {
    if (_pusher || !key || typeof Pusher === 'undefined') return;
    _pusher = new Pusher(key, { cluster, forceTLS: true });
  }

  function isReady() { return !!_pusher; }

  function subscribe(channel) {
    if (!_pusher || _channels[channel]) return;
    _channels[channel] = _pusher.subscribe(channel);
  }

  function bind(channel, event, callback) {
    if (_channels[channel]) _channels[channel].bind(event, callback);
  }

  function unbind(channel, event, callback) {
    if (_channels[channel]) _channels[channel].unbind(event, callback);
  }

  function unsubscribe(channel) {
    if (_pusher && _channels[channel]) {
      _pusher.unsubscribe(channel);
      delete _channels[channel];
    }
  }

  function unsubscribeAll() {
    Object.keys(_channels).forEach(ch => { if (_pusher) _pusher.unsubscribe(ch); });
    _channels = {};
  }

  return { init, isReady, subscribe, bind, unbind, unsubscribe, unsubscribeAll };
})();

// ─── Notification Sound ─────────────────────────────────────
let _audioCtx = null;
function playNotificationSound() {
  try {
    if (!_audioCtx) _audioCtx = new (window.AudioContext || window.webkitAudioContext)();
    const osc = _audioCtx.createOscillator();
    const gain = _audioCtx.createGain();
    osc.type = 'sine'; osc.frequency.value = 880;
    gain.gain.value = 0.3;
    osc.connect(gain); gain.connect(_audioCtx.destination);
    osc.start(); osc.stop(_audioCtx.currentTime + 0.3);
  } catch(e) {}
}

// ─── QR Code Generator (minimal) ───────────────────────────
const NbQR = (() => {
  function toDataURL(text, size = 200) {
    // Use a simple QR rendering via canvas API approach
    // Encode data as a shareable URL rendered as a grid pattern
    const modules = generateQR(text);
    const canvas = document.createElement('canvas');
    canvas.width = size; canvas.height = size;
    const ctx = canvas.getContext('2d');
    const cellSize = size / modules.length;
    ctx.fillStyle = '#fff';
    ctx.fillRect(0, 0, size, size);
    ctx.fillStyle = '#000';
    modules.forEach((row, y) => {
      row.forEach((cell, x) => {
        if (cell) ctx.fillRect(x * cellSize, y * cellSize, cellSize, cellSize);
      });
    });
    return canvas.toDataURL();
  }

  // Minimal QR code generator (alphanumeric mode, EC level L)
  function generateQR(text) {
    // Fallback: generate a simple visual pattern with the text encoded
    // For production, use a proper QR library. This creates a readable grid.
    const size = 21; // Version 1 QR
    const grid = Array.from({length: size}, () => Array(size).fill(false));
    // Finder patterns
    const drawFinder = (ox, oy) => {
      for (let y = 0; y < 7; y++) for (let x = 0; x < 7; x++) {
        grid[oy+y][ox+x] = (y === 0 || y === 6 || x === 0 || x === 6 || (y >= 2 && y <= 4 && x >= 2 && x <= 4));
      }
    };
    drawFinder(0, 0); drawFinder(size-7, 0); drawFinder(0, size-7);
    // Timing patterns
    for (let i = 8; i < size-8; i++) { grid[6][i] = i%2===0; grid[i][6] = i%2===0; }
    // Data area: encode text bytes as pattern
    const bytes = new TextEncoder().encode(text);
    let bit = 0;
    for (let x = size-1; x >= 1; x -= 2) {
      if (x === 6) x = 5;
      for (let y = 0; y < size; y++) {
        for (let dx = 0; dx < 2; dx++) {
          const cx = x - dx, cy = y;
          if (grid[cy][cx] !== undefined && cy >= 0 && cx >= 0) {
            if ((cy < 9 && cx < 9) || (cy < 9 && cx >= size-8) || (cy >= size-8 && cx < 9)) continue;
            if (cy === 6 || cx === 6) continue;
            const byteIdx = Math.floor(bit / 8);
            const bitIdx = 7 - (bit % 8);
            grid[cy][cx] = byteIdx < bytes.length ? !!((bytes[byteIdx] >> bitIdx) & 1) : false;
            bit++;
          }
        }
      }
    }
    return grid;
  }

  return { toDataURL };
})();

// ─── Toast Notification System ──────────────────────────────
const ToastContext = React.createContext({ addToast: () => {} });

function ToastProvider({ children }) {
  const [toasts, setToasts] = useState([]);
  const idRef = useRef(0);

  const addToast = useCallback((message, type = 'info', duration = 5000) => {
    const id = ++idRef.current;
    setToasts(prev => [...prev, { id, message, type }]);
    setTimeout(() => setToasts(prev => prev.filter(t => t.id !== id)), duration);
  }, []);

  return (
    <ToastContext.Provider value={{ addToast }}>
      {children}
      <div className="toast-container" style={{ position:'fixed', top:76, right:20, zIndex:99999, display:'flex', flexDirection:'column', gap:8 }}>
        {toasts.map(t => (
          <div key={t.id} className={`toast toast-${t.type}`} style={{
            padding:'12px 20px', borderRadius:12, color:'#fff', fontSize:13, fontWeight:500,
            boxShadow:'0 4px 12px rgba(0,0,0,0.15)', animation:'fadeIn 0.3s',
            background: t.type==='success'?'var(--nb-green)':t.type==='error'?'var(--nb-danger)':'var(--nb-info)',
          }}>
            {t.message}
          </div>
        ))}
      </div>
    </ToastContext.Provider>
  );
}

// ─── Favorites Hook ─────────────────────────────────────────
function useFavorites(signedIn) {
  const [agencies, setAgencies] = useState(() => {
    try { return JSON.parse(localStorage.getItem(_geoKey('nb_fav_agencies')) || '[]'); } catch { return []; }
  });
  // Services stored as [{agencyHash, serviceHash}]
  const [services, setServices] = useState(() => {
    try { return JSON.parse(localStorage.getItem(_geoKey('nb_fav_services')) || '[]'); } catch { return []; }
  });
  // Full agency data for favorites display
  const [favAgencyData, setFavAgencyData] = useState([]);

  // Sync agencies from server when logged in
  useEffect(() => {
    if (!signedIn) return;
    API.get('/client/favorites').then(res => {
      if (res.message === 'success' && Array.isArray(res.data)) {
        const list = res.data;
        const hashes = list.map(f => f.agency_hash || f.Hash || f.AgencyHash).filter(Boolean);
        setAgencies(hashes);
        localStorage.setItem(_geoKey('nb_fav_agencies'), JSON.stringify(hashes));
        // Store full data for display
        setFavAgencyData(list.map(f => ({
          hash: f.agency_hash || f.Hash || f.AgencyHash,
          name: f.agency_name || f.Name || f.AgencyName || '',
          company: f.company_name || f.CompanyName || '',
          zone: f.zone || f.Zone || '',
        })));
      }
    }).catch(() => {});
    // Sync service favorites
    API.get('/client/favorites/services').then(res => {
      if (res.message === 'success' && Array.isArray(res.data)) {
        const svcFavs = res.data.map(f => ({
          agencyHash: f.agency_hash || f.AgencyHash,
          serviceHash: f.service_hash || f.ServiceHash,
        }));
        setServices(svcFavs);
        localStorage.setItem(_geoKey('nb_fav_services'), JSON.stringify(svcFavs));
      }
    }).catch(() => {});
  }, [signedIn]);

  const isAgencyFav = (hash) => agencies.includes(hash);

  const toggleAgency = async (hash, agencyData) => {
    const isFav = isAgencyFav(hash);
    NbTracker.track(isFav ? 'unfav_agency' : 'fav_agency', { hash });
    const next = isFav ? agencies.filter(h => h !== hash) : [...agencies, hash];
    setAgencies(next);
    localStorage.setItem(_geoKey('nb_fav_agencies'), JSON.stringify(next));
    if (!isFav && agencyData) {
      setFavAgencyData(prev => [...prev, { hash, name: agencyData.Name || agencyData.name || '', company: '', zone: agencyData.Zone || '' }]);
    } else {
      setFavAgencyData(prev => prev.filter(a => a.hash !== hash));
    }
    if (signedIn) {
      try {
        if (isFav) await API.del(`/client/favorites/${hash}`);
        else await API.post('/client/favorites', { agency_hash: hash });
      } catch(e) {}
    }
  };

  const isServiceFav = (agencyHash, serviceHash) =>
    services.some(s => s.agencyHash === agencyHash && s.serviceHash === serviceHash);

  const toggleService = async (agencyHash, serviceHash) => {
    const isFav = isServiceFav(agencyHash, serviceHash);
    const next = isFav
      ? services.filter(s => !(s.agencyHash === agencyHash && s.serviceHash === serviceHash))
      : [...services, { agencyHash, serviceHash }];
    setServices(next);
    localStorage.setItem(_geoKey('nb_fav_services'), JSON.stringify(next));
    if (signedIn) {
      try {
        if (isFav) await API.del(`/client/favorites/services/${agencyHash}/${serviceHash}`);
        else await API.post('/client/favorites/services', { agency_hash: agencyHash, service_hash: serviceHash });
      } catch(e) {}
    }
  };

  return { agencies, favAgencyData, isAgencyFav, toggleAgency, services, isServiceFav, toggleService };
}

// ─── Empty State (reusable) ──────────────────────────────────
function EmptyState({ icon, title, description, actions }) {
  return (
    <div className="nb-empty">
      <div className="nb-empty__icon"><Ico name={icon || 'search'} size={24} /></div>
      {title && <p className="nb-empty__title">{title}</p>}
      {description && <p className="nb-empty__desc">{description}</p>}
      {actions && actions.length > 0 && (
        <div className="nb-empty__actions">
          {actions.map((a, i) => (
            <button key={i} className={`nb-empty__btn ${a.primary ? 'nb-empty__btn--primary' : ''}`} onClick={a.onClick}>
              {a.icon && <Ico name={a.icon} size={14} />} {a.label}
            </button>
          ))}
        </div>
      )}
    </div>
  );
}

// ─── Icons (Lucide via inline SVG) ──────────────────────────
const Ico = ({ name, size = 18 }) => {
  const paths = {
    home: <><path d="M3 9.5L12 3l9 6.5V20a1 1 0 0 1-1 1h-5v-7h-6v7H4a1 1 0 0 1-1-1V9.5z"/></>,
    ticket: <><path d="M3 9a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v2a2 2 0 0 0 0 4v2a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-2a2 2 0 0 0 0-4V9z"/><path d="M9 7v10"/></>,
    map: <><path d="M9 3l-6 3v15l6-3 6 3 6-3V3l-6 3-6-3z"/><path d="M9 3v15M15 6v15"/></>,
    radar: <><circle cx="12" cy="12" r="9"/><path d="M12 12L19 5"/><path d="M12 8a4 4 0 1 0 4 4"/></>,
    user: <><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></>,
    bell: <><path d="M6 8a6 6 0 0 1 12 0c0 7 3 8 3 8H3s3-1 3-8z"/><path d="M10 21a2 2 0 0 0 4 0"/></>,
    help: <><circle cx="12" cy="12" r="10"/><path d="M9.1 9a3 3 0 0 1 5.8 1c0 2-3 3-3 3M12 17h.01"/></>,
    search: <><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></>,
    arrow: <><path d="M9 6l6 6-6 6"/></>,
    arrowL: <><path d="M15 18l-6-6 6-6"/></>,
    bolt: <><path d="M13 2L4 14h7l-1 8 9-12h-7l1-8z"/></>,
    bank: <><path d="M3 10h18M5 10v8M9 10v8M15 10v8M19 10v8M3 18h18M3 22h18M12 2L3 7v3h18V7l-9-5z"/></>,
    briefcase: <><rect x="3" y="7" width="18" height="13" rx="2"/><path d="M9 7V5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2M3 13h18"/></>,
    building: <><path d="M3 21V7l6-4 6 4v14M3 21h18M9 21v-4h2v4M14 21V11l4 2v8M6 9h.01M6 13h.01M6 17h.01"/></>,
    mail: <><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></>,
    cross: <><path d="M18 6L6 18M6 6l12 12"/></>,
    scissors: <><circle cx="6" cy="6" r="3"/><circle cx="6" cy="18" r="3"/><path d="m20 4-12 12M14 14l6 6M8 8l4 4"/></>,
    shield: <><path d="M12 3l8 3v6c0 5-4 9-8 9s-8-4-8-9V6l8-3z"/></>,
    phone: <><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13 1.05.37 2.07.7 3.05a2 2 0 0 1-.45 2.11L8.09 10.2a16 16 0 0 0 6 6l1.32-1.32a2 2 0 0 1 2.11-.45c.98.33 2 .57 3.05.7A2 2 0 0 1 22 16.92z"/></>,
    mic: <><rect x="9" y="2" width="6" height="12" rx="3"/><path d="M5 10v2a7 7 0 0 0 14 0v-2M12 19v3"/></>,
    pin: <><path d="M12 22s7-7 7-12a7 7 0 1 0-14 0c0 5 7 12 7 12z"/><circle cx="12" cy="10" r="2.5"/></>,
    pinOff: <><path d="M3 3l18 18M19 10c0 5-7 12-7 12s-2-1.8-3.8-4.3M5.4 5.4A7 7 0 0 0 5 10c0 1.5.6 3 1.5 4.5"/></>,
    settings: <><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.6 1.6 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.6 1.6 0 0 0-1.8-.3 1.6 1.6 0 0 0-1 1.5V21a2 2 0 0 1-4 0v-.1a1.6 1.6 0 0 0-1-1.5 1.6 1.6 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.6 1.6 0 0 0 .3-1.8 1.6 1.6 0 0 0-1.5-1H3a2 2 0 0 1 0-4h.1a1.6 1.6 0 0 0 1.5-1 1.6 1.6 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.6 1.6 0 0 0 1.8.3 1.6 1.6 0 0 0 1-1.5V3a2 2 0 0 1 4 0v.1a1.6 1.6 0 0 0 1 1.5 1.6 1.6 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.6 1.6 0 0 0-.3 1.8 1.6 1.6 0 0 0 1.5 1H21a2 2 0 0 1 0 4h-.1a1.6 1.6 0 0 0-1.5 1z"/></>,
    grid: <><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></>,
    list: <><path d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01"/></>,
    qr: <><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><path d="M14 14h3v3M20 14v.01M14 20v.01M17 17h4M17 20h4M20 17v3"/></>,
    share: <><circle cx="6" cy="12" r="3"/><circle cx="18" cy="6" r="3"/><circle cx="18" cy="18" r="3"/><path d="m9 11 6-3M9 13l6 3"/></>,
    clock: <><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></>,
    chevR: <><path d="m9 6 6 6-6 6"/></>,
    chevD: <><path d="m6 9 6 6 6-6"/></>,
    star: <><path d="M12 2l3 6.2 6.8 1-4.9 4.8L18 21l-6-3.2L6 21l1.1-7L2.2 9.2l6.8-1z"/></>,
    logout: <><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9"/></>,
    wallet: <><rect x="1" y="5" width="22" height="15" rx="2"/><path d="M1 10h22"/><circle cx="17" cy="15" r="1.5"/></>,
    calendar: <><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18M8 14h.01M12 14h.01M16 14h.01M8 18h.01M12 18h.01"/></>,
    store: <><path d="M3 9l1.5-5h15L21 9M3 9v11a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1V9M3 9h18M9 21V13h6v8"/><path d="M5.5 9v1a2.5 2.5 0 0 0 5 0V9M10.5 9v1a2.5 2.5 0 0 0 5 0V9M15.5 9v1a2.5 2.5 0 0 0 2.5 2.5"/></>,
    gamepad: <><path d="M6 11h4M8 9v4"/><circle cx="15" cy="10" r=".5" fill="currentColor"/><circle cx="17" cy="12" r=".5" fill="currentColor"/><rect x="2" y="6" width="20" height="12" rx="5"/></>,
    receipt: <><path d="M4 2v20l3-2 3 2 3-2 3 2V2l-3 2-3-2-3 2-3-2z"/><path d="M8 10h8M8 14h4"/></>,
    lock: <><rect x="5" y="11" width="14" height="10" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></>,
    check: <><path d="M5 12l5 5L20 7"/></>,
    wifi: <><path d="M2 8.5a15 15 0 0 1 20 0M5.6 11.8a10 10 0 0 1 12.8 0M9 15a5 5 0 0 1 6 0"/><circle cx="12" cy="18" r="1" fill="currentColor"/></>,
    droplet: <><path d="M12 2.7c-3.5 4-7 7.5-7 11.3a7 7 0 0 0 14 0c0-3.8-3.5-7.3-7-11.3z"/></>,
    carWash: <><path d="M3 18h18M5 18v-4a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v4"/><path d="M6.5 12l1-3.5h9l1 3.5"/><circle cx="8" cy="16" r="1" fill="currentColor"/><circle cx="16" cy="16" r="1" fill="currentColor"/><path d="M5 8c1-1 2 0 3-1s2 0 3-1 2 0 3-1 2 0 3-1" fill="none"/></>,
    zap: <><path d="M13 2L4 14h7l-1 8 9-12h-7l1-8z"/></>,
    tag: <><path d="M4 4h6l10 10-6 6L4 10V4z"/><circle cx="8.5" cy="8.5" r="1.5" fill="currentColor"/></>,
    copy: <><rect x="8" y="8" width="12" height="14" rx="2"/><path d="M16 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h2"/></>,
    sparkle: <><path d="M12 2l1.5 4.5L18 8l-4.5 1.5L12 14l-1.5-4.5L6 8l4.5-1.5L12 2zM5 16l1 3 3 1-3 1-1 3-1-3-3-1 3-1 1-3z"/></>,
    send: <><path d="M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z"/></>,
    trophy: <><path d="M6 9H3a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h3M18 9h3a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1h-3"/><path d="M6 4h12v6a6 6 0 0 1-12 0V4z"/><path d="M12 16v2M8 22h8M10 18h4"/></>,
    users: <><circle cx="9" cy="7" r="3"/><path d="M3 21a6 6 0 0 1 12 0"/><circle cx="17" cy="9" r="2.5"/><path d="M21 21a4.5 4.5 0 0 0-6.4-4"/></>,
    field: <><rect x="2" y="4" width="20" height="16" rx="2"/><path d="M12 4v16M2 12h20"/><circle cx="12" cy="12" r="3"/></>,
    activity: <><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></>,
    pharmacy: <><path d="M9 3h6v6h6v6h-6v6H9v-6H3V9h6V3z"/><circle cx="12" cy="12" r="3" fill="none"/></>,
    restaurant: <><path d="M3 2v7c0 1.1.9 2 2 2h2v11h2V11h2c1.1 0 2-.9 2-2V2M7 2v5"/><path d="M18 2v4a3 3 0 0 1-3 3h0v13M18 2v20"/></>,
    plane: <><path d="M21 16v-2l-8-5V3.5a1.5 1.5 0 0 0-3 0V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5l8 2.5z"/></>,
    car: <><path d="M5 17h14M5 17a2 2 0 0 1-2-2v-3l2-5h14l2 5v3a2 2 0 0 1-2 2M5 17a2 2 0 0 0-2 2M19 17a2 2 0 0 1 2 2"/><circle cx="7.5" cy="17" r="1.5"/><circle cx="16.5" cy="17" r="1.5"/></>,
    school: <><path d="M22 10v6M2 10l10-5 10 5-10 5-10-5z"/><path d="M6 12v5c0 1.7 2.7 3 6 3s6-1.3 6-3v-5"/></>,
    hospital: <><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M9 3v18M15 3v18M3 9h18M3 15h18"/></>,
    alert: <><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></>,
    info: <><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></>,
    camera: <><path d="M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z"/><circle cx="12" cy="13" r="3"/></>,
    package: <><path d="M16.5 9.4l-9-5.2M21 16V8a2 2 0 0 0-1-1.7l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.7l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><path d="M3.3 7L12 12l8.7-5M12 22V12"/></>,
    truck: <><path d="M1 3h15v13H1z"/><path d="M16 8h4l3 3v5h-7V8z"/><circle cx="5.5" cy="18.5" r="2.5"/><circle cx="18.5" cy="18.5" r="2.5"/></>,
    boxCheck: <><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></>,
    chevronLeft: <><path d="M15 18l-6-6 6-6"/></>,
    chevronRight: <><path d="M9 18l6-6-6-6"/></>,
    trash: <><path d="M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/><path d="M10 11v6M14 11v6"/></>,
    sun: <><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41"/></>,
    moon: <><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></>,
    searchOff: <><circle cx="11" cy="11" r="7" strokeDasharray="3 2"/><path d="m21 21-4.3-4.3"/><path d="M5 5l12 12"/></>,
  };
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      {paths[name]}
    </svg>
  );
};

// ─── Category icon mapping ──────────────────────────────────
const FA_TO_ICO = {
  'fa-building-columns': 'bank', 'fa-city': 'building', 'fa-envelope': 'mail',
  'fa-futbol': 'field', 'fa-bolt': 'bolt', 'fa-heart-pulse': 'pharmacy',
  'fa-hospital': 'hospital', 'fa-briefcase': 'briefcase', 'fa-users': 'scissors',
  'fa-shield-halved': 'shield', 'fa-phone': 'phone', 'fa-plane': 'plane',
  'fa-car': 'car', 'fa-school': 'school', 'fa-droplet': 'droplet', 'fa-sparkles': 'sparkle',
};

function getCategoryIcon(faClass) {
  if (!faClass) return 'briefcase';
  for (const [fa, ico] of Object.entries(FA_TO_ICO)) {
    if (faClass.includes(fa)) return ico;
  }
  return 'briefcase';
}

// ─── Sport icon mapping (Material Icons → emoji) ──────────
const SPORT_ICON_MAP = {
  sports_soccer: '⚽', sports_tennis: '🎾', sports_basketball: '🏀',
  sports_volleyball: '🏐', sports_handball: '🤾', sports_baseball: '⚾',
  sports_hockey: '🏒', sports_rugby: '🏉', sports_cricket: '🏏',
  sports_golf: '⛳', sports_martial_arts: '🥋', sports_gymnastics: '🤸',
  sports_esports: '🎮', sports_kabaddi: '🤼', sports_mma: '🥊',
  pool: '🏊', surfing: '🏄', rowing: '🚣', sailing: '⛵',
  fitness_center: '🏋️', directions_run: '🏃', directions_bike: '🚴',
  downhill_skiing: '⛷️', hiking: '🥾', skateboarding: '🛹',
  sports: '🏅', emoji_events: '🏆',
};
function getSportEmoji(iconName) {
  if (!iconName) return '🏅';
  return SPORT_ICON_MAP[iconName] || '🏅';
}

// ─── Saved Cards Helper (React/Desktop) ─────────────────────
let _deskCardsCache = null;
let _deskCardsCacheTs = 0;
async function loadSavedCardsDesktop() {
  if (_deskCardsCache && Date.now() - _deskCardsCacheTs < 60000) return _deskCardsCache;
  try {
    const res = await API.get('/client/cards');
    if (res.message === 'success') { _deskCardsCache = res.data || []; _deskCardsCacheTs = Date.now(); }
  } catch {}
  return _deskCardsCache || [];
}

/**
 * Show a card picker modal and initiate payment (DOM-based, works in any React context).
 * @param {Object} payload - Payment payload (service_type, amount, metadata, etc.)
 * @param {Object} opts - { serviceName, addToast }
 * @returns {Promise<boolean>} true if redirect happened
 */
async function initiatePaymentWithCardPicker(payload, opts) {
  const cards = await loadSavedCardsDesktop();
  return new Promise((resolve) => {
    const doPay = async (card) => {
      try {
        const res = card
          ? await API.post(`/client/cards/${card.ID}/pay`, payload)
          : await API.post('/client/payments/initiate', payload);
        if (res.message === 'success' && res.data?.redirect_html) {
          document.open(); document.write(res.data.redirect_html); document.close();
          resolve(true);
        } else {
          if (opts?.addToast) opts.addToast(res.data || res.detail || _t('tokencard.payment_error'), 'error');
          resolve(false);
        }
      } catch {
        if (opts?.addToast) opts.addToast(_t('tokencard.payment_error'), 'error');
        resolve(false);
      }
    };

    if (!cards || cards.length === 0) { doPay(null); return; }

    const _cardDigits = (c) => (c.CardPanMasked || '').replace(/\*/g, '').slice(-4) || '****';
    const overlay = document.createElement('div');
    overlay.className = 'nb-card-picker-overlay';
    overlay.innerHTML = `
      <div class="nb-card-picker" style="max-width:420px;border-radius:16px;margin:auto;align-self:center;">
        <div class="nb-card-picker__header"><h3>${_t('tokencard.select_card')}</h3><button class="nb-card-picker__close">&times;</button></div>
        ${opts?.serviceName ? `<p class="nb-card-picker__service">${opts.serviceName}${payload.amount ? ' — ' + parseInt(payload.amount).toLocaleString('pt-CV') + ' CVE' : ''}</p>` : ''}
        <div class="nb-card-picker__list">
          ${cards.map((c, i) => `<button class="nb-card-picker__card" data-idx="${i}"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="color:var(--nb-green)"><rect x="1" y="4" width="22" height="16" rx="2"/><line x1="1" y1="10" x2="23" y2="10"/></svg><span class="nb-card-picker__info"><span class="nb-card-picker__label">${c.CardLabel || ('•••• ' + _cardDigits(c))}</span><span class="nb-card-picker__pan">${'•••• ' + _cardDigits(c)}</span></span><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--nb-green)" stroke-width="2"><path d="M13 2L4 14h7l-1 8 9-12h-7l1-8z"/></svg></button>`).join('')}
        </div>
        <button class="nb-card-picker__normal"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="1" y="4" width="22" height="16" rx="2"/><line x1="1" y1="10" x2="23" y2="10"/></svg> ${_t('tokencard.or_new_payment')}</button>
      </div>`;

    const close = () => overlay.remove();
    overlay.querySelector('.nb-card-picker__close').onclick = () => { close(); resolve(false); };
    overlay.querySelector('.nb-card-picker__normal').onclick = () => { close(); doPay(null); };
    overlay.addEventListener('click', (e) => { if (e.target === overlay) { close(); resolve(false); } });
    overlay.querySelectorAll('.nb-card-picker__card').forEach(btn => {
      btn.onclick = () => { close(); doPay(cards[parseInt(btn.dataset.idx)]); };
    });
    document.body.appendChild(overlay);
  });
}

// ─── Components ─────────────────────────────────────────────

function Sidebar({ view, setView, activeTickets, width, onResizeStart, collapsed, onToggle }) {
  return (
    <aside className={`sidebar ${collapsed ? 'collapsed' : ''}`}>
      <div className="brand">
        <img src={window.__nbLogo || '../img/favicon/favicon-64.png'} alt="" className="symbol" />
        <img src="../img/LogoNHABEX-White.svg" alt="NhaBex" className="brand-logo brand-logo--dark" />
        <img src="../img/LogoNHABEX.svg" alt="NhaBex" className="brand-logo brand-logo--light" />
      </div>

      <div className="nav-section-label">{_t('webapp.sidebar_section_main')}</div>
      <div className={`nav-item ${view === 'home' ? 'active' : ''}`} onClick={() => setView('home')}>
        <Ico name="home" />
        <span>{_t('webapp.nav_home')}</span>
      </div>
      {_feat('appweb.ticket.view') && <div className={`nav-item ${view === 'tickets' ? 'active' : ''}`} onClick={() => setView('tickets')}>
        <Ico name="ticket" />
        <span>{_t('webapp.nav_tickets')}</span>
        {activeTickets > 0 && <span className="count">{activeTickets}</span>}
      </div>}
      {_feat('appweb.appointment.view') && <div className={`nav-item ${view === 'appointments' ? 'active' : ''}`} onClick={() => setView('appointments')}>
        <Ico name="calendar" />
        <span>{_t('webapp.nav_appointments')}</span>
      </div>}
      {_feat('appweb.order.track') && <div className={`nav-item ${view === 'tracking' ? 'active' : ''}`} onClick={() => setView('tracking')}>
        <Ico name="radar" />
        <span>{_t('webapp.nav_track_order')}</span>
      </div>}
      {_feat('appweb.agency.map') && <div className={`nav-item ${view === 'map' ? 'active' : ''}`} onClick={() => setView('map')}>
        <Ico name="map" />
        <span>{_t('webapp.nav_map')}</span>
      </div>}

      <div className="nav-section-label">{_t('webapp.sidebar_section_services')}</div>
      {_feat('appweb.pay.view') && <div className={`nav-item ${view === 'payments' ? 'active' : ''}`} onClick={() => setView('payments')}>
        <Ico name="wallet" />
        <span>{_t('webapp.nav_payments')}</span>
      </div>}
      {_feat('appweb.eats.view') && <div className="nav-item" onClick={() => window.open('https://eats.nhabex.com', '_blank')}>
        <Ico name="restaurant" />
        <span>{_t('webapp.eats_link') || 'NhaBex Eats'}</span>
      </div>}
      {_feat('appweb.store.view') && <div className={`nav-item ${view === 'store' ? 'active' : ''}`} onClick={() => setView('store')}>
        <Ico name="store" />
        <span>{_t('webapp.nav_store')}</span>
      </div>}
      {_feat('appweb.pharmacy.view') && <div className={`nav-item ${view === 'pharmacy' ? 'active' : ''}`} onClick={() => setView('pharmacy')}>
        <Ico name="pharmacy" />
        <span>{_t('webapp.nav_pharmacy')}</span>
      </div>}
      {_feat('appweb.flights.view') && <div className={`nav-item ${view === 'flights' ? 'active' : ''}`} onClick={() => setView('flights')}>
        <Ico name="plane" />
        <span>{_t('webapp.nav_flights')}</span>
      </div>}
      {_feat('appweb.cars.view') && <div className={`nav-item ${view === 'cars' ? 'active' : ''}`} onClick={() => setView('cars')}>
        <Ico name="car" />
        <span>{_t('webapp.nav_cars')}</span>
      </div>}
      {_feat('appweb.carwash.view') && <div className={`nav-item ${view === 'carwash' ? 'active' : ''}`} onClick={() => setView('carwash')}>
        <Ico name="carWash" />
        <span>{_t('webapp.nav_carwash')}</span>
      </div>}
      {_feat('appweb.games.view') && <div className={`nav-item ${view === 'games' ? 'active' : ''}`} onClick={() => setView('games')}>
        <Ico name="gamepad" />
        <span>{_t('webapp.nav_games')}</span>
      </div>}

      <div className="nav-section-label">{_t('webapp.sidebar_section_account')}</div>
      <div className={`nav-item ${view === 'profile' ? 'active' : ''}`} onClick={() => setView('profile')}>
        <Ico name="user" />
        <span>{_t('webapp.nav_profile')}</span>
      </div>
      <div className={`nav-item ${view === 'settings' ? 'active' : ''}`} onClick={() => setView('settings')}>
        <Ico name="settings" />
        <span>{_t('webapp.nav_settings')}</span>
      </div>

      <div className="sidebar-footer">
        <h4>{_t('webapp.notif_cta_title')}</h4>
        <p>{_t('webapp.notif_cta_desc')}</p>
        <button className="sidebar-cta" onClick={() => {
          if (!('Notification' in window)) { window.__nbAddToast && window.__nbAddToast(_t('webapp.notif_unsupported'), 'error'); return; }
          if (Notification.permission === 'granted') { window.__nbAddToast && window.__nbAddToast(_t('webapp.notif_already_enabled'), 'success', 3000); return; }
          if (Notification.permission === 'denied') { window.__nbAddToast && window.__nbAddToast(_t('webapp.notif_blocked'), 'warning', 8000); return; }
          Notification.requestPermission().then(p => {
            if (p === 'granted') { window.__nbAddToast && window.__nbAddToast(_t('webapp.notif_enabled_success'), 'success', 3000); }
            else { window.__nbAddToast && window.__nbAddToast(_t('webapp.notif_denied'), 'warning', 5000); }
          });
        }}>
          {('Notification' in window && Notification.permission === 'granted') ? _t('webapp.notif_btn_active') : _t('webapp.notif_btn_enable')}
        </button>
      </div>
      <button className="sidebar-toggle" onClick={onToggle} title={collapsed ? _t('webapp.sidebar_expand') : _t('webapp.sidebar_collapse')} aria-label={collapsed ? _t('webapp.sidebar_expand') : _t('webapp.sidebar_collapse')}>
        <span style={{ display: 'inline-flex', transform: collapsed ? 'rotate(0deg)' : 'rotate(180deg)', transition: 'transform 200ms var(--nb-ease-std)' }}>
          <Ico name="chevR" size={14} />
        </span>
        <span className="sidebar-toggle-label">{collapsed ? (_t('webapp.sidebar_expand') || 'Expandir') : (_t('webapp.sidebar_collapse') || 'Recolher')}</span>
      </button>
      <div className="sidebar-resizer" onMouseDown={onResizeStart} title={_t('webapp.sidebar_resize')} />
    </aside>
  );
}

// ─── User Profile Dropdown ──────────────────────────────────
function UserProfileDropdown({ user, onSignOut, onClose, activeTicketCount, onViewTickets, onEditProfile, theme, onToggleTheme }) {
  return (
    <div className="profile-dropdown" onClick={e => e.stopPropagation()}>
      {/* Header with photo/avatar */}
      <div className="profile-dropdown__header">
        {user.photo_url ? (
          <img src={user.photo_url} alt="" className="profile-dropdown__photo" referrerPolicy="no-referrer" />
        ) : (
          <div className="profile-dropdown__avatar">{user.initials}</div>
        )}
        <div className="profile-dropdown__info">
          <div className="profile-dropdown__name">{user.name}</div>
          <div className="profile-dropdown__email">{user.email}</div>
        </div>
      </div>

      {/* User details */}
      <div className="profile-dropdown__details">
        {user.phone && (
          <div className="profile-dropdown__row">
            <Ico name="phone" size={14} />
            <span>{user.phone_country_code || ''} {user.phone}</span>
          </div>
        )}
        {user.birthday && (
          <div className="profile-dropdown__row">
            <Ico name="calendar" size={14} />
            <span>{new Date(user.birthday).toLocaleDateString('pt', { day: '2-digit', month: '2-digit', year: 'numeric' })}</span>
          </div>
        )}
        {user.registry_date && (
          <div className="profile-dropdown__row">
            <Ico name="calendar" size={14} />
            <span>{_t('webapp.member_since')} {new Date(user.registry_date).toLocaleDateString('pt', { day: '2-digit', month: '2-digit', year: 'numeric' })}</span>
          </div>
        )}
      </div>

      {/* Tickets summary */}
      <div className="profile-dropdown__section">
        <button className="profile-dropdown__action" onClick={() => { onViewTickets(); onClose(); }}>
          <Ico name="ticket" size={16} />
          <span>{_t('webapp.my_tickets')}</span>
          {activeTicketCount > 0 && <span className="profile-dropdown__badge">{activeTicketCount} {activeTicketCount > 1 ? _t('webapp.active_count_plural') : _t('webapp.active_count')}</span>}
        </button>
      </div>

      {/* Actions */}
      <div className="profile-dropdown__section">
        <button className="profile-dropdown__action" onClick={() => { onEditProfile(); onClose(); }}>
          <Ico name="settings" size={16} />
          <span>{_t('webapp.edit_profile')}</span>
        </button>
        <button className="profile-dropdown__action" onClick={onToggleTheme}>
          <Ico name={theme === 'dark' ? 'sun' : 'moon'} size={16} />
          <span>{theme === 'dark' ? _t('webapp.theme_light_mode') : _t('webapp.theme_dark_mode')}</span>
        </button>
      </div>

      {/* Logout */}
      <div className="profile-dropdown__footer">
        <button className="profile-dropdown__logout" onClick={onSignOut}>
          <Ico name="logout" size={16} />
          <span>{_t('webapp.logout')}</span>
        </button>
      </div>
    </div>
  );
}

// ─── Wallet Dropdown ────────────────────────────────────────
function WalletDropdown({ onClose, onViewAll, onPayPending }) {
  const [payments, setPayments] = useState([]);
  const [loading, setLoading] = useState(true);
  const [savedCards, setSavedCards] = useState([]);
  const [addingCard, setAddingCard] = useState(false);

  useEffect(() => {
    API.get('/client/payments').then(res => {
      if (res.message === 'success' && Array.isArray(res.data)) setPayments(res.data.slice(0, 5));
      setLoading(false);
    }).catch(() => setLoading(false));
    API.get('/client/cards').then(res => {
      if (res.message === 'success') setSavedCards(res.data || []);
    }).catch(() => {});
  }, []);

  const cardDigits = (c) => (c.CardPanMasked || '').replace(/\*/g, '').slice(-4) || '****';
  const addCard = async () => {
    if (addingCard) return;
    setAddingCard(true);
    try {
      const res = await API.post('/client/cards/tokenize', { min_amount: 1, return_path: window.location.origin + window.location.pathname + '?view=payments' });
      if (res.message === 'success' && res.data?.redirect_html) { document.open(); document.write(res.data.redirect_html); document.close(); }
      else { setAddingCard(false); }
    } catch { setAddingCard(false); }
  };
  const removeCard = async (card) => {
    try {
      const res = await API.post('/client/cards/' + card.ID + '/cancel');
      if (res.message === 'success') {
        setSavedCards(prev => prev.filter(c => c.ID !== card.ID));
        _deskCardsCache = null;
      }
    } catch {}
  };

  const statusMeta = {
    success: { label: _t('webapp.pay_status_success'), color: '#02A586', bg: 'rgba(2,165,134,0.12)' },
    pending: { label: _t('webapp.pay_status_pending'), color: '#f59e0b', bg: 'rgba(245,158,11,0.12)' },
    error:   { label: _t('webapp.pay_status_error'),   color: '#ef4444', bg: 'rgba(239,68,68,0.12)' },
    canceled:{ label: _t('webapp.pay_status_canceled'), color: '#6b7280', bg: 'rgba(107,114,128,0.12)' },
  };

  const stypeMeta = {
    purchase: 'Pagamento', phone_topup: 'Carregamento', electricity: 'Electricidade',
    water: 'Água', insurance: 'Seguro', internet: 'Internet', other: 'Outro',
    games_booking: 'Reserva Campo', games_tournament: 'Torneio', games_subscription: 'Plano Games',
    car_route_booking: 'Transporte', wash_booking: 'Car Wash', store_purchase: 'Loja', beauty_prepaid: 'Beleza',
  };

  const totalSuccess = payments.filter(p => p.Status === 'success').reduce((s, p) => s + parseFloat(p.Amount || 0), 0);
  const pendingCount = payments.filter(p => p.Status === 'pending').length;

  const formatDate = (d) => {
    if (!d) return '';
    const dt = new Date(d);
    const now = new Date();
    const diff = Math.floor((now - dt) / 86400000);
    if (diff === 0) return 'Hoje';
    if (diff === 1) return 'Ontem';
    return dt.toLocaleDateString('pt', { day: '2-digit', month: 'short' });
  };

  return (
    <div className="wallet-dropdown" onClick={e => e.stopPropagation()}>
      <div className="wallet-dropdown__header">
        <div className="wallet-dropdown__title">
          <Ico name="wallet" size={18} />
          <span>NhaBex Pay</span>
        </div>
      </div>

      {/* Summary cards */}
      <div className="wallet-dropdown__summary">
        <div className="wallet-dropdown__card">
          <span className="wallet-dropdown__card-label">{_t('webapp.wallet_recent_spent')}</span>
          <span className="wallet-dropdown__card-value" style={{ color: 'var(--nb-green)' }}>{totalSuccess.toLocaleString('pt')} CVE</span>
        </div>
        {pendingCount > 0 && (
          <div className="wallet-dropdown__card">
            <span className="wallet-dropdown__card-label">{_t('webapp.wallet_pending')}</span>
            <span className="wallet-dropdown__card-value" style={{ color: '#f59e0b' }}>{pendingCount}</span>
          </div>
        )}
      </div>

      {/* Saved cards */}
      <div className="wallet-dropdown__section-label" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <span>{_t('tokencard.title')}</span>
        <button className="wallet-dropdown__add-card" onClick={addCard} disabled={addingCard}>
          {addingCard ? <span className="btn-spinner" style={{ width: 10, height: 10 }} /> : '+'} {_t('tokencard.add_card')}
        </button>
      </div>
      <div className="wallet-dropdown__cards">
        {savedCards.length === 0 ? (
          <div style={{ padding: '6px 16px 10px', fontSize: 11, color: 'var(--d-fg-3)' }}>{_t('tokencard.no_cards_desc')}</div>
        ) : savedCards.map(c => (
          <div key={c.ID} className="wallet-dropdown__card-item">
            <Ico name="wallet" size={14} />
            <span style={{ flex: 1, fontSize: 12, fontWeight: 500 }}>{c.CardLabel || ('•••• ' + cardDigits(c))}</span>
            <span style={{ fontSize: 11, color: 'var(--d-fg-3)' }}>{'•••• ' + cardDigits(c)}</span>
            <button className="wallet-dropdown__card-remove" onClick={(e) => { e.stopPropagation(); removeCard(c); }} title={_t('tokencard.remove_card')}>
              &times;
            </button>
          </div>
        ))}
      </div>

      {/* Recent transactions */}
      <div className="wallet-dropdown__section-label">{_t('webapp.wallet_recent')}</div>
      <div className="wallet-dropdown__list">
        {loading ? (
          <div style={{ padding: 20, textAlign: 'center' }}><div className="nb-spinner" style={{ width: 20, height: 20, margin: '0 auto' }} /></div>
        ) : payments.length === 0 ? (
          <div style={{ padding: 20, textAlign: 'center', color: 'var(--d-fg-3)', fontSize: 12 }}>{_t('webapp.wallet_empty')}</div>
        ) : (
          payments.map(p => {
            const st = statusMeta[p.Status] || statusMeta.error;
            const stypeIcon = { phone_topup: 'phone', electricity: 'bolt', water: 'activity', insurance: 'shield', internet: 'wifi', store_purchase: 'store', games_booking: 'field', games_tournament: 'trophy', games_subscription: 'wallet', wash_booking: 'activity', car_route_booking: 'truck', beauty_prepaid: 'user' }[p.ServiceType] || 'wallet';
            return (
              <div key={p.ID} className="wallet-dropdown__item">
                {p.ServiceLogoURL ? (
                  <img src={p.ServiceLogoURL} alt="" className="wallet-dropdown__item-icon" style={{ objectFit: 'contain', borderRadius: 8, padding: 2 }} referrerPolicy="no-referrer" />
                ) : (
                  <div className="wallet-dropdown__item-icon" style={{ background: st.bg, color: st.color }}>
                    <Ico name={stypeIcon} size={14} />
                  </div>
                )}
                <div className="wallet-dropdown__item-info">
                  <span className="wallet-dropdown__item-name">{p.ServiceName || stypeMeta[p.ServiceType] || p.ServiceType}</span>
                  <span className="wallet-dropdown__item-date">{formatDate(p.created_at)}</span>
                </div>
                <div className="wallet-dropdown__item-amount">
                  <span>{parseFloat(p.Amount).toLocaleString('pt')}</span>
                  <span className="wallet-dropdown__item-currency">{p.CurrencyCode || 'CVE'}</span>
                </div>
                <span className="wallet-dropdown__item-status" style={{ background: st.bg, color: st.color }}>{st.label}</span>
                {p.Status === 'pending' && onPayPending && (
                  <button className="wallet-dropdown__pay-btn" onClick={(e) => { e.stopPropagation(); onPayPending(p); }} title={_t('webapp.pay_btn_pay_pending')}>
                    <Ico name="send" size={12} /> {_t('webapp.wallet_pay') || 'Pagar'}
                  </button>
                )}
              </div>
            );
          })
        )}
      </div>

      {/* Footer */}
      <div className="wallet-dropdown__footer">
        <button className="wallet-dropdown__btn" onClick={() => { onViewAll(); onClose(); }}>
          <Ico name="receipt" size={14} />
          <span>{_t('webapp.wallet_view_all')}</span>
        </button>
      </div>
    </div>
  );
}

// ─── Country flag emoji from ISO 3166-1 alpha-2 ──────
function countryFlag(code) {
  if (!code || code.length !== 2) return '';
  return String.fromCodePoint(...[...code.toUpperCase()].map(c => 0x1F1E6 + c.charCodeAt(0) - 65));
}

function CountrySelector() {
  const [open, setOpen] = useState(false);
  const geo = window.__nbGeo || { current: 'CV', countries: [] };
  const apiBase = (window.__nbConfig && window.__nbConfig.apiUrl) || '/api';

  if (!geo.countries || geo.countries.length <= 1) return null;

  return (
    <div style={{ position: 'relative' }}>
      <button className="geo-selector-btn" onClick={() => setOpen(!open)}
        title={_t('webapp.country_selector') || 'Selecionar pais'}>
        <span style={{ fontSize: 16 }}>{countryFlag(geo.current)}</span>
        <span className="geo-selector-code">{geo.current}</span>
        <Ico name="chevD" size={10} />
      </button>
      {open && (
        <>
          <div style={{ position: 'fixed', inset: 0, zIndex: 9998 }} onClick={() => setOpen(false)} />
          <div className="geo-dropdown">
            <div className="geo-dropdown__title">{_t('webapp.select_country') || 'Selecionar pais'}</div>
            {geo.countries.map(c => (
              <a key={c.CountryCode} href={apiBase + '/geo-switch?country=' + c.CountryCode}
                 className={'geo-dropdown__item' + (c.CountryCode === geo.current ? ' geo-dropdown__item--active' : '')}
                 onClick={() => setOpen(false)}>
                <span style={{ fontSize: 18 }}>{countryFlag(c.CountryCode)}</span>
                <span>{c.CountryName}</span>
                {c.CountryCode === geo.current && <Ico name="check" size={14} />}
              </a>
            ))}
          </div>
        </>
      )}
    </div>
  );
}

function Topbar({ view, currentCategory, onSearch, query, signedIn, authChecking, user, onSignOut, onSearchSelect, activeTicketCount, onViewTickets, onEditProfile, theme, onToggleTheme, notifUnread, onNotifications, onHelp, onLogin, locationGranted, locationName, onRequestLocation, onGoHome, onViewPayments, onPayPending, cartCount, onViewCart }) {
  const [searchFocused, setSearchFocused] = useState(false);
  const [profileOpen, setProfileOpen] = useState(false);
  const [walletOpen, setWalletOpen] = useState(false);
  const [searchScope, setSearchScope] = useState('all');

  return (
    <div className="topbar">
      <div className="crumbs">
        {view !== 'home' && <>
          <span className="sep">/</span>
          <span className={!currentCategory ? 'now' : 'crumb-link'} onClick={currentCategory ? onGoHome : undefined}>
            {currentCategory || { home: _t('webapp.nav_home'), tickets: _t('webapp.nav_tickets'), appointments: _t('webapp.nav_appointments'), tracking: _t('webapp.nav_track_order'), map: _t('webapp.nav_map'), payments: _t('webapp.nav_payments'), store: _t('webapp.nav_store'), pharmacy: _t('webapp.nav_pharmacy'), flights: _t('webapp.nav_flights'), cars: _t('webapp.nav_cars'), carwash: _t('webapp.wash_title') || 'Lavagem', games: _t('webapp.nav_games'), profile: _t('webapp.nav_profile'), settings: _t('webapp.nav_settings') }[view] || view.charAt(0).toUpperCase() + view.slice(1)}
          </span>
        </>}
        {view === 'category' && currentCategory && <>
          <span className="sep">/</span>
          <span className="now">{currentCategory}</span>
        </>}
      </div>

      <div className="topbar-search" style={{ position:'relative' }}>
        <select className="search-scope" value={searchScope} onChange={e => setSearchScope(e.target.value)}
          title={_t('webapp.search_scope') || 'Filtrar pesquisa'}>
          <option value="all">{_t('webapp.search_all') || 'Tudo'}</option>
          <option value="stores">{_t('webapp.search_stores') || 'Lojas'}</option>
          <option value="services">{_t('webapp.search_services') || 'Serviços'}</option>
          <option value="pharmacies">{_t('webapp.search_pharmacies') || 'Farmácias'}</option>
        </select>
        <div className="search-input-wrap">
          <span className="ic"><Ico name="search" size={16} /></span>
          <input
            placeholder={searchScope === 'all' ? (_t('webapp.topbar_search_placeholder')) : (_t('webapp.search_in') || 'Pesquisar em') + ' ' + ({stores: _t('webapp.search_stores') || 'Lojas', services: _t('webapp.search_services') || 'Serviços', pharmacies: _t('webapp.search_pharmacies') || 'Farmácias'}[searchScope] || '')}
            value={query}
            onChange={(e) => onSearch(e.target.value)}
            onFocus={() => setSearchFocused(true)}
            onBlur={() => setTimeout(() => setSearchFocused(false), 200)}
            onKeyDown={(e) => e.key === 'Escape' && (onSearch(''), e.target.blur())}
          />
          {query && <button onClick={() => onSearch('')} style={{ position:'absolute', right:12, top:'50%', transform:'translateY(-50%)', background:'none', border:'none', cursor:'pointer', color:'var(--d-fg-3)', fontSize:16 }}>&times;</button>}
        </div>
        {searchFocused && <SearchResults query={query} onSelectResult={onSearchSelect} onClose={() => { onSearch(''); setSearchFocused(false); }} />}
      </div>

      <div className="topbar-actions">
        <CountrySelector />
        <button
          className={`topbar-location ${locationGranted ? 'granted' : ''}`}
          onClick={onRequestLocation}
          title={locationGranted ? (locationName || _t('webapp.location_active')) : _t('webapp.location_denied_click')}
        >
          <Ico name={locationGranted ? 'pin' : 'pinOff'} size={14} />
          <span className="topbar-loc-text">{locationGranted ? (locationName || _t('webapp.location_getting')) : _t('webapp.geo_denied')}</span>
        </button>
        <button className="icon-btn icon-btn--labeled" title={_t('webapp.topbar_help')} aria-label={_t('webapp.topbar_help')} onClick={onHelp}><Ico name="help" /><span className="icon-btn__label">{_t('webapp.topbar_help')}</span></button>
        <button className="icon-btn" title={_t('webapp.topbar_notifications')} aria-label={_t('webapp.topbar_notifications')} onClick={onNotifications} style={{ position: 'relative' }}>
          <Ico name="bell" />
          {notifUnread > 0 && <span className="notif-badge">{notifUnread > 99 ? '99+' : notifUnread}</span>}
        </button>
        {cartCount > 0 && (
          <button className="icon-btn" title={_t('webapp.nav_store') + ' — ' + cartCount + ' ' + (_t('webapp.store_items') || 'itens')} aria-label={_t('webapp.nav_store')} onClick={onViewCart} style={{ position: 'relative' }}>
            <Ico name="store" />
            <span className="notif-badge" style={{ background: 'var(--nb-green)' }}>{cartCount > 99 ? '99+' : cartCount}</span>
          </button>
        )}
        {signedIn && (
          <div style={{ position: 'relative' }}>
            <button className="icon-btn" title={_t('webapp.wallet_title')} aria-label={_t('webapp.wallet_title')} onClick={() => { setWalletOpen(!walletOpen); setProfileOpen(false); }}>
              <Ico name="wallet" />
            </button>
            {walletOpen && (
              <>
                <div style={{ position: 'fixed', inset: 0, zIndex: 99 }} onClick={() => setWalletOpen(false)} />
                <WalletDropdown onClose={() => setWalletOpen(false)} onViewAll={onViewPayments} onPayPending={(p) => { setWalletOpen(false); onPayPending && onPayPending(p); }} />
              </>
            )}
          </div>
        )}
        <button className="icon-btn" title={theme === 'dark' ? _t('webapp.theme_light_mode') : _t('webapp.theme_dark_mode')} aria-label="Toggle theme" onClick={onToggleTheme}>
          <Ico name={theme === 'dark' ? 'sun' : 'moon'} />
        </button>
        {signedIn ? (
          <div style={{ position:'relative' }}>
            <button className="user-pill" onClick={() => { setProfileOpen(!profileOpen); setWalletOpen(false); }} title={_t('webapp.topbar_profile')}>
              {user.photo_url ? (
                <img src={user.photo_url} alt="" referrerPolicy="no-referrer" style={{ width:28, height:28, borderRadius:'50%', objectFit:'cover' }} />
              ) : (
                <span className="avatar">{user.initials}</span>
              )}
              <span className="name">{user.name ? (user.name.split(' ')[0] + (user.name.split(' ')[1]?.[0] ? ' '+user.name.split(' ')[1][0]+'.' : '')) : ''}</span>
              <Ico name={profileOpen ? 'chevD' : 'chevR'} size={12} />
            </button>
            {profileOpen && (
              <>
                <div style={{ position:'fixed', inset:0, zIndex:99 }} onClick={() => setProfileOpen(false)} />
                <UserProfileDropdown
                  user={user}
                  onSignOut={() => { setProfileOpen(false); onSignOut(); }}
                  onClose={() => setProfileOpen(false)}
                  activeTicketCount={activeTicketCount}
                  onViewTickets={onViewTickets}
                  onEditProfile={onEditProfile}
                  theme={theme}
                  onToggleTheme={onToggleTheme}
                />
              </>
            )}
          </div>
        ) : authChecking ? (
          <div className="skeleton-pulse" style={{ width: 60, height: 28, borderRadius: 14 }} />
        ) : (
          <button className="signin-btn" onClick={onLogin}>{_t('webapp.login_btn')}</button>
        )}
      </div>
    </div>
  );
}

const CAT_COLORS = [
  { bg: 'rgba(2,165,134,0.18)', fg: '#02A586', border: 'rgba(2,165,134,0.15)' },   // green (default)
  { bg: 'rgba(25,118,210,0.18)', fg: '#1976D2', border: 'rgba(25,118,210,0.15)' },  // blue
  { bg: 'rgba(156,39,176,0.18)', fg: '#9C27B0', border: 'rgba(156,39,176,0.15)' },  // purple
  { bg: 'rgba(230,81,0,0.18)', fg: '#E65100', border: 'rgba(230,81,0,0.15)' },      // orange
  { bg: 'rgba(0,121,107,0.18)', fg: '#00796B', border: 'rgba(0,121,107,0.15)' },    // teal
  { bg: 'rgba(198,40,40,0.18)', fg: '#C62828', border: 'rgba(198,40,40,0.15)' },    // red
  { bg: 'rgba(21,101,192,0.18)', fg: '#1565C0', border: 'rgba(21,101,192,0.15)' },  // indigo
  { bg: 'rgba(46,125,50,0.18)', fg: '#2E7D32', border: 'rgba(46,125,50,0.15)' },    // dark green
  { bg: 'rgba(245,127,23,0.18)', fg: '#F57F17', border: 'rgba(245,127,23,0.15)' },  // amber
  { bg: 'rgba(0,131,143,0.18)', fg: '#00838F', border: 'rgba(0,131,143,0.15)' },    // cyan
];
function catColorIndex(id) {
  if (!id) return 0;
  let h = 0;
  const s = String(id);
  for (let i = 0; i < s.length; i++) h = s.charCodeAt(i) + ((h << 5) - h);
  return Math.abs(h) % CAT_COLORS.length;
}

function CategoryCard({ cat, onOpen }) {
  const m = cat.title.match(/^(.*?)\s*(\([^)]+\))\s*$/);
  const titleMain = m ? m[1] : cat.title;
  const titleAside = m ? m[2] : null;
  const clr = CAT_COLORS[catColorIndex(cat.id)];

  return (
    <div className="category-card" onClick={() => onOpen(cat)}>
      <div className="cat-icon" style={{ background: clr.bg, color: clr.fg, borderColor: clr.border }}><Ico name={cat.icon || 'briefcase'} size={20} /></div>
      <div className="cat-card__body">
        <h3>{titleMain}{titleAside ? ` ${titleAside}` : ''}</h3>
        {cat.sub && <div className="sub">{cat.sub}</div>}
      </div>
      <span className="arrow"><Ico name="chevR" size={16} /></span>
    </div>
  );
}

// ─── Category usage tracking (localStorage) ────────────────
function getCatUsage() {
  try { return JSON.parse(localStorage.getItem(_geoKey('nb_cat_usage')) || '{}'); } catch { return {}; }
}
function trackCatUsage(catId, type) {
  const usage = getCatUsage();
  if (!usage[catId]) usage[catId] = { visits: 0, tickets: 0, last: 0 };
  if (type === 'visit') usage[catId].visits++;
  if (type === 'ticket') usage[catId].tickets++;
  usage[catId].last = Date.now();
  try { localStorage.setItem(_geoKey('nb_cat_usage'), JSON.stringify(usage)); } catch {}
}
function sortCatsByUsage(cats) {
  const usage = getCatUsage();
  const hasUsage = Object.keys(usage).length > 0;
  if (!hasUsage) return cats;
  return [...cats].sort((a, b) => {
    const ua = usage[a.id] || { visits: 0, tickets: 0, last: 0 };
    const ub = usage[b.id] || { visits: 0, tickets: 0, last: 0 };
    const scoreA = ua.tickets * 3 + ua.visits;
    const scoreB = ub.tickets * 3 + ub.visits;
    if (scoreB !== scoreA) return scoreB - scoreA;
    return ub.last - ua.last;
  });
}

// ─── Recent agencies tracking (localStorage, scoped by country) ───────────────
const NB_RECENT_MAX = 8;

function saveRecentAgency(agency, company) {
  try {
    const key = _geoKey('nb_recent_agencies');
    const hash = agency.Hash || agency.Token || agency.hash || '';
    if (!hash) return;
    const raw = localStorage.getItem(key);
    let list = raw ? JSON.parse(raw) : [];
    list = list.filter(r => r.hash !== hash);
    list.unshift({
      hash,
      name: agency.Name || agency.name || agency.DesignationWeb || '',
      zone: agency.Zone || agency.City || '',
      companyHash: company?.hash || company?.Hash || agency.ID_Company || '',
      companyName: company?.name || company?.Name || agency.Company || '',
      logo: agency.LogoURL || company?.logo || '',
      date: new Date().toLocaleDateString('pt-PT', { day: '2-digit', month: '2-digit', year: 'numeric' }),
      ts: Date.now(),
    });
    list = list.slice(0, NB_RECENT_MAX);
    localStorage.setItem(key, JSON.stringify(list));
  } catch (_) {}
}

function getRecentAgencies() {
  try {
    const key = _geoKey('nb_recent_agencies');
    const raw = localStorage.getItem(key);
    if (!raw) return [];
    const list = JSON.parse(raw);
    const cutoff = Date.now() - 30 * 24 * 60 * 60 * 1000;
    return list.filter(r => r.ts > cutoff);
  } catch (_) {
    return [];
  }
}

function HomeView({ onOpenCategory, query, categories, loading, recents, onSelectRecent, favAgencies, onSelectFavAgency }) {
  const filtered = useMemo(() => {
    const sorted = sortCatsByUsage(categories);
    if (!query.trim()) return sorted;
    const q = query.toLowerCase();
    return sorted.filter(c =>
      (c.title || '').toLowerCase().includes(q) || (c.sub || '').toLowerCase().includes(q)
    );
  }, [query, categories]);

  if (loading) {
    return <SkeletonCards count={6} />;
  }

  return (
    <>
      {/* Favorite agencies */}
      {favAgencies && favAgencies.length > 0 && (
        <>
          <div className="section-head">
            <h2><Ico name="star" size={16} /> Favoritos</h2>
            <div className="right">{favAgencies.length} agência{favAgencies.length > 1 ? 's' : ''}</div>
          </div>
          <div className="category-grid">
            {favAgencies.map((a, i) => (
              <div className="category-card" key={a.hash || i} onClick={() => onSelectFavAgency && onSelectFavAgency(a)}>
                <div className="cat-icon" style={{ color: 'var(--nb-gold, #FDB812)' }}><Ico name="star" size={20} /></div>
                <div className="cat-card__body">
                  <h3>{a.name}</h3>
                  {(a.zone || a.company) && <div className="sub">{a.zone || a.company}</div>}
                </div>
                <span className="arrow"><Ico name="chevR" size={16} /></span>
              </div>
            ))}
          </div>
          <div style={{ height: 22 }} />
        </>
      )}

      {/* Recent tickets */}
      {recents.length > 0 && (
        <>
          <div className="section-head">
            <h2>{_t('webapp.recent')}</h2>
            <div className="right">Volta a marcar com 1 clique</div>
          </div>
          <div className="recents">
            {recents.map((r, i) => (
              <div className="recent-card" key={r.id || i} onClick={() => onSelectRecent && onSelectRecent(r)}>
                <div className="ico"><Ico name={r.icon || 'building'} size={20} /></div>
                <div className="info">
                  <div className="label">{r.name}</div>
                  {r.when && <div className="when">{r.when}</div>}
                </div>
                <Ico name="chevR" size={14} />
              </div>
            ))}
          </div>
          <div style={{ height: 22 }} />
        </>
      )}

      <div className="section-head">
        <h2>
          {_t('webapp.select_category') || 'Selecione a categoria'}
          <span className="num">{filtered.length} {filtered.length === 1 ? _t('webapp.category_singular') || 'categoria' : _t('webapp.categories_plural') || 'categorias'}</span>
        </h2>
      </div>

      <div className="category-grid">
        {filtered.map(c => (
          <CategoryCard key={c.id} cat={c} onOpen={onOpenCategory} />
        ))}
      </div>
    </>
  );
}

// ─── Company View (agencies in a company) ───────────────────
function CompanyView({ company, onBack, onSelectAgency, userLat, userLng }) {
  const [agencies, setAgencies] = useState([]);
  const [loading, setLoading] = useState(true);

  // Haversine distance calculation
  const haversineKm = (lat1, lng1, lat2, lng2) => {
    const R = 6371, toRad = (d) => d * Math.PI / 180;
    const dLat = toRad(lat2 - lat1), dLng = toRad(lng2 - lng1);
    const a = Math.sin(dLat / 2) ** 2 + Math.cos(toRad(lat1)) * Math.cos(toRad(lat2)) * Math.sin(dLng / 2) ** 2;
    return R * 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
  };

  const fmtDist = (km) => km < 1 ? Math.round(km * 1000) + ' m' : km.toFixed(1) + ' km';

  useEffect(() => {
    setLoading(true);
    const hasGeo = userLat && userLng;

    // If user has location, try nearby API first for distance-sorted results
    const nearbyPromise = hasGeo
      ? API.get('/data/agencies/nearby', { company: company.hash, lat: userLat, lng: userLng, radius: 100, limit: 50 })
          .catch(() => null)
      : Promise.resolve(null);

    nearbyPromise.then(nearbyRes => {
      if (nearbyRes?.message === 'success' && nearbyRes.data?.length > 0) {
        // Nearby API returns distance-sorted agencies
        setAgencies(nearbyRes.data);
        if (nearbyRes.data.length === 1) onSelectAgency(nearbyRes.data[0], company);
        setLoading(false);
      } else {
        // Fallback to standard API, calculate distance client-side
        API.get('/data/agencies', { company: company.hash }).then(res => {
          if (res.message === 'success' && res.data) {
            let list = Array.isArray(res.data) ? res.data : (res.data.agencies || []);
            // Sort by distance if geo available
            if (hasGeo) {
              list = list.map(a => {
                if (a.Lat && a.Long) {
                  a.distance_km = Math.round(haversineKm(userLat, userLng, parseFloat(a.Lat), parseFloat(a.Long)) * 10) / 10;
                }
                return a;
              }).sort((a, b) => (a.distance_km || 9999) - (b.distance_km || 9999));
            }
            setAgencies(list);
            if (list.length === 1) onSelectAgency(list[0], company);
          }
          setLoading(false);
        }).catch(() => setLoading(false));
      }
    });
  }, [company.hash, userLat, userLng]);

  return (
    <>
      <div className="detail-head">
        <button className="back-btn" onClick={onBack}><Ico name="arrowL" /></button>
        <div className="titles">
          <h1>{company.name}</h1>
          <p>{agencies.length} agências</p>
        </div>
      </div>

      {loading ? (
        <SkeletonRows count={4} />
      ) : agencies.length === 0 ? (
        <div style={{ padding: 40, textAlign: 'center', color: 'var(--d-fg-3)' }}>Nenhuma agência encontrada.</div>
      ) : (
        <div className="agency-list">
          {agencies.map((a, i) => (
            <div className="agency-row" key={a.Hash || a.Token || i} onClick={() => onSelectAgency(a, company)} style={{ cursor: 'pointer' }}>
              <div>
                <div className="name">{a.Name || a.name}</div>
                <div className="where">
                  <Ico name="pin" size={12} />{a.Zone || a.City || a.where || ''}
                  {a.distance_km != null && (
                    <span className="agency-distance">· {fmtDist(a.distance_km)}</span>
                  )}
                </div>
              </div>
              <button className="book-btn" onClick={(e) => { e.stopPropagation(); onSelectAgency(a, company); }}>
                Ver serviços
              </button>
            </div>
          ))}
        </div>
      )}
    </>
  );
}

// ─── Agency Services View ───────────────────────────────────
function AgencyServicesView({ agency, company, onBack, onPrintTicket, signedIn, isAgencyFav, onToggleFav, isServiceFav, onToggleServiceFav, onServiceInfo, hasActiveTicketForService }) {
  const [services, setServices] = useState([]);
  const [agencyInfo, setAgencyInfo] = useState(null);
  const [working, setWorking] = useState(null);
  const [timeTable, setTimeTable] = useState(null);
  const [showTimetable, setShowTimetable] = useState(false);
  const [loading, setLoading] = useState(true);
  const [lastUpdate, setLastUpdate] = useState(null);
  const [clientTypes, setClientTypes] = useState([]);
  const [showTypeModal, setShowTypeModal] = useState(null);
  const debounceRef = useRef(null);
  const viewChannelRef = useRef(null);
  const viewHandlersRef = useRef(null);

  const agencyHash = agency.Hash || agency.Token || agency.hash;
  const companyHash = company?.hash || company?.Hash || '';

  const refreshServices = useCallback(() => {
    API.get(`/data/agencies/${agencyHash}/services-monitoring`, { company: companyHash }).then(res => {
      if (res.message === 'success' && res.data) {
        setServices(res.data.services || []);
        setAgencyInfo(res.data.agency || null);
        setWorking(res.data.working || null);
        if (res.data.timeTable) setTimeTable(res.data.timeTable);
        setLastUpdate(new Date());
      }
    }).catch(() => {});
  }, [agencyHash, companyHash]);

  // Initial load + Pusher subscription
  useEffect(() => {
    setLoading(true);
    API.get(`/data/agencies/${agencyHash}/services-monitoring`, { company: companyHash }).then(res => {
      if (res.message === 'success' && res.data) {
        setServices(res.data.services || []);
        setAgencyInfo(res.data.agency || null);
        setWorking(res.data.working || null);
        if (res.data.timeTable) setTimeTable(res.data.timeTable);
        setLastUpdate(new Date());

        // Load client types for this agency
        API.get(`/data/agencies/${agencyHash}/client-types`, { company: companyHash }).then(ctRes => {
          if (ctRes.message === 'success' && Array.isArray(ctRes.data)) {
            const allTypes = ctRes.data.filter(ct => (ct.ServicesID && ct.ServicesID.length > 0) || (ct.ServicesHash && ct.ServicesHash.length > 0));
            setClientTypes(allTypes);
          }
        }).catch(() => {});

        // Save to recent agencies (for deep-link and direct access)
        const ai = res.data.agency;
        if (ai) saveRecentAgency({ Hash: ai.Hash, Name: ai.Name, Zone: ai.Zone, LogoURL: ai.LogoURL, ID_Company: ai.ID_Company, Company: ai.Company }, company);

        // Subscribe to Pusher for real-time updates
        const pusherConfig = res.data.pusher;
        if (pusherConfig?.status && pusherConfig.key) {
          PusherClient.init(pusherConfig.key, pusherConfig.clusterID || 'eu');
          const channel = pusherConfig.subscribe;
          if (channel) {
            viewChannelRef.current = channel;
            PusherClient.subscribe(channel);
            const debouncedRefresh = () => {
              clearTimeout(debounceRef.current);
              debounceRef.current = setTimeout(refreshServices, 2000);
            };
            viewHandlersRef.current = { debouncedRefresh, onTimetable: (data) => { if (data?.data) setWorking(data.data); } };
            PusherClient.bind(channel, 'up-monitor', debouncedRefresh);
            PusherClient.bind(channel, 'up-waiting', debouncedRefresh);
            PusherClient.bind(channel, 'data-changed', debouncedRefresh);
            PusherClient.bind(channel, 'up-kiosk-working-timetable', viewHandlersRef.current.onTimetable);
          }
        }
      }
      setLoading(false);
    }).catch(() => setLoading(false));

    return () => {
      clearTimeout(debounceRef.current);
      // Only unbind this view's handlers — don't unsubscribe the channel
      // (the ticket-level Pusher subscription may still need it)
      const ch = viewChannelRef.current;
      const h = viewHandlersRef.current;
      if (ch && h) {
        PusherClient.unbind(ch, 'up-monitor', h.debouncedRefresh);
        PusherClient.unbind(ch, 'up-waiting', h.debouncedRefresh);
        PusherClient.unbind(ch, 'data-changed', h.debouncedRefresh);
        PusherClient.unbind(ch, 'up-kiosk-working-timetable', h.onTimetable);
      }
      viewChannelRef.current = null;
      viewHandlersRef.current = null;
    };
  }, [agencyHash]);

  const isOpen = working && working.code === 'open';

  // Grouped client types: create virtual service cards and hide children
  const groupedTypes = useMemo(() => clientTypes.filter(ct => ct.DisplayMode === 'grouped'), [clientTypes]);
  const nonGroupedTypes = useMemo(() => clientTypes.filter(ct => ct.DisplayMode !== 'grouped'), [clientTypes]);

  const visibleServices = useMemo(() => {
    if (!groupedTypes.length) return services;

    const hiddenHashes = new Set();
    const hiddenIds = new Set();
    groupedTypes.forEach(ct => {
      (ct.ServicesHash || []).forEach(h => hiddenHashes.add(h));
      (ct.ServicesID || []).forEach(id => hiddenIds.add(id));
    });

    const normal = services.filter(s => !hiddenHashes.has(s.Hash) && !hiddenHashes.has(s.Uuid_Service) && !hiddenIds.has(s.ID));

    const virtual = groupedTypes.map(ct => {
      const ctHashes = new Set(ct.ServicesHash || []);
      const ctIds = new Set(ct.ServicesID || []);
      const children = services.filter(s => ctHashes.has(s.Hash) || ctHashes.has(s.Uuid_Service) || ctIds.has(s.ID));
      const totalPeople = children.reduce((sum, s) => sum + (parseInt(s.People) || 0), 0);
      const abbr = ct.Abbreviation || 'AD';
      return {
        Hash: '_grouped_' + ct.ID, ID: '_grouped_' + ct.ID,
        Name: ct.Name, Abbreviation: abbr, Icon: ct.Icon,
        People: totalPeople, WaitTime: '—', Duration: '—',
        StateService: 1, StateSite: 1,
        _isGrouped: true, _clientType: ct, _childCount: children.length
      };
    });

    return [...normal, ...virtual];
  }, [services, groupedTypes]);

  return (
    <>
      <div className="detail-head">
        <button className="back-btn" onClick={onBack}><Ico name="arrowL" /></button>
        <div className="titles">
          <h1>
            {agencyInfo?.Name || agency.Name || agency.name}
            {isAgencyFav !== undefined && <FavStar isFav={isAgencyFav} onToggle={onToggleFav} />}
          </h1>
          <p>
            {agencyInfo?.Zone || agency.Zone || ''}{' '}
            {working && (
              <button onClick={() => setShowTimetable(true)} style={{ background:'none', border:'none', cursor:'pointer', color: isOpen ? 'var(--nb-green)' : 'var(--nb-danger)', fontSize:'inherit' }}>
                · {working.message} <Ico name="clock" size={11} />
              </button>
            )}
            {lastUpdate && <span style={{ color:'var(--d-fg-muted)', fontSize:11, marginLeft:8 }}>Atualizado {lastUpdate.toLocaleTimeString('pt', {hour:'2-digit',minute:'2-digit'})}</span>}
          </p>
        </div>
      </div>

      {/* Peak Hours Chart */}
      {!loading && <PeakHoursChart agencyHash={agencyHash} companyHash={companyHash} />}

      {/* Timetable Modal */}
      {showTimetable && <TimetableModal timeTable={timeTable} agencyName={agencyInfo?.Name || agency.Name} onClose={() => setShowTimetable(false)} />}

      {loading ? (
        <SkeletonRows count={5} />
      ) : services.length === 0 ? (
        <div style={{ padding: 40, textAlign: 'center', color: 'var(--d-fg-3)' }}>Nenhum serviço disponível.</div>
      ) : (
        <>
          {/* Client type chips (above services — only non-grouped types) */}
          {nonGroupedTypes.length > 0 && (
            <div style={{ padding: '8px 0 4px', display: 'flex', gap: 8, overflowX: 'auto', WebkitOverflowScrolling: 'touch' }}>
              {nonGroupedTypes.map(ct => (
                <button key={ct.ID} onClick={() => setShowTypeModal(ct)}
                  style={{ flexShrink: 0, padding: '10px 16px', borderRadius: 12, border: '1px solid var(--d-border)', background: 'var(--d-bg-2)', color: 'var(--d-fg)', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 8, fontSize: 14 }}>
                  <Ico name="category" size={16} />
                  <span>{ct.Name}</span>
                  <span style={{ fontSize: 11, opacity: 0.6 }}>{(ct.ServicesID || ct.ServicesHash || []).length}</span>
                  <Ico name="chevR" size={14} style={{ opacity: 0.4 }} />
                </button>
              ))}
            </div>
          )}

          {/* Client type services modal */}
          {showTypeModal && (() => {
            const ct = showTypeModal;
            const svcIds = ct.ServicesID || [];
            const svcHashes = ct.ServicesHash || [];
            const filtered = services.filter(s => svcIds.includes(s.ID) || svcHashes.includes(s.Hash) || svcHashes.includes(s.Uuid_Service));
            return (
              <div className="nb-modal-overlay" onClick={() => setShowTypeModal(null)} style={{ position:'fixed', top:0, left:0, right:0, bottom:0, background:'rgba(0,0,0,0.6)', zIndex:9999, display:'flex', alignItems:'center', justifyContent:'center' }}>
                <div onClick={e => e.stopPropagation()} style={{ background:'var(--d-bg-2)', borderRadius:16, maxHeight:'80vh', width:'100%', maxWidth:420, display:'flex', flexDirection:'column', overflow:'hidden' }}>
                  <div style={{ padding:'20px 20px 12px', borderBottom:'1px solid var(--d-border)' }}>
                    <h3 style={{ margin:0, fontSize:18, fontWeight:600 }}>{ct.Name}</h3>
                    <p style={{ margin:'4px 0 0', fontSize:13, opacity:0.6 }}>{filtered.length} {_t('webapp.services') || 'serviços'}</p>
                  </div>
                  <div style={{ overflowY:'auto', padding:'8px 12px', flex:1 }}>
                    {filtered.map(svc => (
                      <button key={svc.Hash || svc.ID} onClick={() => { setShowTypeModal(null); onPrintTicket(svc, agency, company); }}
                        style={{ display:'flex', alignItems:'center', gap:12, width:'100%', padding:'14px 12px', marginBottom:4, border:'none', background:'var(--d-bg-3)', borderRadius:12, cursor:'pointer', textAlign:'left', color:'var(--d-fg)' }}>
                        <span style={{ width:40, height:40, borderRadius:10, background:'var(--nb-green)', color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', fontWeight:700, fontSize:13, flexShrink:0 }}>
                          {svc.Abbreviation || '--'}
                        </span>
                        <div style={{ flex:1 }}>
                          <div style={{ fontSize:14, fontWeight:500 }}>{svc.Name}</div>
                          {svc.People > 0 && <div style={{ fontSize:12, opacity:0.6, marginTop:2 }}>{svc.People} em espera</div>}
                        </div>
                        <Ico name="chevR" size={16} style={{ opacity: 0.4 }} />
                      </button>
                    ))}
                  </div>
                  <div style={{ padding:'12px 20px', borderTop:'1px solid var(--d-border)' }}>
                    <button onClick={() => setShowTypeModal(null)} style={{ width:'100%', padding:12, border:'none', borderRadius:12, background:'var(--d-bg-3)', color:'var(--d-fg)', fontSize:14, cursor:'pointer' }}>
                      {_t('btn.close') || 'Fechar'}
                    </button>
                  </div>
                </div>
              </div>
            );
          })()}

          <div className="svc-head">
            <div>{_t('webapp.queue_service')}</div>
            <div>{_t('webapp.queue_queue')}</div>
            <div>{_t('webapp.queue_wait')}</div>
            <div>{_t('webapp.queue_serving')}</div>
            <div>&nbsp;</div>
          </div>
          <div className="svc-list">
            {visibleServices.map((svc, i) => {
              if (svc._isGrouped) {
                return (
                  <div className="svc-row svc-row--grouped" key={svc.Hash || svc.ID || i}
                    onClick={() => setShowTypeModal(svc._clientType)}
                    style={{ cursor: 'pointer', background: 'linear-gradient(135deg, rgba(59,130,246,0.08), rgba(55,195,134,0.08))' }}>
                    <div className="svc-row__main">
                      <span className="svc-abbr" style={{ background: 'linear-gradient(135deg, #3b82f6, var(--nb-green))' }}>{svc.Abbreviation}</span>
                      <div className="svc-row__info">
                        <div className="svc-row__name">{svc.Name}</div>
                        <div style={{ fontSize: '0.7rem', opacity: 0.6, marginTop: 2 }}>{svc._childCount} serviços</div>
                      </div>
                    </div>
                    <div className="svc-row__stat">
                      <span className="svc-row__val">{svc.People || 0}</span>
                    </div>
                    <div className="svc-row__stat"><span className="svc-row__val">—</span></div>
                    <div className="svc-row__stat"><span className="svc-row__val">—</span></div>
                    <button className="svc-row__btn" onClick={(e) => { e.stopPropagation(); setShowTypeModal(svc._clientType); }}>
                      {_t('webapp.select_service') || 'Escolher'}
                    </button>
                  </div>
                );
              }

              const people = svc.People || 0;
              const waitTime = svc.WaitTime || '—';
              const duration = svc.Duration || '—';
              const abbr = svc.Abbreviation || '';
              return (
                <div className="svc-row" key={svc.Hash || svc.ID || i}>
                  <div className="svc-row__main">
                    {abbr && <span className="svc-abbr">{abbr}</span>}
                    <div className="svc-row__info">
                      <div className="svc-row__name">
                        {svc.Name}
                        {isServiceFav && svc.Hash && (
                          <FavStar
                            isFav={isServiceFav(agencyHash, svc.Hash)}
                            onToggle={() => onToggleServiceFav(agencyHash, svc.Hash)}
                          />
                        )}
                        {onServiceInfo && svc.Hash && (
                          <button onClick={(e) => { e.stopPropagation(); onServiceInfo({ hash: svc.Hash, name: svc.Name, stats: { people, waitTime, duration } }); }}
                            className="svc-row__info-btn" title={_t('webapp.svc_info')}>
                            <Ico name="help" size={14} />
                          </button>
                        )}
                      </div>
                      {svc.Description && <div className="svc-row__desc">{svc.Description}</div>}
                      {svc.Price > 0 && <div style={{ fontSize: '0.7rem', fontWeight: 600, color: 'var(--nb-green)', marginTop: 2 }}>{parseInt(svc.Price).toLocaleString('pt')} {svc.PriceCurrency || 'CVE'}</div>}
                      {svc.TimeService === 0 && (
                        <div className="svc-row__schedule-notice">
                          <Ico name="clock" size={14} />
                          <span>{svc.TimeServiceSchedule?.length ? (_t('webapp.schedule_label') + ': ' + svc.TimeServiceSchedule.join(', ')) : _t('webapp.service_outside_schedule')}</span>
                        </div>
                      )}
                    </div>
                  </div>
                  <div className="svc-row__stat">
                    <span className="svc-row__val">{people}</span>
                  </div>
                  <div className="svc-row__stat">
                    <span className={`svc-row__val ${people < 5 ? 'green' : people < 15 ? 'warn' : 'bad'}`}>{waitTime}</span>
                  </div>
                  <div className="svc-row__stat">
                    <span className="svc-row__val">{duration}</span>
                  </div>
                  {(() => {
                    const agcHash = agency.Hash || agency.Token || agency.hash || '';
                    const hasActive = hasActiveTicketForService && svc.Hash && agcHash && hasActiveTicketForService(svc.Hash, agcHash);
                    const isBeauty = svc.CategorySlug === 'beauty';
                    const isOutsideSchedule = svc.TimeService === 0;
                    return (
                      <button
                        className={`svc-row__btn${isBeauty ? ' svc-row__btn--beauty' : ''}`}
                        disabled={hasActive || isOutsideSchedule || (!isBeauty && !isOpen)}
                        onClick={() => onPrintTicket(svc, agency, company)}
                        title={hasActive ? _t('webapp.svc_already_active_title') : isOutsideSchedule ? _t('webapp.service_outside_schedule') : ''}
                      >
                        {hasActive ? _t('webapp.svc_active_ticket') : isOutsideSchedule ? _t('webapp.svc_closed') : isBeauty ? _t('webapp.schedule') : (!isOpen ? _t('webapp.svc_closed') : _t('webapp.svc_take_ticket'))}
                      </button>
                    );
                  })()}
                </div>
              );
            })}
          </div>
        </>
      )}
    </>
  );
}

// ─── Tickets View (real data) ───────────────────────────────
function TicketsView({ onBack, onSelectTicket, signedIn, onUploadTicket, onEvaluate, onNoShowEval, refreshKey }) {
  const [tickets, setTickets] = useState([]);
  const [loading, setLoading] = useState(true);
  const [tab, setTab] = useState('all');
  const [cancelling, setCancelling] = useState(null);
  const [cancelTarget, setCancelTarget] = useState(null);
  const { addToast } = React.useContext(ToastContext);

  const fetchTickets = useCallback(() => {
    if (!signedIn) { setLoading(false); return; }
    API.get('/tickets/my').then(res => {
      if (res.message === 'success') {
        const items = (Array.isArray(res.data) ? res.data : []).map(normalizeTicket);
        setTickets(items);
        // Check for unevaluated served tickets — trigger evaluation reminder
        const reminded = sessionStorage.getItem('nb-webapp-eval-reminded');
        if (!reminded && onEvaluate) {
          const unevaluated = items.filter(t => {
            const s = t.TicketState || t.State;
            return s === 3 && t.reception && t.reception.Evaluation === null;
          });
          if (unevaluated.length > 0) {
            sessionStorage.setItem('nb-webapp-eval-reminded', '1');
            setTimeout(() => onEvaluate(unevaluated[0]), 1500);
          }
        }
      }
      setLoading(false);
    }).catch(() => setLoading(false));
  }, [signedIn]);

  useEffect(() => { fetchTickets(); }, [signedIn, refreshKey]);

  // Listen for Pusher-driven queue updates to refresh in real-time
  useEffect(() => {
    let debounce = null;
    const onUpdate = () => {
      clearTimeout(debounce);
      debounce = setTimeout(fetchTickets, 1500);
    };
    window.addEventListener('nb-queue-updated', onUpdate);
    window.addEventListener('nb-ticket-state-push', onUpdate);
    return () => {
      clearTimeout(debounce);
      window.removeEventListener('nb-queue-updated', onUpdate);
      window.removeEventListener('nb-ticket-state-push', onUpdate);
    };
  }, [fetchTickets]);

  const stateLabel = (t) => {
    const s = t.TicketState || t.State;
    if (s === 1) return { label: _t('webapp.tkt_state_queue'), cls: 'st-active', status: 'active' };
    if (s === 6) return { label: _t('webapp.tkt_state_called'), cls: 'st-active', status: 'active' };
    if (s === 7) return { label: _t('webapp.tkt_state_serving'), cls: 'st-active', status: 'active' };
    if (s === 3) return { label: _t('webapp.tkt_state_served'), cls: 'st-done', status: 'done' };
    if (s === 4 || s === 5) return { label: _t('webapp.tkt_state_cancelled'), cls: 'st-cancel', status: 'cancelled' };
    return { label: _t('webapp.tkt_state_pending'), cls: 'st-sched', status: 'scheduled' };
  };

  const handleEvaluate = (e, ticket) => {
    e.stopPropagation();
    if (onEvaluate) onEvaluate(ticket);
  };

  const handleShare = async (e, ticket) => {
    e.stopPropagation();
    const hash = ticket.TicketHash || (ticket.CodeGeneration || '').replace(/^ticket\s+/i, '') || '';
    const base = window.location.origin + window.location.pathname.replace(/\/[^/]*$/, '/');
    const ticketLink = base + 'qrcode-read?uuid=' + encodeURIComponent(hash);
    const ticketLabel = ticket.Number || ticket.Code || '';

    if (navigator.share) {
      try {
        await navigator.share({ title: _t('webapp.tkt_share_title') + ' ' + ticketLabel, url: ticketLink });
        return;
      } catch (err) { if (err.name === 'AbortError') return; }
    }
    try {
      await navigator.clipboard.writeText(ticketLink);
      addToast(_t('webapp.tkt_link_copied'), 'success', 3000);
    } catch {
      addToast(_t('webapp.tkt_copy_failed'), 'error');
    }
  };

  const handleCancel = (e, ticket) => {
    e.stopPropagation();
    const state = ticket.TicketState || ticket.State;
    if (state === 7 || state === 3) {
      addToast(_t('webapp.cancel_not_allowed'), 'error');
      return;
    }
    setCancelTarget(ticket);
  };

  const confirmCancel = async (reason) => {
    const ticket = cancelTarget;
    setCancelTarget(null);
    if (!ticket) return;
    setCancelling(ticket.TicketHash);
    try {
      const res = await API.post('/tickets/remove', { ticket_hash: ticket.TicketHash, cancel_reason: reason || null });
      if (res.message === 'success') {
        setTickets(prev => prev.filter(t => t.TicketHash !== ticket.TicketHash));
        addToast(_t('webapp.ticket_cancelled'), 'success');
        if (onNoShowEval) onNoShowEval(ticket);
      } else {
        addToast(res.detail || _t('webapp.ticket_remove_failed'), 'error');
      }
    } catch { addToast(_t('webapp.network_error'), 'error'); }
    setCancelling(null);
  };

  const withStatus = tickets.map(t => ({ ...t, _st: stateLabel(t) }));
  const counts = {
    all: withStatus.length,
    active: withStatus.filter(t => t._st.status === 'active').length,
    done: withStatus.filter(t => t._st.status === 'done').length,
    cancelled: withStatus.filter(t => t._st.status === 'cancelled').length,
  };
  const filtered = tab === 'all' ? withStatus
    : tab === 'active' ? withStatus.filter(t => t._st.status === 'active')
    : withStatus.filter(t => t._st.status === tab);

  if (!signedIn) {
    return (
      <div className="tickets-view">
        <div className="detail-head">
          <button className="back-btn" onClick={onBack}><Ico name="arrowL" /></button>
          <div className="titles"><h1>{_t('webapp.tkt_title')}</h1></div>
        </div>
        <div style={{ padding: 60, textAlign: 'center', color: 'var(--d-fg-3)' }}>
          <p><a href="#" onClick={(e) => { e.preventDefault(); const el = document.getElementById('nb-auth-panel'); if (el) { el.classList.add('auth-panel-highlight'); setTimeout(() => el.classList.remove('auth-panel-highlight'), 1500); } }} style={{ color: 'var(--nb-green)', textDecoration: 'underline', cursor: 'pointer' }}>{_t('webapp.tkt_login_prompt_link')}</a> {_t('webapp.tkt_login_prompt_text')}</p>
        </div>
      </div>
    );
  }

  return (
    <div className="tickets-view">
      <div className="detail-head">
        <button className="back-btn" onClick={onBack}><Ico name="arrowL" /></button>
        <div className="titles">
          <h1>{_t('webapp.tkt_title')}</h1>
          <p>{_t('webapp.tkt_count_summary').replace(':total', tickets.length).replace(':active', counts.active)}</p>
        </div>
        {onUploadTicket && (
          <button className="modal-btn-secondary" onClick={onUploadTicket} style={{ marginLeft: 'auto', fontSize: 12, padding: '6px 14px' }}>
            <Ico name="qr" size={14} /> {_t('webapp.tkt_associate')}
          </button>
        )}
      </div>
      <div className="tk-tabs">
        {[
          { id: 'all', label: _t('webapp.tkt_tab_all') },
          { id: 'active', label: _t('webapp.tkt_tab_active') },
          { id: 'done', label: _t('webapp.tkt_tab_served') },
          { id: 'cancelled', label: _t('webapp.tkt_tab_cancelled') },
        ].map(t => (
          <button key={t.id} className={`tk-tab ${tab === t.id ? 'on' : ''}`} onClick={() => setTab(t.id)}>
            {t.label}<span className="tk-cnt">{counts[t.id]}</span>
          </button>
        ))}
      </div>
      {loading ? (
        <SkeletonRows count={4} />
      ) : (
        <div className="tk-grid">
          {filtered.map((t, i) => {
            const people = t.People || 0;
            const progress = t._st.status === 'active' && t.People > 0 ? Math.max(5, 100 - (t.People * 5)) : 0;
            const isActive = t._st.status === 'active';
            const isServed = (t.TicketState || t.State) === 3;
            const canEvaluate = isServed && t.reception;
            const hasRating = canEvaluate && t.reception.Evaluation !== null;
            const canCancel = (t.TicketState || t.State) === 1 || (t.TicketState || t.State) === 6;
            return (
              <div key={t.TicketHash || i} className={`tkc ${t._st.status}`} onClick={() => onSelectTicket && onSelectTicket(t)} style={{ cursor: isActive ? 'pointer' : 'default' }}>
                <div className="tkc-header">
                  <span className={`tkc-status ${t._st.cls}`}>
                    {isActive && <span className="d"></span>}
                    {t._st.label}
                  </span>
                  <span className="tkc-date"><Ico name="clock" size={11} />{t.Date} {t.Time}</span>
                </div>
                <div className="tkc-number">
                  <span className="tkc-hash">#</span>{t.Code || t.Number || ''}
                </div>
                <div className="tkc-service">{t.ServiceName || ''}</div>
                {t.CategoryName && <span className="tkc-category">{t.CategoryName}</span>}
                {t.CompanyName && <div className="tkc-company"><Ico name="building" size={12} />{t.CompanyName}</div>}
                <div className="tkc-agency"><Ico name="pin" size={12} />{t.AgencyName || ''}</div>
                {isActive && (
                  <div className="tkc-footer">
                    <div className="tkc-queue">
                      <div className="tkc-queue-item">
                        <span className="tkc-queue-val">{people}</span>
                        <span className="tkc-queue-lbl">{_t('webapp.tkt_queue_ahead')}</span>
                      </div>
                      <div className="tkc-queue-item">
                        <span className="tkc-queue-val">{t.WaitTime || '—'}</span>
                        <span className="tkc-queue-lbl">{_t('webapp.tkt_queue_wait')}</span>
                      </div>
                    </div>
                    <div className="tkc-bar"><div style={{ width: `${progress}%` }}></div></div>
                  </div>
                )}
                {/* Actions bar */}
                <div className="tkc-actions">
                  {canEvaluate && (
                    <button className={`tkc-act-btn ${hasRating ? 'tkc-act-btn--rated' : 'tkc-act-btn--eval'}`} onClick={(e) => handleEvaluate(e, t)}>
                      <Ico name="star" size={13} />
                      {hasRating ? <span>{t.reception.Evaluation}/5 · {_t('webapp.tkt_reevaluate')}</span> : <span>{_t('webapp.tkt_evaluate')}</span>}
                    </button>
                  )}
                  <button className="tkc-act-btn" onClick={(e) => handleShare(e, t)}>
                    <Ico name="share" size={13} /><span>{_t('webapp.tkt_share')}</span>
                  </button>
                  {canCancel && (
                    <button className="tkc-act-btn tkc-act-btn--danger" onClick={(e) => handleCancel(e, t)} disabled={cancelling === t.TicketHash}>
                      <Ico name="cross" size={13} /><span>{cancelling === t.TicketHash ? _t('webapp.tkt_cancelling') : _t('webapp.tkt_give_up')}</span>
                    </button>
                  )}
                </div>
              </div>
            );
          })}
          {filtered.length === 0 && (
            <div style={{ padding: 40, textAlign: 'center', color: 'var(--d-fg-3)' }}>{_t('webapp.tkt_filter_empty')}</div>
          )}
        </div>
      )}
      {cancelTarget && (
        <CancelTicketModal
          ticket={cancelTarget}
          onConfirm={confirmCancel}
          onClose={() => setCancelTarget(null)}
        />
      )}
    </div>
  );
}

// ─── Appointments View ──────────────────────────────────────
function AppointmentsView({ onBack, signedIn, onSelectAppointment, selectedId, onNewBooking, refreshKey }) {
  const [items, setItems] = useState([]);
  const [loading, setLoading] = useState(true);
  const [tab, setTab] = useState('upcoming');
  const [categoryFilter, setCategoryFilter] = useState('all');
  // Agency picker state
  const [showPicker, setShowPicker] = useState(false);
  const [beautyAgencies, setBeautyAgencies] = useState([]);
  const [pickerLoading, setPickerLoading] = useState(false);
  const [pickerAgency, setPickerAgency] = useState(null); // selected agency → load services
  const [pickerServices, setPickerServices] = useState([]);
  const [pickerSvcLoading, setPickerSvcLoading] = useState(false);

  useEffect(() => {
    if (!signedIn) { setLoading(false); return; }
    setLoading(true);
    setShowPicker(false);
    setPickerAgency(null);
    // Load both beauty appointments and wash bookings
    Promise.all([
      API.get('/beauty/my-appointments'),
      API.get('/client/wash/my-bookings'),
    ]).then(([aptRes, washRes]) => {
      const allItems = [];
      if (aptRes.message === 'success' && Array.isArray(aptRes.data)) {
        allItems.push(...aptRes.data);
      }
      if (washRes.message === 'success' && Array.isArray(washRes.data)) {
        // Normalize wash bookings to same shape as beauty appointments
        washRes.data.forEach(bk => {
          allItems.push({
            ID: 'wash-' + bk.id,
            _isWash: true,
            Code: bk.code,
            DateAudience: bk.date || '',
            TimeAudience: bk.time ? bk.time + ':00' : '',
            ID_AudienceState: bk.status === 'completed' ? 3 : bk.status === 'cancelled' || bk.status === 'no_show' ? 4 : 1,
            ServiceName: bk.company + (bk.plate ? ' · ' + bk.plate : ''),
            AgencyName: bk.agency || '',
            AgencyHash: '',
            ServiceHash: '',
            CompanyHash: '',
            CompanyName: bk.company || '',
            CompanyLogo: '',
            OperatorName: '',
            SubjectName: '',
            IsPaid: bk.can_pay ? 0 : 1,
            Price: bk.total || 0,
            AllowPrepayment: bk.can_pay ? 1 : 0,
            PaymentTransactionId: bk.payment_transaction_id || null,
            CategorySlug: 'wash',
            Rating: null,
            RatingDate: null,
            _washRaw: bk,
          });
        });
      }
      // Sort: future first, then by date desc
      const td = new Date().toISOString().split('T')[0];
      allItems.sort((a, b) => {
        const af = a.DateAudience >= td ? 0 : 1;
        const bf = b.DateAudience >= td ? 0 : 1;
        if (af !== bf) return af - bf;
        return (b.DateAudience || '').localeCompare(a.DateAudience || '');
      });
      setItems(allItems);
      setLoading(false);
    }).catch(() => { setLoading(false); });
  }, [signedIn, refreshKey]);

  // Open agency picker — fetch beauty agencies
  const openPicker = () => {
    setShowPicker(true);
    setPickerAgency(null);
    setPickerServices([]);
    if (beautyAgencies.length > 0) return; // already loaded
    setPickerLoading(true);
    API.get('/data/agencies', { category: 'beauty' }).then(res => {
      if (res.message === 'success' && Array.isArray(res.data)) {
        setBeautyAgencies(res.data);
      }
      setPickerLoading(false);
    }).catch(() => setPickerLoading(false));
  };

  // Select agency in picker → load its services
  const selectPickerAgency = (ag) => {
    setPickerAgency(ag);
    setPickerSvcLoading(true);
    const agHash = ag.Hash || ag.hash;
    const companyHash = ag.ID_Company || '';
    API.get(`/data/agencies/${agHash}/services-monitoring`, { company: companyHash }).then(res => {
      if (res.message === 'success' && res.data?.services) {
        setPickerServices(res.data.services);
      }
      setPickerSvcLoading(false);
    }).catch(() => setPickerSvcLoading(false));
  };

  // Select service → open booking flow
  const selectPickerService = (svc) => {
    if (!pickerAgency || !onNewBooking) return;
    onNewBooking({
      agency: { Hash: pickerAgency.Hash || pickerAgency.hash, Name: pickerAgency.Name },
      service: { Hash: svc.Hash, Name: svc.Name, Price: svc.Price, PriceCurrency: svc.PriceCurrency, PriceMode: svc.PriceMode, AllowPrepayment: svc.AllowPrepayment, CategorySlug: svc.CategorySlug },
      company: pickerAgency.ID_Company ? { hash: pickerAgency.ID_Company } : null,
    });
    setShowPicker(false);
  };

  const today = new Date().toISOString().split('T')[0];

  const stateInfo = (state) => {
    const s = parseInt(state);
    if (s === 1) return { label: _t('webapp.apt_state_confirmed'), cls: 'apt-st-waiting', status: 'upcoming' };
    if (s === 2 || s === 6 || s === 7) return { label: _t('webapp.apt_state_serving'), cls: 'apt-st-active', status: 'upcoming' };
    if (s === 3) return { label: _t('webapp.apt_state_done'), cls: 'apt-st-done', status: 'past' };
    if (s === 4 || s === 5) return { label: _t('webapp.apt_state_cancelled'), cls: 'apt-st-cancelled', status: 'cancelled' };
    return { label: _t('webapp.apt_state_pending'), cls: 'apt-st-waiting', status: 'upcoming' };
  };

  const catMap = {
    'beauty': { icon: 'scissors', label: _t('webapp.apt_tab_beauty') || 'Barbearia' },
    'wash': { icon: 'droplet', label: _t('webapp.apt_tab_wash') || 'Lavagem' },
    'health': { icon: 'heart', label: _t('webapp.apt_tab_health') || 'Saúde' },
    'bank': { icon: 'building', label: _t('webapp.apt_tab_bank') || 'Banco' },
    'government': { icon: 'building', label: _t('webapp.apt_tab_government') || 'Instituição' },
    'education': { icon: 'book', label: _t('webapp.apt_tab_education') || 'Educação' },
    'telecom': { icon: 'phone', label: _t('webapp.apt_tab_telecom') || 'Telecomunicações' },
  };

  const withStatus = items.map(a => {
    const si = stateInfo(a.ID_AudienceState);
    const isPast = a.DateAudience < today && si.status === 'upcoming';
    const cat = a.CategorySlug && catMap[a.CategorySlug] ? a.CategorySlug : 'appointment';
    const needsPay = parseInt(a.IsPaid) === 0 && a.Price && parseFloat(a.Price) > 0 && parseInt(a.AllowPrepayment) >= 1;
    let finalSi = isPast ? { ...si, status: 'past', label: _t('webapp.apt_state_past') } : si;
    if (needsPay && !isPast && finalSi.status === 'upcoming') {
      finalSi = { ...finalSi, label: _t('webapp.apt_tl_pending_pay') || 'Pendente', cls: 'apt-st-pending-pay' };
    }
    return { ...a, _si: finalSi, _category: cat };
  });

  const counts = {
    upcoming: withStatus.filter(a => a._si.status === 'upcoming').length,
    past: withStatus.filter(a => a._si.status === 'past').length,
    cancelled: withStatus.filter(a => a._si.status === 'cancelled').length,
  };

  // Available categories (only show tabs for types that have items)
  const availableCategories = useMemo(() => {
    const cats = {};
    withStatus.forEach(a => {
      if (!cats[a._category]) {
        const info = catMap[a._category] || { icon: 'ticket', label: _t('webapp.apt_tab_appointment') || 'Atendimento' };
        cats[a._category] = { id: a._category, ...info };
      }
    });
    return Object.values(cats);
  }, [items]);

  const filtered = withStatus.filter(a => a._si.status === tab && (categoryFilter === 'all' || a._category === categoryFilter));

  const formatDay = (d) => d ? parseInt(d.split('-')[2]) : '--';
  const formatMonth = (d) => {
    if (!d) return '';
    const months = [_t('webapp.month_jan_s'),_t('webapp.month_feb_s'),_t('webapp.month_mar_s'),_t('webapp.month_apr_s'),_t('webapp.month_may_s'),_t('webapp.month_jun_s'),_t('webapp.month_jul_s'),_t('webapp.month_aug_s'),_t('webapp.month_sep_s'),_t('webapp.month_oct_s'),_t('webapp.month_nov_s'),_t('webapp.month_dec_s')];
    return months[parseInt(d.split('-')[1]) - 1] || '';
  };
  const formatWeekday = (d) => {
    if (!d) return '';
    const days = [_t('webapp.day_sun_short'),_t('webapp.day_mon_short'),_t('webapp.day_tue_short'),_t('webapp.day_wed_short'),_t('webapp.day_thu_short'),_t('webapp.day_fri_short'),_t('webapp.day_sat_short')];
    return days[new Date(d + 'T00:00:00').getDay()] || '';
  };

  // ── Agencies where user has bookings (unique by AgencyHash) ──
  // NOTE: must be before any conditional return to respect React hook rules
  const agencies = useMemo(() => {
    const map = {};
    items.forEach(a => {
      if (!a.AgencyHash) return;
      if (!map[a.AgencyHash]) {
        // Collect unique services for this agency
        map[a.AgencyHash] = {
          agencyHash: a.AgencyHash,
          agencyName: a.AgencyName,
          companyHash: a.CompanyHash || null,
          companyName: a.CompanyName || '',
          companyLogo: (a.CompanyLogo && a.CompanyLogo.startsWith('http')) ? a.CompanyLogo : null,
          services: {},
          lastDate: a.DateAudience,
          count: 0,
        };
      }
      map[a.AgencyHash].count++;
      if (a.ServiceHash && !map[a.AgencyHash].services[a.ServiceHash]) {
        map[a.AgencyHash].services[a.ServiceHash] = { hash: a.ServiceHash, name: a.ServiceName, abbr: a.Abbreviation };
      }
    });
    // Sort by most recently booked
    return Object.values(map).sort((a, b) => (b.lastDate || '').localeCompare(a.lastDate || ''));
  }, [items]);

  if (!signedIn) {
    return (
      <div className="appointments-view">
        <div className="detail-head">
          <button className="back-btn" onClick={onBack}><Ico name="arrowL" /></button>
          <div className="titles"><h1>{_t('webapp.apt_title')}</h1></div>
        </div>
        <div style={{ padding: 60, textAlign: 'center', color: 'var(--d-fg-3)' }}>
          <p><a href="#" onClick={(e) => { e.preventDefault(); const el = document.getElementById('nb-auth-panel'); if (el) { el.classList.add('auth-panel-highlight'); setTimeout(() => el.classList.remove('auth-panel-highlight'), 1500); } }} style={{ color: 'var(--nb-green)', textDecoration: 'underline', cursor: 'pointer' }}>{_t('webapp.apt_login_prompt_link')}</a> {_t('webapp.apt_login_prompt_text')}</p>
        </div>
      </div>
    );
  }

  return (
    <div className="appointments-view">
      <div className="detail-head">
        <button className="back-btn" onClick={() => { if (showPicker && pickerAgency) { setPickerAgency(null); setPickerServices([]); } else if (showPicker) { setShowPicker(false); } else { onBack(); } }}>
          <Ico name="arrowL" />
        </button>
        <div className="titles">
          <h1>{showPicker ? (pickerAgency ? pickerAgency.Name : _t('webapp.apt_pick_agency')) : _t('webapp.apt_title')}</h1>
          {!showPicker && <p>{_t('webapp.apt_count_summary').replace(':total', items.length).replace(':upcoming', counts.upcoming)}</p>}
          {showPicker && !pickerAgency && <p>{_t('webapp.apt_pick_agency_desc')}</p>}
        </div>
        {!showPicker && onNewBooking && (
          <button className="apt-new-btn" onClick={openPicker} title={_t('webapp.apt_new_booking')}>
            <Ico name="calendar" size={16} />
            <span>{_t('webapp.apt_new_booking')}</span>
          </button>
        )}
      </div>

      {/* ═══ PICKER MODE: beauty agencies → services ═══ */}
      {showPicker && !pickerAgency && (
        <>
          {/* Quick-book: agencies user has booked at before */}
          {agencies.length > 0 && (
            <div className="apt-agencies">
              <div className="apt-agencies__label">{_t('webapp.apt_quick_book')}</div>
              <div className="apt-agencies__grid">
                {agencies.map(ag => {
                  const svcs = Object.values(ag.services);
                  return (
                    <div key={ag.agencyHash} className="apt-agency-card"
                      onClick={() => {
                        {
                          selectPickerAgency({ Hash: ag.agencyHash, Name: ag.agencyName, ID_Company: ag.companyHash, LogoURL: ag.companyLogo, Company: ag.companyName });
                        }
                      }}>
                      <div className="apt-agency-card__logo">
                        {ag.companyLogo
                          ? <img src={ag.companyLogo} alt={ag.companyName} />
                          : <span className="apt-agency-card__initials">{(ag.companyName || ag.agencyName || '?').substring(0, 2).toUpperCase()}</span>
                        }
                      </div>
                      <div className="apt-agency-card__info">
                        <div className="apt-agency-card__name">{ag.agencyName}</div>
                        <div className="apt-agency-card__services">
                          {svcs.slice(0, 3).map(s => (
                            <span key={s.hash} className="apt-agency-card__svc">{s.abbr || s.name}</span>
                          ))}
                          {svcs.length > 3 && <span className="apt-agency-card__svc">+{svcs.length - 3}</span>}
                        </div>
                      </div>
                      <div className="apt-agency-card__action"><Ico name="calendar" size={16} /></div>
                    </div>
                  );
                })}
              </div>
            </div>
          )}

          {/* All beauty agencies */}
          <div className="apt-agencies">
            <div className="apt-agencies__label">{_t('webapp.apt_all_agencies')}</div>
            {pickerLoading ? <SkeletonRows count={3} /> : (
              <div className="apt-agencies__grid">
                {beautyAgencies.map(ag => (
                  <div key={ag.Hash} className="apt-agency-card" onClick={() => selectPickerAgency(ag)}>
                    <div className="apt-agency-card__logo">
                      {ag.LogoURL
                        ? <img src={ag.LogoURL} alt={ag.Company} />
                        : <span className="apt-agency-card__initials">{(ag.Company || ag.Name || '?').substring(0, 2).toUpperCase()}</span>
                      }
                    </div>
                    <div className="apt-agency-card__info">
                      <div className="apt-agency-card__name">{ag.Name}</div>
                      {ag.Zone && <div className="apt-agency-card__zone"><Ico name="pin" size={11} /> {ag.Zone}</div>}
                    </div>
                    <div className="apt-agency-card__action"><Ico name="arrow" size={16} /></div>
                  </div>
                ))}
                {beautyAgencies.length === 0 && !pickerLoading && (
                  <div style={{ padding: 24, textAlign: 'center', color: 'var(--d-fg-3)', fontSize: '0.8125rem' }}>{_t('webapp.apt_no_agencies')}</div>
                )}
              </div>
            )}
          </div>
        </>
      )}

      {/* ═══ PICKER MODE step 2: services of selected agency ═══ */}
      {showPicker && pickerAgency && (
        <div className="apt-agencies">
          <div className="apt-agencies__label">{_t('webapp.apt_pick_service')}</div>
          {pickerSvcLoading ? <SkeletonRows count={3} /> : (
            <div className="apt-agencies__grid">
              {pickerServices.map(svc => (
                <div key={svc.Hash || svc.ID} className="apt-agency-card" onClick={() => selectPickerService(svc)}>
                  <div className="apt-agency-card__logo">
                    <span className="apt-agency-card__initials">{svc.Abbreviation || (svc.Name || '').substring(0, 2).toUpperCase()}</span>
                  </div>
                  <div className="apt-agency-card__info">
                    <div className="apt-agency-card__name">{svc.Name}</div>
                    {svc.People !== undefined && (
                      <div className="apt-agency-card__zone">
                        <Ico name="user" size={11} /> {svc.People} {_t('webapp.queue_queue').toLowerCase()}
                      </div>
                    )}
                  </div>
                  <div className="apt-agency-card__action"><Ico name="calendar" size={16} /></div>
                </div>
              ))}
              {pickerServices.length === 0 && !pickerSvcLoading && (
                <div style={{ padding: 24, textAlign: 'center', color: 'var(--d-fg-3)', fontSize: '0.8125rem' }}>{_t('webapp.apt_no_services')}</div>
              )}
            </div>
          )}
        </div>
      )}

      {/* ═══ NORMAL MODE: appointments list ═══ */}
      {!showPicker && (
        <>
          <div className="tk-tabs">
            {[
              { id: 'upcoming', label: _t('webapp.apt_tab_upcoming') },
              { id: 'past', label: _t('webapp.apt_tab_past') },
              { id: 'cancelled', label: _t('webapp.apt_tab_cancelled_label') },
            ].map(t => (
              <button key={t.id} className={`tk-tab ${tab === t.id ? 'on' : ''}`} onClick={() => setTab(t.id)}>
                {t.label}<span className="tk-cnt">{counts[t.id]}</span>
              </button>
            ))}
          </div>
          {availableCategories.length >= 1 && (
            <div style={{ display: 'flex', gap: 6, marginBottom: 12, overflowX: 'auto', scrollbarWidth: 'none' }}>
              <button className={`apt-cat-chip ${categoryFilter === 'all' ? 'apt-cat-chip--on' : ''}`} onClick={() => setCategoryFilter('all')}>
                {_t('webapp.apt_tab_all') || 'Todos'}
              </button>
              {availableCategories.map(c => (
                <button key={c.id} className={`apt-cat-chip ${categoryFilter === c.id ? 'apt-cat-chip--on' : ''}`} onClick={() => setCategoryFilter(c.id)}>
                  <Ico name={c.icon} size={12} /> {c.label}
                </button>
              ))}
            </div>
          )}
          {loading ? (
            <SkeletonRows count={4} />
          ) : (
            <div className="apt-list">
              {filtered.map((apt, i) => (
                <div key={apt.ID || i} className={`apt-card ${apt._si.status === 'past' ? 'apt-card--past' : ''} ${apt._si.status === 'cancelled' ? 'apt-card--cancelled' : ''} ${selectedId === apt.ID ? 'apt-card--selected' : ''}`} onClick={() => onSelectAppointment && onSelectAppointment(apt)} style={{ cursor: 'pointer' }}>
                  <div className="apt-date-badge">
                    <span className="apt-day">{formatDay(apt.DateAudience)}</span>
                    <span className="apt-month">{formatMonth(apt.DateAudience)}</span>
                    <span className="apt-weekday">{formatWeekday(apt.DateAudience)}</span>
                  </div>
                  <div className="apt-info">
                    <div className="apt-service">{apt.ServiceName || '-'}</div>
                    <div className="apt-details">
                      <Ico name="clock" size={12} />
                      <span>{(apt.TimeAudience || '').substring(0, 5)}</span>
                      {apt.AgencyName && <><span className="apt-dot">·</span><Ico name="pin" size={12} /><span>{apt.AgencyName}</span></>}
                    </div>
                    {apt.OperatorName && (
                      <div className="apt-details">
                        <Ico name="user" size={12} />
                        <span>{apt.OperatorName}</span>
                      </div>
                    )}
                    {apt.SubjectName && <span className="apt-badge">{apt.SubjectName}</span>}
                  </div>
                  <div className="apt-status">
                    <span className={`apt-state ${apt._si.cls}`}>{apt._si.label}</span>
                    {/* Payment badge */}
                    {apt.Price && parseFloat(apt.Price) > 0 && parseInt(apt.AllowPrepayment) >= 1 && apt._si.status !== 'cancelled' && (
                      <span className={`apt-state ${parseInt(apt.IsPaid) === 1 ? 'apt-st-paid' : 'apt-st-unpaid'}`} style={{ fontSize: '0.65rem' }}>
                        {parseInt(apt.IsPaid) === 1 ? (_t('webapp.apt_paid') || 'Pago') : (_t('webapp.apt_unpaid') || 'Por pagar')}
                      </span>
                    )}
                    {/* Rating badge */}
                    {apt.Rating && parseInt(apt.Rating) > 0 && (
                      <span className="apt-state apt-st-rated">
                        <span style={{ color: 'var(--nb-gold, #FDB812)' }}>★</span> {parseInt(apt.Rating)}/5 · {_t('webapp.apt_rated') || 'Avaliado'}
                      </span>
                    )}
                    {/* Pending evaluation badge */}
                    {parseInt(apt.ID_AudienceState) === 3 && (!apt.Rating || parseInt(apt.Rating) === 0) && (
                      <span className="apt-state apt-st-eval-pending">
                        <span style={{ color: 'var(--nb-gold, #FDB812)' }}>★</span> {_t('webapp.apt_evaluate') || 'Avaliar'}
                      </span>
                    )}
                  </div>
                </div>
              ))}
              {filtered.length === 0 && (
                <div style={{ padding: 40, textAlign: 'center', color: 'var(--d-fg-3)' }}>
                  {tab === 'upcoming' ? _t('webapp.apt_no_upcoming') : tab === 'past' ? _t('webapp.apt_no_past') : _t('webapp.apt_no_cancelled')}
                </div>
              )}
            </div>
          )}
        </>
      )}
    </div>
  );
}

// ─── Appointment Detail Panel ────────────────────────────────
function AppointmentDetailPanel({ appointment, onClose, collapsed, onToggle, onEvaluate, onNoShowEval, addToast, openReceiptByTxId, setSharedReceipt }) {
  const [payingNow, setPayingNow] = useState(false);

  if (collapsed) {
    return (
      <aside className="ticket-panel collapsed">
        <button className="ticket-collapse-btn" onClick={onToggle} title={_t("webapp.apt_expand")}>
          <span style={{ transform: 'rotate(180deg)', display: 'inline-flex' }}><Ico name="chevR" size={16} /></span>
        </button>
      </aside>
    );
  }
  if (!appointment) return null;

  const apt = appointment;
  const state = parseInt(apt.ID_AudienceState) || 0;
  const today = new Date().toISOString().split('T')[0];
  const isPast = apt.DateAudience < today && ![3,4,5].includes(state);
  const isCancelled = state === 4 || state === 5;
  const isDone = state === 3;
  const isServing = state === 2 || state === 6 || state === 7;
  const isConfirmed = state === 1;
  const isPaid = parseInt(apt.IsPaid) === 1;
  const hasPrice = apt.Price && parseFloat(apt.Price) > 0;
  const allowPrepay = parseInt(apt.AllowPrepayment) || 0;
  const needsPayment = hasPrice && allowPrepay >= 1 && !isPaid && !isCancelled && !isDone;

  // Timeline steps
  const timelineSteps = [
    { key: 'pending', label: _t('webapp.apt_tl_pending'), icon: 'clock' },
    { key: 'confirmed', label: _t('webapp.apt_tl_confirmed'), icon: 'check' },
    { key: 'serving', label: _t('webapp.apt_tl_serving'), icon: 'zap' },
    { key: 'done', label: _t('webapp.apt_tl_done'), icon: 'check' },
  ];
  const currentStep = isCancelled ? -1 : isDone ? 3 : isServing ? 2 : isConfirmed ? 1 : 0;

  const stateColor = isCancelled ? '#f87171' : isDone ? '#34d399' : isServing ? 'var(--nb-green)' : '#60a5fa';
  const stateLabel = isCancelled ? _t('webapp.apt_state_cancelled') : isDone ? _t('webapp.apt_state_done') : isServing ? _t('webapp.apt_state_serving') : isPast ? _t('webapp.apt_state_past') : needsPayment ? _t('webapp.apt_tl_pending_pay') : _t('webapp.apt_state_confirmed');
  const stateIcon = isCancelled ? 'cross' : isDone ? 'check' : isServing ? 'zap' : 'clock';

  const formatDate = (d) => {
    if (!d) return '-';
    const months = ['Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'];
    const days = [_t('webapp.day_sun'),_t('webapp.dayfull_mon'),_t('webapp.dayfull_tue'),_t('webapp.dayfull_wed'),_t('webapp.dayfull_thu'),_t('webapp.dayfull_fri'),_t('webapp.day_sat')];
    const dt = new Date(d + 'T00:00:00');
    return `${days[dt.getDay()]}, ${dt.getDate()} de ${months[dt.getMonth()]}`;
  };

  // Pay now handler
  const handlePayNow = async () => {
    setPayingNow(true);
    try {
      const returnPath = location.origin + location.pathname.replace(/\/(webapp|web)$/, '/payment-return');
      const res = await API.post('/beauty/pay-appointment', {
        appointment_id: apt.ID, return_path: returnPath,
      });
      if (res.message === 'success' && res.data?.redirect_html) {
        document.open();
        document.write(res.data.redirect_html);
        document.close();
      } else {
        addToast && addToast(res.detail || _t('webapp.error_generic'), 'error');
      }
    } catch(e) { addToast && addToast(_t('webapp.eval_connection_error'), 'error'); }
    setPayingNow(false);
  };

  return (
    <aside className="ticket-panel">
      <button className="ticket-collapse-btn" onClick={onToggle} title={_t("webapp.apt_collapse")}><Ico name="chevR" size={16} /></button>
      <div className="ticket-head" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <h3>{_t("webapp.apt_detail_title")}</h3>
        <button onClick={onClose} style={{ background: 'none', border: 'none', color: 'var(--d-fg-3)', cursor: 'pointer', fontSize: 18 }}>&times;</button>
      </div>
      <div style={{ padding: '0 1rem', overflowY: 'auto', flex: 1, paddingBottom: '1rem' }}>

        {/* Status header */}
        <div style={{ textAlign: 'center', padding: '1rem 0' }}>
          <div style={{ background: `${stateColor}20`, color: stateColor, width: 56, height: 56, borderRadius: 14, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', marginBottom: 10 }}>
            <Ico name={stateIcon} size={28} />
          </div>
          <h2 style={{ fontSize: '1.1rem', fontWeight: 700, color: 'var(--d-fg-1)', marginBottom: 2 }}>{apt.ServiceName || '-'}</h2>
          <span style={{ display: 'inline-block', fontSize: 12, fontWeight: 600, padding: '4px 14px', borderRadius: 8, color: stateColor, background: `${stateColor}18` }}>
            {stateLabel}
          </span>
        </div>

        {/* Timeline */}
        {!isCancelled && (
          <div className="apt-timeline">
            {timelineSteps.map((s, i) => {
              const reached = i <= currentStep;
              const active = i === currentStep;
              return (
                <div key={s.key} className={`apt-tl-step ${reached ? 'apt-tl-reached' : ''} ${active ? 'apt-tl-active' : ''}`}>
                  <div className="apt-tl-dot">
                    {reached ? <Ico name={s.icon} size={10} /> : <span />}
                  </div>
                  <span className="apt-tl-label">{s.label}</span>
                  {i < timelineSteps.length - 1 && <div className={`apt-tl-line ${i < currentStep ? 'apt-tl-line--done' : ''}`} />}
                </div>
              );
            })}
          </div>
        )}

        {/* Payment alert — needs payment */}
        {needsPayment && (
          <div style={{ margin: '12px 0', padding: 12, borderRadius: 10, background: 'rgba(251,191,36,0.1)', border: '1px solid rgba(251,191,36,0.3)' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
              <Ico name="alert" size={16} />
              <span style={{ fontSize: 13, fontWeight: 600, color: '#fbbf24' }}>{_t('webapp.apt_pay_pending')}</span>
            </div>
            <div style={{ fontSize: 12, color: 'var(--d-fg-3)', marginBottom: 10 }}>
              {parseFloat(apt.Price).toFixed(0)}$ {apt.PriceCurrency || 'CVE'}
            </div>
            <button className="pay-btn-primary" onClick={handlePayNow} disabled={payingNow}
              style={{ width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6, fontSize: 13 }}>
              {payingNow ? <><span className="btn-spinner" /> {_t('webapp.pay_processing')}</> : <><Ico name="lock" size={14} /> {_t('webapp.apt_pay_now')}</>}
            </button>
          </div>
        )}

        {/* Paid badge + receipt */}
        {isPaid && hasPrice && (
          <div style={{ margin: '12px 0', padding: 10, borderRadius: 10, background: 'rgba(52,211,153,0.1)', border: '1px solid rgba(52,211,153,0.2)' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <Ico name="check" size={16} />
              <span style={{ fontSize: 13, fontWeight: 600, color: '#34d399' }}>{_t('webapp.apt_paid')}</span>
              <span style={{ fontSize: 12, color: 'var(--d-fg-3)', marginLeft: 'auto' }}>{parseFloat(apt.Price).toFixed(0)}$ {apt.PriceCurrency || 'CVE'}</span>
            </div>
            {(apt.PaymentShareHash || apt.PaymentTransactionId) && (
              <button onClick={() => {
                if (apt.PaymentShareHash) {
                  API.get('/payments/receipt/' + apt.PaymentShareHash).then(r => {
                    if (r.message === 'success' && r.data) setSharedReceipt(r.data);
                  });
                } else {
                  openReceiptByTxId(apt.PaymentTransactionId);
                }
              }}
                style={{ marginTop: 8, width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6, padding: '6px 12px', borderRadius: 8, border: '1px solid rgba(52,211,153,0.3)', background: 'transparent', color: '#34d399', fontSize: 12, fontWeight: 600, cursor: 'pointer' }}>
                <Ico name="doc" size={14} /> {_t('webapp.apt_receipt') || 'Ver recibo'}
              </button>
            )}
          </div>
        )}

        {/* Cancel button — unpaid, not cancelled, future */}
        {!isPaid && !isCancelled && !isDone && apt.DateAudience >= today && (
          <div style={{ margin: '8px 0' }}>
            <button onClick={async () => {
              if (!confirm(_t('webapp.apt_cancel_confirm') || 'Tem a certeza que deseja cancelar esta marcação?')) return;
              try {
                const res = await API.post('/beauty/cancel-appointment', { appointment_id: apt.ID });
                if (res.message === 'success') {
                  addToast && addToast(_t('webapp.apt_cancelled_ok') || 'Marcação cancelada.', 'success');
                  onClose && onClose();
                } else {
                  addToast && addToast(res.detail || 'Erro ao cancelar.', 'error');
                }
              } catch(e) { addToast && addToast(_t('webapp.eval_connection_error'), 'error'); }
            }}
              style={{ width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6, padding: '8px 12px', borderRadius: 8, border: '1px solid rgba(248,113,113,0.3)', background: 'rgba(248,113,113,0.08)', color: '#f87171', fontSize: 12, fontWeight: 600, cursor: 'pointer' }}>
              <Ico name="cross" size={14} /> {_t('webapp.apt_cancel') || 'Cancelar marcação'}
            </button>
          </div>
        )}

        {/* Date & time */}
        <div className="gm-detail-card" style={{ marginTop: 4 }}>
          <div className="gm-detail-row"><span><Ico name="calendar" size={14} /> {_t("webapp.apt_detail_date")}</span><span>{formatDate(apt.DateAudience)}</span></div>
          <div className="gm-detail-row"><span><Ico name="clock" size={14} /> {_t("webapp.apt_detail_time")}</span><span>{(apt.TimeAudience || '').substring(0, 5)}</span></div>
        </div>

        {/* Location */}
        {apt.AgencyName && (
          <div className="gm-detail-card" style={{ marginTop: 12 }}>
            <div className="gm-detail-row"><span><Ico name="pin" size={14} /> {_t("webapp.apt_detail_location")}</span><span>{apt.AgencyName}</span></div>
          </div>
        )}

        {/* Operator */}
        {apt.OperatorName && (
          <div className="gm-detail-card" style={{ marginTop: 12 }}>
            <div className="gm-detail-row"><span><Ico name="user" size={14} /> {_t("webapp.apt_detail_professional")}</span><span>{apt.OperatorName}</span></div>
          </div>
        )}

        {/* Category */}
        {apt.SubjectName && (
          <div className="gm-detail-card" style={{ marginTop: 12 }}>
            <div className="gm-detail-row"><span><Ico name="tag" size={14} /> {_t("webapp.apt_detail_category")}</span><span>{apt.SubjectName}</span></div>
          </div>
        )}

        {/* ID */}
        <div className="gm-detail-card" style={{ marginTop: 12 }}>
          <div className="gm-detail-row"><span>{_t("webapp.apt_detail_reference")}</span><span style={{ fontFamily: 'monospace', fontWeight: 600 }}>#{apt.Code || apt.ID}</span></div>
        </div>

        {/* Rating display — show if already evaluated */}
        {apt.Rating && (
          <div className="gm-detail-card" style={{ marginTop: 12 }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <span style={{ fontSize: 13, fontWeight: 600, color: 'var(--d-fg-2)' }}>{_t('webapp.apt_your_rating')}</span>
                <span style={{ color: 'var(--nb-gold, #FDB812)', fontSize: 16 }}>
                  {'★'.repeat(parseInt(apt.Rating))}{'☆'.repeat(5 - parseInt(apt.Rating))}
                </span>
              </div>
              {onEvaluate && (
                <button onClick={() => onEvaluate({ TicketHash: apt.Code, AgencyHash: apt.AgencyHash, ServiceHash: apt.ServiceHash, AgencyName: apt.AgencyName, ServiceName: apt.ServiceName, isAppointment: true, appointmentId: apt.ID, previousRating: parseInt(apt.Rating) })}
                  style={{ background: 'none', border: 'none', cursor: 'pointer', fontSize: 12, color: 'var(--nb-primary, #02A586)', fontWeight: 600 }}>
                  {_t('webapp.apt_reevaluate')}
                </button>
              )}
            </div>
            {apt.RatingDate && (
              <div style={{ fontSize: 11, color: 'var(--d-fg-3)', marginTop: 4 }}>
                {new Date(apt.RatingDate).toLocaleDateString('pt-CV', { day: 'numeric', month: 'short', year: 'numeric' })}
              </div>
            )}
          </div>
        )}

        {/* Evaluate — after service done, not yet rated */}
        {isDone && !apt.Rating && onEvaluate && (
          <button className="modal-btn-primary" style={{ width: '100%', marginTop: 16, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6 }}
            onClick={() => onEvaluate({ TicketHash: apt.Code, AgencyHash: apt.AgencyHash, ServiceHash: apt.ServiceHash, AgencyName: apt.AgencyName, ServiceName: apt.ServiceName, isAppointment: true, appointmentId: apt.ID })}>
            <Ico name="star" size={14} /> {_t('webapp.apt_evaluate')}
          </button>
        )}

        {/* No-show evaluation — past but not served, not yet rated */}
        {isPast && !isDone && !isCancelled && !apt.Rating && onNoShowEval && (
          <button className="modal-btn-secondary" style={{ width: '100%', marginTop: 12, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6 }}
            onClick={() => onNoShowEval({ TicketHash: apt.Code, AgencyHash: apt.AgencyHash, ServiceHash: apt.ServiceHash, AgencyName: apt.AgencyName, isAppointment: true, appointmentId: apt.ID })}>
            <Ico name="alert" size={14} /> {_t('webapp.apt_noshow_eval')}
          </button>
        )}

      </div>
    </aside>
  );
}

// ─── Payments View (NhaBex Pay) ─────────────────────────────
const PAY_CATEGORY_ICONS = {
  phone_android: 'phone', bolt: 'zap', water_drop: 'droplet',
  shield: 'shield', wifi: 'wifi', more_horiz: 'grid',
};

function PaymentsView({ onBack, signedIn, addToast, onSelectService, onServiceInfo, onShowHistory, selectedServiceId }) {
  const [view, setPayView] = useState('grid'); // grid | services
  const [categories, setCategories] = useState([]);
  const [loading, setLoading] = useState(true);
  const [selectedCat, setSelectedCat] = useState(null);
  const [selectedSvc, setSelectedSvc] = useState(null);
  const [showMeterLookup, setShowMeterLookup] = useState(false);

  useEffect(() => {
    API.get('/data/pay-services').then(res => {
      if (res.message === 'success' && res.data) {
        setCategories(Array.isArray(res.data) ? res.data : []);
      }
      setLoading(false);
    }).catch(() => setLoading(false));
  }, []);

  const catIcon = (cat) => PAY_CATEGORY_ICONS[cat.Icon] || 'wallet';

  const selectCategory = (cat) => {
    setSelectedCat(cat);
    setPayView('services');
    if ((cat.services || []).length === 1) {
      selectService(cat.services[0], cat);
    }
  };

  const selectService = (svc, cat) => {
    if (!signedIn) {
      addToast && addToast(_t('webapp.pay_login_required'), 'warning');
      const el = document.getElementById('nb-auth-panel'); if (el) { el.classList.add('auth-panel-highlight'); setTimeout(() => el.classList.remove('auth-panel-highlight'), 1500); }
      return;
    }
    const c = cat || selectedCat;
    setSelectedSvc(svc);
    setSelectedCat(c);
    if (onSelectService) onSelectService(svc, c);
  };

  const goBack = () => setPayView('grid');

  return (
    <div className="payments-view">
      <div className="detail-head">
        <button className="back-btn" onClick={view === 'grid' ? onBack : goBack}><Ico name="arrowL" /></button>
        <div className="titles">
          <h1>{_t('webapp.pay_title')}</h1>
          {view === 'grid' && <p>{_t('webapp.pay_subtitle_sisp')}</p>}
          {view === 'services' && selectedCat && <p>{selectedCat.Name} · {(selectedCat.services || []).length} {(selectedCat.services || []).length === 1 ? _t('webapp.pay_service_singular') : _t('webapp.pay_service_plural')}</p>}
        </div>
        <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 8 }}>
          {view === 'services' && selectedCat?.Slug === 'electricity' && (
            <button onClick={() => setShowMeterLookup(true)} style={{ display: 'flex', alignItems: 'center', gap: 4, fontSize: 12, padding: '6px 12px', background: 'rgba(0,150,100,.1)', border: '1px solid rgba(0,150,100,.2)', borderRadius: 8, color: 'var(--nb-green, #009664)', cursor: 'pointer', fontWeight: 500 }}>
              <Ico name="search" size={14} /> {_t('webapp.pay_lookup_meter')}
            </button>
          )}
          {signedIn && <button onClick={() => onShowHistory && onShowHistory()} style={{ display: 'flex', alignItems: 'center', gap: 4, fontSize: 12, padding: '6px 12px', background: 'var(--d-bg-surface)', border: '1px solid var(--d-border)', borderRadius: 8, color: 'var(--d-fg-2)', cursor: 'pointer' }}>
            <Ico name="receipt" size={14} /> {_t('webapp.pay_history_btn')}
          </button>}
        </div>
      </div>

      {loading ? <SkeletonRows count={6} /> : (
        <>
          {/* GRID VIEW */}
          {view === 'grid' && (
            <div className="pay-grid">
              {categories.map(cat => (
                <button key={cat.ID} className="pay-cat-card" onClick={() => selectCategory(cat)}>
                  <div className="pay-cat-icon" style={{ background: cat.ColorBg ? `${cat.ColorBg}22` : 'rgba(2,165,134,0.1)', color: cat.ColorText || 'var(--nb-green)' }}>
                    {cat.LogoURL ? (
                      <img src={cat.LogoURL} alt="" style={{ width: 28, height: 28, objectFit: 'contain' }} onError={e => { e.target.style.display = 'none'; }} />
                    ) : (
                      <Ico name={catIcon(cat)} size={22} />
                    )}
                  </div>
                  <span className="pay-cat-name">{cat.Name}</span>
                  <span className="pay-cat-count">{(cat.services || []).length} {(cat.services || []).length === 1 ? _t('webapp.pay_service_singular') : _t('webapp.pay_service_plural')}</span>
                </button>
              ))}
              {/* "Não encontrei o meu serviço" option */}
              <button className="pay-cat-card" onClick={() => selectService({ Name: _t('webapp.pay_service_not_found'), ID: null, FormType: 'entity_ref', EntityCode: '' }, null)}
                style={{ border: '1px dashed var(--d-border, #ccc)', opacity: 0.85 }}>
                <div className="pay-cat-icon" style={{ background: 'var(--d-bg-surface, #f5f5f5)', color: 'var(--d-fg-3, #888)' }}>
                  <Ico name="searchOff" size={22} />
                </div>
                <span className="pay-cat-name">{_t('webapp.pay_service_not_found')}</span>
                <span className="pay-cat-count">{_t('webapp.pay_service_not_found_desc')}</span>
              </button>
              {categories.length === 0 && (
                <div style={{ gridColumn: '1/-1', padding: 40, textAlign: 'center', color: 'var(--d-fg-3)' }}>{_t('webapp.pay_not_available')}</div>
              )}
            </div>
          )}

          {/* SISP Brand Logos (requisito SISP checklist #2) */}
          {view === 'grid' && (
            <div className="pay-brands-bar">
              <img src="../img/pay/vinti4.png" alt="Vinti4" height="30" />
              <img src="../img/pay/visa-secure.png" alt="Visa Secure" height="24" />
              <img src="../img/pay/mastercard-idcheck.png" alt="Mastercard ID Check" height="24" />
              <img src="../img/pay/amex-safekey.png" alt="Amex SafeKey" height="24" />
            </div>
          )}

          {/* SERVICES LIST */}
          {view === 'services' && selectedCat && (
            <div className="pay-svc-list">
              {(selectedCat.services || []).map(svc => (
                <div key={svc.ID} className={`pay-svc-item ${selectedServiceId === svc.ID ? 'pay-svc-item--selected' : ''}`} onClick={() => selectService(svc)} style={{ cursor: 'pointer' }}>
                  <div className="pay-svc-icon">
                    {svc.LogoURL ? (
                      <img src={svc.LogoURL} alt="" style={{ width: 32, height: 32, objectFit: 'contain', borderRadius: 6 }} />
                    ) : (
                      <Ico name={catIcon(selectedCat)} size={20} />
                    )}
                  </div>
                  <div className="pay-svc-info">
                    <span className="pay-svc-name">{svc.Name}</span>
                    {svc.Description && <span className="pay-svc-desc">{svc.Description}</span>}
                  </div>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                    <button className="pay-svc-info-btn" onClick={(e) => { e.stopPropagation(); onServiceInfo && onServiceInfo(svc, selectedCat); }} title={_t('webapp.pay_svc_info_btn')}>
                      <Ico name="info" size={16} />
                    </button>
                    <Ico name="chevR" size={16} />
                  </div>
                </div>
              ))}
              {/* "Não encontrei o meu serviço" option in services list */}
              <div className="pay-svc-item" onClick={() => selectService({ Name: _t('webapp.pay_service_not_found'), ID: null, FormType: 'entity_ref', EntityCode: '' })}
                style={{ cursor: 'pointer', border: '1px dashed var(--d-border, #ccc)', opacity: 0.85 }}>
                <div className="pay-svc-icon">
                  <Ico name="searchOff" size={20} />
                </div>
                <div className="pay-svc-info">
                  <span className="pay-svc-name">{_t('webapp.pay_service_not_found')}</span>
                  <span className="pay-svc-desc">{_t('webapp.pay_service_not_found_desc')}</span>
                </div>
                <Ico name="chevR" size={16} />
              </div>
            </div>
          )}
        </>
      )}
      {/* Modal: Consultar Referência Contador */}
      {showMeterLookup && (
        <div style={{ position: 'fixed', inset: 0, zIndex: 9999, background: 'rgba(0,0,0,.5)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 16 }} onClick={e => { if (e.target === e.currentTarget) setShowMeterLookup(false); }}>
          <div style={{ background: 'var(--d-bg-2, #fff)', borderRadius: 16, width: '100%', maxWidth: 650, maxHeight: '90vh', display: 'flex', flexDirection: 'column', overflow: 'hidden', boxShadow: '0 8px 32px rgba(0,0,0,.2)' }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '16px 20px', borderBottom: '1px solid var(--d-border, #e0e0e0)' }}>
              <h3 style={{ margin: 0, fontSize: 16, fontWeight: 600 }}>{_t('webapp.pay_lookup_meter')}</h3>
              <button onClick={() => setShowMeterLookup(false)} style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 4, borderRadius: '50%', display: 'flex', alignItems: 'center', color: 'var(--d-fg-3, #666)' }}>
                <Ico name="x" size={20} />
              </button>
            </div>
            <div style={{ flex: 1, minHeight: 0 }}>
              <iframe src="https://entidadeservico.vinti4.cv/prepago" style={{ width: '100%', height: '70vh', maxHeight: 600, border: 'none', display: 'block' }} allowFullScreen />
            </div>
          </div>
        </div>
      )}

      {/* Pay Footer: contacto + política (SISP checklist #5 e #6) */}
      <div className="pay-footer-desktop">
        <span><Ico name="support" size={13} /> suporte@nhabex.com · +238 985 82 14</span>
        <span>
          <a href="../termos-utilizacao" target="_blank">{_t('webapp.pay_terms_link')}</a>
          {' · '}
          <a href="privacidade" target="_blank">{_t('webapp.pay_privacy_link')}</a>
          {' · '}
          <a href="../termos-utilizacao#reembolsos" target="_blank">{_t('webapp.pay_refund_policy') || 'Política de Reembolso'}</a>
        </span>
      </div>
    </div>
  );
}

// ─── Payment History Panel (right side) ──────────────────────
function PaymentHistoryPanel({ onClose, collapsed, onToggle, onRepeatPayment }) {
  const [history, setHistory] = useState([]);
  const [loading, setLoading] = useState(true);
  const [filter, setFilter] = useState({ status: '', search: '' });
  const [detail, setDetail] = useState(null);
  const [detailLoading, setDetailLoading] = useState(false);

  useEffect(() => {
    API.get('/client/payments').then(res => {
      if (res.message === 'success') setHistory(Array.isArray(res.data) ? res.data : []);
      setLoading(false);
    }).catch(() => setLoading(false));
  }, []);

  const loadDetail = async (item) => {
    if (!item.TransactionId) return;
    setDetailLoading(true);
    setDetail(item);
    try {
      const res = await API.get('/client/payments/' + item.TransactionId);
      if (res.message === 'success') setDetail({ ...item, ...res.data });
    } catch (e) {}
    setDetailLoading(false);
  };

  const sharePayment = async (item) => {
    try {
      const res = await API.post('/client/payments/' + item.TransactionId + '/share');
      if (res.message === 'success' && res.data?.url) {
        const url = res.data.url;
        if (navigator.share) {
          navigator.share({ title: 'NhaBex Pay — ' + _t('webapp.pay_receipt'), text: (item.ServiceName || item.ServiceType) + ' — ' + parseInt(item.Amount).toLocaleString('pt') + ' CVE', url }).catch(() => {});
        } else {
          navigator.clipboard.writeText(url).then(() => {
            if (window.__nbAddToast) window.__nbAddToast(_t('webapp.pay_receipt_link_copied'), 'success', 2500);
          });
        }
      }
    } catch (e) {
      if (window.__nbAddToast) window.__nbAddToast(_t('webapp.pay_receipt_share_error'), 'error', 2000);
    }
  };

  const printReceipt = (item) => {
    const svcLabel = item.ServiceName || serviceTypeLabels[item.ServiceType] || item.ServiceType;
    const amount = parseInt(item.Amount).toLocaleString('pt') + ' CVE';
    const date = item.created_at ? new Date(item.created_at).toLocaleDateString('pt', { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit' }) : '—';
    const _rSvc = _t('webapp.pay_confirm_service'), _rEnt = _t('webapp.pay_confirm_entity'), _rRef = _t('webapp.pay_confirm_reference');
    const _rDt = _t('webapp.pay_receipt_date'), _rTxn = _t('webapp.pay_receipt_transaction'), _rPaid = _t('webapp.pay_receipt_status_paid');
    const _rTotal = _t('webapp.pay_receipt_total'), _rThanks = _t('webapp.pay_receipt_thanks'), _rPrint = _t('webapp.pay_receipt_print_btn');
    const _rTitle = _t('webapp.pay_receipt_print_title'), _rStatus = _t('webapp.pay_filter_success');
    const w = window.open('', '_blank', 'width=420,height=600');
    if (!w) return;
    w.document.write(`<!DOCTYPE html><html><head><title>${_rTitle} — NhaBex Pay</title>
      <style>*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;padding:24px;color:#333;max-width:400px;margin:0 auto}
      .hd{background:#02A586;color:#fff;padding:20px;text-align:center;border-radius:8px 8px 0 0;margin:-24px -24px 0}
      .hd h1{font-size:18px;margin:4px 0 0}.bd{border:1px solid #e5e7eb;border-top:0;border-radius:0 0 8px 8px;padding:20px}
      .row{display:flex;justify-content:space-between;padding:6px 0;font-size:13px;border-bottom:1px solid #f3f4f6}
      .row:last-child{border-bottom:0}.row .lbl{color:#888}.row .val{font-weight:600;text-align:right}
      .total{font-size:16px;padding:10px 0;border-top:2px solid #e5e7eb;margin-top:8px}
      .total .val{color:#02A586}.ft{text-align:center;margin-top:16px;font-size:11px;color:#aaa}.ft a{color:#02A586}
      @media print{body{padding:0}.no-print{display:none!important}}</style></head><body>
      <div class="hd"><div style="font-size:12px;opacity:.8">NhaBex Pay</div><h1>${_rTitle}</h1>
        <div style="font-size:11px;opacity:.7;margin-top:4px">NhaBex, Lda. · www.nhabex.com</div></div>
      <div class="bd">
        <div class="row"><span class="lbl">${_rSvc}</span><span class="val">${svcLabel}</span></div>
        ${item.ProviderName ? '<div class="row"><span class="lbl">Empresa</span><span class="val">' + item.ProviderName + '</span></div>' : ''}
        ${item.EntityCode ? '<div class="row"><span class="lbl">' + _rEnt + '</span><span class="val">' + (item.ServiceName && item.EntityCode ? item.ServiceName + ' (' + item.EntityCode + ')' : item.EntityCode) + '</span></div>' : ''}
        ${item.ReferenceNumber ? '<div class="row"><span class="lbl">' + _rRef + '</span><span class="val">' + item.ReferenceNumber + '</span></div>' : ''}
        ${item.OrderCode ? '<div class="row"><span class="lbl">Encomenda</span><span class="val" style="font-family:monospace">' + item.OrderCode + '</span></div>' : ''}
        ${item.Items && item.Items.length ? '<div style="background:#f0faf7;border-radius:6px;padding:8px 10px;margin:8px 0;font-size:12px"><div style="font-weight:600;color:#02A586;margin-bottom:4px;font-size:11px;text-transform:uppercase;letter-spacing:0.5px">Itens</div>' + item.Items.map(i => '<div style="padding:2px 0;border-bottom:1px solid rgba(2,165,134,0.1)">' + i.qty + 'x ' + i.name + ' — ' + parseInt(i.total).toLocaleString('pt') + ' CVE</div>').join('') + '</div>' : ''}
        <div class="row"><span class="lbl">${_rDt}</span><span class="val">${date}</span></div>
        <div class="row"><span class="lbl">${_rTxn}</span><span class="val" style="font-family:monospace;font-size:11px">${item.TransactionId}</span></div>
        <div class="row"><span class="lbl">${_rStatus}</span><span class="val" style="color:#02A586">${_rPaid}</span></div>
        ${item.service_price != null && item.platform_fee != null && item.platform_fee > 0 ? '<div style="border-top:1px solid #e5e7eb;margin-top:8px;padding-top:8px"><div class="row"><span class="lbl">Serviço</span><span class="val">' + parseInt(item.service_price).toLocaleString('pt') + ' CVE</span></div><div class="row"><span class="lbl">Taxa de plataforma</span><span class="val">' + parseInt(item.platform_fee).toLocaleString('pt') + ' CVE</span></div></div>' : ''}
        <div class="row total"><span class="lbl" style="font-weight:700;color:#333">${_rTotal}</span><span class="val">${amount}</span></div>
      </div>
      <div class="ft">Suporte: <a href="mailto:suporte@nhabex.com">suporte@nhabex.com</a> · +238 985 82 14<br>NhaBex Pay · SISP/Vinti4</div>
      <div class="no-print" style="text-align:center;margin-top:20px">
        <button onclick="window.print()" style="padding:10px 32px;background:#02A586;color:#fff;border:none;border-radius:6px;font-size:14px;cursor:pointer">${_rPrint}</button>
      </div></body></html>`);
    w.document.close();
  };

  const copyTransactionId = (txnId) => {
    navigator.clipboard.writeText(txnId).then(() => {
      if (window.__nbAddToast) window.__nbAddToast(_t('webapp.pay_id_copied'), 'success', 1500);
    });
  };

  if (collapsed) {
    return (
      <aside className="ticket-panel collapsed">
        <button className="ticket-collapse-btn" onClick={onToggle} title={_t('webapp.panel_expand')}>
          <span style={{ transform: 'rotate(180deg)', display: 'inline-flex' }}><Ico name="chevR" size={16} /></span>
        </button>
      </aside>
    );
  }

  const statusLabel = (s) => ({ success: _t('webapp.pay_filter_success'), error: _t('webapp.pay_filter_error'), canceled: _t('webapp.pay_filter_canceled'), pending: _t('webapp.pay_filter_pending') }[s] || s);
  const statusCls = (s) => ({ success: 'pay-st-success', error: 'pay-st-error', canceled: 'pay-st-cancel', pending: 'pay-st-pending' }[s] || '');

  const serviceTypeLabels = {
    phone_topup: _t('webapp.pay_svc_type_topup'), electricity: _t('webapp.pay_svc_type_electricity'), water: _t('webapp.pay_svc_type_water'), insurance: _t('webapp.pay_svc_type_insurance'),
    internet: _t('webapp.pay_svc_type_internet'), purchase: _t('webapp.pay_svc_type_purchase'), other: _t('webapp.pay_svc_type_other'), games_booking: _t('webapp.pay_svc_type_games_booking'),
    games_tournament: _t('webapp.pay_svc_type_games_tournament'), games_subscription: _t('webapp.pay_svc_type_games_sub'), car_route_booking: _t('webapp.pay_svc_type_car_route'), wash_booking: _t('webapp.pay_svc_type_wash'),
    store_purchase: _t('webapp.pay_svc_type_store') || 'Compra na Loja',
    beauty_prepaid: _t('webapp.pay_svc_type_beauty') || 'Serviço de Beleza',
  };

  // Tipos que suportam "repetir pagamento"
  const repeatableTypes = ['phone_topup', 'electricity', 'water', 'insurance', 'internet', 'purchase', 'other'];

  let list = history;
  if (filter.status) list = list.filter(i => i.Status === filter.status);
  if (filter.search) {
    const q = filter.search.toLowerCase();
    list = list.filter(i =>
      (i.ServiceName || '').toLowerCase().includes(q) ||
      (i.ReferenceNumber || '').toLowerCase().includes(q) ||
      (i.TransactionId || '').toLowerCase().includes(q)
    );
  }

  // Detail/Receipt view
  if (detail) {
    const d = detail;
    const amount = parseInt(d.Amount).toLocaleString('pt') + ' CVE';
    const date = d.created_at ? new Date(d.created_at).toLocaleDateString('pt', { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit' }) : '—';
    const canRepeat = d.Status === 'success' && repeatableTypes.includes(d.ServiceType);

    return (
      <aside className="ticket-panel">
        <button className="ticket-collapse-btn" onClick={onToggle} title={_t('webapp.panel_collapse')}><Ico name="chevR" size={16} /></button>
        <div className="ticket-head" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <button onClick={() => setDetail(null)} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--d-fg-2)', display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: '0.8125rem', fontWeight: 600, padding: 0, lineHeight: 1 }}>
            <span style={{ transform: 'rotate(180deg)', display: 'inline-flex', alignItems: 'center' }}><Ico name="chevR" size={12} /></span> {_t('webapp.pay_back')}
          </button>
          <button onClick={onClose} style={{ background: 'none', border: 'none', color: 'var(--d-fg-3)', cursor: 'pointer', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 28, height: 28, borderRadius: '50%', padding: 0, lineHeight: 1 }}>
            <Ico name="cross" size={14} />
          </button>
        </div>
        <div style={{ padding: '0 1rem', overflowY: 'auto', flex: 1, paddingBottom: '1rem' }}>
          {detailLoading ? <SkeletonRows count={4} /> : (
            <>
              {/* Header */}
              <div style={{ textAlign: 'center', padding: '16px 0' }}>
                <div style={{ width: 52, height: 52, borderRadius: '50%', background: d.Status === 'success' ? 'rgba(2,165,134,0.12)' : d.Status === 'error' ? 'rgba(239,68,68,0.12)' : 'rgba(245,158,11,0.12)', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 10px' }}>
                  {d.ServiceLogoURL ? <img src={d.ServiceLogoURL} alt="" style={{ width: 24, height: 24, objectFit: 'contain', borderRadius: 4 }} /> : <Ico name={d.Status === 'success' ? 'check' : d.Status === 'error' ? 'cross' : 'clock'} size={22} />}
                </div>
                <div style={{ fontSize: '1.25rem', fontWeight: 700 }}>{amount}</div>
                <div style={{ fontSize: '0.8125rem', color: 'var(--d-fg-3)', marginTop: 2 }}>{d.ServiceName || serviceTypeLabels[d.ServiceType] || d.ServiceType}</div>
                {d.ProviderName && <div style={{ fontSize: '0.75rem', color: 'var(--d-fg-3)', marginTop: 2 }}>{d.ProviderName}</div>}
                <span className={`pay-hist-status ${statusCls(d.Status)}`} style={{ marginTop: 6, display: 'inline-block' }}>{statusLabel(d.Status)}</span>
              </div>

              {/* Error message */}
              {d.Status === 'error' && d.ErrorDescription && (
                <div style={{ background: 'rgba(239,68,68,0.08)', border: '1px solid rgba(239,68,68,0.2)', borderRadius: 8, padding: '10px 14px', marginBottom: 12, fontSize: '0.8125rem', color: '#ef4444' }}>
                  <div style={{ display: 'flex', alignItems: 'flex-start', gap: 8 }}>
                    <Ico name="info" size={14} style={{ marginTop: 2, flexShrink: 0 }} />
                    <div>
                      <div style={{ fontWeight: 600, marginBottom: 2 }}>{_t('webapp.pay_error_reason') || 'Motivo do erro'}</div>
                      <div style={{ color: 'var(--d-fg-2)', fontSize: '0.75rem' }}>{d.ErrorDescription}</div>
                      {d.ErrorDetail && <div style={{ color: 'var(--d-fg-3)', fontSize: '0.6875rem', marginTop: 4 }}>{d.ErrorDetail}</div>}
                    </div>
                  </div>
                </div>
              )}

              {/* Details */}
              <div style={{ background: 'var(--d-bg-2)', borderRadius: 8, padding: '12px 14px', marginBottom: 12, fontSize: '0.8125rem' }}>
                {d.ProviderName && <div style={{ display: 'flex', justifyContent: 'space-between', padding: '4px 0', color: 'var(--d-fg-2)' }}><span style={{ color: 'var(--d-fg-3)' }}>{_t('webapp.pay_provider') || 'Empresa'}</span><span style={{ fontWeight: 600 }}>{d.ProviderName}</span></div>}
                {d.Subtitle && <div style={{ display: 'flex', justifyContent: 'space-between', padding: '4px 0', color: 'var(--d-fg-2)' }}><span style={{ color: 'var(--d-fg-3)' }}>{_t('pay_return.date') || 'Data'}</span><span style={{ fontWeight: 600 }}>{d.Subtitle}</span></div>}
                {d.OrderCode && <div style={{ display: 'flex', justifyContent: 'space-between', padding: '4px 0', color: 'var(--d-fg-2)' }}><span style={{ color: 'var(--d-fg-3)' }}>Encomenda</span><span style={{ fontWeight: 600, fontFamily: 'monospace' }}>{d.OrderCode}</span></div>}
                {d.EntityCode && <div style={{ display: 'flex', justifyContent: 'space-between', padding: '4px 0', color: 'var(--d-fg-2)' }}><span style={{ color: 'var(--d-fg-3)' }}>{_t('webapp.pay_confirm_entity')}</span><span style={{ fontWeight: 600 }}>{d.ServiceName ? d.ServiceName + ' (' + d.EntityCode + ')' : d.EntityCode}</span></div>}
                {d.ReferenceNumber && <div style={{ display: 'flex', justifyContent: 'space-between', padding: '4px 0', color: 'var(--d-fg-2)' }}><span style={{ color: 'var(--d-fg-3)' }}>{_t('webapp.pay_confirm_reference')}</span><span style={{ fontWeight: 600 }}>{d.ReferenceNumber}</span></div>}
                <div style={{ display: 'flex', justifyContent: 'space-between', padding: '4px 0', color: 'var(--d-fg-2)' }}><span style={{ color: 'var(--d-fg-3)' }}>{_t('webapp.pay_receipt_date')}</span><span>{date}</span></div>
                <div style={{ display: 'flex', justifyContent: 'space-between', padding: '4px 0', color: 'var(--d-fg-2)', alignItems: 'center' }}>
                  <span style={{ color: 'var(--d-fg-3)' }}>{_t('webapp.pay_receipt_transaction')}</span>
                  <span style={{ fontFamily: 'monospace', fontSize: 11, cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 4 }} onClick={() => copyTransactionId(d.TransactionId)}>
                    {d.TransactionId} <Ico name="copy" size={11} />
                  </span>
                </div>
                {d.CardMask && <div style={{ display: 'flex', justifyContent: 'space-between', padding: '4px 0', color: 'var(--d-fg-2)' }}><span style={{ color: 'var(--d-fg-3)' }}>{_t('webapp.pay_card') || 'Cartão'}</span><span style={{ fontFamily: 'monospace', fontSize: 11 }}>{d.CardMask}</span></div>}
              </div>

              {/* Store items */}
              {d.Items && d.Items.length > 0 && (
                <div style={{ background: '#f0faf7', borderRadius: 8, padding: '10px 14px', marginBottom: 12, fontSize: '0.8rem' }}>
                  <div style={{ fontWeight: 600, color: '#02A586', marginBottom: 6, fontSize: '0.7rem', textTransform: 'uppercase', letterSpacing: '0.5px' }}>Itens</div>
                  {d.Items.map((item, i) => (
                    <div key={i} style={{ display: 'flex', justifyContent: 'space-between', padding: '3px 0', borderBottom: '1px solid rgba(2,165,134,0.1)' }}>
                      <span>{item.qty}x {item.name}</span>
                      <span style={{ fontWeight: 600 }}>{parseInt(item.total).toLocaleString('pt')} CVE</span>
                    </div>
                  ))}
                </div>
              )}

              {/* Action buttons */}
              <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
                {d.Status === 'success' && (
                  <button className="pay-btn-outline" style={{ flex: 1, minWidth: 0, fontSize: '0.75rem', padding: '8px 10px', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 5 }}
                    onClick={() => printReceipt(d)}>
                    <Ico name="receipt" size={13} /> {_t('webapp.pay_receipt')}
                  </button>
                )}
                {d.Status === 'success' && (
                  <button className="pay-btn-outline" style={{ flex: 1, minWidth: 0, fontSize: '0.75rem', padding: '8px 10px', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 5 }}
                    onClick={() => sharePayment(d)}>
                    <Ico name="share" size={13} /> {_t('webapp.pay_share')}
                  </button>
                )}
                {canRepeat && onRepeatPayment && (
                  <button className="pay-btn-outline" style={{ flex: 1, minWidth: 0, fontSize: '0.75rem', padding: '8px 10px', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 5 }}
                    onClick={() => { onRepeatPayment(d); setDetail(null); }}>
                    <Ico name="send" size={13} /> {_t('webapp.pay_repeat')}
                  </button>
                )}
                {d.Status === 'error' && onRepeatPayment && (
                  <button className="pay-btn-primary" style={{ flex: 1, minWidth: 0, fontSize: '0.75rem', padding: '8px 10px', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 5 }}
                    onClick={() => { onRepeatPayment(d); setDetail(null); }}>
                    <Ico name="send" size={13} /> {_t('webapp.pay_try_again')}
                  </button>
                )}
                {d.Status === 'pending' && onRepeatPayment && (
                  <button className="pay-btn-primary" style={{ flex: 1, minWidth: 0, fontSize: '0.75rem', padding: '8px 10px', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 5 }}
                    onClick={() => { onRepeatPayment(d); setDetail(null); }}>
                    <Ico name="send" size={13} /> {_t('webapp.pay_btn_pay_pending')}
                  </button>
                )}
              </div>
            </>
          )}
        </div>
      </aside>
    );
  }

  return (
    <aside className="ticket-panel">
      <button className="ticket-collapse-btn" onClick={onToggle} title={_t('webapp.panel_collapse')}><Ico name="chevR" size={16} /></button>
      <div className="ticket-head" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <h3>{_t('webapp.pay_history')}</h3>
        <button onClick={onClose} style={{ background: 'none', border: 'none', color: 'var(--d-fg-3)', cursor: 'pointer', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 28, height: 28, borderRadius: '50%', padding: 0, lineHeight: 1 }}>
          <Ico name="cross" size={14} />
        </button>
      </div>
      <div style={{ padding: '0 1rem', overflowY: 'auto', flex: 1, paddingBottom: '1rem' }}>
        {loading ? <SkeletonRows count={5} /> : (
          <>
            {history.length > 0 && (
              <div className="pay-hist-filters">
                <div className="pay-hist-chips">
                  {[{ id: '', l: _t('webapp.pay_filter_all') }, { id: 'success', l: _t('webapp.pay_filter_success') }, { id: 'error', l: _t('webapp.pay_filter_error') }, { id: 'canceled', l: _t('webapp.pay_filter_canceled') }, { id: 'pending', l: _t('webapp.pay_filter_pending') }].map(f => (
                    <button key={f.id} className={`tk-tab ${filter.status === f.id ? 'on' : ''}`}
                      onClick={() => setFilter(p => ({ ...p, status: f.id }))}>{f.l}</button>
                  ))}
                </div>
                <div className="pay-hist-search">
                  <Ico name="search" size={14} />
                  <input type="text" placeholder={_t('webapp.pay_search')} value={filter.search}
                    onChange={e => setFilter(p => ({ ...p, search: e.target.value }))} />
                </div>
              </div>
            )}
            {history.length === 0 ? (
              <EmptyState icon="wallet" title={_t('webapp.pay_no_history_title')} description={_t('webapp.pay_no_history_desc')} />
            ) : list.length === 0 ? (
              <EmptyState icon="search" title={_t('webapp.pay_no_results_title')} description={_t('webapp.pay_no_results_desc')}
                actions={[
                  { label: _t('webapp.pay_clear_filters'), icon: 'cross', onClick: () => setFilter({ status: '', search: '' }) },
                ]}
              />
            ) : (
              <div className="pay-hist-list">
                {list.map(item => (
                  <div key={item.ID} className="pay-hist-item" style={{ cursor: 'pointer' }} onClick={() => loadDetail(item)}>
                    <div className="pay-hist-icon">
                      {item.ServiceLogoURL ? (
                        <img src={item.ServiceLogoURL} alt="" style={{ width: 22, height: 22, objectFit: 'contain', borderRadius: 4 }} />
                      ) : (
                        <Ico name="wallet" size={16} />
                      )}
                    </div>
                    <div className="pay-hist-info">
                      <span className="pay-hist-name">{item.ServiceName || serviceTypeLabels[item.ServiceType] || item.ServiceType}</span>
                      {item.ProviderName && <span className="pay-hist-ref">{item.ProviderName}</span>}
                      <span className="pay-hist-ref">{item.Subtitle || item.ReferenceNumber || item.TransactionId}</span>
                    </div>
                    <div className="pay-hist-right">
                      <span className="pay-hist-amount">{parseInt(item.Amount).toLocaleString('pt')} CVE</span>
                      <span className={`pay-hist-status ${statusCls(item.Status)}`}>{statusLabel(item.Status)}</span>
                    </div>
                    <div style={{ display: 'flex', alignItems: 'center', marginLeft: 4, color: 'var(--d-fg-4)' }}><Ico name="chevR" size={14} /></div>
                  </div>
                ))}
              </div>
            )}
          </>
        )}
      </div>
    </aside>
  );
}

// Derive valid service_type from FormType + category slug (mirrors nhabex-pay.js _deriveServiceType)
function derivePayServiceType(svc, catSlug) {
  if (svc.FormType === 'phone_topup') return 'phone_topup';
  if (svc.FormType === 'purchase') return 'purchase';
  const slugMap = { purchase: 'purchase', phone: 'phone_topup', electricity: 'electricity', water: 'water', insurance: 'insurance', internet: 'internet', other: 'other' };
  return slugMap[catSlug] || 'other';
}

// ─── Payment Form Panel (right side) ─────────────────────────
function PaymentFormPanel({ panel, onClose, collapsed, onToggle, addToast, onSwitchToForm, platformFees }) {
  const { mode, service: svc, category: cat, pendingItem } = panel || {};
  const [step, setStep] = useState('form'); // form | confirm
  const [form, setForm] = useState({ service_type: '', pay_service_id: null, amount: '', entity_code: '', reference_number: '', pending_payment_id: null });
  const [submitting, setSubmitting] = useState(false);
  const [termsAccepted, setTermsAccepted] = useState(true);
  const [customAmount, setCustomAmount] = useState(false);
  const [lastPayment, setLastPayment] = useState(null);
  const [savedCards, setSavedCards] = useState([]);
  const [selectedCard, setSelectedCard] = useState(null);
  const [addingCard, setAddingCard] = useState(false);

  const prevKey = useRef(null);
  useEffect(() => {
    if (!svc) return;
    const key = `${svc.ID}_${mode}`;
    if (key === prevKey.current) return;
    prevKey.current = key;
    const svcType = derivePayServiceType(svc, cat?.Slug || '');
    setForm({ service_type: svcType, pay_service_id: svc.ID, amount: '', entity_code: svc.EntityCode || '', reference_number: '', pending_payment_id: null });
    setCustomAmount(false);
    setTermsAccepted(true);
    setLastPayment(null);
    setStep('form');
    if (mode === 'form') {
      API.get('/client/payments/last-by-service').then(res => {
        if (res.message === 'success' && res.data) {
          const list = Array.isArray(res.data) ? res.data : [];
          const match = list.find(p => p.ID_PayService === svc.ID || p.ServiceType === svcType);
          if (match) setLastPayment(match);
        }
      }).catch(() => {});
      API.get('/client/cards').then(res => {
        if (res.message === 'success') setSavedCards(res.data || []);
      }).catch(() => {});
    }
  }, [svc?.ID, mode]);

  // Handle pending payment from wallet dropdown
  const pendingRef = useRef(null);
  useEffect(() => {
    const pi = panel?.pendingItem;
    if (!pi || pi.ID === pendingRef.current) return;
    pendingRef.current = pi.ID;
    setForm({
      service_type: pi.ServiceType || '',
      pay_service_id: pi.ID_PayService || null,
      amount: pi.Amount ? String(parseInt(pi.Amount)) : '',
      entity_code: pi.EntityCode || '',
      reference_number: pi.ReferenceNumber || '',
      pending_payment_id: pi.ID,
    });
    setStep('form');
  }, [panel?.pendingItem]);

  if (collapsed) {
    return (
      <aside className="ticket-panel collapsed">
        <button className="ticket-collapse-btn" onClick={onToggle} title={_t('webapp.panel_expand')}>
          <span style={{ transform: 'rotate(180deg)', display: 'inline-flex' }}><Ico name="chevR" size={16} /></span>
        </button>
      </aside>
    );
  }
  if (!panel) return null;

  // ─── HISTORY MODE ───
  if (mode === 'history') {
    return <PaymentHistoryPanel onClose={onClose} collapsed={collapsed} onToggle={onToggle}
      onRepeatPayment={(item) => {
        // Pré-preencher form com dados do pagamento anterior
        setForm({
          service_type: item.ServiceType || '',
          pay_service_id: item.ID_PayService || null,
          amount: item.Amount ? String(parseInt(item.Amount)) : '',
          entity_code: item.EntityCode || '',
          reference_number: item.ReferenceNumber || '',
          pending_payment_id: item.Status === 'pending' ? item.ID : null,
        });
        setStep('form');
        if (onSwitchToForm) onSwitchToForm();
      }} />;
  }

  const catIcon = PAY_CATEGORY_ICONS[cat?.Icon] || 'wallet';
  const isPhoneTopup = form.service_type === 'phone_topup';
  const isPurchase = ['purchase', 'beauty_prepaid', 'games_booking', 'games_tournament'].includes(form.service_type);
  const isServicePayment = !isPhoneTopup && !isPurchase;

  const amountPresets = () => {
    if (svc?.AmountPresets) { try { return JSON.parse(svc.AmountPresets); } catch {} }
    return [100, 200, 500, 1000];
  };

  const updateForm = (field, val) => setForm(prev => ({ ...prev, [field]: val }));

  const useLastData = () => {
    if (!lastPayment) return;
    setForm(prev => ({ ...prev, entity_code: lastPayment.EntityCode || prev.entity_code, reference_number: lastPayment.ReferenceNumber || prev.reference_number }));
  };
  const payAgain = () => {
    if (!lastPayment) return;
    setForm(prev => ({ ...prev, entity_code: lastPayment.EntityCode || prev.entity_code, reference_number: lastPayment.ReferenceNumber || prev.reference_number, amount: lastPayment.Amount || prev.amount }));
  };

  const submitPayment = () => {
    if (isPhoneTopup) {
      if (!form.reference_number || form.reference_number.length < 7) { addToast && addToast(_t('webapp.pay_validation_phone'), 'warning'); return; }
    } else if (isServicePayment) {
      if (!form.entity_code) { addToast && addToast(_t('webapp.pay_validation_entity'), 'warning'); return; }
      if (!form.reference_number) { addToast && addToast(_t('webapp.pay_validation_reference'), 'warning'); return; }
    }
    // SISP limits: referenceNumber max 9 digits, entityCode max 5 digits
    if (form.reference_number && form.reference_number.replace(/\D/g, '').length > 9) { addToast && addToast(_t('webapp.pay_ref_max_digits'), 'warning'); return; }
    if (form.entity_code && form.entity_code.replace(/\D/g, '').length > 5) { addToast && addToast(_t('webapp.pay_entity_max_digits'), 'warning'); return; }
    if (!form.amount || parseFloat(form.amount) < 1) { addToast && addToast(_t('webapp.pay_validation_amount'), 'warning'); return; }
    setStep('confirm');
  };

  const confirmAndPay = async () => {
    if (!termsAccepted) { addToast && addToast(_t('webapp.pay_terms_accept_required'), 'warning'); return; }
    setSubmitting(true);
    try {
      const payFee = platformFees?.nhabex_pay_platform_fee || 0;
      const payload = { service_type: form.service_type, amount: parseFloat(form.amount) + payFee, pay_service_id: form.pay_service_id, return_path: window.location.origin + window.location.pathname + '?view=payments' };
      if (form.entity_code) payload.entity_code = form.entity_code;
      if (form.reference_number) payload.reference_number = form.reference_number;
      if (form.pending_payment_id) payload.pending_payment_id = form.pending_payment_id;
      const res = await API.post('/client/payments/initiate', payload);
      if (res.message === 'success' && res.data?.redirect_html) {
        document.open(); document.write(res.data.redirect_html); document.close();
      } else {
        addToast && addToast(res.detail || _t('webapp.pay_error_initiate'), 'error');
      }
    } catch { addToast && addToast(_t('webapp.pay_error_network'), 'error'); }
    finally { setSubmitting(false); }
  };

  const payWithCard = async () => {
    if (!termsAccepted || !selectedCard) return;
    setSubmitting(true);
    try {
      const payFee = platformFees?.nhabex_pay_platform_fee || 0;
      const payload = { service_type: form.service_type, amount: parseFloat(form.amount) + payFee, pay_service_id: form.pay_service_id, return_path: window.location.origin + window.location.pathname + '?view=payments' };
      if (form.entity_code) payload.entity_code = form.entity_code;
      if (form.reference_number) payload.reference_number = form.reference_number;
      const res = await API.post(`/client/cards/${selectedCard.ID}/pay`, payload);
      if (res.message === 'success' && res.data?.redirect_html) {
        document.open(); document.write(res.data.redirect_html); document.close();
      } else {
        addToast && addToast(res.data || _t('tokencard.payment_error'), 'error');
      }
    } catch { addToast && addToast(_t('tokencard.payment_error'), 'error'); }
    finally { setSubmitting(false); }
  };

  const cardLastDigits = (card) => (card.CardPanMasked || '').replace(/\*/g, '').slice(-4) || '****';

  const addCard = async () => {
    if (addingCard) return;
    setAddingCard(true);
    try {
      const res = await API.post('/client/cards/tokenize', {
        min_amount: 1,
        return_path: window.location.origin + window.location.pathname + '?view=payments',
      });
      if (res.message === 'success' && res.data?.redirect_html) {
        document.open(); document.write(res.data.redirect_html); document.close();
      } else {
        addToast && addToast(res.data || _t('tokencard.add_error'), 'error');
      }
    } catch { addToast && addToast(_t('tokencard.add_error'), 'error'); }
    finally { setAddingCard(false); }
  };

  // ─── INFO MODE ───
  if (mode === 'info') {
    return (
      <aside className="ticket-panel">
        <button className="ticket-collapse-btn" onClick={onToggle} title={_t('webapp.panel_collapse')}><Ico name="chevR" size={16} /></button>
        <div className="ticket-head" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <h3>{_t('webapp.pay_service_info_title')}</h3>
          <button onClick={onClose} style={{ background: 'none', border: 'none', color: 'var(--d-fg-3)', cursor: 'pointer', fontSize: 18 }}>&times;</button>
        </div>
        <div style={{ padding: '0 1rem', overflowY: 'auto', flex: 1, paddingBottom: '1rem' }}>
          <div style={{ textAlign: 'center', padding: '1.25rem 0 0.75rem' }}>
            <div style={{ background: cat?.ColorBg ? `${cat.ColorBg}22` : 'rgba(2,165,134,0.1)', color: cat?.ColorText || 'var(--nb-green)', width: 56, height: 56, borderRadius: 14, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', marginBottom: 10 }}>
              {svc?.LogoURL ? <img src={svc.LogoURL} alt="" style={{ width: 32, height: 32, objectFit: 'contain' }} /> : <Ico name={catIcon} size={28} />}
            </div>
            <h2 style={{ fontSize: '1.1rem', fontWeight: 700, color: 'var(--d-fg-1)', marginBottom: 2 }}>{svc?.Name}</h2>
            <p style={{ fontSize: '0.8rem', color: 'var(--d-fg-3)', margin: '4px 0' }}>{cat?.Name}</p>
          </div>
          {svc?.Description && (
            <div className="gm-detail-card" style={{ marginTop: 8 }}>
              <div style={{ padding: '0.75rem', fontSize: '0.8rem', color: 'var(--d-fg-2)', lineHeight: 1.5 }}>{svc.Description}</div>
            </div>
          )}
          <div className="gm-detail-card" style={{ marginTop: 12 }}>
            <div className="gm-detail-row"><span>{_t('webapp.pay_category')}</span><span>{cat?.Name || '-'}</span></div>
            {svc?.EntityCode && <div className="gm-detail-row"><span>{_t('webapp.pay_confirm_entity')}</span><span style={{ fontFamily: 'monospace', fontWeight: 600 }}>{svc.EntityCode}</span></div>}
            {svc?.FormType && <div className="gm-detail-row"><span>{_t('webapp.pay_type')}</span><span>{svc.FormType === 'phone_topup' ? _t('webapp.pay_svc_type_topup') : svc.FormType === 'purchase' ? _t('webapp.pay_svc_type_purchase') : _t('webapp.pay_payment')}</span></div>}
          </div>
          <div className="gm-detail-card" style={{ marginTop: 12 }}>
            <div style={{ padding: '0.75rem', display: 'flex', alignItems: 'center', gap: 8, fontSize: '0.75rem', color: 'var(--d-fg-3)' }}>
              <Ico name="lock" size={14} /> {_t('webapp.pay_secure_sisp')}
            </div>
          </div>
          <div style={{ padding: '1rem 0' }}>
            <button className="pay-btn-primary" style={{ width: '100%' }} onClick={() => onSwitchToForm && onSwitchToForm()}>
              <Ico name="wallet" size={14} /> {_t('webapp.pay_this_service')}
            </button>
          </div>
        </div>
      </aside>
    );
  }

  // ─── FORM MODE ───
  const currentStep = step === 'form' ? 1 : 2;
  return (
    <aside className="ticket-panel">
      <button className="ticket-collapse-btn" onClick={onToggle} title={_t('webapp.panel_collapse')}><Ico name="chevR" size={16} /></button>
      <div className="ticket-head" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <h3>{svc?.Name || pendingItem?.ServiceName || _t('webapp.pay_payment')}</h3>
        <button onClick={onClose} style={{ background: 'none', border: 'none', color: 'var(--d-fg-3)', cursor: 'pointer', fontSize: 18 }}>&times;</button>
      </div>
      <div style={{ padding: '0 1rem', overflowY: 'auto', flex: 1, paddingBottom: '1rem' }}>

        {/* Stepper */}
        <div className="pay-steps" style={{ marginBottom: 12 }}>
          {[{ n: 1, l: _t('webapp.pay_step_data') }, { n: 2, l: _t('webapp.pay_step_confirm') }, { n: 3, l: _t('webapp.pay_step_payment') }].map(s => (
            <div key={s.n} className={`pay-step ${currentStep === s.n ? 'pay-step--active' : ''} ${currentStep > s.n ? 'pay-step--done' : ''}`}>
              <div className="pay-step-circle">{currentStep > s.n ? <Ico name="check" size={12} /> : s.n}</div>
              <span className="pay-step-label">{s.l}</span>
            </div>
          ))}
        </div>

        {/* Service header */}
        <div className="pay-form-header" style={{ borderLeft: `3px solid ${cat?.ColorText || 'var(--nb-green)'}` }}>
          <Ico name={catIcon} size={18} />
          <div>
            <div style={{ fontWeight: 600, fontSize: '0.875rem' }}>{svc?.Name || pendingItem?.ServiceName || _t('webapp.pay_payment')}</div>
            <div style={{ fontSize: '0.75rem', color: 'var(--d-fg-3)' }}>{cat?.Name || (pendingItem ? _t('webapp.pay_filter_pending') : '')}</div>
          </div>
        </div>

        {/* Aviso: apenas cartões nacionais para serviços/recargas */}
        {['electricity','water','insurance','internet','other','phone_topup'].includes(form.service_type) && (
          <div className="pay-national-card-notice">
            <Ico name="info" size={16} />
            <span>{_t('webapp.pay_national_card_only')}</span>
          </div>
        )}

        {step === 'form' && (
          <>
            {/* Last payment quick-fill */}
            {lastPayment && (
              <div className="pay-last">
                <div className="pay-last-info">
                  <Ico name="clock" size={14} />
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: '0.7rem', color: 'var(--d-fg-3)' }}>{_t('webapp.pay_last_payment')}</div>
                    <div style={{ fontSize: '0.8rem', fontWeight: 500 }}>
                      {lastPayment.EntityCode && `Ent. ${lastPayment.EntityCode} · `}
                      Ref. {lastPayment.ReferenceNumber} · {parseFloat(lastPayment.Amount).toLocaleString('pt-CV')} CVE
                    </div>
                  </div>
                </div>
                <div style={{ display: 'flex', gap: 6 }}>
                  <button className="pay-btn-sm" onClick={useLastData}>{_t('webapp.pay_use_data')}</button>
                  <button className="pay-btn-sm pay-btn-sm--primary" onClick={payAgain}>{_t('webapp.pay_again')}</button>
                </div>
              </div>
            )}

            {/* Phone topup */}
            {isPhoneTopup && (
              <>
                <label className="pay-label">{_t('webapp.pay_phone_label')}</label>
                <div className="pay-phone-row">
                  <span className="pay-phone-prefix">+238</span>
                  <input className="pay-input" type="tel" placeholder="9XX XX XX" maxLength={7} inputMode="numeric"
                    value={form.reference_number}
                    onChange={e => updateForm('reference_number', e.target.value.replace(/\D/g, '').slice(0, 7))} />
                </div>
                <label className="pay-label" style={{ marginTop: 16 }}>{_t('webapp.pay_enter_amount')}</label>
                <div className="pay-presets">
                  {amountPresets().map(v => (
                    <button key={v} className={`pay-preset ${form.amount == v && !customAmount ? 'pay-preset--on' : ''}`}
                      onClick={() => { updateForm('amount', v); setCustomAmount(false); }}>{v} CVE</button>
                  ))}
                  <button className={`pay-preset ${customAmount ? 'pay-preset--on' : ''}`}
                    onClick={() => { setCustomAmount(true); updateForm('amount', ''); }}>{_t('webapp.pay_other_amount')}</button>
                </div>
                {customAmount && (
                  <input className="pay-input" type="number" placeholder={_t('webapp.pay_amount_label')} inputMode="numeric" min="1"
                    style={{ marginTop: 8 }} value={form.amount} onChange={e => updateForm('amount', e.target.value)} />
                )}
              </>
            )}

            {/* Service payment */}
            {isServicePayment && (
              <>
                <label className="pay-label">{_t('webapp.pay_entity_label')}</label>
                {svc?.EntityCode ? (
                  <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '10px 14px', background: 'var(--d-bg-surface, #f5f5f5)', borderRadius: 10 }}>
                    <Ico name="building" size={18} style={{ color: 'var(--nb-green, #009664)' }} />
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ fontSize: 14, fontWeight: 600 }}>{svc.Name}</div>
                      <div style={{ fontSize: 12, color: 'var(--d-fg-3, #888)', marginTop: 2 }}>{_t('webapp.pay_confirm_entity')}: {form.entity_code}</div>
                    </div>
                    <Ico name="lock" size={14} style={{ opacity: 0.4, color: 'var(--d-fg-3)' }} />
                  </div>
                ) : (
                  <input className="pay-input" type="text" maxLength={10} value={form.entity_code}
                    onChange={e => updateForm('entity_code', e.target.value)} />
                )}
                <label className="pay-label" style={{ marginTop: 12 }}>{_t('webapp.pay_confirm_reference')}</label>
                <input className="pay-input" type="text" maxLength={9} value={form.reference_number}
                  onChange={e => updateForm('reference_number', e.target.value)} />
                <label className="pay-label" style={{ marginTop: 12 }}>{_t('webapp.pay_amount_label')}</label>
                <input className="pay-input" type="number" min="1" step="0.01" inputMode="numeric"
                  value={form.amount} onChange={e => updateForm('amount', e.target.value)} />
              </>
            )}

            {/* Purchase */}
            {isPurchase && (
              <>
                <label className="pay-label">{_t('webapp.pay_amount_label')}</label>
                <input className="pay-input" type="number" min="1" step="0.01" inputMode="numeric"
                  value={form.amount} onChange={e => updateForm('amount', e.target.value)} />
              </>
            )}

            <div className="pay-security-note">
              <Ico name="lock" size={14} /> {_t('webapp.pay_secure_sisp')}
            </div>

            <div className="pay-form-actions">
              <button className="pay-btn-outline" onClick={onClose}>{_t('webapp.pay_cancel')}</button>
              <button className="pay-btn-primary" onClick={submitPayment}>
                <Ico name="lock" size={14} /> {_t('webapp.pay_continue')}
              </button>
            </div>
          </>
        )}

        {step === 'confirm' && (
          <>
            <div className="pay-summary">
              <div className="pay-summary-row"><span>{_t('webapp.pay_confirm_service')}</span><span>{svc?.Name || pendingItem?.ServiceName || _t('webapp.pay_payment')}</span></div>
              {form.entity_code && <div className="pay-summary-row"><span>{_t('webapp.pay_confirm_entity')}</span><span>{form.entity_code}</span></div>}
              {form.reference_number && <div className="pay-summary-row"><span>{_t('webapp.pay_confirm_reference')}</span><span>{form.reference_number}</span></div>}
              {(platformFees?.nhabex_pay_platform_fee || 0) > 0 && (
                <>
                  <div className="pay-summary-row"><span>{_t('webapp.pay_confirm_amount')}</span><span>{parseFloat(form.amount).toLocaleString('pt-CV')} CVE</span></div>
                  <div className="pay-summary-row"><span>{_t('webapp.pay_service_fee')}</span><span>{(platformFees.nhabex_pay_platform_fee).toLocaleString('pt-CV')} CVE</span></div>
                </>
              )}
              <div className="pay-summary-row pay-summary-total">
                <span>{_t('webapp.pay_receipt_total')}</span>
                <span>{(parseFloat(form.amount) + (platformFees?.nhabex_pay_platform_fee || 0)).toLocaleString('pt-CV')} CVE</span>
              </div>
            </div>
            {/* Saved Cards selection + Add Card */}
            <div style={{ margin: '12px 0' }}>
              <div style={{ fontSize: '0.8rem', fontWeight: 600, marginBottom: 6, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                  <Ico name="wallet" size={16} /> {_t('tokencard.pay_with_card')}
                </span>
                <button className="pay-btn-sm" onClick={addCard} disabled={addingCard} style={{ fontSize: '0.7rem' }}>
                  {addingCard ? <span className="btn-spinner" style={{ width: 12, height: 12 }} /> : '+'} {_t('tokencard.add_card')}
                </button>
              </div>
              {savedCards.length > 0 ? (
                <>
                  <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                    {savedCards.map(card => (
                      <button key={card.ID} className={`pay-saved-card-desk ${selectedCard?.ID === card.ID ? 'pay-saved-card-desk--sel' : ''}`}
                        onClick={() => setSelectedCard(selectedCard?.ID === card.ID ? null : card)}>
                        <Ico name="wallet" size={18} />
                        <div style={{ flex: 1, textAlign: 'left' }}>
                          <div style={{ fontSize: '0.8rem', fontWeight: 500 }}>{card.CardLabel || `${_t('tokencard.card_ending')} ${cardLastDigits(card)}`}</div>
                          <div style={{ fontSize: '0.7rem', color: 'var(--d-fg-3)' }}>{'•••• ' + cardLastDigits(card)}</div>
                        </div>
                        {selectedCard?.ID === card.ID && <Ico name="check" size={16} style={{ color: 'var(--nb-green)' }} />}
                      </button>
                    ))}
                  </div>
                  <button style={{ fontSize: '0.7rem', color: 'var(--d-fg-3)', background: 'none', border: 'none', cursor: 'pointer', textDecoration: 'underline', marginTop: 4 }}
                    onClick={() => setSelectedCard(null)}>
                    {_t('tokencard.or_new_payment')}
                  </button>
                </>
              ) : (
                <p style={{ fontSize: '0.75rem', color: 'var(--d-fg-3)', margin: '4px 0 0' }}>{_t('tokencard.no_cards_desc')}</p>
              )}
            </div>

            <label className="pay-terms">
              <input type="checkbox" checked={termsAccepted} onChange={e => setTermsAccepted(e.target.checked)} />
              <span>{_t('webapp.pay_terms_agree')} <a href="termos" target="_blank">{_t('webapp.pay_terms_link')}</a> {_t('webapp.pay_terms_and')} <a href="privacidade" target="_blank">{_t('webapp.pay_privacy_link')}</a>.</span>
            </label>
            <div className="pay-form-actions">
              <button className="pay-btn-outline" onClick={() => setStep('form')}>{_t('webapp.pay_confirm_edit')}</button>
              <button className="pay-btn-primary" onClick={selectedCard ? payWithCard : confirmAndPay} disabled={submitting || !termsAccepted}>
                {submitting ? <><span className="btn-spinner" /> {_t('webapp.pay_processing')}</> : selectedCard ? <><Ico name="bolt" size={14} /> {_t('tokencard.pay_one_click')}</> : <><Ico name="lock" size={14} /> {_t('webapp.pay_confirm')}</>}
              </button>
            </div>
          </>
        )}
      </div>

    </aside>
  );
}

// ─── Games View (full) ──────────────────────────────────────
function GamesView({ onBack, signedIn, user, addToast, onPanelUpdate, onPanelClose, platformFees }) {
  const companyHash = (window.__nbConfig && window.__nbConfig.gamesCompanyHash) || '';
  const [tab, setTab] = useState('tournaments');
  const [loading, setLoading] = useState(true);
  const [stats, setStats] = useState(null);
  const [tournaments, setTournaments] = useState([]);
  const [venues, setVenues] = useState([]);
  const [matches, setMatches] = useState([]);
  const [trainings, setTrainings] = useState([]);
  const [teams, setTeams] = useState([]);
  const [athletes, setAthletes] = useState([]);
  const [sports, setSports] = useState([]);
  const [subscriptionPlans, setSubscriptionPlans] = useState([]);
  const [subscriptionPlansByCompany, setSubscriptionPlansByCompany] = useState([]);
  const [mySubscriptions, setMySubscriptions] = useState([]);
  const [planCompanyFilter, setPlanCompanyFilter] = useState('');
  const [expandedPlanCompanies, setExpandedPlanCompanies] = useState({});
  const [bookingConfirmation, setBookingConfirmation] = useState(null);
  const [myPoints, setMyPoints] = useState(null);
  const [sportFilter, setSportFilter] = useState('');
  const [favSports, setFavSports] = useState(() => { try { return JSON.parse(localStorage.getItem('nbgames_fav_sports')) || []; } catch { return []; } });

  const toggleFavSport = (id) => {
    setFavSports(prev => {
      const next = prev.includes(id) ? prev.filter(s => s !== id) : [...prev, id];
      localStorage.setItem('nbgames_fav_sports', JSON.stringify(next));
      return next;
    });
  };

  const sortedSports = useMemo(() => {
    const favs = sports.filter(s => favSports.includes(s.ID));
    const rest = sports.filter(s => !favSports.includes(s.ID));
    return [...favs, ...rest];
  }, [sports, favSports]);
  const [matchDate, setMatchDate] = useState(new Date().toISOString().split('T')[0]);
  const [tournamentDetail, setTournamentDetail] = useState(null);

  // Player identity (persisted in localStorage)
  const [playerId, setPlayerId] = useState(() => parseInt(localStorage.getItem('nbgames_player_id')) || null);
  const [playerName, setPlayerName] = useState(() => localStorage.getItem('nbgames_player_name') || null);
  const [playerHash, setPlayerHash] = useState(() => localStorage.getItem('nbgames_player_hash') || null);
  const [viewingProfile, setViewingProfile] = useState(null); // public profile data

  // Modals / sub-views
  const [modal, setModal] = useState(null); // 'booking' | 'createTraining' | 'createTeam' | 'registerAthlete' | 'teamDetail' | 'trainingDetail'
  const [selectedVenue, setSelectedVenue] = useState(null);
  const [bookingDate, setBookingDate] = useState('');
  const [bookingTime, setBookingTime] = useState('');
  const [bookingDuration, setBookingDuration] = useState(1);
  const [timeSlots, setTimeSlots] = useState([]);
  const [myBookings, setMyBookings] = useState([]);
  const [myTeams, setMyTeams] = useState([]);

  // Forms
  const [newTraining, setNewTraining] = useState({ sport: '', title: '', date: '', time: '', maxPlayers: 10, notes: '' });
  const [venueSchedule, setVenueSchedule] = useState(null); // { slots, available_days }
  const [trainingStep, setTrainingStep] = useState(1); // 1=config, 2=campo+horário
  const [newTeam, setNewTeam] = useState({ name: '', sport: '', color: '#1565c0' });
  const [regForm, setRegForm] = useState({ nickname: '', level: 'beginner', sports: [], preferredSport: '' });
  const [regStep, setRegStep] = useState(1);
  const [submitting, setSubmitting] = useState(false);
  const [selectedTeamDetail, setSelectedTeamDetail] = useState(null);
  const [selectedTrainingDetail, setSelectedTrainingDetail] = useState(null);
  const [athleteView, setAthleteView] = useState('list'); // 'list' | 'ranking'
  const [centers, setCenters] = useState([]);
  const [centersLoading, setCentersLoading] = useState(false);
  const centersLoadedRef = useRef(false);

  // Filters
  const [tournamentFilter, setTournamentFilter] = useState('all');
  const [trainingFilter, setTrainingFilter] = useState('all');
  const [fieldSearch, setFieldSearch] = useState('');
  const [venueCompanyFilter, setVenueCompanyFilter] = useState('');
  const [athleteSearch, setAthleteSearch] = useState('');
  const [athleteSportFilter, setAthleteSportFilter] = useState('');
  const [selectedTeamDetail2, setSelectedTeamDetail2] = useState(null);
  const [selectedAthleteDetail, setSelectedAthleteDetail] = useState(null);

  // Game days (30 days from today — allows browsing future matches/events)
  const [calendarOffset, setCalendarOffset] = useState(0);
  const CALENDAR_PAGE_SIZE = 14;
  const gameDays = useMemo(() => {
    const days = []; const weekdays = [_t('webapp.day_sun_short'),_t('webapp.day_mon_short'),_t('webapp.day_tue_short'),_t('webapp.day_wed_short'),_t('webapp.day_thu_short'),_t('webapp.day_fri_short'),_t('webapp.day_sat_short')];
    const start = calendarOffset;
    const end = start + CALENDAR_PAGE_SIZE;
    for (let i = start; i < end; i++) {
      const d = new Date(); d.setDate(d.getDate() + i);
      days.push({ date: d.toISOString().split('T')[0], weekday: weekdays[d.getDay()], day: d.getDate(), month: d.toLocaleDateString('pt', { month: 'short' }) });
    }
    return days;
  }, [calendarOffset]);

  const gApi = (path, params, hash) => API.get(`/games/${hash || companyHash}${path}`, params);
  const gPost = (path, body, hash) => API.post(`/games/${hash || companyHash}${path}`, body);

  const savePlayer = (id, name, hash) => {
    const numId = parseInt(id);
    setPlayerId(numId); setPlayerName(name);
    localStorage.setItem('nbgames_player_id', String(numId));
    localStorage.setItem('nbgames_player_name', name || '');
    if (hash) { setPlayerHash(hash); localStorage.setItem('nbgames_player_hash', hash); }
  };

  const requirePlayer = () => {
    if (playerId) return true;
    addToast && addToast(_t('games.register_first'), 'warning');
    setModal('registerAthlete'); setRegStep(1);
    return false;
  };

  // Initial load
  const safeApi = (path, params) => gApi(path, params).catch(() => ({ message: 'error' }));

  useEffect(() => {
    if (!companyHash) { setLoading(false); return; }
    Promise.all([
      safeApi('/stats'), safeApi('/sports'), safeApi('/tournaments' + (playerId ? '?player_id=' + playerId : '')), safeApi('/venues'),
      safeApi('/matches', { date: matchDate }), safeApi('/trainings'), safeApi('/teams'), safeApi('/athletes'),
    ]).then(([st, sp, to, ve, ma, tr, te, at]) => {
      if (st.message === 'success') {
        setStats(st.data);
        // Restore player identity from server if not set locally
        if (!playerId && st.data?.player?.id) {
          savePlayer(st.data.player.id, st.data.player.name, st.data.player.hash);
        }
      }
      if (sp.message === 'success') setSports(Array.isArray(sp.data) ? sp.data : []);
      if (to.message === 'success') setTournaments(Array.isArray(to.data) ? to.data : []);
      if (ve.message === 'success') setVenues(Array.isArray(ve.data) ? ve.data : []);
      if (ma.message === 'success') setMatches(Array.isArray(ma.data) ? ma.data : []);
      if (tr.message === 'success') setTrainings(Array.isArray(tr.data) ? tr.data : []);
      if (te.message === 'success') setTeams(Array.isArray(te.data) ? te.data : []);
      if (at.message === 'success') {
        const list = Array.isArray(at.data) ? at.data : [];
        setAthletes(list);
        // Resolve playerHash from athletes list if missing
        if (playerId && !localStorage.getItem('nbgames_player_hash')) {
          const me = list.find(a => a.id === playerId);
          if (me?.hash) { setPlayerHash(me.hash); localStorage.setItem('nbgames_player_hash', me.hash); }
        }
      }
      setLoading(false);
    });
    // Load subscription plans from all companies
    API.get('/games/all-subscription-plans').catch(() => ({ message: 'error' })).then(res => {
      if (res.message === 'success' && Array.isArray(res.data)) {
        setSubscriptionPlansByCompany(res.data);
        setSubscriptionPlans(res.data.flatMap(g => g.plans));
      }
    });
    // Load player data
    if (playerId) {
      gApi('/my-teams', { player_id: playerId }).then(r => { if (r.message === 'success') setMyTeams(r.data || []); });
      gApi('/my-bookings', { player_id: playerId }).then(r => { if (r.message === 'success') setMyBookings(r.data || []); });
      gApi('/my-subscriptions', { player_id: playerId }).then(r => { if (r.message === 'success') setMySubscriptions(Array.isArray(r.data) ? r.data : []); });
      gApi('/my-points', { player_id: playerId }).then(r => { if (r.message === 'success') setMyPoints(r.data); });
    }
    // Load cross-company data (tournaments, venues from other companies)
    API.get('/games/all-data').catch(() => ({ message: 'error' })).then(res => {
      if (res.message !== 'success' || !res.data) return;
      const d = res.data;
      setTournaments(prev => {
        const ids = new Set(prev.map(t => t.id));
        const extra = (d.tournaments || []).filter(t => !ids.has(t.id));
        return extra.length > 0 ? [...prev, ...extra] : prev;
      });
      setVenues(prev => {
        const ids = new Set(prev.map(v => v.id));
        const extra = (d.venues || []).filter(v => !ids.has(v.id));
        return extra.length > 0 ? [...prev, ...extra] : prev;
      });
    });
  }, [companyHash]);

  // Listen for panel actions from right panel (use ref to avoid stale closures)
  const panelActionRef = useRef(null);
  useEffect(() => {
    const handler = (e) => {
      const d = e.detail;
      if (!d || !panelActionRef.current) return;
      if (d.action === 'register-team') panelActionRef.current.openRegisterTeam(d.tournament);
      else if (d.action === 'book-venue') panelActionRef.current.openBooking(d.venue);
      else if (d.action === 'join-training') panelActionRef.current.joinTraining(d.training);
      else if (d.action === 'pay-booking') panelActionRef.current.payBooking(d.booking);
      else if (d.action === 'approve-enrollment') panelActionRef.current.updateEnrollment(d.trainingId, d.playerId, 'approve');
      else if (d.action === 'reject-enrollment') panelActionRef.current.updateEnrollment(d.trainingId, d.playerId, 'reject');
      else if (d.action === 'confirm-attendance') panelActionRef.current.confirmAttendance(d.sessionId);
      else if (d.action === 'view-profile') panelActionRef.current.loadProfile(d.playerHash);
    };
    window.addEventListener('nb-games-panel-action', handler);
    return () => window.removeEventListener('nb-games-panel-action', handler);
  }, []);

  // Reload matches on date/sport change
  useEffect(() => {
    if (!companyHash) return;
    gApi('/matches', { date: matchDate, ...(sportFilter ? { sport_id: sportFilter } : {}) })
      .then(r => { if (r.message === 'success') setMatches(Array.isArray(r.data) ? r.data : []); });
  }, [matchDate, sportFilter]);

  const showPanel = (type, data, extra) => {
    if (onPanelUpdate) onPanelUpdate({ type, data, extra }, myTeams, playerId);
  };

  // Auto-show panel content on tab change
  const handleTabChange = (newTab) => {
    setTab(newTab);
    if (newTab === 'venues' && myBookings.length > 0) showPanel('bookings', myBookings);
    else if (onPanelClose) onPanelClose();
    if (newTab === 'centers') loadCenters();
  };

  const loadCenters = () => {
    if (centersLoadedRef.current) return;
    setCentersLoading(true);
    API.get('/games/all-companies').then(r => {
      if (r.message === 'success') {
        setCenters(r.data || []);
        centersLoadedRef.current = true;
      }
    }).catch(() => {}).finally(() => setCentersLoading(false));
  };

  const navigateToCenter = (hash) => {
    // Open the dedicated company Games page (standalone)
    const basePath = window.location.pathname.replace(/\/[^/]*$/, '');
    window.location.href = basePath + '/games?company=' + hash;
  };

  const contactCenter = (center) => {
    if (center.phone) window.open('tel:' + center.phone, '_self');
    else if (center.email) window.open('mailto:' + center.email, '_self');
  };

  const loadTournamentDetail = (id, hash) => {
    gApi(`/tournaments/${id}`, null, hash).then(r => {
      if (r.message === 'success') {
        setTournamentDetail(r.data);
        showPanel('tournament', r.data);
      }
    }).catch(() => { addToast && addToast(_t('games.error_load_tournament'), 'error'); });
  };

  const loadTrainingDetail = (training) => {
    // Show basic data immediately, then load full detail
    showPanel('training', training);
    gApi(`/trainings/${training.id}`).then(r => {
      if (r.message === 'success') showPanel('training', { ...training, ...r.data, _detailed: true });
    }).catch(() => {});
  };

  // Venue booking: load slots
  const loadSlots = (venueId, date) => {
    setBookingTime('');
    gApi(`/venues/${venueId}/slots`, { date }).then(r => {
      if (r.message === 'success' && Array.isArray(r.data) && r.data.length > 0) setTimeSlots(r.data);
      else { const d = []; for (let h = 8; h <= 21; h++) d.push({ time: `${String(h).padStart(2,'0')}:00`, available: true }); setTimeSlots(d); }
    }).catch(() => { const d = []; for (let h = 8; h <= 21; h++) d.push({ time: `${String(h).padStart(2,'0')}:00`, available: true }); setTimeSlots(d); });
  };

  const openBooking = (venue) => {
    setSelectedVenue(venue); setBookingDate(''); setBookingTime(''); setBookingDuration(1); setTimeSlots([]); setModal('booking');
  };

  const getActiveSubscription = () => mySubscriptions.find(s => s.Status === 'active' && s.credits_remaining > 0) || null;
  const getSubscriptionWithDiscount = () => mySubscriptions.find(s => s.Status === 'active' && s.discount_percent > 0) || null;

  const confirmBooking = async () => {
    if (!bookingDate || !bookingTime) { addToast && addToast(_t('games.select_date_time'), 'warning'); return; }
    setSubmitting(true);
    const res = await gPost('/bookings', { venue_id: selectedVenue.id, date: bookingDate, start_time: bookingTime, duration: bookingDuration, player_id: playerId || null, use_subscription: true });
    setSubmitting(false);
    if (res.message === 'success') {
      setModal(null);
      setBookingConfirmation({ ...res.data, subscription_used: !!res.data?.subscription_used });
      gApi('/venues').then(r => { if (r.message === 'success') setVenues(r.data || []); });
      if (playerId) {
        gApi('/my-bookings', { player_id: playerId }).then(r => { if (r.message === 'success') setMyBookings(r.data || []); });
        if (res.data?.subscription_used) gApi('/my-subscriptions', { player_id: playerId }).then(r => { if (r.message === 'success') setMySubscriptions(Array.isArray(r.data) ? r.data : []); });
      }
    } else { addToast && addToast(res.error || _t('games.error_booking'), 'error'); }
  };

  // Pay pending booking
  const payBooking = async (booking) => {
    if (!signedIn) { addToast && addToast(_t('games.login_to_pay'), 'warning'); return; }
    if (!booking.total_raw || booking.total_raw <= 0) { addToast && addToast(_t('games.booking_no_value'), 'info'); return; }
    setSubmitting(true);
    const gbFee = platformFees?.games_booking_platform_fee || 0;
    sessionStorage.setItem('nbgames_pending_booking', JSON.stringify({ venue_id: booking.venue_id, venue_name: booking.venue_name, date: booking.date_raw, start_time: booking.start_time, duration: booking.duration, total: booking.total_raw }));
    const ok = await initiatePaymentWithCardPicker({
      service_type: 'games_booking',
      amount: booking.total_raw + gbFee,
      return_path: window.location.origin + window.location.pathname + '?view=games',
      metadata: { company_hash: companyHash, venue_id: booking.venue_id, date: booking.date_raw, start_time: booking.start_time, duration: booking.duration, booking_id: booking.id, player_id: playerId || null, platform_fee: gbFee },
    }, { serviceName: booking.venue_name, addToast });
    if (!ok) sessionStorage.removeItem('nbgames_pending_booking');
  };

  // Training helpers
  const refreshTrainings = () => gApi('/trainings').then(r => {
    if (r.message === 'success') setTrainings(Array.isArray(r.data) ? r.data : []);
  }).catch(() => {});

  // Training enrollment management
  const updateEnrollment = async (trainingId, enrollPlayerId, action) => {
    const res = await gPost(`/trainings/${trainingId}/enrollment`, { player_id: enrollPlayerId, action });
    if (res.message === 'success') {
      addToast && addToast(action === 'approve' ? _t('games.athlete_approved') : _t('games.request_rejected'), 'success');
      // Reload training detail in panel
      gApi(`/trainings/${trainingId}`).then(r => {
        if (r.message === 'success') showPanel('training', { ...r.data, _detailed: true });
      });
      refreshTrainings();
    } else { addToast && addToast(res.error || _t('games.error_generic'), 'error'); }
  };

  const confirmAttendance = async (sessionId) => {
    if (!playerId) { addToast && addToast(_t('games.register_first'), 'warning'); return; }
    const res = await gPost(`/sessions/${sessionId}/attendance`, { player_id: playerId, status: 'confirmed' });
    if (res.message === 'success') {
      addToast && addToast(_t('games.attendance_confirmed'), 'success');
      refreshTrainings();
    }
    else { addToast && addToast(res.error || _t('games.error_generic'), 'error'); }
  };

  // Training actions
  const submitTraining = async () => {
    if (!newTraining.title || !newTraining.date || !newTraining.time || !newTraining.sport) { addToast && addToast(_t('games.fill_training_fields'), 'warning'); return; }
    setSubmitting(true);
    const body = {
      sport_id: newTraining.sport, title: newTraining.title,
      date: newTraining.date, start_time: newTraining.time,
      end_time: newTraining.endTime || null,
      end_date: newTraining.endDate || null,
      venue_id: newTraining.venue || null,
      max_players: newTraining.maxPlayers,
      notes: newTraining.notes || null,
      organizer_id: playerId || null,
      payment_mode: newTraining.paymentMode || 'daily',
      enrollment_type: newTraining.enrollmentType || 'open',
      daily_price: newTraining.paymentMode === 'daily' && newTraining.dailyPrice ? parseFloat(newTraining.dailyPrice) : null,
      monthly_price: newTraining.paymentMode === 'monthly' && newTraining.monthlyPrice ? parseFloat(newTraining.monthlyPrice) : null,
      weekly_schedule: (newTraining.weeklySchedule || []).length > 0 ? newTraining.weeklySchedule : null,
    };
    const res = await gPost('/trainings', body);
    setSubmitting(false);
    if (res.message === 'success') {
      addToast && addToast(_t('games.training_created'), 'success'); setModal(null);
      if (res.data?.conflicts_message) addToast(res.data.conflicts_message, 'warning', 8000);
      setTrainingFilter('all');
      await refreshTrainings();
      safeApi('/stats').then(r => { if (r.message === 'success') setStats(r.data); });
    } else { addToast && addToast(res.error || _t('games.error_generic'), 'error'); }
  };

  const joinTraining = async (training) => {
    if (!requirePlayer()) return;
    setSubmitting(true);
    const res = await gPost(`/trainings/${training.id}/join`, { player_id: playerId });
    setSubmitting(false);
    if (res.message === 'success') {
      addToast && addToast(_t('games.request_sent'), 'success');
      await refreshTrainings();
    } else {
      const code = res.code || res.error;
      if (code === 'pending_request') {
        addToast && addToast(_t('games.training_pending_request'), 'warning');
      } else if (code === 'already_enrolled') {
        addToast && addToast(_t('games.training_already_enrolled'), 'info');
      } else {
        addToast && addToast(res.error || _t('games.error_generic'), 'error');
      }
      await refreshTrainings();
    }
  };

  // Team actions
  const submitTeam = async () => {
    if (!newTeam.name || !newTeam.sport) { addToast && addToast(_t('games.team_name_sport_required'), 'warning'); return; }
    setSubmitting(true);
    const res = await gPost('/teams', { name: newTeam.name, sport_id: newTeam.sport, color: newTeam.color, captain_id: playerId || null });
    setSubmitting(false);
    if (res.message === 'success') {
      addToast && addToast(_t('games.team_created'), 'success'); setModal(null);
      gApi('/teams').then(r => { if (r.message === 'success') setTeams(r.data || []); });
      if (playerId) gApi('/my-teams', { player_id: playerId }).then(r => { if (r.message === 'success') setMyTeams(r.data || []); });
    } else { addToast && addToast(res.error || _t('games.error_generic'), 'error'); }
  };

  // Tournament registration
  // Tournament registration state
  const [regTournament, setRegTournament] = useState(null); // tournament being registered
  const [regSelectedTeam, setRegSelectedTeam] = useState('');

  const openRegisterTeam = async (tournament) => {
    // Direct payment for a pending team (already inscribed but not paid)
    if (tournament._forcePay && tournament._payTeamId) {
      setRegTournament(tournament);
      setRegSelectedTeam(String(tournament._payTeamId));
      // Go directly to payment
      if (!signedIn) { addToast && addToast(_t('games.login_to_pay'), 'warning'); return; }
      setSubmitting(true);
      const gtFee = platformFees?.games_tournament_platform_fee || 0;
      sessionStorage.setItem('nbgames_pending_tournament', JSON.stringify({ tournament_id: tournament.id, tournament_name: tournament.name, team_id: tournament._payTeamId, fee: tournament.fee_raw }));
      const ok = await initiatePaymentWithCardPicker({
        service_type: 'games_tournament',
        amount: (tournament.fee_raw || 0) + gtFee,
        return_path: window.location.origin + window.location.pathname + '?view=games',
        metadata: { company_hash: tournament.company_hash || companyHash, tournament_id: tournament.id, team_id: tournament._payTeamId, platform_fee: gtFee },
      }, { serviceName: tournament.name, addToast });
      setSubmitting(false);
      if (!ok) sessionStorage.removeItem('nbgames_pending_tournament');
      return;
    }

    if (!requirePlayer()) return;
    // Reload my teams
    const r = await safeApi('/my-teams', { player_id: playerId });
    if (r.message === 'success') setMyTeams(r.data || []);
    const teams = r.message === 'success' ? (r.data || []) : myTeams;
    if (teams.length === 0) {
      addToast && addToast(_t('games.no_teams_create'), 'warning');
      setModal('createTeam');
      return;
    }
    // Filter out teams already registered in this tournament
    const registeredIds = (tournament.registered_teams || []).map(t => t.id);
    const available = teams.filter(t => !registeredIds.includes(t.ID));
    if (available.length === 0) {
      addToast && addToast(_t('games.all_teams_registered'), 'info');
      return;
    }
    setRegTournament(tournament);
    setRegSelectedTeam(available.length === 1 ? String(available[0].ID) : '');
    setModal('registerTeam');
  };

  const confirmRegisterTeam = async () => {
    if (!regTournament || !regSelectedTeam) return;
    const teamId = parseInt(regSelectedTeam);
    const feeRaw = regTournament.fee_raw || 0;

    // If tournament has fee, redirect to payment
    if (feeRaw > 0) {
      if (!signedIn) { addToast && addToast(_t('games.login_to_pay'), 'warning'); return; }
      setSubmitting(true);
      const gtFee2 = platformFees?.games_tournament_platform_fee || 0;
      sessionStorage.setItem('nbgames_pending_tournament', JSON.stringify({ tournament_id: regTournament.id, tournament_name: regTournament.name, team_id: teamId, fee: feeRaw }));
      const ok2 = await initiatePaymentWithCardPicker({
        service_type: 'games_tournament',
        amount: feeRaw + gtFee2,
        return_path: window.location.origin + window.location.pathname + '?view=games',
        metadata: { company_hash: regTournament.company_hash || companyHash, tournament_id: regTournament.id, team_id: teamId, platform_fee: gtFee2 },
      }, { serviceName: regTournament.name, addToast });
      setSubmitting(false);
      if (!ok2) sessionStorage.removeItem('nbgames_pending_tournament');
      return;
    }

    // Free tournament — direct registration
    setSubmitting(true);
    const res = await gPost(`/tournaments/${regTournament.id}/register-team`, { team_id: teamId }, regTournament.company_hash);
    setSubmitting(false);
    if (res.message === 'success') {
      addToast && addToast(_t('games.team_registered'), 'success');
      setModal(null); setRegTournament(null);
      safeApi('/tournaments').then(r => { if (r.message === 'success') setTournaments(r.data || []); });
      // Reload detail if viewing
      if (tournamentDetail?.id === regTournament.id) loadTournamentDetail(regTournament.id, regTournament.company_hash);
    } else { addToast && addToast(res.error || _t('games.error_register'), 'error'); }
  };

  // Athlete registration
  const submitRegistration = async () => {
    if (!signedIn) { addToast && addToast(_t('games.login_first'), 'warning'); return; }
    if (regForm.sports.length === 0) { addToast && addToast(_t('games.select_sport'), 'warning'); return; }
    setSubmitting(true);
    const res = await gPost('/athletes/register', {
      name: user?.name || regForm.nickname || 'Atleta', email: user?.email || '', phone: user?.phone || '',
      nickname: regForm.nickname || null, level: regForm.level, sports: regForm.sports,
      preferred_sport: regForm.preferredSport || regForm.sports[0] || null,
    });
    setSubmitting(false);
    if (res.message === 'success' && res.data) {
      savePlayer(res.data.id, regForm.nickname || res.data.name, res.data.hash);
      addToast && addToast(_t('games.registration_done'), 'success'); setModal(null);
      gApi('/athletes').then(r => { if (r.message === 'success') setAthletes(r.data || []); });
    } else { addToast && addToast(res.error || res.detail || _t('games.error_register'), 'error'); }
  };

  const toggleRegSport = (id) => {
    setRegForm(f => {
      const sports = f.sports.includes(id) ? f.sports.filter(s => s !== id) : [...f.sports, id];
      return { ...f, sports, preferredSport: sports.length === 1 ? sports[0] : f.preferredSport };
    });
  };

  // Load public profile
  const loadProfile = async (hash) => {
    setViewingProfile({ loading: true });
    const res = await gApi(`/athletes/${hash}/profile`);
    if (res.message === 'success') {
      setViewingProfile(res.data);
    } else {
      addToast && addToast(_t('games.profile_not_found'), 'error');
      setViewingProfile(null);
    }
  };

  // Update ref after all action functions are declared
  panelActionRef.current = { openRegisterTeam, openBooking, joinTraining, payBooking, updateEnrollment, confirmAttendance, loadProfile };

  // Use slot price if a time slot is selected, otherwise fall back to venue base price
  const selectedSlot = bookingTime ? timeSlots.find(s => s.time === bookingTime) : null;
  const bookingHourlyRate = selectedSlot?.price ?? (selectedVenue?.price_raw || 0);
  const bookingTotal = bookingHourlyRate * bookingDuration;

  const statusColor = (s) => ({ open: '#22c55e', ongoing: '#f59e0b', finished: '#6b7280', draft: '#3b82f6' }[s] || '#6b7280');
  const statusLabel = (s) => ({ open: _t('games.status_open'), ongoing: _t('games.status_ongoing'), finished: _t('games.status_finished'), draft: _t('games.status_draft') }[s] || s);

  const isJoined = (training) => playerId && ((training.players || []).some(p => p.player_id === playerId) || (training.pending_player_ids || []).includes(playerId));

  if (!companyHash) {
    return (<div className="games-view"><div className="detail-head"><button className="back-btn" onClick={onBack}><Ico name="arrowL" /></button><div className="titles"><h1>{_t('webapp.games_title')}</h1></div></div><div style={{ padding: 60, textAlign: 'center', color: 'var(--d-fg-3)' }}>{_t('games.not_available')}</div></div>);
  }
  if (loading) {
    return (<div className="games-view"><div className="detail-head"><button className="back-btn" onClick={onBack}><Ico name="arrowL" /></button><div className="titles"><h1>{_t('webapp.games_title')}</h1></div></div><SkeletonRows count={6} /></div>);
  }

  // Tournament detail is now shown in the right panel (GamesTournamentPanel)

  // Public profile view
  if (viewingProfile) {
    if (viewingProfile.loading) {
      return (<div className="games-view"><div className="detail-head"><button className="back-btn" onClick={() => setViewingProfile(null)}><Ico name="arrowL" /></button><div className="titles"><h1>{_t('games.athlete_profile')}</h1></div></div><SkeletonRows count={8} /></div>);
    }
    const p = viewingProfile;
    const medalEmoji = (pos) => pos === 1 ? '🥇' : pos === 2 ? '🥈' : pos === 3 ? '🥉' : `#${pos}`;
    const profileShareUrl = window.location.origin + '/app/webapp?view=games&profile=' + p.hash;
    return (
      <div className="games-view">
        <div className="detail-head">
          <button className="back-btn" onClick={() => setViewingProfile(null)}><Ico name="arrowL" /></button>
          <div className="titles"><h1>{_t('games.athlete_profile')}</h1></div>
        </div>

        {/* Header */}
        <div style={{ textAlign: 'center', padding: '1rem 0' }}>
          {p.photo ? <img src={p.photo} alt="" style={{ width: 72, height: 72, borderRadius: '50%', objectFit: 'cover', border: '3px solid var(--nb-green)', marginBottom: 8 }} referrerPolicy="no-referrer" />
            : <span className="gm-team-initials" style={{ background: (p.color || '#666') + '33', color: p.color || '#ccc', width: '4.5rem', height: '4.5rem', fontSize: '1.25rem', display: 'inline-flex', marginBottom: 8 }}>{p.initials || p.name?.charAt(0)}</span>}
          <h2 style={{ fontSize: '1.125rem', fontWeight: 700, color: 'var(--d-fg-1)', marginBottom: 2 }}>{p.name}</h2>
          {p.nickname && <p style={{ fontSize: '0.8125rem', color: 'var(--d-fg-3)', marginBottom: 2 }}>{p.nickname}</p>}
          <div style={{ display: 'flex', gap: 6, justifyContent: 'center', flexWrap: 'wrap', marginTop: 4 }}>
            {p.sports?.map(s => <span key={s} className="gm-sport-chip gm-sport-chip--on" style={{ fontSize: '0.6875rem', padding: '2px 8px' }}>{s}</span>)}
          </div>
          {p.level && <p style={{ fontSize: '0.6875rem', color: 'var(--d-fg-3)', marginTop: 4 }}>{p.level}{p.member_since ? ` · ${_t('games.member_since')} ${p.member_since}` : ''}</p>}
          <button className="pay-btn-outline" style={{ margin: '10px auto 0', padding: '0.3rem 0.625rem', fontSize: '0.6875rem', gap: 4 }} onClick={() => {
            if (navigator.share) { navigator.share({ title: p.name, url: profileShareUrl }).catch(() => {}); }
            else { navigator.clipboard.writeText(profileShareUrl).then(() => addToast && addToast(_t('games.profile_link_copied'), 'success')); }
          }}><Ico name="share" size={11} /> {_t('games.share_profile')}</button>
        </div>

        {/* Stats grid */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8, textAlign: 'center', margin: '8px 0 16px' }}>
          {[
            { v: p.totals?.games_played, l: _t('games.tab_games') },
            { v: p.totals?.wins, l: _t('games.wins') },
            { v: p.totals?.goals, l: _t('games.goals') },
            { v: p.totals?.losses, l: _t('games.losses') || 'Derrotas' },
            { v: p.totals?.draws, l: _t('games.draws') || 'Empates' },
            { v: p.totals?.points, l: _t('games.points') },
          ].map((s, i) => (
            <div key={i} className="gm-detail-card" style={{ padding: '10px 4px' }}>
              <strong style={{ fontSize: '1.25rem', color: 'var(--nb-green)' }}>{s.v || 0}</strong>
              <br /><small style={{ color: 'var(--d-fg-3)', fontSize: '0.625rem' }}>{s.l}</small>
            </div>
          ))}
        </div>

        {/* Teams */}
        {p.teams?.length > 0 && (<>
          <h4 style={{ fontSize: '0.8125rem', fontWeight: 600, color: 'var(--d-fg-1)', marginBottom: 6 }}>{_t('games.tab_teams')}</h4>
          <div className="gm-list" style={{ marginBottom: 16 }}>
            {p.teams.map((t, i) => (
              <div key={i} className="gm-card">
                <span className="gm-team-initials" style={{ background: (t.color || '#666') + '33', color: t.color || 'var(--d-fg-muted)' }}>{t.name?.substring(0, 2)}</span>
                <div className="gm-card-info">
                  <span className="gm-card-name">{t.name}</span>
                  <span className="gm-card-sub">{t.position || ''}{t.jersey ? ` #${t.jersey}` : ''}</span>
                </div>
              </div>
            ))}
          </div>
        </>)}

        {/* Rankings by sport */}
        {p.rankings?.length > 0 && (<>
          <h4 style={{ fontSize: '0.8125rem', fontWeight: 600, color: 'var(--d-fg-1)', marginBottom: 6 }}>{_t('games.ranking')}</h4>
          <div className="gm-list" style={{ marginBottom: 16 }}>
            {p.rankings.map((r, i) => (
              <div key={i} className="gm-detail-card" style={{ padding: '10px 12px' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 4 }}>
                  <span style={{ fontWeight: 600, fontSize: '0.8125rem' }}>{r.sport}</span>
                  {r.position > 0 && <span style={{ fontWeight: 700, fontSize: '0.875rem', color: r.position <= 3 ? '#f59e0b' : 'var(--d-fg-3)' }}>#{r.position}</span>}
                </div>
                <div style={{ display: 'flex', gap: 12, fontSize: '0.6875rem', color: 'var(--d-fg-3)' }}>
                  <span>{r.games_played} {_t('games.tab_games').toLowerCase()}</span>
                  <span>{r.wins}V</span>
                  <span>{r.goals} {_t('games.goals').toLowerCase()}</span>
                  <span>{r.points} pts</span>
                </div>
              </div>
            ))}
          </div>
        </>)}

        {/* Last training */}
        {p.last_training && (<>
          <h4 style={{ fontSize: '0.8125rem', fontWeight: 600, color: 'var(--d-fg-1)', marginBottom: 6 }}>{_t('games.last_training')}</h4>
          <div className="gm-detail-card" style={{ padding: '10px 12px', marginBottom: 16 }}>
            <div style={{ fontWeight: 600, fontSize: '0.8125rem' }}>{p.last_training.title}</div>
            <div style={{ fontSize: '0.6875rem', color: 'var(--d-fg-3)' }}>{p.last_training.date}{p.last_training.time ? ` · ${p.last_training.time}` : ''}</div>
          </div>
        </>)}

        {/* Awards */}
        {p.awards?.length > 0 && (<>
          <h4 style={{ fontSize: '0.8125rem', fontWeight: 600, color: 'var(--d-fg-1)', marginBottom: 6 }}>{_t('games.awards')}</h4>
          <div className="gm-list" style={{ marginBottom: 16 }}>
            {p.awards.map((a, i) => (
              <div key={i} className="gm-card">
                <span style={{ fontSize: '1.25rem', width: 36, textAlign: 'center', flexShrink: 0 }}>{medalEmoji(a.position)}</span>
                <div className="gm-card-info">
                  <span className="gm-card-name">{a.tournament}</span>
                  <span className="gm-card-sub">{a.team} · {a.date}</span>
                </div>
              </div>
            ))}
          </div>
        </>)}
      </div>
    );
  }

  return (
    <div className="games-view">
      <div className="detail-head">
        <button className="back-btn" onClick={onBack}><Ico name="arrowL" /></button>
        <div className="titles">
          <h1>{_t('webapp.games_title')}</h1>
          {stats && <p>{stats.tournaments || 0} {(stats.tournaments || 0) === 1 ? (_t('games.tournament_singular') || 'torneio') : _t('games.tab_tournaments').toLowerCase()} · {stats.fields || 0} {(stats.fields || 0) === 1 ? (_t('games.field_singular') || 'campo') : _t('games.tab_fields').toLowerCase()} · {stats.games || 0} {(stats.games || 0) === 1 ? (_t('games.game_singular') || 'jogo') : _t('games.tab_games').toLowerCase()}</p>}
        </div>
        {!playerId && signedIn && (
          <button className="str-cart-btn" onClick={() => { setModal('registerAthlete'); setRegStep(1); }}>
            <Ico name="user" size={14} /> {_t('games.register_athlete')}
          </button>
        )}
        {playerId && <span style={{ marginLeft: 'auto', fontSize: '0.75rem', color: 'var(--nb-green)', fontWeight: 600 }}>{playerName}</span>}
      </div>

      {/* Sport Filter Chips */}
      {sortedSports.length > 0 && (
        <div className="gm-sport-chips">
          <button className={`gm-sport-chip ${sportFilter === '' ? 'gm-sport-chip--on' : ''}`} onClick={() => setSportFilter('')}>
            <span className="gm-sport-chip__icon">⊞</span>
            <span>{_t('games.filter_all')}</span>
          </button>
          {sortedSports.map(s => (
            <div key={s.ID} className="gm-sport-chip-wrap">
              <button className={`gm-sport-chip ${sportFilter === String(s.ID) ? 'gm-sport-chip--on' : ''} ${favSports.includes(s.ID) ? 'gm-sport-chip--fav' : ''}`}
                      onClick={() => setSportFilter(sportFilter === String(s.ID) ? '' : String(s.ID))}>
                <span className="gm-sport-chip__icon">{getSportEmoji(s.Icon)}</span>
                <span>{s.Name}</span>
              </button>
              <button className="gm-sport-fav" onClick={(e) => { e.stopPropagation(); toggleFavSport(s.ID); }}
                      title={favSports.includes(s.ID) ? _t('games.remove_favorite') : _t('games.favorite')}>
                {favSports.includes(s.ID) ? '★' : '☆'}
              </button>
            </div>
          ))}
        </div>
      )}

      {/* Tabs */}
      <div className="tk-tabs" style={{ flexWrap: 'wrap' }}>
        {[
          ...(playerId ? [{ id: 'myaccount', label: 'Minha Conta', icon: 'user' }] : []),
          { id: 'tournaments', label: _t('games.tab_tournaments'), icon: 'trophy' },
          { id: 'venues', label: _t('games.tab_fields'), icon: 'field' },
          { id: 'matches', label: _t('games.tab_games'), icon: 'activity' },
          { id: 'trainings', label: _t('games.tab_trainings'), icon: 'users' },
          { id: 'teams', label: _t('games.tab_teams'), icon: 'shield' },
          { id: 'athletes', label: _t('games.tab_athletes'), icon: 'user' },
          ...(subscriptionPlans.length > 0 ? [{ id: 'subscriptions', label: 'Planos', icon: 'wallet' }] : []),
          { id: 'centers', label: _t('games.tab_centers'), icon: 'building' },
        ].map(t => (
          <button key={t.id} className={`tk-tab ${tab === t.id ? 'on' : ''}`} onClick={() => handleTabChange(t.id)}>
            <Ico name={t.icon} size={12} /> {t.label}
          </button>
        ))}
      </div>

      {/* MY ACCOUNT */}
      {tab === 'myaccount' && playerId && (() => {
        const activeSubs = mySubscriptions.filter(s => s.Status === 'active');
        const upcomingBookings = myBookings.filter(b => !b.is_past);
        const pastBookings = myBookings.filter(b => b.is_past);
        return (
        <>
          {/* Player header */}
          <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 20 }}>
            <div style={{ width: 48, height: 48, borderRadius: '50%', background: 'var(--nb-green)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '1.25rem', fontWeight: 700, color: 'var(--nb-fg-on-brand)' }}>
              {(playerName || '?').charAt(0).toUpperCase()}
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontWeight: 700, fontSize: '1.0625rem' }}>{playerName || 'Atleta'}</div>
              <div style={{ fontSize: '0.75rem', color: 'var(--d-fg-3)' }}>@{playerName?.toLowerCase().replace(/\s+/g, '') || 'atleta'}</div>
            </div>
            {playerHash && <button className="pay-btn-outline" style={{ padding: '0.375rem 0.625rem', fontSize: '0.75rem', gap: 4 }} onClick={() => {
              const profileUrl = window.location.origin + '/app/webapp?view=games&profile=' + playerHash;
              if (navigator.share) { navigator.share({ title: playerName, url: profileUrl }).catch(() => {}); }
              else { navigator.clipboard.writeText(profileUrl).then(() => addToast && addToast(_t('games.profile_link_copied'), 'success')); }
            }}><Ico name="share" size={12} /> {_t('games.share_profile')}</button>}
          </div>

          {/* Points & Credits Widget */}
          {myPoints && myPoints.balance && (() => {
            const b = myPoints.balance;
            const tp = myPoints.tier_progress;
            const tierColor = { bronze: '#cd7f32', silver: '#9ca3af', gold: '#f59e0b', platinum: '#8b5cf6' }[b.tier] || '#6b7280';
            const tierLabel = { bronze: _t('webapp.game_bronze'), silver: _t('webapp.game_silver'), gold: _t('webapp.game_gold'), platinum: _t('webapp.game_platinum') }[b.tier] || b.tier;
            const actionLabel = (a) => ({ booking: 'Reserva', challenge: 'Desafio', training: 'Treino', match_win: 'Vitória', match_draw: 'Empate', tournament: 'Torneio', referral: 'Indicação', checkin: 'Check-in', bonus: 'Bónus', conversion: 'Conversão', admin: 'Admin' }[a] || a);
            const ppc = myPoints.config?.points_per_credit || 100;
            const cv = myPoints.config?.credit_value || 100;
            const minConvert = myPoints.config?.min_points_to_convert || 50;
            const maxPts = Math.floor(b.available_points / ppc) * ppc;
            const creditsWorth = Math.floor(b.available_points / ppc) * cv;
            const canConvert = myPoints.config && b.available_points >= ppc;
            const almostThere = !canConvert && b.available_points >= minConvert;

            const doConvert = async () => {
              if (!canConvert || maxPts <= 0) return;
              setModal('convertPoints');
            };

            const executeConvert = async () => {
              setSubmitting(true);
              const res = await gPost('/convert-points', { player_id: playerId, points: maxPts });
              setSubmitting(false);
              setModal(null);
              if (res.message === 'success') {
                addToast && addToast(`${res.data.points_used} pontos → ${res.data.credits_earned.toLocaleString('pt')}$00 de créditos!`, 'success');
                gApi('/my-points', { player_id: playerId }).then(r => { if (r.message === 'success') setMyPoints(r.data); });
              } else { addToast && addToast(res.data || _t('webapp.error_convert'), 'error'); }
            };

            return (
            <div style={{ border: '1px solid var(--d-border)', borderRadius: 16, padding: 16, marginBottom: 20, background: 'var(--d-bg-surface-2)' }}>
              {/* Tier + Progress */}
              <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 14 }}>
                <span style={{ display: 'flex', alignItems: 'center', gap: 4, fontSize: '0.75rem', fontWeight: 700, padding: '4px 10px', borderRadius: 20, background: tierColor + '18', color: tierColor, textTransform: 'uppercase', letterSpacing: 0.5 }}>
                  <Ico name="star" size={12} /> {tierLabel}
                </span>
                {tp.next && (
                  <div style={{ flex: 1 }}>
                    <div style={{ height: 6, background: 'var(--d-bg-surface-3)', borderRadius: 3, overflow: 'hidden' }}>
                      <div style={{ height: '100%', borderRadius: 3, width: tp.progress + '%', background: { bronze: '#cd7f32', silver: '#9ca3af', gold: '#f59e0b', platinum: '#8b5cf6' }[tp.next] || '#6b7280', transition: 'width 0.4s' }} />
                    </div>
                    <span style={{ fontSize: '0.625rem', color: 'var(--d-fg-3)' }}>{tp.progress}% para {{ bronze: _t('webapp.game_bronze'), silver: _t('webapp.game_silver'), gold: _t('webapp.game_gold'), platinum: _t('webapp.game_platinum') }[tp.next]}</span>
                  </div>
                )}
              </div>
              {/* Stats */}
              <div style={{ display: 'flex', gap: 8 }}>
                <div style={{ flex: 1, display: 'flex', alignItems: 'center', gap: 8, background: 'var(--d-bg-surface-3)', borderRadius: 12, padding: '10px 12px' }}>
                  <Ico name="star" size={18} />
                  <div><div style={{ fontSize: '1rem', fontWeight: 700 }}>{b.available_points.toLocaleString()}</div><div style={{ fontSize: '0.625rem', color: 'var(--d-fg-3)' }}>Pontos</div></div>
                </div>
                <div style={{ flex: 1, display: 'flex', alignItems: 'center', gap: 8, background: 'var(--d-bg-surface-3)', borderRadius: 12, padding: '10px 12px' }}>
                  <Ico name="wallet" size={18} />
                  <div><div style={{ fontSize: '1rem', fontWeight: 700 }}>{b.credit_balance.toLocaleString('pt')}$</div><div style={{ fontSize: '0.625rem', color: 'var(--d-fg-3)' }}>Créditos</div></div>
                </div>
                <div style={{ flex: 1, display: 'flex', alignItems: 'center', gap: 8, background: 'var(--d-bg-surface-3)', borderRadius: 12, padding: '10px 12px' }}>
                  <Ico name="activity" size={18} />
                  <div><div style={{ fontSize: '1rem', fontWeight: 700 }}>{b.total_points.toLocaleString()}</div><div style={{ fontSize: '0.625rem', color: 'var(--d-fg-3)' }}>Total</div></div>
                </div>
              </div>
              {/* Convert button */}
              {canConvert && (
                <button onClick={doConvert} disabled={submitting} style={{ width: '100%', marginTop: 12, padding: 10, border: '1.5px solid var(--nb-green)', borderRadius: 12, background: 'none', color: 'var(--nb-green)', fontWeight: 600, fontSize: '0.8125rem', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6 }}>
                  <Ico name="bolt" size={14} /> Converter {maxPts} pts → {creditsWorth.toLocaleString('pt')}$00
                </button>
              )}
              {almostThere && (
                <div style={{ marginTop: 12, textAlign: 'center', fontSize: '0.75rem', color: 'var(--d-fg-3)' }}>
                  Faltam <strong>{ppc - b.available_points}</strong> pontos para converter em créditos
                </div>
              )}

              {/* Convert confirmation modal */}
              {modal === 'convertPoints' && (
                <div className="modal-overlay" onClick={() => setModal(null)} style={{ zIndex: 99999 }}>
                  <div className="modal-dialog" onClick={e => e.stopPropagation()} style={{ maxWidth: 380, textAlign: 'center' }}>
                    <div style={{ padding: '28px 24px 24px' }}>
                      <div style={{ width: 56, height: 56, borderRadius: '50%', background: 'rgba(245,158,11,0.12)', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 12px' }}>
                        <Ico name="bolt" size={28} />
                      </div>
                      <h3 style={{ margin: '0 0 8px', fontSize: '1.125rem', fontWeight: 700 }}>Converter Pontos</h3>
                      <div style={{ background: 'var(--d-bg-surface-3)', borderRadius: 12, padding: 16, margin: '0 0 16px' }}>
                        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 12 }}>
                          <div style={{ textAlign: 'center' }}>
                            <div style={{ fontSize: '1.5rem', fontWeight: 800, color: '#f59e0b' }}>{maxPts}</div>
                            <div style={{ fontSize: '0.6875rem', color: 'var(--d-fg-3)' }}>pontos</div>
                          </div>
                          <Ico name="arrow" size={20} />
                          <div style={{ textAlign: 'center' }}>
                            <div style={{ fontSize: '1.5rem', fontWeight: 800, color: 'var(--nb-green)' }}>{creditsWorth.toLocaleString('pt')}$00</div>
                            <div style={{ fontSize: '0.6875rem', color: 'var(--d-fg-3)' }}>créditos</div>
                          </div>
                        </div>
                        <div style={{ fontSize: '0.6875rem', color: 'var(--d-fg-3)', marginTop: 8 }}>Taxa: {ppc} pontos = {cv.toLocaleString('pt')}$00</div>
                      </div>
                      <p style={{ fontSize: '0.8125rem', color: 'var(--d-fg-3)', margin: '0 0 16px' }}>Após conversão terás <strong>{b.available_points - maxPts}</strong> pontos restantes</p>
                      <div style={{ display: 'flex', gap: 8 }}>
                        <button className="pay-btn-outline" style={{ flex: 1 }} onClick={() => setModal(null)}>Cancelar</button>
                        <button className="pay-btn-primary" style={{ flex: 2 }} disabled={submitting} onClick={executeConvert}>
                          {submitting ? <><span className="btn-spinner" /> {_t('webapp.game_converting')}</> : _t('webapp.game_confirm_convert')}
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              )}
              {/* Recent log */}
              {myPoints.log && myPoints.log.length > 0 && (
                <div style={{ marginTop: 12, borderTop: '1px solid var(--d-border)', paddingTop: 10 }}>
                  {myPoints.log.slice(0, 5).map((e, i) => (
                    <div key={i} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '3px 0', fontSize: '0.75rem' }}>
                      <span style={{ color: 'var(--d-fg-3)' }}>{actionLabel(e.action)}</span>
                      <span style={{ fontWeight: 700, fontFamily: 'monospace', color: e.direction === 'earn' ? '#16a34a' : '#dc2626' }}>{e.direction === 'earn' ? '+' : ''}{e.points}</span>
                    </div>
                  ))}
                </div>
              )}
            </div>
            );
          })()}

          {/* Active Subscriptions */}
          {activeSubs.length > 0 && (
            <div style={{ marginBottom: 20 }}>
              <div style={{ fontSize: '0.875rem', fontWeight: 600, marginBottom: 8, display: 'flex', alignItems: 'center', gap: 6 }}>
                <Ico name="wallet" size={14} /> Planos Activos
              </div>
              {activeSubs.map(sub => (
                <div key={sub.ID} className="gm-card" style={{ borderLeft: '3px solid var(--nb-green)', cursor: 'pointer' }} onClick={() => showPanel('subscription', sub)}>
                  <div className="gm-card-info" style={{ flex: 1 }}>
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                      <span className="gm-card-name">{sub.plan_name}</span>
                      <span style={{ fontSize: '0.625rem', padding: '2px 8px', borderRadius: 12, fontWeight: 600, background: 'rgba(2,165,134,0.13)', color: 'var(--nb-green)' }}>Activo</span>
                    </div>
                    {sub.company_name && (
                      <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginTop: 4 }}>
                        {sub.company_logo && <img src={sub.company_logo} alt="" style={{ width: 16, height: 16, borderRadius: 4, objectFit: 'contain' }} />}
                        <span style={{ fontSize: '0.6875rem', color: 'var(--d-fg-3)' }}>{sub.company_name}</span>
                      </div>
                    )}
                    <div className="gm-card-sub" style={{ display: 'flex', gap: 12, flexWrap: 'wrap', marginTop: 4 }}>
                      <span><Ico name="field" size={11} /> {sub.credits_remaining}/{sub.BookingsIncluded} reservas</span>
                      {sub.discount_percent > 0 && <span>{sub.discount_percent}% desc.</span>}
                      <span>até {sub.EndDate || sub.NextBillingDate}</span>
                      <span style={{ fontWeight: 600 }}>{Number(sub.PricePaid).toLocaleString('pt')}$00</span>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          )}

          {/* Upcoming Bookings */}
          <div style={{ marginBottom: 20 }}>
            <div style={{ fontSize: '0.875rem', fontWeight: 600, marginBottom: 8, display: 'flex', alignItems: 'center', gap: 6 }}>
              <Ico name="calendar" size={14} /> Reservas
              {upcomingBookings.length > 0 && <span style={{ fontSize: '0.625rem', background: 'var(--d-bg-surface-3)', padding: '2px 7px', borderRadius: 10 }}>{upcomingBookings.length}</span>}
            </div>
            {upcomingBookings.length === 0 && <div className="gm-empty" style={{ padding: 16 }}>Sem reservas activas. Reserva um campo para começar!</div>}
            {upcomingBookings.map(bk => (
              <div key={bk.id} className="gm-card" style={{ cursor: 'pointer' }} onClick={() => setBookingConfirmation(bk)}>
                <div className="gm-card-info" style={{ flex: 1 }}>
                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                    <span className="gm-card-name">{bk.venue_name}</span>
                    <span style={{ fontSize: '0.625rem', padding: '2px 8px', borderRadius: 12, fontWeight: 600, background: bk.status === 'confirmed' ? 'rgba(2,165,134,0.13)' : bk.is_paid === false ? 'rgba(239,68,68,0.13)' : 'rgba(245,158,11,0.13)', color: bk.status === 'confirmed' ? 'var(--nb-green)' : bk.is_paid === false ? '#dc2626' : '#d97706' }}>{bk.status === 'confirmed' ? _t('webapp.game_confirmed') : bk.is_paid === false ? _t('webapp.game_not_paid') : _t('webapp.game_pending')}</span>
                  </div>
                  <div className="gm-card-sub" style={{ display: 'flex', gap: 12, flexWrap: 'wrap', marginTop: 4 }}>
                    <span>{bk.date}</span>
                    <span>{bk.start_time} — {bk.end_time}</span>
                    {bk.booking_code && <span style={{ fontFamily: 'monospace', fontWeight: 700, letterSpacing: 1 }}>{bk.booking_code}</span>}
                  </div>
                  {bk.is_paid === false && bk.total_raw > 0 && (
                    <div style={{ marginTop: 8 }}>
                      <button className="pay-btn-primary" style={{ fontSize: '0.75rem', padding: '6px 16px', borderRadius: 10 }} onClick={(e) => { e.stopPropagation(); payBooking(bk); }}>
                        <Ico name="lock" size={12} /> {_t('webapp.game_pay_now')} · {(bk.total_raw + (platformFees?.games_booking_platform_fee || 0)).toLocaleString('pt')}$00
                      </button>
                      {(platformFees?.games_booking_platform_fee || 0) > 0 && <span style={{ display: 'block', fontSize: '0.65rem', color: 'var(--d-fg-3)', marginTop: 2 }}>(inclui {platformFees.games_booking_platform_fee}$ taxa de serviço)</span>}
                    </div>
                  )}
                </div>
                {bk.is_paid !== false && <Ico name="qr" size={16} />}
              </div>
            ))}
          </div>

          {/* My Teams */}
          {myTeams.length > 0 && (
            <div style={{ marginBottom: 20 }}>
              <div style={{ fontSize: '0.875rem', fontWeight: 600, marginBottom: 8, display: 'flex', alignItems: 'center', gap: 6 }}>
                <Ico name="shield" size={14} /> Minhas Equipas
                <span style={{ fontSize: '0.625rem', background: 'var(--d-bg-surface-3)', padding: '2px 7px', borderRadius: 10 }}>{myTeams.length}</span>
              </div>
              {myTeams.map(team => (
                <div key={team.ID} className="gm-card">
                  <div className="gm-team-initials" style={{ background: (team.Color || '#1565c0') + '33', color: team.Color || 'var(--d-fg-muted)' }}>{team.Initials || team.Name?.charAt(0) || '?'}</div>
                  <div className="gm-card-info">
                    <span className="gm-card-name">{team.Name}</span>
                    <span className="gm-card-sub">{team.sport_name || ''}{team.member_count ? ` · ${team.member_count} membros` : ''}</span>
                  </div>
                </div>
              ))}
            </div>
          )}

          {/* Past bookings (collapsed) */}
          {pastBookings.length > 0 && (
            <details style={{ marginBottom: 20 }}>
              <summary style={{ fontSize: '0.875rem', fontWeight: 600, cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 6, marginBottom: 8 }}>
                <Ico name="clock" size={14} /> Histórico
                <span style={{ fontSize: '0.625rem', background: 'var(--d-bg-surface-3)', padding: '2px 7px', borderRadius: 10 }}>{pastBookings.length}</span>
              </summary>
              {pastBookings.map(bk => (
                <div key={'p-' + bk.id} className="gm-card" style={{ opacity: 0.65 }}>
                  <div className="gm-card-info" style={{ flex: 1 }}>
                    <span className="gm-card-name">{bk.venue_name}</span>
                    <span className="gm-card-sub">{bk.date} · {bk.start_time}–{bk.end_time}{bk.total ? ` · ${bk.total}` : ''}</span>
                  </div>
                </div>
              ))}
            </details>
          )}

          {/* No plan CTA */}
          {!mySubscriptions.some(s => s.Status === 'active') && subscriptionPlans.length > 0 && (
            <div style={{ display: 'flex', alignItems: 'center', gap: 14, background: 'rgba(59,130,246,0.08)', borderRadius: 14, padding: 16, cursor: 'pointer', border: '1px solid rgba(59,130,246,0.15)' }} onClick={() => setTab('subscriptions')}>
              <Ico name="wallet" size={24} />
              <div>
                <div style={{ fontWeight: 600, fontSize: '0.875rem', color: '#60a5fa' }}>Ainda sem plano?</div>
                <div style={{ fontSize: '0.75rem', color: 'var(--d-fg-3)' }}>Subscreve um plano e poupa nas reservas de campo. Ver planos →</div>
              </div>
            </div>
          )}
        </>
        );
      })()}

      {/* TOURNAMENTS */}
      {tab === 'tournaments' && (() => {
        const sportFiltered = sportFilter ? tournaments.filter(t => String(t.sport_id) === sportFilter) : tournaments;
        const filtered = sportFiltered.filter(t => tournamentFilter === 'all' || t.status === tournamentFilter);
        // Group by company
        const groups = {};
        filtered.forEach(t => { const k = t.company_name || 'Geral'; if (!groups[k]) groups[k] = []; groups[k].push(t); });
        const companyGroups = Object.entries(groups);
        const multiCompany = companyGroups.length > 1;
        return (
          <>
            <div className="tk-tabs" style={{ flexWrap: 'wrap' }}>
              {[{ id: 'all', l: _t('games.filter_all') }, { id: 'open', l: _t('games.status_open') }, { id: 'ongoing', l: _t('games.status_ongoing') }, { id: 'finished', l: _t('games.status_finished') }].map(f => (
                <button key={f.id} className={`tk-tab ${tournamentFilter === f.id ? 'on' : ''}`} onClick={() => setTournamentFilter(f.id)}>{f.l}
                  <span className="tk-cnt">{f.id === 'all' ? sportFiltered.length : sportFiltered.filter(t => t.status === f.id).length}</span>
                </button>
              ))}
            </div>
            {companyGroups.map(([companyName, items]) => (
              <div key={companyName} style={{ marginBottom: multiCompany ? 16 : 0 }}>
                {multiCompany && (
                  <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: '0.875rem', fontWeight: 600, padding: '8px 12px', background: 'var(--d-bg-surface-3)', borderRadius: 10, marginBottom: 8 }}>
                    <Ico name="building" size={14} /> {companyName}
                    <span style={{ fontSize: '0.625rem', background: 'var(--d-bg-surface-2)', padding: '2px 7px', borderRadius: 10 }}>{items.length}</span>
                  </div>
                )}
                <div className="gm-list">
                  {items.map(t => (
                    <button key={t.id} className="gm-card" onClick={() => loadTournamentDetail(t.id, t.company_hash)}>
                      <div className="gm-card-icon" style={{ background: t.color ? t.color + '22' : 'rgba(2,165,134,0.13)', color: t.color || 'var(--nb-green)' }}><Ico name="trophy" size={18} /></div>
                      <div className="gm-card-info">
                        <span className="gm-card-name">{t.name}</span>
                        <span className="gm-card-sub">{t.sport_name} · {t.date} · {t.location}</span>
                        <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginTop: 2 }}>
                          <span className="gm-card-sub">{t.teams}/{t.max_teams} {t.max_teams === 1 ? (_t('games.team_singular') || 'equipa') : (_t('games.teams_plural') || 'equipas')}{t.fee ? ` · ${t.fee}` : ''}</span>
                          {t.max_teams > 0 && <div className="gm-progress" title={`${t.teams}/${t.max_teams} (${Math.round((t.teams / t.max_teams) * 100)}%)`}><div style={{ width: `${Math.min(100, (t.teams / t.max_teams) * 100)}%`, background: (t.teams / t.max_teams) >= 0.9 ? '#ef4444' : (t.teams / t.max_teams) >= 0.7 ? '#f59e0b' : undefined }} /></div>}
                        </div>
                      </div>
                      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 4 }}>
                        <span className="gm-status" style={{ background: `${statusColor(t.status)}22`, color: statusColor(t.status) }}>{t.status_label || statusLabel(t.status)}</span>
                        {t.my_team && (
                          <span style={{ display: 'flex', alignItems: 'center', gap: 3, fontSize: '0.625rem', fontWeight: 600, color: 'var(--nb-green)', background: 'rgba(2,165,134,0.07)', padding: '2px 8px', borderRadius: 10 }}>
                            <Ico name="check" size={10} /> {t.my_team.team_name}
                          </span>
                        )}
                      </div>
                    </button>
                  ))}
                </div>
              </div>
            ))}
            {filtered.length === 0 && <div className="gm-empty">{_t('games.no_tournaments')}</div>}
          </>
        );
      })()}

      {/* VENUES */}
      {tab === 'venues' && (() => {
        const q = fieldSearch.toLowerCase();
        const sportVenues = sportFilter ? venues.filter(v => (v.sport_ids?.length > 0 ? v.sport_ids.includes(parseInt(sportFilter)) : v.sport_id ? String(v.sport_id) === sportFilter : true)) : venues;
        const companyFiltered = venueCompanyFilter ? sportVenues.filter(v => (v.company_hash || '') === venueCompanyFilter) : sportVenues;
        const filteredVenues = q ? companyFiltered.filter(v => v.name.toLowerCase().includes(q) || (v.address || '').toLowerCase().includes(q) || (v.type || '').toLowerCase().includes(q)) : companyFiltered;
        // Unique companies for filter
        const venueCompanies = [];
        const seenC = new Set();
        venues.forEach(v => { if (v.company_name && !seenC.has(v.company_hash)) { seenC.add(v.company_hash); venueCompanies.push({ hash: v.company_hash, name: v.company_name }); } });
        // Group by company
        const groups = {};
        filteredVenues.forEach(v => { const k = v.company_name || 'Geral'; if (!groups[k]) groups[k] = { name: k, hash: v.company_hash || '', items: [] }; groups[k].items.push(v); });
        const companyGroups = Object.values(groups);
        return (
          <>
            {myBookings.length > 0 && (
              <button className="pay-btn-outline" style={{ alignSelf: 'flex-start', fontSize: '0.75rem', padding: '0.375rem 0.75rem' }} onClick={() => showPanel('bookings', myBookings)}>
                <Ico name="calendar" size={13} /> {_t('games.my_bookings')} ({myBookings.length})
              </button>
            )}
            {venueCompanies.length > 1 && (
              <div className="tk-tabs" style={{ flexWrap: 'wrap' }}>
                <button className={`tk-tab ${!venueCompanyFilter ? 'on' : ''}`} onClick={() => setVenueCompanyFilter('')}>
                  <Ico name="building" size={12} /> {_t('games.filter_all')}
                </button>
                {venueCompanies.map(c => (
                  <button key={c.hash} className={`tk-tab ${venueCompanyFilter === c.hash ? 'on' : ''}`} onClick={() => setVenueCompanyFilter(c.hash)}>{c.name}</button>
                ))}
              </div>
            )}
            <div className="str-search">
              <Ico name="search" size={14} />
              <input type="text" placeholder={_t('games.search_fields')} value={fieldSearch} onChange={e => setFieldSearch(e.target.value)} />
            </div>
            {companyGroups.map(group => (
              <div key={group.name} style={{ marginBottom: 16 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: '0.875rem', fontWeight: 600, padding: '8px 12px', background: 'var(--d-bg-surface-3)', borderRadius: 10, marginBottom: 8 }}>
                  <Ico name="building" size={14} /> {group.name}
                  <span style={{ fontSize: '0.625rem', background: 'var(--d-bg-surface-2)', padding: '2px 7px', borderRadius: 10 }}>{group.items.length}</span>
                </div>
                <div className="gm-list">
                  {group.items.map(v => {
                    const hasSub = getActiveSubscription();
                    const hasDisc = !hasSub && getSubscriptionWithDiscount();
                    return (
                    <div key={v.id} className="gm-card" style={{ cursor: 'pointer' }} onClick={() => showPanel('venue', v)}>
                      <div className="gm-card-icon" style={{ background: v.color ? v.color + '22' : 'rgba(59,130,246,0.13)', color: v.color || '#3b82f6' }}><Ico name="field" size={18} /></div>
                      <div className="gm-card-info">
                        <span className="gm-card-name">{v.name}</span>
                        <span className="gm-card-sub">{v.type} · {{ synthetic: 'sintético', acrylic: 'acrílico', grass: 'relva', artificial: 'relva artificial', clay: 'terra batida', concrete: 'betão', wood: 'madeira' }[v.surface?.toLowerCase()] || v.surface}{v.address ? ` · ${v.address}` : ''}</span>
                        <span className="gm-card-sub">
                          {hasSub && v.price_raw > 0
                            ? <><span style={{ textDecoration: 'line-through', opacity: 0.5 }}>{v.price}</span> <span style={{ color: 'var(--nb-green)', fontWeight: 600 }}>Incluído no plano</span></>
                            : hasDisc && v.price_raw > 0
                              ? <><span style={{ textDecoration: 'line-through', opacity: 0.5 }}>{v.price}</span> <span style={{ color: '#a855f7', fontWeight: 600 }}>{hasDisc.discount_percent}% desc.</span></>
                              : (v.price || _t('games.free'))
                          }
                          {v.capacity ? ` · ${v.capacity} lug.` : ''}
                        </span>
                        {hasSub && v.price_raw > 0 && (
                          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 4, fontSize: '0.625rem', fontWeight: 600, color: 'var(--nb-green)', background: 'rgba(2,165,134,0.07)', padding: '2px 8px', borderRadius: 6, marginTop: 3 }}>
                            <Ico name="wallet" size={10} /> {hasSub.credits_remaining} créditos
                          </div>
                        )}
                        {v.features && v.features.length > 0 && <div style={{ display: 'flex', gap: 4, flexWrap: 'wrap', marginTop: 4 }}>{v.features.map((f, i) => <span key={i} className="apt-badge">{f}</span>)}</div>}
                      </div>
                      <span className="gm-avail-dot" style={{ background: v.available !== false ? '#22c55e' : '#ef4444' }} title={v.available !== false ? (_t('games.field_available') || 'Disponível') : (_t('games.field_unavailable') || 'Indisponível')} />
                    </div>
                    );
                  })}
                </div>
              </div>
            ))}
            {filteredVenues.length === 0 && <div className="gm-empty">{fieldSearch ? _t('games.no_fields_found') : _t('games.no_fields')}</div>}
          </>
        );
      })()}

      {/* MATCHES */}
      {tab === 'matches' && (
        <>
          {gameDays.length > 0 && (
            <div style={{ fontSize: '0.75rem', fontWeight: 600, color: 'var(--d-fg-2)', marginBottom: 6, textTransform: 'capitalize' }}>
              {(() => { const first = new Date(gameDays[0].date); const last = new Date(gameDays[gameDays.length - 1].date); const fMonth = first.toLocaleDateString('pt', { month: 'long' }); const lMonth = last.toLocaleDateString('pt', { month: 'long' }); const year = first.getFullYear(); return fMonth === lMonth ? `${fMonth} ${year}` : `${fMonth} — ${lMonth} ${year}`; })()}
            </div>
          )}
          <div className="gm-days-scroll" style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
            {calendarOffset > 0 && (
              <button className="gm-day-chip" onClick={() => setCalendarOffset(o => Math.max(0, o - CALENDAR_PAGE_SIZE))} title={_t('games.previous_dates')} style={{ minWidth: 32 }}>
                <Ico name="chevronLeft" size={14} />
              </button>
            )}
            {gameDays.map(d => (
              <button key={d.date} className={`gm-day-chip ${matchDate === d.date ? 'gm-day-chip--on' : ''}`} onClick={() => setMatchDate(d.date)}>
                <span className="gm-day-wd">{d.weekday}</span>
                <span className="gm-day-num">{d.day}</span>
              </button>
            ))}
            <button className="gm-day-chip" onClick={() => setCalendarOffset(o => o + CALENDAR_PAGE_SIZE)} title={_t('games.more_dates')} style={{ minWidth: 32 }}>
              <Ico name="chevronRight" size={14} />
            </button>
          </div>
          {/* Sport filter is now handled by the global chip bar above tabs */}
          <div className="gm-list">
            {matches.map(m => (
              <div key={m.id} className="gm-match-card">
                <div className="gm-match-teams">
                  <div className="gm-match-team"><span className="gm-team-initials" style={{ background: (m.home_color || '#666') + '33', color: m.home_color || 'var(--d-fg-muted)' }}>{m.home_initials}</span><span className="gm-match-team-name">{m.home_name}</span></div>
                  <div className="gm-match-score">{m.is_live && <span className="gm-live-dot" />}<span className="gm-score">{m.home_score ?? '-'} : {m.away_score ?? '-'}</span><span className="gm-match-time">{m.time}{m.phase ? ` · ${m.phase}` : ''}</span></div>
                  <div className="gm-match-team"><span className="gm-team-initials" style={{ background: (m.away_color || '#666') + '33', color: m.away_color || 'var(--d-fg-muted)' }}>{m.away_initials}</span><span className="gm-match-team-name">{m.away_name}</span></div>
                </div>
                <div className="gm-match-meta">{m.tournament && <span>{m.tournament}</span>}{m.field && <><span className="apt-dot">·</span><span>{m.field}</span></>}{m.is_live && <span className="gm-live-badge">{_t('games.live')}</span>}{m.is_finished && <span style={{ color: 'var(--d-fg-3)' }}>{_t('games.status_finished')}</span>}</div>
              </div>
            ))}
            {matches.length === 0 && (
              <div className="gm-empty" style={{ padding: '2rem 1rem', textAlign: 'center' }}>
                <div style={{ width: 48, height: 48, borderRadius: '50%', background: 'rgba(2,165,134,0.08)', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 10px', color: 'var(--d-fg-3)' }}><Ico name="field" size={22} /></div>
                <p style={{ fontWeight: 600, fontSize: '0.875rem', color: 'var(--d-fg-1)', margin: '0 0 4px' }}>{_t('games.no_matches')}</p>
                <p style={{ fontSize: '0.75rem', color: 'var(--d-fg-3)', margin: 0 }}>{_t('games.no_matches_hint') || 'Seleccione outra data ou verifique mais tarde.'}</p>
              </div>
            )}
          </div>
        </>
      )}

      {/* TRAININGS */}
      {tab === 'trainings' && (() => {
        const sportTrainings = sportFilter ? trainings.filter(t => String(t.sport_id) === sportFilter) : trainings;
        const filtered = sportTrainings.filter(t => {
          if (trainingFilter === 'needs') return t.needs_players && !isJoined(t);
          if (trainingFilter === 'my') return isJoined(t);
          return true;
        });
        return (
          <>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
              <button className="pay-btn-primary" style={{ fontSize: '0.75rem', padding: '0.375rem 0.75rem' }} onClick={() => { if (requirePlayer()) { setNewTraining({ sport: sports[0]?.ID || '', title: '', date: '', endDate: '', time: '', endTime: '', maxPlayers: 10, notes: '', paymentMode: 'daily', enrollmentType: 'open', dailyPrice: '', monthlyPrice: '', weeklySchedule: [], venue: '' }); setTrainingStep(1); setVenueSchedule(null); setModal('createTraining'); } }}>
                <Ico name="users" size={14} /> {_t('games.create_training')}
              </button>
              <div className="tk-tabs" style={{ flex: 1 }}>
                {[{ id: 'all', l: _t('games.filter_all') }, { id: 'needs', l: _t('games.filter_needs_players') }, { id: 'my', l: _t('games.filter_my') }].map(f => (
                  <button key={f.id} className={`tk-tab ${trainingFilter === f.id ? 'on' : ''}`} onClick={() => setTrainingFilter(f.id)}>{f.l}</button>
                ))}
              </div>
            </div>
            <div className="gm-list">
              {filtered.map(t => (
                <div key={t.id} className="gm-card" style={{ cursor: 'pointer' }} onClick={() => loadTrainingDetail(t)}>
                  <div className="gm-card-icon" style={{ background: 'rgba(6,182,212,0.12)', color: '#06b6d4' }}><Ico name="users" size={18} /></div>
                  <div className="gm-card-info">
                    <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                      <span className="gm-card-name">{t.title}</span>
                      {t.needs_players && <span className="gm-urgency">{t.slots_remaining} vagas</span>}
                    </div>
                    <span className="gm-card-sub">{t.sport_name} · {t.date} às {t.time}</span>
                    <div className="gm-card-sub" style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
                      {t.organizer_photo ? <img src={t.organizer_photo} alt="" style={{ width: 14, height: 14, borderRadius: '50%', objectFit: 'cover' }} referrerPolicy="no-referrer" /> : null}
                      <span>{t.organizer || _t('games.lbl_organizer')}{t.field && ` · ${t.field}`}</span>
                    </div>
                    {t.players && t.players.length > 0 && (
                      <div style={{ display: 'flex', alignItems: 'center', marginTop: 4 }}>
                        {t.players.slice(0, 6).map((p, i) => (<span key={i} className="gm-player-avatar" style={{ background: (p.color || '#666') + '44', color: p.color || 'var(--d-fg-muted)', marginLeft: i > 0 ? -4 : 0 }} title={p.name}>{p.initials || p.name?.charAt(0)}</span>))}
                        {t.players.length > 6 && <span className="gm-player-avatar" style={{ background: 'var(--d-bg-sunken)', marginLeft: -4 }}>+{t.players.length - 6}</span>}
                        {t.max_players > 0 && <div className="gm-progress" style={{ marginLeft: 8, flex: 1 }}><div style={{ width: `${Math.min(100, ((t.players?.length || 0) / t.max_players) * 100)}%`, background: t.needs_players ? 'var(--nb-green)' : '#f59e0b' }} /></div>}
                      </div>
                    )}
                  </div>
                  <div style={{ display: 'flex', flexDirection: 'column', gap: 4, flexShrink: 0, alignItems: 'flex-end' }}>
                    {t.needs_players && !isJoined(t) && <button className="pay-btn-primary gm-pulse-btn" style={{ padding: '0.375rem 0.75rem', fontSize: '0.75rem' }} disabled={submitting} onClick={e => { e.stopPropagation(); joinTraining(t); }}>{submitting ? <span className="btn-spinner" /> : _t('games.join')}</button>}
                    {playerId && (t.players || []).some(p => p.player_id === playerId) && <span className="gm-status" style={{ background: '#22c55e22', color: '#22c55e' }}>{_t('games.enrolled')}</span>}
                    {playerId && (t.pending_player_ids || []).includes(playerId) && !(t.players || []).some(p => p.player_id === playerId) && <span className="gm-status" style={{ background: 'rgba(245,158,11,0.13)', color: '#d97706' }}>{_t('games.pending') || 'Pendente'}</span>}
                    {!t.needs_players && !isJoined(t) && <span className="gm-status" style={{ background: 'rgba(107,114,128,0.15)', color: 'var(--d-fg-3)' }}>{_t('games.full')}</span>}
                  </div>
                </div>
              ))}
              {filtered.length === 0 && (
                <div className="gm-empty" style={{ padding: '2rem 1rem', textAlign: 'center' }}>
                  <div style={{ width: 48, height: 48, borderRadius: '50%', background: 'rgba(2,165,134,0.08)', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 10px', color: 'var(--d-fg-3)' }}><Ico name="users" size={22} /></div>
                  <p style={{ fontWeight: 600, fontSize: '0.875rem', color: 'var(--d-fg-1)', margin: '0 0 4px' }}>{trainingFilter === 'my' ? _t('games.no_my_trainings') : trainingFilter === 'needs' ? _t('games.no_trainings_need_players') : _t('games.no_trainings')}</p>
                  <p style={{ fontSize: '0.75rem', color: 'var(--d-fg-3)', margin: '0 0 12px' }}>{_t('games.no_trainings_hint') || 'Cria um treino aberto para convidar outros atletas.'}</p>
                </div>
              )}
            </div>
          </>
        );
      })()}

      {/* TEAMS */}
      {tab === 'teams' && (() => {
        const filteredTeams = sportFilter ? teams.filter(t => String(t.sport_id) === sportFilter) : teams;
        return (
        <>
          <button className="pay-btn-primary" style={{ alignSelf: 'flex-start' }} onClick={() => { if (requirePlayer()) { setNewTeam({ name: '', sport: sports[0]?.ID || '', color: '#1565c0' }); setModal('createTeam'); } }}>
            <Ico name="shield" size={14} /> {_t('games.create_team')}
          </button>
          <div className="gm-list">
            {filteredTeams.map(t => (
              <div key={t.id} className="gm-card" style={{ cursor: 'pointer' }} onClick={() => showPanel('team', t)}>
                <span className="gm-team-initials gm-team-initials--lg" style={{ background: (t.color || '#666') + '33', color: t.color || 'var(--d-fg-muted)' }}>{t.initials || t.name?.substring(0, 2)}</span>
                <div className="gm-card-info">
                  <span className="gm-card-name">{t.name}</span>
                  <span className="gm-card-sub">{t.sport_name} · {t.members} membros{t.wins ? ` · ${t.wins}V` : ''}{t.tournaments ? ` · ${t.tournaments} torneios` : ''}</span>
                  {t.members_list && t.members_list.length > 0 && (
                    <div style={{ display: 'flex', marginTop: 4 }}>
                      {t.members_list.slice(0, 5).map((m, i) => (
                        <span key={i} className="gm-player-avatar" style={{ background: (m.color || '#666') + '44', color: m.color || 'var(--d-fg-muted)', marginLeft: i > 0 ? -4 : 0 }} title={m.name}>
                          {m.photo ? <img src={m.photo} alt="" style={{ width: '100%', height: '100%', borderRadius: '50%', objectFit: 'cover' }} referrerPolicy="no-referrer" /> : (m.initials || m.name?.charAt(0))}
                        </span>
                      ))}
                      {t.members_list.length > 5 && <span className="gm-player-avatar" style={{ background: 'var(--d-bg-sunken)', marginLeft: -4 }}>+{t.members_list.length - 5}</span>}
                    </div>
                  )}
                  {t.next_match && <span className="gm-card-sub" style={{ color: 'var(--nb-green)' }}>{_t('games.next_match')}: {t.next_match}</span>}
                </div>
                <Ico name="chevR" size={14} />
              </div>
            ))}
            {filteredTeams.length === 0 && <div className="gm-empty">{_t('games.no_teams')}</div>}
          </div>

          {/* Team/athlete details now shown in right panel */}
        </>
        );
      })()}

      {/* ATHLETES */}
      {tab === 'athletes' && (() => {
        const aq = athleteSearch.toLowerCase();
        let filteredAth = athletes;
        const activeSportFilter = sportFilter || athleteSportFilter;
        if (activeSportFilter) {
          const sp = sports.find(s => String(s.ID) === String(activeSportFilter));
          if (sp) filteredAth = filteredAth.filter(a => a.sports?.includes(sp.Name));
        }
        if (aq) filteredAth = filteredAth.filter(a => a.name.toLowerCase().includes(aq) || (a.team || '').toLowerCase().includes(aq));
        return (
        <>
          {/* Sub-tabs */}
          <div className="gm-subtabs">
            <button className={`gm-subtab ${athleteView === 'list' ? 'gm-subtab--on' : ''}`} onClick={() => setAthleteView('list')}>
              <Ico name="list" size={13} /> {_t('games.all_athletes')}
            </button>
            <button className={`gm-subtab ${athleteView === 'ranking' ? 'gm-subtab--on' : ''}`} onClick={() => setAthleteView('ranking')}>
              <Ico name="trophy" size={13} /> {_t('games.ranking')}
            </button>
          </div>

          {/* Search + filter */}
          <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
            <div className="str-search" style={{ flex: 1 }}>
              <Ico name="search" size={14} />
              <input type="text" placeholder={_t('games.search_athletes')} value={athleteSearch} onChange={e => setAthleteSearch(e.target.value)} />
            </div>
            {sports.length > 0 && (
              <select className="pay-input" style={{ maxWidth: 160 }} value={athleteSportFilter} onChange={e => setAthleteSportFilter(e.target.value)}>
                <option value="">{_t('games.filter_all')}</option>
                {sports.map(s => <option key={s.ID} value={s.ID}>{s.Name}</option>)}
              </select>
            )}
          </div>

          {athleteView === 'list' && (
            <div className="gm-list">
              <div style={{ fontSize: '0.75rem', color: 'var(--d-fg-3)', padding: '0 0.25rem' }}>{filteredAth.length} atletas</div>
              {filteredAth.map(a => (
                <div key={a.id} className="gm-card" style={{ cursor: 'pointer' }} onClick={() => showPanel('athlete', a)}>
                  {a.photo ? <img src={a.photo} alt="" style={{ width: 36, height: 36, borderRadius: '50%', objectFit: 'cover', flexShrink: 0 }} referrerPolicy="no-referrer" />
                    : <span className="gm-team-initials" style={{ background: (a.color || '#666') + '33', color: a.color || 'var(--d-fg-muted)' }}>{a.initials || a.name?.charAt(0)}</span>}
                  <div className="gm-card-info">
                    <span className="gm-card-name">{a.name}</span>
                    <span className="gm-card-sub">{a.sports?.join(', ')}{a.team ? ` · ${a.team}` : ''}{a.level ? ` · ${a.level}` : ''}</span>
                    <span className="gm-card-sub">{a.games_played ? `${a.games_played} jogos` : ''}{a.wins ? ` · ${a.wins}V` : ''}{a.goals ? ` · ${a.goals} golos` : ''}{a.points ? ` · ${a.points} pts` : ''}</span>
                  </div>
                  <Ico name="chevR" size={14} />
                </div>
              ))}
              {filteredAth.length === 0 && <div className="gm-empty">{athleteSearch || athleteSportFilter ? _t('games.no_athletes_found') : _t('games.no_athletes')}</div>}
            </div>
          )}

          {/* Ranking view */}
          {athleteView === 'ranking' && (() => {
            const ranked = [...filteredAth].sort((a, b) => (b.points || 0) - (a.points || 0));
            return (
              <div>
                {/* Podium */}
                {ranked.length >= 1 && (
                  <div className="gm-podium">
                    {/* 2nd */}
                    {ranked.length >= 2 && (
                      <div className="gm-podium-place gm-podium-place--2">
                        <div className="gm-podium-avatar" style={{ background: ranked[1].color || '#666' }}>
                          {ranked[1].photo ? <img src={ranked[1].photo} alt="" referrerPolicy="no-referrer" /> : <span>{ranked[1].initials || '?'}</span>}
                        </div>
                        <span className="gm-podium-name">{ranked[1].name}</span>
                        <span className="gm-podium-pts">{ranked[1].points || 0} pts</span>
                        <div className="gm-podium-bar gm-podium-bar--2">2</div>
                      </div>
                    )}
                    {/* 1st */}
                    <div className="gm-podium-place gm-podium-place--1">
                      <div className="gm-podium-crown"><Ico name="trophy" size={22} /></div>
                      <div className="gm-podium-avatar gm-podium-avatar--1st" style={{ background: ranked[0].color || '#666' }}>
                        {ranked[0].photo ? <img src={ranked[0].photo} alt="" referrerPolicy="no-referrer" /> : <span>{ranked[0].initials || '?'}</span>}
                      </div>
                      <span className="gm-podium-name">{ranked[0].name}</span>
                      <span className="gm-podium-pts">{ranked[0].points || 0} pts</span>
                      <div className="gm-podium-bar gm-podium-bar--1">1</div>
                    </div>
                    {/* 3rd */}
                    {ranked.length >= 3 && (
                      <div className="gm-podium-place gm-podium-place--3">
                        <div className="gm-podium-avatar" style={{ background: ranked[2].color || '#666' }}>
                          {ranked[2].photo ? <img src={ranked[2].photo} alt="" referrerPolicy="no-referrer" /> : <span>{ranked[2].initials || '?'}</span>}
                        </div>
                        <span className="gm-podium-name">{ranked[2].name}</span>
                        <span className="gm-podium-pts">{ranked[2].points || 0} pts</span>
                        <div className="gm-podium-bar gm-podium-bar--3">3</div>
                      </div>
                    )}
                  </div>
                )}

                {/* Ranking list */}
                <div className="gm-rank-list">
                  {ranked.map((a, idx) => (
                    <div key={a.id} className={`gm-rank-row ${idx < 3 ? 'gm-rank-row--top' : ''}`}>
                      <div className="gm-rank-pos">
                        {idx === 0 && <span className="gm-medal gm-medal--gold">1</span>}
                        {idx === 1 && <span className="gm-medal gm-medal--silver">2</span>}
                        {idx === 2 && <span className="gm-medal gm-medal--bronze">3</span>}
                        {idx > 2 && <span className="gm-rank-num">{idx + 1}</span>}
                      </div>
                      <div className="gm-rank-athlete">
                        {a.photo ? <img src={a.photo} alt="" className="gm-rank-photo" referrerPolicy="no-referrer" />
                          : <span className="gm-team-initials" style={{ background: (a.color || '#666') + '33', color: a.color || 'var(--d-fg-muted)', width: '1.75rem', height: '1.75rem', fontSize: '0.5625rem' }}>{a.initials || a.name?.charAt(0)}</span>}
                        <div>
                          <span className="gm-card-name" style={{ fontSize: '0.8125rem' }}>{a.name}</span>
                          {a.team && <span className="gm-card-sub">{a.team}</span>}
                        </div>
                      </div>
                      <div className="gm-rank-stats">
                        <span>{a.games_played || 0}<small>J</small></span>
                        <span>{a.wins || 0}<small>V</small></span>
                        <span>{a.goals || 0}<small>G</small></span>
                      </div>
                      <div className="gm-rank-points">
                        <strong>{a.points || 0}</strong> <small>pts</small>
                      </div>
                    </div>
                  ))}
                  {ranked.length === 0 && <div className="gm-empty">{_t('games.no_ranking')}</div>}
                </div>
              </div>
            );
          })()}

          {/* Athlete details now shown in right panel */}
        </>
        );
      })()}

      {/* ── TAB: Subscriptions/Plans ── */}
      {tab === 'subscriptions' && (() => {
        const planTypeLabel = (t) => ({ monthly: _t('webapp.game_monthly'), quarterly: _t('webapp.game_quarterly'), annual: _t('webapp.game_annual'), daily: _t('webapp.game_daily'), day_pass: _t('webapp.game_day_pass'), corporate: _t('webapp.game_corporate') }[t] || t);
        const statusLabel = (s) => ({ active: _t('webapp.game_active'), suspended: _t('webapp.game_suspended'), cancelled: _t('webapp.game_cancelled_status'), expired: _t('webapp.game_expired'), past_due: _t('webapp.game_past_due') }[s] || s);
        const statusColor = (s) => ({ active: '#02A586', suspended: '#e6a817', cancelled: '#dc3545', expired: '#6c757d', past_due: '#e65100' }[s] || '#6c757d');
        const parseBenefits = (b) => { if (!b) return []; if (Array.isArray(b)) return b; try { return JSON.parse(b); } catch { return []; } };

        const handleSubscribe = async (plan) => {
          if (!playerId) { addToast && addToast(_t('games.register_first'), 'warning'); setModal('registerAthlete'); setRegStep(1); return; }
          setSubmitting(true);
          const planHash = plan.company_hash || companyHash;
          const res = await API.post(`/games/${planHash}/subscribe`, { plan_id: plan.id, player_id: playerId, return_path: window.location.origin + '/app/webapp?view=games' });
          setSubmitting(false);
          if (res.message === 'success' && res.data?.redirect_html) {
            const div = document.createElement('div'); div.innerHTML = res.data.redirect_html; document.body.appendChild(div);
            const form = div.querySelector('form'); if (form) form.submit();
          } else { addToast && addToast(res.data || res.error || _t('games.error_generic'), 'error'); }
        };

        const filteredGroups = planCompanyFilter
          ? subscriptionPlansByCompany.filter(g => g.company_hash === planCompanyFilter)
          : subscriptionPlansByCompany;

        const renderPlanCard = (plan) => (
          <div key={plan.id} style={{ background: 'var(--d-bg-surface)', borderRadius: 16, border: '1px solid var(--d-border)', overflow: 'hidden', display: 'flex', flexDirection: 'column', boxShadow: 'var(--d-shadow-card)' }}>
            <div style={{ padding: '20px 16px 16px', textAlign: 'center', borderBottom: '1px solid var(--d-border)' }}>
              <span style={{ fontSize: '0.6875rem', padding: '2px 8px', borderRadius: 12, border: '1px solid var(--d-border-strong)', color: 'var(--d-fg-3)', fontWeight: 600, textTransform: 'uppercase', letterSpacing: 0.5 }}>{planTypeLabel(plan.type)}</span>
              <div style={{ fontWeight: 700, fontSize: '1.125rem', margin: '8px 0 4px', color: 'var(--d-fg-1)' }}>{plan.name}</div>
              <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'center', gap: 2 }}>
                <span style={{ fontSize: '1.75rem', fontWeight: 800, color: 'var(--nb-green)' }}>{Number(plan.price).toLocaleString('pt')}</span>
                <span style={{ fontSize: '1rem', fontWeight: 600, color: 'var(--nb-green)' }}>$00</span>
                <span style={{ fontSize: '0.75rem', color: 'var(--d-fg-3)', marginLeft: 2 }}>/{plan.billing_cycle_days == 1 ? (_t('games.plan_day') || 'dia') : `${plan.billing_cycle_days} ${_t('games.plan_days') || 'dias'}`}</span>
              </div>
              {(platformFees?.games_subscription_platform_fee || 0) > 0 && (
                <div style={{ fontSize: '0.7rem', color: 'var(--d-fg-3)', marginTop: 2 }}>+ {platformFees.games_subscription_platform_fee}$00 taxa de serviço</div>
              )}
            </div>
            <div style={{ padding: 16, flex: 1 }}>
              {plan.description && <p style={{ fontSize: '0.8125rem', color: 'var(--d-fg-3)', margin: '0 0 12px', lineHeight: 1.5 }}>{plan.description}</p>}
              <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                {plan.included_bookings > 0 && <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: '0.8125rem', color: 'var(--d-fg-2)' }}><Ico name="check" size={14} /> {plan.included_bookings} {plan.included_bookings === 1 ? (_t('games.booking_included_singular') || 'reserva incluída') : (_t('games.bookings_included_plural') || 'reservas incluídas')}</div>}
                {plan.discount_percent > 0 && <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: '0.8125rem', color: 'var(--d-fg-2)' }}><Ico name="check" size={14} /> {plan.discount_percent}% desconto em reservas</div>}
                {plan.priority_booking === 1 && <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: '0.8125rem', color: 'var(--d-fg-2)' }}><Ico name="check" size={14} /> Reserva prioritária</div>}
                {parseBenefits(plan.benefits).map((b, i) => <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: '0.8125rem', color: 'var(--d-fg-2)' }}><Ico name="check" size={14} /> {b}</div>)}
              </div>
            </div>
            <div style={{ padding: '12px 16px 16px' }}>
              {mySubscriptions.some(s => s.PlanID === plan.id && s.Status === 'active') ? (
                <button className="pay-btn-outline" style={{ width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6, opacity: 0.7, cursor: 'default' }} disabled>
                  <Ico name="check" size={14} /> {_t('games.plan_subscribed') || 'Subscrito'}
                </button>
              ) : (
                <button className="pay-btn-primary" style={{ width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6 }}
                        disabled={submitting} onClick={() => handleSubscribe(plan)}>
                  {submitting ? <><span className="btn-spinner" /> {_t('webapp.game_processing')}</> : <><Ico name="wallet" size={14} /> {_t('webapp.game_subscribe')}</>}
                </button>
              )}
            </div>
          </div>
        );

        return (
        <>
          {/* My active subscriptions */}
          {mySubscriptions.length > 0 && (
            <div style={{ marginBottom: 20 }}>
              <div style={{ fontSize: '0.875rem', fontWeight: 600, marginBottom: 8, display: 'flex', alignItems: 'center', gap: 6 }}>
                <Ico name="check" size={14} /> {_t('games.my_subscriptions')}
              </div>
              {mySubscriptions.map(sub => (
                <div key={sub.ID} className="gm-card" style={{ borderLeft: `3px solid ${statusColor(sub.Status)}` }}>
                  <div className="gm-card-info" style={{ flex: 1 }}>
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                      <span className="gm-card-name">{sub.plan_name}</span>
                      <span style={{ fontSize: '0.625rem', padding: '2px 8px', borderRadius: 12, fontWeight: 600, background: statusColor(sub.Status) + '22', color: statusColor(sub.Status) }}>{statusLabel(sub.Status)}</span>
                    </div>
                    <div className="gm-card-sub" style={{ display: 'flex', gap: 12, flexWrap: 'wrap', marginTop: 4 }}>
                      <span>{_t('webapp.sub_start')}: {sub.StartDate}</span>
                      {sub.NextBillingDate && <span>{_t('webapp.sub_next')}: {sub.NextBillingDate}</span>}
                      {sub.BookingsIncluded > 0 && <span>{sub.BookingsUsed}/{sub.BookingsIncluded} reservas</span>}
                      <span style={{ fontWeight: 600 }}>{Number(sub.PricePaid).toLocaleString('pt')}$00</span>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          )}

          {/* Company filter chips */}
          {subscriptionPlansByCompany.length > 1 && (
            <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginBottom: 16 }}>
              <button className={`tk-tab ${!planCompanyFilter ? 'on' : ''}`} onClick={() => setPlanCompanyFilter('')} style={{ fontSize: '0.75rem', padding: '4px 12px' }}>
                <Ico name="grid" size={12} /> Todas
              </button>
              {subscriptionPlansByCompany.map(g => (
                <button key={g.company_hash} className={`tk-tab ${planCompanyFilter === g.company_hash ? 'on' : ''}`}
                        onClick={() => setPlanCompanyFilter(planCompanyFilter === g.company_hash ? '' : g.company_hash)}
                        style={{ fontSize: '0.75rem', padding: '4px 12px' }}>
                  <Ico name="building" size={12} /> {g.company_name}
                  <span style={{ fontSize: '0.625rem', background: 'var(--d-bg-surface-3, rgba(0,0,0,0.08))', padding: '1px 6px', borderRadius: 8, marginLeft: 4, color: 'var(--d-fg-3)' }}>{g.plans.length}</span>
                </button>
              ))}
            </div>
          )}

          {/* Plans grouped by company (collapsible) */}
          {filteredGroups.map(group => (
            <div key={group.company_hash} style={{ marginBottom: 16, border: '1px solid var(--d-border)', borderRadius: 16, overflow: 'hidden', background: 'var(--d-bg-surface)' }}>
              <button onClick={() => {
                const s = { ...expandedPlanCompanies }; s[group.company_hash] = !(s[group.company_hash] !== false); setExpandedPlanCompanies(s);
              }} style={{ width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '14px 16px', background: 'none', border: 'none', cursor: 'pointer', color: 'var(--d-fg-1)' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                  <Ico name="building" size={18} />
                  <span style={{ fontWeight: 600, fontSize: '0.9375rem', color: 'var(--d-fg-1)' }}>{group.company_name}</span>
                  <span style={{ fontSize: '0.6875rem', background: 'var(--d-bg-surface-3, #f0f0f0)', padding: '2px 8px', borderRadius: 10, color: 'var(--d-fg-3)' }}>{group.plans.length} plano{group.plans.length !== 1 ? 's' : ''}</span>
                </div>
                <Ico name={expandedPlanCompanies[group.company_hash] === false ? 'chevR' : 'chevD'} size={14} />
              </button>
              {expandedPlanCompanies[group.company_hash] !== false && (
                <div style={{ padding: '0 12px 12px', display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(260px, 1fr))', gap: 16 }}>
                  {group.plans.map(renderPlanCard)}
                </div>
              )}
            </div>
          ))}
          {subscriptionPlans.length === 0 && <div className="gm-empty">Nenhum plano disponível de momento.</div>}
        </>
        );
      })()}

      {/* CENTERS */}
      {tab === 'centers' && (
        <div>
          <div style={{ marginBottom: 16 }}>
            <h3 style={{ fontSize: '1rem', fontWeight: 700, margin: '0 0 4px', display: 'flex', alignItems: 'center', gap: 6 }}>
              <Ico name="building" size={16} /> {_t('games.centers_title')}
            </h3>
            <p style={{ fontSize: '0.8125rem', color: 'var(--nb-text-muted)', margin: 0 }}>{_t('games.centers_subtitle')}</p>
          </div>
          {centersLoading && (
            <div style={{ display: 'grid', gap: 12 }}>
              {[1,2].map(i => <div key={i} className="skeleton-pulse" style={{ height: 140, borderRadius: 16 }} />)}
            </div>
          )}
          {!centersLoading && centers.length === 0 && (
            <div className="gm-empty" style={{ textAlign: 'center', padding: '2rem' }}>
              <p style={{ color: 'var(--nb-text-muted)' }}>{_t('games.centers_no_results')}</p>
            </div>
          )}
          {!centersLoading && centers.length > 0 && (
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))', gap: 12 }}>
              {centers.map(c => {
                const initials = c.name ? c.name.split(' ').map(w => w[0]).join('').substring(0,2).toUpperCase() : '?';
                return (
                  <div key={c.hash} className="games-center-card" onClick={() => navigateToCenter(c.hash)}>
                    <div className="games-center-card__header">
                      <div className="games-center-card__logo" style={{ background: c.color || '#02A586' }}>
                        {c.logo ? <img src={c.logo} alt={c.name} referrerPolicy="no-referrer" /> : <span>{initials}</span>}
                      </div>
                      <div className="games-center-card__info">
                        <div className="games-center-card__name">{c.name}</div>
                        {c.location && (
                          <div className="games-center-card__location">
                            <Ico name="mapPin" size={12} /> {c.location}
                          </div>
                        )}
                        {!c.location && c.slogan && (
                          <div className="games-center-card__location" style={{ fontStyle: 'italic' }}>{c.slogan}</div>
                        )}
                      </div>
                    </div>
                    {c.sports && c.sports.length > 0 && (
                      <div className="games-center-card__sports">
                        {c.sports.slice(0,5).map(s => (
                          <span key={s.name} className="games-center-card__sport-chip">{s.name}</span>
                        ))}
                        {c.sports.length > 5 && <span className="games-center-card__sport-chip">+{c.sports.length - 5}</span>}
                      </div>
                    )}
                    <div className="games-center-card__stats">
                      <div className="games-center-card__stat">
                        <span className="games-center-card__stat-value">{c.tournaments || 0}</span>
                        <span className="games-center-card__stat-label">{_t('games.centers_tournaments')}</span>
                      </div>
                      <div className="games-center-card__stat">
                        <span className="games-center-card__stat-value">{c.venues || 0}</span>
                        <span className="games-center-card__stat-label">{_t('games.centers_venues')}</span>
                      </div>
                      <div className="games-center-card__stat">
                        <span className="games-center-card__stat-value">{c.athletes || 0}</span>
                        <span className="games-center-card__stat-label">{_t('games.centers_athletes')}</span>
                      </div>
                    </div>
                    <div className="games-center-card__actions" onClick={e => e.stopPropagation()}>
                      <button className="games-center-card__btn games-center-card__btn--primary" onClick={() => navigateToCenter(c.hash)}>
                        {_t('games.centers_visit')}
                      </button>
                      {(c.phone || c.email) && (
                        <button className="games-center-card__btn games-center-card__btn--outline" onClick={() => contactCenter(c)}>
                          {_t('games.centers_contact')}
                        </button>
                      )}
                    </div>
                  </div>
                );
              })}
            </div>
          )}
        </div>
      )}

      {/* MODAL: Booking Confirmation with QR Code / Payment */}
      {bookingConfirmation && (() => {
        const d = bookingConfirmation;
        const code = d.booking_code || '—';
        const qrUrl = `https://api.qrserver.com/v1/create-qr-code/?size=180x180&data=${encodeURIComponent(code)}`;
        const needsPayment = d.is_paid === false && d.total_raw > 0;
        return (
          <div className="modal-overlay" onClick={() => setBookingConfirmation(null)}>
            <div className="modal-dialog" onClick={e => e.stopPropagation()} style={{ maxWidth: 400, textAlign: 'center' }}>
              <div style={{ padding: '28px 24px 24px' }}>
                <div style={{ width: 56, height: 56, borderRadius: '50%', background: needsPayment ? 'rgba(239,68,68,0.12)' : 'rgba(2,165,134,0.12)', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 12px' }}>
                  <Ico name={needsPayment ? 'wallet' : 'check'} size={28} />
                </div>
                <h3 style={{ margin: '0 0 4px', fontSize: '1.125rem', fontWeight: 700 }}>{needsPayment ? _t('webapp.game_payment_pending') : 'Reserva Confirmada!'}</h3>
                <p style={{ fontSize: '0.8125rem', color: 'var(--d-fg-3)', margin: '0 0 16px' }}>{needsPayment ? _t('webapp.game_payment_pending_desc') : 'Apresenta este código na recepção'}</p>

                {!needsPayment && (
                  <div style={{ background: 'var(--d-bg-surface-3)', borderRadius: 16, padding: 20, marginBottom: 16 }}>
                    <img src={qrUrl} alt={`QR ${code}`} style={{ width: 140, height: 140, borderRadius: 8, marginBottom: 10 }} />
                    <div style={{ fontSize: '1.5rem', fontWeight: 800, letterSpacing: 3, color: 'var(--d-fg-1)', fontFamily: 'monospace' }}>{code}</div>
                  </div>
                )}

                <div style={{ textAlign: 'left', border: '1px solid var(--d-border)', borderRadius: 12, padding: '12px 16px', fontSize: '0.8125rem', marginBottom: 16 }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 4 }}><span style={{ color: 'var(--d-fg-3)' }}>Campo</span><strong>{d.venue_name || ''}</strong></div>
                  <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 4 }}><span style={{ color: 'var(--d-fg-3)' }}>Data</span><strong>{d.date || ''}</strong></div>
                  <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 4 }}><span style={{ color: 'var(--d-fg-3)' }}>Horário</span><strong>{d.start_time || ''} — {d.end_time || ''}</strong></div>
                  <div style={{ display: 'flex', justifyContent: 'space-between' }}><span style={{ color: 'var(--d-fg-3)' }}>Valor</span><strong>{d.total || 'Gratuito'}</strong></div>
                </div>

                {d.subscription_used && (
                  <div style={{ background: 'rgba(2,165,134,0.08)', borderRadius: 10, padding: '8px 12px', fontSize: '0.75rem', color: 'var(--nb-green)', fontWeight: 600, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6, marginBottom: 12 }}>
                    <Ico name="wallet" size={14} /> Crédito do plano · {d.subscription_credits_remaining ?? '?'} restantes
                  </div>
                )}

                {d.points_earned > 0 && (
                  <div style={{ background: 'rgba(245,158,11,0.08)', borderRadius: 10, padding: '8px 12px', fontSize: '0.75rem', color: '#d97706', fontWeight: 600, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6, marginBottom: 12 }}>
                    <Ico name="star" size={14} /> +{d.points_earned} pontos ganhos!
                  </div>
                )}

                {needsPayment ? (
                  <div style={{ display: 'flex', gap: 10 }}>
                    <button className="pay-btn-secondary" style={{ flex: 1 }} onClick={() => setBookingConfirmation(null)}>{_t('games.close')}</button>
                    <button className="pay-btn-primary" style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6 }} disabled={submitting} onClick={() => payBooking(d)}>
                      <Ico name="lock" size={14} /> {submitting ? _t('games.processing') : _t('webapp.game_pay_now')}
                    </button>
                  </div>
                ) : (
                  <div style={{ display: 'flex', gap: 8 }}>
                    {d.payment_transaction_id && (
                      <button className="pay-btn-outline" style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6 }} onClick={() => openReceiptByTxId(d.payment_transaction_id)}>
                        <Ico name="receipt" size={14} /> {_t('webapp.apt_receipt') || 'Ver recibo'}
                      </button>
                    )}
                    <button className="pay-btn-primary" style={{ flex: 1 }} onClick={() => { setBookingConfirmation(null); if (playerId) gApi('/my-points', { player_id: playerId }).then(r => { if (r.message === 'success') setMyPoints(r.data); }); }}>OK</button>
                  </div>
                )}
              </div>
            </div>
          </div>
        );
      })()}

      {/* MODAL: Register Team in Tournament */}
      {modal === 'registerTeam' && regTournament && (() => {
        const registeredIds = (regTournament.registered_teams || []).map(t => t.id);
        const available = myTeams.filter(t => !registeredIds.includes(t.ID));
        return (
          <div className="modal-overlay" onClick={() => { setModal(null); setRegTournament(null); }}>
            <div className="modal-dialog" onClick={e => e.stopPropagation()} style={{ maxWidth: 420 }}>
              <div className="modal-header"><h3>{_t('games.register_team')}</h3><button className="modal-close" onClick={() => { setModal(null); setRegTournament(null); }}>&times;</button></div>
              <div className="modal-body">
                <div className="pay-form-header" style={{ borderLeft: `3px solid ${regTournament.color || 'var(--nb-green)'}` }}>
                  <Ico name="trophy" size={18} />
                  <div>
                    <div style={{ fontWeight: 600, fontSize: '0.875rem' }}>{regTournament.name}</div>
                    <div style={{ fontSize: '0.75rem', color: 'var(--d-fg-3)' }}>{regTournament.sport_name} · {regTournament.date}</div>
                  </div>
                </div>
                {regTournament.fee_raw > 0 && (() => {
                  const tFee = platformFees?.games_tournament_platform_fee || 0;
                  return (
                    <div style={{ marginTop: 8, marginBottom: 8, padding: '10px 12px', borderRadius: 10, background: 'var(--d-bg-2)', border: '1px solid var(--d-border-1)', fontSize: 13 }}>
                      <div style={{ display: 'flex', justifyContent: 'space-between' }}><span>Inscrição</span><span>{regTournament.fee}</span></div>
                      {tFee > 0 && <div style={{ display: 'flex', justifyContent: 'space-between', color: 'var(--d-fg-3)' }}><span>Taxa de serviço</span><span>{tFee}$00</span></div>}
                      <div style={{ display: 'flex', justifyContent: 'space-between', fontWeight: 700, borderTop: '1px solid var(--d-border-1)', marginTop: 4, paddingTop: 4 }}>
                        <span>Total</span><span style={{ color: 'var(--nb-green)' }}>{(regTournament.fee_raw + tFee).toLocaleString('pt')}$00</span>
                      </div>
                      <div className="pay-security-note" style={{ marginTop: 6, padding: 0, border: 'none', background: 'none' }}>
                        <Ico name="lock" size={12} /> {_t('games.payment_via_sisp')}
                      </div>
                    </div>
                  );
                })()}
                <label className="pay-label">{_t('games.select_team')}</label>
                {available.length <= 3 ? (
                  <div className="pay-presets">
                    {available.map(t => (
                      <button key={t.ID} className={`pay-preset ${regSelectedTeam === String(t.ID) ? 'pay-preset--on' : ''}`}
                        onClick={() => setRegSelectedTeam(String(t.ID))}>
                        <span style={{ display: 'inline-block', width: 10, height: 10, borderRadius: '50%', background: t.Color || '#666', marginRight: 4 }} />
                        {t.Name}
                      </button>
                    ))}
                  </div>
                ) : (
                  <select className="pay-input" value={regSelectedTeam} onChange={e => setRegSelectedTeam(e.target.value)}>
                    <option value="">{_t('games.select_team')}...</option>
                    {available.map(t => <option key={t.ID} value={t.ID}>{t.Name}</option>)}
                  </select>
                )}
                {available.length === 0 && <p style={{ color: 'var(--d-fg-3)', fontSize: '0.8125rem', marginTop: 8 }}>{_t('games.all_teams_registered')}</p>}
              </div>
              <div className="pay-form-actions" style={{ padding: '0 1rem 1rem' }}>
                <button className="pay-btn-outline" onClick={() => { setModal(null); setRegTournament(null); }}>{_t('games.cancel')}</button>
                <button className="pay-btn-primary" onClick={confirmRegisterTeam} disabled={submitting || !regSelectedTeam}>
                  {submitting ? <><span className="btn-spinner" /> {_t('games.processing')}</> : regTournament.fee_raw > 0 ? <><Ico name="lock" size={14} /> {_t('games.pay_and_register')}</> : _t('games.confirm_registration')}
                </button>
              </div>
            </div>
          </div>
        );
      })()}

      {/* MODAL: Booking */}
      {modal === 'booking' && selectedVenue && (
        <div className="modal-overlay" onClick={() => setModal(null)}>
          <div className="modal-dialog" onClick={e => e.stopPropagation()} style={{ maxWidth: 420 }}>
            <div className="modal-header"><h3>{_t('games.book')} {selectedVenue.name}</h3><button className="modal-close" onClick={() => setModal(null)}>&times;</button></div>
            <div className="modal-body">
              <label className="pay-label">{_t('games.lbl_date')}</label>
              <input className="pay-input" type="date" value={bookingDate} onChange={e => { setBookingDate(e.target.value); if (e.target.value) loadSlots(selectedVenue.id, e.target.value); }} />
              {timeSlots.length > 0 && (<>
                <label className="pay-label" style={{ marginTop: 12 }}>{_t('games.lbl_time')}</label>
                <div className="pay-presets">{timeSlots.map(s => (
                  <button key={s.time} className={`pay-preset ${bookingTime === s.time ? 'pay-preset--on' : ''}`} disabled={!s.available} style={!s.available ? { opacity: 0.4 } : {}} onClick={() => setBookingTime(s.time)}>
                    {s.time}{s.price ? <span style={{ display:'block', fontSize:'0.65rem', opacity:0.7 }}>{s.price.toLocaleString('pt')}$</span> : null}
                  </button>
                ))}</div>
              </>)}
              <label className="pay-label" style={{ marginTop: 12 }}>{_t('games.lbl_duration')}</label>
              <div className="pay-presets">
                {[1, 1.5, 2].map(d => <button key={d} className={`pay-preset ${bookingDuration === d ? 'pay-preset--on' : ''}`} onClick={() => setBookingDuration(d)}>{d}h</button>)}
              </div>
              {bookingHourlyRate > 0 && (
                <div style={{ marginTop: 12 }}>
                  <p style={{ fontWeight: 600, color: 'var(--d-fg-2)', fontSize: 13, margin: 0 }}>{bookingHourlyRate.toLocaleString('pt')}$00 × {bookingDuration}h = {bookingTotal.toLocaleString('pt')}$00</p>
                  {(platformFees?.games_booking_platform_fee || 0) > 0 && <p style={{ fontWeight: 500, color: 'var(--d-fg-3)', fontSize: 12, margin: '2px 0 0' }}>Taxa de serviço: {platformFees.games_booking_platform_fee}$00</p>}
                  <p style={{ fontWeight: 700, color: 'var(--nb-green)', fontSize: 15, margin: '4px 0 0' }}>Total: {(bookingTotal + (platformFees?.games_booking_platform_fee || 0)).toLocaleString('pt')}$00</p>
                </div>
              )}

              {/* Subscription credit notice */}
              {getActiveSubscription() && bookingHourlyRate > 0 && (
                <div style={{ background: 'rgba(2,165,134,0.08)', borderRadius: 12, padding: '10px 14px', marginTop: 8, display: 'flex', alignItems: 'center', gap: 10 }}>
                  <Ico name="wallet" size={20} />
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: '0.8125rem', fontWeight: 600, color: 'var(--nb-green)' }}>Plano activo — reserva gratuita</div>
                    <div style={{ fontSize: '0.75rem', color: 'var(--d-fg-3)' }}>{getActiveSubscription().credits_remaining} créditos restantes de {getActiveSubscription().BookingsIncluded}</div>
                  </div>
                </div>
              )}
              {!getActiveSubscription() && getSubscriptionWithDiscount() && bookingHourlyRate > 0 && (
                <div style={{ background: 'rgba(168,85,247,0.08)', borderRadius: 12, padding: '10px 14px', marginTop: 8, display: 'flex', alignItems: 'center', gap: 10 }}>
                  <Ico name="tag" size={20} />
                  <div>
                    <div style={{ fontSize: '0.8125rem', fontWeight: 600, color: '#a855f7' }}>{getSubscriptionWithDiscount().discount_percent}% desconto aplicado</div>
                    <div style={{ fontSize: '0.75rem', color: 'var(--d-fg-3)' }}>Créditos esgotados — desconto do plano</div>
                  </div>
                </div>
              )}
            </div>
            <p style={{ fontSize: '0.7rem', color: 'var(--d-fg-3)', margin: '0 1rem 8px', lineHeight: 1.4 }}>
              Ao confirmar, concordas com os{' '}
              <a href="termos" target="_blank" style={{ color: 'var(--nb-green)', fontWeight: 600 }}>Termos de Utilização</a>
              {' '}e a{' '}
              <a href="privacidade" target="_blank" style={{ color: 'var(--nb-green)', fontWeight: 600 }}>Política de Privacidade</a>
              {' '}da NHABEX.
            </p>
            <div className="pay-form-actions" style={{ padding: '0 1rem 1rem' }}>
              <button className="pay-btn-outline" onClick={() => setModal(null)}>{_t('games.cancel')}</button>
              <button className="pay-btn-primary" onClick={confirmBooking} disabled={submitting || !bookingDate || !bookingTime}>
                {submitting ? <><span className="btn-spinner" /> {_t('games.booking_processing')}</> : (getActiveSubscription() ? 'Usar Crédito do Plano' : _t('games.confirm_booking'))}
              </button>
            </div>
          </div>
        </div>
      )}

      {/* MODAL: Create Training (2 steps) */}
      {modal === 'createTraining' && (
        <div className="modal-overlay" onClick={() => setModal(null)}>
          <div className="modal-dialog" onClick={e => e.stopPropagation()} style={{ maxWidth: 620, maxHeight: '85vh', overflowY: 'auto' }}>
            <div className="modal-header">
              <h3>{trainingStep === 1 ? _t('games.training_config') : _t('games.field_booking')}</h3>
              <button className="modal-close" onClick={() => setModal(null)}>&times;</button>
            </div>

            {/* Stepper */}
            <div className="pay-steps" style={{ padding: '0.25rem 1rem' }}>
              {[{ n: 1, l: _t('games.configuration') }, { n: 2, l: _t('games.field_and_schedule') }].map(s => (
                <div key={s.n} className={`pay-step ${trainingStep === s.n ? 'pay-step--active' : ''} ${trainingStep > s.n ? 'pay-step--done' : ''}`}>
                  <div className="pay-step-circle">{trainingStep > s.n ? <Ico name="check" size={12} /> : s.n}</div>
                  <span className="pay-step-label">{s.l}</span>
                </div>
              ))}
            </div>

            <div className="modal-body">
              {/* ── STEP 1: Training config ── */}
              {trainingStep === 1 && (<>
                <label className="pay-label">{_t('games.sport_modality')}</label>
                <select className="pay-input" value={newTraining.sport} onChange={e => {
                  const sportId = e.target.value;
                  setNewTraining(f => {
                    const currentVenue = venues.find(v => v.id == f.venue);
                    const venueOk = !currentVenue || !currentVenue.sport_id || currentVenue.sport_id == sportId;
                    return { ...f, sport: sportId, venue: venueOk ? f.venue : '', weeklySchedule: venueOk ? f.weeklySchedule : [] };
                  });
                  setVenueSchedule(null);
                }}>
                  <option value="">{_t('games.select')}...</option>
                  {sports.map(s => <option key={s.ID} value={s.ID}>{s.Name}</option>)}
                </select>

                <label className="pay-label" style={{ marginTop: 12 }}>{_t('games.training_name')}</label>
                <input className="pay-input" value={newTraining.title} onChange={e => setNewTraining(f => ({ ...f, title: e.target.value }))} placeholder={_t('webapp.pay_training_placeholder')} />

                <div style={{ display: 'flex', gap: 8, marginTop: 12 }}>
                  <div style={{ flex: 1 }}><label className="pay-label">{_t('games.lbl_start_date')}</label><input className="pay-input" type="date" value={newTraining.date} onChange={e => setNewTraining(f => ({ ...f, date: e.target.value }))} /></div>
                  <div style={{ flex: 1 }}><label className="pay-label">{_t('games.lbl_end_date')}</label><input className="pay-input" type="date" value={newTraining.endDate || ''} onChange={e => setNewTraining(f => ({ ...f, endDate: e.target.value }))} /></div>
                </div>

                <label className="pay-label" style={{ marginTop: 16 }}>{_t('games.enrollment_type')}</label>
                <div className="pay-presets">
                  <button className={`pay-preset ${newTraining.enrollmentType === 'open' ? 'pay-preset--on' : ''}`} onClick={() => setNewTraining(f => ({ ...f, enrollmentType: 'open' }))}>{_t('games.open')}</button>
                  <button className={`pay-preset ${newTraining.enrollmentType === 'closed' ? 'pay-preset--on' : ''}`} onClick={() => setNewTraining(f => ({ ...f, enrollmentType: 'closed' }))}>{_t('games.closed_invites')}</button>
                </div>

                <label className="pay-label" style={{ marginTop: 16 }}>{_t('games.payment_mode')}</label>
                <div className="pay-presets">
                  <button className={`pay-preset ${newTraining.paymentMode === 'daily' ? 'pay-preset--on' : ''}`} onClick={() => setNewTraining(f => ({ ...f, paymentMode: 'daily' }))}>{_t('games.daily')}</button>
                  <button className={`pay-preset ${newTraining.paymentMode === 'monthly' ? 'pay-preset--on' : ''}`} onClick={() => setNewTraining(f => ({ ...f, paymentMode: 'monthly' }))}>{_t('games.monthly')}</button>
                </div>

                {newTraining.paymentMode === 'daily' && (
                  <div style={{ marginTop: 12 }}><label className="pay-label">{_t('games.daily_price')}</label><input className="pay-input" type="number" min="0" step="1" value={newTraining.dailyPrice} onChange={e => setNewTraining(f => ({ ...f, dailyPrice: e.target.value }))} placeholder="0 = grátis" /></div>
                )}
                {newTraining.paymentMode === 'monthly' && (
                  <div style={{ marginTop: 12 }}><label className="pay-label">{_t('games.monthly_price')}</label><input className="pay-input" type="number" min="0" step="1" value={newTraining.monthlyPrice} onChange={e => setNewTraining(f => ({ ...f, monthlyPrice: e.target.value }))} placeholder="0 = grátis" /></div>
                )}

                <label className="pay-label" style={{ marginTop: 12 }}>{_t('games.max_capacity')}</label>
                <input className="pay-input" type="number" min="2" max="100" value={newTraining.maxPlayers} onChange={e => setNewTraining(f => ({ ...f, maxPlayers: parseInt(e.target.value) || 10 }))} />

                <label className="pay-label" style={{ marginTop: 12 }}>{_t('games.description_rules')}</label>
                <textarea className="pay-input" rows={2} value={newTraining.notes} onChange={e => setNewTraining(f => ({ ...f, notes: e.target.value }))} style={{ resize: 'vertical' }} />
              </>)}

              {/* ── STEP 2: Venue + schedule ── */}
              {trainingStep === 2 && (<>
                <label className="pay-label">{_t('games.venue_field')}</label>
                <select className="pay-input" value={newTraining.venue || ''} onChange={e => {
                  const venueId = e.target.value;
                  setNewTraining(f => ({ ...f, venue: venueId, weeklySchedule: [] }));
                  setVenueSchedule(null);
                  if (venueId) {
                    gApi(`/venues/${venueId}/schedule`).then(r => {
                      if (r.message === 'success') {
                        setVenueSchedule(r.data);
                        if (r.data.slots?.length > 0) {
                          const first = r.data.slots[0];
                          setNewTraining(f => ({ ...f, time: f.time || first.start, endTime: f.endTime || first.end }));
                        }
                      }
                    }).catch(() => {});
                  }
                }}>
                  <option value="">{_t('games.no_field_later')}</option>
                  {venues.filter(v => {
                    if (!newTraining.sport) return true;
                    const sid = parseInt(newTraining.sport);
                    if (v.sport_ids?.length > 0) return v.sport_ids.includes(sid);
                    if (v.sport_id) return v.sport_id === sid;
                    return true;
                  }).map(v => <option key={v.id} value={v.id}>{v.name}{v.price ? ` — ${v.price}` : ' — Grátis'}</option>)}
                </select>

                {/* Venue-based schedule */}
                {venueSchedule ? (<>
                  <label className="pay-label" style={{ marginTop: 16 }}>{_t('games.available_days_times')}</label>
                  {venueSchedule.slots.length === 0 && <p style={{ fontSize: '0.75rem', color: 'var(--d-fg-3)' }}>{_t('games.no_schedule')}</p>}
                  <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
                    {[_t('webapp.day_sun_short'),_t('webapp.day_mon_short'),_t('webapp.day_tue_short'),_t('webapp.day_wed_short'),_t('webapp.day_thu_short'),_t('webapp.day_fri_short'),_t('webapp.day_sat_short')].map((dayLabel, dayIdx) => {
                      const daySlots = venueSchedule.slots.filter(s => s.day === dayIdx);
                      if (daySlots.length === 0) return null;
                      const selected = (newTraining.weeklySchedule || []).find(s => s.day === dayIdx);
                      return (
                        <div key={dayIdx} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '0.5rem 0.625rem', borderRadius: '0.5rem', background: selected ? 'rgba(2,165,134,0.08)' : 'var(--d-bg-surface)', border: '1px solid ' + (selected ? 'var(--nb-green)' : 'var(--d-border)'), cursor: 'pointer', transition: 'all 120ms' }}
                          onClick={() => setNewTraining(f => {
                            const ws = [...(f.weeklySchedule || [])];
                            const idx = ws.findIndex(s => s.day === dayIdx);
                            if (idx >= 0) ws.splice(idx, 1);
                            else ws.push({ day: dayIdx, start: daySlots[0].start, end: daySlots[0].end });
                            return { ...f, weeklySchedule: ws, time: ws[0]?.start || f.time, endTime: ws[0]?.end || f.endTime };
                          })}>
                          <span style={{ fontWeight: 600, fontSize: '0.875rem', color: selected ? 'var(--nb-green)' : 'var(--d-fg-1)', minWidth: 32 }}>{dayLabel}</span>
                          {daySlots.length === 1 ? (
                            <span style={{ fontSize: '0.8125rem', color: 'var(--d-fg-2)', flex: 1 }}>{daySlots[0].start} - {daySlots[0].end}</span>
                          ) : (
                            <select className="pay-input" style={{ flex: 1, padding: '0.1875rem 0.375rem', fontSize: '0.75rem' }}
                              value={selected ? `${selected.start}-${selected.end}` : ''} onClick={e => e.stopPropagation()}
                              onChange={e => { e.stopPropagation();
                                const [start, end] = e.target.value.split('-');
                                setNewTraining(f => {
                                  const ws = [...(f.weeklySchedule || [])];
                                  const idx = ws.findIndex(s => s.day === dayIdx);
                                  if (idx >= 0) ws[idx] = { ...ws[idx], start, end };
                                  else ws.push({ day: dayIdx, start, end });
                                  return { ...f, weeklySchedule: ws, time: ws[0]?.start || f.time, endTime: ws[0]?.end || f.endTime };
                                });
                              }}>
                              {daySlots.map((s, si) => <option key={si} value={`${s.start}-${s.end}`}>{s.start} - {s.end}</option>)}
                            </select>
                          )}
                          {selected && <Ico name="check" size={16} />}
                        </div>
                      );
                    })}
                  </div>

                  {venueSchedule.venue_price > 0 ? (
                    <div className="pay-security-note" style={{ marginTop: 12 }}>
                      <Ico name="wallet" size={14} /> {_t('games.field_price')}: <strong>{venueSchedule.venue_price.toLocaleString('pt')} CVE/hora</strong>
                    </div>
                  ) : (
                    <div className="pay-security-note" style={{ marginTop: 12, background: 'rgba(34,197,94,0.06)', color: '#22c55e' }}>
                      <Ico name="check" size={14} /> {_t('games.free_field')}
                    </div>
                  )}
                </>) : !newTraining.venue ? (<>
                  {/* No venue — manual time/days */}
                  <div style={{ display: 'flex', gap: 8, marginTop: 12 }}>
                    <div style={{ flex: 1 }}><label className="pay-label">{_t('games.lbl_start_time')}</label><input className="pay-input" type="time" value={newTraining.time} onChange={e => setNewTraining(f => ({ ...f, time: e.target.value }))} /></div>
                    <div style={{ flex: 1 }}><label className="pay-label">{_t('games.lbl_end_time')}</label><input className="pay-input" type="time" value={newTraining.endTime || ''} onChange={e => setNewTraining(f => ({ ...f, endTime: e.target.value }))} /></div>
                  </div>
                  <label className="pay-label" style={{ marginTop: 12 }}>{_t('games.weekdays')}</label>
                  <div className="pay-presets">
                    {[_t('webapp.day_sun_short'),_t('webapp.day_mon_short'),_t('webapp.day_tue_short'),_t('webapp.day_wed_short'),_t('webapp.day_thu_short'),_t('webapp.day_fri_short'),_t('webapp.day_sat_short')].map((d, i) => (
                      <button key={i} className={`pay-preset ${(newTraining.weeklySchedule || []).some(s => s.day === i) ? 'pay-preset--on' : ''}`}
                        onClick={() => setNewTraining(f => {
                          const ws = [...(f.weeklySchedule || [])];
                          const idx = ws.findIndex(s => s.day === i);
                          if (idx >= 0) ws.splice(idx, 1);
                          else ws.push({ day: i, start: f.time || '18:00', end: f.endTime || '19:30' });
                          return { ...f, weeklySchedule: ws };
                        })}>{d}</button>
                    ))}
                  </div>
                </>) : (
                  <div style={{ padding: 20, textAlign: 'center', color: 'var(--d-fg-3)' }}>{_t('games.loading_availability')}</div>
                )}

                {/* Summary */}
                {(newTraining.weeklySchedule || []).length > 0 && (
                  <div style={{ marginTop: 12, padding: '0.625rem', background: 'rgba(2,165,134,0.04)', borderRadius: '0.5rem', fontSize: '0.75rem', color: 'var(--d-fg-2)' }}>
                    <strong style={{ color: 'var(--d-fg-1)' }}>{_t('games.summary')}:</strong> {newTraining.title || 'Treino'} · {(newTraining.weeklySchedule || []).map(s => ['Dom','Seg','Ter','Qua','Qui','Sex','Sáb'][s.day] + ' ' + s.start).join(', ')}
                    {newTraining.date && ` · A partir de ${newTraining.date}`}
                  </div>
                )}
              </>)}
            </div>

            {/* Actions */}
            <div className="pay-form-actions" style={{ padding: '0 1rem 1rem' }}>
              {trainingStep === 1 ? (<>
                <button className="pay-btn-outline" onClick={() => setModal(null)}>{_t('games.cancel')}</button>
                <button className="pay-btn-primary" onClick={() => {
                  if (!newTraining.sport || !newTraining.title || !newTraining.date) { addToast && addToast(_t('games.fill_training_fields'), 'warning'); return; }
                  setTrainingStep(2);
                }}>{_t('games.next')} <Ico name="chevR" size={14} /></button>
              </>) : (<>
                <button className="pay-btn-outline" onClick={() => setTrainingStep(1)}><Ico name="arrowL" size={14} /> {_t('games.back')}</button>
                <button className="pay-btn-primary" onClick={submitTraining} disabled={submitting}>{submitting ? <><span className="btn-spinner" /> {_t('games.creating')}</> : _t('games.create_training')}</button>
              </>)}
            </div>
          </div>
        </div>
      )}

      {/* MODAL: Create Team */}
      {modal === 'createTeam' && (
        <div className="modal-overlay" onClick={() => setModal(null)}>
          <div className="modal-dialog" onClick={e => e.stopPropagation()} style={{ maxWidth: 420 }}>
            <div className="modal-header"><h3>{_t('games.create_team')}</h3><button className="modal-close" onClick={() => setModal(null)}>&times;</button></div>
            <div className="modal-body">
              <label className="pay-label">{_t('games.team_name')}</label>
              <input className="pay-input" value={newTeam.name} onChange={e => setNewTeam(f => ({ ...f, name: e.target.value }))} placeholder={_t('webapp.pay_team_placeholder')} />
              <label className="pay-label" style={{ marginTop: 12 }}>{_t('games.sport_modality')}</label>
              <select className="pay-input" value={newTeam.sport} onChange={e => setNewTeam(f => ({ ...f, sport: e.target.value }))}>
                <option value="">{_t('games.select')}...</option>
                {sports.map(s => <option key={s.ID} value={s.ID}>{s.Name}</option>)}
              </select>
              <label className="pay-label" style={{ marginTop: 12 }}>{_t('games.color')}</label>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, padding: '4px 0' }}>
                {['#1565c0','#c62828','#2e7d32','#e65100','#4a148c','#00695c','#ad1457','#bf360c','#00838f','#f57f17'].map(c => (
                  <button key={c} type="button" onClick={() => setNewTeam(f => ({ ...f, color: c }))}
                    aria-label={`Cor ${c}`} aria-pressed={newTeam.color === c}
                    style={{
                      width: 36, height: 36, borderRadius: '50%', padding: 0, cursor: 'pointer',
                      background: c, color: '#fff',
                      border: newTeam.color === c ? '3px solid var(--d-fg-1)' : '3px solid transparent',
                      boxShadow: newTeam.color === c ? `0 0 0 2px ${c}, 0 2px 8px rgba(0,0,0,0.25)` : 'none',
                      transform: newTeam.color === c ? 'scale(1.15)' : 'scale(1)',
                      transition: 'all 150ms ease',
                      display: 'flex', alignItems: 'center', justifyContent: 'center',
                    }}>
                    {newTeam.color === c && <Ico name="check" size={16} />}
                  </button>
                ))}
              </div>
            </div>
            <div className="pay-form-actions" style={{ padding: '0 1rem 1rem' }}>
              <button className="pay-btn-outline" onClick={() => setModal(null)}>{_t('games.cancel')}</button>
              <button className="pay-btn-primary" onClick={submitTeam} disabled={submitting}>{submitting ? <><span className="btn-spinner" /> {_t('games.creating')}</> : _t('games.create_team')}</button>
            </div>
          </div>
        </div>
      )}

      {/* MODAL: Athlete Registration */}
      {modal === 'registerAthlete' && (
        <div className="modal-overlay" onClick={() => setModal(null)}>
          <div className="modal-dialog" onClick={e => e.stopPropagation()} style={{ maxWidth: 420 }}>
            <div className="modal-header"><h3>{_t('games.athlete_registration')}</h3><button className="modal-close" onClick={() => setModal(null)}>&times;</button></div>
            <div className="modal-body">
              {regStep === 1 && (<>
                <label className="pay-label">{_t('games.nickname')}</label>
                <input className="pay-input" value={regForm.nickname} onChange={e => setRegForm(f => ({ ...f, nickname: e.target.value }))} placeholder={_t('webapp.pay_nickname_placeholder')} />
                <label className="pay-label" style={{ marginTop: 12 }}>{_t('games.level')}</label>
                <div className="pay-presets">
                  {[{ id: 'beginner', l: _t('games.level_beginner') }, { id: 'intermediate', l: _t('games.level_intermediate') }, { id: 'advanced', l: _t('games.level_advanced') }].map(lv => (
                    <button key={lv.id} className={`pay-preset ${regForm.level === lv.id ? 'pay-preset--on' : ''}`} onClick={() => setRegForm(f => ({ ...f, level: lv.id }))}>{lv.l}</button>
                  ))}
                </div>
                <button className="pay-btn-primary" style={{ width: '100%', justifyContent: 'center', marginTop: 16 }} onClick={() => setRegStep(2)} disabled={!signedIn}>
                  {signedIn ? _t('games.next') : _t('games.login_first')}
                </button>
              </>)}
              {regStep === 2 && (<>
                <label className="pay-label">{_t('games.select_sports')}</label>
                <div className="pay-presets" style={{ marginBottom: 12 }}>
                  {sports.map(s => (
                    <button key={s.ID} className={`pay-preset ${regForm.sports.includes(s.ID) ? 'pay-preset--on' : ''}`} onClick={() => toggleRegSport(s.ID)}>{s.Name}</button>
                  ))}
                </div>
                {regForm.sports.length > 1 && (<>
                  <label className="pay-label">{_t('games.preferred_sport')}</label>
                  <select className="pay-input" value={regForm.preferredSport} onChange={e => setRegForm(f => ({ ...f, preferredSport: e.target.value }))}>
                    {regForm.sports.map(sid => { const sp = sports.find(s => s.ID === sid); return <option key={sid} value={sid}>{sp?.Name || sid}</option>; })}
                  </select>
                </>)}
                <div className="pay-form-actions" style={{ marginTop: 16 }}>
                  <button className="pay-btn-outline" onClick={() => setRegStep(1)}>{_t('games.back')}</button>
                  <button className="pay-btn-primary" onClick={submitRegistration} disabled={submitting || regForm.sports.length === 0}>{submitting ? <><span className="btn-spinner" /> {_t('games.processing')}</> : _t('games.confirm_registration')}</button>
                </div>
              </>)}
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

// ─── Order Updates Modal (shown on app entry when tracked orders changed status) ──
function OrderUpdatesModal({ updates, onClose, onViewOrder }) {
  if (!updates || updates.length === 0) return null;

  const st = (status) => {
    const map = {
      pending:    { icon: 'clock',    color: '#f59e0b', label: _t('webapp.track_pending') },
      processing: { icon: 'package',  color: '#3b82f6', label: _t('webapp.track_processing') },
      ready:      { icon: 'boxCheck', color: '#22c55e', label: _t('webapp.track_ready') },
      delivered:  { icon: 'truck',    color: '#02A586', label: _t('webapp.track_delivered') },
      cancelled:  { icon: 'cross',    color: '#ef4444', label: _t('webapp.track_cancelled') },
    };
    return map[status] || map.pending;
  };

  const completed = updates.filter(o => o.status === 'ready' || o.status === 'delivered');
  const others = updates.filter(o => o.status !== 'ready' && o.status !== 'delivered');

  return (
    <div className="modal-overlay" onClick={onClose} style={{ zIndex: 100001 }}>
      <div className="modal-dialog" onClick={e => e.stopPropagation()} style={{ maxWidth: 440, padding: 0, overflow: 'hidden' }}>
        {/* Header */}
        <div style={{ background: 'linear-gradient(135deg, #02A586, #028a6f)', padding: '20px 24px', color: '#fff' }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <div style={{ width: 36, height: 36, borderRadius: 10, background: 'rgba(255,255,255,0.2)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <Ico name="bell" size={18} />
              </div>
              <div>
                <div style={{ fontSize: 16, fontWeight: 700 }}>{_t('webapp.order_updates_title')}</div>
                <div style={{ fontSize: 12, opacity: 0.85 }}>{updates.length === 1 ? _t('webapp.order_updates_single') : _t('webapp.order_updates_count').replace(':count', updates.length)}</div>
              </div>
            </div>
            <button onClick={onClose} style={{ background: 'rgba(255,255,255,0.2)', border: 'none', color: '#fff', width: 28, height: 28, borderRadius: 8, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 16 }}>&times;</button>
          </div>
        </div>

        {/* Orders list */}
        <div style={{ padding: '16px 20px', maxHeight: 400, overflowY: 'auto' }}>
          {/* Completed orders highlighted */}
          {completed.length > 0 && (
            <div style={{ marginBottom: others.length > 0 ? 16 : 0 }}>
              {completed.map(order => {
                const s = st(order.status);
                return (
                  <div key={order.id} style={{ padding: '14px 16px', borderRadius: 12, border: `2px solid ${s.color}30`, background: `${s.color}08`, marginBottom: 8, cursor: 'pointer' }} onClick={() => { onClose(); onViewOrder(order); }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                      <div style={{ width: 40, height: 40, borderRadius: 10, background: `${s.color}20`, color: s.color, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                        <Ico name={s.icon} size={18} />
                      </div>
                      <div style={{ flex: 1, minWidth: 0 }}>
                        <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
                          <span style={{ fontWeight: 700, fontSize: 14, color: 'var(--d-fg-1)' }}>#{order.code}</span>
                          <span style={{ fontSize: 11, fontWeight: 600, padding: '2px 8px', borderRadius: 6, color: s.color, background: `${s.color}18` }}>{order.statusLabel || s.label}</span>
                        </div>
                        <div style={{ fontSize: 13, color: 'var(--d-fg-2)', marginTop: 2 }}>{order.title}</div>
                        {(order.company || order.agency) && <div style={{ fontSize: 11, color: 'var(--d-fg-3)', marginTop: 2 }}>{order.company || order.agency}</div>}
                      </div>
                      <Ico name="chevR" size={14} />
                    </div>
                  </div>
                );
              })}
            </div>
          )}

          {/* Other status changes */}
          {others.length > 0 && others.map(order => {
            const s = st(order.status);
            return (
              <div key={order.id} style={{ padding: '12px 14px', borderRadius: 10, background: 'var(--d-bg-surface-2, #f8f8f8)', marginBottom: 8, cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 10 }} onClick={() => { onClose(); onViewOrder(order); }}>
                <div style={{ width: 36, height: 36, borderRadius: 8, background: `${s.color}15`, color: s.color, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                  <Ico name={s.icon} size={16} />
                </div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                    <span style={{ fontWeight: 600, fontSize: 13 }}>#{order.code}</span>
                    <span style={{ fontSize: 10, fontWeight: 600, padding: '1px 6px', borderRadius: 4, color: s.color, background: `${s.color}18` }}>{order.statusLabel || s.label}</span>
                  </div>
                  <div style={{ fontSize: 12, color: 'var(--d-fg-3)', marginTop: 1 }}>{order.title}</div>
                </div>
                <Ico name="chevR" size={12} />
              </div>
            );
          })}
        </div>

        {/* Footer */}
        <div style={{ padding: '12px 20px 16px', borderTop: '1px solid var(--d-border, #eee)', display: 'flex', gap: 8 }}>
          <button onClick={onClose} style={{ flex: 1, padding: '10px 0', borderRadius: 10, border: '1px solid var(--d-border, #ddd)', background: 'transparent', color: 'var(--d-fg-2)', fontSize: 13, fontWeight: 600, cursor: 'pointer' }}>
            {_t('webapp.order_updates_dismiss')}
          </button>
          <button onClick={() => { onClose(); }} className="pay-btn-primary" style={{ flex: 1, justifyContent: 'center', fontSize: 13, borderRadius: 10 }}>
            {_t('webapp.order_updates_view_all')}
          </button>
        </div>
      </div>
    </div>
  );
}

// ─── Tracking View (Order Tracking) ─────────────────────────
const TRACK_STATUS = {
  pending:    { icon: 'clock',    color: '#f59e0b', label: _t('webapp.track_pending'),           step: 0 },
  processing: { icon: 'package',  color: '#3b82f6', label: _t('webapp.track_processing'),   step: 1 },
  ready:      { icon: 'boxCheck', color: '#22c55e', label: _t('webapp.track_ready'), step: 2 },
  delivered:  { icon: 'truck',    color: '#02A586', label: _t('webapp.track_delivered'),            step: 3 },
  cancelled:  { icon: 'cross',    color: '#ef4444', label: _t('webapp.track_cancelled'),           step: -1 },
};
const TRACK_STEPS = ['pending', 'processing', 'ready', 'delivered'];

function timeAgo(ts) {
  if (!ts) return '';
  const diff = Date.now() - ts;
  const mins = Math.floor(diff / 60000);
  if (mins < 1) return 'agora';
  if (mins < 60) return `${mins}min`;
  const hrs = Math.floor(mins / 60);
  if (hrs < 24) return `${hrs}h`;
  const days = Math.floor(hrs / 24);
  return `${days}d`;
}

// ─── Flights View (native design, API data) ──────────────────
const CV_AIRPORTS = [
  { code: 'RAI', name: 'Nelson Mandela', island: 'Santiago (Praia)', lat: 14.92, lng: -23.49 },
  { code: 'SID', name: 'Amílcar Cabral', island: 'Sal', lat: 16.74, lng: -22.95 },
  { code: 'VXE', name: 'Cesária Évora', island: 'São Vicente', lat: 16.83, lng: -25.06 },
  { code: 'BVC', name: 'Aristides Pereira', island: 'Boa Vista', lat: 16.14, lng: -22.89 },
  { code: 'SFL', name: 'São Filipe', island: 'Fogo', lat: 14.89, lng: -24.48 },
  { code: 'MMO', name: 'Maio', island: 'Maio', lat: 15.16, lng: -23.21 },
  { code: 'SNE', name: 'Preguiça', island: 'São Nicolau', lat: 16.59, lng: -24.28 },
];

const FL_STATUS = {
  landed: { label: _t('webapp.fl_landed'), color: 'var(--nb-green)', bg: 'rgba(2,165,134,0.12)' },
  scheduled: { label: _t('webapp.fl_scheduled'), color: 'var(--nb-info)', bg: 'rgba(30,136,229,0.12)' },
  active: { label: _t('webapp.fl_active'), color: 'var(--nb-orange)', bg: 'rgba(243,115,32,0.12)' },
  cancelled: { label: _t('webapp.track_cancelled'), color: 'var(--nb-danger)', bg: 'rgba(214,69,69,0.12)' },
  diverted: { label: _t('webapp.fl_diverted'), color: 'var(--nb-warning)', bg: 'rgba(232,163,23,0.12)' },
  unknown: { label: _t('webapp.fl_unknown'), color: 'var(--d-fg-3)', bg: 'rgba(140,154,149,0.10)' },
};

function FlightDetailPanel({ flight, type, onClose, collapsed, onToggle }) {
  if (collapsed) {
    return (
      <aside className="ticket-panel collapsed">
        <button className="ticket-collapse-btn" onClick={onToggle} title={_t('webapp.panel_expand')}>
          <span style={{ transform: 'rotate(180deg)', display: 'inline-flex' }}><Ico name="chevR" size={16} /></span>
        </button>
      </aside>
    );
  }
  if (!flight) return null;

  const isArr = type === 'arrivals';
  const st = FL_STATUS[flight.status] || FL_STATUS.unknown;
  const scheduledTime = (isArr ? flight.arr_time : flight.dep_time)?.split(' ')[1] || '--:--';
  const expectedTime = (isArr ? flight.arr_estimated : flight.dep_estimated)?.split(' ')[1] || scheduledTime;
  const delayed = isArr ? flight.arr_delayed : flight.dep_delayed;
  const hasDelay = delayed && delayed > 0;
  const dur = flight.duration ? `${Math.floor(flight.duration / 60)}h${String(flight.duration % 60).padStart(2, '0')}` : null;

  const rows = [
    { label: 'Voo', value: flight.flight_iata || 'N/A' },
    { label: 'ICAO', value: flight.flight_icao },
    { label: 'Companhia', value: flight.airline_iata },
    { label: isArr ? 'Origem' : 'Destino', value: isArr ? flight.dep_iata : flight.arr_iata },
    { label: 'Hora prevista', value: scheduledTime },
    { label: 'Hora estimada', value: expectedTime },
    hasDelay && { label: 'Atraso', value: `+${delayed} min`, color: 'var(--nb-danger)' },
    dur && { label: 'Duração', value: dur },
    { label: isArr ? 'Terminal chegada' : 'Terminal partida', value: isArr ? flight.arr_terminal : flight.dep_terminal },
    { label: 'Gate', value: isArr ? flight.arr_gate : flight.dep_gate },
    isArr && { label: 'Bagagem', value: flight.arr_baggage },
    { label: 'Partiu às', value: flight.dep_actual?.split(' ')[1] },
    isArr && flight.arr_actual && { label: _t('webapp.fl_landed_at'), value: flight.arr_actual.split(' ')[1] },
    flight.cs_flight_iata && { label: 'Codeshare', value: flight.cs_flight_iata },
  ].filter(Boolean);

  return (
    <aside className="ticket-panel">
      <button className="ticket-collapse-btn" onClick={onToggle} title={_t('webapp.panel_collapse')}><Ico name="chevR" size={16} /></button>
      <div className="ticket-head" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <h3>{_t('webapp.flight_details')}</h3>
        <button onClick={onClose} style={{ background: 'none', border: 'none', color: 'var(--d-fg-3)', cursor: 'pointer', fontSize: 18 }}>&times;</button>
      </div>
      <div style={{ padding: '0 1rem', overflowY: 'auto', flex: 1, paddingBottom: '1rem' }}>
        {/* Header */}
        <div style={{ textAlign: 'center', padding: '1rem 0' }}>
          <div style={{ width: 56, height: 56, borderRadius: 14, background: st.bg, color: st.color, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', marginBottom: 10 }}>
            <Ico name="plane" size={28} />
          </div>
          <h2 style={{ fontSize: '1.1rem', fontWeight: 700, color: 'var(--d-fg-1)', marginBottom: 4 }}>{flight.flight_iata || 'N/A'}</h2>
          <p style={{ fontSize: '0.8rem', color: 'var(--d-fg-3)', marginBottom: 8 }}>{flight.airline_iata} · {isArr ? 'Chegada' : 'Partida'}</p>
          <span style={{ display: 'inline-block', fontSize: 12, fontWeight: 600, padding: '4px 14px', borderRadius: 8, color: st.color, background: st.bg }}>
            {st.label}
          </span>
        </div>

        {/* Route visualization */}
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 12, padding: '14px 0', margin: '0 0 14px', borderRadius: 10, background: 'var(--d-bg-surface-2)' }}>
          <div style={{ textAlign: 'center' }}>
            <div style={{ fontSize: 22, fontWeight: 700, color: 'var(--d-fg-1)' }}>{flight.dep_iata || '?'}</div>
            <div style={{ fontSize: 11, color: 'var(--d-fg-3)' }}>Origem</div>
          </div>
          <div style={{ flex: 1, maxWidth: 80, height: 0, borderTop: '2px dashed var(--d-border-strong)', position: 'relative' }}>
            <div style={{ position: 'absolute', top: -9, left: '50%', transform: 'translateX(-50)', color: 'var(--d-fg-3)' }}>
              <Ico name="plane" size={16} />
            </div>
          </div>
          <div style={{ textAlign: 'center' }}>
            <div style={{ fontSize: 22, fontWeight: 700, color: 'var(--d-fg-1)' }}>{flight.arr_iata || '?'}</div>
            <div style={{ fontSize: 11, color: 'var(--d-fg-3)' }}>Destino</div>
          </div>
        </div>

        {/* Time highlight */}
        <div style={{ display: 'flex', gap: 8, marginBottom: 14 }}>
          <div style={{ flex: 1, padding: '10px 0', borderRadius: 10, background: 'var(--d-bg-surface-2)', textAlign: 'center' }}>
            <div style={{ fontSize: 11, color: 'var(--d-fg-3)', marginBottom: 2 }}>Previsto</div>
            <div style={{ fontSize: 18, fontWeight: 700, color: 'var(--d-fg-1)', fontVariantNumeric: 'tabular-nums' }}>{scheduledTime}</div>
          </div>
          <div style={{ flex: 1, padding: '10px 0', borderRadius: 10, background: hasDelay ? 'rgba(214,69,69,0.08)' : 'rgba(2,165,134,0.08)', textAlign: 'center' }}>
            <div style={{ fontSize: 11, color: 'var(--d-fg-3)', marginBottom: 2 }}>Estimado</div>
            <div style={{ fontSize: 18, fontWeight: 700, color: hasDelay ? 'var(--nb-danger)' : 'var(--nb-green)', fontVariantNumeric: 'tabular-nums' }}>{expectedTime}</div>
          </div>
          {dur && (
            <div style={{ flex: 1, padding: '10px 0', borderRadius: 10, background: 'var(--d-bg-surface-2)', textAlign: 'center' }}>
              <div style={{ fontSize: 11, color: 'var(--d-fg-3)', marginBottom: 2 }}>Duração</div>
              <div style={{ fontSize: 18, fontWeight: 700, color: 'var(--d-fg-1)' }}>{dur}</div>
            </div>
          )}
        </div>

        {/* Detail rows */}
        <div style={{ borderRadius: 10, overflow: 'hidden', border: '1px solid var(--d-border)' }}>
          {rows.map((r, i) => (
            <div key={i} style={{ display: 'flex', justifyContent: 'space-between', padding: '9px 12px', borderBottom: i < rows.length - 1 ? '1px solid var(--d-border)' : 'none', background: i % 2 === 0 ? 'transparent' : 'var(--d-bg-surface-2)' }}>
              <span style={{ fontSize: 12, color: 'var(--d-fg-3)' }}>{r.label}</span>
              <span style={{ fontSize: 12, fontWeight: 600, color: r.color || 'var(--d-fg-1)' }}>{r.value || '—'}</span>
            </div>
          ))}
        </div>
      </div>
    </aside>
  );
}

function FlightCard({ flight, type, onSelect }) {
  const isArr = type === 'arrivals';
  const time = isArr ? flight.arr_time : flight.dep_time;
  const estimated = isArr ? flight.arr_estimated : flight.dep_estimated;
  const delayed = isArr ? flight.arr_delayed : flight.dep_delayed;
  const origin = isArr ? flight.dep_iata : flight.arr_iata;
  const gate = isArr ? (flight.arr_gate || flight.arr_terminal) : (flight.dep_gate || flight.dep_terminal);
  const st = FL_STATUS[flight.status] || FL_STATUS.unknown;
  const scheduledTime = time ? time.split(' ')[1] : '--:--';
  const expectedTime = estimated ? estimated.split(' ')[1] : scheduledTime;
  const hasDelay = delayed && delayed > 0;

  return (
    <div className="tk-card" style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '12px 14px', cursor: 'pointer' }} onClick={() => onSelect && onSelect(flight)}>
      <div style={{ width: 40, height: 40, borderRadius: 10, background: st.bg, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, color: st.color }}>
        <Ico name="plane" size={18} />
      </div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
          <span style={{ fontWeight: 600, fontSize: 14 }}>{flight.flight_iata || 'N/A'}</span>
          <span style={{ fontSize: 12, color: 'var(--d-fg-3)' }}>{flight.airline_iata}</span>
          {hasDelay && <span style={{ fontSize: 11, color: 'var(--nb-danger)', fontWeight: 500 }}>+{delayed}min</span>}
        </div>
        <div style={{ display: 'flex', gap: 12, marginTop: 4, fontSize: 12, color: 'var(--d-fg-2)' }}>
          <span>{isArr ? 'De' : 'Para'}: <strong>{origin || 'N/A'}</strong></span>
          {gate && <span>{_t('webapp.flight_gate')}: <strong>{gate}</strong></span>}
          {flight.duration && <span>{Math.floor(flight.duration / 60)}h{String(flight.duration % 60).padStart(2, '0')}</span>}
        </div>
      </div>
      <div style={{ textAlign: 'right', flexShrink: 0 }}>
        <div style={{ fontSize: 16, fontWeight: 600, fontVariantNumeric: 'tabular-nums' }}>
          {hasDelay ? expectedTime : scheduledTime}
        </div>
        {hasDelay && <div style={{ fontSize: 11, color: 'var(--d-fg-3)', textDecoration: 'line-through' }}>{scheduledTime}</div>}
        <span style={{ display: 'inline-block', marginTop: 4, fontSize: 11, fontWeight: 500, padding: '2px 8px', borderRadius: 6, color: st.color, background: st.bg }}>
          {st.label}
        </span>
      </div>
    </div>
  );
}

function FlightsView({ onBack, onSelectFlight }) {
  const [airport, setAirport] = useState(() => localStorage.getItem('nb_flights_airport') || 'RAI');
  const [tab, setTab] = useState('arrivals');
  const [flights, setFlights] = useState([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  const [lastUpdate, setLastUpdate] = useState(null);
  const info = CV_AIRPORTS.find(a => a.code === airport) || CV_AIRPORTS[0];

  const changeAirport = (code) => { setAirport(code); localStorage.setItem('nb_flights_airport', code); };

  // Fetch flight data
  useEffect(() => {
    if (tab === 'map') return;
    setLoading(true);
    setError(null);
    fetch('https://fids-test.fom.one/api/schedules/' + tab + '/' + airport)
      .then(r => r.json())
      .then(data => {
        setFlights(Array.isArray(data) ? data : []);
        setLastUpdate(new Date());
        setLoading(false);
      })
      .catch(() => { setError('Não foi possível carregar os voos.'); setLoading(false); });
  }, [tab, airport]);

  // Auto-refresh every 60s
  useEffect(() => {
    if (tab === 'map') return;
    const iv = setInterval(() => {
      fetch('https://fids-test.fom.one/api/schedules/' + tab + '/' + airport)
        .then(r => r.json())
        .then(data => { setFlights(Array.isArray(data) ? data : []); setLastUpdate(new Date()); })
        .catch(() => {});
    }, 60000);
    return () => clearInterval(iv);
  }, [tab, airport]);

  const landed = flights.filter(f => f.status === 'landed').length;
  const scheduled = flights.filter(f => f.status === 'scheduled').length;
  const active = flights.filter(f => f.status === 'active').length;

  return (
    <>
      <div className="detail-head">
        <button className="back-btn" onClick={onBack}><Ico name="arrowL" /></button>
        <div className="titles">
          <h1><Ico name="plane" size={22} /> Voos — {info.code}</h1>
          <p>{info.name} · {info.island}</p>
        </div>
      </div>
      <div className="tk-tabs" style={{ marginBottom: 8, flexWrap: 'wrap', gap: 6 }}>
        {CV_AIRPORTS.map(a => (
          <button key={a.code} className={`tk-tab ${airport === a.code ? 'on' : ''}`} onClick={() => changeAirport(a.code)}>
            {a.island}
          </button>
        ))}
      </div>
      <div className="tk-tabs" style={{ marginBottom: 12 }}>
        {[{ id: 'arrivals', l: _t('webapp.fl_arrivals') }, { id: 'departures', l: _t('webapp.fl_departures') }, { id: 'map', l: _t('webapp.fl_radar_map') }].map(t => (
          <button key={t.id} className={`tk-tab ${tab === t.id ? 'on' : ''}`} onClick={() => setTab(t.id)}>{t.l}</button>
        ))}
      </div>

      {tab === 'map' ? (
        <div style={{ flex: 1, borderRadius: 12, overflow: 'hidden', border: '1px solid var(--nb-border)', minHeight: 500 }}>
          <iframe
            key={airport}
            src={`https://www.flightradar24.com/simple_index.php?lat=${info.lat}&lon=${info.lng}&z=9`}
            title={'Radar ' + info.code}
            style={{ width: '100%', height: '100%', minHeight: 500, border: 'none' }}
            allow="fullscreen"
          />
        </div>
      ) : (
        <>
          {/* Stats bar */}
          {!loading && flights.length > 0 && (
            <div style={{ display: 'flex', gap: 10, marginBottom: 12, flexWrap: 'wrap' }}>
              <div style={{ flex: 1, minWidth: 90, padding: '10px 14px', borderRadius: 10, background: 'var(--d-bg-surface)', border: '1px solid var(--d-border)', textAlign: 'center' }}>
                <div style={{ fontSize: 20, fontWeight: 700, color: 'var(--d-fg-1)' }}>{flights.length}</div>
                <div style={{ fontSize: 11, color: 'var(--d-fg-3)' }}>Total</div>
              </div>
              {tab === 'arrivals' && landed > 0 && (
                <div style={{ flex: 1, minWidth: 90, padding: '10px 14px', borderRadius: 10, background: 'rgba(2,165,134,0.10)', border: '1px solid rgba(2,165,134,0.20)', textAlign: 'center' }}>
                  <div style={{ fontSize: 20, fontWeight: 700, color: 'var(--nb-green)' }}>{landed}</div>
                  <div style={{ fontSize: 11, color: 'var(--d-fg-3)' }}>Aterraram</div>
                </div>
              )}
              {active > 0 && (
                <div style={{ flex: 1, minWidth: 90, padding: '10px 14px', borderRadius: 10, background: 'rgba(243,115,32,0.10)', border: '1px solid rgba(243,115,32,0.20)', textAlign: 'center' }}>
                  <div style={{ fontSize: 20, fontWeight: 700, color: 'var(--nb-orange)' }}>{active}</div>
                  <div style={{ fontSize: 11, color: 'var(--d-fg-3)' }}>{_t('webapp.fl_active')}</div>
                </div>
              )}
              {scheduled > 0 && (
                <div style={{ flex: 1, minWidth: 90, padding: '10px 14px', borderRadius: 10, background: 'rgba(30,136,229,0.10)', border: '1px solid rgba(30,136,229,0.20)', textAlign: 'center' }}>
                  <div style={{ fontSize: 20, fontWeight: 700, color: 'var(--nb-info)' }}>{scheduled}</div>
                  <div style={{ fontSize: 11, color: 'var(--d-fg-3)' }}>Agendados</div>
                </div>
              )}
            </div>
          )}

          {/* Flight list */}
          {loading ? (
            <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: 200 }}>
              <div className="nb-spinner" />
              <span style={{ marginLeft: 10, color: 'var(--nb-fg-3)' }}>A carregar voos...</span>
            </div>
          ) : error ? (
            <div style={{ padding: 40, textAlign: 'center', color: 'var(--nb-danger)' }}>
              <Ico name="wifi" size={32} />
              <p style={{ marginTop: 8 }}>{error}</p>
              <button onClick={() => { setTab(t => t); }} style={{ marginTop: 12, padding: '8px 16px', borderRadius: 8, background: 'var(--nb-green)', color: '#fff', fontWeight: 600 }}>{_t('webapp.cars_retry')}</button>
            </div>
          ) : flights.length === 0 ? (
            <div style={{ padding: 40, textAlign: 'center', color: 'var(--nb-fg-3)' }}>
              <Ico name="plane" size={32} />
              <p style={{ marginTop: 8 }}>Sem voos para hoje neste aeroporto.</p>
            </div>
          ) : (
            <div className="tk-list">
              {flights.map((f, i) => <FlightCard key={f.flight_iata + '-' + i} flight={f} type={tab} onSelect={(fl) => onSelectFlight && onSelectFlight(fl, tab)} />)}
            </div>
          )}
        </>
      )}

      <p style={{ textAlign: 'center', fontSize: 11, color: 'var(--nb-fg-3)', marginTop: 10 }}>
        {tab === 'map' ? 'Mapa por Flightradar24' : (
          <>{_t('webapp.flight_auto_update')}{lastUpdate && <> · {_t('webapp.flight_last_update')}: {lastUpdate.toLocaleTimeString('pt-CV', { hour: '2-digit', minute: '2-digit' })}</>}</>
        )}
      </p>
    </>
  );
}

// ─── Cars View (NhaBex Cars — Mobilidade CV) ───────────────
const CV_ISLANDS_CARS = [
  { code: 'all', name: _t('webapp.cars_all_islands') },
  { code: 'santiago', name: 'Santiago' },
  { code: 'sal', name: 'Sal' },
  { code: 'sao-vicente', name: 'São Vicente' },
  { code: 'boa-vista', name: 'Boa Vista' },
  { code: 'fogo', name: 'Fogo' },
  { code: 'santo-antao', name: 'Santo Antão' },
  { code: 'maio', name: 'Maio' },
  { code: 'sao-nicolau', name: 'São Nicolau' },
];

const CARS_TABS = [
  { id: 'routes', label: 'Rotas', icon: 'map' },
  { id: 'terminals', label: _t('webapp.driver_terminals') || 'Terminais', icon: 'location' },
  { id: 'rent', label: 'Aluguer', icon: 'car' },
  { id: 'driver', label: _t('webapp.driver_tab'), icon: 'user' },
];

const CAR_TYPES = [
  { id: 'all', label: _t('webapp.cars_all') },
  { id: 'rent', label: _t('webapp.cars_rent') },
  { id: 'sale', label: _t('webapp.cars_sale') },
];

const CAR_BODY_TYPES = [
  { id: 'all', label: _t('webapp.cars_all') },
  { id: 'sedan', label: 'Sedan' },
  { id: 'suv', label: 'SUV' },
  { id: 'hatchback', label: 'Hatchback' },
  { id: 'pickup', label: 'Pickup' },
  { id: 'van', label: 'Van' },
  { id: 'coupe', label: 'Coupé' },
];

const CAR_FUEL_TYPES = [
  { id: 'all', label: _t('webapp.cars_all') },
  { id: 'gasoline', label: _t('webapp.cars_gasoline') },
  { id: 'diesel', label: _t('webapp.cars_diesel') },
  { id: 'electric', label: _t('webapp.cars_electric') },
  { id: 'hybrid', label: _t('webapp.cars_hybrid') },
];

const ROUTE_VEHICLE_TYPES = [
  { id: 'all', label: _t('webapp.cars_all') },
  { id: 'hiace', label: 'Toyota Hiace' },
  { id: 'hilux', label: 'Hilux' },
  { id: 'minibus', label: 'Minibus' },
  { id: 'bus', label: _t('webapp.routes_bus') },
];

function CarDetailPanel({ car, onClose, collapsed, onToggle }) {
  if (!car) return null;
  const isRent = car.listing_type === 'rent';
  const price = isRent ? car.price_day : car.price;

  return (
    <aside className={`ticket-panel ${collapsed ? 'collapsed' : ''}`}>
      <div className="ticket-panel-toggle" onClick={onToggle}><Ico name={collapsed ? 'arrowL' : 'arrow'} size={14} /></div>
      <div className="ticket-panel-content" style={{ padding: 0, overflowY: 'auto' }}>

        {/* Image */}
        {car.image ? (
          <div style={{ width: '100%', height: 180, overflow: 'hidden', position: 'relative' }}>
            <img src={car.image} alt={car.make + ' ' + car.model} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
            <button onClick={onClose} style={{ position: 'absolute', top: 8, right: 8, width: 28, height: 28, borderRadius: '50%', background: 'rgba(0,0,0,0.5)', border: 'none', color: '#fff', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Ico name="cross" size={12} /></button>
            <span style={{ position: 'absolute', bottom: 8, left: 8, fontSize: 11, fontWeight: 600, padding: '3px 10px', borderRadius: 6, color: isRent ? '#013D32' : '#fff', background: isRent ? 'var(--nb-green)' : 'var(--nb-info)' }}>
              {isRent ? _t('webapp.cars_rent') : _t('webapp.cars_sale')}
            </span>
          </div>
        ) : (
          <div style={{ padding: '1rem', display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
            <span style={{ fontSize: 11, fontWeight: 600, padding: '3px 10px', borderRadius: 6, color: isRent ? '#013D32' : '#fff', background: isRent ? 'var(--nb-green)' : 'var(--nb-info)' }}>
              {isRent ? _t('webapp.cars_rent') : _t('webapp.cars_sale')}
            </span>
            <button onClick={onClose} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--d-fg-3)', padding: 4 }}><Ico name="cross" size={16} /></button>
          </div>
        )}

        {/* Title + price */}
        <div style={{ padding: '1rem' }}>
          <h3 style={{ margin: 0, fontSize: 20, fontWeight: 700, color: 'var(--d-fg-1)' }}>{car.make} {car.model}</h3>
          <div style={{ fontSize: 13, color: 'var(--d-fg-3)', marginTop: 2 }}>{car.year} · {car.island_name}{car.city ? ' · ' + car.city : ''}</div>

          {/* Price + km */}
          <div style={{ display: 'flex', gap: 8, marginTop: 12 }}>
            <div style={{ flex: 1, padding: '10px 0', borderRadius: 10, background: 'rgba(2,165,134,0.08)', textAlign: 'center' }}>
              <div style={{ fontSize: 20, fontWeight: 700, color: 'var(--nb-green)', fontVariantNumeric: 'tabular-nums' }}>
                {price ? price.toLocaleString('pt-CV') : '—'}
              </div>
              <div style={{ fontSize: 11, color: 'var(--d-fg-3)' }}>{price ? (isRent ? _t('webapp.cars_cve_day') : 'CVE') : _t('webapp.cars_on_request')}</div>
            </div>
            {car.km > 0 && (
              <div style={{ flex: 1, padding: '10px 0', borderRadius: 10, background: 'var(--d-bg-2)', textAlign: 'center' }}>
                <div style={{ fontSize: 20, fontWeight: 700, color: 'var(--d-fg-1)', fontVariantNumeric: 'tabular-nums' }}>{car.km.toLocaleString('pt-CV')}</div>
                <div style={{ fontSize: 11, color: 'var(--d-fg-3)' }}>km</div>
              </div>
            )}
          </div>
        </div>

        {/* Specs tags */}
        <div style={{ padding: '0 1rem 0.75rem', display: 'flex', gap: 6, flexWrap: 'wrap' }}>
          {[
            car.fuel_label,
            car.transmission === 'manual' ? _t('webapp.cars_manual') : _t('webapp.cars_automatic'),
            car.body_label,
            car.color,
          ].filter(Boolean).map((tag, i) => (
            <span key={i} style={{ fontSize: 11, padding: '4px 10px', borderRadius: 20, background: 'var(--d-bg-2)', color: 'var(--d-fg-2)', border: '1px solid var(--d-border-1)' }}>{tag}</span>
          ))}
        </div>

        {/* Description */}
        {car.description && (
          <div style={{ padding: '0 1rem 0.75rem' }}>
            <p style={{ margin: 0, padding: '10px 12px', borderRadius: 10, background: 'var(--d-bg-2)', fontSize: 13, color: 'var(--d-fg-2)', lineHeight: 1.5 }}>
              {car.description}
            </p>
          </div>
        )}

        {/* Seller info */}
        {(car.seller_name || car.seller_phone) && (
          <div style={{ padding: '0.75rem 1rem', borderTop: '1px solid var(--d-border-1)' }}>
            <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--d-fg-3)', textTransform: 'uppercase', letterSpacing: '.5px', marginBottom: 8 }}>{_t('webapp.cars_seller')}</div>
            {car.seller_name && <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--d-fg-1)', marginBottom: 4 }}>{car.seller_name}</div>}
            {car.seller_phone && (
              <div style={{ display: 'flex', gap: 8 }}>
                <a href={'tel:' + car.seller_phone} style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6, padding: '10px 0', borderRadius: 8, background: 'var(--nb-green)', color: '#013D32', fontWeight: 600, fontSize: 14, textDecoration: 'none' }}>
                  <Ico name="phone" size={15} /> {_t('webapp.cars_call')}
                </a>
                <a href={`https://wa.me/${car.seller_phone.replace(/\D/g, '')}`} target="_blank" rel="noopener noreferrer" style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6, padding: '10px 0', borderRadius: 8, background: 'var(--d-bg-2)', color: 'var(--d-fg-1)', fontWeight: 600, fontSize: 14, textDecoration: 'none', border: '1px solid var(--d-border-1)' }}>
                  <Ico name="send" size={15} /> WhatsApp
                </a>
              </div>
            )}
          </div>
        )}
      </div>
    </aside>
  );
}

function CarCard({ car, onSelect }) {
  const isRent = car.listing_type === 'rent';
  const price = isRent ? car.price_day : car.price;

  return (
    <div className="prf-card-block" style={{ cursor: 'pointer', padding: 0, overflow: 'hidden' }} onClick={() => onSelect && onSelect(car)}>
      {/* Image or placeholder */}
      {car.image ? (
        <div style={{ width: '100%', height: 140, overflow: 'hidden', position: 'relative' }}>
          <img src={car.image} alt={car.make} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
          <span style={{ position: 'absolute', top: 8, left: 8, fontSize: 11, fontWeight: 600, padding: '3px 10px', borderRadius: 6, color: isRent ? '#013D32' : '#fff', background: isRent ? 'var(--nb-green)' : 'var(--nb-info)' }}>
            {isRent ? _t('webapp.cars_rent') : _t('webapp.cars_sale')}
          </span>
        </div>
      ) : (
        <div style={{ width: '100%', height: 80, background: isRent ? 'rgba(2,165,134,0.08)' : 'rgba(30,136,229,0.08)', display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative' }}>
          <Ico name="car" size={32} />
          <span style={{ position: 'absolute', top: 8, left: 8, fontSize: 11, fontWeight: 600, padding: '3px 10px', borderRadius: 6, color: isRent ? '#013D32' : '#fff', background: isRent ? 'var(--nb-green)' : 'var(--nb-info)' }}>
            {isRent ? _t('webapp.cars_rent') : _t('webapp.cars_sale')}
          </span>
        </div>
      )}
      {/* Info */}
      <div style={{ padding: '10px 12px' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 6 }}>
          <div>
            <div style={{ fontWeight: 700, fontSize: 15, color: 'var(--d-fg-1)' }}>{car.make} {car.model}</div>
            <div style={{ fontSize: 12, color: 'var(--d-fg-3)', marginTop: 1 }}>{car.year} · {car.island_name}</div>
          </div>
          <div style={{ textAlign: 'right' }}>
            <div style={{ fontSize: 16, fontWeight: 700, color: 'var(--nb-green)', fontVariantNumeric: 'tabular-nums' }}>
              {price ? price.toLocaleString('pt-CV') : '—'}
            </div>
            <div style={{ fontSize: 10, color: 'var(--d-fg-3)' }}>{price ? (isRent ? 'CVE/dia' : 'CVE') : 'Consultar'}</div>
          </div>
        </div>
        <div style={{ display: 'flex', gap: 4, flexWrap: 'wrap' }}>
          {[car.fuel_label, car.transmission === 'manual' ? 'Manual' : 'Auto', car.body_label].filter(Boolean).map((tag, i) => (
            <span key={i} style={{ fontSize: 10, padding: '2px 8px', borderRadius: 20, background: 'var(--d-bg-2)', color: 'var(--d-fg-2)', border: '1px solid var(--d-border-1)' }}>{tag}</span>
          ))}
          {car.km > 0 && <span style={{ fontSize: 10, padding: '2px 8px', borderRadius: 20, background: 'var(--d-bg-2)', color: 'var(--d-fg-2)', border: '1px solid var(--d-border-1)' }}>{car.km.toLocaleString('pt-CV')} km</span>}
        </div>
      </div>
    </div>
  );
}

// ─── Route Card ─────────────────────────────────────────────
function RouteCard({ route, onSelect }) {
  const durationH = route.duration_minutes ? Math.floor(route.duration_minutes / 60) : null;
  const durationM = route.duration_minutes ? route.duration_minutes % 60 : null;

  return (
    <div className="tk-card" style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '12px 14px', cursor: 'pointer' }} onClick={() => onSelect && onSelect(route)}>
      <div style={{ width: 44, height: 44, borderRadius: 10, background: 'rgba(2,165,134,0.12)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, color: 'var(--nb-green)' }}>
        <Ico name="map" size={20} />
      </div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontWeight: 600, fontSize: 14, color: 'var(--d-fg-1)' }}>
          {route.origin_city} <span style={{ color: 'var(--d-fg-3)', fontSize: 12 }}>&rarr;</span> {route.destination_city}
        </div>
        <div style={{ display: 'flex', gap: 10, marginTop: 4, fontSize: 12, color: 'var(--d-fg-2)', flexWrap: 'wrap' }}>
          <span>{route.origin_island}</span>
          <span>{route.vehicle_label}</span>
          {route.distance_km && <span>{route.distance_km} km</span>}
          {durationH !== null && <span>{durationH > 0 ? durationH + 'h' : ''}{durationM > 0 ? durationM + 'min' : ''}</span>}
          {route.stops_count > 0 && <span>{route.stops_count} paragens</span>}
        </div>
      </div>
      <div style={{ textAlign: 'right', flexShrink: 0 }}>
        <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--nb-green)', fontVariantNumeric: 'tabular-nums' }}>
          {route.base_price ? route.base_price.toLocaleString('pt-CV') + ' CVE' : 'Consultar'}
        </div>
        <div style={{ fontSize: 11, color: 'var(--d-fg-3)' }}>/pessoa</div>
      </div>
    </div>
  );
}

// ─── Route Booking Modal (NhaBex Pay flow) ─────────────────
function RouteBookingModal({ schedule, route, selDate, onClose, addToast, signedIn, platformFee = 0 }) {
  const [step, setStep] = useState('form'); // form | confirm | paying | result
  const [form, setForm] = useState({ passenger_name: '', passenger_phone: '', passenger_email: '', seats: 1, notes: '' });
  const [termsAccepted, setTermsAccepted] = useState(true);
  const [submitting, setSubmitting] = useState(false);
  const [result, setResult] = useState(null);

  const totalPrice = (schedule.price || 0) * form.seats;
  const dateLabel = (() => { const d = new Date(selDate); return d.getDate() + '/' + (d.getMonth() + 1) + '/' + d.getFullYear(); })();
  const stepNum = step === 'form' ? 1 : step === 'confirm' ? 2 : step === 'paying' ? 3 : 4;

  const goToConfirm = () => {
    if (!form.passenger_name.trim()) { addToast && addToast('Introduz o teu nome.', 'warning'); return; }
    if (!form.passenger_phone.trim() || form.passenger_phone.length < 7) { addToast && addToast('Introduz um telefone válido.', 'warning'); return; }
    setStep('confirm');
  };

  const confirmAndPay = async () => {
    if (!termsAccepted) { addToast && addToast('Aceita os termos para continuar.', 'warning'); return; }
    if (!signedIn) { addToast && addToast('Faz login para concluir o pagamento.', 'warning'); return; }
    setSubmitting(true);
    setStep('paying');
    try {
      const payload = {
        service_type: 'car_route_booking',
        amount: totalPrice + platformFee,
        return_path: window.location.origin + window.location.pathname + '?view=cars',
        // Dados da reserva para associar ao pagamento
        metadata: {
          schedule_id: schedule.schedule_id,
          travel_date: selDate,
          passenger_name: form.passenger_name.trim(),
          passenger_phone: form.passenger_phone.trim(),
          passenger_email: form.passenger_email.trim() || null,
          seats: form.seats,
          notes: form.notes.trim() || null,
          route_origin: route.origin_city,
          route_destination: route.destination_city,
          departure_time: schedule.departure_time,
          ticket_id: schedule.ticket_id || null,
          vehicle_id: schedule.vehicle_id || null,
          boarding_type: form.pickup_stop_id ? 'enroute' : 'terminal',
          pickup_stop_id: form.pickup_stop_id || null,
        },
      };
      // Guardar dados da reserva antes de redirecionar para SISP
      sessionStorage.setItem('nb_car_route_booking', JSON.stringify({
        route_origin: route.origin_city,
        route_destination: route.destination_city,
        travel_date: selDate,
        departure_time: schedule.departure_time,
        seats: form.seats,
        price: totalPrice,
        passenger_name: form.passenger_name.trim(),
      }));
      const ok = await initiatePaymentWithCardPicker(payload, { serviceName: route.origin_city + ' → ' + route.destination_city, addToast });
      if (!ok) {
        sessionStorage.removeItem('nb_car_route_booking');
        setStep('confirm');
      }
    } catch (e) {
      addToast && addToast('Erro de rede ao processar pagamento.', 'error');
      setStep('confirm');
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <div className="modal-overlay" onClick={step === 'paying' ? undefined : onClose}>
      <div className="modal-dialog" onClick={e => e.stopPropagation()} style={{ maxWidth: 460 }}>
        <div className="modal-header">
          <h3>{step === 'result' ? 'Reserva Confirmada' : 'Reservar Viagem'}</h3>
          {step !== 'paying' && <button className="modal-close" onClick={onClose}>&times;</button>}
        </div>

        {/* Stepper */}
        <div className="pay-steps" style={{ padding: '0 1.25rem' }}>
          {[{ n: 1, l: 'Dados' }, { n: 2, l: 'Confirmar' }, { n: 3, l: 'Pagamento' }, { n: 4, l: 'Resultado' }].map(s => (
            <div key={s.n} className={`pay-step ${stepNum === s.n ? 'pay-step--active' : ''} ${stepNum > s.n ? 'pay-step--done' : ''}`}>
              <div className="pay-step-circle">{stepNum > s.n ? <Ico name="check" size={12} /> : s.n}</div>
              <span className="pay-step-label">{s.l}</span>
            </div>
          ))}
        </div>

        <div className="modal-body" style={{ padding: '1rem 1.25rem', maxHeight: '65vh', overflowY: 'auto' }}>
          {/* Route summary header (always visible) */}
          <div className="pay-form-header" style={{ borderLeft: '3px solid var(--nb-green)', marginBottom: 16 }}>
            <Ico name="map" size={18} />
            <div>
              <div style={{ fontWeight: 600, fontSize: '0.875rem' }}>{route.origin_city} &rarr; {route.destination_city}</div>
              <div style={{ fontSize: '0.75rem', color: 'var(--d-fg-3)' }}>{dateLabel} &middot; {schedule.departure_time}{schedule.operator ? ' · ' + schedule.operator.name : ''}</div>
            </div>
          </div>

          {/* STEP 1: Form */}
          {step === 'form' && (
            <div className="pay-form-wrap" style={{ padding: 0, border: 'none', background: 'none' }}>
              <label className="pay-label">Nome completo</label>
              <input className="pay-input" type="text" placeholder={_t('webapp.routes_passenger_placeholder')} value={form.passenger_name}
                onChange={e => setForm({ ...form, passenger_name: e.target.value })} />

              <label className="pay-label" style={{ marginTop: 12 }}>Telefone</label>
              <div className="pay-phone-row">
                <span className="pay-phone-prefix">+238</span>
                <input className="pay-input" type="tel" placeholder="9XX XX XX" maxLength={7} inputMode="numeric"
                  value={form.passenger_phone}
                  onChange={e => setForm({ ...form, passenger_phone: e.target.value.replace(/\D/g, '').slice(0, 7) })} />
              </div>

              <label className="pay-label" style={{ marginTop: 12 }}>{_t('webapp.wash_email_optional')}</label>
              <input className="pay-input" type="email" placeholder={_t('webapp.wash_email_placeholder')} value={form.passenger_email}
                onChange={e => setForm({ ...form, passenger_email: e.target.value })} />

              <div style={{ display: 'flex', gap: 12, marginTop: 12 }}>
                <div style={{ flex: 1 }}>
                  <label className="pay-label">Lugares</label>
                  <select className="pay-input" value={form.seats} onChange={e => setForm({ ...form, seats: parseInt(e.target.value) })}>
                    {Array.from({ length: Math.min(schedule.available || 5, 10) }, (_, i) => i + 1).map(n => (
                      <option key={n} value={n}>{n} {n === 1 ? 'lugar' : 'lugares'}</option>
                    ))}
                  </select>
                </div>
                <div style={{ flex: 2 }}>
                  <label className="pay-label">{_t('webapp.wash_notes_optional')}</label>
                  <input className="pay-input" type="text" placeholder={_t('webapp.routes_notes_placeholder')} value={form.notes}
                    onChange={e => setForm({ ...form, notes: e.target.value })} />
                </div>
              </div>

              {/* Price preview */}
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 16, padding: '12px 14px', borderRadius: 10, background: 'rgba(2,165,134,0.08)' }}>
                <div>
                  <div style={{ fontSize: 11, color: 'var(--d-fg-3)' }}>{form.seats} {form.seats === 1 ? 'lugar' : 'lugares'} x {(schedule.price || 0).toLocaleString('pt-CV')} CVE</div>
                  <div style={{ fontSize: 11, color: 'var(--d-fg-3)', marginTop: 2 }}>{schedule.vehicle_label} &middot; {schedule.available} disponíveis</div>
                </div>
                <div style={{ fontSize: 20, fontWeight: 700, color: 'var(--nb-green)', fontVariantNumeric: 'tabular-nums' }}>
                  {totalPrice.toLocaleString('pt-CV')} CVE
                </div>
              </div>

              <div className="pay-form-actions" style={{ marginTop: 16 }}>
                <button className="pay-btn-outline" onClick={onClose}>Cancelar</button>
                <button className="pay-btn-primary" onClick={goToConfirm}>
                  Continuar <Ico name="chevR" size={14} />
                </button>
              </div>
            </div>
          )}

          {/* STEP 2: Confirm */}
          {step === 'confirm' && (
            <div className="pay-form-wrap" style={{ padding: 0, border: 'none', background: 'none' }}>
              <div className="pay-summary">
                <div className="pay-summary-row"><span>Passageiro</span><span>{form.passenger_name}</span></div>
                <div className="pay-summary-row"><span>{_t('webapp.pharm_phone')}</span><span>+238 {form.passenger_phone}</span></div>
                {form.passenger_email && <div className="pay-summary-row"><span>{_t('webapp.pharm_email')}</span><span>{form.passenger_email}</span></div>}
                <div className="pay-summary-row"><span>Rota</span><span>{route.origin_city} &rarr; {route.destination_city}</span></div>
                <div className="pay-summary-row"><span>Data</span><span>{dateLabel}</span></div>
                <div className="pay-summary-row"><span>Horário</span><span>{schedule.departure_time}</span></div>
                {schedule.operator && <div className="pay-summary-row"><span>Operador</span><span>{schedule.operator.name}</span></div>}
                <div className="pay-summary-row"><span>Veículo</span><span>{schedule.vehicle_label}</span></div>
                <div className="pay-summary-row"><span>Lugares</span><span>{form.seats}</span></div>
                {form.notes && <div className="pay-summary-row"><span>Notas</span><span>{form.notes}</span></div>}
                <div className="pay-summary-row"><span>Preço ({form.seats} x {(schedule.price || 0).toLocaleString('pt-CV')})</span><span>{totalPrice.toLocaleString('pt-CV')} CVE</span></div>
                {platformFee > 0 && <div className="pay-summary-row"><span>Taxa de serviço</span><span>{platformFee.toLocaleString('pt-CV')} CVE</span></div>}
                <div className="pay-summary-row pay-summary-total">
                  <span>{_t('webapp.total_to_pay')}</span>
                  <span>{(totalPrice + platformFee).toLocaleString('pt-CV')} CVE</span>
                </div>
              </div>

              <div className="pay-security-note">
                <Ico name="lock" size={14} /> Pagamento seguro via NhaBex Pay / SISP 3D Secure
              </div>

              <label className="pay-terms">
                <input type="checkbox" checked={termsAccepted} onChange={e => setTermsAccepted(e.target.checked)} />
                <span>{_t('webapp.accept_terms_prefix')} <a href="termos" target="_blank">{_t('webapp.terms')}</a> {_t('webapp.accept_terms_and')} <a href="privacidade" target="_blank">{_t('webapp.privacy_policy')}</a>.</span>
              </label>

              <div className="pay-form-actions" style={{ marginTop: 16 }}>
                <button className="pay-btn-outline" onClick={() => setStep('form')}>Editar</button>
                <button className="pay-btn-primary" onClick={confirmAndPay} disabled={!termsAccepted}>
                  <Ico name="lock" size={14} /> Pagar {(totalPrice + platformFee).toLocaleString('pt-CV')} CVE
                </button>
              </div>
            </div>
          )}

          {/* STEP 3: Paying (processing) */}
          {step === 'paying' && (
            <div style={{ textAlign: 'center', padding: '2rem 0' }}>
              <div className="nb-spinner" style={{ marginBottom: 16 }} />
              <h3 style={{ fontSize: '1rem', fontWeight: 600, color: 'var(--d-fg-1)', marginBottom: 8 }}>A processar pagamento...</h3>
              <p style={{ fontSize: 13, color: 'var(--d-fg-3)' }}>NhaBex Pay via SISP 3D Secure</p>
              <p style={{ fontSize: 12, color: 'var(--d-fg-3)', marginTop: 4 }}>Não feches esta janela.</p>
            </div>
          )}

          {/* STEP 4: Result */}
          {step === 'result' && result && (
            <div style={{ textAlign: 'center' }}>
              {result.status === 'pending' ? (
                <>
                  <div style={{ width: 56, height: 56, borderRadius: '50%', background: 'rgba(245,166,35,0.15)', color: '#f5a623', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', marginBottom: 12 }}>
                    <Ico name="clock" size={28} />
                  </div>
                  <h3 style={{ fontSize: '1rem', fontWeight: 700, color: '#f5a623', marginBottom: 4 }}>A aguardar pagamento</h3>
                  <p style={{ fontSize: 12, color: 'var(--d-fg-3)', marginBottom: 16 }}>Completa o pagamento na janela do SISP que foi aberta. Após o pagamento, a reserva será confirmada automaticamente.</p>
                </>
              ) : (
                <>
                  <div style={{ width: 56, height: 56, borderRadius: '50%', background: 'rgba(2,165,134,0.15)', color: 'var(--nb-green)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', marginBottom: 12 }}>
                    <Ico name="check" size={28} />
                  </div>
                  <h3 style={{ fontSize: '1rem', fontWeight: 700, color: 'var(--nb-green)', marginBottom: 4 }}>Pagamento Confirmado</h3>
                  <p style={{ fontSize: 12, color: 'var(--d-fg-3)', marginBottom: 16 }}>A tua reserva foi confirmada com sucesso.</p>
                </>
              )}

              <div className="pay-summary" style={{ textAlign: 'left' }}>
                <div className="pay-summary-row"><span>Código da reserva</span><span style={{ fontFamily: 'monospace', fontWeight: 700, letterSpacing: 1 }}>{result.hash}</span></div>
                <div className="pay-summary-row"><span>Rota</span><span>{result.route}</span></div>
                <div className="pay-summary-row"><span>Data</span><span>{result.date} &middot; {result.time}</span></div>
                <div className="pay-summary-row"><span>Lugares</span><span>{result.seats}</span></div>
                {result.transaction_id && <div className="pay-summary-row"><span>Transação SISP</span><span style={{ fontFamily: 'monospace', fontSize: 11 }}>{result.transaction_id}</span></div>}
                <div className="pay-summary-row pay-summary-total">
                  <span>{result.status === 'pending' ? 'Total a pagar' : 'Total pago'}</span>
                  <span>{result.price ? result.price.toLocaleString('pt-CV') + ' CVE' : '—'}</span>
                </div>
              </div>

              <p style={{ fontSize: 11, color: 'var(--d-fg-3)', marginTop: 12 }}>
                {result.status === 'pending'
                  ? 'Após completar o pagamento SISP, receberás confirmação por SMS.'
                  : 'Guarda o código de reserva. Apresenta-o ao operador no momento do embarque.'}
              </p>

              <div className="pay-form-actions" style={{ marginTop: 16, justifyContent: 'center' }}>
                <button className="pay-btn-primary" onClick={onClose} style={{ minWidth: 160 }}>
                  Fechar
                </button>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

// ─── Live Queue Tab (fila activa do terminal) ──────────────
function LiveQueueTab({ route }) {
  const [boarding, setBoarding] = useState([]);
  const [queue, setQueue] = useState([]);
  const [loading, setLoading] = useState(true);
  const [agencyHash, setAgencyHash] = useState(null);

  useEffect(() => {
    // Try to find agency hash from route data
    // Routes may have an associated agency — for now load all agencies and match
    API.get('/data/agencies', { limit: 100 }).then(res => {
      if (res.message === 'success' && res.data?.length) {
        // Use first agency as default (terminal) — in production would filter by route
        const ag = res.data[0];
        const hash = ag.Hash || ag.hash;
        setAgencyHash(hash);
        loadQueue(hash);
      } else {
        setLoading(false);
      }
    }).catch(() => setLoading(false));
  }, [route?.hash]);

  const loadQueue = (hash) => {
    if (!hash) return;
    setLoading(true);
    Promise.all([
      API.get(`/car-queue/terminal/${hash}/boarding`),
      API.get(`/car-queue/terminal/${hash}/queue`),
    ]).then(([bRes, qRes]) => {
      if (bRes.message === 'success') setBoarding(bRes.data || []);
      if (qRes.message === 'success') setQueue(qRes.data || []);
    }).catch(() => {}).finally(() => setLoading(false));
  };

  const refresh = () => { if (agencyHash) loadQueue(agencyHash); };

  // Auto-refresh every 15s
  useEffect(() => {
    if (!agencyHash) return;
    const iv = setInterval(() => loadQueue(agencyHash), 15000);
    return () => clearInterval(iv);
  }, [agencyHash]);

  if (loading) {
    return <div style={{ display: 'flex', justifyContent: 'center', padding: '2rem 0' }}><div className="nb-spinner" /></div>;
  }

  return (
    <div>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 10 }}>
        <div style={{ fontSize: 13, fontWeight: 600 }}>{_t('webapp.live_boarding') || 'A Embarcar'}</div>
        <button onClick={refresh} style={{ background: 'none', border: 'none', color: 'var(--nb-green)', cursor: 'pointer', fontSize: 12 }}>
          <Ico name="refresh" size={12} /> {_t('webapp.driver_refresh') || 'Actualizar'}
        </button>
      </div>

      {/* Boarding vehicles */}
      {boarding.length > 0 ? boarding.map((v, i) => (
        <div key={i} style={{ padding: '12px 14px', borderRadius: 10, border: '1px solid var(--d-border)', marginBottom: 8, background: i === 0 ? 'rgba(2,165,134,0.06)' : 'transparent' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 6 }}>
            <span style={{ fontSize: 12, color: 'var(--nb-green)', fontWeight: 600 }}>{v.service_name}</span>
            {v.desk_name && <span style={{ fontSize: 11, color: 'var(--d-fg-3)', background: 'var(--d-bg-surface-2)', padding: '1px 8px', borderRadius: 8 }}>{v.desk_name}</span>}
          </div>
          <div style={{ fontSize: 20, fontWeight: 800, fontFamily: "'Courier New', monospace", letterSpacing: 1 }}>{v.license_plate}</div>
          <div style={{ fontSize: 12, color: 'var(--d-fg-3)', marginBottom: 6 }}>{v.vehicle_label} — {v.driver_name}</div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <div style={{ flex: 1, height: 6, borderRadius: 3, background: 'var(--d-bg-surface-2)', overflow: 'hidden' }}>
              <div style={{ width: (v.occupancy_percent || 0) + '%', height: '100%', borderRadius: 3, background: v.occupancy_percent >= 90 ? 'var(--nb-danger)' : v.occupancy_percent >= 60 ? '#f5a623' : 'var(--nb-green)', transition: 'width 0.3s' }} />
            </div>
            <span style={{ fontSize: 11, fontWeight: 600, color: 'var(--d-fg-2)' }}>{v.passengers_boarded}/{v.capacity}</span>
            {v.passengers_enroute > 0 && (
              <span style={{ fontSize: 10, background: '#e0f2fe', color: '#0369a1', padding: '1px 6px', borderRadius: 6, fontWeight: 600 }}>+{v.passengers_enroute} {_t('webapp.driver_enroute') || 'em rota'}</span>
            )}
          </div>
        </div>
      )) : (
        <div style={{ padding: '20px 0', textAlign: 'center', color: 'var(--d-fg-3)', fontSize: 13 }}>
          <Ico name="clock" size={24} />
          <p style={{ marginTop: 6 }}>{_t('webapp.live_no_boarding') || 'Nenhuma viatura a embarcar'}</p>
        </div>
      )}

      {/* Queue */}
      <div style={{ fontSize: 13, fontWeight: 600, marginTop: 14, marginBottom: 8 }}>
        {_t('webapp.live_queue') || 'Fila de Espera'} ({queue.length})
      </div>
      {queue.length > 0 ? (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
          {queue.map((q, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '6px 10px', borderRadius: 8, background: i === 0 ? 'var(--d-bg-surface-2)' : 'transparent', fontSize: 12 }}>
              <span style={{ width: 22, height: 22, borderRadius: '50%', background: i === 0 ? 'var(--nb-green)' : 'var(--d-bg-surface-2)', color: i === 0 ? '#fff' : 'var(--d-fg-3)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700, fontSize: 10, flexShrink: 0 }}>{q.position}</span>
              <span style={{ fontWeight: 700, fontFamily: "'Courier New', monospace", letterSpacing: 1 }}>{q.license_plate}</span>
              <span style={{ flex: 1, color: 'var(--d-fg-3)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{q.vehicle_label}</span>
              <span style={{ color: 'var(--d-fg-3)', fontSize: 11 }}>{q.wait_minutes}min</span>
            </div>
          ))}
        </div>
      ) : (
        <div style={{ padding: '16px 0', textAlign: 'center', color: 'var(--d-fg-4)', fontSize: 12 }}>
          {_t('webapp.live_queue_empty') || 'Fila vazia'}
        </div>
      )}
    </div>
  );
}

// ─── Route Detail Panel (sidebar) ───────────────────────────
function RouteDetailPanel({ route, onClose, collapsed, onToggle, addToast, signedIn, platformFees }) {
  const [detail, setDetail] = useState(null);
  const [loading, setLoading] = useState(true);
  const [panelTab, setPanelTab] = useState('info');
  const [selDate, setSelDate] = useState(() => { const d = new Date(); return d.toISOString().split('T')[0]; });
  const [availability, setAvailability] = useState([]);
  const [loadAvail, setLoadAvail] = useState(false);
  const [bookingModal, setBookingModal] = useState(null);
  const [bookResult, setBookResult] = useState(null);

  if (collapsed) {
    return (
      <aside className="ticket-panel collapsed">
        <button className="ticket-collapse-btn" onClick={onToggle} title={_t('webapp.panel_expand')}>
          <span style={{ transform: 'rotate(180deg)', display: 'inline-flex' }}><Ico name="chevR" size={16} /></span>
        </button>
      </aside>
    );
  }
  if (!route) return null;

  useEffect(() => {
    setLoading(true);
    setDetail(null);
    setBookResult(null);
    setPanelTab('info');
    setTimeout(() => {
      const mock = MOCK_ROUTE_DETAIL[route.hash];
      setDetail(mock ? { ...route, ...mock } : route);
      setLoading(false);
    }, 300);
  }, [route.hash]);

  useEffect(() => {
    if (!route.hash || !selDate) return;
    setLoadAvail(true);
    setTimeout(() => {
      setAvailability(MOCK_AVAILABILITY.map((a, i) => {
        const booked = i === 2 ? a.capacity : Math.floor(Math.random() * (a.capacity - 1));
        return { ...a, booked, available: Math.max(0, a.capacity - booked) };
      }));
      setLoadAvail(false);
    }, 400);
  }, [route.hash, selDate]);

  const r = detail || route;
  const durationH = r.duration_minutes ? Math.floor(r.duration_minutes / 60) : null;
  const durationM = r.duration_minutes ? r.duration_minutes % 60 : null;

  const dateOptions = [];
  for (let i = 0; i < 7; i++) {
    const d = new Date();
    d.setDate(d.getDate() + i);
    const iso = d.toISOString().split('T')[0];
    const dayNames = [_t('webapp.day_sun_short'), _t('webapp.day_mon_short'), _t('webapp.day_tue_short'), _t('webapp.day_wed_short'), _t('webapp.day_thu_short'), _t('webapp.day_fri_short'), _t('webapp.day_sat_short')];
    dateOptions.push({ value: iso, label: i === 0 ? 'Hoje' : i === 1 ? 'Amanhã' : dayNames[d.getDay()] + ' ' + d.getDate() + '/' + (d.getMonth() + 1) });
  }

  const [liveQueue, setLiveQueue] = useState(null);
  const [liveBoarding, setLiveBoarding] = useState(null);

  const PANEL_TABS = [
    { id: 'info', label: _t('webapp.routes_tab_info') || 'Resumo', icon: 'map' },
    { id: 'schedules', label: _t('webapp.routes_tab_schedules') || 'Horários', icon: 'clock' },
    { id: 'booking', label: _t('webapp.routes_tab_booking') || 'Reservar', icon: 'ticket' },
    { id: 'live', label: _t('webapp.routes_tab_live') || 'Fila', icon: 'users' },
  ];

  return (
    <aside className="ticket-panel">
      <button className="ticket-collapse-btn" onClick={onToggle} title={_t('webapp.panel_collapse')}><Ico name="chevR" size={16} /></button>
      <div className="ticket-head" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <h3 style={{ fontSize: '0.9rem' }}>{r.origin_city} &rarr; {r.destination_city}</h3>
        <button onClick={onClose} style={{ background: 'none', border: 'none', color: 'var(--d-fg-3)', cursor: 'pointer', fontSize: 18 }}>&times;</button>
      </div>

      {/* Panel Tabs */}
      {!loading && (
        <div className="tk-tabs" style={{ padding: '0 1rem', marginBottom: 0, gap: 4, flexShrink: 0 }}>
          {PANEL_TABS.map(t => (
            <button key={t.id} className={`tk-tab ${panelTab === t.id ? 'on' : ''}`} onClick={() => setPanelTab(t.id)} style={{ display: 'flex', alignItems: 'center', gap: 5, fontSize: 12 }}>
              <Ico name={t.icon} size={13} />
              {t.label}
            </button>
          ))}
        </div>
      )}

      <div style={{ padding: '0 1rem', overflowY: 'auto', flex: 1, paddingBottom: '1rem', paddingTop: '0.75rem' }}>
        {loading ? (
          <div style={{ display: 'flex', justifyContent: 'center', padding: '2rem 0' }}><div className="nb-spinner" /></div>
        ) : (
          <>
            {/* ═══ TAB: Resumo ═══ */}
            {panelTab === 'info' && (
              <>
                {/* Header */}
                <div style={{ textAlign: 'center', padding: '0.5rem 0 1rem' }}>
                  <div style={{ width: 48, height: 48, borderRadius: 12, background: 'rgba(2,165,134,0.12)', color: 'var(--nb-green)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', marginBottom: 8 }}>
                    <Ico name="map" size={24} />
                  </div>
                  <h2 style={{ fontSize: '1rem', fontWeight: 700, color: 'var(--d-fg-1)', marginBottom: 4 }}>{r.origin_city} &rarr; {r.destination_city}</h2>
                  <p style={{ fontSize: '0.78rem', color: 'var(--d-fg-3)' }}>{r.origin_island} &middot; {r.vehicle_label}</p>
                </div>

                {/* Stats */}
                <div style={{ display: 'flex', gap: 8, marginBottom: 14 }}>
                  <div style={{ flex: 1, padding: '10px 0', borderRadius: 10, background: 'rgba(2,165,134,0.08)', textAlign: 'center' }}>
                    <div style={{ fontSize: 11, color: 'var(--d-fg-3)', marginBottom: 2 }}>Preço</div>
                    <div style={{ fontSize: 18, fontWeight: 700, color: 'var(--nb-green)', fontVariantNumeric: 'tabular-nums' }}>
                      {r.base_price ? r.base_price.toLocaleString('pt-CV') : '—'}
                    </div>
                    <div style={{ fontSize: 10, color: 'var(--d-fg-3)' }}>CVE</div>
                  </div>
                  {r.distance_km && (
                    <div style={{ flex: 1, padding: '10px 0', borderRadius: 10, background: 'var(--d-bg-surface-2)', textAlign: 'center' }}>
                      <div style={{ fontSize: 11, color: 'var(--d-fg-3)', marginBottom: 2 }}>Distância</div>
                      <div style={{ fontSize: 18, fontWeight: 700, color: 'var(--d-fg-1)' }}>{r.distance_km}</div>
                      <div style={{ fontSize: 10, color: 'var(--d-fg-3)' }}>km</div>
                    </div>
                  )}
                  {durationH !== null && (
                    <div style={{ flex: 1, padding: '10px 0', borderRadius: 10, background: 'var(--d-bg-surface-2)', textAlign: 'center' }}>
                      <div style={{ fontSize: 11, color: 'var(--d-fg-3)', marginBottom: 2 }}>Duração</div>
                      <div style={{ fontSize: 18, fontWeight: 700, color: 'var(--d-fg-1)' }}>{durationH > 0 ? durationH + 'h' : ''}{durationM > 0 ? durationM + 'min' : ''}</div>
                    </div>
                  )}
                  <div style={{ flex: 1, padding: '10px 0', borderRadius: 10, background: 'var(--d-bg-surface-2)', textAlign: 'center' }}>
                    <div style={{ fontSize: 11, color: 'var(--d-fg-3)', marginBottom: 2 }}>Lugares</div>
                    <div style={{ fontSize: 18, fontWeight: 700, color: 'var(--d-fg-1)' }}>{r.capacity || 15}</div>
                  </div>
                </div>

                {/* Paragens */}
                <div style={{ marginBottom: 14 }}>
                  <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--d-fg-1)', marginBottom: 8 }}>Percurso</div>
                  <div style={{ borderRadius: 10, overflow: 'hidden', border: '1px solid var(--d-border)' }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '9px 12px', background: 'rgba(2,165,134,0.06)' }}>
                      <div style={{ width: 10, height: 10, borderRadius: '50%', background: 'var(--nb-green)', flexShrink: 0 }} />
                      <span style={{ fontSize: 13, fontWeight: 600, color: 'var(--d-fg-1)', flex: 1 }}>{r.origin_city}</span>
                      <span style={{ fontSize: 11, color: 'var(--d-fg-3)' }}>Partida</span>
                    </div>
                    {(r.stops || []).map((s, i) => (
                      <div key={s.id || i} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '9px 12px', borderTop: '1px solid var(--d-border)' }}>
                        <div style={{ width: 10, height: 10, borderRadius: '50%', border: '2px solid var(--d-fg-3)', flexShrink: 0 }} />
                        <span style={{ fontSize: 13, color: 'var(--d-fg-1)', flex: 1 }}>{s.city_name}</span>
                        <span style={{ fontSize: 11, color: 'var(--d-fg-3)' }}>
                          {s.price_from_origin ? s.price_from_origin.toLocaleString('pt-CV') + ' CVE' : ''}
                          {s.minutes_from_origin ? (s.price_from_origin ? ' · ' : '') + s.minutes_from_origin + 'min' : ''}
                        </span>
                      </div>
                    ))}
                    <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '9px 12px', borderTop: '1px solid var(--d-border)', background: 'rgba(30,136,229,0.06)' }}>
                      <div style={{ width: 10, height: 10, borderRadius: '50%', background: 'var(--nb-info)', flexShrink: 0 }} />
                      <span style={{ fontSize: 13, fontWeight: 600, color: 'var(--d-fg-1)', flex: 1 }}>{r.destination_city}</span>
                      <span style={{ fontSize: 11, color: 'var(--d-fg-3)' }}>{r.base_price ? r.base_price.toLocaleString('pt-CV') + ' CVE' : ''}</span>
                    </div>
                  </div>
                  {(!r.stops || r.stops.length === 0) && (
                    <div style={{ fontSize: 12, color: 'var(--d-fg-3)', marginTop: 6, textAlign: 'center' }}>Rota directa sem paragens intermédias</div>
                  )}
                </div>

                {/* Quick action */}
                <button onClick={() => setPanelTab('booking')}
                  style={{ width: '100%', padding: '12px 0', borderRadius: 10, background: 'var(--nb-green)', color: '#fff', border: 'none', fontWeight: 600, fontSize: 14, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8 }}>
                  <Ico name="ticket" size={16} /> Reservar viagem
                </button>
              </>
            )}

            {/* ═══ TAB: Horários ═══ */}
            {panelTab === 'schedules' && (
              <>
                {r.schedules && r.schedules.length > 0 ? (
                  <div>
                    <div style={{ fontSize: 12, color: 'var(--d-fg-3)', marginBottom: 10 }}>
                      Horários regulares para esta rota. A disponibilidade real pode variar por dia.
                    </div>
                    <div style={{ borderRadius: 10, overflow: 'hidden', border: '1px solid var(--d-border)' }}>
                      {r.schedules.map((s, i) => (
                        <div key={s.id || i} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '10px 12px', borderTop: i > 0 ? '1px solid var(--d-border)' : 'none', background: i % 2 === 0 ? 'transparent' : 'var(--d-bg-surface-2)' }}>
                          <div style={{ minWidth: 50 }}>
                            <span style={{ fontSize: 16, fontWeight: 700, color: 'var(--nb-green)', fontVariantNumeric: 'tabular-nums' }}>{s.departure_time}</span>
                          </div>
                          <div style={{ flex: 1 }}>
                            <div style={{ fontSize: 12, color: 'var(--d-fg-1)', fontWeight: 500 }}>{s.day_label}</div>
                            {s.operator && (
                              <div style={{ fontSize: 11, color: 'var(--d-fg-3)', marginTop: 2 }}>
                                {s.operator.name}
                                {s.operator.rating && <span style={{ marginLeft: 6, color: '#f5a623' }}>{'★'} {s.operator.rating}</span>}
                              </div>
                            )}
                          </div>
                          <div style={{ textAlign: 'right' }}>
                            <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--d-fg-1)' }}>{s.price ? s.price.toLocaleString('pt-CV') + ' CVE' : ''}</div>
                            <div style={{ fontSize: 11, color: 'var(--d-fg-3)' }}>{s.capacity || r.capacity || 15} lugares</div>
                          </div>
                        </div>
                      ))}
                    </div>

                    {/* Operadores únicos */}
                    {(() => {
                      const ops = r.schedules.filter(s => s.operator).map(s => s.operator);
                      const unique = [...new Map(ops.map(o => [o.name, o])).values()];
                      if (unique.length === 0) return null;
                      return (
                        <div style={{ marginTop: 14 }}>
                          <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--d-fg-1)', marginBottom: 8 }}>Operadores</div>
                          <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                            {unique.map((op, i) => (
                              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '10px 12px', borderRadius: 10, border: '1px solid var(--d-border)' }}>
                                <div style={{ width: 36, height: 36, borderRadius: 8, background: 'rgba(2,165,134,0.10)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--nb-green)', flexShrink: 0 }}>
                                  <Ico name="user" size={16} />
                                </div>
                                <div style={{ flex: 1 }}>
                                  <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--d-fg-1)' }}>{op.name}</div>
                                  {op.rating && <div style={{ fontSize: 11, color: '#f5a623' }}>{'★'} {op.rating}</div>}
                                </div>
                                {op.phone && (
                                  <a href={'tel:+238' + op.phone} style={{ padding: '5px 10px', borderRadius: 6, background: 'rgba(2,165,134,0.10)', color: 'var(--nb-green)', fontSize: 12, fontWeight: 600, textDecoration: 'none', display: 'flex', alignItems: 'center', gap: 4 }}>
                                    <Ico name="phone" size={12} /> Ligar
                                  </a>
                                )}
                              </div>
                            ))}
                          </div>
                        </div>
                      );
                    })()}
                  </div>
                ) : (
                  <div style={{ padding: 30, textAlign: 'center', color: 'var(--d-fg-3)' }}>
                    <Ico name="clock" size={28} />
                    <p style={{ marginTop: 8, fontSize: 13 }}>Sem horários definidos.</p>
                  </div>
                )}
              </>
            )}

            {/* ═══ TAB: Fila Activa ═══ */}
            {panelTab === 'live' && (
              <LiveQueueTab route={r} />
            )}

            {/* ═══ TAB: Reservar ═══ */}
            {panelTab === 'booking' && (
              <>
                {/* Booking result banner */}
                {bookResult && (
                  <div style={{ padding: '12px 14px', borderRadius: 10, background: 'rgba(2,165,134,0.10)', border: '1px solid rgba(2,165,134,0.25)', marginBottom: 12 }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
                      <Ico name="check" size={14} />
                      <span style={{ fontSize: 12, fontWeight: 600, color: 'var(--nb-green)' }}>Última Reserva</span>
                    </div>
                    <div style={{ fontSize: 12, color: 'var(--d-fg-2)', lineHeight: 1.5 }}>
                      <strong>{bookResult.hash}</strong> &middot; {bookResult.date} &middot; {bookResult.time} &middot; {bookResult.seats} lug. &middot; {bookResult.price ? bookResult.price.toLocaleString('pt-CV') + ' CVE' : ''}
                    </div>
                  </div>
                )}

                {/* Date selection */}
                <div style={{ marginBottom: 12 }}>
                  <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--d-fg-1)', marginBottom: 8 }}>Selecionar data</div>
                  <div className="tk-tabs" style={{ flexWrap: 'wrap', gap: 6 }}>
                    {dateOptions.map(d => (
                      <button key={d.value} className={`tk-tab ${selDate === d.value ? 'on' : ''}`} onClick={() => setSelDate(d.value)} style={{ fontSize: 12 }}>
                        {d.label}
                      </button>
                    ))}
                  </div>
                </div>

                {/* Availability list */}
                <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--d-fg-1)', marginBottom: 8 }}>Horários disponíveis</div>
                {loadAvail ? (
                  <div style={{ display: 'flex', justifyContent: 'center', padding: '1.5rem 0' }}><div className="nb-spinner" /></div>
                ) : availability.length === 0 ? (
                  <div style={{ padding: '24px 0', textAlign: 'center', color: 'var(--d-fg-3)', fontSize: 13 }}>
                    <Ico name="clock" size={24} />
                    <p style={{ marginTop: 6 }}>Sem horários para esta data.</p>
                  </div>
                ) : (
                  <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                    {availability.map((a, i) => {
                      const pct = a.capacity > 0 ? Math.round((a.booked / a.capacity) * 100) : 0;
                      return (
                        <div key={i} style={{ padding: '10px 12px', borderRadius: 10, border: '1px solid var(--d-border)', background: a.available > 0 ? 'transparent' : 'var(--d-bg-surface-2)' }}>
                          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                            <span style={{ fontSize: 16, fontWeight: 700, color: a.available > 0 ? 'var(--nb-green)' : 'var(--d-fg-3)', fontVariantNumeric: 'tabular-nums', minWidth: 50 }}>{a.departure_time}</span>
                            <div style={{ flex: 1 }}>
                              <div style={{ fontSize: 12, color: 'var(--d-fg-2)' }}>{a.vehicle_label}</div>
                              {a.operator && <div style={{ fontSize: 11, color: 'var(--d-fg-3)' }}>{a.operator.name}</div>}
                            </div>
                            <div style={{ textAlign: 'right' }}>
                              <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--d-fg-1)' }}>{a.price ? a.price.toLocaleString('pt-CV') + ' CVE' : ''}</div>
                            </div>
                          </div>
                          {/* Occupation bar */}
                          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 6 }}>
                            <div style={{ flex: 1, height: 4, borderRadius: 2, background: 'var(--d-bg-surface-2)', overflow: 'hidden' }}>
                              <div style={{ width: pct + '%', height: '100%', borderRadius: 2, background: a.available === 0 ? 'var(--nb-danger)' : pct > 70 ? '#f5a623' : 'var(--nb-green)', transition: 'width 0.3s' }} />
                            </div>
                            <span style={{ fontSize: 11, fontWeight: 600, color: a.available > 0 ? 'var(--nb-green)' : 'var(--nb-danger)', minWidth: 70, textAlign: 'right' }}>
                              {a.available > 0 ? a.available + '/' + a.capacity : 'Lotado'}
                            </span>
                            {a.available > 0 && (
                              <button onClick={() => setBookingModal(a)}
                                style={{ padding: '5px 14px', borderRadius: 6, background: 'var(--nb-green)', color: '#fff', border: 'none', fontSize: 12, fontWeight: 600, cursor: 'pointer', flexShrink: 0 }}>
                                Reservar
                              </button>
                            )}
                          </div>
                        </div>
                      );
                    })}
                  </div>
                )}
              </>
            )}
          </>
        )}
      </div>

      {/* Booking Modal */}
      {bookingModal && (
        <RouteBookingModal
          schedule={bookingModal}
          route={r}
          selDate={selDate}
          addToast={addToast}
          signedIn={signedIn}
          platformFee={platformFees?.car_route_platform_fee || 0}
          onClose={() => setBookingModal(null)}
        />
      )}
    </aside>
  );
}

// ─── Routes List View ───────────────────────────────────────
// Mock data para validação de design
const MOCK_ROUTES = [
  { id: 1, hash: 'r1', origin_city: 'Praia', origin_island: 'Santiago', destination_city: 'Assomada', destination_island: 'Santiago', distance_km: 38, duration_minutes: 50, base_price: 250, vehicle_type: 'hiace', vehicle_label: 'Toyota Hiace', capacity: 15, featured: true, stops_count: 2 },
  { id: 2, hash: 'r2', origin_city: 'Praia', origin_island: 'Santiago', destination_city: 'Tarrafal', destination_island: 'Santiago', distance_km: 72, duration_minutes: 95, base_price: 400, vehicle_type: 'hiace', vehicle_label: 'Toyota Hiace', capacity: 15, featured: true, stops_count: 4 },
  { id: 3, hash: 'r3', origin_city: 'Praia', origin_island: 'Santiago', destination_city: 'Cidade Velha', destination_island: 'Santiago', distance_km: 15, duration_minutes: 25, base_price: 150, vehicle_type: 'hilux', vehicle_label: 'Hilux', capacity: 8, featured: false, stops_count: 0 },
  { id: 4, hash: 'r4', origin_city: 'Praia', origin_island: 'Santiago', destination_city: 'São Domingos', destination_island: 'Santiago', distance_km: 18, duration_minutes: 20, base_price: 150, vehicle_type: 'hiace', vehicle_label: 'Toyota Hiace', capacity: 15, featured: false, stops_count: 1 },
  { id: 5, hash: 'r5', origin_city: 'Mindelo', origin_island: 'São Vicente', destination_city: 'Ribeira Grande', destination_island: 'Santo Antão', distance_km: 45, duration_minutes: 70, base_price: 350, vehicle_type: 'minibus', vehicle_label: 'Minibus', capacity: 20, featured: true, stops_count: 3 },
  { id: 6, hash: 'r6', origin_city: 'Assomada', origin_island: 'Santiago', destination_city: 'Tarrafal', destination_island: 'Santiago', distance_km: 34, duration_minutes: 45, base_price: 200, vehicle_type: 'hiace', vehicle_label: 'Toyota Hiace', capacity: 15, featured: false, stops_count: 2 },
  { id: 7, hash: 'r7', origin_city: 'Praia', origin_island: 'Santiago', destination_city: 'Calheta', destination_island: 'Santiago', distance_km: 55, duration_minutes: 70, base_price: 350, vehicle_type: 'hiace', vehicle_label: 'Toyota Hiace', capacity: 15, featured: false, stops_count: 3 },
  { id: 8, hash: 'r8', origin_city: 'Espargos', origin_island: 'Sal', destination_city: 'Santa Maria', destination_island: 'Sal', distance_km: 18, duration_minutes: 20, base_price: 200, vehicle_type: 'hilux', vehicle_label: 'Hilux', capacity: 8, featured: true, stops_count: 0 },
  { id: 9, hash: 'r9', origin_city: 'Sal Rei', origin_island: 'Boa Vista', destination_city: 'Rabil', destination_island: 'Boa Vista', distance_km: 8, duration_minutes: 12, base_price: 100, vehicle_type: 'hilux', vehicle_label: 'Hilux', capacity: 8, featured: false, stops_count: 0 },
  { id: 10, hash: 'r10', origin_city: 'São Filipe', origin_island: 'Fogo', destination_city: 'Mosteiros', destination_island: 'Fogo', distance_km: 30, duration_minutes: 45, base_price: 300, vehicle_type: 'hiace', vehicle_label: 'Toyota Hiace', capacity: 15, featured: false, stops_count: 1 },
];

const MOCK_ROUTE_DETAIL = {
  r1: { stops: [{ id: 1, city_name: 'São Domingos', stop_order: 1, price_from_origin: 150, minutes_from_origin: 15 }, { id: 2, city_name: 'São Jorge dos Órgãos', stop_order: 2, price_from_origin: 200, minutes_from_origin: 30 }], schedules: [{ id: 1, departure_time: '07:00', day_type: 'daily', day_label: 'Diário', price: 250, capacity: 15, operator: { name: 'Transcor Santiago', phone: '9912345', rating: 4.5 } }, { id: 2, departure_time: '08:30', day_type: 'daily', day_label: 'Diário', price: 250, capacity: 15, operator: { name: 'Sol Atlântico', phone: '9923456', rating: 4.2 } }, { id: 3, departure_time: '10:00', day_type: 'weekday', day_label: 'Seg-Sex', price: 250, capacity: 15, operator: { name: 'Transcor Santiago', phone: '9912345', rating: 4.5 } }, { id: 4, departure_time: '12:00', day_type: 'daily', day_label: 'Diário', price: 250, capacity: 15, operator: { name: 'Hiace Express', phone: '9934567', rating: 4.0 } }, { id: 5, departure_time: '15:00', day_type: 'daily', day_label: 'Diário', price: 250, capacity: 15, operator: null }, { id: 6, departure_time: '17:30', day_type: 'weekday', day_label: 'Seg-Sex', price: 250, capacity: 15, operator: { name: 'Sol Atlântico', phone: '9923456', rating: 4.2 } }] },
  r2: { stops: [{ id: 3, city_name: 'São Domingos', stop_order: 1, price_from_origin: 150, minutes_from_origin: 15 }, { id: 4, city_name: 'Assomada', stop_order: 2, price_from_origin: 250, minutes_from_origin: 50 }, { id: 5, city_name: 'Santa Catarina', stop_order: 3, price_from_origin: 300, minutes_from_origin: 65 }, { id: 6, city_name: 'Chã Bom', stop_order: 4, price_from_origin: 350, minutes_from_origin: 80 }], schedules: [{ id: 7, departure_time: '06:30', day_type: 'daily', day_label: 'Diário', price: 400, capacity: 15, operator: { name: 'Transcor Santiago', phone: '9912345', rating: 4.5 } }, { id: 8, departure_time: '09:00', day_type: 'daily', day_label: 'Diário', price: 400, capacity: 15, operator: { name: 'Hiace Express', phone: '9934567', rating: 4.0 } }, { id: 9, departure_time: '14:00', day_type: 'weekday', day_label: 'Seg-Sex', price: 400, capacity: 15, operator: null }] },
  r5: { stops: [{ id: 10, city_name: 'Porto Novo', stop_order: 1, price_from_origin: 150, minutes_from_origin: 25 }, { id: 11, city_name: 'Paúl', stop_order: 2, price_from_origin: 250, minutes_from_origin: 45 }, { id: 12, city_name: 'Ponta do Sol', stop_order: 3, price_from_origin: 300, minutes_from_origin: 55 }], schedules: [{ id: 10, departure_time: '07:00', day_type: 'daily', day_label: 'Diário', price: 350, capacity: 20, operator: { name: 'Sotav Express', phone: '9945678', rating: 4.3 } }, { id: 11, departure_time: '13:00', day_type: 'daily', day_label: 'Diário', price: 350, capacity: 20, operator: null }] },
  r8: { stops: [], schedules: [{ id: 12, departure_time: '08:00', day_type: 'daily', day_label: 'Diário', price: 200, capacity: 8, operator: { name: 'Sal Tours', phone: '9956789', rating: 4.6 } }, { id: 13, departure_time: '11:00', day_type: 'daily', day_label: 'Diário', price: 200, capacity: 8, operator: { name: 'Sal Tours', phone: '9956789', rating: 4.6 } }, { id: 14, departure_time: '16:00', day_type: 'daily', day_label: 'Diário', price: 200, capacity: 8, operator: null }] },
};

const MOCK_AVAILABILITY = [
  { schedule_id: 1, departure_time: '07:00', day_type: 'daily', day_label: 'Diário', vehicle_type: 'hiace', vehicle_label: 'Toyota Hiace', price: 250, capacity: 15, booked: 12, available: 3, operator: { name: 'Transcor Santiago', phone: '9912345', rating: 4.5 } },
  { schedule_id: 2, departure_time: '08:30', day_type: 'daily', day_label: 'Diário', vehicle_type: 'hiace', vehicle_label: 'Toyota Hiace', price: 250, capacity: 15, booked: 8, available: 7, operator: { name: 'Sol Atlântico', phone: '9923456', rating: 4.2 } },
  { schedule_id: 3, departure_time: '10:00', day_type: 'weekday', day_label: 'Seg-Sex', vehicle_type: 'hiace', vehicle_label: 'Toyota Hiace', price: 250, capacity: 15, booked: 15, available: 0, operator: { name: 'Transcor Santiago', phone: '9912345', rating: 4.5 } },
  { schedule_id: 4, departure_time: '12:00', day_type: 'daily', day_label: 'Diário', vehicle_type: 'hiace', vehicle_label: 'Toyota Hiace', price: 250, capacity: 15, booked: 5, available: 10, operator: { name: 'Hiace Express', phone: '9934567', rating: 4.0 } },
  { schedule_id: 5, departure_time: '15:00', day_type: 'daily', day_label: 'Diário', vehicle_type: 'hiace', vehicle_label: 'Toyota Hiace', price: 250, capacity: 15, booked: 0, available: 15, operator: null },
  { schedule_id: 6, departure_time: '17:30', day_type: 'weekday', day_label: 'Seg-Sex', vehicle_type: 'hiace', vehicle_label: 'Toyota Hiace', price: 250, capacity: 15, booked: 9, available: 6, operator: { name: 'Sol Atlântico', phone: '9923456', rating: 4.2 } },
];

function RoutesListView({ onSelectRoute }) {
  const [island, setIsland] = useState('all');
  const [vehicle, setVehicle] = useState('all');
  const [search, setSearch] = useState('');
  const [sortBy, setSortBy] = useState('popular');
  const [routes, setRoutes] = useState(MOCK_ROUTES);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  const [showFilters, setShowFilters] = useState(false);
  const [lookupCode, setLookupCode] = useState('');
  const [lookupResult, setLookupResult] = useState(null);
  const [lookupLoading, setLookupLoading] = useState(false);

  // Mock: filtrar localmente em vez de chamar API
  useEffect(() => {
    let filtered = [...MOCK_ROUTES];
    if (island !== 'all') {
      const islandMap = { 'santiago': 'Santiago', 'sal': 'Sal', 'sao-vicente': 'São Vicente', 'boa-vista': 'Boa Vista', 'fogo': 'Fogo', 'santo-antao': 'Santo Antão', 'maio': 'Maio', 'sao-nicolau': 'São Nicolau' };
      const name = islandMap[island];
      if (name) filtered = filtered.filter(r => r.origin_island === name || r.destination_island === name);
    }
    if (vehicle !== 'all') filtered = filtered.filter(r => r.vehicle_type === vehicle);
    if (search.trim()) {
      const q = search.trim().toLowerCase();
      filtered = filtered.filter(r => r.origin_city.toLowerCase().includes(q) || r.destination_city.toLowerCase().includes(q));
    }
    if (sortBy === 'price_asc') filtered.sort((a, b) => a.base_price - b.base_price);
    else if (sortBy === 'price_desc') filtered.sort((a, b) => b.base_price - a.base_price);
    else if (sortBy === 'duration') filtered.sort((a, b) => (a.duration_minutes || 999) - (b.duration_minutes || 999));
    else filtered.sort((a, b) => (b.featured ? 1 : 0) - (a.featured ? 1 : 0));
    setRoutes(filtered);
  }, [island, vehicle, sortBy, search]);

  const doSearch = () => {};

  const doLookup = () => {
    if (!lookupCode.trim()) return;
    setLookupLoading(true);
    setTimeout(() => {
      setLookupResult({ route: 'Praia → Assomada', date: '22/05/2026', time: '08:30', passenger_name: 'João Silva', seats: 2, price: 500, status: 'confirmed', operator: { name: 'Sol Atlântico', phone: '9923456' } });
      setLookupLoading(false);
    }, 500);
  };

  const activeFilters = [island !== 'all', vehicle !== 'all'].filter(Boolean).length;

  return (
    <>
      {/* Search bar */}
      <div style={{ display: 'flex', gap: 8, marginBottom: 10 }}>
        <div style={{ flex: 1, position: 'relative' }}>
          <input type="text" value={search} onChange={(e) => setSearch(e.target.value)} onKeyDown={(e) => e.key === 'Enter' && doSearch()}
            placeholder={_t('webapp.routes_search_placeholder')}
            style={{ width: '100%', padding: '10px 14px 10px 36px', borderRadius: 10, border: '1px solid var(--d-border)', background: 'var(--d-bg-surface)', fontSize: 14, color: 'var(--d-fg-1)', outline: 'none', boxSizing: 'border-box' }} />
          <span style={{ position: 'absolute', left: 12, top: '50%', transform: 'translateY(-50%)', color: 'var(--d-fg-3)' }}>
            <Ico name="search" size={16} />
          </span>
        </div>
        <button onClick={doSearch} style={{ padding: '0 16px', borderRadius: 10, background: 'var(--nb-green)', color: '#fff', border: 'none', fontWeight: 600, cursor: 'pointer', fontSize: 14 }}>
          Pesquisar
        </button>
        <button onClick={() => setShowFilters(!showFilters)} style={{ padding: '0 12px', borderRadius: 10, background: showFilters ? 'var(--nb-green)' : 'var(--d-bg-surface)', color: showFilters ? '#fff' : 'var(--d-fg-2)', border: '1px solid var(--d-border)', cursor: 'pointer', position: 'relative' }}>
          <Ico name="settings" size={16} />
          {activeFilters > 0 && <span style={{ position: 'absolute', top: -4, right: -4, width: 16, height: 16, borderRadius: '50%', background: 'var(--nb-danger)', color: '#fff', fontSize: 10, fontWeight: 700, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{activeFilters}</span>}
        </button>
      </div>

      {/* Island tabs */}
      <div className="tk-tabs" style={{ marginBottom: 8, flexWrap: 'wrap', gap: 6 }}>
        {CV_ISLANDS_CARS.map(a => (
          <button key={a.code} className={`tk-tab ${island === a.code ? 'on' : ''}`} onClick={() => setIsland(a.code)}>
            {a.name}
          </button>
        ))}
      </div>

      {/* Advanced filters */}
      {showFilters && (
        <div style={{ display: 'flex', gap: 10, marginBottom: 12, flexWrap: 'wrap', padding: '12px 14px', borderRadius: 10, background: 'var(--d-bg-surface-2)', border: '1px solid var(--d-border)' }}>
          <div style={{ flex: 1, minWidth: 140 }}>
            <label style={{ fontSize: 11, fontWeight: 600, color: 'var(--d-fg-3)', marginBottom: 4, display: 'block' }}>{_t('webapp.routes_vehicle_type')}</label>
            <select value={vehicle} onChange={e => setVehicle(e.target.value)} style={{ width: '100%', padding: '8px 10px', borderRadius: 8, border: '1px solid var(--d-border)', background: 'var(--d-bg-surface)', color: 'var(--d-fg-1)', fontSize: 13 }}>
              {ROUTE_VEHICLE_TYPES.map(v => <option key={v.id} value={v.id}>{v.label}</option>)}
            </select>
          </div>
          <div style={{ flex: 1, minWidth: 140 }}>
            <label style={{ fontSize: 11, fontWeight: 600, color: 'var(--d-fg-3)', marginBottom: 4, display: 'block' }}>{_t('webapp.routes_sort')}</label>
            <select value={sortBy} onChange={e => setSortBy(e.target.value)} style={{ width: '100%', padding: '8px 10px', borderRadius: 8, border: '1px solid var(--d-border)', background: 'var(--d-bg-surface)', color: 'var(--d-fg-1)', fontSize: 13 }}>
              <option value="popular">{_t('webapp.routes_sort_popular')}</option>
              <option value="price_asc">{_t('webapp.routes_sort_price_asc')}</option>
              <option value="price_desc">{_t('webapp.routes_sort_price_desc')}</option>
              <option value="duration">{_t('webapp.routes_sort_duration')}</option>
            </select>
          </div>
          {/* Consultar reserva */}
          <div style={{ flex: 2, minWidth: 200 }}>
            <label style={{ fontSize: 11, fontWeight: 600, color: 'var(--d-fg-3)', marginBottom: 4, display: 'block' }}>{_t('webapp.routes_lookup_label')}</label>
            <div style={{ display: 'flex', gap: 6 }}>
              <input type="text" value={lookupCode} onChange={e => setLookupCode(e.target.value)} onKeyDown={e => e.key === 'Enter' && doLookup()}
                placeholder={_t('webapp.routes_booking_code')}
                style={{ flex: 1, padding: '8px 10px', borderRadius: 8, border: '1px solid var(--d-border)', background: 'var(--d-bg-surface)', color: 'var(--d-fg-1)', fontSize: 13 }} />
              <button onClick={doLookup} disabled={lookupLoading}
                style={{ padding: '8px 12px', borderRadius: 8, background: 'var(--nb-green)', color: '#fff', border: 'none', fontSize: 12, fontWeight: 600, cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: 4 }}>
                {lookupLoading ? <><span className="btn-spinner" style={{ borderColor: 'rgba(255,255,255,0.3)', borderTopColor: '#fff' }} /> </> : _t('webapp.routes_view')}
              </button>
            </div>
          </div>
        </div>
      )}

      {/* Lookup result */}
      {lookupResult && (
        <div style={{ padding: '12px 14px', borderRadius: 10, marginBottom: 12, background: lookupResult.error ? 'rgba(220,53,69,0.08)' : 'rgba(2,165,134,0.08)', border: '1px solid ' + (lookupResult.error ? 'rgba(220,53,69,0.2)' : 'rgba(2,165,134,0.2)') }}>
          {lookupResult.error ? (
            <div style={{ fontSize: 13, color: 'var(--nb-danger)' }}>{_t('webapp.routes_booking_not_found')}</div>
          ) : (
            <div style={{ fontSize: 12, color: 'var(--d-fg-2)', lineHeight: 1.6 }}>
              <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--d-fg-1)', marginBottom: 4 }}>{_t('webapp.routes_booking_found')}</div>
              <div><strong>{_t('webapp.routes_route')}:</strong> {lookupResult.route}</div>
              <div><strong>{_t('webapp.routes_date')}:</strong> {lookupResult.date}{lookupResult.time ? ' ' + _t('webapp.routes_at') + ' ' + lookupResult.time : ''}</div>
              <div><strong>{_t('webapp.routes_passenger')}:</strong> {lookupResult.passenger_name}</div>
              <div><strong>{_t('webapp.routes_seats')}:</strong> {lookupResult.seats}</div>
              <div><strong>{_t('webapp.routes_total')}:</strong> {lookupResult.price ? lookupResult.price.toLocaleString('pt-CV') + ' CVE' : '—'}</div>
              <div><strong>{_t('webapp.routes_status')}:</strong> <span style={{ fontWeight: 600, color: lookupResult.status === 'confirmed' ? 'var(--nb-green)' : lookupResult.status === 'cancelled' ? 'var(--nb-danger)' : 'var(--d-fg-2)' }}>
                {{ pending: _t('webapp.routes_st_pending'), confirmed: _t('webapp.routes_st_confirmed'), cancelled: _t('webapp.routes_st_cancelled'), completed: _t('webapp.routes_st_completed'), no_show: _t('webapp.routes_st_no_show') }[lookupResult.status] || lookupResult.status}
              </span></div>
              {lookupResult.operator && <div><strong>{_t('webapp.routes_operator')}:</strong> {lookupResult.operator.name}{lookupResult.operator.phone ? ' · ' + lookupResult.operator.phone : ''}</div>}
            </div>
          )}
          <button onClick={() => setLookupResult(null)} style={{ marginTop: 8, fontSize: 11, color: 'var(--d-fg-3)', background: 'none', border: 'none', cursor: 'pointer', textDecoration: 'underline' }}>{_t('webapp.routes_close')}</button>
        </div>
      )}

      {/* Stats */}
      {!loading && routes.length > 0 && (
        <div style={{ display: 'flex', gap: 10, marginBottom: 12 }}>
          <div style={{ flex: 1, minWidth: 90, padding: '10px 14px', borderRadius: 10, background: 'var(--d-bg-surface)', border: '1px solid var(--d-border)', textAlign: 'center' }}>
            <div style={{ fontSize: 20, fontWeight: 700, color: 'var(--d-fg-1)' }}>{routes.length}</div>
            <div style={{ fontSize: 11, color: 'var(--d-fg-3)' }}>{_t('webapp.routes_routes')}</div>
          </div>
        </div>
      )}

      {/* Route list */}
      {loading ? (
        <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: 200 }}>
          <div className="nb-spinner" />
          <span style={{ marginLeft: 10, color: 'var(--nb-fg-3)' }}>{_t('webapp.routes_loading')}</span>
        </div>
      ) : error ? (
        <div style={{ padding: 40, textAlign: 'center', color: 'var(--nb-danger)' }}>
          <Ico name="wifi" size={32} />
          <p style={{ marginTop: 8 }}>{error}</p>
          <button onClick={doSearch} style={{ marginTop: 12, padding: '8px 16px', borderRadius: 8, background: 'var(--nb-green)', color: '#fff', fontWeight: 600, border: 'none', cursor: 'pointer' }}>{_t('webapp.cars_retry')}</button>
        </div>
      ) : routes.length === 0 ? (
        <div style={{ padding: 40, textAlign: 'center', color: 'var(--nb-fg-3)' }}>
          <Ico name="map" size={32} />
          <p style={{ marginTop: 8 }}>{_t('webapp.routes_none_found')}</p>
          <p style={{ fontSize: 12, marginTop: 4 }}>{_t('webapp.routes_adjust_filters')}</p>
        </div>
      ) : (
        <div className="tk-list">
          {routes.map((r, i) => <RouteCard key={r.id || i} route={r} onSelect={onSelectRoute} />)}
        </div>
      )}
    </>
  );
}

// ─── Rent List View (ex-CarsView content) ───────────────────
function RentListView({ onSelectCar }) {
  const [island, setIsland] = useState('all');
  const [listingType, setListingType] = useState('all');
  const [bodyType, setBodyType] = useState('all');
  const [fuelType, setFuelType] = useState('all');
  const [search, setSearch] = useState('');
  const [sortBy, setSortBy] = useState('recent');
  const [cars, setCars] = useState([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  const fetchCars = useCallback(() => {
    setLoading(true);
    setError(null);
    const params = {};
    if (island !== 'all') params.island = island;
    if (listingType !== 'all') params.type = listingType;
    if (bodyType !== 'all') params.body = bodyType;
    if (fuelType !== 'all') params.fuel = fuelType;
    if (search.trim()) params.q = search.trim();
    params.sort = sortBy;
    API.get('/cars', params)
      .then(res => { setCars(Array.isArray(res.data) ? res.data : []); setLoading(false); })
      .catch(() => { setError(_t('webapp.cars_load_error')); setLoading(false); });
  }, [island, listingType, bodyType, fuelType, search, sortBy]);

  useEffect(() => { fetchCars(); }, [island, listingType, bodyType, fuelType, sortBy]);

  const activeFilters = [island !== 'all', bodyType !== 'all', fuelType !== 'all'].filter(Boolean).length;

  return (
    <>
      {/* Search */}
      <div style={{ position: 'relative', marginBottom: 10 }}>
        <span style={{ position: 'absolute', left: 12, top: '50%', transform: 'translateY(-50%)', color: 'var(--d-fg-3)' }}><Ico name="search" size={15} /></span>
        <input type="text" value={search} onChange={(e) => setSearch(e.target.value)} onKeyDown={(e) => e.key === 'Enter' && fetchCars()}
          placeholder={_t('webapp.cars_search_placeholder')}
          style={{ width: '100%', padding: '10px 14px 10px 36px', borderRadius: 10, border: '1px solid var(--d-border)', background: 'var(--d-bg-surface)', fontSize: 14, color: 'var(--d-fg-1)', outline: 'none', boxSizing: 'border-box' }} />
      </div>

      {/* Listing type tabs */}
      <div className="tk-tabs" style={{ marginBottom: 8, gap: 4 }}>
        {CAR_TYPES.map(t => (
          <button key={t.id} className={`tk-tab ${listingType === t.id ? 'on' : ''}`} onClick={() => setListingType(t.id)}>{t.label}</button>
        ))}
      </div>

      {/* Filters row — compact selects */}
      <div style={{ display: 'flex', gap: 6, marginBottom: 10, flexWrap: 'wrap' }}>
        <select value={island} onChange={e => setIsland(e.target.value)} style={{ padding: '6px 10px', borderRadius: 8, border: '1px solid var(--d-border)', background: 'var(--d-bg-surface)', color: 'var(--d-fg-1)', fontSize: 12 }}>
          {CV_ISLANDS_CARS.map(a => <option key={a.code} value={a.code}>{a.name}</option>)}
        </select>
        <select value={bodyType} onChange={e => setBodyType(e.target.value)} style={{ padding: '6px 10px', borderRadius: 8, border: '1px solid var(--d-border)', background: 'var(--d-bg-surface)', color: 'var(--d-fg-1)', fontSize: 12 }}>
          <option value="all">{_t('webapp.cars_body_type')}</option>
          {CAR_BODY_TYPES.filter(b => b.id !== 'all').map(b => <option key={b.id} value={b.id}>{b.label}</option>)}
        </select>
        <select value={fuelType} onChange={e => setFuelType(e.target.value)} style={{ padding: '6px 10px', borderRadius: 8, border: '1px solid var(--d-border)', background: 'var(--d-bg-surface)', color: 'var(--d-fg-1)', fontSize: 12 }}>
          <option value="all">{_t('webapp.cars_fuel_type')}</option>
          {CAR_FUEL_TYPES.filter(f => f.id !== 'all').map(f => <option key={f.id} value={f.id}>{f.label}</option>)}
        </select>
        <select value={sortBy} onChange={e => setSortBy(e.target.value)} style={{ padding: '6px 10px', borderRadius: 8, border: '1px solid var(--d-border)', background: 'var(--d-bg-surface)', color: 'var(--d-fg-1)', fontSize: 12 }}>
          <option value="recent">{_t('webapp.cars_sort_recent')}</option>
          <option value="price_asc">{_t('webapp.cars_sort_price_asc')}</option>
          <option value="price_desc">{_t('webapp.cars_sort_price_desc')}</option>
          <option value="year_desc">{_t('webapp.cars_sort_year')}</option>
          <option value="km_asc">{_t('webapp.cars_sort_km')}</option>
        </select>
        {activeFilters > 0 && (
          <button onClick={() => { setIsland('all'); setBodyType('all'); setFuelType('all'); }} style={{ padding: '6px 10px', borderRadius: 8, border: 'none', background: 'rgba(231,76,60,0.1)', color: 'var(--nb-red, #e74c3c)', fontSize: 11, fontWeight: 600, cursor: 'pointer' }}>
            {_t('webapp.cars_clear_filters')} ({activeFilters})
          </button>
        )}
      </div>

      {/* Results count */}
      {!loading && !error && (
        <div style={{ fontSize: 12, color: 'var(--d-fg-3)', marginBottom: 8 }}>
          {cars.length} {cars.length !== 1 ? _t('webapp.cars_vehicles') : _t('webapp.cars_vehicle')}
        </div>
      )}

      {/* Car grid */}
      {loading ? (
        <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: 200 }}>
          <div className="nb-spinner" />
          <span style={{ marginLeft: 10, color: 'var(--nb-fg-3)' }}>{_t('webapp.cars_loading')}</span>
        </div>
      ) : error ? (
        <div style={{ padding: 40, textAlign: 'center', color: 'var(--nb-danger)' }}>
          <Ico name="wifi" size={32} />
          <p style={{ marginTop: 8 }}>{error}</p>
          <button onClick={fetchCars} style={{ marginTop: 12, padding: '8px 16px', borderRadius: 8, background: 'var(--nb-green)', color: '#fff', fontWeight: 600, border: 'none', cursor: 'pointer' }}>{_t('webapp.cars_retry')}</button>
        </div>
      ) : cars.length === 0 ? (
        <div style={{ padding: 40, textAlign: 'center', color: 'var(--nb-fg-3)' }}>
          <Ico name="car" size={32} />
          <p style={{ marginTop: 8 }}>{_t('webapp.cars_none_found')}</p>
          <p style={{ fontSize: 12, marginTop: 4 }}>{_t('webapp.cars_adjust_filters')}</p>
        </div>
      ) : (
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(220px, 1fr))', gap: 10 }}>
          {cars.map((c, i) => <CarCard key={c.id || i} car={c} onSelect={(car) => onSelectCar && onSelectCar(car)} />)}
        </div>
      )}
    </>
  );
}

// ─── Lavagem — Dados e Constantes ────────────────────────────
// Fallback categories (used only when API data is not yet loaded)
const WASH_CATEGORIES = [
  { id: 'lavagem', label: _t('webapp.wash_cat_wash'), icon: 'carWash', desc: _t('webapp.wash_cat_wash_desc') },
  { id: 'limpeza', label: _t('webapp.wash_cat_clean'), icon: 'sparkle', desc: _t('webapp.wash_cat_clean_desc') },
];

// Fallback item types (used only when API categories don't include item_types)
const WASH_ITEM_TYPES = {
  lavagem: [
    { id: 'all', label: 'Todos', mult: 1.0 },
    { id: 'ligeiro', label: 'Ligeiro', mult: 1.0 },
    { id: 'suv', label: 'SUV/Jipe', mult: 1.3 },
    { id: 'carrinha', label: 'Carrinha', mult: 1.5 },
    { id: 'mota', label: 'Mota', mult: 0.6 },
    { id: 'outros', label: 'Outros', mult: 1.0 },
  ],
  limpeza: [
    { id: 'all', label: 'Todos', mult: 1.0 },
    { id: 'banco_carro', label: 'Banco de carro', mult: 1.0 },
    { id: 'sofa_2', label: 'Sofá 2 lugares', mult: 1.2 },
    { id: 'sofa_3', label: 'Sofá 3 lugares', mult: 1.5 },
    { id: 'poltrona', label: 'Poltrona', mult: 0.8 },
    { id: 'cadeira', label: 'Cadeira', mult: 0.5 },
    { id: 'tapete_peq', label: 'Tapete pequeno', mult: 0.5 },
    { id: 'tapete_grd', label: 'Tapete grande', mult: 1.0 },
    { id: 'colchao_s', label: 'Colchão solteiro', mult: 1.0 },
    { id: 'colchao_c', label: 'Colchão casal', mult: 1.4 },
    { id: 'cortinas', label: 'Cortinas (par)', mult: 0.7 },
    { id: 'outros', label: 'Outros', mult: 1.0 },
  ],
};

// Fallback services (used only when API company services are not loaded)
const WASH_SERVICES = {
  lavagem: [
    { id: 'v_exterior', label: 'Lavagem Exterior', icon: 'droplet', desc: 'Carroçaria, jantes e vidros', price: 800 },
    { id: 'v_interior', label: 'Lavagem Interior', icon: 'sparkle', desc: 'Aspiração, estofos, painel e tapetes', price: 1000 },
    { id: 'v_completa', label: 'Lavagem Completa', icon: 'star', desc: 'Exterior + Interior', price: 1500, popular: true },
    { id: 'v_premium', label: 'Detailing Premium', icon: 'shield', desc: 'Polimento, cera e impermeabilização', price: 3500 },
    { id: 'v_motor', label: 'Lavagem de Motor', icon: 'zap', desc: 'Desengordurante do motor', price: 1200 },
    { id: 'v_rapida', label: 'Lavagem Rápida', icon: 'clock', desc: 'Express em 15 minutos', price: 500 },
  ],
  limpeza: [
    { id: 'e_limpeza', label: 'Limpeza Profunda', icon: 'sparkle', desc: 'Aspiração e lavagem a seco', price: 600, popular: true },
    { id: 'e_manchas', label: 'Remoção de Manchas', icon: 'droplet', desc: 'Tratamento de manchas difíceis', price: 400 },
    { id: 'e_higienizacao', label: 'Higienização', icon: 'shield', desc: 'Desinfecção e eliminação de odores', price: 500 },
    { id: 'e_impermeabilizacao', label: 'Impermeabilização', icon: 'lock', desc: 'Protecção contra líquidos e manchas', price: 800 },
    { id: 'c_lavagem', label: 'Lavagem Completa', icon: 'droplet', desc: 'Lavagem profunda do item', price: 500 },
    { id: 'c_higienizacao', label: 'Higienização', icon: 'shield', desc: 'Desinfecção e anti-ácaros', price: 600 },
    { id: 'c_manchas', label: 'Remoção de Manchas', icon: 'sparkle', desc: 'Tratamento de manchas e odores', price: 400 },
  ],
};

const CARWASH_ISLANDS = ['Santiago', 'São Vicente', 'Sal', 'Santo Antão', 'Fogo', 'Boa Vista'];

// ─── Car Wash Company Card ──────────────────────────────────
function CarWashCard({ company, onSelect }) {
  const initials = company.name.split(' ').map(w => w[0]).join('').substring(0, 2).toUpperCase();
  const accepts = company.accepting_bookings !== false && company.open !== false;
  const cats = company.categories || [];
  const hasWash = cats.includes('lavagem');
  const hasClean = cats.includes('limpeza');
  const minPrice = company.min_price || company.minPrice;
  const rating = company.rating;
  const reviews = company.reviews || company.review_count || 0;
  const dist = company.distance;

  return (
    <div onClick={() => onSelect(company)} style={{
      display: 'flex', alignItems: 'center', gap: 14, padding: '14px 16px',
      background: 'var(--d-bg-surface)', borderRadius: 12, cursor: 'pointer',
      border: '1px solid var(--d-border)', transition: 'box-shadow 150ms ease',
    }}
    onMouseEnter={e => e.currentTarget.style.boxShadow = 'var(--d-shadow-card)'}
    onMouseLeave={e => e.currentTarget.style.boxShadow = 'none'}
    >
      {company.logo ? (
        <img src={company.logo} alt="" style={{ width: 48, height: 48, borderRadius: 10, objectFit: 'cover', flexShrink: 0 }} />
      ) : (
        <div style={{
          width: 48, height: 48, borderRadius: 10, display: 'flex', alignItems: 'center', justifyContent: 'center',
          background: 'rgba(2,165,134,0.12)', color: 'var(--nb-green)', flexShrink: 0,
          fontSize: 15, fontWeight: 700,
        }}>{initials}</div>
      )}
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
          <span style={{ fontWeight: 600, fontSize: 14, color: 'var(--d-fg-1)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{company.name}</span>
          {company.featured && <span style={{ padding: '2px 6px', borderRadius: 8, fontSize: 9, fontWeight: 700, background: 'rgba(245,158,11,0.12)', color: '#d97706', letterSpacing: '0.04em' }}>{_t('webapp.wash_featured')}</span>}
        </div>
        <div style={{ fontSize: 12, color: 'var(--d-fg-3)', marginTop: 2, display: 'flex', alignItems: 'center', gap: 4, flexWrap: 'wrap' }}>
          {company.zone && <span>{company.zone}</span>}
          {company.island && <span>— {company.island}</span>}
          {!company.zone && company.island && <span>{company.island}</span>}
          {dist != null && <span style={{ color: 'var(--d-fg-3)' }}>· {dist < 1 ? Math.round(dist * 1000) + 'm' : dist.toFixed(1) + ' km'}</span>}
          {company.next_available && <span>· <Ico name="calendar" size={10} /> {company.next_available}</span>}
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 5, flexWrap: 'wrap' }}>
          {rating != null && rating > 0 && (
            <span style={{ fontSize: 11, fontWeight: 600, color: '#f5a623', display: 'flex', alignItems: 'center', gap: 2 }}>
              {'\u2605'} {parseFloat(rating).toFixed(1)}{reviews > 0 && <span style={{ color: 'var(--d-fg-3)', fontWeight: 400 }}>({reviews})</span>}
            </span>
          )}
          {minPrice != null && <span style={{ fontSize: 11, color: 'var(--nb-green)', fontWeight: 600 }}>{_t('webapp.wash_from') || 'desde'} {minPrice}$</span>}
          {(hasWash || hasClean) && (
            <span style={{ display: 'flex', gap: 4, alignItems: 'center' }}>
              {hasWash && <span style={{ padding: '1px 6px', borderRadius: 6, fontSize: 10, fontWeight: 500, background: 'rgba(25,118,210,0.1)', color: '#1976D2' }}><Ico name="carWash" size={9} /> {_t('webapp.wash_cat_wash_short') || 'Lavagem'}</span>}
              {hasClean && <span style={{ padding: '1px 6px', borderRadius: 6, fontSize: 10, fontWeight: 500, background: 'rgba(156,39,176,0.1)', color: '#9C27B0' }}><Ico name="sparkle" size={9} /> {_t('webapp.wash_cat_clean_short') || 'Limpeza'}</span>}
            </span>
          )}
        </div>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 4, flexShrink: 0 }}>
        <span style={{
          padding: '3px 8px', borderRadius: 12, fontSize: 11, fontWeight: 600,
          background: accepts ? 'rgba(2,165,134,0.12)' : 'rgba(107,114,128,0.1)',
          color: accepts ? '#02A586' : '#6b7280',
        }}>
          {accepts ? _t('webapp.wash_available') : _t('webapp.wash_unavailable')}
        </span>
        <Ico name="chevR" size={16} />
      </div>
    </div>
  );
}

// ─── Car Wash Info Panel (default right panel when no company selected) ──
function CarWashInfoPanel({ collapsed, onToggle, userLat, userLng, onSelectCompany, companies: companiesProp }) {
  const [apiCompanies, setApiCompanies] = useState(companiesProp || []);

  useEffect(() => {
    if (!companiesProp || companiesProp.length === 0) {
      API.get('/data/wash/companies').then(res => {
        if (res.message === 'success') setApiCompanies(res.data || []);
      }).catch(() => {});
    }
  }, []);

  // Determinar empresa sugerida: última lavagem (localStorage) ou mais próxima por localização
  const suggested = useMemo(() => {
    const allCompanies = apiCompanies;
    if (allCompanies.length === 0) return null;
    const lastId = localStorage.getItem('nb_carwash_last');
    if (lastId) {
      const last = allCompanies.find(c => c.id === parseInt(lastId));
      if (last) return { company: last, reason: 'last' };
    }
    if (userLat && userLng) {
      let nearest = null, minDist = Infinity;
      allCompanies.forEach(c => {
        if (!c.lat || !c.lng) return;
        const R = 6371, dLat = (c.lat - userLat) * Math.PI / 180, dLng = (c.lng - userLng) * Math.PI / 180;
        const a = Math.sin(dLat/2)**2 + Math.cos(userLat * Math.PI/180) * Math.cos(c.lat * Math.PI/180) * Math.sin(dLng/2)**2;
        const dist = R * 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
        if (dist < minDist) { minDist = dist; nearest = { company: c, dist }; }
      });
      if (nearest) return { company: nearest.company, reason: 'nearby', dist: nearest.dist };
    }
    // Fallback: melhor avaliado (aberto primeiro, depois qualquer)
    const sorted = [...allCompanies].sort((a, b) => {
      if (a.open && !b.open) return -1;
      if (!a.open && b.open) return 1;
      return (b.rating || 0) - (a.rating || 0);
    });
    return sorted[0] ? { company: sorted[0], reason: sorted[0].open ? 'top' : 'top' } : null;
  }, [userLat, userLng, apiCompanies]);

  const s = suggested;
  const initials = s ? s.company.name.split(' ').map(w => w[0]).join('').substring(0, 2).toUpperCase() : '';
  const distLabel = s?.dist != null ? (s.dist < 1 ? Math.round(s.dist * 1000) + 'm' : s.dist.toFixed(1) + ' km') : null;
  const reasonLabel = s?.reason === 'last' ? _t('webapp.wash_last_wash') : s?.reason === 'nearby' ? _t('webapp.wash_nearest') : _t('webapp.wash_top_rated');

  if (collapsed) {
    return (
      <aside className="ticket-panel collapsed">
        <button className="ticket-collapse-btn" onClick={onToggle} title={_t('webapp.panel_expand')}>
          <span style={{ transform: 'rotate(180deg)', display: 'inline-flex' }}><Ico name="chevR" size={16} /></span>
        </button>
      </aside>
    );
  }

  return (
    <aside className="ticket-panel">
      <button className="ticket-collapse-btn" onClick={onToggle} title={_t('webapp.panel_collapse')}><Ico name="chevR" size={16} /></button>
      <div style={{ padding: 0, overflowY: 'auto', flex: 1 }}>
        {/* Header */}
        <div style={{ padding: '1.25rem 1rem', borderBottom: '1px solid var(--d-border-1)', textAlign: 'center' }}>
          <div style={{ width: 48, height: 48, borderRadius: '50%', background: 'var(--nb-green-10)', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 10px', color: 'var(--nb-green)' }}>
            <Ico name="carWash" size={24} />
          </div>
          <h3 style={{ margin: 0, fontSize: 18, fontWeight: 700, color: 'var(--d-fg-1)' }}>{_t('webapp.wash_title')}</h3>
          <p style={{ margin: '4px 0 0', fontSize: 13, color: 'var(--d-fg-3)' }}>{_t('webapp.wash_subtitle')}</p>
          <button onClick={() => { if (typeof Alpine !== 'undefined') window.dispatchEvent(new CustomEvent('open-ai-chat-service-info', { detail: { display: 'Como funciona a lavagem?', api: 'O utilizador quer saber como funciona o módulo de lavagem NhaBex. Explica os 4 passos: 1) Escolher a empresa de car wash, 2) Seleccionar o serviço e tipo de item (viatura, estofo, etc), 3) Agendar data e hora com matrícula, 4) Pagar online via SISP/Vinti4. Sê conciso e amigável.' } })); }}
            style={{ position: 'absolute', top: 16, right: 16, width: 32, height: 32, borderRadius: '50%', border: '1px solid var(--d-border-1)', background: 'var(--d-bg-2)', color: 'var(--d-fg-3)', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer' }}
            title={_t('webapp.wash_how_it_works')}>
            <Ico name="help" size={16} />
          </button>
        </div>

        {/* Empresa sugerida */}
        {s && (
          <div style={{ padding: '1rem' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 10 }}>
              <Ico name={s.reason === 'last' ? 'clock' : s.reason === 'nearby' ? 'pin' : 'star'} size={13} />
              <span style={{ fontSize: 11, fontWeight: 600, color: 'var(--d-fg-3)', textTransform: 'uppercase', letterSpacing: '.5px' }}>{reasonLabel}</span>
            </div>
            <div onClick={() => onSelectCompany && onSelectCompany(s.company)} style={{
              padding: '14px 16px', borderRadius: 12, background: 'var(--d-bg-surface)', border: '1px solid var(--d-border)',
              cursor: 'pointer', transition: 'box-shadow 150ms ease',
            }}
            onMouseEnter={e => e.currentTarget.style.boxShadow = 'var(--d-shadow-card)'}
            onMouseLeave={e => e.currentTarget.style.boxShadow = 'none'}
            >
              <div style={{ display: 'flex', gap: 12, alignItems: 'center', marginBottom: 10 }}>
                {s.company.logo ? (
                  <img src={s.company.logo} alt="" style={{ width: 44, height: 44, borderRadius: 10, objectFit: 'cover' }} />
                ) : (
                  <div style={{ width: 44, height: 44, borderRadius: 10, background: 'rgba(2,165,134,0.12)', color: 'var(--nb-green)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 16, fontWeight: 700, flexShrink: 0 }}>{initials}</div>
                )}
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontWeight: 700, fontSize: 15, color: 'var(--d-fg-1)' }}>{s.company.name}</div>
                  <div style={{ fontSize: 12, color: 'var(--d-fg-3)', marginTop: 2 }}>{s.company.zone}</div>
                </div>
              </div>
              <div style={{ display: 'flex', gap: 10, alignItems: 'center', flexWrap: 'wrap', marginBottom: 10 }}>
                <span style={{ display: 'flex', alignItems: 'center', gap: 3, fontSize: 12, fontWeight: 600, color: 'var(--nb-green)' }}>
                  <Ico name="calendar" size={12} /> {_t('webapp.wash_available')}
                </span>
                {s.company.rating && <span style={{ fontSize: 12, color: 'var(--nb-amber, #f59e0b)', display: 'flex', alignItems: 'center', gap: 2 }}>
                  <Ico name="star" size={12} /> {s.company.rating} ({s.company.reviews})
                </span>}
                {distLabel && (
                  <span style={{ fontSize: 12, color: 'var(--d-fg-3)', display: 'flex', alignItems: 'center', gap: 3 }}>
                    <Ico name="pin" size={12} /> {distLabel}
                  </span>
                )}
              </div>
              {(s.company.nextAvailable || s.company.next_available) && (
                <div style={{ fontSize: 12, color: 'var(--d-fg-2)', display: 'flex', alignItems: 'center', gap: 4, marginBottom: 10 }}>
                  <Ico name="calendar" size={12} /> {_t('webapp.wash_next_avail')}: {s.company.next_available || s.company.nextAvailable}
                </div>
              )}
              <button style={{
                width: '100%', padding: '10px 0', borderRadius: 8, background: 'var(--nb-green)', color: '#013D32',
                fontWeight: 700, fontSize: 14, border: 'none', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8
              }}>
                <Ico name="calendar" size={15} /> {_t('webapp.wash_book_now')}
              </button>
            </div>
          </div>
        )}

      </div>
    </aside>
  );
}

// ─── Schedule Step (date picker + slot grid) ────────────────
function ScheduleStep({ company, cart, cartTotal, cartSummaryLines, getItemPrice, totalDuration,
  bookingDate, setBookingDate, bookingTime, setBookingTime,
  bookingPlate, setBookingPlate, bookingNotes, setBookingNotes,
  customerName, setCustomerName, customerPhone, setCustomerPhone, customerEmail, setCustomerEmail,
  paymentMethod, setPaymentMethod,
  onBack, onNext, paying, platformFee = 0 }) {

  const [availDates, setAvailDates] = useState([]);
  const [slots, setSlots] = useState([]);
  const [loadingDates, setLoadingDates] = useState(true);
  const [loadingSlots, setLoadingSlots] = useState(false);
  const [slotConfig, setSlotConfig] = useState(null);

  // Load available dates
  useEffect(() => {
    if (!company.hash) { setLoadingDates(false); return; }
    setLoadingDates(true);
    API.get(`/data/wash/${company.hash}/available-dates`).then(res => {
      if (res.message === 'success') setAvailDates(res.data || []);
      setLoadingDates(false);
    }).catch(() => setLoadingDates(false));
  }, [company.hash]);

  // Load slots when date changes
  useEffect(() => {
    if (!bookingDate || !company.hash) { setSlots([]); return; }
    setLoadingSlots(true);
    setBookingTime('');
    API.get(`/data/wash/${company.hash}/available-slots`, { date: bookingDate, duration: totalDuration }).then(res => {
      if (res.message === 'success') {
        setSlots(res.data || []);
        if (res.config) setSlotConfig(res.config);
      }
      setLoadingSlots(false);
    }).catch(() => setLoadingSlots(false));
  }, [bookingDate, company.hash, totalDuration]);

  // Auto-select first available date
  useEffect(() => {
    if (!bookingDate && availDates.length > 0) {
      setBookingDate(availDates[0].date);
    }
  }, [availDates]);

  const availableSlots = slots.filter(s => s.available);

  // Full-page loader while dates load
  if (loadingDates) {
    return (
      <div style={{ padding: '3rem 1rem', textAlign: 'center' }}>
        <div className="nb-spinner" style={{ margin: '0 auto 12px' }} />
        <p style={{ color: 'var(--d-fg-3)', fontSize: 13, margin: 0 }}>{_t('webapp.wash_loading_avail')}</p>
        <div style={{ display: 'flex', gap: 8, marginTop: 24, justifyContent: 'center' }}>
          <button onClick={onBack} style={{ padding: '8px 16px', borderRadius: 8, background: 'var(--d-bg-2)', color: 'var(--d-fg-1)', border: '1px solid var(--d-border-1)', cursor: 'pointer', fontSize: 13 }}>
            <Ico name="arrowL" size={14} />
          </button>
        </div>
      </div>
    );
  }

  return (
    <div style={{ padding: '1rem' }}>
      {/* Cart summary */}
      <div style={{ padding: '10px 12px', borderRadius: 10, background: 'var(--nb-green-10)', border: '1px solid var(--nb-green)', marginBottom: 12 }}>
        {cartSummaryLines.map((line, i) => (
          <div key={i} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: i > 0 ? '6px 0 0' : 0, borderTop: i > 0 ? '1px solid rgba(2,165,134,0.2)' : 'none', marginTop: i > 0 ? 6 : 0 }}>
            <div>
              <div style={{ fontWeight: 600, fontSize: 12, color: 'var(--d-fg-1)' }}>{line.catLabel} · {line.typeLabel}</div>
              <div style={{ fontSize: 11, color: 'var(--d-fg-3)' }}>{line.svcs.map(s => s.label || s.name).join(', ')}</div>
            </div>
            <span style={{ fontWeight: 700, fontSize: 13, color: 'var(--nb-green)' }}>{line.svcs.reduce((s, svc) => s + getItemPrice(svc, line.item.itemType, line.item.category), 0)}$</span>
          </div>
        ))}
        {platformFee > 0 && (
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 6, fontSize: 12, color: 'var(--d-fg-3)' }}>
            <span>Taxa de serviço</span>
            <span>{platformFee}$</span>
          </div>
        )}
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 8, paddingTop: 6, borderTop: '1px solid rgba(2,165,134,0.3)' }}>
          <span style={{ fontWeight: 700, fontSize: 14 }}>Total · ~{totalDuration}min</span>
          <span style={{ fontWeight: 700, fontSize: 16, color: 'var(--nb-green)' }}>{cartTotal + platformFee}$</span>
        </div>
      </div>

      {/* Date picker */}
      <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--d-fg-3)', textTransform: 'uppercase', letterSpacing: '.5px', marginBottom: 8 }}>{_t('webapp.wash_choose_date')}</div>
      {availDates.length === 0 ? (
        <div style={{ textAlign: 'center', padding: '12px 0', color: 'var(--d-fg-3)', fontSize: 13 }}>{_t('webapp.wash_no_dates')}</div>
      ) : (
        <div style={{ display: 'flex', gap: 6, overflowX: 'auto', paddingBottom: 6, marginBottom: 12 }}>
          {availDates.slice(0, 14).map(d => {
            const isSelected = bookingDate === d.date;
            const parts = d.date.split('-');
            const dayNum = parseInt(parts[2]);
            const dayLabel = d.label.split(',')[0]; // "ter", "qua", etc.
            return (
              <button key={d.date} onClick={() => setBookingDate(d.date)} style={{
                minWidth: 52, padding: '8px 6px', borderRadius: 10, border: isSelected ? '2px solid var(--nb-green)' : '1px solid var(--d-border-1)',
                background: isSelected ? 'var(--nb-green)' : 'var(--d-bg-2)', color: isSelected ? '#013D32' : 'var(--d-fg-1)',
                cursor: 'pointer', textAlign: 'center', flexShrink: 0, transition: 'all 150ms',
              }}>
                <div style={{ fontSize: 10, fontWeight: 600, textTransform: 'uppercase', opacity: 0.7 }}>{dayLabel}</div>
                <div style={{ fontSize: 18, fontWeight: 700, lineHeight: 1.2 }}>{dayNum}</div>
                {d.bookings > 0 && <div style={{ fontSize: 9, opacity: 0.6 }}>{d.bookings} marc.</div>}
              </button>
            );
          })}
        </div>
      )}

      {/* Fallback manual date if no API dates */}
      {availDates.length === 0 && (
        <div style={{ marginBottom: 12 }}>
          <input type="date" value={bookingDate} onChange={e => setBookingDate(e.target.value)}
            style={{ width: '100%', padding: '10px 12px', borderRadius: 8, border: '1px solid var(--d-border-1)', background: 'var(--d-bg-2)', color: 'var(--d-fg-1)', fontSize: 13, boxSizing: 'border-box' }} />
        </div>
      )}

      {/* Time slots */}
      {bookingDate && (
        <>
          <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--d-fg-3)', textTransform: 'uppercase', letterSpacing: '.5px', marginBottom: 8 }}>
            Horário disponível
            {slotConfig && <span style={{ fontWeight: 400, textTransform: 'none', marginLeft: 6 }}>({slotConfig.work_start} - {slotConfig.work_end})</span>}
          </div>
          {loadingSlots ? (
            <div style={{ textAlign: 'center', padding: '16px 0', color: 'var(--d-fg-3)', fontSize: 13 }}>{_t('webapp.wash_loading_slots')}</div>
          ) : slots.length === 0 ? (
            <div style={{ padding: '12px 0' }}>
              <div style={{ textAlign: 'center', color: 'var(--d-fg-3)', fontSize: 13, marginBottom: 8 }}>{_t('webapp.wash_no_slots')}</div>
              <input type="time" value={bookingTime} onChange={e => setBookingTime(e.target.value)}
                style={{ width: '100%', padding: '10px 12px', borderRadius: 8, border: '1px solid var(--d-border-1)', background: 'var(--d-bg-2)', color: 'var(--d-fg-1)', fontSize: 14, boxSizing: 'border-box' }} />
            </div>
          ) : (
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 6, marginBottom: 12 }}>
              {slots.map(s => {
                const isSelected = bookingTime === s.time;
                return (
                  <button key={s.time} onClick={() => s.available && setBookingTime(s.time)} disabled={!s.available} style={{
                    padding: '10px 4px', borderRadius: 8, textAlign: 'center', cursor: s.available ? 'pointer' : 'default',
                    border: isSelected ? '2px solid var(--nb-green)' : '1px solid var(--d-border-1)',
                    background: isSelected ? 'var(--nb-green)' : s.available ? 'var(--d-bg-2)' : 'var(--d-bg-3)',
                    color: isSelected ? '#013D32' : s.available ? 'var(--d-fg-1)' : 'var(--d-fg-3)',
                    opacity: s.available ? 1 : 0.4, transition: 'all 150ms',
                  }}>
                    <div style={{ fontSize: 14, fontWeight: 700 }}>{s.time}</div>
                    {s.remaining !== undefined && s.available && s.remaining <= 2 && (
                      <div style={{ fontSize: 9, marginTop: 1, opacity: 0.7 }}>{s.remaining} {s.remaining > 1 ? _t('webapp.wash_spots') : _t('webapp.wash_spot')}</div>
                    )}
                  </button>
                );
              })}
            </div>
          )}
          {availableSlots.length === 0 && slots.length > 0 && (
            <div style={{ textAlign: 'center', padding: '8px 0', color: 'var(--nb-red, #e74c3c)', fontSize: 12, marginBottom: 8 }}>
              {_t('webapp.wash_no_times')}
            </div>
          )}
        </>
      )}

      {/* Contacto */}
      <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--d-fg-3)', textTransform: 'uppercase', letterSpacing: '.5px', marginTop: 12, marginBottom: 6 }}>{_t('webapp.wash_contact_data')}</div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
        <div>
          <label style={{ fontSize: 12, color: 'var(--d-fg-2)', marginBottom: 3, display: 'block' }}>{_t('webapp.wash_name')} *</label>
          <input type="text" placeholder={_t('webapp.wash_name_placeholder')} value={customerName} onChange={e => setCustomerName(e.target.value)} style={{ width: '100%', padding: '10px 12px', borderRadius: 8, border: '1px solid var(--d-border-1)', background: 'var(--d-bg-2)', color: 'var(--d-fg-1)', fontSize: 14, boxSizing: 'border-box' }} />
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          <div style={{ flex: 1 }}>
            <label style={{ fontSize: 12, color: 'var(--d-fg-2)', marginBottom: 3, display: 'block' }}>{_t('webapp.wash_phone')} *</label>
            <input type="tel" placeholder="9XX XXXX" value={customerPhone} onChange={e => setCustomerPhone(e.target.value)} style={{ width: '100%', padding: '10px 12px', borderRadius: 8, border: '1px solid var(--d-border-1)', background: 'var(--d-bg-2)', color: 'var(--d-fg-1)', fontSize: 14, boxSizing: 'border-box' }} />
          </div>
          <div style={{ flex: 1 }}>
            <label style={{ fontSize: 12, color: 'var(--d-fg-2)', marginBottom: 3, display: 'block' }}>{_t('webapp.wash_email_optional')}</label>
            <input type="email" placeholder={_t('webapp.wash_email_placeholder')} value={customerEmail} onChange={e => setCustomerEmail(e.target.value)} style={{ width: '100%', padding: '10px 12px', borderRadius: 8, border: '1px solid var(--d-border-1)', background: 'var(--d-bg-2)', color: 'var(--d-fg-1)', fontSize: 14, boxSizing: 'border-box' }} />
          </div>
        </div>
      </div>

      {/* Plate + notes */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginTop: 8 }}>
        {cart.some(c => c.category === 'lavagem') && (
          <div>
            <label style={{ fontSize: 12, color: 'var(--d-fg-2)', marginBottom: 3, display: 'block' }}>{_t('webapp.wash_plate')}</label>
            <input type="text" placeholder="AB-12-CD" value={bookingPlate} onChange={e => setBookingPlate(e.target.value)} style={{ width: '100%', padding: '10px 12px', borderRadius: 8, border: '1px solid var(--d-border-1)', background: 'var(--d-bg-2)', color: 'var(--d-fg-1)', fontSize: 14, boxSizing: 'border-box' }} />
          </div>
        )}
        <div>
          <label style={{ fontSize: 12, color: 'var(--d-fg-2)', marginBottom: 3, display: 'block' }}>{_t('webapp.wash_notes_optional')}</label>
          <textarea placeholder={_t('webapp.wash_notes_placeholder')} value={bookingNotes} onChange={e => setBookingNotes(e.target.value)} rows={2} style={{ width: '100%', padding: '10px 12px', borderRadius: 8, border: '1px solid var(--d-border-1)', background: 'var(--d-bg-2)', color: 'var(--d-fg-1)', fontSize: 13, resize: 'vertical', boxSizing: 'border-box' }} />
        </div>
      </div>

      <p style={{ fontSize: '0.7rem', color: 'var(--d-fg-3)', margin: '12px 0 0', lineHeight: 1.4 }}>
        Ao confirmar, concordas com os{' '}
        <a href="termos" target="_blank" style={{ color: 'var(--nb-green)', fontWeight: 600 }}>Termos de Utilização</a>
        {' '}e a{' '}
        <a href="privacidade" target="_blank" style={{ color: 'var(--nb-green)', fontWeight: 600 }}>Política de Privacidade</a>
        {' '}da NHABEX.
      </p>

      {/* Actions */}
      <div style={{ display: 'flex', gap: 8, marginTop: 12 }}>
        <button onClick={onBack} style={{ flex: 0, padding: '10px 16px', borderRadius: 8, background: 'var(--d-bg-2)', color: 'var(--d-fg-1)', border: '1px solid var(--d-border-1)', cursor: 'pointer', fontSize: 13, fontWeight: 600 }}>
          <Ico name="arrowL" size={14} />
        </button>
        <button onClick={onNext} disabled={!bookingDate || !bookingTime || !customerName || !customerPhone || paying} style={{
          flex: 1, padding: '12px 0', borderRadius: 8, border: 'none',
          background: bookingDate && bookingTime && customerName && customerPhone && !paying ? 'var(--nb-green)' : 'var(--d-bg-3)',
          color: bookingDate && bookingTime && customerName && customerPhone && !paying ? '#013D32' : 'var(--d-fg-3)',
          fontWeight: 700, fontSize: 14, cursor: bookingDate && bookingTime && customerName && customerPhone && !paying ? 'pointer' : 'default',
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8
        }}>
          {paying ? (
            <><span style={{ display: 'inline-block', width: 14, height: 14, border: '2px solid #013D32', borderTopColor: 'transparent', borderRadius: '50%', animation: 'spin 0.8s linear infinite' }} /> {_t('webapp.wash_processing')}</>
          ) : (
            <><Ico name="lock" size={16} /> {_t('webapp.wash_pay_sisp')} · {cartTotal + platformFee}$</>
          )}
        </button>
      </div>
    </div>
  );
}

// ─── Car Wash Detail Panel (right sidebar) ──────────────────
function CarWashDetailPanel({ company, onClose, collapsed, onToggle, addToast, platformFees }) {
  // Steps: 'info' → 'schedule' → 'payment' → 'done'
  const [step, setStep] = useState('info');
  const [activeCategory, setActiveCategory] = useState(company.categories?.[0] || 'lavagem');
  // Cart: array of { category, itemType, services: [svcId, ...] }
  const [cart, setCart] = useState([]);
  const [currentItemType, setCurrentItemType] = useState('');
  // API-loaded services (grouped by category slug)
  const [apiServices, setApiServices] = useState(null);
  const [loadingServices, setLoadingServices] = useState(false);
  // API-loaded categories with item types
  const [apiCatsData, setApiCatsData] = useState(null);

  // Load services and categories from API
  useEffect(() => {
    if (company.hash) {
      setLoadingServices(true);
      Promise.all([
        API.get(`/data/wash/${company.hash}/services`).catch(() => null),
        API.get('/data/wash/categories', { company: company.hash }).catch(() => null),
      ]).then(([svcRes, catRes]) => {
        if (svcRes?.message === 'success' && svcRes.data?.length > 0) {
          const mapped = {};
          svcRes.data.forEach(cat => { mapped[cat.slug] = cat.services; });
          setApiServices(mapped);
        }
        if (catRes?.message === 'success' && catRes.data?.length > 0) {
          setApiCatsData(catRes.data);
        }
        setLoadingServices(false);
      });
    }
  }, [company.hash]);

  // Legacy compat
  const selectedService = cart.length > 0 ? cart[0].services[0] : null;
  const vehicleType = cart.find(c => c.category === 'lavagem')?.itemType || 'ligeiro';
  const [bookingDate, setBookingDate] = useState('');
  const [bookingTime, setBookingTime] = useState('');
  const [bookingPlate, setBookingPlate] = useState('');
  const [bookingNotes, setBookingNotes] = useState('');
  const [customerName, setCustomerName] = useState('');
  const [customerPhone, setCustomerPhone] = useState('');
  const [customerEmail, setCustomerEmail] = useState('');
  const [paymentMethod, setPaymentMethod] = useState('online_vinti4');
  const [bookingCode, setBookingCode] = useState('');
  const [payProcessing, setPayProcessing] = useState(false);
  const [showChat, setShowChat] = useState(false);
  const [chatMessages, setChatMessages] = useState([]);
  const [chatInput, setChatInput] = useState('');
  const [chatSending, setChatSending] = useState(false);
  const [chatAgentId, setChatAgentId] = useState(null);
  const [chatThreadId, setChatThreadId] = useState(null);
  const chatEndRef = useRef(null);

  useEffect(() => {
    API.get('/client/ai/agents').then(res => {
      if (res.message === 'success' && res.data?.length) setChatAgentId(res.data[0].ID);
    }).catch(() => {});
  }, []);

  useEffect(() => { chatEndRef.current?.scrollIntoView({ behavior: 'smooth' }); }, [chatMessages]);

  const sendChatMsg = async (text) => {
    const msg = text || chatInput.trim();
    if (!msg || chatSending || !chatAgentId) return;
    setChatInput('');
    setChatMessages(prev => [...prev, { role: 'user', text: msg }]);
    setChatSending(true);
    try {
      let tid = chatThreadId;
      if (!tid) {
        const cr = await API.post('/client/ai/create-thread', { ID_Agent: chatAgentId });
        if (cr.message === 'success' && cr.threadId) { tid = cr.threadId; setChatThreadId(tid); }
        else { setChatMessages(prev => [...prev, { role: 'assistant', text: _t('webapp.help_ai_error_init') }]); setChatSending(false); return; }
        const catLabels = (company.categories || []).map(c => WASH_CATEGORIES.find(wc => wc.id === c)?.label).filter(Boolean).join(', ');
        const svcList = (company.categories || []).flatMap(cat => (WASH_SERVICES[cat] || []).map(s => `${s.label} (${WASH_CATEGORIES.find(c => c.id === cat)?.label}): desde ${s.price}$`)).join(', ');
        const ctx = `[CONTEXTO] O utilizador está a ver a empresa de lavagem "${company.name}" em ${company.zone}, ${company.island}. Categorias: ${catLabels}. Horário: ${company.hours}. Avaliação: ${company.rating}/5 (${company.reviews} avaliações). Serviços e preços: ${svcList}. Descrição: ${company.description}. Responde de forma útil sobre esta empresa, os seus serviços de lavagem, preços e agendamento. Sê conciso e amigável.`;
        await API.post('/client/ai/send-message', { ThreadID: tid, Message: ctx });
        let ctxAttempts = 0;
        const pollCtx = () => API.get('/client/ai/poll-run', { ThreadID: tid }).then(r => {
          if (r.status === 'completed' || ++ctxAttempts > 15) return;
          return new Promise(res => setTimeout(res, 1000)).then(pollCtx);
        }).catch(() => {});
        await pollCtx();
      }
      const sendRes = await API.post('/client/ai/send-message', { ThreadID: tid, Message: msg });
      if (sendRes.message === 'success' && sendRes.runId) {
        let attempts = 0;
        const poll = async () => {
          attempts++;
          const pr = await API.get('/client/ai/poll-run', { ThreadID: tid, RunID: sendRes.runId });
          if (pr.status === 'completed') {
            let reply = (pr.response || _t('webapp.help_ai_no_response')).replace(/\[QUICK_REPLIES\][\s\S]*?\[\/QUICK_REPLIES\]/g, '').replace(/\[CONTEXTO\][\s\S]*?\./g, '').trim();
            setChatMessages(prev => [...prev, { role: 'assistant', text: reply || _t('webapp.help_ai_no_response') }]);
            setChatSending(false);
          } else if (['queued', 'in_progress'].includes(pr.status) && attempts < 40) {
            setTimeout(poll, 1500);
          } else {
            setChatMessages(prev => [...prev, { role: 'assistant', text: pr.error || _t('webapp.help_ai_error_proc') }]);
            setChatSending(false);
          }
        };
        poll();
      } else {
        setChatMessages(prev => [...prev, { role: 'assistant', text: sendRes.error || _t('webapp.help_ai_error_send') }]);
        setChatSending(false);
      }
    } catch (e) {
      setChatMessages(prev => [...prev, { role: 'assistant', text: _t('webapp.help_ai_error_conn') }]);
      setChatSending(false);
    }
  };

  // Map FA icon to Ico name
  const mapIcon = (icon) => {
    if (!icon || !icon.startsWith('fa-')) return icon || 'droplet';
    const m = { 'fa-solid fa-droplet': 'droplet', 'fa-solid fa-sparkles': 'sparkle', 'fa-solid fa-star': 'star', 'fa-solid fa-shield': 'shield', 'fa-solid fa-bolt': 'zap', 'fa-solid fa-clock': 'clock', 'fa-solid fa-lock': 'lock', 'fa-solid fa-car': 'car', 'fa-solid fa-couch': 'sparkle', 'fa-solid fa-house': 'home' };
    return m[icon] || 'droplet';
  };

  // Dynamic categories — API data with fallback to hardcoded
  const getCategoriesList = () => {
    if (apiCatsData) {
      return apiCatsData.filter(c => company.categories?.includes(c.slug)).map(c => ({
        id: c.slug, label: c.name, icon: mapIcon(c.icon), desc: c.description || '',
        itemTypes: (c.item_types || []).map(t => ({ id: t.slug, label: t.name, mult: t.mult })),
      }));
    }
    return WASH_CATEGORIES.filter(c => company.categories?.includes(c.id));
  };

  // Dynamic item types for a category — API data with fallback
  const getItemTypesForCategory = (catSlug) => {
    if (apiCatsData) {
      const cat = apiCatsData.find(c => c.slug === catSlug);
      if (cat?.item_types) return cat.item_types.map(t => ({ id: t.slug, label: t.name, mult: t.mult }));
    }
    return WASH_ITEM_TYPES[catSlug] || [];
  };

  // Get services for a category — API data if available, otherwise mock
  const getServicesForCategory = (cat) => {
    if (apiServices && apiServices[cat]) {
      return apiServices[cat].map(s => ({ ...s, icon: mapIcon(s.icon), id: s.slug || s.id, label: s.label || s.name }));
    }
    return (WASH_SERVICES[cat] || []);
  };

  // Price calculation for a service given category + item type
  const getItemPrice = (svc, itemTypeId, category) => {
    // If service comes from API, price is already adjusted by company; only apply item type multiplier
    const isApiSvc = apiServices && apiServices[category];
    const mult = isApiSvc ? 1.0 : (company.priceMultiplier || company.price_multiplier || 1);
    const itemTypes = getItemTypesForCategory(category);
    const itemMult = itemTypes.find(t => t.id === itemTypeId)?.mult || 1.0;
    return Math.round((svc.price || 0) * mult * itemMult);
  };

  const removeFromCart = (idx) => setCart(prev => prev.filter((_, i) => i !== idx));

  // Cart total
  const cartTotal = cart.reduce((sum, item) => {
    const svcs = getServicesForCategory(item.category);
    return sum + item.services.reduce((s, svcId) => {
      const svc = svcs.find(sv => sv.id === svcId || sv.slug === svcId);
      return s + (svc ? getItemPrice(svc, item.itemType, item.category) : 0);
    }, 0);
  }, 0);

  const cartSummaryLines = cart.map(item => {
    const dynCats = getCategoriesList();
    const catLabel = dynCats.find(c => c.id === item.category)?.label || item.category;
    const typeLabel = getItemTypesForCategory(item.category).find(t => t.id === item.itemType)?.label || item.itemType;
    const svcs = getServicesForCategory(item.category).filter(s => item.services.includes(s.id) || item.services.includes(s.slug));
    return { catLabel, typeLabel, svcs, item };
  });

  // Legacy compat for schedule/payment steps
  const availableServices = getServicesForCategory(activeCategory);
  const getPrice = (basePrice) => getItemPrice({ price: parseInt(basePrice) }, vehicleType, 'lavagem');
  const currentPrice = cartTotal;
  const currentServiceLabel = cart.length > 0 ? `${cart.length} item(ns)` : '';
  const vehicleLabel = cart.find(c => c.category === 'lavagem') ? (getItemTypesForCategory('lavagem').find(t => t.id === cart.find(c => c.category === 'lavagem')?.itemType)?.label || '') : '';

  const handleGoToSchedule = () => {
    if (cart.length === 0) { addToast && addToast(_t('webapp.store_empty_cart'), 'warning'); return; }
    setStep('schedule');
  };

  const handlePayAndBook = async () => {
    if (!bookingDate || !bookingTime) { addToast && addToast('Preencha data e hora.', 'warning'); return; }
    if (!customerName || !customerPhone) { addToast && addToast('Preencha nome e telefone.', 'warning'); return; }
    if (cartTotal <= 0) { addToast && addToast(_t('webapp.store_cart_empty'), 'warning'); return; }
    setPayProcessing(true);

    try {
      // 1. Create booking via API
      let code = null;
      if (company.hash) {
        const items = cart.map(item => ({
          category_slug: item.category,
          item_type_slug: item.itemType,
          services: item.services,
          description: null,
        }));
        const bookRes = await API.post(`/data/wash/${company.hash}/bookings`, {
          date: bookingDate, time: bookingTime,
          items, vehicle_plate: bookingPlate || null, notes: bookingNotes || null,
          customer_name: customerName, customer_phone: customerPhone, customer_email: customerEmail || null,
          payment_method: paymentMethod,
        });
        if (bookRes.message === 'success') {
          code = bookRes.data?.code;
          setBookingCode(code);
        } else {
          addToast && addToast(bookRes.data || _t('webapp.error_create_booking'), 'error');
          setPayProcessing(false);
          return;
        }
      }

      localStorage.setItem('nb_carwash_last', String(company.id));

      // Initiate SISP payment (with saved card picker)
      const washFee = platformFees?.wash_booking_platform_fee || 0;
      localStorage.setItem('nb_carwash_pending_booking', code || '');
      const washOk = await initiatePaymentWithCardPicker({
        service_type: 'wash_booking',
        amount: cartTotal + washFee,
        return_path: window.location.origin + window.location.pathname + '?view=carwash',
        metadata: { booking_code: code, company_id: company.id, company_name: company.name, platform_fee: washFee },
      }, { serviceName: company.name, addToast });
      if (!washOk) localStorage.removeItem('nb_carwash_pending_booking');
    } catch (e) {
      addToast && addToast('Erro de ligação ao processar pagamento.', 'error');
    }
    setPayProcessing(false);
  };

  const resetAll = () => {
    setStep('info'); setCart([]); setCurrentItemType(''); setBookingDate(''); setBookingTime('');
    setBookingPlate(''); setBookingNotes(''); setCustomerName(''); setCustomerPhone('');
    setCustomerEmail(''); setPaymentMethod('online_vinti4');
    setBookingCode(''); setPayProcessing(false);
  };

  // Listen for SISP payment result from popup
  useEffect(() => {
    if (step !== 'paying') return;
    const onStorage = (e) => {
      if (e.key === 'nb_sisp_result' && e.newValue) {
        try {
          const data = JSON.parse(e.newValue);
          if (data.ts && Date.now() - data.ts < 60000) {
            if (data.result === 'success') {
              setStep('done');
              addToast && addToast('Pagamento confirmado! Marcação confirmada.', 'success', 5000);
            } else if (data.result === 'canceled') {
              addToast && addToast('Pagamento cancelado. A marcação ficou pendente.', 'warning', 5000);
            } else {
              addToast && addToast('Erro no pagamento. Tente novamente.', 'error', 5000);
            }
          }
        } catch(err) {}
        localStorage.removeItem('nb_sisp_result');
      }
    };
    window.addEventListener('storage', onStorage);
    return () => window.removeEventListener('storage', onStorage);
  }, [step]);

  // Step indicator
  const STEPS = [
    { id: 'info', label: _t('webapp.wash_step_service') || 'Serviço', icon: 'carWash' },
    { id: 'schedule', label: _t('webapp.wash_step_schedule') || 'Agendar', icon: 'calendar' },
    { id: 'paying', label: _t('webapp.wash_step_payment') || 'Pagamento', icon: 'wallet' },
    { id: 'done', label: _t('webapp.wash_step_done') || 'Confirmado', icon: 'check' },
  ];
  const stepIdx = STEPS.findIndex(s => s.id === step);

  if (collapsed) {
    return (
      <aside className="ticket-panel collapsed">
        <button className="ticket-collapse-btn" onClick={onToggle} title={_t('webapp.panel_expand')}>
          <span style={{ transform: 'rotate(180deg)', display: 'inline-flex' }}><Ico name="chevR" size={16} /></span>
        </button>
      </aside>
    );
  }

  return (
    <aside className="ticket-panel">
      <button className="ticket-collapse-btn" onClick={onToggle} title={_t('webapp.panel_collapse')}><Ico name="chevR" size={16} /></button>
      <div style={{ padding: 0, overflowY: 'auto', flex: 1 }}>

        {/* Header */}
        <div style={{ padding: '1rem', borderBottom: '1px solid var(--d-border-1)' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 8 }}>
            <div style={{ flex: 1 }}>
              <h3 style={{ margin: 0, fontSize: 18, fontWeight: 700, color: 'var(--d-fg-1)' }}>{company.name}</h3>
              <p style={{ margin: '4px 0 0', fontSize: 13, color: 'var(--d-fg-3)' }}>{company.zone} · {company.island}</p>
            </div>
            <button onClick={onClose} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--d-fg-3)', padding: 4 }}><Ico name="cross" size={16} /></button>
          </div>
          <div style={{ display: 'flex', gap: 12, marginTop: 8, flexWrap: 'wrap' }}>
            <span style={{ display: 'flex', alignItems: 'center', gap: 4, fontSize: 12, fontWeight: 600, color: 'var(--nb-green)' }}>
              <Ico name="calendar" size={12} /> Aceita agendamentos
            </span>
            <span style={{ fontSize: 12, color: 'var(--d-fg-2)', display: 'flex', alignItems: 'center', gap: 3 }}><Ico name="clock" size={12} /> {company.hours}</span>
            {company.rating && <span style={{ fontSize: 12, color: 'var(--nb-amber, #f59e0b)', display: 'flex', alignItems: 'center', gap: 3 }}><Ico name="star" size={12} /> {company.rating} ({company.reviews})</span>}
            {company.next_available && <span style={{ fontSize: 12, color: 'var(--d-fg-2)', display: 'flex', alignItems: 'center', gap: 3 }}><Ico name="calendar" size={12} /> {company.next_available}</span>}
          </div>
          <div style={{ marginTop: 10, display: 'flex', gap: 8, flexWrap: 'wrap' }}>
            <button onClick={() => { setStep('info'); scrollRef.current?.scrollTo({ top: 600, behavior: 'smooth' }); }} style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6, padding: '8px 16px', borderRadius: 8, background: 'var(--nb-green)', color: '#013D32', fontSize: 13, fontWeight: 600, border: 'none', cursor: 'pointer' }}>
              <Ico name="calendar" size={14} /> {_t('webapp.wash_book_now') || 'Agendar'}
            </button>
            {company.phone && (
              <a href={`tel:${company.phone}`} style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '8px 14px', borderRadius: 8, background: 'var(--d-bg-2)', color: 'var(--d-fg-1)', fontSize: 13, fontWeight: 600, textDecoration: 'none', border: '1px solid var(--d-border-1)' }}>
                <Ico name="phone" size={14} /> {_t('webapp.wash_call') || 'Ligar'}
              </a>
            )}
            <button onClick={() => setShowChat(!showChat)} style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '8px 14px', borderRadius: 8, background: showChat ? 'rgba(2,165,134,0.12)' : 'var(--d-bg-2)', color: showChat ? 'var(--nb-green)' : 'var(--d-fg-1)', fontSize: 13, fontWeight: 600, border: '1px solid ' + (showChat ? 'rgba(2,165,134,0.3)' : 'var(--d-border-1)'), cursor: 'pointer' }}>
              <Ico name="sparkle" size={14} /> Chat AI
            </button>
          </div>
        </div>

        {/* AI Chat */}
        {showChat && (
          <div style={{ borderBottom: '1px solid var(--d-border-1)' }}>
            <div style={{ maxHeight: 220, overflowY: 'auto', padding: '0.75rem 1rem' }}>
              {chatMessages.length === 0 && (
                <div style={{ textAlign: 'center', padding: '12px 0' }}>
                  <Ico name="sparkle" size={20} />
                  <p style={{ fontSize: 12, color: 'var(--d-fg-3)', margin: '6px 0 8px' }}>Pergunte sobre os serviços de {company.name}</p>
                  <div style={{ display: 'flex', gap: 4, flexWrap: 'wrap', justifyContent: 'center' }}>
                    {['Que serviços oferecem?', 'Qual o preço para SUV?', 'Quanto tempo demora?'].map((q, i) => (
                      <button key={i} onClick={() => sendChatMsg(q)} disabled={chatSending} style={{ fontSize: 11, padding: '4px 10px', borderRadius: 20, background: 'var(--d-bg-2)', color: 'var(--d-fg-2)', border: '1px solid var(--d-border-1)', cursor: 'pointer' }}>{q}</button>
                    ))}
                  </div>
                </div>
              )}
              {chatMessages.map((m, i) => (
                <div key={i} style={{ display: 'flex', justifyContent: m.role === 'user' ? 'flex-end' : 'flex-start', marginBottom: 6 }}>
                  <div style={{
                    maxWidth: '85%', padding: '8px 12px', borderRadius: 10, fontSize: 13, lineHeight: 1.4,
                    background: m.role === 'user' ? 'var(--nb-green)' : 'var(--d-bg-2)',
                    color: m.role === 'user' ? '#013D32' : 'var(--d-fg-1)',
                  }}>{m.text.split('\n').map((line, li) => <React.Fragment key={li}>{li > 0 && <br />}{line}</React.Fragment>)}</div>
                </div>
              ))}
              {chatSending && (
                <div style={{ display: 'flex', justifyContent: 'flex-start', marginBottom: 6 }}>
                  <div style={{ padding: '8px 12px', borderRadius: 10, background: 'var(--d-bg-2)', fontSize: 13, color: 'var(--d-fg-3)' }}>A pensar...</div>
                </div>
              )}
              <div ref={chatEndRef} />
            </div>
            <div style={{ display: 'flex', gap: 6, padding: '0.5rem 1rem 0.75rem', borderTop: '1px solid var(--d-border-1)' }}>
              <input
                type="text" value={chatInput} onChange={e => setChatInput(e.target.value)}
                onKeyDown={e => { if (e.key === 'Enter') sendChatMsg(); }}
                placeholder={_t('webapp.ai_ask_company')}
                style={{ flex: 1, padding: '8px 12px', borderRadius: 8, border: '1px solid var(--d-border-1)', background: 'var(--d-bg-2)', color: 'var(--d-fg-1)', fontSize: 13, outline: 'none', boxSizing: 'border-box' }}
              />
              <button onClick={() => sendChatMsg()} disabled={!chatInput.trim() || chatSending} aria-label={_t('webapp.send_message') || 'Enviar mensagem'} style={{
                padding: '8px 12px', borderRadius: 8, border: 'none', cursor: chatInput.trim() && !chatSending ? 'pointer' : 'default',
                background: chatInput.trim() && !chatSending ? 'var(--nb-green)' : 'var(--d-bg-3)',
                color: chatInput.trim() && !chatSending ? '#013D32' : 'var(--d-fg-3)',
              }}>
                <Ico name="send" size={14} />
              </button>
            </div>
          </div>
        )}

        {/* Step indicator */}
        <div style={{ padding: '0.75rem 1rem', borderBottom: '1px solid var(--d-border-1)', background: 'var(--d-bg-2)' }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
            {STEPS.map((s, i) => (
              <React.Fragment key={s.id}>
                <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 3, flex: 0 }}>
                  <div style={{
                    width: 28, height: 28, borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center',
                    background: i < stepIdx ? 'var(--nb-green)' : i === stepIdx ? 'var(--nb-green)' : 'var(--d-bg-3)',
                    color: i <= stepIdx ? '#013D32' : 'var(--d-fg-3)',
                    border: i === stepIdx ? '2px solid var(--nb-green)' : 'none',
                    boxShadow: i === stepIdx ? '0 0 0 3px rgba(2,165,134,0.2)' : 'none',
                    transition: 'all 200ms var(--nb-ease-std)'
                  }}>
                    {i < stepIdx ? <Ico name="check" size={13} /> : <Ico name={s.icon} size={13} />}
                  </div>
                  <span style={{ fontSize: 9, fontWeight: i === stepIdx ? 700 : 600, color: i <= stepIdx ? 'var(--d-fg-1)' : 'var(--d-fg-3)', whiteSpace: 'nowrap' }}>{s.label}</span>
                </div>
                {i < STEPS.length - 1 && (
                  <div style={{ flex: 1, height: 2, background: i < stepIdx ? 'var(--nb-green)' : 'var(--d-border-1)', margin: '0 4px', marginBottom: 16, transition: 'background 200ms var(--nb-ease-std)' }} />
                )}
              </React.Fragment>
            ))}
          </div>
        </div>

        {/* ── STEP 1: Seleccionar itens ── */}
        {step === 'info' && (() => {
          // Toggle a service: auto-add/remove from cart for current category+itemType
          const toggleService = (svcId) => {
            if (!currentItemType) return;
            setCart(prev => {
              const idx = prev.findIndex(c => c.category === activeCategory && c.itemType === currentItemType);
              if (idx === -1) {
                // New cart item
                return [...prev, { category: activeCategory, itemType: currentItemType, services: [svcId] }];
              }
              const existing = prev[idx];
              const hasSvc = existing.services.includes(svcId);
              const newServices = hasSvc ? existing.services.filter(s => s !== svcId) : [...existing.services, svcId];
              if (newServices.length === 0) {
                // Remove cart item entirely
                return prev.filter((_, i) => i !== idx);
              }
              return prev.map((c, i) => i === idx ? { ...c, services: newServices } : c);
            });
          };

          // Check if a service is selected for current category+itemType
          const isSvcSelected = (svcId) => {
            const item = cart.find(c => c.category === activeCategory && c.itemType === currentItemType);
            return item ? item.services.includes(svcId) : false;
          };

          return (
          <>
            {/* Category tabs */}
            <div style={{ padding: '0.75rem 1rem', borderBottom: '1px solid var(--d-border-1)' }}>
              <div className="tk-tabs" style={{ gap: 4 }}>
                {getCategoriesList().map(c => {
                  const catCount = cart.filter(ci => ci.category === c.id).reduce((s, ci) => s + ci.services.length, 0);
                  return (
                    <button key={c.id} className={`tk-tab ${activeCategory === c.id ? 'on' : ''}`} onClick={() => { setActiveCategory(c.id); setCurrentItemType(''); }} style={{ fontSize: 12, padding: '5px 12px', display: 'flex', alignItems: 'center', gap: 5, position: 'relative' }}>
                      <Ico name={c.icon} size={13} /> {c.label}
                      {catCount > 0 && <span style={{ background: 'var(--nb-green)', color: '#013D32', fontSize: 9, fontWeight: 700, borderRadius: '50%', width: 16, height: 16, display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>{catCount}</span>}
                    </button>
                  );
                })}
              </div>
            </div>

            {/* Item type selector */}
            <div style={{ padding: '0.75rem 1rem', borderBottom: '1px solid var(--d-border-1)' }}>
              <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--d-fg-3)', textTransform: 'uppercase', letterSpacing: '.5px', marginBottom: 6 }}>
                {activeCategory === 'lavagem' ? 'Tipo de viatura' : 'Tipo de item'}
              </div>
              <div className="tk-tabs" style={{ gap: 4, flexWrap: 'wrap' }}>
                {getItemTypesForCategory(activeCategory).filter(t => t.id !== 'all').map(t => {
                  const typeCount = cart.find(c => c.category === activeCategory && c.itemType === t.id)?.services.length || 0;
                  return (
                    <button key={t.id} className={`tk-tab ${currentItemType === t.id ? 'on' : ''}`} onClick={() => setCurrentItemType(t.id)} style={{ fontSize: 12, padding: '4px 10px', display: 'flex', alignItems: 'center', gap: 4 }}>
                      {t.label}
                      {typeCount > 0 && <span style={{ background: 'var(--nb-green)', color: '#013D32', fontSize: 8, fontWeight: 700, borderRadius: '50%', width: 14, height: 14, display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>{typeCount}</span>}
                    </button>
                  );
                })}
              </div>
            </div>

            {/* Services (auto-add to cart on click) */}
            {currentItemType && (
              <div style={{ padding: '0.75rem 1rem' }}>
                <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--d-fg-3)', textTransform: 'uppercase', letterSpacing: '.5px', marginBottom: 8 }}>Serviços</div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                  {getServicesForCategory(activeCategory).map(svc => {
                    const price = getItemPrice(svc, currentItemType, activeCategory);
                    const isSelected = isSvcSelected(svc.id);
                    return (
                      <div key={svc.id} onClick={() => toggleService(svc.id)} style={{
                        padding: '10px 12px', borderRadius: 10, border: isSelected ? '2px solid var(--nb-green)' : '1px solid var(--d-border-1)',
                        background: isSelected ? 'rgba(2,165,134,0.06)' : 'var(--d-bg-2)', cursor: 'pointer', transition: 'all 150ms var(--nb-ease-std)',
                      }}>
                        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                          <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
                            <div style={{ width: 22, height: 22, borderRadius: 6, border: isSelected ? '2px solid var(--nb-green)' : '2px solid var(--d-fg-3)', background: isSelected ? 'var(--nb-green)' : 'transparent', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', flexShrink: 0, transition: 'all 150ms' }}>
                              {isSelected && <Ico name="check" size={12} />}
                            </div>
                            <div>
                              <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                                <span style={{ fontWeight: 600, fontSize: 13, color: 'var(--d-fg-1)' }}>{svc.label}</span>
                                {svc.popular && <span style={{ fontSize: 9, fontWeight: 700, padding: '1px 6px', borderRadius: 10, background: 'rgba(245,158,11,0.12)', color: '#d97706', letterSpacing: '0.03em' }}>POPULAR</span>}
                              </div>
                              <div style={{ fontSize: 11, color: 'var(--d-fg-3)', marginTop: 1 }}>{svc.desc}</div>
                            </div>
                          </div>
                          <div style={{ fontWeight: 700, fontSize: 14, color: isSelected ? 'var(--nb-green)' : 'var(--d-fg-2)', whiteSpace: 'nowrap', marginLeft: 8 }}>{price}$</div>
                        </div>
                      </div>
                    );
                  })}
                </div>
              </div>
            )}

            {/* Action button — always visible */}
            <div style={{ padding: '0.75rem 1rem', borderTop: cart.length > 0 ? '1px solid var(--d-border-1)' : 'none', background: cart.length > 0 ? 'var(--d-bg-2)' : 'transparent' }}>
              {cart.length > 0 && (
                <div style={{ marginBottom: 10 }}>
                  {cartSummaryLines.map((line, idx) => {
                    const lineTotal = line.svcs.reduce((s, svc) => s + getItemPrice(svc, line.item.itemType, line.item.category), 0);
                    return (
                      <div key={idx} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '4px 0', fontSize: 12 }}>
                        <span style={{ color: 'var(--d-fg-2)' }}>{line.typeLabel} · {line.svcs.map(s => s.label).join(', ')}</span>
                        <span style={{ fontWeight: 600, color: 'var(--nb-green)' }}>{lineTotal}$</span>
                      </div>
                    );
                  })}
                </div>
              )}
              <button onClick={handleGoToSchedule} disabled={cart.length === 0} style={{
                width: '100%', padding: '12px 0', borderRadius: 8, background: cart.length > 0 ? 'var(--nb-green)' : 'var(--d-bg-3)',
                color: cart.length > 0 ? '#013D32' : 'var(--d-fg-3)', fontWeight: 700, fontSize: 14, border: 'none', cursor: cart.length > 0 ? 'pointer' : 'default',
                display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8
              }}>
                <Ico name="calendar" size={16} /> {cart.length > 0 ? `${_t('webapp.wash_continue_schedule') || 'Continuar para Agendar'} · ${cartTotal}$` : (_t('webapp.wash_select_services') || 'Seleccione serviços acima')}
              </button>
            </div>
          </>
          );
        })()}

        {/* ── STEP 2: Agendar ── */}
        {step === 'schedule' && (() => {
          // Calculate total duration from cart services
          const totalDuration = cart.reduce((sum, item) => {
            const svcs = getServicesForCategory(item.category);
            return sum + item.services.reduce((s, svcId) => {
              const svc = svcs.find(sv => sv.id === svcId || sv.slug === svcId);
              return s + (svc?.duration || 30);
            }, 0);
          }, 0);

          return (
          <ScheduleStep
            company={company} cart={cart} cartTotal={cartTotal} cartSummaryLines={cartSummaryLines}
            getItemPrice={getItemPrice} totalDuration={totalDuration}
            bookingDate={bookingDate} setBookingDate={setBookingDate}
            bookingTime={bookingTime} setBookingTime={setBookingTime}
            bookingPlate={bookingPlate} setBookingPlate={setBookingPlate}
            bookingNotes={bookingNotes} setBookingNotes={setBookingNotes}
            customerName={customerName} setCustomerName={setCustomerName}
            customerPhone={customerPhone} setCustomerPhone={setCustomerPhone}
            customerEmail={customerEmail} setCustomerEmail={setCustomerEmail}
            paymentMethod={paymentMethod} setPaymentMethod={setPaymentMethod}
            onBack={() => setStep('info')} onNext={handlePayAndBook} paying={payProcessing}
            platformFee={platformFees?.wash_booking_platform_fee || 0}
          />
          );
        })()}

        {/* ── Aguardando pagamento ── */}
        {step === 'paying' && (
          <div style={{ padding: '2rem 1rem', textAlign: 'center' }}>
            <div style={{ width: 56, height: 56, borderRadius: '50%', background: 'rgba(245,158,11,0.12)', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 16px', color: '#f59e0b' }}>
              <Ico name="wallet" size={28} />
            </div>
            <h3 style={{ margin: '0 0 4px', color: 'var(--d-fg-1)', fontSize: 18 }}>Aguardando pagamento</h3>
            <p style={{ fontSize: 13, color: 'var(--d-fg-3)', margin: '0 0 16px' }}>Complete o pagamento na janela SISP/Vinti4.<br/>A marcação será confirmada automaticamente após o pagamento.</p>

            <div style={{ padding: '12px', borderRadius: 10, background: 'var(--d-bg-2)', border: '1px solid var(--d-border-1)', textAlign: 'left', marginBottom: 16 }}>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 6, fontSize: 13 }}>
                {cartSummaryLines.map((line, i) => (
                  <div key={i} style={{ display: 'flex', justifyContent: 'space-between' }}>
                    <span style={{ color: 'var(--d-fg-3)' }}>{line.catLabel} · {line.typeLabel}</span>
                    <span style={{ fontWeight: 600, color: 'var(--d-fg-1)' }}>{line.svcs.map(s => s.label || s.name).join(', ')}</span>
                  </div>
                ))}
                <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                  <span style={{ color: 'var(--d-fg-3)' }}>Data/Hora</span>
                  <span style={{ fontWeight: 600, color: 'var(--d-fg-1)' }}>{bookingDate} às {bookingTime}</span>
                </div>
                {(platformFees?.wash_booking_platform_fee || 0) > 0 && (
                  <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                    <span style={{ color: 'var(--d-fg-3)' }}>Taxa de serviço</span>
                    <span style={{ fontWeight: 600, color: 'var(--d-fg-1)' }}>{platformFees.wash_booking_platform_fee}$</span>
                  </div>
                )}
                <div style={{ borderTop: '1px solid var(--d-border-1)', marginTop: 2, paddingTop: 6, display: 'flex', justifyContent: 'space-between' }}>
                  <span style={{ fontWeight: 700, color: 'var(--d-fg-1)' }}>Total (pendente)</span>
                  <span style={{ fontWeight: 700, fontSize: 18, color: '#f59e0b' }}>{cartTotal + (platformFees?.wash_booking_platform_fee || 0)}$</span>
                </div>
              </div>
            </div>

            <div style={{ display: 'flex', gap: 8, justifyContent: 'center' }}>
              <button onClick={() => setStep('done')} style={{ padding: '10px 20px', borderRadius: 8, background: 'var(--nb-green)', color: '#013D32', border: 'none', cursor: 'pointer', fontSize: 13, fontWeight: 600 }}>
                Já paguei
              </button>
              <button onClick={resetAll} style={{ padding: '10px 20px', borderRadius: 8, background: 'var(--d-bg-2)', color: 'var(--d-fg-1)', border: '1px solid var(--d-border-1)', cursor: 'pointer', fontSize: 13, fontWeight: 600 }}>
                Cancelar
              </button>
            </div>
          </div>
        )}

        {/* ── Confirmação ── */}
        {step === 'done' && (
          <div style={{ padding: '2rem 1rem', textAlign: 'center' }}>
            <div style={{ width: 56, height: 56, borderRadius: '50%', background: 'var(--nb-green)', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 16px', color: '#013D32' }}>
              <Ico name="check" size={28} />
            </div>
            <h3 style={{ margin: '0 0 4px', color: 'var(--d-fg-1)', fontSize: 18 }}>Marcação confirmada!</h3>
            <p style={{ fontSize: 13, color: 'var(--d-fg-3)', margin: '0 0 8px' }}>
              Pagamento processado. Receberá uma notificação de lembrete.
            </p>
            {bookingCode && (
              <div style={{ display: 'inline-block', padding: '6px 16px', borderRadius: 8, background: 'var(--nb-green-10)', border: '1px solid var(--nb-green)', fontSize: 14, fontWeight: 700, color: 'var(--nb-green)', marginBottom: 12, letterSpacing: 1 }}>
                {bookingCode}
              </div>
            )}

            <div style={{ padding: '12px', borderRadius: 10, background: 'var(--d-bg-2)', border: '1px solid var(--d-border-1)', textAlign: 'left', marginBottom: 16 }}>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 6, fontSize: 13 }}>
                {cartSummaryLines.map((line, i) => (
                  <div key={i} style={{ display: 'flex', justifyContent: 'space-between' }}>
                    <span style={{ color: 'var(--d-fg-3)' }}>{line.catLabel} · {line.typeLabel}</span>
                    <span style={{ fontWeight: 600, color: 'var(--d-fg-1)' }}>{line.svcs.map(s => s.label || s.name).join(', ')}</span>
                  </div>
                ))}
                <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                  <span style={{ color: 'var(--d-fg-3)' }}>Data/Hora</span>
                  <span style={{ fontWeight: 600, color: 'var(--d-fg-1)' }}>{bookingDate} às {bookingTime}</span>
                </div>
                {bookingPlate && (
                  <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                    <span style={{ color: 'var(--d-fg-3)' }}>Matrícula</span>
                    <span style={{ fontWeight: 600, color: 'var(--d-fg-1)' }}>{bookingPlate}</span>
                  </div>
                )}
                <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                  <span style={{ color: 'var(--d-fg-3)' }}>Pagamento</span>
                  <span style={{ fontWeight: 600, color: 'var(--d-fg-1)' }}>SISP/Vinti4</span>
                </div>
                {(platformFees?.wash_booking_platform_fee || 0) > 0 && (
                  <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                    <span style={{ color: 'var(--d-fg-3)' }}>Taxa de serviço</span>
                    <span style={{ fontWeight: 600, color: 'var(--d-fg-1)' }}>{platformFees.wash_booking_platform_fee}$</span>
                  </div>
                )}
                <div style={{ borderTop: '1px solid var(--d-border-1)', marginTop: 2, paddingTop: 6, display: 'flex', justifyContent: 'space-between' }}>
                  <span style={{ fontWeight: 700, color: 'var(--d-fg-1)' }}>Total</span>
                  <span style={{ fontWeight: 700, fontSize: 18, color: 'var(--nb-green)' }}>{cartTotal + (platformFees?.wash_booking_platform_fee || 0)}$</span>
                </div>
              </div>
            </div>

            <div style={{ display: 'flex', gap: 8, justifyContent: 'center' }}>
              <button onClick={resetAll} style={{ padding: '10px 24px', borderRadius: 8, background: 'var(--d-bg-2)', color: 'var(--d-fg-1)', border: '1px solid var(--d-border-1)', cursor: 'pointer', fontSize: 13, fontWeight: 600 }}>
                Nova marcação
              </button>
            </div>
          </div>
        )}
      </div>
    </aside>
  );
}

// ─── Car Wash List View (inside Cars tabs) ─────────────────
function CarWashView({ onBack, onSelectCompany, addToast }) {
  const [companies, setCompanies] = useState([]);
  const [loading, setLoading] = useState(true);
  const [search, setSearch] = useState('');
  const [filterIsland, setFilterIsland] = useState('');
  const [filterOpen, setFilterOpen] = useState(false);
  const [filterCategory, setFilterCategory] = useState('');
  const [sortBy, setSortBy] = useState('rating'); // rating | available | name
  const [apiCategories, setApiCategories] = useState([]);

  // Load companies and categories from API, fallback to mock
  useEffect(() => {
    setLoading(true);
    Promise.all([
      API.get('/data/wash/companies').catch(() => null),
      API.get('/data/wash/categories').catch(() => null),
    ]).then(([compRes, catRes]) => {
      setCompanies(compRes?.message === 'success' ? (compRes.data || []) : []);
      if (catRes?.message === 'success' && catRes.data?.length > 0) {
        setApiCategories(catRes.data);
      }
      setLoading(false);
    });
  }, []);

  const filtered = useMemo(() => {
    let list = [...companies];
    if (search.trim()) {
      const q = search.toLowerCase();
      list = list.filter(c => (c.name || '').toLowerCase().includes(q) || (c.zone || '').toLowerCase().includes(q));
    }
    if (filterIsland) list = list.filter(c => c.island === filterIsland);
    if (filterOpen) list = list.filter(c => c.open);
    if (filterCategory) list = list.filter(c => c.categories?.includes(filterCategory));
    if (sortBy === 'rating') list.sort((a, b) => (b.rating || 0) - (a.rating || 0));
    else if (sortBy === 'price') list.sort((a, b) => (a.min_price || a.minPrice || 9999) - (b.min_price || b.minPrice || 9999));
    else if (sortBy === 'available') list.sort((a, b) => (a.nextAvailable || a.hours || 'z').localeCompare(b.nextAvailable || b.hours || 'z'));
    else if (sortBy === 'name') list.sort((a, b) => (a.name || '').localeCompare(b.name || ''));
    return list;
  }, [companies, search, filterIsland, filterOpen, filterCategory, sortBy]);

  const openCount = companies.filter(c => c.open).length;

  return (
    <>
      {/* Header */}
      <div className="detail-head">
        <button className="back-btn" onClick={onBack}><Ico name="arrowL" /></button>
        <div className="titles">
          <h1><Ico name="carWash" size={22} /> {_t('webapp.wash_title') || 'Lavagem'}</h1>
          <p>{_t('webapp.wash_subtitle_long') || 'Agende lavagem de viaturas e limpeza de estofos'}</p>
        </div>
      </div>

      {/* Category filter tabs */}
      <div style={{ display: 'flex', gap: 6, marginBottom: 12, flexWrap: 'wrap' }}>
        <button className={`tk-tab ${!filterCategory ? 'on' : ''}`} onClick={() => setFilterCategory('')} style={{ fontSize: 13, padding: '6px 14px' }}>
          Todos <span style={{ marginLeft: 4, opacity: 0.8 }}>({companies.length})</span>
        </button>
        {(apiCategories.length > 0 ? apiCategories.map(c => ({ id: c.slug, label: c.name, icon: getCategoryIcon(c.icon || '') })) : WASH_CATEGORIES).map(c => {
          const count = companies.filter(co => co.categories?.includes(c.id)).length;
          return (
            <button key={c.id} className={`tk-tab ${filterCategory === c.id ? 'on' : ''}`} onClick={() => setFilterCategory(filterCategory === c.id ? '' : c.id)} style={{ fontSize: 13, padding: '6px 14px', display: 'flex', alignItems: 'center', gap: 5 }}>
              <Ico name={c.icon} size={13} /> {c.label} <span style={{ marginLeft: 2, opacity: 0.8 }}>({count})</span>
            </button>
          );
        })}
      </div>

      {/* Search + island filter */}
      <div style={{ display: 'flex', gap: 8, marginBottom: 12 }}>
        <div style={{ flex: 1, position: 'relative' }}>
          <span style={{ position: 'absolute', left: 12, top: '50%', transform: 'translateY(-50%)', color: 'var(--d-fg-3)' }}><Ico name="search" size={15} /></span>
          <input
            type="text" placeholder={filterCategory === 'limpeza' ? (_t('webapp.wash_search_clean') || 'Pesquisar limpeza de estofos...') : filterCategory === 'lavagem' ? (_t('webapp.wash_search_wash') || 'Pesquisar lavagem de viaturas...') : (_t('webapp.wash_search_all') || 'Pesquisar lavagem ou limpeza...')}
            value={search} onChange={e => setSearch(e.target.value)}
            style={{ width: '100%', padding: '10px 14px 10px 36px', borderRadius: 10, border: '1px solid var(--d-border)', background: 'var(--d-bg-surface)', fontSize: 14, color: 'var(--d-fg-1)', boxSizing: 'border-box', outline: 'none' }}
          />
        </div>
        <div style={{ position: 'relative', display: 'flex', alignItems: 'center' }}>
          <span style={{ position: 'absolute', left: 10, pointerEvents: 'none', color: 'var(--d-fg-3)' }}><Ico name="pin" size={13} /></span>
          <select value={filterIsland} onChange={e => setFilterIsland(e.target.value)} style={{ padding: '10px 12px 10px 28px', borderRadius: 10, border: '1px solid var(--d-border)', background: 'var(--d-bg-surface)', color: 'var(--d-fg-1)', fontSize: 13 }}>
            <option value="">{_t('webapp.pharm_all_islands') || 'Todas as ilhas'}</option>
            {CARWASH_ISLANDS.map(i => <option key={i} value={i}>{i}</option>)}
          </select>
        </div>
      </div>

      {/* Sort */}
      <div style={{ display: 'flex', gap: 6, marginBottom: 12, flexWrap: 'wrap', alignItems: 'center' }}>
        <span style={{ fontSize: 12, color: 'var(--d-fg-3)' }}>{_t('webapp.wash_sort') || 'Ordenar'}:</span>
        {[{ id: 'rating', label: _t('webapp.wash_sort_rating') || 'Avaliação' }, { id: 'price', label: _t('webapp.wash_sort_price') || 'Preço' }, { id: 'available', label: _t('webapp.wash_sort_available') || 'Disponibilidade' }, { id: 'name', label: _t('webapp.wash_sort_name') || 'Nome' }].map(s => (
          <button key={s.id} className={`tk-tab ${sortBy === s.id ? 'on' : ''}`} onClick={() => setSortBy(s.id)} style={{ fontSize: 12, padding: '4px 12px' }}>
            {s.label}
          </button>
        ))}
      </div>

      {loading ? (
        <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: 200 }}>
          <div className="nb-spinner" />
          <span style={{ marginLeft: 10, color: 'var(--nb-fg-3)' }}>A carregar...</span>
        </div>
      ) : (
        <>
          {/* Results count */}
          <div style={{ fontSize: 12, color: 'var(--d-fg-3)', marginBottom: 10 }}>
            {filtered.length} empresa{filtered.length !== 1 ? 's' : ''}
          </div>

          {/* List */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            {filtered.map(c => <CarWashCard key={c.id} company={c} onSelect={onSelectCompany} />)}
          </div>

          {filtered.length === 0 && (
            <div style={{ textAlign: 'center', padding: '48px 20px', color: 'var(--d-fg-3)' }}>
              <Ico name="carWash" size={36} />
              <p style={{ marginTop: 12, fontSize: 14 }}>{_t('webapp.wash_empty') || 'Nenhuma empresa de lavagem encontrada.'}</p>
              <p style={{ fontSize: 12, marginTop: 4 }}>{_t('webapp.cars_adjust_filters')}</p>
            </div>
          )}
        </>
      )}
    </>
  );
}

// ─── Driver Mode View (Condutor) ────────────────────────────
function DriverModeView({ signedIn, addToast }) {
  const [vehicles, setVehicles] = useState([]);
  const [loading, setLoading] = useState(false);
  const [showRegister, setShowRegister] = useState(false);
  const [showQueue, setShowQueue] = useState(false);
  const [activeTicket, setActiveTicket] = useState(null);
  const [queueData, setQueueData] = useState(null);
  const [passengers, setPassengers] = useState(null);

  // Load driver vehicles
  const loadVehicles = () => {
    setLoading(true);
    API.get('/car-driver/vehicles').then(res => {
      if (res.message === 'success') setVehicles(res.data || []);
    }).catch(() => {}).finally(() => setLoading(false));
  };

  useEffect(() => { if (signedIn) loadVehicles(); }, [signedIn]);

  // Load active queue ticket for driver
  const checkActiveQueue = () => {
    // Check localStorage for active ticket
    const saved = sessionStorage.getItem('nb_driver_ticket');
    if (saved) {
      try {
        const tk = JSON.parse(saved);
        setActiveTicket(tk);
        loadQueuePosition(tk);
        loadPassengers(tk.ticketId);
      } catch {}
    }
  };

  useEffect(() => { checkActiveQueue(); }, []);

  const loadQueuePosition = (tk) => {
    if (!tk?.agencyHash) return;
    API.get(`/car-queue/terminal/${tk.agencyHash}/queue`).then(res => {
      if (res.message === 'success') {
        const myPos = (res.data || []).find(q => q.ticket_id === tk.ticketId);
        setQueueData({ queue: res.data, myPosition: myPos?.position || null, total: res.data.length });
      }
    }).catch(() => {});
  };

  const loadPassengers = (ticketId) => {
    if (!ticketId) return;
    API.get(`/car-queue/passengers/${ticketId}`).then(res => {
      if (res.message === 'success') setPassengers(res.data);
    }).catch(() => {});
  };

  const handleTicketIssued = (ticket) => {
    setActiveTicket(ticket);
    sessionStorage.setItem('nb_driver_ticket', JSON.stringify(ticket));
    setShowQueue(false);
    loadQueuePosition(ticket);
    loadPassengers(ticket.ticketId);
    addToast && addToast(_t('webapp.driver_ticket_issued'));
  };

  const cancelTicket = () => {
    setActiveTicket(null);
    setQueueData(null);
    setPassengers(null);
    sessionStorage.removeItem('nb_driver_ticket');
  };

  // Not signed in
  if (!signedIn) {
    return (
      <div style={{ textAlign: 'center', padding: '40px 20px', color: 'var(--nb-fg-3)' }}>
        <Ico name="user" size={40} />
        <p style={{ marginTop: 12, fontSize: 14 }}>{_t('webapp.driver_login_required')}</p>
        <p style={{ fontSize: 12, color: 'var(--d-fg-3)' }}>{_t('webapp.driver_login_hint')}</p>
      </div>
    );
  }

  // Active ticket — show queue monitoring
  if (activeTicket) {
    return (
      <div style={{ padding: '0 16px' }}>
        {/* Terminal + Route info */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12, fontSize: 12, color: 'var(--d-fg-3)' }}>
          <Ico name="location" size={14} />
          <span>{activeTicket.agencyName}</span>
          <span style={{ opacity: .4 }}>·</span>
          <span>{activeTicket.serviceName}</span>
        </div>

        {/* Ticket card */}
        <div style={{ background: 'linear-gradient(135deg, var(--nb-green) 0%, #0d9488 100%)', color: '#fff', borderRadius: 16, padding: '20px 24px', marginBottom: 16, position: 'relative', overflow: 'hidden' }}>
          <div style={{ position: 'absolute', right: -8, bottom: -8, opacity: .08 }}><Ico name="car" size={80} /></div>
          <div style={{ fontSize: 11, textTransform: 'uppercase', letterSpacing: 1, opacity: .75, marginBottom: 4 }}>{_t('webapp.driver_your_ticket')}</div>
          <div style={{ fontSize: 36, fontWeight: 900, letterSpacing: 2, lineHeight: 1 }}>{activeTicket.abbreviation}-{activeTicket.number}</div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: 10 }}>
            <span style={{ fontFamily: "'Courier New', monospace", fontWeight: 800, fontSize: 15, background: 'rgba(255,255,255,0.18)', padding: '3px 10px', borderRadius: 8 }}>{activeTicket.licensePlate}</span>
            <span style={{ fontSize: 12, opacity: .75 }}>{activeTicket.vehicleLabel} — {activeTicket.capacity} {_t('webapp.driver_seats')}</span>
          </div>
        </div>

        {/* Queue position */}
        {queueData && (
          <div style={{ background: 'var(--d-bg-surface)', border: '1px solid var(--d-border)', borderRadius: 14, padding: '16px 20px', marginBottom: 12 }}>
            <div style={{ display: 'flex', justifyContent: 'space-around', textAlign: 'center', marginBottom: 12 }}>
              <div>
                <div style={{ fontSize: 11, color: 'var(--d-fg-3)', fontWeight: 600, textTransform: 'uppercase', letterSpacing: .5 }}>{_t('webapp.driver_position')}</div>
                <div style={{ fontSize: 32, fontWeight: 900, color: 'var(--nb-green)', lineHeight: 1.2 }}>{queueData.myPosition || '—'}</div>
              </div>
              <div style={{ width: 1, background: 'var(--d-border)' }}></div>
              <div>
                <div style={{ fontSize: 11, color: 'var(--d-fg-3)', fontWeight: 600, textTransform: 'uppercase', letterSpacing: .5 }}>{_t('webapp.driver_ahead')}</div>
                <div style={{ fontSize: 32, fontWeight: 900, lineHeight: 1.2 }}>{queueData.myPosition ? queueData.myPosition - 1 : '—'}</div>
              </div>
              <div style={{ width: 1, background: 'var(--d-border)' }}></div>
              <div>
                <div style={{ fontSize: 11, color: 'var(--d-fg-3)', fontWeight: 600, textTransform: 'uppercase', letterSpacing: .5 }}>{_t('webapp.driver_total_queue')}</div>
                <div style={{ fontSize: 32, fontWeight: 900, lineHeight: 1.2 }}>{queueData.total}</div>
              </div>
            </div>
            <button className="btn-s" style={{ width: '100%', fontSize: 12, borderRadius: 10, padding: '8px 0', background: 'var(--d-bg-surface-2)', border: '1px solid var(--d-border)' }} onClick={() => loadQueuePosition(activeTicket)}>
              <Ico name="refresh" size={12} /> {_t('webapp.driver_refresh')}
            </button>
          </div>
        )}

        {/* Passengers */}
        {passengers && (
          <div style={{ background: 'var(--d-bg-surface)', border: '1px solid var(--d-border)', borderRadius: 14, padding: '16px 20px', marginBottom: 12 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 10 }}>
              <span style={{ fontSize: 13, fontWeight: 700 }}>
                <Ico name="users" size={14} /> {_t('webapp.driver_passengers')}
              </span>
              <span style={{ fontSize: 12, fontWeight: 700, color: 'var(--nb-green)' }}>{passengers.total_passengers}/{activeTicket.capacity || '?'}</span>
            </div>
            <div style={{ display: 'flex', gap: 8, marginBottom: 10 }}>
              <span style={{ fontSize: 11, background: 'var(--d-bg-surface-2)', borderRadius: 8, padding: '3px 10px', fontWeight: 600 }}>
                <Ico name="location" size={10} /> {_t('webapp.driver_at_terminal')}: {passengers.terminal?.length || 0}
              </span>
              <span style={{ fontSize: 11, background: 'rgba(14,165,233,0.1)', color: '#0ea5e9', borderRadius: 8, padding: '3px 10px', fontWeight: 600 }}>
                <Ico name="route" size={10} /> {_t('webapp.driver_enroute')}: {passengers.enroute?.length || 0}
              </span>
            </div>
            {(passengers.terminal || []).map((p, i) => (
              <div key={i} style={{ display: 'flex', justifyContent: 'space-between', padding: '6px 0', borderBottom: '1px solid var(--d-border)', fontSize: 12 }}>
                <span>{p.passenger_name}</span>
                <span style={{ fontWeight: 700, color: 'var(--nb-green)' }}>{p.seats} {_t('webapp.driver_seats_short')}</span>
              </div>
            ))}
            {(passengers.enroute || []).map((p, i) => (
              <div key={'e'+i} style={{ display: 'flex', justifyContent: 'space-between', padding: '6px 8px', borderRadius: 6, background: 'rgba(245,158,11,0.08)', marginTop: 4, fontSize: 12 }}>
                <span>{p.passenger_name} <small style={{ color: '#ca8a04', fontWeight: 600 }}>({p.pickup_stop})</small></span>
                <span style={{ fontWeight: 700 }}>{p.seats} {_t('webapp.driver_seats_short')}</span>
              </div>
            ))}
            {passengers.total_passengers === 0 && (
              <div style={{ textAlign: 'center', padding: '12px 0', fontSize: 12, color: 'var(--d-fg-3)' }}>
                <Ico name="users" size={20} style={{ opacity: .3 }} />
                <p style={{ margin: '4px 0 0' }}>{_t('webapp.driver_no_passengers') || 'Sem passageiros ainda.'}</p>
              </div>
            )}
          </div>
        )}

        {/* Cancel */}
        <button className="btn-s" style={{ width: '100%', border: '1px solid var(--nb-danger, #ef4444)', color: 'var(--nb-danger, #ef4444)', background: 'transparent', fontSize: 13, borderRadius: 10, padding: '10px 0' }} onClick={cancelTicket}>
          <Ico name="close" size={12} /> {_t('webapp.driver_cancel_ticket')}
        </button>

        <p style={{ textAlign: 'center', fontSize: 11, color: 'var(--d-fg-3)', marginTop: 12, opacity: .6 }}>NhaBex Cars · Mobilidade e transporte</p>
      </div>
    );
  }

  // Status config
  const statusCfg = {
    approved: { color: '#22c55e', bg: 'rgba(34,197,94,0.1)', label: _t('webapp.driver_approved'), icon: 'check' },
    pending: { color: '#f59e0b', bg: 'rgba(245,158,11,0.1)', label: _t('webapp.driver_pending'), icon: 'clock' },
    rejected: { color: '#ef4444', bg: 'rgba(239,68,68,0.1)', label: _t('webapp.driver_rejected'), icon: 'close' },
    suspended: { color: '#ef4444', bg: 'rgba(239,68,68,0.1)', label: _t('webapp.driver_suspended'), icon: 'close' },
  };

  // Default — vehicle list + actions
  return (
    <div>
      {/* Welcome banner */}
      <div style={{ background: 'linear-gradient(135deg, rgba(2,165,134,0.12) 0%, rgba(14,165,233,0.08) 100%)', borderRadius: 16, padding: '20px 24px', marginBottom: 16, position: 'relative', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', right: -10, top: -10, opacity: .06, fontSize: 120, lineHeight: 1 }}>
          <Ico name="car" size={120} />
        </div>
        <div style={{ fontSize: 11, textTransform: 'uppercase', letterSpacing: 1.5, color: 'var(--nb-green)', fontWeight: 700, marginBottom: 6 }}>{_t('webapp.driver_tab')}</div>
        <h3 style={{ fontSize: 17, fontWeight: 700, margin: '0 0 4px', color: 'var(--d-fg-1)' }}>{_t('webapp.driver_my_vehicles')}</h3>
        <p style={{ fontSize: 12, color: 'var(--d-fg-3)', margin: 0 }}>
          {vehicles.length > 0
            ? vehicles.length + (vehicles.length === 1 ? ' viatura registada' : ' viaturas registadas')
            : _t('webapp.driver_no_vehicles')}
        </p>
      </div>

      {/* Action buttons */}
      <div style={{ display: 'flex', gap: 8, marginBottom: 16 }}>
        <button onClick={() => setShowRegister(true)}
          style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6, padding: '10px 16px', borderRadius: 10, border: '1.5px dashed var(--d-border)', background: 'transparent', color: 'var(--nb-green)', fontSize: 13, fontWeight: 600, cursor: 'pointer' }}>
          <Ico name="plus" size={14} /> {_t('webapp.driver_add_vehicle')}
        </button>
        {vehicles.some(v => v.approval_status === 'approved') && (
          <button onClick={() => setShowQueue(vehicles.find(v => v.approval_status === 'approved'))}
            style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6, padding: '10px 16px', borderRadius: 10, border: 'none', background: 'var(--nb-green)', color: '#fff', fontSize: 13, fontWeight: 600, cursor: 'pointer' }}>
            <Ico name="ticket" size={14} /> {_t('webapp.driver_enter_queue')}
          </button>
        )}
      </div>

      {loading && (
        <div style={{ display: 'flex', justifyContent: 'center', padding: '2rem 0' }}><div className="nb-spinner" /></div>
      )}

      {/* Empty state */}
      {!loading && vehicles.length === 0 && (
        <div style={{ textAlign: 'center', padding: '40px 20px', borderRadius: 16, border: '1px solid var(--d-border)', background: 'var(--d-bg-surface)' }}>
          <div style={{ width: 56, height: 56, borderRadius: 16, background: 'rgba(245,158,11,0.1)', color: '#f59e0b', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', marginBottom: 12 }}>
            <Ico name="car" size={28} />
          </div>
          <p style={{ fontSize: 14, fontWeight: 600, marginBottom: 4, color: 'var(--d-fg-1)' }}>{_t('webapp.driver_no_vehicles')}</p>
          <p style={{ fontSize: 12, color: 'var(--d-fg-3)', marginBottom: 14 }}>{_t('webapp.cars_driver_desc')}</p>
          <button onClick={() => setShowRegister(true)}
            style={{ padding: '10px 24px', borderRadius: 10, border: 'none', background: 'var(--nb-green)', color: '#fff', fontSize: 13, fontWeight: 600, cursor: 'pointer' }}>
            <Ico name="plus" size={14} /> {_t('webapp.driver_register_first')}
          </button>
        </div>
      )}

      {/* Vehicle cards */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        {vehicles.map(v => {
          const st = statusCfg[v.approval_status] || statusCfg.pending;
          return (
            <div key={v.id} style={{ borderRadius: 14, border: '1px solid var(--d-border)', background: 'var(--d-bg-surface)', overflow: 'hidden' }}>
              {/* Card header with plate */}
              <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '14px 16px' }}>
                <div style={{ width: 44, height: 44, borderRadius: 12, background: st.bg, color: st.color, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                  <Ico name="car" size={22} />
                </div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 18, fontWeight: 800, fontFamily: "'Courier New', monospace", letterSpacing: 2, color: 'var(--d-fg-1)' }}>{v.license_plate}</div>
                  <div style={{ fontSize: 12, color: 'var(--d-fg-3)', marginTop: 1 }}>
                    {v.vehicle_label}{v.vehicle_color ? ' — ' + v.vehicle_color : ''}
                  </div>
                </div>
                <div style={{ textAlign: 'right', flexShrink: 0 }}>
                  <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4, fontSize: 11, fontWeight: 600, color: st.color, background: st.bg, padding: '3px 10px', borderRadius: 20 }}>
                    <Ico name={st.icon} size={10} /> {st.label}
                  </span>
                </div>
              </div>

              {/* Card details */}
              <div style={{ display: 'flex', borderTop: '1px solid var(--d-border)', fontSize: 12 }}>
                <div style={{ flex: 1, padding: '8px 16px', borderRight: '1px solid var(--d-border)', textAlign: 'center' }}>
                  <div style={{ color: 'var(--d-fg-3)', fontSize: 10, textTransform: 'uppercase', letterSpacing: .5 }}>{_t('webapp.driver_capacity')}</div>
                  <div style={{ fontWeight: 700, marginTop: 2, color: 'var(--d-fg-1)' }}>{v.capacity} {_t('webapp.driver_seats_short')}</div>
                </div>
                <div style={{ flex: 1, padding: '8px 16px', borderRight: '1px solid var(--d-border)', textAlign: 'center' }}>
                  <div style={{ color: 'var(--d-fg-3)', fontSize: 10, textTransform: 'uppercase', letterSpacing: .5 }}>{_t('webapp.driver_type')}</div>
                  <div style={{ fontWeight: 700, marginTop: 2, color: 'var(--d-fg-1)' }}>{v.vehicle_label}</div>
                </div>
                <div style={{ flex: 1, padding: '8px 16px', textAlign: 'center' }}>
                  <div style={{ color: 'var(--d-fg-3)', fontSize: 10, textTransform: 'uppercase', letterSpacing: .5 }}>{_t('webapp.driver_year')}</div>
                  <div style={{ fontWeight: 700, marginTop: 2, color: 'var(--d-fg-1)' }}>{v.vehicle_year || '—'}</div>
                </div>
              </div>

              {/* Action button for approved vehicles */}
              {v.approval_status === 'approved' && (
                <div style={{ padding: '10px 16px', borderTop: '1px solid var(--d-border)' }}>
                  <button onClick={() => setShowQueue(v)}
                    style={{ width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6, padding: '9px 16px', borderRadius: 10, border: 'none', background: 'var(--nb-green)', color: '#fff', fontSize: 13, fontWeight: 600, cursor: 'pointer' }}>
                    <Ico name="ticket" size={14} /> {_t('webapp.driver_get_ticket')}
                  </button>
                </div>
              )}

              {/* Info for pending */}
              {v.approval_status === 'pending' && (
                <div style={{ padding: '10px 16px', borderTop: '1px solid var(--d-border)', textAlign: 'center' }}>
                  <p style={{ fontSize: 11, color: 'var(--d-fg-3)', margin: 0 }}>
                    <Ico name="clock" size={11} /> A aguardar aprovacao do terminal
                  </p>
                </div>
              )}

              {/* Info for rejected */}
              {v.approval_status === 'rejected' && v.rejection_reason && (
                <div style={{ padding: '10px 16px', borderTop: '1px solid var(--d-border)' }}>
                  <p style={{ fontSize: 11, color: '#ef4444', margin: 0 }}>
                    <Ico name="close" size={11} /> {v.rejection_reason}
                  </p>
                </div>
              )}
            </div>
          );
        })}
      </div>

      {/* Register modal */}
      {showRegister && (
        <VehicleRegistrationModal
          onClose={() => setShowRegister(false)}
          onSuccess={() => { setShowRegister(false); loadVehicles(); addToast && addToast(_t('webapp.driver_vehicle_registered')); }}
        />
      )}

      {/* Queue ticket modal */}
      {showQueue && (
        <QueueTicketModal
          vehicle={showQueue}
          onClose={() => setShowQueue(false)}
          onTicketIssued={handleTicketIssued}
        />
      )}
    </div>
  );
}

// ─── Vehicle Registration Modal ─────────────────────────────
function VehicleRegistrationModal({ onClose, onSuccess }) {
  const [plate, setPlate] = useState('');
  const [model, setModel] = useState('');
  const [color, setColor] = useState('');
  const [type, setType] = useState('hiace');
  const [capacity, setCapacity] = useState(15);
  const [year, setYear] = useState('');
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  const VTYPES = [
    { id: 'hiace', label: 'Toyota Hiace' },
    { id: 'hilux', label: 'Hilux' },
    { id: 'minibus', label: 'Minibus' },
    { id: 'bus', label: 'Autocarro' },
  ];

  const submit = () => {
    if (!plate.trim() || !model.trim()) { setError(_t('webapp.driver_fill_required')); return; }
    setLoading(true);
    setError(null);
    API.post('/car-driver/vehicles', {
      license_plate: plate.toUpperCase().trim(),
      vehicle_model: model.trim(),
      vehicle_color: color.trim() || null,
      vehicle_type: type,
      capacity: parseInt(capacity) || 15,
      vehicle_year: year ? parseInt(year) : null,
    }).then(res => {
      if (res.message === 'success') { onSuccess(); }
      else { setError(res.error || _t('webapp.driver_register_error')); }
    }).catch(() => setError(_t('webapp.driver_register_error')))
      .finally(() => setLoading(false));
  };

  const inputStyle = { width: '100%', padding: '8px 12px', borderRadius: 8, border: '1px solid var(--d-border)', background: 'var(--d-bg-surface)', color: 'var(--d-fg-1)', fontSize: 13, outline: 'none' };

  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal-dialog" onClick={e => e.stopPropagation()} style={{ maxWidth: 420 }}>
        <div className="modal-header">
          <h3>{_t('webapp.driver_register_vehicle')}</h3>
          <button className="modal-close" onClick={onClose}>&times;</button>
        </div>
        <div className="modal-body" style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          <div>
            <label style={{ fontSize: 12, fontWeight: 600, display: 'block', marginBottom: 4, color: 'var(--d-fg-2)' }}>{_t('webapp.driver_plate')} *</label>
            <input type="text" value={plate} onChange={e => setPlate(e.target.value)} placeholder="ST-12-34-AB" style={{ ...inputStyle, textTransform: 'uppercase', fontFamily: "'Courier New', monospace", fontWeight: 700, letterSpacing: 1 }} />
          </div>
          <div>
            <label style={{ fontSize: 12, fontWeight: 600, display: 'block', marginBottom: 4, color: 'var(--d-fg-2)' }}>{_t('webapp.driver_model')} *</label>
            <input type="text" value={model} onChange={e => setModel(e.target.value)} placeholder="Toyota Hiace" style={inputStyle} />
          </div>
          <div style={{ display: 'flex', gap: 10 }}>
            <div style={{ flex: 1 }}>
              <label style={{ fontSize: 12, fontWeight: 600, display: 'block', marginBottom: 4, color: 'var(--d-fg-2)' }}>{_t('webapp.driver_color')}</label>
              <input type="text" value={color} onChange={e => setColor(e.target.value)} placeholder="Branco" style={inputStyle} />
            </div>
            <div style={{ flex: 1 }}>
              <label style={{ fontSize: 12, fontWeight: 600, display: 'block', marginBottom: 4, color: 'var(--d-fg-2)' }}>{_t('webapp.driver_year')}</label>
              <input type="number" value={year} onChange={e => setYear(e.target.value)} placeholder="2020" style={inputStyle} />
            </div>
          </div>
          <div style={{ display: 'flex', gap: 10 }}>
            <div style={{ flex: 1 }}>
              <label style={{ fontSize: 12, fontWeight: 600, display: 'block', marginBottom: 4, color: 'var(--d-fg-2)' }}>{_t('webapp.driver_type')}</label>
              <select value={type} onChange={e => setType(e.target.value)} style={inputStyle}>
                {VTYPES.map(t => <option key={t.id} value={t.id}>{t.label}</option>)}
              </select>
            </div>
            <div style={{ flex: 1 }}>
              <label style={{ fontSize: 12, fontWeight: 600, display: 'block', marginBottom: 4, color: 'var(--d-fg-2)' }}>{_t('webapp.driver_capacity')}</label>
              <input type="number" value={capacity} onChange={e => setCapacity(e.target.value)} min="1" max="100" style={inputStyle} />
            </div>
          </div>
          {error && <p style={{ color: '#ef4444', fontSize: 12, margin: 0 }}>{error}</p>}
        </div>
        <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 8, padding: '12px 16px', borderTop: '1px solid var(--d-border)' }}>
          <button className="btn-s" onClick={onClose} style={{ fontSize: 12 }}>{_t('webapp.driver_cancel')}</button>
          <button className="btn-s" onClick={submit} disabled={loading} style={{ fontSize: 12, background: 'var(--nb-green)', color: '#fff', borderRadius: 8, padding: '6px 16px' }}>
            {loading ? _t('webapp.driver_saving') : _t('webapp.driver_save')}
          </button>
        </div>
      </div>
    </div>
  );
}

// ─── Queue Ticket Modal (Emitir Senha) ──────────────────────
function QueueTicketModal({ vehicle, onClose, onTicketIssued }) {
  const [agencies, setAgencies] = useState([]);
  const [selectedAgency, setSelectedAgency] = useState(null);
  const [services, setServices] = useState([]);
  const [selectedService, setSelectedService] = useState(null);
  const [loading, setLoading] = useState(true);
  const [step, setStep] = useState(1); // 1=agency, 2=service, 3=confirm

  // Load terminals for vehicle's company
  useEffect(() => {
    setLoading(true);
    API.get('/car-driver/terminals', { company_id: vehicle.company_id }).then(res => {
      if (res.message === 'success') {
        const list = res.data || [];
        setAgencies(list);
        if (list.length === 1) selectAgency(list[0]);
      }
    }).catch(() => {}).finally(() => setLoading(false));
  }, []);

  // Load services when agency selected
  const selectAgency = (ag) => {
    setSelectedAgency(ag);
    setLoading(true);
    API.get('/data/agencies/' + (ag.Hash || ag.hash) + '/services-monitoring').then(res => {
      if (res.message === 'success' && res.data) {
        const svcs = (res.data.services || []).filter(s => s.kiosk !== false && s.kiosk !== 0);
        setServices(svcs);
        if (svcs.length === 1) { setSelectedService(svcs[0]); setStep(3); }
        else setStep(2);
      } else setStep(2);
    }).catch(() => setStep(2)).finally(() => setLoading(false));
  };

  const selectService = (svc) => {
    setSelectedService(svc);
    setStep(3);
  };

  const issueTicket = async () => {
    if (!selectedAgency || !selectedService || loading) return;
    setLoading(true);

    const agencyHash = selectedAgency.Hash || selectedAgency.hash;
    const serviceHash = selectedService.Hash || selectedService.hash || selectedService.slug || '';

    try {
      // Emitir ticket via API Laravel (POST /tickets/print)
      const res = await API.post('/tickets/print', {
        agency: agencyHash,
        service: serviceHash,
        company: vehicle.company_hash || '',
      });

      if (res.message === 'success' && res.data) {
        const d = res.data;

        // Gravar vehicle-info no ticket (com geolocalização se disponível)
        const vInfoPayload = {
          ticket_id: d.ID || d.id,
          vehicle_id: vehicle.id,
          driver_name: d.ClientName || 'Condutor',
          driver_phone: null,
          car_route_id: null,
        };
        if (navigator.geolocation) {
          try {
            const pos = await new Promise((ok, fail) => navigator.geolocation.getCurrentPosition(ok, fail, { timeout: 5000 }));
            vInfoPayload.latitude = pos.coords.latitude;
            vInfoPayload.longitude = pos.coords.longitude;
          } catch (_) {}
        }
        const viRes = await API.post('/car-queue/vehicle-info', vInfoPayload).catch(() => ({}));
        if (viRes.message === 'error') {
          alert(viRes.error || _t('webapp.driver_ticket_error'));
          setLoading(false);
          return;
        }

        onTicketIssued({
          ticketId: d.ID || d.id,
          number: d.Number || d.Code,
          abbreviation: d.Abbreviation || selectedService.abbreviation || 'T',
          serviceName: selectedService.Name || selectedService.name || d.Service,
          licensePlate: vehicle.license_plate,
          vehicleLabel: vehicle.vehicle_label,
          capacity: vehicle.capacity,
          companyId: vehicle.company_id,
          agencyHash: agencyHash,
          agencyName: selectedAgency.Name || selectedAgency.name,
        });
      } else {
        const detail = res.detail || res.error || res.data?.error || res.errors?.agency?.[0] || res.errors?.service?.[0] || '';
        console.error('[Cars] Ticket print error:', res);
        alert(detail || _t('webapp.driver_ticket_error'));
      }
    } catch (err) {
      console.error('[Cars] Ticket print exception:', err);
      alert(_t('webapp.driver_ticket_error'));
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal-dialog" onClick={e => e.stopPropagation()} style={{ maxWidth: 420, maxHeight: '85vh', display: 'flex', flexDirection: 'column' }}>
        <div className="modal-header" style={{ flexShrink: 0 }}>
          <h3>{_t('webapp.driver_issue_ticket')}</h3>
          <button className="modal-close" onClick={onClose}>&times;</button>
        </div>
        <div className="modal-body" style={{ overflowY: 'auto', flex: 1 }}>
          {/* Vehicle summary */}
          <div style={{ background: 'var(--d-bg-surface-2)', borderRadius: 12, padding: '12px 16px', marginBottom: 16, display: 'flex', alignItems: 'center', gap: 12 }}>
            <div style={{ width: 40, height: 40, borderRadius: 10, background: 'rgba(245,158,11,0.12)', color: '#f59e0b', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
              <Ico name="car" size={20} />
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontWeight: 800, fontFamily: "'Courier New', monospace", letterSpacing: 1, fontSize: 15 }}>{vehicle.license_plate}</div>
              <div style={{ fontSize: 11, color: 'var(--d-fg-3)' }}>{vehicle.vehicle_label} — {vehicle.capacity} {_t('webapp.driver_seats')}</div>
            </div>
            {vehicle.company_name && (
              <div style={{ fontSize: 10, color: 'var(--d-fg-3)', background: 'var(--d-bg-surface-3)', padding: '2px 8px', borderRadius: 6 }}>{vehicle.company_name}</div>
            )}
          </div>

          {/* Steps indicator */}
          <div style={{ display: 'flex', gap: 4, marginBottom: 14 }}>
            {[1, 2, 3].map(s => (
              <div key={s} style={{ flex: 1, height: 3, borderRadius: 2, background: s <= step ? 'var(--nb-green)' : 'var(--d-bg-surface-2)', transition: 'background 0.2s' }} />
            ))}
          </div>

          {loading && step === 1 && (
            <div style={{ display: 'flex', justifyContent: 'center', padding: '2rem 0' }}><div className="nb-spinner" /></div>
          )}

          {/* Step 1: Select terminal */}
          {step === 1 && !loading && (
            <div>
              <p style={{ fontSize: 13, fontWeight: 600, marginBottom: 10 }}>{_t('webapp.driver_select_terminal')}</p>
              {agencies.length === 0 && (
                <div style={{ textAlign: 'center', padding: '20px 0', color: 'var(--d-fg-3)' }}>
                  <Ico name="map" size={24} />
                  <p style={{ fontSize: 12, marginTop: 6 }}>{_t('webapp.driver_no_terminals')}</p>
                </div>
              )}
              <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                {agencies.map(ag => (
                  <button key={ag.ID || ag.id} onClick={() => selectAgency(ag)}
                    style={{ width: '100%', textAlign: 'left', fontSize: 13, padding: '12px 14px', display: 'flex', alignItems: 'center', gap: 10, background: 'var(--d-bg-surface)', border: '1px solid var(--d-border)', borderRadius: 12, cursor: 'pointer', color: 'var(--d-fg-1)', transition: 'border-color 0.15s' }}
                    onMouseEnter={e => e.currentTarget.style.borderColor = 'var(--nb-green)'}
                    onMouseLeave={e => e.currentTarget.style.borderColor = 'var(--d-border)'}>
                    <div style={{ width: 32, height: 32, borderRadius: 8, background: 'rgba(2,165,134,0.1)', color: 'var(--nb-green)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                      <Ico name="map" size={16} />
                    </div>
                    <div style={{ flex: 1 }}>
                      <div style={{ fontWeight: 600 }}>{ag.Name || ag.name}</div>
                      {ag.Zone && <div style={{ fontSize: 11, color: 'var(--d-fg-3)' }}>{ag.Zone}</div>}
                    </div>
                    <Ico name="chevR" size={12} style={{ opacity: .3 }} />
                  </button>
                ))}
              </div>
            </div>
          )}

          {/* Step 2: Select route */}
          {step === 2 && (
            <div>
              <button onClick={() => { setStep(1); setSelectedAgency(null); }} style={{ background: 'none', border: 'none', color: 'var(--d-fg-3)', fontSize: 12, cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 4, marginBottom: 8, padding: 0 }}>
                <Ico name="arrowL" size={10} /> {selectedAgency?.Name || selectedAgency?.name}
              </button>
              <p style={{ fontSize: 13, fontWeight: 600, marginBottom: 10 }}>{_t('webapp.driver_select_route')}</p>
              {loading ? (
                <div style={{ display: 'flex', justifyContent: 'center', padding: '1.5rem 0' }}><div className="nb-spinner" /></div>
              ) : (
                <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                  {services.map(svc => (
                    <button key={svc.ID || svc.id} onClick={() => selectService(svc)}
                      style={{ width: '100%', textAlign: 'left', fontSize: 13, padding: '12px 14px', display: 'flex', alignItems: 'center', gap: 10, background: 'var(--d-bg-surface)', border: '1px solid var(--d-border)', borderRadius: 12, cursor: 'pointer', color: 'var(--d-fg-1)', transition: 'border-color 0.15s' }}
                      onMouseEnter={e => e.currentTarget.style.borderColor = 'var(--nb-green)'}
                      onMouseLeave={e => e.currentTarget.style.borderColor = 'var(--d-border)'}>
                      <div style={{ width: 32, height: 32, borderRadius: 8, background: 'rgba(14,165,233,0.1)', color: '#0ea5e9', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                        <Ico name="map" size={16} />
                      </div>
                      <div style={{ flex: 1 }}>
                        <div style={{ fontWeight: 600 }}>{svc.Name || svc.name}</div>
                        {svc.Abbreviation && <div style={{ fontSize: 11, color: 'var(--d-fg-3)' }}>{svc.Abbreviation}</div>}
                      </div>
                      <Ico name="chevR" size={12} style={{ opacity: .3 }} />
                    </button>
                  ))}
                  {services.length === 0 && (
                    <div style={{ textAlign: 'center', padding: '20px 0', color: 'var(--d-fg-3)', fontSize: 12 }}>
                      <Ico name="map" size={20} />
                      <p style={{ marginTop: 6 }}>Sem rotas neste terminal</p>
                    </div>
                  )}
                </div>
              )}
            </div>
          )}

          {/* Step 3: Confirm */}
          {step === 3 && (
            <div>
              <button onClick={() => setStep(services.length > 1 ? 2 : 1)} style={{ background: 'none', border: 'none', color: 'var(--d-fg-3)', fontSize: 12, cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 4, marginBottom: 8, padding: 0 }}>
                <Ico name="arrowL" size={10} /> {_t('webapp.driver_back')}
              </button>
              <div style={{ background: 'var(--d-bg-surface-2)', borderRadius: 12, padding: '16px', marginBottom: 16 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12 }}>
                  <div style={{ width: 28, height: 28, borderRadius: 7, background: 'rgba(2,165,134,0.1)', color: 'var(--nb-green)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                    <Ico name="map" size={14} />
                  </div>
                  <div>
                    <div style={{ fontSize: 10, color: 'var(--d-fg-3)', textTransform: 'uppercase', letterSpacing: .5 }}>{_t('webapp.driver_terminal')}</div>
                    <div style={{ fontSize: 14, fontWeight: 600 }}>{selectedAgency?.Name || selectedAgency?.name}</div>
                  </div>
                </div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                  <div style={{ width: 28, height: 28, borderRadius: 7, background: 'rgba(14,165,233,0.1)', color: '#0ea5e9', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                    <Ico name="map" size={14} />
                  </div>
                  <div>
                    <div style={{ fontSize: 10, color: 'var(--d-fg-3)', textTransform: 'uppercase', letterSpacing: .5 }}>{_t('webapp.driver_route')}</div>
                    <div style={{ fontSize: 14, fontWeight: 600 }}>{selectedService?.Name || selectedService?.name}</div>
                  </div>
                </div>
              </div>
              <button onClick={issueTicket} disabled={loading}
                style={{ width: '100%', fontSize: 14, padding: '13px', background: 'var(--nb-green)', color: '#fff', fontWeight: 700, border: 'none', borderRadius: 12, cursor: loading ? 'wait' : 'pointer', opacity: loading ? .7 : 1, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8 }}>
                <Ico name="ticket" size={16} />
                {loading ? _t('webapp.driver_issuing') : _t('webapp.driver_confirm_ticket')}
              </button>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

// ─── Cars View (Wrapper with tabs) ─────────────────────────
// ─── Terminal Monitor View (standalone, no auth needed) ─────
function TerminalMonitorView() {
  const [terminals, setTerminals] = useState([]);
  const [queues, setQueues] = useState({});
  const [loading, setLoading] = useState(true);

  const loadAll = useCallback(() => {
    setLoading(true);
    // Load terminals from car-driver/terminals endpoint (returns all terminals for cars companies)
    // Pass all known company IDs from various sources
    const companyIds = new Set();

    // Source: active driver ticket
    try {
      const saved = sessionStorage.getItem('nb_driver_ticket');
      if (saved) { const tk = JSON.parse(saved); if (tk.companyId) companyIds.add(tk.companyId); }
    } catch {}

    // Load via API — car-driver/terminals without company_id returns nothing,
    // so we need at least one company_id. Use a dedicated endpoint.
    API.get('/car-driver/terminals', { category: 'cars' }).then(res => {
      if (res.message === 'success' && res.data?.length) {
        const unique = res.data;
        setTerminals(unique);
        unique.forEach(t => loadQueue(t.Hash));
      } else {
        setTerminals([]);
      }
      setLoading(false);
    }).catch(() => { setTerminals([]); setLoading(false); });
  }, []);

  const loadQueue = (hash) => {
    Promise.all([
      API.get(`/car-queue/terminal/${hash}/boarding`).catch(() => ({ data: [] })),
      API.get(`/car-queue/terminal/${hash}/queue`).catch(() => ({ data: [] })),
    ]).then(([bRes, qRes]) => {
      setQueues(prev => ({ ...prev, [hash]: { boarding: bRes.data || [], queue: qRes.data || [] } }));
    });
  };

  useEffect(() => { loadAll(); }, []);
  useEffect(() => {
    if (terminals.length === 0) return;
    const iv = setInterval(() => terminals.forEach(t => loadQueue(t.Hash || t.hash)), 20000);
    return () => clearInterval(iv);
  }, [terminals]);

  if (loading) return <div style={{ display: 'flex', justifyContent: 'center', padding: '2rem 0' }}><div className="nb-spinner" /></div>;

  if (terminals.length === 0) {
    return (
      <div style={{ textAlign: 'center', padding: '30px 0', color: 'var(--d-fg-3)' }}>
        <Ico name="location" size={32} style={{ opacity: .3 }} />
        <p style={{ margin: '8px 0 0', fontSize: 13 }}>{_t('webapp.driver_no_terminals') || 'Sem terminais.'}</p>
      </div>
    );
  }

  return (
    <div>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}>
        <span style={{ fontSize: 13, fontWeight: 700 }}>
          <Ico name="location" size={14} /> {terminals.length} {terminals.length === 1 ? 'terminal' : 'terminais'}
        </span>
        <button onClick={() => terminals.forEach(t => loadQueue(t.Hash || t.hash))}
          style={{ background: 'none', border: '1px solid var(--d-border)', borderRadius: 8, padding: '4px 10px', fontSize: 11, cursor: 'pointer', color: 'var(--d-fg-2)' }}>
          <Ico name="refresh" size={11} /> {_t('webapp.driver_refresh')}
        </button>
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
        {terminals.map(t => {
          const hash = t.Hash || t.hash;
          const q = queues[hash] || { boarding: [], queue: [] };
          return (
            <div key={t.ID || hash} style={{ borderRadius: 14, border: '1px solid var(--d-border)', background: 'var(--d-bg-surface)', overflow: 'hidden' }}>
              {/* Header */}
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '12px 16px', borderBottom: '1px solid var(--d-border)' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                  <div style={{ width: 36, height: 36, borderRadius: 10, background: 'rgba(14,165,233,0.1)', color: '#0ea5e9', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                    <Ico name="location" size={18} />
                  </div>
                  <div>
                    <div style={{ fontSize: 14, fontWeight: 700 }}>{t.Name || t.name}</div>
                  </div>
                </div>
                <div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
                  <span style={{ fontSize: 12, fontWeight: 700, color: 'var(--nb-green)', background: 'rgba(2,165,134,0.1)', padding: '3px 10px', borderRadius: 8 }}>
                    {q.queue.length} na fila
                  </span>
                  <button onClick={() => loadQueue(hash)} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--d-fg-3)', padding: 4 }}>
                    <Ico name="refresh" size={14} />
                  </button>
                </div>
              </div>

              {/* Boarding */}
              {q.boarding.length > 0 && (
                <div style={{ padding: '10px 16px', background: 'rgba(2,165,134,0.04)', borderBottom: '1px solid var(--d-border)' }}>
                  <div style={{ fontSize: 10, fontWeight: 700, textTransform: 'uppercase', letterSpacing: .5, color: 'var(--nb-green)', marginBottom: 6 }}>{_t('webapp.live_boarding') || 'A embarcar'}</div>
                  {q.boarding.map((b, i) => (
                    <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 12 }}>
                      <span style={{ fontFamily: "'Courier New', monospace", fontWeight: 800, fontSize: 13 }}>{b.license_plate || '—'}</span>
                      <span style={{ color: 'var(--d-fg-3)' }}>{b.vehicle_model || b.vehicle_label || ''}</span>
                      {b.passengers_boarded != null && <span style={{ marginLeft: 'auto', fontSize: 11, fontWeight: 600 }}>{b.passengers_boarded}/{b.capacity}</span>}
                    </div>
                  ))}
                </div>
              )}

              {/* Queue */}
              {q.queue.length > 0 ? (
                <div style={{ maxHeight: 200, overflowY: 'auto' }}>
                  {q.queue.map((item, i) => (
                    <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '8px 16px', borderBottom: '1px solid var(--d-border)', fontSize: 12 }}>
                      <span style={{ width: 24, height: 24, borderRadius: '50%', background: 'var(--d-bg-surface-2)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 10, fontWeight: 700, flexShrink: 0 }}>
                        {item.position || (i + 1)}
                      </span>
                      <span style={{ fontFamily: "'Courier New', monospace", fontWeight: 700, fontSize: 13 }}>{item.license_plate || '—'}</span>
                      <span style={{ color: 'var(--d-fg-3)', flex: 1 }}>{item.driver_name || ''}</span>
                      {item.wait_minutes != null && <span style={{ fontSize: 11, color: 'var(--d-fg-3)' }}>{item.wait_minutes}min</span>}
                    </div>
                  ))}
                </div>
              ) : (
                <div style={{ textAlign: 'center', padding: '16px 0', fontSize: 12, color: 'var(--d-fg-3)' }}>
                  <Ico name="check" size={16} style={{ opacity: .3 }} /> {_t('webapp.driver_queue_empty') || 'Fila vazia'}
                </div>
              )}
            </div>
          );
        })}
      </div>
    </div>
  );
}

function CarsView({ onBack, onSelectCar, onSelectRoute, addToast, onTabChange, signedIn }) {
  const [mode, setMode] = useState(() => localStorage.getItem('nb_cars_mode') || null); // null=show chooser, 'passenger', 'driver'
  const [tab, setTab] = useState(() => (localStorage.getItem('nb_cars_mode') === 'driver') ? 'driver' : 'routes');

  const changeTab = (t) => { setTab(t); onTabChange && onTabChange(t); };

  const chooseMode = (m) => {
    setMode(m);
    localStorage.setItem('nb_cars_mode', m);
    if (m === 'driver') setTab('driver');
    else setTab('routes');
  };

  const switchMode = () => {
    localStorage.removeItem('nb_cars_mode');
    setMode(null);
  };

  // Tabs filtered by mode
  const visibleTabs = mode === 'driver'
    ? CARS_TABS.filter(t => t.id === 'driver' || t.id === 'terminals')
    : CARS_TABS.filter(t => t.id !== 'driver');

  return (
    <>
      <div className="detail-head">
        <button className="back-btn" onClick={onBack}><Ico name="arrowL" /></button>
        <div className="titles">
          <h1><Ico name="car" size={22} /> NhaBex Cars</h1>
          <p>{_t('webapp.cars_subtitle')}</p>
        </div>
        {mode && (
          <button onClick={switchMode} title={_t('webapp.cars_switch_mode')}
            style={{ marginLeft: 'auto', background: 'none', border: '1px solid var(--d-border)', borderRadius: 8, padding: '4px 10px', fontSize: 11, color: 'var(--d-fg-2)', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 4 }}>
            <Ico name={mode === 'driver' ? 'user' : 'car'} size={12} />
            {mode === 'driver' ? _t('webapp.driver_tab') : _t('webapp.cars_passenger')}
            <Ico name="chevD" size={10} />
          </button>
        )}
      </div>

      {/* Profile chooser modal */}
      {!mode && (
        <div style={{ padding: '40px 20px' }}>
          <div style={{ textAlign: 'center', marginBottom: 24 }}>
            <div style={{ width: 56, height: 56, borderRadius: 16, background: 'rgba(2,165,134,0.12)', color: 'var(--nb-green)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', marginBottom: 12 }}>
              <Ico name="car" size={28} />
            </div>
            <h2 style={{ fontSize: 18, fontWeight: 700, marginBottom: 6 }}>{_t('webapp.cars_choose_profile')}</h2>
            <p style={{ fontSize: 13, color: 'var(--d-fg-3)' }}>{_t('webapp.cars_choose_hint')}</p>
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 10, maxWidth: 360, margin: '0 auto' }}>
            {/* Passenger card */}
            <button onClick={() => chooseMode('passenger')}
              style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '16px 20px', borderRadius: 14, border: '2px solid var(--d-border)', background: 'var(--d-bg-surface)', cursor: 'pointer', textAlign: 'left', transition: 'border-color 0.15s' }}
              onMouseEnter={e => e.currentTarget.style.borderColor = 'var(--nb-green)'}
              onMouseLeave={e => e.currentTarget.style.borderColor = 'var(--d-border)'}>
              <div style={{ width: 44, height: 44, borderRadius: 12, background: 'rgba(14,165,233,0.12)', color: '#0ea5e9', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                <Ico name="users" size={22} />
              </div>
              <div>
                <div style={{ fontSize: 15, fontWeight: 700 }}>{_t('webapp.cars_passenger')}</div>
                <div style={{ fontSize: 12, color: 'var(--d-fg-3)', marginTop: 2 }}>{_t('webapp.cars_passenger_desc')}</div>
              </div>
              <Ico name="chevR" size={14} style={{ marginLeft: 'auto', opacity: .4 }} />
            </button>

            {/* Driver card */}
            <button onClick={() => chooseMode('driver')}
              style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '16px 20px', borderRadius: 14, border: '2px solid var(--d-border)', background: 'var(--d-bg-surface)', cursor: 'pointer', textAlign: 'left', transition: 'border-color 0.15s' }}
              onMouseEnter={e => e.currentTarget.style.borderColor = 'var(--nb-green)'}
              onMouseLeave={e => e.currentTarget.style.borderColor = 'var(--d-border)'}>
              <div style={{ width: 44, height: 44, borderRadius: 12, background: 'rgba(245,158,11,0.12)', color: '#f59e0b', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                <Ico name="car" size={22} />
              </div>
              <div>
                <div style={{ fontSize: 15, fontWeight: 700 }}>{_t('webapp.driver_tab')}</div>
                <div style={{ fontSize: 12, color: 'var(--d-fg-3)', marginTop: 2 }}>{_t('webapp.cars_driver_desc')}</div>
              </div>
              <Ico name="chevR" size={14} style={{ marginLeft: 'auto', opacity: .4 }} />
            </button>
          </div>
        </div>
      )}

      {/* Mode selected — show tabs + content */}
      {mode && (
        <>
          {visibleTabs.length > 1 && (
            <div className="tk-tabs" style={{ marginBottom: 12, gap: 4 }}>
              {visibleTabs.map(t => (
                <button key={t.id} className={`tk-tab ${tab === t.id ? 'on' : ''}`} onClick={() => changeTab(t.id)} style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                  <Ico name={t.icon} size={14} />
                  {t.label}
                </button>
              ))}
            </div>
          )}

          {tab === 'routes' && mode === 'passenger' && <RoutesListView onSelectRoute={onSelectRoute} />}
          {tab === 'terminals' && <TerminalMonitorView />}
          {tab === 'rent' && mode === 'passenger' && <RentListView onSelectCar={onSelectCar} />}
          {tab === 'driver' && <DriverModeView signedIn={signedIn} addToast={addToast} />}
          <p style={{ textAlign: 'center', fontSize: 11, color: 'var(--nb-fg-3)', marginTop: 10 }}>
            NhaBex Cars · {_t('webapp.cars_footer')}
          </p>
        </>
      )}
    </>
  );
}


function TrackingView({ onBack, onSelectOrder, selectedCode, signedIn, companyHash }) {
  const [code, setCode] = useState('');
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  const [history, setHistory] = useState([]);

  useEffect(() => {
    if (signedIn) {
      // Logged-in: load tracked orders from API
      API.get('/client/orders/tracked').then(res => {
        if (res.message === 'success' && Array.isArray(res.data)) {
          const apiHist = res.data.map(o => ({
            id: o.id, code: o.code, title: o.title, status: o.status,
            statusLabel: o.statusLabel, company: o.company || '', agency: o.agency || '',
            time: o.subscribedAt ? new Date(o.subscribedAt).getTime() : Date.now(),
          }));
          setHistory(apiHist);
        } else {
          // Fallback to localStorage
          try { setHistory(JSON.parse(localStorage.getItem('ot_history') || '[]')); } catch { setHistory([]); }
        }
      }).catch(() => {
        try { setHistory(JSON.parse(localStorage.getItem('ot_history') || '[]')); } catch { setHistory([]); }
      });
    } else {
      // Not logged in: use localStorage only
      try { setHistory(JSON.parse(localStorage.getItem('ot_history') || '[]')); } catch { setHistory([]); }
    }
  }, [signedIn]);

  const saveToHistory = (data) => {
    try {
      let hist = JSON.parse(localStorage.getItem('ot_history') || '[]');
      hist = hist.filter(h => h.code !== data.code);
      hist.unshift({ id: data.id, code: data.code, title: data.title, status: data.status, statusLabel: data.statusLabel, company: data.company || '', agency: data.agency || '', time: Date.now() });
      if (hist.length > 20) hist = hist.slice(0, 20);
      localStorage.setItem('ot_history', JSON.stringify(hist));
      setHistory(hist);
    } catch {}
    // Subscribe via API when logged in
    if (signedIn && data.id) {
      API.post('/client/orders/subscribe', { order_id: data.id, status: data.status }).catch(() => {});
    }
  };

  const removeFromHistory = (itemCode) => {
    try {
      const hist = JSON.parse(localStorage.getItem('ot_history') || '[]');
      const item = hist.find(h => h.code === itemCode);
      const filtered = hist.filter(h => h.code !== itemCode);
      localStorage.setItem('ot_history', JSON.stringify(filtered));
      setHistory(filtered);
      // Unsubscribe server-side when logged in
      if (signedIn && item?.id) {
        API.del('/client/orders/tracked/' + item.id).catch(() => {});
      }
    } catch {}
  };

  const openOrder = (data, skipHistory) => {
    if (!skipHistory) saveToHistory(data);
    if (onSelectOrder) onSelectOrder(data);
  };

  const [rateLimitSeconds, setRateLimitSeconds] = useState(0);

  const lookup = async (searchCode, fromList) => {
    const c = (searchCode || code).trim();
    if (!c || loading || rateLimitSeconds > 0) return;
    setCode(c);
    setLoading(true); setError(null);
    try {
      const _cHash = companyHash || '';
      const res = await fetch(`../commercial/api/client-orders/public-lookup?code=${encodeURIComponent(c)}&company=${encodeURIComponent(_cHash)}`);
      const data = await res.json();
      if (data.message === 'success') { openOrder(data.data, fromList); }
      else if (data.error === 'rate-limited') {
        const secs = data.retryAfter || 60;
        setRateLimitSeconds(secs);
        setError('rate-limited');
        const countdown = setInterval(() => {
          setRateLimitSeconds(prev => {
            if (prev <= 1) { clearInterval(countdown); return 0; }
            return prev - 1;
          });
        }, 1000);
      }
      else if (data.error === 'order-not-found') setError('not-found');
      else setError('error');
    } catch { setError('error'); }
    setLoading(false);
  };

  const reset = () => { setCode(''); setError(null); };
  const st = (status) => TRACK_STATUS[status] || TRACK_STATUS.pending;

  return (
    <div className="tracking-view">
      <div className="detail-head">
        <button className="back-btn" onClick={onBack}><Ico name="arrowL" /></button>
        <div className="titles">
          <h1>{_t('webapp.track_title')}</h1>
          <p>{_t('webapp.track_subtitle')}</p>
        </div>
      </div>

      {/* Search bar */}
      <div className="trk-search-wrap">
        <div className="trk-search">
          <Ico name="search" size={16} />
          <input className="trk-search-input" type="text" placeholder={_t('webapp.track_search_placeholder')} value={code}
            onChange={e => setCode(e.target.value)} onKeyDown={e => e.key === 'Enter' && lookup()} autoComplete="off" />
          {code && !loading && (
            <button className="trk-clear-btn" onClick={() => setCode('')} title={_t('webapp.track_clear')}>×</button>
          )}
        </div>
        <button className="trk-search-btn" disabled={!code.trim() || loading} onClick={() => lookup()}>
          {loading ? <span className="trk-spinner" /> : _t('webapp.track_btn')}
        </button>
      </div>

      {/* Loading skeleton */}
      {loading && (
        <div className="trk-loading">
          <div className="trk-loading-bar" />
          <div className="trk-loading-bar trk-loading-bar--short" />
          <div className="trk-loading-bar trk-loading-bar--med" />
        </div>
      )}

      {/* Error: not found */}
      {error === 'not-found' && (
        <div className="trk-empty-state" style={{ animation: 'fadeIn 0.3s ease' }}>
          <div className="trk-empty-icon trk-empty-icon--warn">
            <Ico name="search" size={28} />
          </div>
          <h3>{_t('webapp.track_not_found')}</h3>
          <p>{_t('webapp.track_not_found_desc').replace(':code', code)}</p>
          <button className="trk-new-search-btn" onClick={reset}>
            <Ico name="arrowL" size={14} /> {_t('webapp.track_try_again')}
          </button>
        </div>
      )}

      {/* Error: rate limited */}
      {error === 'rate-limited' && (
        <div className="trk-empty-state" style={{ animation: 'fadeIn 0.3s ease' }}>
          <div className="trk-empty-icon trk-empty-icon--error">
            <Ico name="shield" size={28} />
          </div>
          <h3>{_t('webapp.track_rate_limited_short')}</h3>
          <p>{_t('webapp.track_rate_limited').replace(':seconds', rateLimitSeconds)}</p>
          {rateLimitSeconds > 0 && (
            <div style={{ fontSize: 28, fontWeight: 700, color: 'var(--nb-danger, #ef4444)', fontVariantNumeric: 'tabular-nums', marginTop: 8 }}>
              {Math.floor(rateLimitSeconds / 60)}:{String(rateLimitSeconds % 60).padStart(2, '0')}
            </div>
          )}
          {rateLimitSeconds === 0 && (
            <button className="trk-new-search-btn" onClick={reset}>
              <Ico name="arrowL" size={14} /> {_t('webapp.track_try_again')}
            </button>
          )}
        </div>
      )}

      {/* Error: connection */}
      {error === 'error' && (
        <div className="trk-empty-state" style={{ animation: 'fadeIn 0.3s ease' }}>
          <div className="trk-empty-icon trk-empty-icon--error">
            <Ico name="wifi" size={28} />
          </div>
          <h3>{_t('webapp.track_conn_error')}</h3>
          <p>{_t('webapp.track_conn_error_desc')}</p>
          <button className="trk-new-search-btn" disabled={loading} onClick={() => lookup()}>
            {loading ? <><span className="btn-spinner" /> {_t('webapp.track_try_again')}</> : <><Ico name="activity" size={14} /> {_t('webapp.track_try_again')}</>}
          </button>
        </div>
      )}

      {/* History */}
      {!error && !loading && history.length > 0 && (
        <div style={{ animation: 'fadeIn 0.3s ease' }}>
          <div className="trk-section-header">
            <span className="trk-section-title">{_t('webapp.track_recent')}</span>
            <span className="trk-section-count">{history.length}</span>
          </div>
          <div className="trk-history-list">
            {history.map((item, i) => {
              const s = st(item.status);
              return (
                <div key={item.code || i} className={`trk-history-card ${selectedCode === item.code ? 'trk-history-card--active' : ''}`} onClick={() => lookup(item.code, true)}>
                  <div className="trk-history-icon" style={{ background: `${s.color}15`, color: s.color }}>
                    <Ico name={s.icon} size={16} />
                  </div>
                  <div className="trk-history-info">
                    <div className="trk-history-top">
                      <span className="trk-history-code">#{item.code}</span>
                      <span className="trk-history-badge" style={{ background: `${s.color}18`, color: s.color }}>{item.statusLabel || s.label}</span>
                    </div>
                    <span className="trk-history-title">{item.title}</span>
                    <div className="trk-history-meta">
                      {(item.company || item.agency) && <span>{item.company || item.agency}</span>}
                      {item.time && <span>{timeAgo(item.time)}</span>}
                    </div>
                  </div>
                  <button className="trk-history-del" onClick={e => { e.stopPropagation(); removeFromHistory(item.code); }} title={_t('webapp.track_remove')}>
                    <Ico name="cross" size={10} />
                  </button>
                </div>
              );
            })}
          </div>
        </div>
      )}

      {/* Empty state */}
      {!error && !loading && history.length === 0 && (
        <div className="trk-empty-state">
          <div className="trk-empty-icon">
            <Ico name="package" size={32} />
          </div>
          <h3>{_t('webapp.track_empty_title')}</h3>
          <p>{_t('webapp.track_empty_desc')}</p>
          <div className="trk-tips">
            <div className="trk-tip"><Ico name="tag" size={13} /><span>{_t('webapp.track_tip_code')}</span></div>
            <div className="trk-tip"><Ico name="bell" size={13} /><span>{_t('webapp.track_tip_notif')}</span></div>
            <div className="trk-tip"><Ico name="clock" size={13} /><span>{_t('webapp.track_tip_history')}</span></div>
          </div>
        </div>
      )}
    </div>
  );
}

// ─── Tracking Detail Panel (right side) ─────────────────────
function TrackingDetailPanel({ order, onClose, collapsed, onToggle }) {
  if (collapsed) {
    return (
      <aside className="ticket-panel collapsed">
        <button className="ticket-collapse-btn" onClick={onToggle} title={_t('webapp.panel_expand')}>
          <span style={{ transform: 'rotate(180deg)', display: 'inline-flex' }}><Ico name="chevR" size={16} /></span>
        </button>
      </aside>
    );
  }
  if (!order) return null;

  const st = TRACK_STATUS[order.status] || TRACK_STATUS.pending;
  const currentStep = st.step;
  const isCancelled = order.status === 'cancelled';

  return (
    <aside className="ticket-panel">
      <button className="ticket-collapse-btn" onClick={onToggle} title={_t('webapp.panel_collapse')}><Ico name="chevR" size={16} /></button>
      <div className="ticket-head" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <h3>{_t('webapp.track_details')}</h3>
        <button onClick={onClose} style={{ background: 'none', border: 'none', color: 'var(--d-fg-3)', cursor: 'pointer', fontSize: 18 }}>&times;</button>
      </div>
      <div style={{ padding: '0 1rem', overflowY: 'auto', flex: 1, paddingBottom: '1rem' }}>

        {/* Status header */}
        <div style={{ textAlign: 'center', padding: '1rem 0' }}>
          <div className="trk-status-badge" style={{ background: `${st.color}20`, color: st.color, width: 56, height: 56, borderRadius: 14, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', marginBottom: 10 }}>
            <Ico name={st.icon} size={28} />
          </div>
          <h2 style={{ fontSize: '1.1rem', fontWeight: 700, color: 'var(--d-fg-1)', marginBottom: 2 }}>{order.title}</h2>
          <p style={{ fontSize: '0.8rem', color: 'var(--d-fg-3)', marginBottom: 8, fontFamily: 'monospace', fontWeight: 600 }}>#{order.code}</p>
          <span style={{ display: 'inline-block', fontSize: 12, fontWeight: 600, padding: '4px 14px', borderRadius: 8, color: st.color, background: `${st.color}18` }}>
            {order.statusLabel || st.label}
          </span>
        </div>

        {/* Timeline stepper (vertical) */}
        {!isCancelled && (
          <div className="trk-v-timeline">
            {TRACK_STEPS.map((key, i) => {
              const s = TRACK_STATUS[key];
              const done = i <= currentStep;
              const active = i === currentStep;
              return (
                <div key={key} className={`trk-v-step ${done ? 'trk-v-step--done' : ''} ${active ? 'trk-v-step--active' : ''}`}>
                  <div className="trk-v-track">
                    <div className="trk-v-dot" style={done ? { background: s.color, borderColor: s.color } : {}}>
                      {done && <Ico name="check" size={9} />}
                    </div>
                    {i < TRACK_STEPS.length - 1 && (
                      <div className="trk-v-line" style={i < currentStep ? { background: TRACK_STATUS[TRACK_STEPS[i + 1]].color } : {}} />
                    )}
                  </div>
                  <div className="trk-v-content">
                    <span className="trk-v-label" style={active ? { color: s.color, fontWeight: 700 } : {}}>{s.label}</span>
                    {active && <span className="trk-v-sub">Estado actual</span>}
                  </div>
                </div>
              );
            })}
          </div>
        )}

        {/* Cancelled banner */}
        {isCancelled && (
          <div className="trk-cancelled-banner" style={{ marginBottom: 12 }}>
            <Ico name="cross" size={16} />
            <span>{_t('webapp.track_cancelled_msg')}</span>
          </div>
        )}

        {/* Details */}
        <div className="gm-detail-card" style={{ marginTop: 12 }}>
          <div className="gm-detail-row"><span>{_t('webapp.track_description')}</span><span>{order.title}</span></div>
          {order.company && <div className="gm-detail-row"><span>{_t('webapp.track_company')}</span><span>{order.company}</span></div>}
          {order.agency && <div className="gm-detail-row"><span>{_t('webapp.track_location')}</span><span>{order.agency}</span></div>}
          {order.readyAt && <div className="gm-detail-row"><span>{_t('webapp.track_ready_since')}</span><span>{order.readyAt.substring(0, 16)}</span></div>}
          {order.expiresAt && <div className="gm-detail-row"><span>{_t('webapp.track_deadline')}</span><span>{order.expiresAt}</span></div>}
        </div>

        {/* Display message */}
        {order.displayMessage && (
          <div className="trk-message" style={{ marginTop: 12 }}>
            <Ico name="info" size={15} />
            <span>{order.displayMessage}</span>
          </div>
        )}
      </div>
    </aside>
  );
}

// ─── Settings View ──────────────────────────────────────────
function SettingsView({ onBack, theme, onToggleTheme }) {
  return (
    <div className="settings-view">
      <div className="detail-head">
        <button className="back-btn" onClick={onBack}><Ico name="arrowL" /></button>
        <div className="titles"><h1>{_t('webapp.nav_settings')}</h1></div>
      </div>
      <div className="stg-section">
        <div className="stg-section-label">{_t('webapp.settings_appearance')}</div>
        <div className="stg-row" onClick={onToggleTheme} style={{ cursor: 'pointer' }}>
          <div className="stg-row-left">
            <Ico name="bolt" size={16} />
            <div><span className="stg-row-title">{_t('webapp.settings_dark_theme')}</span><span className="stg-row-desc">{_t('webapp.settings_dark_theme_desc')}</span></div>
          </div>
          <div className={`stg-toggle ${theme === 'dark' ? 'stg-toggle--on' : ''}`}><div className="stg-toggle-thumb" /></div>
        </div>
      </div>
      <div className="stg-section">
        <div className="stg-section-label">{_t('webapp.settings_notifications')}</div>
        <div className="stg-row" onClick={() => { if ('Notification' in window && Notification.permission !== 'granted') Notification.requestPermission(); }} style={{ cursor: 'pointer' }}>
          <div className="stg-row-left">
            <Ico name="bell" size={16} />
            <div>
              <span className="stg-row-title">{_t('webapp.settings_push_notifications')}</span>
              <span className="stg-row-desc">{'Notification' in window ? (Notification.permission === 'granted' ? _t('webapp.settings_notif_enabled') : Notification.permission === 'denied' ? _t('webapp.settings_notif_blocked') : _t('webapp.settings_notif_click')) : _t('webapp.settings_notif_unsupported')}</span>
            </div>
          </div>
          {'Notification' in window && Notification.permission === 'granted' && <div className="stg-toggle stg-toggle--on"><div className="stg-toggle-thumb" /></div>}
        </div>
      </div>
      <div className="stg-section">
        <div className="stg-section-label">{_t('webapp.settings_data')}</div>
        <div className="stg-row" onClick={() => { localStorage.removeItem(_geoKey('nb_notifications')); localStorage.removeItem('ot_history'); }} style={{ cursor: 'pointer' }}>
          <div className="stg-row-left">
            <Ico name="copy" size={16} />
            <div><span className="stg-row-title">{_t('webapp.settings_clear_cache')}</span><span className="stg-row-desc">{_t('webapp.settings_clear_cache_desc')}</span></div>
          </div>
        </div>
      </div>
      <div className="stg-section">
        <div className="stg-section-label">{_t('webapp.settings_about')}</div>
        <div className="stg-row">
          <div className="stg-row-left">
            <Ico name="shield" size={16} />
            <div><span className="stg-row-title">NhaBex Webapp</span><span className="stg-row-desc">v2.4.3 · Powered by NhaBex</span></div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ─── Games Detail Panel (right side — all tabs) ─────────────
function GamesDetailPanel({ panel, onClose, onAction, myTeams, playerId, collapsed, onToggle }) {
  if (collapsed) {
    return (
      <aside className="ticket-panel collapsed">
        <button className="ticket-collapse-btn" onClick={onToggle} title={_t('games.expand')}>
          <span style={{ transform: 'rotate(180deg)', display: 'inline-flex' }}><Ico name="chevR" size={16} /></span>
        </button>
      </aside>
    );
  }

  const { type, data } = panel;
  const statusColor = (s) => ({ open: '#22c55e', ongoing: '#f59e0b', finished: '#6b7280', draft: '#3b82f6' }[s] || '#6b7280');
  const titles = { tournament: _t('games.tab_tournaments'), venue: _t('games.lbl_field'), training: _t('games.tab_trainings'), team: _t('games.tab_teams'), athlete: _t('games.tab_athletes'), bookings: _t('games.my_bookings'), subscription: _t('webapp.game_subscription_detail') };

  return (
    <aside className="ticket-panel">
      <button className="ticket-collapse-btn" onClick={onToggle} title={_t('games.collapse')}><Ico name="chevR" size={16} /></button>
      <div className="ticket-head" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <h3>{titles[type] || _t('games.detail')}</h3>
        <button onClick={onClose} style={{ background: 'none', border: 'none', color: 'var(--d-fg-3)', cursor: 'pointer', fontSize: 18 }}>&times;</button>
      </div>
      <div style={{ padding: '0 1rem', overflowY: 'auto', flex: 1, paddingBottom: '1rem' }}>

        {/* ── TOURNAMENT ── */}
        {type === 'tournament' && (() => {
          const td = data;
          const registeredIds = (td.registered_teams || []).map(t => t.id);
          const myRegistered = (myTeams || []).filter(t => registeredIds.includes(t.ID));
          const myAvailable = (myTeams || []).filter(t => !registeredIds.includes(t.ID));
          const myPending = (td.registered_teams || []).filter(t => t.status === 'pending' && (myTeams || []).some(mt => mt.ID === t.id));
          const hasPendingPayment = td.fee_raw > 0 && myPending.length > 0;
          return (<>
            <div style={{ textAlign: 'center', padding: '0.75rem 0' }}>
              <div style={{ width: 48, height: 48, borderRadius: '0.75rem', background: (td.color || '#02A586') + '22', color: td.color || '#02A586', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', marginBottom: 8 }}><Ico name="trophy" size={24} /></div>
              <h2 style={{ fontSize: '1rem', fontWeight: 700, color: 'var(--d-fg-1)', marginBottom: 2 }}>{td.name}</h2>
              <p style={{ fontSize: '0.75rem', color: 'var(--d-fg-3)' }}>{td.sport_name} · {td.location}</p>
              <span className="gm-status" style={{ background: `${statusColor(td.status)}22`, color: statusColor(td.status), marginTop: 6, display: 'inline-block' }}>{td.status_label || td.status}</span>
            </div>
            <div className="gm-detail-card" style={{ marginTop: 8 }}>
              <div className="gm-detail-row"><span>{_t('games.tournament_format')}</span><span>{td.format || '-'}</span></div>
              <div className="gm-detail-row"><span>{_t('games.lbl_date')}</span><span>{td.date}</span></div>
              <div className="gm-detail-row"><span>{_t('games.tab_teams')}</span><span>{td.teams}/{td.max_teams}</span></div>
              {td.fee && <div className="gm-detail-row"><span>{_t('games.tournament_fee')}</span><span>{td.fee}</span></div>}
              {td.prize && <div className="gm-detail-row"><span>{_t('games.tournament_prize')}</span><span style={{ color: 'var(--nb-green)', fontWeight: 600 }}>{td.prize}</span></div>}
            </div>
            {td.description && <p style={{ fontSize: '0.8125rem', color: 'var(--d-fg-2)', lineHeight: 1.5, marginTop: 12 }}>{td.description}</p>}
            {td.rules && <div style={{ marginTop: 12 }}><h4 style={{ fontSize: '0.75rem', fontWeight: 600, color: 'var(--d-fg-1)', marginBottom: 4 }}>{_t('games.rules')}</h4><p style={{ fontSize: '0.75rem', color: 'var(--d-fg-3)', lineHeight: 1.5, whiteSpace: 'pre-line' }}>{td.rules}</p></div>}
            {td.registered_teams && td.registered_teams.length > 0 && (
              <div style={{ marginTop: 12 }}>
                <h4 style={{ fontSize: '0.75rem', fontWeight: 600, color: 'var(--d-fg-1)', marginBottom: 6 }}>{_t('games.registered_teams')} ({td.registered_teams.length})</h4>
                <div className="gm-team-list">{td.registered_teams.map((t, i) => (
                  <div key={i} className="gm-team-chip" style={{ borderColor: t.color || 'var(--d-border)' }}><span className="gm-team-initials" style={{ background: (t.color || '#666') + '33', color: t.color || 'var(--d-fg-2)', width: '1.25rem', height: '1.25rem', fontSize: '0.5rem' }}>{t.initials || t.name?.substring(0, 2)}</span><span>{t.name}</span></div>
                ))}</div>
              </div>
            )}
            {td.status === 'open' && (<div style={{ marginTop: 16 }}>
              {myRegistered.length > 0 && <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 8, padding: '0.4rem 0.625rem', background: 'rgba(2,165,134,0.08)', borderRadius: '0.375rem' }}><Ico name="check" size={12} /><span style={{ fontSize: '0.75rem', color: 'var(--nb-green)', fontWeight: 500 }}>{myRegistered.length === 1 ? `${myRegistered[0].Name} ${_t('games.enrolled').toLowerCase()}` : `${myRegistered.length} ${_t('games.registered_teams').toLowerCase()}`}</span></div>}
              {hasPendingPayment && myPending.map(pt => (<div key={pt.id} style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 8, padding: '0.4rem 0.625rem', background: 'rgba(245,158,11,0.08)', borderRadius: '0.375rem' }}><Ico name="clock" size={12} /><span style={{ fontSize: '0.75rem', color: '#f59e0b', fontWeight: 500, flex: 1 }}>{pt.name} — {_t('games.payment_pending')}</span><button className="pay-btn-primary" style={{ padding: '0.25rem 0.625rem', fontSize: '0.6875rem' }} onClick={() => onAction({ action: 'register-team', tournament: { ...td, _forcePay: true, _payTeamId: pt.id } })}><Ico name="lock" size={11} /> {_t('games.pay')} {td.fee}</button></div>))}
              {myAvailable.length > 0 && <button className="pay-btn-primary" style={{ width: '100%', justifyContent: 'center', fontSize: '0.8125rem' }} onClick={() => onAction({ action: 'register-team', tournament: td })}>{myRegistered.length > 0 ? _t('games.register_another_team') : _t('games.register_team')}{td.fee_raw > 0 && <span style={{ marginLeft: 4, fontSize: '0.6875rem', opacity: 0.8 }}>· {td.fee}</span>}</button>}
              {!playerId && myRegistered.length === 0 && <button className="pay-btn-primary" style={{ width: '100%', justifyContent: 'center', fontSize: '0.8125rem' }} onClick={() => onAction({ action: 'register-team', tournament: td })}>{_t('games.register_team')}</button>}
            </div>)}
          </>);
        })()}

        {/* ── VENUE ── */}
        {type === 'venue' && (() => {
          const v = data;
          return (<>
            <div style={{ textAlign: 'center', padding: '0.75rem 0' }}>
              <div style={{ width: 48, height: 48, borderRadius: '0.75rem', background: (v.color || '#3b82f6') + '22', color: v.color || '#3b82f6', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', marginBottom: 8 }}><Ico name="field" size={24} /></div>
              <h2 style={{ fontSize: '1rem', fontWeight: 700, color: 'var(--d-fg-1)', marginBottom: 2 }}>{v.name}</h2>
              <p style={{ fontSize: '0.75rem', color: 'var(--d-fg-3)' }}>{v.type} · {v.surface}</p>
              <span className="gm-avail-dot" style={{ background: v.available !== false ? '#22c55e' : '#ef4444', display: 'inline-block', marginTop: 6 }} />
            </div>
            <div className="gm-detail-card" style={{ marginTop: 8 }}>
              {v.address && <div className="gm-detail-row"><span>{_t('games.lbl_location')}</span><span>{v.address}</span></div>}
              <div className="gm-detail-row"><span>{_t('games.lbl_price')}</span><span>{v.price || _t('games.free')}</span></div>
              {v.capacity && <div className="gm-detail-row"><span>{_t('games.lbl_capacity')}</span><span>{v.capacity} lugares</span></div>}
            </div>
            {v.features && v.features.length > 0 && <div style={{ display: 'flex', gap: 4, flexWrap: 'wrap', marginTop: 12 }}>{v.features.map((f, i) => <span key={i} className="apt-badge">{f}</span>)}</div>}
            <button className="pay-btn-primary" style={{ width: '100%', justifyContent: 'center', marginTop: 16 }} onClick={() => onAction({ action: 'book-venue', venue: v })}>{_t('games.book')} {_t('games.lbl_field').toLowerCase()}</button>
          </>);
        })()}

        {/* ── TRAINING ── */}
        {type === 'training' && (() => {
          const t = data;
          const joined = playerId && (t.players || []).some(p => p.player_id === playerId);
          const isOrganizer = playerId && t.organizer_id === playerId;
          const enrollments = t.enrollments || [];
          const pendingEnrollments = enrollments.filter(e => e.status === 'pending');
          const approvedEnrollments = enrollments.filter(e => e.status === 'approved');
          const sessions = t.sessions || [];
          const weekdays = [_t('webapp.day_sun_short'),_t('webapp.day_mon_short'),_t('webapp.day_tue_short'),_t('webapp.day_wed_short'),_t('webapp.day_thu_short'),_t('webapp.day_fri_short'),_t('webapp.day_sat_short')];
          return (<>
            <div style={{ textAlign: 'center', padding: '0.75rem 0' }}>
              <div style={{ width: 48, height: 48, borderRadius: '0.75rem', background: 'rgba(6,182,212,0.12)', color: '#06b6d4', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', marginBottom: 8 }}><Ico name="users" size={24} /></div>
              <h2 style={{ fontSize: '1rem', fontWeight: 700, color: 'var(--d-fg-1)', marginBottom: 2 }}>{t.title}</h2>
              <p style={{ fontSize: '0.75rem', color: 'var(--d-fg-3)' }}>{t.sport_name}{t.venue_name ? ` · ${t.venue_name}` : ''}</p>
              {t.enrollment_type && <span className="apt-badge" style={{ marginTop: 4, display: 'inline-block' }}>{t.enrollment_type === 'open' ? _t('games.status_open') : _t('games.invite_only')}</span>}
            </div>

            <div className="gm-detail-card" style={{ marginTop: 8 }}>
              <div className="gm-detail-row"><span>{_t('games.lbl_start')}</span><span>{t.start_date || t.date}</span></div>
              {t.end_date && <div className="gm-detail-row"><span>{_t('games.lbl_end')}</span><span>{t.end_date}</span></div>}
              <div className="gm-detail-row"><span>{_t('games.lbl_time')}</span><span>{t.start_time || t.time}{t.end_time ? ` - ${t.end_time}` : ''}</span></div>
              {(t.field || t.venue_name) && <div className="gm-detail-row"><span>{_t('games.lbl_field')}</span><span>{t.venue_name || t.field}</span></div>}
              <div className="gm-detail-row"><span>{_t('games.lbl_organizer')}</span><span>{t.organizer_name || t.organizer || '-'}</span></div>
              <div className="gm-detail-row"><span>{_t('games.lbl_capacity')}</span><span>{t.max_players} por sessão</span></div>
              <div className="gm-detail-row"><span>{_t('games.lbl_payment')}</span><span>{t.payment_mode === 'monthly' ? _t('games.monthly') : _t('games.daily')}</span></div>
              {t.daily_price > 0 && <div className="gm-detail-row"><span>{_t('games.daily_price')}</span><span style={{ color: 'var(--nb-green)' }}>{t.daily_price} {t.currency || 'CVE'}</span></div>}
              {t.monthly_price > 0 && <div className="gm-detail-row"><span>{_t('games.monthly_price')}</span><span style={{ color: 'var(--nb-green)' }}>{t.monthly_price} {t.currency || 'CVE'}</span></div>}
            </div>

            {/* Weekly schedule */}
            {t.weekly_schedule && t.weekly_schedule.length > 0 && (
              <div style={{ marginTop: 12 }}>
                <h4 style={{ fontSize: '0.75rem', fontWeight: 600, color: 'var(--d-fg-1)', marginBottom: 4 }}>{_t('games.lbl_weekly_schedule')}</h4>
                <div style={{ display: 'flex', gap: 4, flexWrap: 'wrap' }}>{t.weekly_schedule.map((s, i) => (
                  <span key={i} className="apt-badge">{weekdays[s.day]} {s.start}{s.end ? `-${s.end}` : ''}</span>
                ))}</div>
              </div>
            )}

            {t.description && <p style={{ fontSize: '0.8125rem', color: 'var(--d-fg-2)', lineHeight: 1.5, marginTop: 12 }}>{t.description}</p>}

            {/* Enrollments — organizer can approve/reject */}
            {t._detailed && pendingEnrollments.length > 0 && isOrganizer && (
              <div style={{ marginTop: 12 }}>
                <h4 style={{ fontSize: '0.75rem', fontWeight: 600, color: '#f59e0b', marginBottom: 6 }}>{_t('games.pending_requests')} ({pendingEnrollments.length})</h4>
                {pendingEnrollments.map(e => (
                  <div key={e.player_id} style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '0.375rem 0', borderBottom: '1px solid var(--d-border)' }}>
                    <span className="gm-team-initials" style={{ background: (e.color || '#666') + '33', color: e.color || '#ccc', width: '1.25rem', height: '1.25rem', fontSize: '0.5rem' }}>{e.initials}</span>
                    <span style={{ flex: 1, fontSize: '0.75rem', color: 'var(--d-fg-1)' }}>{e.name}</span>
                    <button className="pay-btn-primary" style={{ padding: '0.1875rem 0.5rem', fontSize: '0.625rem' }} onClick={() => onAction({ action: 'approve-enrollment', trainingId: t.id, playerId: e.player_id })}>{_t('games.approve')}</button>
                    <button className="pay-btn-outline" style={{ padding: '0.1875rem 0.5rem', fontSize: '0.625rem' }} onClick={() => onAction({ action: 'reject-enrollment', trainingId: t.id, playerId: e.player_id })}>{_t('games.reject')}</button>
                  </div>
                ))}
              </div>
            )}

            {/* Approved athletes */}
            {t._detailed && approvedEnrollments.length > 0 && (
              <div style={{ marginTop: 12 }}>
                <h4 style={{ fontSize: '0.75rem', fontWeight: 600, color: 'var(--d-fg-1)', marginBottom: 6 }}>{_t('games.enrolled_athletes')} ({approvedEnrollments.length})</h4>
                <div className="gm-team-list">{approvedEnrollments.map(e => (
                  <div key={e.player_id} className="gm-team-chip" style={{ borderColor: e.color || 'var(--d-border)' }}>
                    {e.photo ? <img src={e.photo} alt="" style={{ width: 18, height: 18, borderRadius: '50%', objectFit: 'cover' }} referrerPolicy="no-referrer" />
                      : <span className="gm-team-initials" style={{ background: (e.color || '#666') + '33', color: e.color || '#ccc', width: '1.25rem', height: '1.25rem', fontSize: '0.5rem' }}>{e.initials}</span>}
                    <span>{e.name}</span>
                    {e.monthly_payment === 'paid' && <span style={{ fontSize: '0.5rem', color: '#22c55e' }}>$</span>}
                  </div>
                ))}</div>
              </div>
            )}

            {/* Fallback players list (basic data before detail loads) */}
            {!t._detailed && t.players && t.players.length > 0 && (
              <div style={{ marginTop: 12 }}>
                <h4 style={{ fontSize: '0.75rem', fontWeight: 600, color: 'var(--d-fg-1)', marginBottom: 6 }}>{_t('games.players')} ({t.players.length})</h4>
                <div className="gm-team-list">{t.players.map((p, i) => (
                  <div key={i} className="gm-team-chip" style={{ borderColor: p.color || 'var(--d-border)' }}>
                    {p.photo ? <img src={p.photo} alt="" style={{ width: 18, height: 18, borderRadius: '50%', objectFit: 'cover' }} referrerPolicy="no-referrer" />
                      : <span className="gm-team-initials" style={{ background: (p.color || '#666') + '33', color: p.color || '#ccc', width: '1.25rem', height: '1.25rem', fontSize: '0.5rem' }}>{p.initials || p.name?.charAt(0)}</span>}
                    <span>{p.name}</span>
                  </div>
                ))}</div>
              </div>
            )}

            {/* Sessions */}
            {t._detailed && sessions.length > 0 && (
              <div style={{ marginTop: 12 }}>
                <h4 style={{ fontSize: '0.75rem', fontWeight: 600, color: 'var(--d-fg-1)', marginBottom: 6 }}>{_t('games.next_sessions')}</h4>
                {sessions.filter(s => s.status !== 'cancelled').slice(0, 7).map(s => (
                  <div key={s.id} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '0.375rem 0', borderBottom: '1px solid var(--d-border)' }}>
                    <div style={{ minWidth: 40, textAlign: 'center' }}>
                      <div style={{ fontSize: '0.625rem', color: 'var(--d-fg-3)', textTransform: 'uppercase' }}>{s.weekday}</div>
                      <div style={{ fontSize: '0.875rem', fontWeight: 700, color: 'var(--d-fg-1)' }}>{s.date_raw?.split('-')[2]}</div>
                    </div>
                    <div style={{ flex: 1, fontSize: '0.6875rem', color: 'var(--d-fg-2)' }}>{s.start_time}{s.end_time ? `-${s.end_time}` : ''}</div>
                    <div style={{ fontSize: '0.625rem', color: 'var(--d-fg-3)' }}>{s.confirmed}/{t.max_players}</div>
                    {joined && s.status === 'scheduled' && (
                      <button className="pay-btn-primary" style={{ padding: '0.125rem 0.375rem', fontSize: '0.5625rem' }}
                        onClick={() => onAction({ action: 'confirm-attendance', sessionId: s.id })}>{_t('games.confirmation')}</button>
                    )}
                  </div>
                ))}
              </div>
            )}

            {/* Actions */}
            <div style={{ marginTop: 16 }}>
              {joined && <div style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '0.4rem 0.625rem', background: 'rgba(2,165,134,0.08)', borderRadius: '0.375rem', marginBottom: 8 }}><Ico name="check" size={12} /><span style={{ fontSize: '0.75rem', color: 'var(--nb-green)', fontWeight: 500 }}>{_t('games.you_are_enrolled')}</span></div>}
              {t.needs_players && !joined && <button className="pay-btn-primary gm-pulse-btn" style={{ justifyContent: 'center', margin: '0 auto' }} onClick={() => onAction({ action: 'join-training', training: t })}>{_t('games.join')} · {t.slots_remaining} vagas</button>}
              {!t.needs_players && !joined && <p style={{ fontSize: '0.75rem', color: 'var(--d-fg-3)', textAlign: 'center' }}>{_t('games.training_full')}</p>}
            </div>
          </>);
        })()}

        {/* ── TEAM ── */}
        {type === 'team' && (() => {
          const t = data;
          return (<>
            <div style={{ textAlign: 'center', padding: '0.75rem 0' }}>
              <span className="gm-team-initials gm-team-initials--lg" style={{ background: (t.color || '#666') + '33', color: t.color || '#ccc', width: '3.5rem', height: '3.5rem', fontSize: '1rem', display: 'inline-flex', marginBottom: 8 }}>{t.initials || t.name?.substring(0, 2)}</span>
              <h2 style={{ fontSize: '1rem', fontWeight: 700, color: 'var(--d-fg-1)', marginBottom: 2 }}>{t.name}</h2>
              <p style={{ fontSize: '0.75rem', color: 'var(--d-fg-3)' }}>{t.sport_name}</p>
            </div>
            <div className="gm-detail-card" style={{ marginTop: 8 }}>
              <div className="gm-detail-row"><span>{_t('games.lbl_members')}</span><span>{t.members}</span></div>
              <div className="gm-detail-row"><span>{_t('games.wins')}</span><span>{t.wins || 0}</span></div>
              <div className="gm-detail-row"><span>{_t('games.tab_tournaments')}</span><span>{t.tournaments || 0}</span></div>
              {t.next_match && <div className="gm-detail-row"><span>{_t('games.next_match')}</span><span style={{ color: 'var(--nb-green)' }}>{t.next_match}</span></div>}
            </div>
            {t.members_list && t.members_list.length > 0 && (
              <div style={{ marginTop: 12 }}>
                <h4 style={{ fontSize: '0.75rem', fontWeight: 600, color: 'var(--d-fg-1)', marginBottom: 6 }}>{_t('games.lbl_members')} ({t.members_list.length})</h4>
                <div className="gm-team-list">{t.members_list.map((m, i) => (
                  <div key={i} className="gm-team-chip" style={{ borderColor: m.color || 'var(--d-border)' }}>
                    {m.photo ? <img src={m.photo} alt="" style={{ width: 18, height: 18, borderRadius: '50%', objectFit: 'cover' }} referrerPolicy="no-referrer" />
                      : <span className="gm-team-initials" style={{ background: (m.color || '#666') + '33', color: m.color || '#ccc', width: '1.25rem', height: '1.25rem', fontSize: '0.5rem' }}>{m.initials || m.name?.charAt(0)}</span>}
                    <span>{m.name}</span>
                  </div>
                ))}</div>
              </div>
            )}
          </>);
        })()}

        {/* ── ATHLETE ── */}
        {type === 'athlete' && (() => {
          const a = data;
          const shareUrl = a.hash ? window.location.origin + '/app/webapp?view=games&profile=' + a.hash : null;
          return (<>
            <div style={{ textAlign: 'center', padding: '0.75rem 0' }}>
              {a.photo ? <img src={a.photo} alt="" style={{ width: 64, height: 64, borderRadius: '50%', objectFit: 'cover', border: '2px solid var(--nb-green)', marginBottom: 8 }} referrerPolicy="no-referrer" />
                : <span className="gm-team-initials" style={{ background: (a.color || '#666') + '33', color: a.color || '#ccc', width: '3.5rem', height: '3.5rem', fontSize: '1rem', display: 'inline-flex', marginBottom: 8 }}>{a.initials || a.name?.charAt(0)}</span>}
              <h2 style={{ fontSize: '1rem', fontWeight: 700, color: 'var(--d-fg-1)', marginBottom: 2 }}>{a.name}</h2>
              {a.team && <p style={{ fontSize: '0.75rem', color: 'var(--d-fg-3)' }}>{a.team}</p>}
              {shareUrl && <button className="pay-btn-outline" style={{ margin: '8px auto 0', padding: '0.3rem 0.625rem', fontSize: '0.6875rem', gap: 4 }} onClick={() => {
                if (navigator.share) { navigator.share({ title: a.name, url: shareUrl }).catch(() => {}); }
                else { navigator.clipboard.writeText(shareUrl).then(() => addToast && addToast(_t('games.profile_link_copied'), 'success')); }
              }}><Ico name="share" size={11} /> {_t('games.share_profile')}</button>}
            </div>
            <div className="gm-detail-card" style={{ marginTop: 8 }}>
              <div className="gm-detail-row"><span>{_t('games.sports')}</span><span>{a.sports?.join(', ') || '-'}</span></div>
              {a.level && <div className="gm-detail-row"><span>{_t('games.level')}</span><span>{a.level}</span></div>}
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 8, textAlign: 'center', marginTop: 16 }}>
              <div><strong style={{ fontSize: '1.25rem', color: 'var(--nb-green)' }}>{a.games_played || 0}</strong><br /><small style={{ color: 'var(--d-fg-3)', fontSize: '0.625rem' }}>{_t('games.tab_games')}</small></div>
              <div><strong style={{ fontSize: '1.25rem', color: 'var(--nb-green)' }}>{a.wins || 0}</strong><br /><small style={{ color: 'var(--d-fg-3)', fontSize: '0.625rem' }}>{_t('games.wins')}</small></div>
              <div><strong style={{ fontSize: '1.25rem', color: 'var(--nb-green)' }}>{a.goals || 0}</strong><br /><small style={{ color: 'var(--d-fg-3)', fontSize: '0.625rem' }}>{_t('games.goals')}</small></div>
              <div><strong style={{ fontSize: '1.25rem', color: 'var(--nb-green)' }}>{a.points || 0}</strong><br /><small style={{ color: 'var(--d-fg-3)', fontSize: '0.625rem' }}>{_t('games.points')}</small></div>
            </div>
            {/* View full profile */}
            {a.hash && <button className="pay-btn-primary" style={{ width: '100%', justifyContent: 'center', marginTop: 16, fontSize: '0.8125rem' }} onClick={() => onAction({ action: 'view-profile', playerHash: a.hash })}>{_t('games.view_full_profile')}</button>}
          </>);
        })()}

        {/* ── MY BOOKINGS ── */}
        {type === 'bookings' && (() => {
          const bookings = Array.isArray(data) ? data : [];
          const [expandedBooking, setExpandedBooking] = React.useState(null);
          return (<>
            <div style={{ padding: '0.5rem 0' }}>
              <p style={{ fontSize: '0.75rem', color: 'var(--d-fg-3)', marginBottom: 8 }}>{bookings.length} reservas</p>
              {bookings.map(b => (
                <div key={b.id} style={{ borderBottom: '1px solid var(--d-border)', paddingBottom: 8, marginBottom: 8 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8, cursor: b.is_paid ? 'pointer' : 'default' }}
                    onClick={() => b.is_paid && setExpandedBooking(expandedBooking === b.id ? null : b.id)}>
                    <div style={{ width: 32, height: 32, borderRadius: '0.375rem', background: b.is_paid ? 'rgba(34,197,94,0.12)' : 'rgba(245,158,11,0.12)', color: b.is_paid ? '#22c55e' : '#f59e0b', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                      <Ico name={b.is_paid ? 'check' : 'clock'} size={14} />
                    </div>
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ fontWeight: 600, fontSize: '0.8125rem', color: 'var(--d-fg-1)' }}>{b.venue_name}</div>
                      <div style={{ fontSize: '0.6875rem', color: 'var(--d-fg-3)' }}>{b.date} · {b.start_time} ({b.duration}h){b.total && ` · ${b.total}`}</div>
                    </div>
                    <span className="gm-status" style={{ background: b.is_paid ? '#22c55e22' : '#f59e0b22', color: b.is_paid ? '#22c55e' : '#f59e0b' }}>{b.is_paid ? _t('games.paid') : _t('games.pending')}</span>
                  </div>

                  {/* Pending: pay button */}
                  {!b.is_paid && b.total_raw > 0 && (
                    <button className="pay-btn-primary" style={{ width: '100%', justifyContent: 'center', marginTop: 8, fontSize: '0.75rem', padding: '0.4375rem' }}
                      onClick={() => onAction({ action: 'pay-booking', booking: b })}>
                      <Ico name="lock" size={13} /> {_t('games.pay') || 'Pagar'} · {b.date} {b.start_time} · {b.total || `${b.total_raw} ${b.currency || 'CVE'}`}
                    </button>
                  )}

                  {/* Paid: expandable receipt */}
                  {b.is_paid && expandedBooking === b.id && (
                    <div style={{ marginTop: 8, padding: '0.625rem', background: 'rgba(2,165,134,0.04)', borderRadius: '0.5rem' }}>
                      <h4 style={{ fontSize: '0.6875rem', fontWeight: 600, color: 'var(--d-fg-1)', marginBottom: 6, textTransform: 'uppercase', letterSpacing: '0.04em' }}>{_t('games.receipt')}</h4>
                      <div className="gm-detail-card" style={{ background: 'transparent', border: 'none', padding: 0 }}>
                        <div className="gm-detail-row"><span>{_t('games.lbl_field')}</span><span>{b.venue_name}</span></div>
                        <div className="gm-detail-row"><span>{_t('games.lbl_date')}</span><span>{b.date}</span></div>
                        <div className="gm-detail-row"><span>{_t('games.lbl_time')}</span><span>{b.start_time} - {b.end_time}</span></div>
                        <div className="gm-detail-row"><span>{_t('games.lbl_duration')}</span><span>{b.duration}h</span></div>
                        <div className="gm-detail-row"><span>{_t('games.lbl_total')}</span><span style={{ color: 'var(--nb-green)', fontWeight: 600 }}>{b.total || '0$00'}</span></div>
                        <div className="gm-detail-row"><span>{_t('games.lbl_status')}</span><span style={{ color: '#22c55e' }}>{_t('games.paid')}</span></div>
                      </div>
                      <button className="pay-btn-outline" style={{ width: '100%', justifyContent: 'center', marginTop: 8, fontSize: '0.6875rem', padding: '0.375rem' }}
                        onClick={() => {
                          const text = `Recibo NhaBex Games\n${b.venue_name}\n${b.date} · ${b.start_time}-${b.end_time} (${b.duration}h)\nTotal: ${b.total || '0$00'}\nEstado: Pago`;
                          if (navigator.share) navigator.share({ title: 'Recibo NhaBex Games', text }).catch(() => {});
                          else { navigator.clipboard?.writeText(text); }
                        }}>
                        <Ico name="share" size={12} /> {_t('games.share_receipt')}
                      </button>
                    </div>
                  )}
                </div>
              ))}
              {bookings.length === 0 && <p style={{ color: 'var(--d-fg-3)', fontSize: '0.8125rem', textAlign: 'center', padding: 24 }}>{_t('games.no_bookings')}</p>}
            </div>
          </>);
        })()}

        {/* ── SUBSCRIPTION ── */}
        {type === 'subscription' && (() => {
          const s = data;
          const typeLabels = { monthly: _t('webapp.game_monthly'), quarterly: _t('webapp.game_quarterly'), annual: _t('webapp.game_annual'), daily: _t('webapp.game_daily'), day_pass: _t('webapp.game_day_pass'), corporate: _t('webapp.game_corporate') };
          const statusLabels = { active: _t('webapp.game_active'), suspended: _t('webapp.game_suspended'), cancelled: _t('webapp.game_cancelled_status'), expired: _t('webapp.game_expired') };
          const statusColors = { active: '#22c55e', suspended: '#f59e0b', cancelled: '#ef4444', expired: '#6b7280' };
          const sColor = statusColors[s.Status] || '#6b7280';
          return (<>
            {/* Company Header */}
            <div style={{ textAlign: 'center', padding: '0.75rem 0' }}>
              {s.company_logo ? (
                <img src={s.company_logo} alt={s.company_name} style={{ width: 56, height: 56, borderRadius: '0.75rem', objectFit: 'contain', marginBottom: 8, border: '1px solid var(--d-border)' }} />
              ) : (
                <div style={{ width: 56, height: 56, borderRadius: '0.75rem', background: (s.company_color || '#02A586') + '22', color: s.company_color || '#02A586', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', marginBottom: 8, fontSize: '1.25rem', fontWeight: 700 }}>{(s.company_name || '?').charAt(0)}</div>
              )}
              <h2 style={{ fontSize: '1rem', fontWeight: 700, color: 'var(--d-fg-1)', marginBottom: 2 }}>{s.company_name || ''}</h2>
              <span className="gm-status" style={{ background: sColor + '22', color: sColor, marginTop: 4, display: 'inline-block' }}>{statusLabels[s.Status] || s.Status}</span>
            </div>

            {/* QR Code for reception validation */}
            {s.subscription_code && s.Status === 'active' && (
              <div style={{ textAlign: 'center', margin: '12px 0', padding: 16, background: 'var(--d-bg-surface-3)', borderRadius: 16 }}>
                <p style={{ fontSize: '0.75rem', color: 'var(--d-fg-3)', margin: '0 0 10px' }}>{_t('webapp.game_show_code_reception')}</p>
                <img src={`https://api.qrserver.com/v1/create-qr-code/?size=140x140&data=${encodeURIComponent(s.subscription_code)}`} alt={`QR ${s.subscription_code}`} style={{ width: 120, height: 120, borderRadius: 8, marginBottom: 8 }} />
                <div style={{ fontSize: '1.25rem', fontWeight: 800, letterSpacing: 3, color: 'var(--d-fg-1)', fontFamily: 'monospace' }}>{s.subscription_code}</div>
              </div>
            )}

            {/* Plan Details */}
            <div style={{ marginTop: 8 }}>
              <h4 style={{ fontSize: '0.75rem', fontWeight: 600, color: 'var(--d-fg-1)', marginBottom: 8, textTransform: 'uppercase', letterSpacing: '0.04em' }}>{_t('webapp.game_plan_info')}</h4>
              <div className="gm-detail-card">
                <div className="gm-detail-row"><span>{_t('webapp.game_plan_name')}</span><span style={{ fontWeight: 600 }}>{s.plan_name}</span></div>
                <div className="gm-detail-row"><span>{_t('webapp.game_plan_type')}</span><span>{typeLabels[s.plan_type] || s.plan_type || '—'}</span></div>
                <div className="gm-detail-row"><span>{_t('webapp.game_plan_price')}</span><span style={{ fontWeight: 600 }}>{Number(s.PricePaid).toLocaleString('pt')}$00</span></div>
                <div className="gm-detail-row"><span>{_t('webapp.game_plan_bookings')}</span><span>{s.credits_remaining}/{s.BookingsIncluded}</span></div>
                {s.discount_percent > 0 && <div className="gm-detail-row"><span>{_t('webapp.game_plan_discount')}</span><span style={{ color: 'var(--nb-green)', fontWeight: 600 }}>{s.discount_percent}%</span></div>}
                {s.priority_booking > 0 && <div className="gm-detail-row"><span>{_t('webapp.game_plan_priority')}</span><span style={{ color: 'var(--nb-green)' }}><Ico name="check" size={12} /></span></div>}
                {s.max_bookings_per_day > 0 && <div className="gm-detail-row"><span>{_t('webapp.game_plan_max_day')}</span><span>{s.max_bookings_per_day}</span></div>}
                {s.AutoRenew > 0 && <div className="gm-detail-row"><span>{_t('webapp.game_plan_auto_renew')}</span><span style={{ color: 'var(--nb-green)' }}><Ico name="check" size={12} /></span></div>}
              </div>
            </div>

            {/* Dates */}
            <div style={{ marginTop: 12 }}>
              <h4 style={{ fontSize: '0.75rem', fontWeight: 600, color: 'var(--d-fg-1)', marginBottom: 8, textTransform: 'uppercase', letterSpacing: '0.04em' }}>{_t('webapp.game_plan_dates')}</h4>
              <div className="gm-detail-card">
                {s.StartDate && <div className="gm-detail-row"><span>{_t('webapp.game_plan_start')}</span><span>{s.StartDate}</span></div>}
                {(s.EndDate || s.NextBillingDate) && <div className="gm-detail-row"><span>{_t('webapp.game_plan_end')}</span><span>{s.EndDate || s.NextBillingDate}</span></div>}
              </div>
            </div>

            {s.plan_description && (
              <p style={{ fontSize: '0.8125rem', color: 'var(--d-fg-2)', lineHeight: 1.5, marginTop: 12 }}>{s.plan_description}</p>
            )}

            {/* Company Contact */}
            {(s.company_phone || s.company_email || s.company_site) && (
              <div style={{ marginTop: 16 }}>
                <h4 style={{ fontSize: '0.75rem', fontWeight: 600, color: 'var(--d-fg-1)', marginBottom: 8, textTransform: 'uppercase', letterSpacing: '0.04em' }}>{_t('webapp.game_company_contact')}</h4>
                <div className="gm-detail-card">
                  {s.company_phone && <div className="gm-detail-row"><span><Ico name="phone" size={12} /> {_t('webapp.game_company_phone')}</span><a href={`tel:${s.company_phone}`} style={{ color: 'var(--nb-green)' }}>{s.company_phone}</a></div>}
                  {s.company_email && <div className="gm-detail-row"><span><Ico name="email" size={12} /> Email</span><a href={`mailto:${s.company_email}`} style={{ color: 'var(--nb-green)', fontSize: '0.75rem' }}>{s.company_email}</a></div>}
                  {s.company_site && <div className="gm-detail-row"><span><Ico name="link" size={12} /> Site</span><a href={s.company_site} target="_blank" rel="noopener" style={{ color: 'var(--nb-green)', fontSize: '0.75rem' }}>{s.company_site.replace(/^https?:\/\//, '')}</a></div>}
                </div>
              </div>
            )}
          </>);
        })()}
      </div>
    </aside>
  );
}

// ─── Profile Panel (right side) ─────────────────────────────
function ProfilePanel({ user, onSignOut, onEditProfile, collapsed, onToggle }) {
  if (collapsed) {
    return (
      <aside className="ticket-panel collapsed">
        <button className="ticket-collapse-btn" onClick={onToggle} title={_t('webapp.expand')}>
          <span style={{ transform: 'rotate(180deg)', display: 'inline-flex' }}><Ico name="chevR" size={16} /></span>
        </button>
      </aside>
    );
  }

  const initial = (user?.name || '?').charAt(0).toUpperCase();

  return (
    <aside className="ticket-panel">
      <button className="ticket-collapse-btn" onClick={onToggle} title={_t('webapp.collapse')}>
        <Ico name="chevR" size={16} />
      </button>
      <div className="ticket-head"><h3>{_t('webapp.profile')}</h3></div>
      <div className="prf-card">
        {user?.photo_url ? (
          <img src={user.photo_url} alt="" className="prf-avatar" referrerPolicy="no-referrer" />
        ) : (
          <div className="prf-avatar prf-avatar--initials">{initial}</div>
        )}
        <h2 className="prf-name">{user?.name || _t('webapp.user_default')}</h2>
        {user?.email && <p className="prf-email">{user.email}</p>}
      </div>
      <div className="prf-details">
        {user?.phone && <div className="prf-detail-row"><Ico name="phone" size={14} /><span>{user.phone_country_code || ''} {user.phone}</span></div>}
        {user?.birthday && <div className="prf-detail-row"><Ico name="calendar" size={14} /><span>{new Date(user.birthday).toLocaleDateString('pt', { day: '2-digit', month: '2-digit', year: 'numeric' })}</span></div>}
        {user?.gender && <div className="prf-detail-row"><Ico name="user" size={14} /><span>{user.gender === 'M' ? _t('webapp.gender_m') : user.gender === 'F' ? _t('webapp.gender_f') : user.gender}</span></div>}
        {user?.registry_date && <div className="prf-detail-row"><Ico name="calendar" size={14} /><span>{_t('webapp.member_since')} {new Date(user.registry_date).toLocaleDateString('pt')}</span></div>}
      </div>
      <div className="prf-actions">
        <button className="prf-btn" onClick={onEditProfile}><Ico name="settings" size={14} /> {_t('webapp.edit_profile')}</button>
      </div>
    </aside>
  );
}

// ─── Pharmacy Detail Panel (right sidebar) ──────────────────
function PharmacyDetailPanel({ pharmacy, onClose, collapsed, onToggle }) {
  if (collapsed) {
    return (
      <aside className="ticket-panel collapsed">
        <button className="ticket-collapse-btn" onClick={onToggle} title={_t('webapp.panel_expand')}>
          <span style={{ transform: 'rotate(180deg)', display: 'inline-flex' }}><Ico name="chevR" size={16} /></span>
        </button>
      </aside>
    );
  }

  const p = pharmacy;
  const schedule = (typeof p.Schedule === 'string' ? JSON.parse(p.Schedule) : p.Schedule) || {};
  const hasCoords = p.Latitude && p.Longitude;
  const DAY_LABELS = { seg: _t('webapp.day_mon'), ter: _t('webapp.day_tue'), qua: _t('webapp.day_wed'), qui: _t('webapp.day_thu'), sex: _t('webapp.day_fri'), sab: _t('webapp.day_sat'), dom: _t('webapp.day_sun') };
  const DAY_ORDER = ['seg', 'ter', 'qua', 'qui', 'sex', 'sab', 'dom'];
  const dayMap = { 0: 'dom', 1: 'seg', 2: 'ter', 3: 'qua', 4: 'qui', 5: 'sex', 6: 'sab' };
  const todayKey = dayMap[new Date().getDay()];

  function formatScheduleSlot(slot) {
    if (!slot) return _t('webapp.pharm_no_info');
    if (slot.closed) return 'Encerrado';
    if (slot.open && slot.close) return `${slot.open} — ${slot.close}`;
    if (slot.morning_open) {
      let s = `${slot.morning_open} — ${slot.morning_close || '12:30'}`;
      if (slot.afternoon_open) s += ` / ${slot.afternoon_open} — ${slot.afternoon_close || '18:00'}`;
      return s;
    }
    return _t('webapp.pharm_no_info');
  }

  return (
    <aside className="ticket-panel">
      <button className="ticket-collapse-btn" onClick={onToggle} title={_t('webapp.panel_collapse')}><Ico name="chevR" size={16} /></button>
      <div className="ticket-head" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <h3>{_t('webapp.pharm_pharmacy')}</h3>
        <button onClick={onClose} style={{ background: 'none', border: 'none', color: 'var(--d-fg-3)', cursor: 'pointer', fontSize: 18 }}>&times;</button>
      </div>
      <div style={{ padding: '0 1rem', overflowY: 'auto', flex: 1, paddingBottom: '1rem' }}>
        {/* Header */}
        <div style={{ textAlign: 'center', padding: '0.75rem 0' }}>
          <div style={{ width: 48, height: 48, borderRadius: '0.75rem', background: p.is_open ? 'rgba(2,165,134,0.15)' : 'var(--d-bg-surface-2)', color: p.is_open ? 'var(--nb-green)' : 'var(--d-fg-3)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', marginBottom: 8 }}>
            <Ico name="pharmacy" size={24} />
          </div>
          <h2 style={{ fontSize: '1rem', fontWeight: 700, color: 'var(--d-fg-1)', marginBottom: 2 }}>{p.Name}</h2>
          <p style={{ fontSize: '0.75rem', color: 'var(--d-fg-3)' }}>{p.Type === 'parafarmacia' ? _t('webapp.pharm_parapharmacy') : _t('webapp.pharm_pharmacy')} · {p.Zone || p.Island}</p>
          <div style={{ display: 'flex', gap: 6, justifyContent: 'center', marginTop: 8 }}>
            <span className="gm-status" style={{
              background: p.is_open ? 'rgba(2,165,134,0.15)' : 'rgba(255,82,82,0.12)',
              color: p.is_open ? '#02A586' : '#ff5252'
            }}>
              {p.is_open ? _t('webapp.pharm_open') : _t('webapp.pharm_closed')}
            </span>
            {p.on_duty && (
              <span className="gm-status" style={{ background: 'rgba(253,184,18,0.15)', color: '#FDB812' }}>{_t('webapp.pharm_on_duty')}</span>
            )}
          </div>
        </div>

        {/* Info rows */}
        <div className="gm-detail-card" style={{ marginTop: 8 }}>
          {p.Address && <div className="gm-detail-row"><span>{_t('webapp.pharm_address')}</span><span>{p.Address}</span></div>}
          {p.Zone && <div className="gm-detail-row"><span>{_t('webapp.pharm_zone')}</span><span>{p.Zone}</span></div>}
          {p.Island && <div className="gm-detail-row"><span>{_t('webapp.pharm_island')}</span><span>{p.Island}</span></div>}
          {p.Phone && (
            <div className="gm-detail-row" style={{ cursor: 'pointer' }} onClick={() => window.open('tel:' + p.Phone)}>
              <span>{_t('webapp.pharm_phone')}</span><span style={{ color: 'var(--nb-green)' }}>{p.Phone}</span>
            </div>
          )}
          {p.Email && (
            <div className="gm-detail-row" style={{ cursor: 'pointer' }} onClick={() => window.open('mailto:' + p.Email)}>
              <span>{_t('webapp.pharm_email')}</span><span style={{ color: 'var(--nb-green)' }}>{p.Email}</span>
            </div>
          )}
        </div>

        {/* Horários */}
        <h4 style={{ fontSize: '0.75rem', fontWeight: 600, color: 'var(--d-fg-1)', marginTop: 16, marginBottom: 8 }}>{_t('webapp.pharm_schedule')}</h4>
        <div className="gm-detail-card">
          {DAY_ORDER.map(day => {
            const slot = schedule[day];
            const isToday = day === todayKey;
            return (
              <div key={day} className="gm-detail-row" style={{ background: isToday ? 'rgba(2,165,134,0.06)' : 'transparent' }}>
                <span style={{ fontWeight: isToday ? 600 : 400 }}>{DAY_LABELS[day]}{isToday ? ' ●' : ''}</span>
                <span style={{ color: slot && slot.closed ? '#ff5252' : 'var(--d-fg-1)', fontWeight: isToday ? 600 : 500 }}>
                  {formatScheduleSlot(slot)}
                </span>
              </div>
            );
          })}
        </div>

        {/* Localização */}
        {hasCoords && (
          <div style={{ marginTop: 16 }}>
            <button
              onClick={() => window.open(`https://www.google.com/maps?q=${p.Latitude},${p.Longitude}`, '_blank')}
              className="pay-btn-primary"
              style={{ width: '100%', justifyContent: 'center', fontSize: '0.8125rem' }}
            >
              <Ico name="pin" size={14} /> {_t('webapp.pharm_open_maps')}
            </button>
          </div>
        )}
      </div>
    </aside>
  );
}

// ─── Pharmacy View ──────────────────────────────────────────
function PharmacyView({ onBack, locationGranted, userLat, userLng, onSelectPharmacy }) {
  const { addToast } = React.useContext(ToastContext);
  const [pharmacies, setPharmacies] = useState([]);
  const [loading, setLoading] = useState(true);
  const [search, setSearch] = useState('');
  const [filterIsland, setFilterIsland] = useState('');
  const [filterType, setFilterType] = useState('');
  const [islands, setIslands] = useState([]);
  const [tab, setTab] = useState('open'); // open | duty | all
  const [dutyCalendar, setDutyCalendar] = useState({});
  const [calMonth, setCalMonth] = useState(new Date().getMonth() + 1);
  const [calYear, setCalYear] = useState(new Date().getFullYear());
  const [nearbyMode, setNearbyMode] = useState(false);
  const [localLat, setLocalLat] = useState(userLat);
  const [localLng, setLocalLng] = useState(userLng);
  const [requestingLocation, setRequestingLocation] = useState(false);

  useEffect(() => {
    setLoading(true);
    Promise.all([
      API.get('/data/pharmacies'),
      API.get('/data/pharmacies/islands'),
      API.get('/data/pharmacies/duty-calendar', { month: calMonth, year: calYear }),
    ]).then(([pRes, iRes, dRes]) => {
      if (pRes.message === 'success') setPharmacies(pRes.data || []);
      if (iRes.message === 'success') setIslands(iRes.data || []);
      if (dRes.message === 'success') setDutyCalendar(dRes.data || {});
      setLoading(false);
    }).catch(() => setLoading(false));
  }, []);

  useEffect(() => {
    API.get('/data/pharmacies/duty-calendar', { month: calMonth, year: calYear }).then(res => {
      if (res.message === 'success') setDutyCalendar(res.data || {});
    });
  }, [calMonth, calYear]);

  // Sync localLat/localLng when parent props update
  useEffect(() => { if (userLat) setLocalLat(userLat); }, [userLat]);
  useEffect(() => { if (userLng) setLocalLng(userLng); }, [userLng]);

  // Pedir localização para "perto de mim"
  const requestNearby = () => {
    if (localLat && localLng) {
      setNearbyMode(true);
      setTab('open');
      return;
    }
    setRequestingLocation(true);
    navigator.geolocation.getCurrentPosition(
      (pos) => {
        setLocalLat(pos.coords.latitude);
        setLocalLng(pos.coords.longitude);
        setNearbyMode(true);
        setTab('open');
        setRequestingLocation(false);
      },
      () => { setRequestingLocation(false); addToast(_t('webapp.geo_error'), 'error'); },
      { enableHighAccuracy: true, timeout: 10000 }
    );
  };

  // Distância para ordenar por proximidade
  const withDistance = useMemo(() => {
    if (!localLat || !localLng) return pharmacies.map(p => ({ ...p, _dist: null }));
    return pharmacies.map(p => {
      if (!p.Latitude || !p.Longitude) return { ...p, _dist: 99999 };
      const R = 6371, dLat = (p.Latitude - localLat) * Math.PI / 180, dLng = (p.Longitude - localLng) * Math.PI / 180;
      const a = Math.sin(dLat/2)**2 + Math.cos(localLat * Math.PI/180) * Math.cos(p.Latitude * Math.PI/180) * Math.sin(dLng/2)**2;
      return { ...p, _dist: R * 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)) };
    });
  }, [pharmacies, localLat, localLng]);

  const filtered = useMemo(() => {
    let list = withDistance;
    // Tab filter
    if (tab === 'open') list = list.filter(p => p.is_open);
    else if (tab === 'duty') list = list.filter(p => p.on_duty);
    // Nearby mode: only open + within 10km
    if (nearbyMode && localLat && localLng) {
      list = list.filter(p => p.is_open && p._dist !== null && p._dist < 10);
    }
    // Type filter
    if (filterType) list = list.filter(p => p.Type === filterType);
    // Search
    if (search.trim()) {
      const q = search.toLowerCase();
      list = list.filter(p => p.Name.toLowerCase().includes(q) || (p.Address || '').toLowerCase().includes(q) || (p.Zone || '').toLowerCase().includes(q));
    }
    if (filterIsland) list = list.filter(p => p.Island === filterIsland);
    // Sort: duty first, then by distance
    list = [...list].sort((a, b) => {
      if (a.on_duty && !b.on_duty) return -1;
      if (!a.on_duty && b.on_duty) return 1;
      if (a._dist !== null && b._dist !== null) return a._dist - b._dist;
      return 0;
    });
    return list;
  }, [withDistance, tab, search, filterIsland, filterType, nearbyMode, localLat, localLng]);

  const onDutyCount = useMemo(() => pharmacies.filter(p => p.on_duty).length, [pharmacies]);
  const openCount = useMemo(() => pharmacies.filter(p => p.is_open).length, [pharmacies]);

  const tabStyle = (t) => ({
    padding: '8px 16px', borderRadius: 20, fontSize: 13, fontWeight: 600, cursor: 'pointer', border: 'none',
    background: tab === t ? 'var(--nb-green)' : 'var(--d-bg-surface)',
    color: tab === t ? '#fff' : 'var(--d-fg-2)',
    transition: 'all 150ms ease',
  });

  // Card renderer
  const PharmacyCard = ({ p }) => (
    <div onClick={() => onSelectPharmacy && onSelectPharmacy(p)} style={{
      display: 'flex', alignItems: 'center', gap: 14, padding: '14px 16px',
      background: 'var(--d-bg-surface)', borderRadius: 12, cursor: 'pointer',
      border: '1px solid var(--d-border)', transition: 'box-shadow 150ms ease',
    }}
    onMouseEnter={e => e.currentTarget.style.boxShadow = 'var(--d-shadow-card)'}
    onMouseLeave={e => e.currentTarget.style.boxShadow = 'none'}
    >
      <div style={{
        width: 42, height: 42, borderRadius: 10, display: 'flex', alignItems: 'center', justifyContent: 'center',
        background: p.is_open ? 'rgba(2,165,134,0.12)' : 'var(--d-bg-surface-2)',
        color: p.is_open ? 'var(--nb-green)' : 'var(--d-fg-3)', flexShrink: 0,
      }}>
        <Ico name="pharmacy" size={20} />
      </div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontWeight: 600, fontSize: 14, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', color: 'var(--d-fg-1)' }}>{p.Name}</div>
        <div style={{ fontSize: 12, color: 'var(--d-fg-3)', marginTop: 2 }}>
          {p.Zone || p.Island}{p.Island && p.Zone ? ` · ${p.Island}` : ''}{p._dist !== null && p._dist < 99999 ? ` · ${p._dist < 1 ? Math.round(p._dist * 1000) + 'm' : p._dist.toFixed(1) + 'km'}` : ''}
        </div>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexShrink: 0 }}>
        {p.on_duty && <span style={{ padding: '3px 8px', borderRadius: 12, fontSize: 11, fontWeight: 600, background: 'rgba(253,184,18,0.15)', color: '#e6a400' }}>{_t('webapp.pharm_duty_badge')}</span>}
        <span style={{
          padding: '3px 8px', borderRadius: 12, fontSize: 11, fontWeight: 600,
          background: p.is_open ? 'rgba(2,165,134,0.12)' : 'rgba(255,82,82,0.1)',
          color: p.is_open ? '#02A586' : '#ff5252',
        }}>
          {p.is_open ? _t('webapp.pharm_open') : _t('webapp.pharm_closed')}
        </span>
        <Ico name="chevR" size={16} />
      </div>
    </div>
  );

  return (
    <>
      <div className="detail-head">
        <button className="back-btn" onClick={onBack}><Ico name="arrowL" /></button>
        <div className="titles">
          <h1>{_t('webapp.pharm_title')}</h1>
          <p>{_t('webapp.pharm_subtitle')}</p>
        </div>
      </div>
      <div style={{ padding: '0 24px 24px' }}>
        {/* Tabs */}
        <div style={{ display: 'flex', gap: 8, marginBottom: 16, flexWrap: 'wrap' }}>
          <button style={tabStyle('open')} onClick={() => setTab('open')}>
            Abertas <span style={{ marginLeft: 4, opacity: 0.8 }}>({openCount})</span>
          </button>
          <button style={tabStyle('duty')} onClick={() => setTab('duty')}>
            De Serviço <span style={{ marginLeft: 4, opacity: 0.8 }}>({onDutyCount})</span>
          </button>
          <button style={tabStyle('all')} onClick={() => setTab('all')}>
            Todas <span style={{ marginLeft: 4, opacity: 0.8 }}>({pharmacies.length})</span>
          </button>
        </div>

        {/* Search & island filter */}
        <div style={{ display: 'flex', gap: 10, marginBottom: 16, flexWrap: 'wrap' }}>
          <div style={{ flex: '1 1 200px', position: 'relative' }}>
            <span style={{ position: 'absolute', left: 12, top: '50%', transform: 'translateY(-50%)', color: 'var(--d-fg-3)' }}><Ico name="search" size={16} /></span>
            <input
              type="text" placeholder={_t('webapp.pharm_search_placeholder')}
              value={search} onChange={e => setSearch(e.target.value)}
              style={{ width: '100%', padding: '10px 12px 10px 36px', borderRadius: 10, border: '1px solid var(--d-border)', background: 'var(--d-bg-surface-2)', fontSize: 14, outline: 'none', color: 'var(--d-fg-1)' }}
            />
          </div>
          {islands.length > 1 && (
            <select
              value={filterIsland} onChange={e => setFilterIsland(e.target.value)}
              style={{ padding: '10px 12px', borderRadius: 10, border: '1px solid var(--d-border)', background: 'var(--d-bg-surface-2)', fontSize: 14, color: 'var(--d-fg-1)', minWidth: 130 }}
            >
              <option value="">{_t('webapp.pharm_all_islands')}</option>
              {islands.map(i => <option key={i} value={i}>{i}</option>)}
            </select>
          )}
          <select
            value={filterType} onChange={e => setFilterType(e.target.value)}
            style={{ padding: '10px 12px', borderRadius: 10, border: '1px solid var(--d-border)', background: 'var(--d-bg-surface-2)', fontSize: 14, color: 'var(--d-fg-1)', minWidth: 130 }}
          >
            <option value="">{_t('webapp.pharm_all_types')}</option>
            <option value="farmacia">{_t('webapp.pharm_pharmacy')}</option>
            <option value="parafarmacia">{_t('webapp.pharm_parapharmacy')}</option>
          </select>
        </div>
        {/* Botão perto de mim */}
        <div style={{ display: 'flex', gap: 8, marginBottom: 16 }}>
          <button
            onClick={() => { if (nearbyMode) { setNearbyMode(false); } else { requestNearby(); } }}
            disabled={requestingLocation}
            style={{
              display: 'inline-flex', alignItems: 'center', gap: 6, padding: '8px 14px', borderRadius: 20,
              fontSize: 13, fontWeight: 600, cursor: 'pointer',
              border: nearbyMode ? '2px solid var(--nb-green)' : '1px solid var(--d-border)',
              background: nearbyMode ? 'rgba(2,165,134,0.12)' : 'var(--d-bg-surface)',
              color: nearbyMode ? '#02A586' : 'var(--d-fg-2)',
              transition: 'all 150ms ease',
            }}
          >
            <Ico name="pin" size={14} />
            {requestingLocation ? _t('webapp.pharm_locating') : nearbyMode ? _t('webapp.pharm_nearby_active') : _t('webapp.pharm_nearby')}
          </button>
          {nearbyMode && (
            <span style={{ fontSize: 12, color: 'var(--d-fg-3)', alignSelf: 'center' }}>
              {_t('webapp.pharm_nearby_radius')}
            </span>
          )}
        </div>

        {/* Loading */}
        {loading && <SkeletonCards count={4} />}

        {/* Empty state */}
        {!loading && filtered.length === 0 && (
          <div style={{ textAlign: 'center', padding: 40, color: 'var(--d-fg-3)' }}>
            <Ico name="pharmacy" size={32} />
            <p style={{ marginTop: 8 }}>
              {tab === 'open' ? _t('webapp.pharm_none_open') : tab === 'duty' ? _t('webapp.pharm_none_duty') : _t('webapp.pharm_none_found')}
            </p>
          </div>
        )}

        {/* Pharmacy list */}
        {!loading && filtered.length > 0 && (
          <div style={{ display: 'grid', gap: 10 }}>
            {filtered.map(p => <PharmacyCard key={p.id} p={p} />)}
          </div>
        )}

        {/* Duty calendar — show on 'duty' tab */}
        {!loading && tab === 'duty' && Object.keys(dutyCalendar).length > 0 && (
          <div style={{ marginTop: 28 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 14 }}>
              <h3 style={{ fontSize: 15, fontWeight: 600, color: 'var(--d-fg-1)' }}><Ico name="calendar" size={16} /> {_t('webapp.pharm_duty_schedule')}</h3>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <button onClick={() => { if (calMonth === 1) { setCalMonth(12); setCalYear(calYear - 1); } else setCalMonth(calMonth - 1); }}
                  style={{ background: 'var(--d-bg-surface)', border: '1px solid var(--d-border)', borderRadius: 8, padding: '4px 8px', cursor: 'pointer', color: 'var(--d-fg-1)' }}>
                  <Ico name="arrowL" size={14} />
                </button>
                <span style={{ fontSize: 14, fontWeight: 600, minWidth: 110, textAlign: 'center', color: 'var(--d-fg-1)' }}>
                  {[_t('webapp.month_jan'),_t('webapp.month_feb'),_t('webapp.month_mar'),_t('webapp.month_apr'),_t('webapp.month_may'),_t('webapp.month_jun'),_t('webapp.month_jul'),_t('webapp.month_aug'),_t('webapp.month_sep'),_t('webapp.month_oct'),_t('webapp.month_nov'),_t('webapp.month_dec')][calMonth - 1]} {calYear}
                </span>
                <button onClick={() => { if (calMonth === 12) { setCalMonth(1); setCalYear(calYear + 1); } else setCalMonth(calMonth + 1); }}
                  style={{ background: 'var(--d-bg-surface)', border: '1px solid var(--d-border)', borderRadius: 8, padding: '4px 8px', cursor: 'pointer', color: 'var(--d-fg-1)' }}>
                  <Ico name="chevR" size={14} />
                </button>
              </div>
            </div>
            <div style={{ background: 'var(--d-bg-surface)', borderRadius: 12, overflow: 'hidden', border: '1px solid var(--d-border)' }}>
              {Object.entries(dutyCalendar).sort(([a], [b]) => a.localeCompare(b)).map(([date, entries]) => {
                const d = new Date(date + 'T12:00:00');
                const dayNames = [_t('webapp.day_sun_short'), _t('webapp.day_mon_short'), _t('webapp.day_tue_short'), _t('webapp.day_wed_short'), _t('webapp.day_thu_short'), _t('webapp.day_fri_short'), _t('webapp.day_sat_short')];
                const isToday = date === new Date().toISOString().slice(0, 10);
                const pharmacy = entries[0];
                return (
                  <div key={date} style={{
                    display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                    padding: '10px 16px', borderBottom: '1px solid var(--d-border)',
                    background: isToday ? 'rgba(2,165,134,0.06)' : 'transparent',
                  }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                      <span style={{
                        width: 36, height: 36, borderRadius: 8, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
                        background: isToday ? 'var(--nb-green)' : 'transparent',
                        color: isToday ? '#fff' : 'var(--d-fg-1)',
                        fontSize: 12, fontWeight: 600, lineHeight: 1.1,
                      }}>
                        <span style={{ fontSize: 10 }}>{dayNames[d.getDay()]}</span>
                        <span>{d.getDate()}</span>
                      </span>
                      <div>
                        <div style={{ fontWeight: isToday ? 700 : 500, fontSize: 14, color: 'var(--d-fg-1)' }}>{pharmacy.name}</div>
                        <div style={{ fontSize: 12, color: 'var(--d-fg-3)' }}>{pharmacy.address}{pharmacy.phone ? ` · ${pharmacy.phone}` : ''}</div>
                      </div>
                    </div>
                    {isToday && <span style={{ padding: '3px 8px', borderRadius: 12, fontSize: 11, fontWeight: 600, background: 'rgba(2,165,134,0.12)', color: '#02A586' }}>{_t('webapp.pharm_today')}</span>}
                  </div>
                );
              })}
            </div>
          </div>
        )}
      </div>
    </>
  );
}

// ─── Store View ─────────────────────────────────────────────
// Mock data para Store


const STORE_DEFAULT_IMG = '../img/nhabexSimbolo-01.svg';

// ─── Store Product Panel (sidebar) ──────────────────────────
function StoreProductPanel({ product, store, onClose, collapsed, onToggle, addToast, currency, onGoToCart }) {
  const [qty, setQty] = useState(1);
  const [panelTab, setPanelTab] = useState('details');
  const [imgIdx, setImgIdx] = useState(0);
  const [isFav, setIsFav] = useState(false);
  const [newComment, setNewComment] = useState('');
  const [newRating, setNewRating] = useState(5);
  const [reviews, setReviews] = useState([]);
  const [reviewSubmitting, setReviewSubmitting] = useState(false);
  const [aiResponse, setAiResponse] = useState('');
  const [aiLoading, setAiLoading] = useState(false);
  const [aiQuery, setAiQuery] = useState('');

  useEffect(() => {
    setQty(1); setPanelTab('details'); setImgIdx(0); setAiResponse(''); setAiQuery('');
    // Load fav state
    try { const favs = JSON.parse(localStorage.getItem(_geoKey('nb_store_favs')) || '[]'); setIsFav(favs.includes(product?.ID)); } catch { setIsFav(false); }
    // Load reviews from API
    if (product?.Slug && store?.hash) {
      API.get('/store/' + store.hash + '/product/' + product.Slug + '/reviews').then(res => {
        if (res.message === 'success' && Array.isArray(res.data)) {
          setReviews(res.data.map(r => ({ id: r.ID, user: r.ClientName, rating: r.Rating, text: r.Comment, date: (r.CreatedAt || '').split('T')[0] })));
        } else { setReviews([]); }
      }).catch(() => setReviews([]));
    } else { setReviews([]); }
  }, [product?.ID]);

  if (collapsed) {
    return (
      <aside className="ticket-panel collapsed">
        <button className="ticket-collapse-btn" onClick={onToggle} title={_t('webapp.panel_expand')}>
          <span style={{ transform: 'rotate(180deg)', display: 'inline-flex' }}><Ico name="chevR" size={16} /></span>
        </button>
      </aside>
    );
  }
  if (!product) return null;

  const price = parseFloat(product.Price || 0);
  const inStock = product.Stock === null || product.Stock > 0;
  const cur = currency || 'CVE';
  const images = product.Images || [];
  const avgRating = reviews.length > 0 ? (reviews.reduce((s, r) => s + r.rating, 0) / reviews.length).toFixed(1) : null;

  const toggleFav = () => {
    let favs = [];
    try { favs = JSON.parse(localStorage.getItem(_geoKey('nb_store_favs')) || '[]'); } catch {}
    if (isFav) { favs = favs.filter(id => id !== product.ID); } else { favs.push(product.ID); }
    localStorage.setItem(_geoKey('nb_store_favs'), JSON.stringify(favs));
    setIsFav(!isFav);
    addToast && addToast(isFav ? 'Removido dos favoritos' : 'Adicionado aos favoritos', 'success', 1500);
  };

  const doAddToCart = () => {
    const cartKey = 'nhabex_store_cart_' + (store?.hash || 'default');
    let cart = [];
    try { cart = JSON.parse(localStorage.getItem(cartKey) || '[]'); } catch {}
    const existing = cart.find(i => i.productId === product.ID);
    if (existing) {
      cart = cart.map(i => i.productId === product.ID ? { ...i, qty: i.qty + qty } : i);
    } else {
      cart.push({ productId: product.ID, name: product.Name, price, imageURL: product.ImageURL || (images[0] || null), stock: product.Stock, qty });
    }
    localStorage.setItem(cartKey, JSON.stringify(cart));
    addToast && addToast(qty + 'x ' + product.Name + ' ' + _t('webapp.store_added_to_cart'), 'success', 2000);
    // Dispatch event para StoreView actualizar carrinho
    window.dispatchEvent(new CustomEvent('nb-store-cart-update', { detail: { storeHash: store?.hash } }));
  };

  const submitReview = async () => {
    if (!newComment.trim() || reviewSubmitting) return;
    const storeHash = store?.hash;
    const slug = product?.Slug;
    if (!storeHash || !slug) { addToast && addToast(_t('webapp.help_ai_error_send'), 'error'); return; }
    setReviewSubmitting(true);
    const res = await API.post('/client/store/' + storeHash + '/product/' + slug + '/review', { rating: newRating, comment: newComment.trim() });
    setReviewSubmitting(false);
    if (res.message === 'success' && res.data) {
      setReviews(prev => [{ id: res.data.ID, user: res.data.ClientName, rating: res.data.Rating, text: res.data.Comment, date: (res.data.CreatedAt || '').split('T')[0] || new Date().toISOString().split('T')[0] }, ...prev]);
      setNewComment('');
      setNewRating(5);
      addToast && addToast('Comentário enviado!', 'success', 1500);
    } else {
      addToast && addToast(res.detail || _t('webapp.error_send_comment'), 'error');
    }
  };

  const askAI = () => {
    const q = aiQuery.trim() || 'Conta-me tudo sobre este produto.';
    setAiLoading(true);
    setAiResponse('');
    setTimeout(() => {
      setAiResponse('O ' + product.Name + ' é um produto disponível na loja ' + (store?.name || '') + '. Preço: ' + price.toLocaleString('pt') + ' ' + cur + '. ' + (product.Description || 'Sem descrição adicional disponível.') + ' Para mais informações, contacte a loja directamente.');
      setAiLoading(false);
    }, 1200);
  };

  const PANEL_TABS = [
    { id: 'details', label: 'Produto', icon: 'store' },
    { id: 'reviews', label: 'Avaliações', icon: 'star', badge: reviews.length || null },
    { id: 'ai', label: 'AI', icon: 'sparkle' },
  ];

  return (
    <aside className="ticket-panel">
      <button className="ticket-collapse-btn" onClick={onToggle} title={_t('webapp.panel_collapse')}><Ico name="chevR" size={16} /></button>
      <div className="ticket-head" style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center', padding: '10px 1rem 6px' }}>
        <button onClick={onClose} title={_t('webapp.panel_close') || 'Fechar painel'} aria-label={_t('webapp.panel_close') || 'Fechar painel'}
          className="store-panel-close"><Ico name="cross" size={16} /></button>
      </div>

      {/* Tabs */}
      <div className="tk-tabs" style={{ padding: '0 1rem', marginBottom: 0, gap: 4, flexShrink: 0 }}>
        {PANEL_TABS.map(t => (
          <button key={t.id} className={`tk-tab ${panelTab === t.id ? 'on' : ''}`} onClick={() => setPanelTab(t.id)} style={{ display: 'flex', alignItems: 'center', gap: 5, fontSize: 12, position: 'relative' }}>
            <Ico name={t.icon} size={13} />
            {t.label}
            {t.badge && <span style={{ marginLeft: 2, fontSize: 10, fontWeight: 700, color: 'var(--nb-green)' }}>({t.badge})</span>}
          </button>
        ))}
      </div>

      <div className="store-panel-scroll">

        {/* ═══ TAB: Produto ═══ */}
        {panelTab === 'details' && (
          <>
            {/* Image gallery */}
            <div style={{ marginBottom: 16 }}>
              {images.length > 0 ? (
                <div style={{ position: 'relative', borderRadius: 12, overflow: 'hidden' }}>
                  <img src={images[imgIdx]} alt="" style={{ width: '100%', height: 220, objectFit: 'cover', display: 'block' }} />
                  {images.length > 1 && (
                    <>
                      <button onClick={() => setImgIdx((imgIdx - 1 + images.length) % images.length)}
                        style={{ position: 'absolute', left: 6, top: '50%', transform: 'translateY(-50%)', width: 28, height: 28, borderRadius: '50%', background: 'rgba(0,0,0,0.45)', color: '#fff', border: 'none', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                        <Ico name="arrowL" size={14} />
                      </button>
                      <button onClick={() => setImgIdx((imgIdx + 1) % images.length)}
                        style={{ position: 'absolute', right: 6, top: '50%', transform: 'translateY(-50%)', width: 28, height: 28, borderRadius: '50%', background: 'rgba(0,0,0,0.45)', color: '#fff', border: 'none', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                        <Ico name="chevR" size={14} />
                      </button>
                      <div style={{ position: 'absolute', bottom: 8, left: 0, right: 0, display: 'flex', justifyContent: 'center', gap: 5 }}>
                        {images.map((_, i) => (
                          <div key={i} onClick={() => setImgIdx(i)}
                            style={{ width: 7, height: 7, borderRadius: '50%', background: i === imgIdx ? '#fff' : 'rgba(255,255,255,0.45)', cursor: 'pointer', boxShadow: '0 1px 3px rgba(0,0,0,0.3)' }} />
                        ))}
                      </div>
                    </>
                  )}
                </div>
              ) : product.ImageURL ? (
                <div style={{ borderRadius: 12, overflow: 'hidden' }}>
                  <img src={product.ImageURL} alt="" style={{ width: '100%', height: 220, objectFit: 'cover' }} onError={e => { e.target.onerror = null; e.target.src = STORE_DEFAULT_IMG; e.target.style.width = '80px'; e.target.style.height = '80px'; e.target.style.objectFit = 'contain'; e.target.style.opacity = '0.4'; e.target.parentElement.style.display = 'flex'; e.target.parentElement.style.alignItems = 'center'; e.target.parentElement.style.justifyContent = 'center'; e.target.parentElement.style.height = '180px'; e.target.parentElement.style.background = 'var(--d-bg-sunken)'; }} />
                </div>
              ) : (
                <div style={{ borderRadius: 12, overflow: 'hidden', background: 'var(--d-bg-sunken)', display: 'flex', alignItems: 'center', justifyContent: 'center', height: 180 }}>
                  <img src={STORE_DEFAULT_IMG} alt="" style={{ width: 80, height: 80, objectFit: 'contain', opacity: 0.4 }} />
                </div>
              )}
            </div>

            {/* Product name + fav + store */}
            <div style={{ marginBottom: 16 }}>
              <div style={{ display: 'flex', alignItems: 'flex-start', gap: 8 }}>
                <h2 style={{ fontSize: '1.15rem', fontWeight: 700, color: 'var(--d-fg-1)', marginBottom: 4, lineHeight: 1.3, letterSpacing: '-0.01em', flex: 1, minWidth: 0 }}>{product.Name}</h2>
                <button onClick={toggleFav} title={isFav ? _t('webapp.store_remove_fav') || 'Remover dos favoritos' : _t('webapp.store_add_fav') || 'Adicionar aos favoritos'}
                  className={`store-fav-btn ${isFav ? 'active' : ''}`}>
                  {isFav ? '\u2605' : '\u2606'}
                </button>
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
                {store?.name && <span style={{ fontSize: '0.8rem', color: 'var(--d-fg-3)' }}>{store.name}</span>}
                {avgRating && <span style={{ fontSize: '0.8rem', color: '#f5a623' }}>{'\u2605'} {avgRating} ({reviews.length})</span>}
              </div>
            </div>

            {/* Price & Stock */}
            <div className="store-price-stock">
              <div className="store-price-stock__item">
                <span className="store-price-stock__label">{_t('webapp.store_price') || 'Preço'}</span>
                <span className="store-price-stock__value" style={{ color: 'var(--nb-green)' }}>{price.toLocaleString('pt')} {cur}</span>
              </div>
              <div className="store-price-stock__divider" />
              <div className="store-price-stock__item">
                <span className="store-price-stock__label">Stock</span>
                <span className="store-price-stock__value" style={{ color: inStock ? 'var(--d-fg-1)' : 'var(--nb-danger)' }}>
                  {product.Stock === null ? '\u221E' : product.Stock} {inStock ? (_t('webapp.store_available') || 'disponível') : (_t('webapp.store_sold_out') || 'Esgotado')}
                </span>
              </div>
            </div>

            {/* Description */}
            {product.Description && (
              <div style={{ padding: '12px 14px', borderRadius: 10, background: 'var(--d-bg-surface-2)', marginBottom: 16, fontSize: '0.835rem', color: 'var(--d-fg-2)', lineHeight: 1.6 }}>
                {product.Description}
              </div>
            )}

            {/* Info table */}
            <div style={{ borderRadius: 10, overflow: 'hidden', border: '1px solid var(--d-border)', marginBottom: 16 }}>
              {[
                store?.settings?.deliveryMethods && { label: _t('webapp.store_delivery'), value: store.settings.deliveryMethods.map(m => ({ pickup: _t('webapp.store_pickup'), delivery: _t('webapp.store_delivery'), digital: _t('webapp.store_digital') }[m] || m)).join(', ') },
                store?.settings?.paymentMethods && { label: 'Pagamento', value: store.settings.paymentMethods.map(m => ({ sisp: 'SISP/Vinti4', cash: 'Dinheiro', transfer: 'Transferência' }[m] || m)).join(', ') },
                product.category?.Name && { label: 'Categoria', value: product.category.Name },
              ].filter(Boolean).map((r, i, arr) => (
                <div key={i} style={{ display: 'flex', justifyContent: 'space-between', padding: '9px 14px', borderBottom: i < arr.length - 1 ? '1px solid var(--d-border)' : 'none', background: i % 2 === 0 ? 'transparent' : 'var(--d-bg-surface-2)' }}>
                  <span style={{ fontSize: '0.78rem', color: 'var(--d-fg-3)' }}>{r.label}</span>
                  <span style={{ fontSize: '0.78rem', fontWeight: 500, color: 'var(--d-fg-1)' }}>{r.value}</span>
                </div>
              ))}
            </div>

            {/* Actions: Share + AI */}
            <div style={{ display: 'flex', gap: 6, marginBottom: 16 }}>
              <button onClick={() => { navigator.clipboard?.writeText(window.location.href + '?product=' + (product.Slug || product.ID)); addToast && addToast('Link copiado!', 'success', 1500); }}
                style={{ flex: 1, padding: '9px 0', borderRadius: 8, border: '1px solid var(--d-border)', background: 'var(--d-bg-surface)', color: 'var(--d-fg-2)', fontSize: '0.78rem', fontWeight: 600, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 4 }}>
                <Ico name="link" size={12} /> Partilhar
              </button>
              <button onClick={() => setPanelTab('ai')}
                style={{ flex: 1, padding: '9px 0', borderRadius: 8, border: '1px solid var(--d-border)', background: 'rgba(2,165,134,0.08)', color: 'var(--nb-green)', fontSize: '0.78rem', fontWeight: 600, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 4 }}>
                <Ico name="sparkle" size={12} /> Perguntar AI
              </button>
            </div>

          </>
        )}

        {/* ═══ TAB: Avaliações ═══ */}
        {panelTab === 'reviews' && (
          <>
            {/* Rating summary */}
            {reviews.length > 0 && (
              <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '12px 14px', borderRadius: 10, background: 'var(--d-bg-surface-2)', marginBottom: 12 }}>
                <div style={{ textAlign: 'center' }}>
                  <div style={{ fontSize: 28, fontWeight: 700, color: '#f5a623' }}>{avgRating}</div>
                  <div style={{ color: '#f5a623', fontSize: 14 }}>{'\u2605'.repeat(Math.round(parseFloat(avgRating)))}{'\u2606'.repeat(5 - Math.round(parseFloat(avgRating)))}</div>
                </div>
                <div style={{ flex: 1, fontSize: 12, color: 'var(--d-fg-3)' }}>
                  <div>{reviews.length} avaliações</div>
                  {[5, 4, 3, 2, 1].map(n => {
                    const count = reviews.filter(r => r.rating === n).length;
                    const pct = reviews.length > 0 ? (count / reviews.length) * 100 : 0;
                    return (
                      <div key={n} style={{ display: 'flex', alignItems: 'center', gap: 4, marginTop: 2 }}>
                        <span style={{ width: 12, fontSize: 10, color: 'var(--d-fg-3)' }}>{n}</span>
                        <div style={{ flex: 1, height: 3, borderRadius: 2, background: 'var(--d-border)' }}>
                          <div style={{ width: pct + '%', height: '100%', borderRadius: 2, background: '#f5a623' }} />
                        </div>
                        <span style={{ width: 16, fontSize: 10, color: 'var(--d-fg-3)', textAlign: 'right' }}>{count}</span>
                      </div>
                    );
                  })}
                </div>
              </div>
            )}

            {/* Write review */}
            <div style={{ padding: '12px', borderRadius: 10, border: '1px solid var(--d-border)', marginBottom: 12 }}>
              <div style={{ fontSize: 12, fontWeight: 600, color: 'var(--d-fg-1)', marginBottom: 8 }}>Escrever avaliação</div>
              <div style={{ display: 'flex', gap: 2, marginBottom: 8 }}>
                {[1, 2, 3, 4, 5].map(n => (
                  <button key={n} onClick={() => setNewRating(n)}
                    style={{ background: 'none', border: 'none', cursor: 'pointer', fontSize: 20, color: n <= newRating ? '#f5a623' : 'var(--d-fg-3)', padding: '0 2px' }}>
                    {n <= newRating ? '\u2605' : '\u2606'}
                  </button>
                ))}
              </div>
              <div style={{ display: 'flex', gap: 6 }}>
                <input type="text" placeholder={_t('webapp.product_review_placeholder')} value={newComment} onChange={e => setNewComment(e.target.value)}
                  onKeyDown={e => e.key === 'Enter' && submitReview()}
                  style={{ flex: 1, padding: '8px 10px', borderRadius: 6, border: '1px solid var(--d-border)', background: 'var(--d-bg-surface)', color: 'var(--d-fg-1)', fontSize: 13 }} />
                <button onClick={submitReview} disabled={!newComment.trim() || reviewSubmitting}
                  style={{ padding: '8px 14px', borderRadius: 6, background: 'var(--nb-green)', color: '#fff', border: 'none', fontSize: 12, fontWeight: 600, cursor: 'pointer', opacity: newComment.trim() && !reviewSubmitting ? 1 : 0.5, display: 'inline-flex', alignItems: 'center', gap: 4 }}>
                  {reviewSubmitting ? <span className="btn-spinner" style={{ borderColor: 'rgba(255,255,255,0.3)', borderTopColor: '#fff' }} /> : 'Enviar'}
                </button>
              </div>
            </div>

            {/* Reviews list */}
            {reviews.length === 0 ? (
              <div style={{ padding: 24, textAlign: 'center', color: 'var(--d-fg-3)', fontSize: 13 }}>
                <Ico name="star" size={24} />
                <p style={{ marginTop: 6 }}>Ainda sem avaliações. Sê o primeiro!</p>
              </div>
            ) : (
              <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                {reviews.map(r => (
                  <div key={r.id} style={{ padding: '10px 12px', borderRadius: 10, border: '1px solid var(--d-border)' }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 4 }}>
                      <span style={{ fontSize: 13, fontWeight: 600, color: 'var(--d-fg-1)' }}>{r.user}</span>
                      <span style={{ fontSize: 11, color: 'var(--d-fg-3)' }}>{r.date}</span>
                    </div>
                    <div style={{ color: '#f5a623', fontSize: 12, marginBottom: 4 }}>{'\u2605'.repeat(r.rating)}{'\u2606'.repeat(5 - r.rating)}</div>
                    <p style={{ fontSize: 12, color: 'var(--d-fg-2)', lineHeight: 1.4, margin: 0 }}>{r.text}</p>
                  </div>
                ))}
              </div>
            )}
          </>
        )}

        {/* ═══ TAB: AI ═══ */}
        {panelTab === 'ai' && (
          <>
            <div style={{ textAlign: 'center', padding: '0.5rem 0 1rem' }}>
              <div style={{ width: 48, height: 48, borderRadius: 12, background: 'rgba(2,165,134,0.12)', color: 'var(--nb-green)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', marginBottom: 8 }}>
                <Ico name="sparkle" size={24} />
              </div>
              <h3 style={{ fontSize: '0.95rem', fontWeight: 700, color: 'var(--d-fg-1)', marginBottom: 4 }}>Assistente AI</h3>
              <p style={{ fontSize: 12, color: 'var(--d-fg-3)' }}>Pede informações sobre <strong>{product.Name}</strong></p>
            </div>

            {/* Quick questions */}
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginBottom: 12 }}>
              {['Detalhes completos', 'Compatibilidade', 'Cuidados e manutenção', 'Alternativas similares', 'Vale a pena?'].map(q => (
                <button key={q} onClick={() => { setAiQuery(q); setTimeout(() => askAI(), 50); }}
                  style={{ padding: '6px 12px', borderRadius: 16, border: '1px solid var(--d-border)', background: 'var(--d-bg-surface)', color: 'var(--d-fg-2)', fontSize: 11, cursor: 'pointer' }}>
                  {q}
                </button>
              ))}
            </div>

            {/* Custom question */}
            <div style={{ display: 'flex', gap: 6, marginBottom: 12 }}>
              <input type="text" placeholder={_t('webapp.product_ai_placeholder')} value={aiQuery} onChange={e => setAiQuery(e.target.value)}
                onKeyDown={e => e.key === 'Enter' && askAI()}
                style={{ flex: 1, padding: '9px 12px', borderRadius: 8, border: '1px solid var(--d-border)', background: 'var(--d-bg-surface)', color: 'var(--d-fg-1)', fontSize: 13 }} />
              <button onClick={askAI} disabled={aiLoading}
                style={{ padding: '9px 14px', borderRadius: 8, background: 'var(--nb-green)', color: '#fff', border: 'none', fontSize: 12, fontWeight: 600, cursor: 'pointer' }}>
                {aiLoading ? '...' : <Ico name="sparkle" size={14} />}
              </button>
            </div>

            {/* AI Response */}
            {aiLoading && (
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '14px', borderRadius: 10, background: 'var(--d-bg-surface-2)' }}>
                <div className="nb-spinner" style={{ width: 20, height: 20 }} />
                <span style={{ fontSize: 13, color: 'var(--d-fg-3)' }}>A analisar o produto...</span>
              </div>
            )}
            {aiResponse && !aiLoading && (
              <div style={{ padding: '14px', borderRadius: 10, background: 'rgba(2,165,134,0.06)', border: '1px solid rgba(2,165,134,0.15)' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 8 }}>
                  <Ico name="sparkle" size={14} />
                  <span style={{ fontSize: 12, fontWeight: 600, color: 'var(--nb-green)' }}>NhaBex AI</span>
                </div>
                <p style={{ fontSize: 13, color: 'var(--d-fg-2)', lineHeight: 1.6, margin: 0 }}>{aiResponse}</p>
              </div>
            )}
            {!aiResponse && !aiLoading && (
              <div style={{ padding: 24, textAlign: 'center', color: 'var(--d-fg-3)', fontSize: 12 }}>
                Clica numa pergunta rápida ou escreve a tua pergunta.
              </div>
            )}
          </>
        )}
      </div>

      {/* Sticky CTA */}
      {panelTab === 'details' && (
        <div className="store-panel-cta">
          {inStock ? (
            <>
              <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
                <div className="store-qty-picker">
                  <button onClick={() => setQty(Math.max(1, qty - 1))}>-</button>
                  <span>{qty}</span>
                  <button onClick={() => { if (product.Stock === null || qty < product.Stock) setQty(qty + 1); }}>+</button>
                </div>
                <button className="store-add-cart-btn" onClick={doAddToCart}>
                  <Ico name="store" size={14} /> {_t('webapp.store_add_to_cart') || 'Adicionar'}
                </button>
              </div>
              {onGoToCart && (
                <button className="pay-btn-primary" style={{ width: '100%', justifyContent: 'center', marginTop: 8 }}
                  onClick={() => { doAddToCart(); if (onGoToCart) onGoToCart(); }}>
                  <Ico name="check" size={14} /> {_t('webapp.store_checkout') || 'Finalizar compra'}
                </button>
              )}
            </>
          ) : (
            <div className="store-sold-out-bar">
              {_t('webapp.store_product_sold_out') || 'Produto esgotado'}
            </div>
          )}
        </div>
      )}
    </aside>
  );
}

// ─── Store Cart Panel (right sidebar — global cart) ─────────
function StoreCartPanel({ onClose, collapsed, onToggle, addToast, onGoToStore, signedIn, user }) {
  const [cartItems, setCartItems] = useState([]);
  const [refreshKey, setRefreshKey] = useState(0);
  const [panelView, setPanelView] = useState('cart'); // cart | checkout | confirmed
  const [storeSettings, setStoreSettings] = useState({});
  const [bankDetails, setBankDetails] = useState(null);
  const [checkoutForm, setCheckoutForm] = useState({ clientName: '', clientEmail: '', clientPhone: '', deliveryMethod: 'pickup', deliveryAddress: '', paymentMethod: '', notes: '' });
  const [submitting, setSubmitting] = useState(false);
  const [confirmedOrder, setConfirmedOrder] = useState(null);
  const [transferReceiptFile, setTransferReceiptFile] = useState(null);
  const [checkoutStoreHash, setCheckoutStoreHash] = useState(null);
  const [checkoutStoreId, setCheckoutStoreId] = useState(null);
  const [checkoutStoreName, setCheckoutStoreName] = useState('');
  const [checkoutCurrency, setCheckoutCurrency] = useState('CVE');
  const [loadingCheckout, setLoadingCheckout] = useState(false);
  const [deliveryFee, setDeliveryFee] = useState(0);
  const [platformFee, setPlatformFee] = useState(20);
  const [storeLocation, setStoreLocation] = useState(null);
  const [deliveryCoords, setDeliveryCoords] = useState(null);
  const mapContainerRef = useRef(null);
  const mapInstanceRef = useRef(null);
  const deliveryMarkerRef = useRef(null);

  const loadCart = () => {
    const all = [];
    for (let i = 0; i < localStorage.length; i++) {
      const key = localStorage.key(i);
      if (key && key.startsWith('nhabex_store_cart_')) {
        const hash = key.replace('nhabex_store_cart_', '');
        try {
          const items = JSON.parse(localStorage.getItem(key) || '[]');
          if (Array.isArray(items)) items.forEach(it => all.push({ ...it, _storeHash: hash }));
        } catch {}
      }
    }
    setCartItems(all);
  };

  useEffect(() => { loadCart(); }, [refreshKey]);
  useEffect(() => {
    const onUpdate = () => setRefreshKey(k => k + 1);
    window.addEventListener('nb-store-cart-update', onUpdate);
    return () => window.removeEventListener('nb-store-cart-update', onUpdate);
  }, []);

  // Leaflet map for delivery location
  useEffect(() => {
    if (panelView !== 'checkout' || checkoutForm.deliveryMethod !== 'delivery' || !mapContainerRef.current) return;
    if (mapInstanceRef.current) { mapInstanceRef.current.invalidateSize(); return; }
    const loadLeaflet = () => {
      if (!document.querySelector('link[href*="leaflet"]')) {
        const link = document.createElement('link');
        link.rel = 'stylesheet'; link.href = 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.css';
        document.head.appendChild(link);
      }
      if (!window.L) {
        const sc = document.createElement('script');
        sc.src = 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.js';
        sc.onload = () => initMap();
        document.head.appendChild(sc);
      } else initMap();
    };
    const initMap = () => {
      if (!mapContainerRef.current || mapInstanceRef.current) return;
      const defaultCenter = storeLocation ? [storeLocation.lat, storeLocation.lng] : [14.93, -23.51];
      const map = window.L.map(mapContainerRef.current, { zoomControl: false }).setView(defaultCenter, 14);
      window.L.control.zoom({ position: 'topright' }).addTo(map);
      window.L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '&copy; OSM', maxZoom: 19 }).addTo(map);
      if (storeLocation) {
        window.L.marker([storeLocation.lat, storeLocation.lng], {
          icon: window.L.divIcon({ className: 'store-map-pin', html: '<div style="background:var(--nb-green,#02a586);color:#fff;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;box-shadow:0 2px 6px rgba(0,0,0,.3)"><span class="material-symbols-rounded" style="font-size:16px">storefront</span></div>', iconSize: [28, 28], iconAnchor: [14, 14] })
        }).addTo(map).bindPopup(storeLocation.name || 'Loja');
      }
      map.on('click', (e) => {
        const { lat, lng } = e.latlng;
        setDeliveryCoords({ lat, lng });
        if (deliveryMarkerRef.current) deliveryMarkerRef.current.setLatLng([lat, lng]);
        else {
          deliveryMarkerRef.current = window.L.marker([lat, lng], {
            icon: window.L.divIcon({ className: 'delivery-map-pin', html: '<div style="background:#e74c3c;color:#fff;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;box-shadow:0 2px 6px rgba(0,0,0,.3)"><span class="material-symbols-rounded" style="font-size:16px">pin_drop</span></div>', iconSize: [28, 28], iconAnchor: [14, 28] })
          }).addTo(map);
        }
      });
      mapInstanceRef.current = map;
      setTimeout(() => map.invalidateSize(), 200);
    };
    loadLeaflet();
    return () => {
      if (mapInstanceRef.current) { mapInstanceRef.current.remove(); mapInstanceRef.current = null; deliveryMarkerRef.current = null; }
    };
  }, [panelView, checkoutForm.deliveryMethod]);

  const updateQty = (item, delta) => {
    try {
      const key = 'nhabex_store_cart_' + item._storeHash;
      let items = JSON.parse(localStorage.getItem(key) || '[]');
      const idx = items.findIndex(i => i.productId === item.productId);
      if (idx === -1) return;
      items[idx].qty += delta;
      if (items[idx].qty <= 0) items.splice(idx, 1);
      localStorage.setItem(key, JSON.stringify(items));
      window.dispatchEvent(new CustomEvent('nb-store-cart-update', { detail: { storeHash: item._storeHash } }));
      loadCart();
    } catch {}
  };

  const removeItem = (item) => {
    try {
      const key = 'nhabex_store_cart_' + item._storeHash;
      let items = JSON.parse(localStorage.getItem(key) || '[]').filter(i => i.productId !== item.productId);
      localStorage.setItem(key, JSON.stringify(items));
      window.dispatchEvent(new CustomEvent('nb-store-cart-update', { detail: { storeHash: item._storeHash } }));
      loadCart();
    } catch {}
  };

  const totalCount = cartItems.reduce((s, i) => s + (i.qty || 1), 0);
  const totalPrice = cartItems.reduce((s, i) => s + (i.price || 0) * (i.qty || 1), 0);

  // Group by store
  const storeGroups = cartItems.reduce((acc, item) => {
    const key = item._storeHash || 'default';
    if (!acc[key]) acc[key] = { hash: key, items: [] };
    acc[key].items.push(item);
    return acc;
  }, {});
  const storeHashes = Object.keys(storeGroups);
  const isSingleStore = storeHashes.length === 1;

  const deliveryLabel = (m) => ({ pickup: _t('webapp.store_pickup') || 'Levantamento', delivery: _t('webapp.store_delivery') || 'Entrega', digital: _t('webapp.store_digital') || 'Digital' }[m] || m);
  const paymentLabel = (m) => ({ sisp: 'NhaBex Pay', transfer: 'Transferência' }[m] || m);

  const goCheckout = async () => {
    setLoadingCheckout(true);
    const hash = storeHashes[0];
    setCheckoutStoreHash(hash);
    try {
      const settingsRes = await API.get('/store/' + hash + '/settings');
      if (settingsRes.message === 'success') {
        const ss = settingsRes.data || {};
        // Only NhaBex Pay (SISP) for now
        ss.paymentMethods = ['sisp'];
        setStoreSettings(ss);
        setCheckoutStoreId(ss.companyId || null);
        setCheckoutStoreName(ss.storeName || '');
        setCheckoutCurrency(ss.currency || 'CVE');
        if (ss.bankDetails) setBankDetails(ss.bankDetails);
        setDeliveryFee(ss.deliveryFee || 0);
        setPlatformFee(ss.platformFee ?? 20);
        if (ss.storeLocation) setStoreLocation(ss.storeLocation);
        setCheckoutForm(f => ({ ...f, paymentMethod: 'sisp' }));
      }
    } catch {}
    if (user) {
      setCheckoutForm(f => ({ ...f, clientName: f.clientName || user.name || '', clientEmail: f.clientEmail || user.email || '', clientPhone: f.clientPhone || user.phone || '' }));
    }
    setLoadingCheckout(false);
    setPanelView('checkout');
  };

  const canCheckout = () => signedIn || storeSettings.allowGuestCheckout == 1;

  const submitOrder = async () => {
    if (!canCheckout()) { addToast && addToast(_t('webapp.store_login_checkout') || 'Inicia sessão para finalizar', 'warning'); return; }
    if (!checkoutForm.clientName.trim()) { addToast && addToast(_t('webapp.store_name_required') || 'Nome obrigatório', 'warning'); return; }
    if (checkoutForm.deliveryMethod === 'delivery' && !checkoutForm.deliveryAddress.trim()) { addToast && addToast(_t('webapp.store_address_required') || 'Morada obrigatória', 'warning'); return; }
    setSubmitting(true);
    try {
      const companyId = checkoutStoreId;
      if (!companyId) { addToast && addToast(_t('webapp.store_company_error') || 'Erro na loja', 'error'); setSubmitting(false); return; }
      const storeCart = cartItems.filter(i => i._storeHash === checkoutStoreHash);
      for (const item of storeCart) {
        await API.post('/client/store/cart/add', { companyId, productId: item.productId, quantity: item.qty });
      }
      const cartTotal = storeCart.reduce((s, i) => s + (i.price || 0) * (i.qty || 1), 0);
      const checkoutPayload = {
        companyId,
        clientName: checkoutForm.clientName,
        clientEmail: checkoutForm.clientEmail,
        clientPhone: checkoutForm.clientPhone,
        deliveryMethod: checkoutForm.deliveryMethod,
        deliveryAddress: checkoutForm.deliveryAddress,
        paymentMethod: checkoutForm.paymentMethod,
        notes: checkoutForm.notes,
      };
      if (deliveryCoords) {
        checkoutPayload.deliveryLat = deliveryCoords.lat;
        checkoutPayload.deliveryLng = deliveryCoords.lng;
      }
      const res = await API.post('/client/store/checkout', checkoutPayload);
      if (res.message === 'success') {
        const orderData = {
          orderCode: res.data?.orderCode,
          order_code: res.data?.orderCode,
          orderId: res.data?.orderId,
          total: res.data?.total ?? cartTotal,
          subtotal: res.data?.subtotal,
          deliveryFee: res.data?.deliveryFee,
          platformFee: res.data?.platformFee,
          items: storeCart.length,
          delivery: checkoutForm.deliveryMethod,
          payment: checkoutForm.paymentMethod,
        };
        if (checkoutForm.paymentMethod === 'sisp') {
          try {
            localStorage.setItem('nb_store_pending_order', JSON.stringify(orderData));
            localStorage.setItem('nhabex_store_cart_' + checkoutStoreHash, '[]');
            window.dispatchEvent(new CustomEvent('nb-store-cart-update', { detail: { storeHash: checkoutStoreHash } }));
            const storeOk = await initiatePaymentWithCardPicker({
              service_type: 'store_purchase',
              amount: parseFloat(res.data?.total ?? cartTotal),
              return_path: window.location.origin + window.location.pathname + '?view=store',
              metadata: { store_order_id: res.data?.orderId, order_code: res.data?.orderCode },
            }, { serviceName: _t('webapp.store_purchase') || 'Compra na Loja', addToast });
            if (!storeOk) {
              setSubmitting(false);
              localStorage.removeItem('nb_store_pending_order');
              return;
            }
            return;
          } catch {
            setSubmitting(false);
            addToast && addToast(_t('webapp.error_init_payment') || 'Erro ao iniciar pagamento', 'error');
            return;
          }
        }
        if (checkoutForm.paymentMethod === 'transfer' && transferReceiptFile) {
          try {
            const formData = new FormData();
            formData.append('orderId', res.data?.orderId);
            formData.append('receipt', transferReceiptFile);
            await API.upload('/client/store/upload-receipt', formData);
          } catch {}
        }
        setSubmitting(false);
        localStorage.setItem('nhabex_store_cart_' + checkoutStoreHash, '[]');
        window.dispatchEvent(new CustomEvent('nb-store-cart-update', { detail: { storeHash: checkoutStoreHash } }));
        loadCart();
        addToast && addToast(_t('webapp.store_order_confirmed') || 'Encomenda confirmada', 'success');
        setConfirmedOrder(orderData);
        setPanelView('confirmed');
      } else {
        setSubmitting(false);
        addToast && addToast(res.text || res.detail || _t('webapp.store_order_error') || 'Erro na encomenda', 'error');
      }
    } catch (e) {
      setSubmitting(false);
      addToast && addToast(_t('webapp.store_comm_error') || 'Erro de comunicação', 'error');
    }
  };

  if (collapsed) {
    return (
      <aside className="ticket-panel collapsed">
        <button className="ticket-collapse-btn" onClick={onToggle} title={_t('webapp.panel_expand') || 'Expandir'}>
          <span style={{ transform: 'rotate(180deg)', display: 'inline-flex' }}><Ico name="chevR" size={16} /></span>
        </button>
      </aside>
    );
  }

  const headTitle = panelView === 'checkout' ? (_t('webapp.store_checkout') || 'Finalizar compra')
    : panelView === 'confirmed' ? (_t('webapp.store_order_confirmed_title') || 'Encomenda')
    : (_t('webapp.store_cart') || 'Carrinho');
  const headSub = panelView === 'cart'
    ? `${totalCount} ${totalCount === 1 ? (_t('webapp.store_item_singular') || 'item') : (_t('webapp.store_items') || 'itens')} · ${totalPrice.toLocaleString('pt')} CVE`
    : panelView === 'checkout' ? (checkoutStoreName || '') : '';

  return (
    <aside className="ticket-panel">
      <div className="panel-head" style={{ cursor: 'default' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <Ico name="store" size={18} />
          <div>
            <h3 style={{ margin: 0, fontSize: '0.9rem' }}>{headTitle}</h3>
            {headSub && <small style={{ color: 'var(--d-fg-3)' }}>{headSub}</small>}
          </div>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
          <button className="panel-close" onClick={onToggle} title={_t('webapp.panel_collapse') || 'Minimizar'}><Ico name="chevR" size={16} /></button>
          <button className="panel-close" onClick={onClose} title={_t('webapp.close')}><Ico name="close" size={16} /></button>
        </div>
      </div>
      <div className="panel-body" style={{ padding: '12px 16px', overflowY: 'auto' }}>

          {/* CART VIEW */}
          {panelView === 'cart' && (
            <>
              {cartItems.length === 0 ? (
                <div style={{ padding: 40, textAlign: 'center', color: 'var(--d-fg-3)', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12 }}>
                  <Ico name="store" size={40} style={{ opacity: 0.3 }} />
                  <span>{_t('webapp.store_cart_empty') || 'Carrinho vazio'}</span>
                  <button className="pay-btn-outline" style={{ marginTop: 4 }} onClick={() => { onClose(); if (onGoToStore) onGoToStore(); }}>{_t('webapp.store_continue_shopping') || 'Continuar a comprar'}</button>
                </div>
              ) : (
                <>
                  {cartItems.map((item, idx) => (
                    <div key={item._storeHash + '_' + item.productId + '_' + idx} className="str-cart-item">
                      {item.imageURL ? <img src={item.imageURL} alt="" className="str-cart-thumb" onError={e => { e.target.onerror = null; e.target.src = STORE_DEFAULT_IMG; e.target.classList.add('str-product-img--default'); }} /> : <img src={STORE_DEFAULT_IMG} alt="" className="str-cart-thumb str-product-img--default" />}
                      <div className="str-cart-item-info">
                        <span className="str-cart-item-name">{item.name}</span>
                        <span className="str-cart-item-price">{(item.price * item.qty).toLocaleString('pt')} CVE</span>
                      </div>
                      <div className="str-qty-row str-qty-row--sm">
                        <button className="str-qty-btn" onClick={() => updateQty(item, -1)}>-</button>
                        <span className="str-qty-val">{item.qty}</span>
                        <button className="str-qty-btn" onClick={() => updateQty(item, 1)}>+</button>
                      </div>
                      <button className="str-remove-btn" onClick={() => removeItem(item)} title={_t('webapp.store_remove') || 'Remover'}><Ico name="trash" size={14} /></button>
                    </div>
                  ))}
                  <div className="str-cart-total">
                    <span>{_t('webapp.store_total') || 'Total'}</span>
                    <span>{totalPrice.toLocaleString('pt')} CVE</span>
                  </div>
                  {isSingleStore ? (
                    <button className="pay-btn-primary" style={{ width: '100%', justifyContent: 'center', marginTop: 12 }} onClick={goCheckout} disabled={loadingCheckout}>
                      {loadingCheckout ? <><span className="btn-spinner" /> {_t('webapp.store_processing') || 'A processar...'}</> : (_t('webapp.store_checkout') || 'Finalizar compra')}
                    </button>
                  ) : (
                    <p style={{ textAlign: 'center', fontSize: '0.78rem', color: 'var(--d-fg-3)', marginTop: 8 }}>
                      {_t('webapp.store_multi_store')?.replace(':count', storeHashes.length) || `Itens de ${storeHashes.length} lojas diferentes`}
                    </p>
                  )}
                </>
              )}
            </>
          )}

          {/* CHECKOUT VIEW */}
          {panelView === 'checkout' && !canCheckout() && (
            <div style={{ padding: '2rem 0', textAlign: 'center' }}>
              <Ico name="user" size={40} />
              <h2 style={{ color: 'var(--d-fg-1)', fontWeight: 600, margin: '16px 0 8px', fontSize: '1rem' }}>{_t('webapp.store_login_title') || 'Inicia sessão'}</h2>
              <p style={{ color: 'var(--d-fg-3)', fontSize: '0.875rem' }}>{_t('webapp.store_login_desc') || 'Precisas de conta para finalizar.'}</p>
              <button className="pay-btn-outline" style={{ marginTop: 20 }} onClick={() => setPanelView('cart')}>{_t('webapp.store_back_to_cart') || 'Voltar ao carrinho'}</button>
            </div>
          )}
          {panelView === 'checkout' && canCheckout() && (
            <div className="str-checkout-form">
              <div className="str-checkout-section">
                <h4 className="str-checkout-section-title"><Ico name="user" size={14} /> {_t('webapp.store_client_info') || 'Dados pessoais'}</h4>
                <div className="str-checkout-field">
                  <label className="pay-label">Nome</label>
                  <input className="pay-input" value={checkoutForm.clientName}
                    onChange={e => setCheckoutForm(f => ({ ...f, clientName: e.target.value }))} placeholder={_t('webapp.store_name_placeholder') || 'O teu nome'} />
                </div>
                <div className="str-checkout-field">
                  <label className="pay-label">Email</label>
                  <input className="pay-input" type="email" value={checkoutForm.clientEmail}
                    onChange={e => setCheckoutForm(f => ({ ...f, clientEmail: e.target.value }))} placeholder="email@exemplo.com" />
                </div>
                <div className="str-checkout-field">
                  <label className="pay-label">Telefone</label>
                  <input className="pay-input" type="tel" value={checkoutForm.clientPhone}
                    onChange={e => setCheckoutForm(f => ({ ...f, clientPhone: e.target.value }))} placeholder="+238..." />
                </div>
              </div>

              {storeSettings.deliveryMethods && storeSettings.deliveryMethods.length > 0 && (
                <div className="str-checkout-section">
                  <h4 className="str-checkout-section-title"><Ico name="pin" size={14} /> {_t('webapp.store_delivery') || 'Entrega'}</h4>
                  <div className="pay-presets">
                    {storeSettings.deliveryMethods.map(m => (
                      <button key={m} className={`pay-preset ${checkoutForm.deliveryMethod === m ? 'pay-preset--on' : ''}`}
                        onClick={() => setCheckoutForm(f => ({ ...f, deliveryMethod: m }))}>{deliveryLabel(m)}</button>
                    ))}
                  </div>
                  {checkoutForm.deliveryMethod === 'delivery' && (
                    <>
                      <div className="str-checkout-field" style={{ marginTop: 10 }}>
                        <label className="pay-label">{_t('webapp.store_delivery_address') || 'Morada'}</label>
                        <input className="pay-input" value={checkoutForm.deliveryAddress}
                          onChange={e => setCheckoutForm(f => ({ ...f, deliveryAddress: e.target.value }))} placeholder={_t('webapp.store_address_placeholder') || 'Endereço de entrega'} />
                      </div>
                      <div ref={mapContainerRef} style={{ width: '100%', height: 200, borderRadius: 10, marginTop: 10, background: 'var(--d-bg-2)', border: '1px solid var(--d-border-1)' }} />
                      <p style={{ fontSize: 11, color: 'var(--d-fg-3)', margin: '6px 0 0' }}>
                        {deliveryCoords ? `Localização seleccionada (${deliveryCoords.lat.toFixed(5)}, ${deliveryCoords.lng.toFixed(5)})` : 'Toca no mapa para indicar o local de entrega'}
                      </p>
                      {deliveryFee > 0 && (
                        <div style={{ marginTop: 8, padding: '6px 10px', background: 'rgba(2,165,134,0.08)', borderRadius: 8, fontSize: 13 }}>
                          <Ico name="pin" size={12} /> Taxa de entrega: <strong>{deliveryFee.toLocaleString('pt')} {checkoutCurrency}</strong>
                        </div>
                      )}
                    </>
                  )}
                </div>
              )}

              {storeSettings.paymentMethods && storeSettings.paymentMethods.length > 1 && (
                <div className="str-checkout-section">
                  <h4 className="str-checkout-section-title"><Ico name="wallet" size={14} /> {_t('webapp.store_payment') || 'Pagamento'}</h4>
                  <div className="pay-presets">
                    {storeSettings.paymentMethods.map(m => (
                      <button key={m} className={`pay-preset ${checkoutForm.paymentMethod === m ? 'pay-preset--on' : ''}`}
                        onClick={() => setCheckoutForm(f => ({ ...f, paymentMethod: m }))}>{paymentLabel(m)}</button>
                    ))}
                  </div>
                </div>
              )}

              <div className="str-checkout-section">
                <div className="str-checkout-field">
                  <label className="pay-label">{_t('webapp.wash_notes_optional') || 'Notas (opcional)'}</label>
                  <input className="pay-input" value={checkoutForm.notes}
                    onChange={e => setCheckoutForm(f => ({ ...f, notes: e.target.value }))} placeholder={_t('webapp.store_notes_placeholder') || 'Alguma observação?'} />
                </div>
              </div>

              <div className="str-checkout-fees-breakdown" style={{ fontSize: 13, color: 'var(--d-fg-2)', margin: '12px 0 4px' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', padding: '3px 0' }}>
                  <span>Subtotal</span>
                  <span>{totalPrice.toLocaleString('pt')} {checkoutCurrency}</span>
                </div>
                {checkoutForm.deliveryMethod === 'delivery' && deliveryFee > 0 && (
                  <div style={{ display: 'flex', justifyContent: 'space-between', padding: '3px 0' }}>
                    <span>Taxa de entrega</span>
                    <span>{deliveryFee.toLocaleString('pt')} {checkoutCurrency}</span>
                  </div>
                )}
                {platformFee > 0 && (
                  <div style={{ display: 'flex', justifyContent: 'space-between', padding: '3px 0' }}>
                    <span>Taxa de serviço</span>
                    <span>{platformFee.toLocaleString('pt')} {checkoutCurrency}</span>
                  </div>
                )}
              </div>

              <div className="str-checkout-total-bar">
                <span>{_t('webapp.store_total') || 'Total'}</span>
                <span className="str-checkout-total-value">{(totalPrice + (checkoutForm.deliveryMethod === 'delivery' ? deliveryFee : 0) + platformFee).toLocaleString('pt')} {checkoutCurrency}</span>
              </div>

              <div className="str-checkout-actions">
                <button className="pay-btn-outline" onClick={() => setPanelView('cart')}>{_t('webapp.back') || 'Voltar'}</button>
                <button className="pay-btn-primary" onClick={submitOrder} disabled={submitting} style={{ flex: 1, justifyContent: 'center' }}>
                  {submitting ? <><span className="btn-spinner" /> {_t('webapp.store_processing') || 'A processar...'}</> : (<><Ico name="check" size={14} /> {_t('webapp.store_confirm_order') || 'Confirmar encomenda'}</>)}
                </button>
              </div>

              <p className="str-checkout-terms">
                Ao confirmar a encomenda, concordas com os{' '}
                <a href="termos" target="_blank">Termos de Utilização</a>
                {' '}e a{' '}
                <a href="privacidade" target="_blank">Política de Privacidade</a>
                {' '}da NHABEX.
              </p>
            </div>
          )}

          {/* CONFIRMED VIEW */}
          {panelView === 'confirmed' && confirmedOrder && (
            <div style={{ padding: '1.5rem 0', textAlign: 'center' }}>
              <div style={{ width: 56, height: 56, borderRadius: '50%', background: 'rgba(2,165,134,0.15)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', marginBottom: 16 }}>
                <Ico name="check" size={28} />
              </div>
              <h2 style={{ color: 'var(--d-fg-1)', fontWeight: 600, marginBottom: 8, fontSize: '1rem' }}>{_t('webapp.store_confirmed_title') || 'Encomenda confirmada!'}</h2>
              <p style={{ color: 'var(--d-fg-3)', fontSize: '0.875rem', marginBottom: 16 }}>{_t('webapp.store_confirmed_desc') || 'A tua encomenda foi registada.'}</p>

              <div className="pay-summary" style={{ textAlign: 'left' }}>
                <div className="pay-summary-row"><span>{_t('webapp.store_order_code') || 'Código'}</span><span style={{ fontFamily: 'monospace', fontWeight: 700, letterSpacing: 1 }}>{confirmedOrder.orderCode || confirmedOrder.order_code}</span></div>
                <div className="pay-summary-row"><span>{_t('webapp.store_items') || 'Itens'}</span><span>{confirmedOrder.items}</span></div>
                {confirmedOrder.delivery && <div className="pay-summary-row"><span>{_t('webapp.store_order_delivery') || 'Entrega'}</span><span>{deliveryLabel(confirmedOrder.delivery)}</span></div>}
                {confirmedOrder.payment && <div className="pay-summary-row"><span>{_t('webapp.store_order_payment') || 'Pagamento'}</span><span>{paymentLabel(confirmedOrder.payment)}</span></div>}
                <div className="pay-summary-row pay-summary-total">
                  <span>{_t('webapp.store_total') || 'Total'}</span>
                  <span>{confirmedOrder.total ? parseFloat(confirmedOrder.total).toLocaleString('pt') + ' ' + checkoutCurrency : '—'}</span>
                </div>
              </div>

              <button className="pay-btn-primary" style={{ marginTop: 20, width: '100%', justifyContent: 'center' }} onClick={onClose}>
                {_t('webapp.close') || 'Fechar'}
              </button>
            </div>
          )}

        </div>
    </aside>
  );
}

function StoreView({ onBack, signedIn, user, addToast, onSelectProduct, initialView, onInitialViewConsumed, deepLinkStoreHash, deepLinkProductId, onDeepLinkConsumed }) {
  const [sView, setSView] = useState('marketplace');
  const [stores, setStores] = useState([]);
  const [loading, setLoading] = useState(true);
  const [currentStore, setCurrentStore] = useState(null);
  const [categories, setCategories] = useState([]);
  const [products, setProducts] = useState([]);
  const [allProducts, setAllProducts] = useState([]);
  const [selectedStoreFilter, setSelectedStoreFilter] = useState(null);
  const [selectedCat, setSelectedCat] = useState(null);
  const [search, setSearch] = useState('');
  const [selectedProduct, setSelectedProduct] = useState(null);
  const [qty, setQty] = useState(1);
  const [detailImgIdx, setDetailImgIdx] = useState(0);
  const [cart, setCart] = useState([]);
  const [allCarts, setAllCarts] = useState([]);
  const [storeSettings, setStoreSettings] = useState({});
  const [bankDetails, setBankDetails] = useState(null);
  const [myOrders, setMyOrders] = useState([]);
  const [ordersLoading, setOrdersLoading] = useState(false);
  const [selectedOrder, setSelectedOrder] = useState(null);
  const [cancelConfirmId, setCancelConfirmId] = useState(null);
  const [orderImageViewer, setOrderImageViewer] = useState(null); // { src, name, images[], index }
  const [transferReceiptFile, setTransferReceiptFile] = useState(null);
  const [checkoutForm, setCheckoutForm] = useState({ clientName: '', clientEmail: '', clientPhone: '', deliveryMethod: 'pickup', deliveryAddress: '', paymentMethod: '', notes: '' });
  const [submitting, setSubmitting] = useState(false);
  const [confirmedOrder, setConfirmedOrder] = useState(null);
  const searchRef = useRef(null);
  const [deliveryFeeStore, setDeliveryFeeStore] = useState(0);
  const [platformFeeStore, setPlatformFeeStore] = useState(20);
  const [storeLocationStore, setStoreLocationStore] = useState(null);
  const [deliveryCoordsStore, setDeliveryCoordsStore] = useState(null);
  const svMapContainerRef = useRef(null);
  const svMapInstanceRef = useRef(null);
  const svDeliveryMarkerRef = useRef(null);

  // Check for SISP store purchase return
  useEffect(() => {
    try {
      const raw = localStorage.getItem('nb_store_sisp_result');
      if (!raw) return;
      localStorage.removeItem('nb_store_sisp_result');
      const { result } = JSON.parse(raw);
      if (result === 'success') {
        let pending = null;
        try { pending = JSON.parse(localStorage.getItem('nb_store_pending_order')); } catch {}
        localStorage.removeItem('nb_store_pending_order');
        if (pending) {
          pending.paid = true;
          // Load full order detail and show tracking
          API.get('/client/store/orders').then(r => {
            if (r.message === 'success' && Array.isArray(r.data)) {
              const fullOrder = r.data.find(o => o.order_code === pending.orderCode || o.order_code === pending.order_code);
              if (fullOrder) { setSelectedOrder(fullOrder); setSView('orderDetail'); return; }
            }
            setConfirmedOrder(pending); setSView('confirmed');
          }).catch(() => { setConfirmedOrder(pending); setSView('confirmed'); });
        }
      }
    } catch {}
  }, []);

  // Load marketplace stores + all products
  useEffect(() => {
    setLoading(true);
    API.get('/store/marketplace').then(async (res) => {
      if (res.message === 'success' && Array.isArray(res.data)) {
        setStores(res.data);
        // Load products from all stores in parallel
        const productResults = await Promise.all(
          res.data.map(s =>
            API.get('/store/' + s.hash + '/products').then(r =>
              r.message === 'success' && Array.isArray(r.data)
                ? r.data.map(p => ({ ...p, _storeHash: s.hash, _storeName: s.name, _storeCurrency: r.currency || s.currency || 'CVE' }))
                : []
            ).catch(() => [])
          )
        );
        setAllProducts(productResults.flat());
      }
      setLoading(false);
    }).catch(() => { setLoading(false); });
  }, []);

  // Aggregate all store carts for marketplace view
  const refreshAllCarts = () => {
    const all = [];
    stores.forEach(s => {
      try {
        const items = JSON.parse(localStorage.getItem('nhabex_store_cart_' + s.hash) || '[]');
        if (Array.isArray(items)) items.forEach(i => all.push({ ...i, _storeHash: s.hash, _storeName: s.name, _storeCurrency: s.currency || 'CVE', _storeId: s.id }));
      } catch {}
    });
    setAllCarts(all);
  };

  // Sync cart when panel adds items
  useEffect(() => {
    const onCartUpdate = (e) => {
      const hash = e.detail?.storeHash;
      if (currentStore && hash === currentStore.hash) {
        try { const c = JSON.parse(localStorage.getItem('nhabex_store_cart_' + currentStore.hash) || '[]'); setCart(Array.isArray(c) ? c : []); } catch {}
      }
      refreshAllCarts();
    };
    window.addEventListener('nb-store-cart-update', onCartUpdate);
    refreshAllCarts();
    return () => window.removeEventListener('nb-store-cart-update', onCartUpdate);
  }, [currentStore?.hash, stores]);

  const loadStore = (store) => {
    setCurrentStore(store);
    setSView('catalog');
    setSelectedCat(null);
    setSearch('');
    try { const c = JSON.parse(localStorage.getItem('nhabex_store_cart_' + store.hash) || '[]'); setCart(Array.isArray(c) ? c : []); } catch { setCart([]); }
    // Load store data from API
    Promise.all([
      API.get('/store/' + store.hash + '/settings'),
      API.get('/store/' + store.hash + '/categories'),
      API.get('/store/' + store.hash + '/products'),
    ]).then(([settingsRes, catsRes, prodsRes]) => {
      if (settingsRes.message === 'success') {
        const sd = settingsRes.data || {};
        // Only NhaBex Pay (SISP) for now
        sd.paymentMethods = ['sisp'];
        setStoreSettings(sd);
        if (sd.bankDetails) setBankDetails(sd.bankDetails);
        setDeliveryFeeStore(sd.deliveryFee || 0);
        setPlatformFeeStore(sd.platformFee ?? 20);
        if (sd.storeLocation) setStoreLocationStore(sd.storeLocation);
        setCheckoutForm(f => ({ ...f, paymentMethod: f.paymentMethod || 'sisp' }));
      }
      if (catsRes.message === 'success') setCategories(Array.isArray(catsRes.data) ? catsRes.data : []);
      if (prodsRes.message === 'success') setProducts(Array.isArray(prodsRes.data) ? prodsRes.data : []);
    }).catch(() => {});
  };

  // Leaflet map for delivery location (StoreView)
  useEffect(() => {
    if (sView !== 'checkout' || checkoutForm.deliveryMethod !== 'delivery' || !svMapContainerRef.current) return;
    if (svMapInstanceRef.current) { svMapInstanceRef.current.invalidateSize(); return; }
    const loadLeaflet = () => {
      if (!document.querySelector('link[href*="leaflet"]')) {
        const link = document.createElement('link');
        link.rel = 'stylesheet'; link.href = 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.css';
        document.head.appendChild(link);
      }
      if (!window.L) {
        const sc = document.createElement('script');
        sc.src = 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.js';
        sc.onload = () => initSvMap();
        document.head.appendChild(sc);
      } else initSvMap();
    };
    const initSvMap = () => {
      if (!svMapContainerRef.current || svMapInstanceRef.current) return;
      const defaultCenter = storeLocationStore ? [storeLocationStore.lat, storeLocationStore.lng] : [14.93, -23.51];
      const map = window.L.map(svMapContainerRef.current, { zoomControl: false }).setView(defaultCenter, 14);
      window.L.control.zoom({ position: 'topright' }).addTo(map);
      window.L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '&copy; OSM', maxZoom: 19 }).addTo(map);
      if (storeLocationStore) {
        window.L.marker([storeLocationStore.lat, storeLocationStore.lng], {
          icon: window.L.divIcon({ className: 'store-map-pin', html: '<div style="background:var(--nb-green,#02a586);color:#fff;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;box-shadow:0 2px 6px rgba(0,0,0,.3)"><span class="material-symbols-rounded" style="font-size:16px">storefront</span></div>', iconSize: [28, 28], iconAnchor: [14, 14] })
        }).addTo(map).bindPopup(storeLocationStore.name || 'Loja');
      }
      map.on('click', (e) => {
        const { lat, lng } = e.latlng;
        setDeliveryCoordsStore({ lat, lng });
        if (svDeliveryMarkerRef.current) svDeliveryMarkerRef.current.setLatLng([lat, lng]);
        else {
          svDeliveryMarkerRef.current = window.L.marker([lat, lng], {
            icon: window.L.divIcon({ className: 'delivery-map-pin', html: '<div style="background:#e74c3c;color:#fff;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;box-shadow:0 2px 6px rgba(0,0,0,.3)"><span class="material-symbols-rounded" style="font-size:16px">pin_drop</span></div>', iconSize: [28, 28], iconAnchor: [14, 28] })
          }).addTo(map);
        }
      });
      svMapInstanceRef.current = map;
      setTimeout(() => map.invalidateSize(), 200);
    };
    loadLeaflet();
    return () => {
      if (svMapInstanceRef.current) { svMapInstanceRef.current.remove(); svMapInstanceRef.current = null; svDeliveryMarkerRef.current = null; }
    };
  }, [sView, checkoutForm.deliveryMethod]);

  const saveCart = (newCart) => {
    setCart(newCart);
    if (currentStore) {
      try { localStorage.setItem('nhabex_store_cart_' + currentStore.hash, JSON.stringify(newCart)); } catch {}
      window.dispatchEvent(new CustomEvent('nb-store-cart-update', { detail: { storeHash: currentStore.hash } }));
    }
  };

  const addToCart = (product, amount) => {
    const existing = cart.find(i => i.productId === product.ID);
    let newCart;
    if (existing) {
      newCart = cart.map(i => i.productId === product.ID ? { ...i, qty: i.qty + amount } : i);
    } else {
      newCart = [...cart, { productId: product.ID, name: product.Name, price: parseFloat(product.Price), imageURL: product.ImageURL || ((product.Images || [])[0] || null), stock: product.Stock, qty: amount }];
    }
    saveCart(newCart);
    addToast && addToast('Adicionado ao carrinho', 'success', 1500);
  };

  const updateCartQty = (productId, delta) => {
    const item = cart.find(i => i.productId === productId);
    if (!item) return;
    const newQty = item.qty + delta;
    if (newQty <= 0) { saveCart(cart.filter(i => i.productId !== productId)); return; }
    if (item.stock !== null && newQty > item.stock) return;
    saveCart(cart.map(i => i.productId === productId ? { ...i, qty: newQty } : i));
  };

  const removeFromCart = (productId) => saveCart(cart.filter(i => i.productId !== productId));

  const cartTotal = cart.reduce((s, i) => s + i.price * i.qty, 0);
  const cartCount = cart.reduce((s, i) => s + i.qty, 0);
  const currency = storeSettings.currency || 'CVE';
  const allCartsCount = allCarts.reduce((s, i) => s + i.qty, 0);
  const allCartsTotal = allCarts.reduce((s, i) => s + i.price * i.qty, 0);

  const filteredProducts = products.filter(p => {
    if (selectedCat && p.ID_StoreCategory != selectedCat) return false;
    if (search) { const q = search.toLowerCase(); return (p.Name || '').toLowerCase().includes(q) || (p.Description || '').toLowerCase().includes(q); }
    return true;
  });

  // Marketplace: all products with optional store filter
  const marketplaceProducts = allProducts.filter(p => {
    if (selectedStoreFilter && p._storeHash !== selectedStoreFilter) return false;
    if (search) { const q = search.toLowerCase(); return (p.Name || '').toLowerCase().includes(q) || (p.Description || '').toLowerCase().includes(q); }
    return true;
  });

  const [checkingOut, setCheckingOut] = useState(false);
  const goCheckout = () => {
    if (!canCheckout()) {
      setSView('checkout');
      return;
    }
    setCheckingOut(true);
    if (user) {
      setCheckoutForm(f => ({ ...f, clientName: f.clientName || user.name || '', clientEmail: f.clientEmail || user.email || '', clientPhone: f.clientPhone || user.phone || '' }));
    }
    if (!checkoutForm.paymentMethod) {
      setCheckoutForm(f => ({ ...f, paymentMethod: 'sisp' }));
    }
    setTimeout(() => { setSView('checkout'); setCheckingOut(false); }, 150);
  };

  const canCheckout = () => signedIn || storeSettings.allowGuestCheckout == 1;

  const submitOrder = async () => {
    if (!canCheckout()) { addToast && addToast(_t('webapp.store_login_checkout'), 'warning'); return; }
    if (!checkoutForm.clientName.trim()) { addToast && addToast(_t('webapp.store_name_required'), 'warning'); return; }
    if (checkoutForm.deliveryMethod === 'delivery' && !checkoutForm.deliveryAddress.trim()) { addToast && addToast(_t('webapp.store_address_required'), 'warning'); return; }
    setSubmitting(true);
    try {
      const companyId = currentStore?.id;
      if (!companyId) { addToast && addToast(_t('webapp.store_company_error'), 'error'); setSubmitting(false); return; }
      // Sync cart items to server
      for (const item of cart) {
        await API.post('/client/store/cart/add', { companyId, productId: item.productId, quantity: item.qty });
      }
      // Checkout
      const svCheckoutPayload = {
        companyId,
        clientName: checkoutForm.clientName,
        clientEmail: checkoutForm.clientEmail,
        clientPhone: checkoutForm.clientPhone,
        deliveryMethod: checkoutForm.deliveryMethod,
        deliveryAddress: checkoutForm.deliveryAddress,
        paymentMethod: checkoutForm.paymentMethod,
        notes: checkoutForm.notes,
      };
      if (deliveryCoordsStore) {
        svCheckoutPayload.deliveryLat = deliveryCoordsStore.lat;
        svCheckoutPayload.deliveryLng = deliveryCoordsStore.lng;
      }
      const res = await API.post('/client/store/checkout', svCheckoutPayload);
      if (res.message === 'success') {
        const orderData = {
          orderCode: res.data?.orderCode,
          order_code: res.data?.orderCode,
          orderId: res.data?.orderId,
          total: res.data?.total ?? cartTotal,
          subtotal: res.data?.subtotal,
          deliveryFee: res.data?.deliveryFee,
          platformFee: res.data?.platformFee,
          items: cart.length,
          delivery: checkoutForm.deliveryMethod,
          payment: checkoutForm.paymentMethod,
        };
        // If SISP payment — initiate with saved card picker
        if (checkoutForm.paymentMethod === 'sisp') {
          try {
            localStorage.setItem('nb_store_pending_order', JSON.stringify(orderData));
            saveCart([]);
            const storeOk2 = await initiatePaymentWithCardPicker({
              service_type: 'store_purchase',
              amount: parseFloat(res.data?.total ?? cartTotal),
              return_path: window.location.origin + window.location.pathname + '?view=store',
              metadata: { store_order_id: res.data?.orderId, order_code: res.data?.orderCode },
            }, { serviceName: _t('webapp.store_purchase') || 'Compra na Loja', addToast });
            if (!storeOk2) {
              setSubmitting(false);
              localStorage.removeItem('nb_store_pending_order');
            }
            return;
          } catch (payErr) {
            setSubmitting(false);
            addToast && addToast(_t('webapp.error_init_payment'), 'error');
            console.error('[Store] SISP initiate error:', payErr);
            return;
          }
        }

        // If transfer — upload receipt if provided
        if (checkoutForm.paymentMethod === 'transfer' && transferReceiptFile) {
          try {
            const formData = new FormData();
            formData.append('orderId', res.data?.orderId);
            formData.append('receipt', transferReceiptFile);
            await API.upload('/client/store/upload-receipt', formData);
          } catch (e) {
            console.error('[Store] receipt upload error:', e);
          }
          orderData.isTransfer = true;
        }

        setSubmitting(false);
        saveCart([]);
        addToast && addToast(_t('webapp.store_order_confirmed'), 'success');
        // Load full order and go to detail with tracking
        API.get('/client/store/orders').then(r => {
          if (r.message === 'success' && Array.isArray(r.data)) {
            const fullOrder = r.data.find(o => o.order_code === orderData.orderCode || o.order_code === orderData.order_code);
            if (fullOrder) { setSelectedOrder(fullOrder); setSView('orderDetail'); return; }
          }
          setConfirmedOrder(orderData); setSView('confirmed');
        }).catch(() => { setConfirmedOrder(orderData); setSView('confirmed'); });
      } else {
        setSubmitting(false);
        addToast && addToast(res.text || res.detail || _t('webapp.store_order_error'), 'error');
      }
    } catch (e) {
      setSubmitting(false);
      addToast && addToast(_t('webapp.store_comm_error'), 'error');
      console.error('[Store] checkout error:', e);
    }
  };

  const storeGoBack = () => {
    if (sView === 'detail') setSView('catalog');
    else if (sView === 'cart') setSView(currentStore ? 'catalog' : 'marketplace');
    else if (sView === 'checkout') setSView('cart');
    else if (sView === 'confirmed') { setSView('catalog'); setConfirmedOrder(null); }
    else if (sView === 'orderDetail') { setSView('orders'); setSelectedOrder(null); }
    else if (sView === 'orders') { setSView('marketplace'); }
    else if (sView === 'catalog') { setSView('marketplace'); setCurrentStore(null); setSearch(''); }
    else onBack();
  };

  const deliveryLabel = (m) => ({ pickup: _t('webapp.store_pickup'), delivery: _t('webapp.store_delivery'), digital: _t('webapp.store_digital') }[m] || m);
  const paymentLabel = (m) => ({ sisp: 'NhaBex Pay', transfer: 'Transferência' }[m] || m);

  const loadMyOrders = () => {
    if (!signedIn) return;
    setOrdersLoading(true);
    API.get('/client/store/orders').then(r => {
      if (r.message === 'success') setMyOrders(Array.isArray(r.data) ? r.data : []);
    }).catch(() => {}).finally(() => setOrdersLoading(false));
  };

  const openMyOrders = () => { setSView('orders'); loadMyOrders(); };

  const orderStatusMeta = {
    pending:    { icon: 'clock',    color: '#f59e0b', label: _t('webapp.store_status_pending') || 'Pendente' },
    confirmed:  { icon: 'check',    color: 'var(--nb-green)', label: _t('webapp.store_status_confirmed') || 'Confirmada' },
    processing: { icon: 'package',  color: '#3b82f6', label: _t('webapp.store_status_processing') || 'Em preparação' },
    ready:      { icon: 'boxCheck', color: '#8b5cf6', label: _t('webapp.store_status_ready') || 'Pronta' },
    delivered:  { icon: 'check',    color: 'var(--nb-green)', label: _t('webapp.store_status_delivered') || 'Entregue' },
    cancelled:  { icon: 'cross',    color: '#ef4444', label: _t('webapp.store_status_cancelled') || 'Cancelada' },
  };

  const orderSteps = ['pending', 'confirmed', 'processing', 'ready', 'delivered'];
  const getStepIndex = (status) => orderSteps.indexOf(status);
  const fmtOrderDate = (iso) => { if (!iso) return ''; const d = new Date(iso); return d.toLocaleDateString('pt', { day: '2-digit', month: 'short', year: 'numeric', hour: '2-digit', minute: '2-digit' }); };

  // Handle external navigation (e.g. cart icon in header)
  useEffect(() => {
    if (initialView) {
      setSView(initialView);
      if (initialView === 'cart') refreshAllCarts();
      if (initialView === 'orders') loadMyOrders();
      onInitialViewConsumed && onInitialViewConsumed();
    }
  }, [initialView]);

  // Handle deep link from store.php redirect (?c=hash&p=productId) or AI chat navigation
  const [_deepLinkConsumed, _setDeepLinkConsumed] = useState(false);
  const _prevDeepLink = useRef(null);
  useEffect(() => {
    // Reset consumed flag when deep link params change (e.g. from AI chat)
    const key = (deepLinkStoreHash || '') + ':' + (deepLinkProductId || '');
    if (_prevDeepLink.current && _prevDeepLink.current !== key) {
      _setDeepLinkConsumed(false);
    }
    _prevDeepLink.current = key;
  }, [deepLinkStoreHash, deepLinkProductId]);
  useEffect(() => {
    if (_deepLinkConsumed || !deepLinkStoreHash || loading) return;
    const store = stores.find(s => s.hash === deepLinkStoreHash);
    if (!store) return;
    _setDeepLinkConsumed(true);
    onDeepLinkConsumed && onDeepLinkConsumed();
    // Open specific store catalog
    setCurrentStore(store);
    setSView('catalog');
    // Load store data
    Promise.all([
      API.get('/store/' + store.hash + '/settings'),
      API.get('/store/' + store.hash + '/categories'),
      API.get('/store/' + store.hash + '/products'),
    ]).then(([settingsRes, catsRes, prodsRes]) => {
      if (settingsRes.message === 'success') setStoreSettings(settingsRes.data);
      if (catsRes.message === 'success') setCategories(catsRes.data);
      if (prodsRes.message === 'success') {
        setProducts(prodsRes.data);
        // Open specific product if deep link has product ID
        if (deepLinkProductId) {
          const product = prodsRes.data.find(p => String(p.ID) === String(deepLinkProductId));
          if (product && onSelectProduct) {
            onSelectProduct(product, { ...store, settings: settingsRes.data });
          } else if (product) {
            setSelectedProduct(product);
            setSView('detail');
          }
        }
      }
    }).catch(() => {});
  }, [loading, stores, deepLinkStoreHash]);

  return (
    <div className="store-view">
      <div className="detail-head">
        <button className="back-btn" onClick={sView === 'marketplace' ? onBack : storeGoBack} title={sView === 'cart' ? (_t('webapp.store_back_to_shop') || 'Voltar à loja') : sView === 'checkout' ? (_t('webapp.store_back_to_cart') || 'Voltar ao carrinho') : _t('webapp.back')}><Ico name="arrowL" /></button>
        <div className="titles">
          <h1>{sView === 'marketplace' ? _t('webapp.store_shop') : sView === 'cart' && !currentStore ? _t('webapp.store_cart') : sView === 'confirmed' ? _t('webapp.store_order_confirmed_title') : sView === 'orders' || sView === 'orderDetail' ? (_t('webapp.store_my_orders') || 'Minhas Encomendas') : currentStore?.name || _t('webapp.store_shop')}</h1>
          {sView === 'marketplace' && <p>{marketplaceProducts.length} {_t('webapp.store_products')}{selectedStoreFilter ? '' : ` · ${stores.length} ${_t('webapp.store_shops')}`}</p>}
          {sView === 'catalog' && <p>{filteredProducts.length} {_t('webapp.store_products')}</p>}
          {sView === 'cart' && <p>{(currentStore ? cartCount : allCartsCount)} {(currentStore ? cartCount : allCartsCount) === 1 ? (_t('webapp.store_item_singular') || 'item') : _t('webapp.store_items')} · {(currentStore ? cartTotal : allCartsTotal).toLocaleString('pt')} {currentStore ? currency : 'CVE'}</p>}
        </div>
        {(sView === 'catalog' || sView === 'marketplace') && (
          <div style={{ display: 'flex', gap: 6 }}>
            {signedIn && (
              <button className="str-cart-btn" onClick={openMyOrders} title={_t('webapp.store_my_orders') || 'Minhas Encomendas'}>
                <Ico name="package" size={16} />
              </button>
            )}
            <button className="str-cart-btn" onClick={() => {
              if (sView === 'marketplace') refreshAllCarts();
              setSView('cart');
            }} style={{ position: 'relative' }}>
              <Ico name="store" size={16} />
              {(sView === 'marketplace' ? allCartsCount : cartCount) > 0 && <span className="str-cart-badge">{sView === 'marketplace' ? allCartsCount : cartCount}</span>}
            </button>
          </div>
        )}
      </div>

      {loading ? <SkeletonRows count={6} /> : (
        <>
          {/* MARKETPLACE */}
          {sView === 'marketplace' && (
            <div className="str-marketplace">
              {/* Search */}
              <div className="str-search">
                <Ico name="search" size={14} />
                <input type="text" placeholder={_t('webapp.store_search_placeholder')} value={search}
                  onChange={e => setSearch(e.target.value)} />
              </div>
              {/* Store filter chips */}
              {stores.length > 1 && (
                <div className="str-cats">
                  <button className={`tk-tab ${!selectedStoreFilter ? 'on' : ''}`} onClick={() => setSelectedStoreFilter(null)}>Todas</button>
                  {stores.map(s => (
                    <button key={s.hash} className={`tk-tab ${selectedStoreFilter === s.hash ? 'on' : ''}`} onClick={() => setSelectedStoreFilter(s.hash)}>
                      {s.name}
                    </button>
                  ))}
                </div>
              )}
              {/* Products grid */}
              <div className="str-products">
                {marketplaceProducts.map(p => {
                  const pStore = stores.find(s => s.hash === p._storeHash);
                  return (
                  <button key={p.ID + '-' + p._storeHash} className="str-product-card" onClick={() => {
                    setSelectedProduct(p); setQty(1); setDetailImgIdx(0);
                    if (onSelectProduct) onSelectProduct(p, { ...pStore, currency: p._storeCurrency });
                  }}>
                    <div style={{ position: 'relative' }}>
                      {p.ImageURL ? (
                        <img src={p.ImageURL} alt="" className="str-product-img" onError={e => { e.target.onerror = null; e.target.src = STORE_DEFAULT_IMG; e.target.classList.add('str-product-img--default'); }} />
                      ) : (
                        <img src={STORE_DEFAULT_IMG} alt="" className="str-product-img str-product-img--default" />
                      )}
                      {p.Images && p.Images.length > 1 && (
                        <span title={p.Images.length + ' fotos'} style={{ position: 'absolute', bottom: 6, right: 6, padding: '2px 6px', borderRadius: 4, background: 'rgba(0,0,0,0.55)', color: '#fff', fontSize: 10, fontWeight: 600, display: 'flex', alignItems: 'center', gap: 3 }}>
                          <Ico name="grid" size={10} /> {p.Images.length}
                        </span>
                      )}
                      {p.Stock !== null && p.Stock <= 0 && (
                        <div style={{ position: 'absolute', inset: 0, background: 'rgba(0,0,0,0.4)', borderRadius: 'inherit', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                          <span style={{ padding: '4px 10px', borderRadius: 6, background: 'var(--nb-danger)', color: '#fff', fontSize: 11, fontWeight: 600 }}>Esgotado</span>
                        </div>
                      )}
                    </div>
                    <div className="str-product-info">
                      <span className="str-product-name">{p.Name}</span>
                      <span className="str-product-price">{parseFloat(p.Price).toLocaleString('pt')} {p._storeCurrency || 'CVE'}</span>
                      {!selectedStoreFilter && <span style={{ fontSize: 11, color: 'var(--d-fg-3)' }}>{p._storeName}</span>}
                    </div>
                  </button>
                  ); })}
                {marketplaceProducts.length === 0 && !loading && (
                  <div style={{ gridColumn: '1/-1', padding: 40, textAlign: 'center', color: 'var(--d-fg-3)' }}>{_t('webapp.store_no_products')}</div>
                )}
              </div>
            </div>
          )}

          {/* CATALOG */}
          {sView === 'catalog' && (
            <>
              {/* Search */}
              <div className="str-search">
                <Ico name="search" size={14} />
                <input type="text" placeholder={_t('webapp.store_search_placeholder')} value={search} ref={searchRef}
                  onChange={e => setSearch(e.target.value)} />
              </div>
              {/* Categories */}
              {categories.length > 0 && (
                <div className="str-cats">
                  <button className={`tk-tab ${!selectedCat ? 'on' : ''}`} onClick={() => setSelectedCat(null)}>Todos</button>
                  {categories.map(c => (
                    <button key={c.ID} className={`tk-tab ${selectedCat == c.ID ? 'on' : ''}`} onClick={() => setSelectedCat(c.ID)}>
                      {c.Name}
                    </button>
                  ))}
                </div>
              )}
              {/* Product grid */}
              <div className="str-products">
                {filteredProducts.map(p => (
                  <button key={p.ID} className="str-product-card" onClick={() => { setSelectedProduct(p); setQty(1); setDetailImgIdx(0); if (onSelectProduct) onSelectProduct(p, { ...currentStore, settings: storeSettings }); else setSView('detail'); }}>
                    <div style={{ position: 'relative' }}>
                      {p.ImageURL ? (
                        <img src={p.ImageURL} alt="" className="str-product-img" onError={e => { e.target.onerror = null; e.target.src = STORE_DEFAULT_IMG; e.target.classList.add('str-product-img--default'); }} />
                      ) : (
                        <img src={STORE_DEFAULT_IMG} alt="" className="str-product-img str-product-img--default" />
                      )}
                      {/* Image count badge */}
                      {p.Images && p.Images.length > 1 && (
                        <span title={p.Images.length + ' fotos'} style={{ position: 'absolute', bottom: 6, right: 6, padding: '2px 6px', borderRadius: 4, background: 'rgba(0,0,0,0.55)', color: '#fff', fontSize: 10, fontWeight: 600, display: 'flex', alignItems: 'center', gap: 3 }}>
                          <Ico name="grid" size={10} /> {p.Images.length}
                        </span>
                      )}
                      {/* Out of stock overlay */}
                      {p.Stock !== null && p.Stock <= 0 && (
                        <div style={{ position: 'absolute', inset: 0, background: 'rgba(0,0,0,0.4)', borderRadius: 'inherit', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                          <span style={{ padding: '4px 10px', borderRadius: 6, background: 'var(--nb-danger)', color: '#fff', fontSize: 11, fontWeight: 600 }}>Esgotado</span>
                        </div>
                      )}
                    </div>
                    <div className="str-product-info">
                      <span className="str-product-name">{p.Name}</span>
                      <span className="str-product-price">{parseFloat(p.Price).toLocaleString('pt')} {currency}</span>
                      {p.Rating && <span style={{ fontSize: 11, color: '#f5a623' }}>{'\u2605'} {p.Rating}</span>}
                    </div>
                  </button>
                ))}
                {filteredProducts.length === 0 && (
                  <div style={{ gridColumn: '1/-1', padding: 40, textAlign: 'center', color: 'var(--d-fg-3)' }}>{_t('webapp.store_no_products')}</div>
                )}
              </div>
            </>
          )}

          {/* PRODUCT DETAIL */}
          {sView === 'detail' && selectedProduct && (() => {
            const detailImages = selectedProduct.Images || [];
            return (
            <div className="str-detail">
              {detailImages.length > 0 ? (
                <div style={{ position: 'relative', borderRadius: 12, overflow: 'hidden' }}>
                  <img src={detailImages[detailImgIdx]} alt="" className="str-detail-img" style={{ objectFit: 'cover' }} />
                  {detailImages.length > 1 && (
                    <>
                      <button onClick={() => setDetailImgIdx((detailImgIdx - 1 + detailImages.length) % detailImages.length)}
                        style={{ position: 'absolute', left: 6, top: '50%', transform: 'translateY(-50%)', width: 28, height: 28, borderRadius: '50%', background: 'rgba(0,0,0,0.45)', color: '#fff', border: 'none', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                        <Ico name="arrowL" size={14} />
                      </button>
                      <button onClick={() => setDetailImgIdx((detailImgIdx + 1) % detailImages.length)}
                        style={{ position: 'absolute', right: 6, top: '50%', transform: 'translateY(-50%)', width: 28, height: 28, borderRadius: '50%', background: 'rgba(0,0,0,0.45)', color: '#fff', border: 'none', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                        <Ico name="chevR" size={14} />
                      </button>
                      <div style={{ position: 'absolute', bottom: 8, left: 0, right: 0, display: 'flex', justifyContent: 'center', gap: 5 }}>
                        {detailImages.map((_, i) => (
                          <div key={i} onClick={() => setDetailImgIdx(i)}
                            style={{ width: 7, height: 7, borderRadius: '50%', background: i === detailImgIdx ? '#fff' : 'rgba(255,255,255,0.45)', cursor: 'pointer', boxShadow: '0 1px 3px rgba(0,0,0,0.3)' }} />
                        ))}
                      </div>
                    </>
                  )}
                </div>
              ) : selectedProduct.ImageURL ? (
                <img src={selectedProduct.ImageURL} alt="" className="str-detail-img" onError={e => { e.target.onerror = null; e.target.src = STORE_DEFAULT_IMG; e.target.classList.add('str-product-img--default'); }} />
              ) : (
                <img src={STORE_DEFAULT_IMG} alt="" className="str-detail-img str-product-img--default" />
              )}
              <h2 className="str-detail-name">{selectedProduct.Name}</h2>
              <span className="str-detail-price">{parseFloat(selectedProduct.Price).toLocaleString('pt')} {currency}</span>
              {selectedProduct.Description && <p className="str-detail-desc">{selectedProduct.Description}</p>}
              {selectedProduct.Stock !== null && <p className="str-detail-stock">{selectedProduct.Stock > 0 ? `${selectedProduct.Stock} em stock` : 'Esgotado'}</p>}
              <div className="str-qty-row">
                <button className="str-qty-btn" onClick={() => setQty(Math.max(1, qty - 1))}>-</button>
                <span className="str-qty-val">{qty}</span>
                <button className="str-qty-btn" onClick={() => { if (selectedProduct.Stock === null || qty < selectedProduct.Stock) setQty(qty + 1); }}>+</button>
              </div>
              <button className="pay-btn-primary" style={{ width: '100%', justifyContent: 'center', marginTop: 12 }}
                disabled={selectedProduct.Stock !== null && selectedProduct.Stock <= 0}
                onClick={() => { addToCart(selectedProduct, qty); setSView('catalog'); }}>
                <Ico name="store" size={14} /> {_t('webapp.store_add_to_cart') || 'Adicionar'}
              </button>
            </div>
            );
          })()}

          {/* CART */}
          {sView === 'cart' && (() => {
            const isMarketplace = !currentStore;
            const displayCart = isMarketplace ? allCarts : cart;
            const displayTotal = isMarketplace ? allCartsTotal : cartTotal;
            const displayCount = isMarketplace ? allCartsCount : cartCount;
            const displayCurrency = isMarketplace ? 'CVE' : currency;

            const updateMarketplaceQty = (item, delta) => {
              try {
                const key = 'nhabex_store_cart_' + item._storeHash;
                let items = JSON.parse(localStorage.getItem(key) || '[]');
                const idx = items.findIndex(i => i.productId === item.productId);
                if (idx === -1) return;
                items[idx].qty += delta;
                if (items[idx].qty <= 0) items.splice(idx, 1);
                localStorage.setItem(key, JSON.stringify(items));
                refreshAllCarts();
              } catch {}
            };

            const removeMarketplaceItem = (item) => {
              try {
                const key = 'nhabex_store_cart_' + item._storeHash;
                let items = JSON.parse(localStorage.getItem(key) || '[]').filter(i => i.productId !== item.productId);
                localStorage.setItem(key, JSON.stringify(items));
                refreshAllCarts();
              } catch {}
            };

            // Group by store for marketplace
            const storeGroups = isMarketplace ? displayCart.reduce((acc, item) => {
              const key = item._storeHash || 'default';
              if (!acc[key]) acc[key] = { name: item._storeName || 'Loja', currency: item._storeCurrency || 'CVE', id: item._storeId, items: [] };
              acc[key].items.push(item);
              return acc;
            }, {}) : null;

            return (
            <div className="str-cart">
              {displayCart.length === 0 ? (
                <div style={{ padding: 40, textAlign: 'center', color: 'var(--d-fg-3)', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12 }}>
                  <Ico name="store" size={40} style={{ opacity: 0.3 }} />
                  <span>{_t('webapp.store_cart_empty')}</span>
                  <button className="pay-btn-outline" style={{ marginTop: 4 }} onClick={() => setSView('catalog')}>{_t('webapp.store_continue_shopping') || 'Continuar a comprar'}</button>
                </div>
              ) : (
                <>
                  {isMarketplace ? (
                    Object.entries(storeGroups).map(([hash, group]) => (
                      <div key={hash} style={{ marginBottom: 16 }}>
                        <div style={{ fontSize: '0.8rem', fontWeight: 600, color: 'var(--d-fg-2)', marginBottom: 8, paddingBottom: 6, borderBottom: '1px solid var(--d-border)' }}>{group.name}</div>
                        {group.items.map(item => (
                          <div key={item.productId} className="str-cart-item">
                            {item.imageURL ? <img src={item.imageURL} alt="" className="str-cart-thumb" onError={e => { e.target.onerror = null; e.target.src = STORE_DEFAULT_IMG; e.target.classList.add('str-product-img--default'); }} /> : <img src={STORE_DEFAULT_IMG} alt="" className="str-cart-thumb str-product-img--default" />}
                            <div className="str-cart-item-info">
                              <span className="str-cart-item-name">{item.name}</span>
                              <span className="str-cart-item-price">{(item.price * item.qty).toLocaleString('pt')} {group.currency}</span>
                            </div>
                            <div className="str-qty-row str-qty-row--sm">
                              <button className="str-qty-btn" onClick={() => updateMarketplaceQty(item, -1)}>-</button>
                              <span className="str-qty-val">{item.qty}</span>
                              <button className="str-qty-btn" onClick={() => updateMarketplaceQty(item, 1)}>+</button>
                            </div>
                            <button className="str-remove-btn" onClick={() => removeMarketplaceItem(item)} title={_t('webapp.store_remove') || 'Remover'}><Ico name="trash" size={14} /></button>
                          </div>
                        ))}
                      </div>
                    ))
                  ) : (
                    cart.map(item => (
                      <div key={item.productId} className="str-cart-item">
                        {item.imageURL ? <img src={item.imageURL} alt="" className="str-cart-thumb" onError={e => { e.target.onerror = null; e.target.src = STORE_DEFAULT_IMG; e.target.classList.add('str-product-img--default'); }} /> : <img src={STORE_DEFAULT_IMG} alt="" className="str-cart-thumb str-product-img--default" />}
                        <div className="str-cart-item-info">
                          <span className="str-cart-item-name">{item.name}</span>
                          <span className="str-cart-item-price">{(item.price * item.qty).toLocaleString('pt')} {currency}</span>
                        </div>
                        <div className="str-qty-row str-qty-row--sm">
                          <button className="str-qty-btn" onClick={() => updateCartQty(item.productId, -1)}>-</button>
                          <span className="str-qty-val">{item.qty}</span>
                          <button className="str-qty-btn" onClick={() => updateCartQty(item.productId, 1)}>+</button>
                        </div>
                        <button className="str-remove-btn" onClick={() => removeFromCart(item.productId)} title={_t('webapp.store_remove') || 'Remover'}><Ico name="trash" size={14} /></button>
                      </div>
                    ))
                  )}
                  <div className="str-cart-total">
                    <span>{_t('webapp.store_total')}</span>
                    <span>{displayTotal.toLocaleString('pt')} {displayCurrency}</span>
                  </div>
                  {!isMarketplace && (
                    <button className="pay-btn-primary" style={{ width: '100%', justifyContent: 'center' }} disabled={checkingOut} onClick={goCheckout}>
                      {checkingOut ? <><span className="btn-spinner" /> {_t('webapp.store_processing') || 'A processar...'}</> : <>{_t('webapp.store_checkout') || 'Finalizar compra'} · {displayTotal.toLocaleString('pt')} {displayCurrency}</>}
                    </button>
                  )}
                  {isMarketplace && Object.keys(storeGroups).length === 1 && (
                    <button className="pay-btn-primary" style={{ width: '100%', justifyContent: 'center' }} disabled={checkingOut} onClick={async () => {
                      const hash = Object.keys(storeGroups)[0];
                      const s = stores.find(st => st.hash === hash);
                      if (!s) return;
                      setCheckingOut(true);
                      // Load store and go directly to checkout
                      setCurrentStore(s);
                      setSelectedCat(null);
                      setSearch('');
                      try { const c = JSON.parse(localStorage.getItem('nhabex_store_cart_' + s.hash) || '[]'); setCart(Array.isArray(c) ? c : []); } catch { setCart([]); }
                      try {
                        const [settingsRes, catsRes, prodsRes] = await Promise.all([
                          API.get('/store/' + s.hash + '/settings'),
                          API.get('/store/' + s.hash + '/categories'),
                          API.get('/store/' + s.hash + '/products'),
                        ]);
                        if (settingsRes.message === 'success') {
                          const ss = settingsRes.data || {};
                          ss.paymentMethods = ['sisp'];
                          setStoreSettings(ss);
                          if (ss.bankDetails) setBankDetails(ss.bankDetails);
                          setCheckoutForm(f => ({ ...f, paymentMethod: f.paymentMethod || 'sisp' }));
                        }
                        if (catsRes.message === 'success') setCategories(Array.isArray(catsRes.data) ? catsRes.data : []);
                        if (prodsRes.message === 'success') setProducts(Array.isArray(prodsRes.data) ? prodsRes.data : []);
                      } catch {}
                      // Pre-fill user info
                      if (user) {
                        setCheckoutForm(f => ({ ...f, clientName: f.clientName || user.name || '', clientEmail: f.clientEmail || user.email || '', clientPhone: f.clientPhone || user.phone || '' }));
                      }
                      setCheckingOut(false);
                      setSView('checkout');
                    }}>
                      {checkingOut ? <><span className="btn-spinner" /> {_t('webapp.store_processing') || 'A processar...'}</> : <>{_t('webapp.store_checkout') || 'Finalizar compra'} · {displayTotal.toLocaleString('pt')} {displayCurrency}</>}
                    </button>
                  )}
                  {isMarketplace && Object.keys(storeGroups).length > 1 && (
                    <p style={{ textAlign: 'center', fontSize: '0.78rem', color: 'var(--d-fg-3)', marginTop: 8 }}>
                      {_t('webapp.store_multi_store').replace(':count', Object.keys(storeGroups).length)}
                    </p>
                  )}
                </>
              )}
              {/* Suggestions: other products from same store */}
              {!isMarketplace && displayCart.length > 0 && displayCart.length <= 3 && products.length > displayCart.length && (() => {
                const cartIds = new Set(displayCart.map(i => i.productId));
                const suggestions = products.filter(p => !cartIds.has(p.ID) && (p.Stock === null || p.Stock > 0)).slice(0, 4);
                if (suggestions.length === 0) return null;
                return (
                  <div style={{ marginTop: '1.5rem', paddingTop: '1rem', borderTop: '1px solid var(--d-border)' }}>
                    <p style={{ fontSize: '0.8125rem', fontWeight: 600, color: 'var(--d-fg-2)', marginBottom: '0.625rem' }}>{_t('webapp.store_suggestions') || 'Outros produtos'}</p>
                    <div className="str-products" style={{ gridTemplateColumns: 'repeat(auto-fill, minmax(100px, 1fr))', gap: '0.5rem' }}>
                      {suggestions.map(p => (
                        <button key={p.ID} className="str-product-card" onClick={() => { setSelectedProduct(p); setQty(1); setDetailImgIdx(0); if (onSelectProduct) onSelectProduct(p, { ...currentStore, settings: storeSettings }); else setSView('detail'); }}>
                          <div style={{ position: 'relative' }}>
                            {p.ImageURL ? <img src={p.ImageURL} alt="" className="str-product-img" onError={e => { e.target.onerror = null; e.target.src = STORE_DEFAULT_IMG; e.target.classList.add('str-product-img--default'); }} /> : <img src={STORE_DEFAULT_IMG} alt="" className="str-product-img str-product-img--default" />}
                          </div>
                          <div className="str-product-info">
                            <span className="str-product-name">{p.Name}</span>
                            <span className="str-product-price">{parseFloat(p.Price).toLocaleString('pt')} {currency}</span>
                          </div>
                        </button>
                      ))}
                    </div>
                  </div>
                );
              })()}
            </div>
            );
          })()}

          {/* CHECKOUT */}
          {sView === 'checkout' && !canCheckout() && (
            <div style={{ padding: '3rem 1rem', textAlign: 'center' }}>
              <Ico name="user" size={40} />
              <h2 style={{ color: 'var(--d-fg-1)', fontWeight: 600, margin: '16px 0 8px' }}>{_t('webapp.store_login_title')}</h2>
              <p style={{ color: 'var(--d-fg-3)', fontSize: '0.875rem' }}>{_t('webapp.store_login_desc')}</p>
              <button className="pay-btn-outline" style={{ marginTop: 20 }} onClick={() => setSView('cart')}>{_t('webapp.store_back_to_cart')}</button>
            </div>
          )}
          {sView === 'checkout' && canCheckout() && (
            <div className="str-checkout-form">
              <div className="str-checkout-section">
                <h4 className="str-checkout-section-title"><Ico name="user" size={14} /> {_t('webapp.store_client_info') || 'Dados pessoais'}</h4>
                <div className="str-checkout-field">
                  <label className="pay-label">Nome</label>
                  <input className="pay-input" value={checkoutForm.clientName}
                    onChange={e => setCheckoutForm(f => ({ ...f, clientName: e.target.value }))} placeholder={_t('webapp.store_name_placeholder') || 'O teu nome'} />
                </div>
                <div className="str-checkout-field">
                  <label className="pay-label">Email</label>
                  <input className="pay-input" type="email" value={checkoutForm.clientEmail}
                    onChange={e => setCheckoutForm(f => ({ ...f, clientEmail: e.target.value }))} placeholder="email@exemplo.com" />
                </div>
                <div className="str-checkout-field">
                  <label className="pay-label">Telefone</label>
                  <input className="pay-input" type="tel" value={checkoutForm.clientPhone}
                    onChange={e => setCheckoutForm(f => ({ ...f, clientPhone: e.target.value }))} placeholder="+238..." />
                </div>
              </div>

              {storeSettings.deliveryMethods && storeSettings.deliveryMethods.length > 0 && (
                <div className="str-checkout-section">
                  <h4 className="str-checkout-section-title"><Ico name="pin" size={14} /> {_t('webapp.store_delivery')}</h4>
                  <div className="pay-presets">
                    {storeSettings.deliveryMethods.map(m => (
                      <button key={m} className={`pay-preset ${checkoutForm.deliveryMethod === m ? 'pay-preset--on' : ''}`}
                        onClick={() => setCheckoutForm(f => ({ ...f, deliveryMethod: m }))}>{deliveryLabel(m)}</button>
                    ))}
                  </div>
                  {checkoutForm.deliveryMethod === 'delivery' && (
                    <>
                      <div className="str-checkout-field" style={{ marginTop: 10 }}>
                        <label className="pay-label">{_t('webapp.store_delivery_address')}</label>
                        <input className="pay-input" value={checkoutForm.deliveryAddress}
                          onChange={e => setCheckoutForm(f => ({ ...f, deliveryAddress: e.target.value }))} placeholder={_t('webapp.store_address_placeholder') || 'Endereço de entrega'} />
                      </div>
                      <div ref={svMapContainerRef} style={{ width: '100%', height: 240, borderRadius: 10, marginTop: 10, background: 'var(--d-bg-2)', border: '1px solid var(--d-border-1)' }} />
                      <p style={{ fontSize: 11, color: 'var(--d-fg-3)', margin: '6px 0 0' }}>
                        {deliveryCoordsStore ? `Localização seleccionada (${deliveryCoordsStore.lat.toFixed(5)}, ${deliveryCoordsStore.lng.toFixed(5)})` : 'Toca no mapa para indicar o local de entrega'}
                      </p>
                      {deliveryFeeStore > 0 && (
                        <div style={{ marginTop: 8, padding: '6px 10px', background: 'rgba(2,165,134,0.08)', borderRadius: 8, fontSize: 13 }}>
                          <Ico name="pin" size={12} /> Taxa de entrega: <strong>{deliveryFeeStore.toLocaleString('pt')} {currency}</strong>
                        </div>
                      )}
                    </>
                  )}
                </div>
              )}

              {storeSettings.paymentMethods && storeSettings.paymentMethods.length > 1 && (
                <div className="str-checkout-section">
                  <h4 className="str-checkout-section-title"><Ico name="wallet" size={14} /> {_t('webapp.store_payment') || 'Pagamento'}</h4>
                  <div className="pay-presets">
                    {storeSettings.paymentMethods.map(m => (
                      <button key={m} className={`pay-preset ${checkoutForm.paymentMethod === m ? 'pay-preset--on' : ''}`}
                        onClick={() => setCheckoutForm(f => ({ ...f, paymentMethod: m }))}>{paymentLabel(m)}</button>
                    ))}
                  </div>
                </div>
              )}

              <div className="str-checkout-section">
                <div className="str-checkout-field">
                  <label className="pay-label">{_t('webapp.wash_notes_optional')}</label>
                  <input className="pay-input" value={checkoutForm.notes}
                    onChange={e => setCheckoutForm(f => ({ ...f, notes: e.target.value }))} placeholder={_t('webapp.store_notes_placeholder') || 'Alguma observação?'} />
                </div>
              </div>

              <div className="str-checkout-fees-breakdown" style={{ fontSize: 13, color: 'var(--d-fg-2)', margin: '12px 0 4px' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', padding: '3px 0' }}>
                  <span>Subtotal</span>
                  <span>{cartTotal.toLocaleString('pt')} {currency}</span>
                </div>
                {checkoutForm.deliveryMethod === 'delivery' && deliveryFeeStore > 0 && (
                  <div style={{ display: 'flex', justifyContent: 'space-between', padding: '3px 0' }}>
                    <span>Taxa de entrega</span>
                    <span>{deliveryFeeStore.toLocaleString('pt')} {currency}</span>
                  </div>
                )}
                {platformFeeStore > 0 && (
                  <div style={{ display: 'flex', justifyContent: 'space-between', padding: '3px 0' }}>
                    <span>Taxa de serviço</span>
                    <span>{platformFeeStore.toLocaleString('pt')} {currency}</span>
                  </div>
                )}
              </div>

              <div className="str-checkout-total-bar">
                <span>{_t('webapp.store_total')}</span>
                <span className="str-checkout-total-value">{(cartTotal + (checkoutForm.deliveryMethod === 'delivery' ? deliveryFeeStore : 0) + platformFeeStore).toLocaleString('pt')} {currency}</span>
              </div>

              <div className="str-checkout-actions">
                <button className="pay-btn-outline" onClick={() => setSView('cart')}>{_t('webapp.back') || 'Voltar'}</button>
                <button className="pay-btn-primary" onClick={submitOrder} disabled={submitting} style={{ flex: 1, justifyContent: 'center' }}>
                  {submitting ? <><span className="btn-spinner" /> {_t('webapp.store_processing')}</> : (<><Ico name="check" size={14} /> {_t('webapp.store_confirm_order')}</>)}
                </button>
              </div>

              <p className="str-checkout-terms">
                Ao confirmar a encomenda, concordas com os{' '}
                <a href="termos" target="_blank">Termos de Utilização</a>
                {' '}e a{' '}
                <a href="privacidade" target="_blank">Política de Privacidade</a>
                {' '}da NHABEX.
              </p>
            </div>
          )}

          {/* CONFIRMED */}
          {sView === 'confirmed' && confirmedOrder && (
            <div style={{ padding: '2rem', textAlign: 'center' }}>
              <div style={{ width: 56, height: 56, borderRadius: '50%', background: 'rgba(2,165,134,0.15)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', marginBottom: 16 }}>
                <Ico name="check" size={28} />
              </div>
              <h2 style={{ color: 'var(--d-fg-1)', fontWeight: 600, marginBottom: 8 }}>{_t('webapp.store_confirmed_title')}</h2>
              <p style={{ color: 'var(--d-fg-3)', fontSize: '0.875rem', marginBottom: 16 }}>{_t('webapp.store_confirmed_desc')}</p>

              <div className="pay-summary" style={{ textAlign: 'left' }}>
                <div className="pay-summary-row"><span>{_t('webapp.store_order_code')}</span><span style={{ fontFamily: 'monospace', fontWeight: 700, letterSpacing: 1 }}>{confirmedOrder.orderCode || confirmedOrder.order_code}</span></div>
                <div className="pay-summary-row"><span>{_t('webapp.store_order_store')}</span><span>{currentStore?.name}</span></div>
                <div className="pay-summary-row"><span>{_t('webapp.store_items')}</span><span>{confirmedOrder.items}</span></div>
                {confirmedOrder.delivery && <div className="pay-summary-row"><span>{_t('webapp.store_order_delivery')}</span><span>{deliveryLabel(confirmedOrder.delivery)}</span></div>}
                {confirmedOrder.payment && <div className="pay-summary-row"><span>{_t('webapp.store_order_payment')}</span><span>{paymentLabel(confirmedOrder.payment)}</span></div>}
                <div className="pay-summary-row pay-summary-total">
                  <span>{_t('webapp.store_total')}</span>
                  <span>{confirmedOrder.total ? parseFloat(confirmedOrder.total).toLocaleString('pt') + ' ' + currency : '—'}</span>
                </div>
              </div>

              <p style={{ fontSize: 11, color: 'var(--d-fg-3)', marginTop: 12 }}>
                {_t('webapp.store_confirmed_tip')}
              </p>

              <button className="pay-btn-primary" style={{ marginTop: 20, width: '100%', justifyContent: 'center' }} onClick={() => { setSView('catalog'); setConfirmedOrder(null); }}>
                {_t('webapp.store_continue_shopping')}
              </button>
              {signedIn && (
                <button className="pay-btn-outline" style={{ marginTop: 8, width: '100%', justifyContent: 'center' }} onClick={openMyOrders}>
                  <Ico name="package" size={14} /> {_t('webapp.store_my_orders') || 'Minhas Encomendas'}
                </button>
              )}
            </div>
          )}

          {/* MY ORDERS LIST */}
          {sView === 'orders' && (
            <div style={{ padding: '0.5rem 0' }}>
              {ordersLoading ? <SkeletonRows count={4} /> : myOrders.length === 0 ? (
                <div style={{ padding: '3rem 1rem', textAlign: 'center' }}>
                  <div style={{ width: 56, height: 56, borderRadius: '50%', background: 'rgba(2,165,134,0.08)', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 12px', color: 'var(--d-fg-3)' }}><Ico name="package" size={24} /></div>
                  <p style={{ fontWeight: 600, color: 'var(--d-fg-1)', margin: '0 0 4px' }}>{_t('webapp.store_no_orders') || 'Sem encomendas'}</p>
                  <p style={{ fontSize: '0.75rem', color: 'var(--d-fg-3)', margin: 0 }}>{_t('webapp.store_no_orders_hint') || 'As tuas encomendas aparecerão aqui.'}</p>
                </div>
              ) : (
                <div className="gm-list">
                  {myOrders.map(o => {
                    const st = orderStatusMeta[o.status] || orderStatusMeta.pending;
                    const thumbs = (o.items || []).filter(i => i.image).slice(0, 3);
                    return (
                      <div key={o.id} className="gm-card" style={{ cursor: 'pointer' }} onClick={() => { setSelectedOrder(o); setSView('orderDetail'); }}>
                        {thumbs.length > 0 ? (
                          <div style={{ display: 'flex', flexShrink: 0 }}>
                            {thumbs.map((t, i) => (
                              <img key={i} src={t.image} alt="" style={{ width: 40, height: 40, borderRadius: 8, objectFit: 'cover', border: '2px solid var(--d-bg-surface)', marginLeft: i > 0 ? -10 : 0, position: 'relative', zIndex: thumbs.length - i }} referrerPolicy="no-referrer" />
                            ))}
                            {o.items_count > 3 && <span style={{ width: 40, height: 40, borderRadius: 8, background: 'var(--d-bg-surface-3)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '0.625rem', fontWeight: 700, color: 'var(--d-fg-3)', marginLeft: -10, position: 'relative', zIndex: 0, border: '2px solid var(--d-bg-surface)' }}>+{o.items_count - 3}</span>}
                          </div>
                        ) : (
                          <div className="gm-card-icon" style={{ background: st.color === 'var(--nb-green)' ? 'rgba(2,165,134,0.13)' : st.color + '22', color: st.color }}>
                            <Ico name={st.icon} size={18} />
                          </div>
                        )}
                        <div className="gm-card-info">
                          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                            <span className="gm-card-name" style={{ fontFamily: 'monospace', letterSpacing: 0.5 }}>{o.order_code}</span>
                            <span className="gm-status" style={{ background: st.color === 'var(--nb-green)' ? 'rgba(2,165,134,0.13)' : st.color + '22', color: st.color }}>{st.label}</span>
                          </div>
                          <span className="gm-card-sub">{o.store_name} · {o.items_count} {o.items_count === 1 ? 'item' : 'itens'} · {o.total.toLocaleString('pt')} {o.currency}</span>
                          <span className="gm-card-sub">{fmtOrderDate(o.created_at)}</span>
                        </div>
                        <Ico name="chevR" size={14} />
                      </div>
                    );
                  })}
                </div>
              )}
            </div>
          )}

          {/* ORDER DETAIL + TRACKING */}
          {sView === 'orderDetail' && selectedOrder && (() => {
            const o = selectedOrder;
            const st = orderStatusMeta[o.status] || orderStatusMeta.pending;
            const currentStep = getStepIndex(o.status);
            const isCancelled = o.status === 'cancelled';
            const timestamps = {
              pending: o.created_at,
              confirmed: o.confirmed_at,
              processing: o.confirmed_at,
              ready: o.ready_at,
              delivered: o.delivered_at,
            };
            return (
              <div style={{ padding: '0.5rem 0' }}>
                {/* Payment success banner */}
                {o.payment_status === 'paid' && o.status === 'pending' && (
                  <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '12px 16px', borderRadius: 12, background: 'rgba(2,165,134,0.08)', border: '1px solid rgba(2,165,134,0.2)', marginBottom: 12 }}>
                    <Ico name="check" size={20} />
                    <div>
                      <div style={{ fontWeight: 600, fontSize: '0.875rem', color: 'var(--nb-green)' }}>{_t('webapp.store_payment_confirmed')}</div>
                      <div style={{ fontSize: '0.75rem', color: 'var(--d-fg-3)' }}>{_t('webapp.store_confirmed_tip')}</div>
                    </div>
                  </div>
                )}

                {/* Status header */}
                <div style={{ textAlign: 'center', padding: '1.5rem 1rem 1rem' }}>
                  <div style={{ width: 56, height: 56, borderRadius: '50%', background: st.color === 'var(--nb-green)' ? 'rgba(2,165,134,0.15)' : st.color + '22', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', marginBottom: 10 }}>
                    <Ico name={st.icon} size={28} />
                  </div>
                  <h3 style={{ margin: '0 0 2px', fontWeight: 700, color: 'var(--d-fg-1)' }}>{st.label}</h3>
                  <p style={{ fontSize: '0.75rem', color: 'var(--d-fg-3)', margin: 0 }}>{o.order_code} · {fmtOrderDate(o.created_at)}</p>
                </div>

                {/* Tracking timeline */}
                {!isCancelled && (
                  <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', padding: '1rem', margin: '0 0 0.75rem', background: 'var(--d-bg-surface)', borderRadius: 12, border: '1px solid var(--d-border)' }}>
                    {orderSteps.map((step, i) => {
                      const meta = orderStatusMeta[step];
                      const done = i <= currentStep;
                      const isActive = i === currentStep;
                      return (
                        <div key={step} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4, flex: 1, position: 'relative' }}>
                          {i > 0 && <div style={{ position: 'absolute', top: 12, right: '50%', width: '100%', height: 2, background: done ? 'var(--nb-green)' : 'var(--d-border)', zIndex: 0 }} />}
                          <div style={{
                            width: 24, height: 24, borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 1,
                            background: done ? 'var(--nb-green)' : 'var(--d-bg-surface-3)',
                            color: done ? '#013D32' : 'var(--d-fg-3)',
                            border: isActive ? '2px solid var(--nb-green)' : 'none',
                            boxShadow: isActive ? '0 0 0 3px rgba(2,165,134,0.2)' : 'none',
                          }}>
                            <Ico name={done ? 'check' : meta.icon} size={12} />
                          </div>
                          <span style={{ fontSize: '0.5625rem', color: done ? 'var(--d-fg-1)' : 'var(--d-fg-3)', fontWeight: isActive ? 700 : 400, textAlign: 'center', lineHeight: 1.2 }}>{meta.label}</span>
                          {timestamps[step] && done && <span style={{ fontSize: '0.5rem', color: 'var(--d-fg-3)' }}>{new Date(timestamps[step]).toLocaleDateString('pt', { day: '2-digit', month: 'short' })}</span>}
                        </div>
                      );
                    })}
                  </div>
                )}

                {isCancelled && (
                  <div style={{ padding: '0.75rem 1rem', margin: '0 0 0.75rem', background: 'rgba(239,68,68,0.08)', borderRadius: 12, fontSize: '0.8125rem', color: '#ef4444', textAlign: 'center', fontWeight: 600 }}>
                    {_t('webapp.store_order_cancelled_at')}{o.cancelled_at ? ` em ${fmtOrderDate(o.cancelled_at)}` : ''}
                  </div>
                )}

                {/* Order summary */}
                <div className="gm-detail-card" style={{ marginBottom: 12 }}>
                  <div className="gm-detail-row"><span>{_t('webapp.store_order_store')}</span><span>{o.store_name}</span></div>
                  <div className="gm-detail-row"><span>{_t('webapp.store_order_delivery')}</span><span>{deliveryLabel(o.delivery_method)}</span></div>
                  {o.delivery_address && <div className="gm-detail-row"><span>{_t('webapp.store_order_address')}</span><span style={{ fontSize: '0.75rem', maxWidth: 200, textAlign: 'right' }}>{o.delivery_address}</span></div>}
                  <div className="gm-detail-row"><span>{_t('webapp.store_order_payment')}</span><span>{paymentLabel(o.payment_method)}</span></div>
                  <div className="gm-detail-row"><span>{_t('webapp.store_order_payment_status')}</span><span style={{ color: o.payment_status === 'paid' ? 'var(--nb-green)' : '#f59e0b', fontWeight: 600 }}>{o.payment_status === 'paid' ? _t('webapp.store_order_paid') : o.payment_status === 'failed' ? _t('webapp.store_order_pay_failed') : _t('webapp.store_status_pending')}</span></div>
                </div>

                {/* Items list */}
                <div style={{ fontSize: '0.8125rem', fontWeight: 600, color: 'var(--d-fg-1)', marginBottom: 6, padding: '0 0.25rem' }}>{o.items_count} {o.items_count === 1 ? _t('webapp.store_order_product') : _t('webapp.store_order_products')}</div>
                <div className="gm-detail-card" style={{ marginBottom: 12, gap: 0 }}>
                  {(o.items || []).map((item, i) => (
                    <div key={i} className="gm-detail-row" style={{ gap: 10 }}>
                      {item.image ? (
                        <img src={item.image} alt="" style={{ width: 52, height: 52, borderRadius: 10, objectFit: 'cover', flexShrink: 0, cursor: 'pointer' }} referrerPolicy="no-referrer"
                             onClick={() => setOrderImageViewer({ name: item.name, images: [item.image, ...(item.images || [])].filter(Boolean), index: 0 })} />
                      ) : (
                        <div style={{ width: 52, height: 52, borderRadius: 10, background: 'var(--d-bg-surface-3)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, color: 'var(--d-fg-3)' }}><Ico name="store" size={20} /></div>
                      )}
                      <div style={{ flex: 1, minWidth: 0 }}>
                        <div style={{ fontSize: '0.8125rem', fontWeight: 600, color: 'var(--d-fg-1)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{item.name}</div>
                        <div style={{ fontSize: '0.6875rem', color: 'var(--d-fg-3)' }}>{item.qty}× {item.price.toLocaleString('pt')} {o.currency}</div>
                      </div>
                      <span style={{ fontWeight: 600, fontSize: '0.8125rem', flexShrink: 0 }}>{item.total.toLocaleString('pt')} {o.currency}</span>
                    </div>
                  ))}
                  {o.tax > 0 && <div className="gm-detail-row"><span>{_t('webapp.store_order_tax')}</span><span>{o.tax.toLocaleString('pt')} {o.currency}</span></div>}
                  <div className="gm-detail-row" style={{ fontWeight: 700, fontSize: '0.9375rem' }}><span>{_t('webapp.store_total')}</span><span style={{ color: 'var(--nb-green)' }}>{o.total.toLocaleString('pt')} {o.currency}</span></div>
                </div>

                {o.notes && (
                  <div style={{ padding: '0.625rem 0.75rem', background: 'var(--d-bg-surface-3)', borderRadius: 8, fontSize: '0.75rem', color: 'var(--d-fg-3)', marginBottom: 12 }}>
                    <strong>{_t('webapp.store_order_notes')}:</strong> {o.notes}
                  </div>
                )}

                {/* Receipt button for paid orders */}
                {o.payment_status === 'paid' && o.payment_transaction_id && (
                  <button className="pay-btn-outline" style={{ width: '100%', justifyContent: 'center', marginBottom: 8, display: 'flex', alignItems: 'center', gap: 6 }}
                    onClick={() => openReceiptByTxId(o.payment_transaction_id)}>
                    <Ico name="receipt" size={14} /> {_t('webapp.apt_receipt') || 'Ver recibo'}
                  </button>
                )}

                {/* Pay button for pending SISP payments */}
                {o.payment_status === 'pending' && o.payment_method === 'sisp' && o.status !== 'cancelled' && (
                  <button className="pay-btn-primary" style={{ width: '100%', justifyContent: 'center', marginTop: 8, padding: '14px 20px', fontSize: '0.9375rem' }}
                    onClick={async () => {
                      try {
                        setSubmitting(true);
                        localStorage.setItem('nb_store_pending_order', JSON.stringify({ orderId: o.id, orderCode: o.order_code, total: o.total }));
                        const retryOk = await initiatePaymentWithCardPicker({
                          service_type: 'store_purchase',
                          amount: parseFloat(o.total),
                          return_path: window.location.origin + window.location.pathname + '?view=store',
                          metadata: { store_order_id: o.id, order_code: o.order_code },
                        }, { serviceName: _t('webapp.store_purchase') || 'Compra na Loja', addToast });
                        if (!retryOk) {
                          setSubmitting(false);
                          localStorage.removeItem('nb_store_pending_order');
                        }
                      } catch (e) {
                        setSubmitting(false);
                        addToast && addToast(_t('webapp.error_init_payment'), 'error');
                      }
                    }}>
                    <Ico name="pay" size={18} /> {_t('webapp.store_pay_now')}
                  </button>
                )}

                {/* Cancel confirmation dialog */}
                {cancelConfirmId === o.id && (
                  <div style={{ position: 'fixed', inset: 0, zIndex: 9999, display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'rgba(0,0,0,0.45)' }}
                    onClick={() => setCancelConfirmId(null)}>
                    <div style={{ background: 'var(--d-bg-surface, #fff)', borderRadius: 16, padding: '28px 24px 20px', maxWidth: 340, width: '90%', textAlign: 'center', boxShadow: '0 8px 32px rgba(0,0,0,0.2)' }}
                      onClick={e => e.stopPropagation()}>
                      <div style={{ width: 48, height: 48, borderRadius: '50%', background: 'rgba(239,68,68,0.1)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', marginBottom: 12 }}>
                        <Ico name="close" size={24} style={{ color: '#ef4444' }} />
                      </div>
                      <h3 style={{ margin: '0 0 8px', fontSize: '1rem', fontWeight: 700, color: 'var(--d-fg-1)' }}>{_t('webapp.store_cancel_order')}?</h3>
                      <p style={{ margin: '0 0 20px', fontSize: '0.8125rem', color: 'var(--d-fg-3)', lineHeight: 1.5 }}>{_t('webapp.store_cancel_confirm')}</p>
                      <div style={{ display: 'flex', gap: 8 }}>
                        <button className="pay-btn-outline" style={{ flex: 1, justifyContent: 'center' }} onClick={() => setCancelConfirmId(null)}>
                          {_t('webapp.vl_no') || 'Não'}
                        </button>
                        <button className="pay-btn-primary" style={{ flex: 1, justifyContent: 'center', background: '#ef4444', borderColor: '#ef4444' }}
                          onClick={async () => {
                            setCancelConfirmId(null);
                            try {
                              const res = await API.post(`/client/store/orders/${o.id}/cancel`);
                              if (res.message === 'success') {
                                addToast && addToast(_t('webapp.store_order_cancelled'), 'success');
                                setSelectedOrder({ ...o, status: 'cancelled', cancelled_at: new Date().toISOString() });
                              } else {
                                addToast && addToast(res.data || _t('webapp.store_order_error'), 'error');
                              }
                            } catch (e) {
                              addToast && addToast(_t('webapp.store_comm_error'), 'error');
                            }
                          }}>
                          {_t('webapp.store_cancel_order')}
                        </button>
                      </div>
                    </div>
                  </div>
                )}

                <div style={{ display: 'flex', gap: 8, marginTop: 8 }}>
                  {o.status === 'pending' && o.payment_status !== 'paid' && (
                    <button className="pay-btn-outline" style={{ flex: 1, justifyContent: 'center', color: '#ef4444', borderColor: '#ef4444' }}
                      onClick={() => setCancelConfirmId(o.id)}>
                      <Ico name="close" size={14} /> {_t('webapp.store_cancel_order')}
                    </button>
                  )}
                  <button className="pay-btn-outline" style={{ flex: 1, justifyContent: 'center' }} onClick={() => { setSView('orders'); setSelectedOrder(null); }}>
                    <Ico name="package" size={14} /> {_t('webapp.store_my_orders')}
                  </button>
                </div>
              </div>
            );
          })()}
        </>
      )}

      {/* Order Image Viewer Overlay */}
      {orderImageViewer && (
        <div style={{ position: 'fixed', inset: 0, zIndex: 9000, background: 'rgba(0,0,0,0.92)', display: 'flex', flexDirection: 'column' }}
             onClick={e => { if (e.target === e.currentTarget) setOrderImageViewer(null); }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '12px 16px', flexShrink: 0 }}>
            <p style={{ color: '#fff', fontSize: 14, fontWeight: 600, margin: 0, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', maxWidth: 'calc(100% - 48px)' }}>{orderImageViewer.name}</p>
            <button onClick={() => setOrderImageViewer(null)} style={{ width: 36, height: 36, borderRadius: '50%', border: 'none', background: 'rgba(255,255,255,0.15)', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', flexShrink: 0 }}>
              <Ico name="cross" size={16} />
            </button>
          </div>
          <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 16, overflow: 'hidden' }}>
            <img src={orderImageViewer.images[orderImageViewer.index]} alt="" style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'contain', borderRadius: 8 }} referrerPolicy="no-referrer" />
          </div>
          {orderImageViewer.images.length > 1 && (
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8, padding: '12px 16px 24px', flexShrink: 0 }}>
              <button onClick={() => setOrderImageViewer(v => ({ ...v, index: Math.max(0, v.index - 1) }))}
                      style={{ width: 32, height: 32, borderRadius: '50%', border: 'none', background: 'rgba(255,255,255,0.15)', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer' }}>
                <Ico name="chevL" size={14} />
              </button>
              {orderImageViewer.images.map((_, di) => (
                <button key={di} onClick={() => setOrderImageViewer(v => ({ ...v, index: di }))}
                        style={{ width: 8, height: 8, borderRadius: '50%', border: 'none', cursor: 'pointer', transition: 'all 0.2s', background: orderImageViewer.index === di ? '#fff' : 'rgba(255,255,255,0.35)', transform: orderImageViewer.index === di ? 'scale(1.3)' : 'scale(1)' }} />
              ))}
              <button onClick={() => setOrderImageViewer(v => ({ ...v, index: Math.min(v.images.length - 1, v.index + 1) }))}
                      style={{ width: 32, height: 32, borderRadius: '50%', border: 'none', background: 'rgba(255,255,255,0.15)', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer' }}>
                <Ico name="chevR" size={14} />
              </button>
            </div>
          )}
        </div>
      )}
    </div>
  );
}

// ─── Notifications View ─────────────────────────────────────
const NTF_TYPE_META = {
  'ticket-called':      { icon: 'bell',     color: '#ef4444', label: 'Senha chamada' },
  'ticket-served':      { icon: 'check',    color: '#22c55e', label: 'Atendimento concluído' },
  'ticket-approaching': { icon: 'clock',    color: '#f59e0b', label: 'A tua vez aproxima-se' },
  'ticket-cancelled':   { icon: 'cross',    color: '#ef4444', label: 'Senha cancelada' },
  'ticket-redirected':  { icon: 'arrow',    color: '#8b5cf6', label: 'Senha redirecionada' },
  'queue-position':     { icon: 'list',     color: '#3b82f6', label: 'Posição na fila' },
  'eta-update':         { icon: 'clock',    color: '#8b5cf6', label: 'Tempo estimado' },
  'appointment-reminder': { icon: 'calendar', color: '#06b6d4', label: 'Lembrete de marcação' },
  'audience-update':    { icon: 'mail',     color: '#3b82f6', label: 'Atualização de audiência' },
  'noshow-evaluation':  { icon: 'star',     color: '#f59e0b', label: 'Avaliação' },
  'generic':            { icon: 'bell',     color: '#6b7280', label: 'Notificação' },
};

function NotificationsView({ onBack, signedIn }) {
  const [items, setItems] = useState([]);
  const [filter, setFilter] = useState('all');
  const [, setTick] = useState(0);

  const loadItems = () => {
    try {
      const stored = JSON.parse(localStorage.getItem(_geoKey('nb_notifications')) || '[]');
      setItems(Array.isArray(stored) ? stored : []);
    } catch { setItems([]); }
  };

  useEffect(() => {
    loadItems();
    const onStorage = (e) => { if (e.key === 'nb_notifications') loadItems(); };
    window.addEventListener('storage', onStorage);
    const timer = setInterval(() => setTick(t => t + 1), 60000);
    return () => { window.removeEventListener('storage', onStorage); clearInterval(timer); };
  }, []);

  const saveItems = (newItems) => {
    setItems(newItems);
    try { localStorage.setItem(_geoKey('nb_notifications'), JSON.stringify(newItems.slice(0, 100))); } catch {}
  };

  const markRead = (id) => saveItems(items.map(n => n.id === id ? { ...n, read: true } : n));
  const markAllRead = () => saveItems(items.map(n => ({ ...n, read: true })));
  const removeItem = (id) => saveItems(items.filter(n => n.id !== id));
  const clearAll = () => saveItems([]);

  const getMeta = (type) => NTF_TYPE_META[type] || NTF_TYPE_META.generic;

  const timeAgo = (ts) => {
    if (!ts) return '';
    const diff = Math.floor((Date.now() - new Date(ts).getTime()) / 1000);
    if (diff < 60) return 'agora';
    if (diff < 3600) return `${Math.floor(diff / 60)}min`;
    if (diff < 86400) return `${Math.floor(diff / 3600)}h`;
    if (diff < 604800) return `${Math.floor(diff / 86400)}d`;
    return new Date(ts).toLocaleDateString('pt');
  };

  const today = new Date().toDateString();
  const yesterdayDate = new Date(); yesterdayDate.setDate(yesterdayDate.getDate() - 1);
  const yesterdayStr = yesterdayDate.toDateString();

  let filtered = items;
  if (filter === 'unread') filtered = items.filter(n => !n.read);
  else if (filter !== 'all') filtered = items.filter(n => n.type === filter);

  const groups = {};
  filtered.forEach(item => {
    const d = new Date(item.timestamp);
    const ds = d.toDateString();
    const key = ds === today ? 'Hoje' : ds === yesterdayStr ? 'Ontem' : d.toLocaleDateString('pt');
    if (!groups[key]) groups[key] = [];
    groups[key].push(item);
  });
  const groupList = Object.entries(groups).map(([label, grpItems]) => ({ label, items: grpItems }));
  const unreadCount = items.filter(n => !n.read).length;

  if (!signedIn) {
    return (
      <div className="notifications-view">
        <div className="detail-head">
          <button className="back-btn" onClick={onBack}><Ico name="arrowL" /></button>
          <div className="titles"><h1>{_t('webapp.notifications_title')}</h1></div>
        </div>
        <div style={{ padding: 60, textAlign: 'center', color: 'var(--d-fg-3)' }}>
          <p><a href="#" onClick={(e) => { e.preventDefault(); const el = document.getElementById('nb-auth-panel'); if (el) { el.classList.add('auth-panel-highlight'); setTimeout(() => el.classList.remove('auth-panel-highlight'), 1500); } }} style={{ color: 'var(--nb-green)', textDecoration: 'underline', cursor: 'pointer' }}>Faz login</a> para ver as notificações.</p>
        </div>
      </div>
    );
  }

  return (
    <div className="notifications-view">
      <div className="detail-head">
        <button className="back-btn" onClick={onBack}><Ico name="arrowL" /></button>
        <div className="titles">
          <h1>{_t('webapp.notifications_title')}</h1>
          <p>{items.length} notificações{unreadCount > 0 ? ` · ${unreadCount} não lidas` : ''}</p>
        </div>
        <div style={{ display: 'flex', gap: 6, marginLeft: 'auto' }}>
          {unreadCount > 0 && (
            <button className="ntf-action-btn" onClick={markAllRead} title={_t('webapp.notif_mark_all_read')}>
              <Ico name="check" size={14} /> Ler tudo
            </button>
          )}
          {items.length > 0 && (
            <button className="ntf-action-btn ntf-action-btn--danger" onClick={clearAll} title={_t('webapp.notif_clear_all')}>
              Limpar
            </button>
          )}
        </div>
      </div>

      <div className="tk-tabs" style={{ flexWrap: 'wrap' }}>
        {[
          { id: 'all', label: 'Todas' },
          { id: 'unread', label: _t('webapp.notif_unread') },
          { id: 'ticket-called', label: _t('webapp.notif_called') },
          { id: 'ticket-approaching', label: _t('webapp.notif_approaching') },
          { id: 'appointment-reminder', label: _t('webapp.notif_appointments') },
        ].map(f => (
          <button key={f.id} className={`tk-tab ${filter === f.id ? 'on' : ''}`} onClick={() => setFilter(f.id)}>
            {f.label}
            {f.id === 'all' && <span className="tk-cnt">{items.length}</span>}
            {f.id === 'unread' && unreadCount > 0 && <span className="tk-cnt">{unreadCount}</span>}
          </button>
        ))}
      </div>

      {filtered.length === 0 ? (
        <div style={{ padding: 40, textAlign: 'center', color: 'var(--d-fg-3)' }}>
          {items.length === 0 ? 'Sem notificações.' : 'Nenhuma notificação neste filtro.'}
        </div>
      ) : (
        <div className="ntf-list">
          {groupList.map(group => (
            <div key={group.label}>
              <div className="ntf-group-label">{group.label}</div>
              {group.items.map(item => {
                const meta = getMeta(item.type);
                return (
                  <div key={item.id} className={`ntf-card ${!item.read ? 'ntf-card--unread' : ''}`}>
                    <div className="ntf-icon" style={{ background: `${meta.color}1a`, color: meta.color }}>
                      <Ico name={meta.icon} size={16} />
                    </div>
                    <div className="ntf-content">
                      <div className="ntf-header">
                        <span className="ntf-title">{item.title}</span>
                        <span className="ntf-time">{timeAgo(item.timestamp)}</span>
                      </div>
                      <p className="ntf-body">{item.body}</p>
                    </div>
                    <div className="ntf-actions-col">
                      {!item.read && (
                        <button className="ntf-btn-sm" onClick={() => markRead(item.id)} title={_t('webapp.notif_mark_read')}>
                          <Ico name="check" size={12} />
                        </button>
                      )}
                      <button className="ntf-btn-sm ntf-btn-sm--del" onClick={() => removeItem(item.id)} title={_t('webapp.track_remove')}>
                        ×
                      </button>
                    </div>
                  </div>
                );
              })}
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

// ─── Notifications Panel (right aside) ──────────────────────
function NotificationsPanel({ collapsed, onToggle, signedIn, onClose }) {
  const [items, setItems] = useState([]);
  const [, setTick] = useState(0);

  const loadItems = () => {
    try {
      const stored = JSON.parse(localStorage.getItem(_geoKey('nb_notifications')) || '[]');
      setItems(Array.isArray(stored) ? stored : []);
    } catch { setItems([]); }
  };

  useEffect(() => {
    loadItems();
    const onStorage = (e) => { if (e.key === 'nb_notifications') loadItems(); };
    window.addEventListener('storage', onStorage);
    const timer = setInterval(() => { setTick(t => t + 1); loadItems(); }, 30000);
    return () => { window.removeEventListener('storage', onStorage); clearInterval(timer); };
  }, []);

  const markAllRead = () => {
    const updated = items.map(n => ({ ...n, read: true }));
    setItems(updated);
    try { localStorage.setItem(_geoKey('nb_notifications'), JSON.stringify(updated)); } catch {}
  };

  const getMeta = (type) => NTF_TYPE_META[type] || NTF_TYPE_META.generic;

  const timeAgo = (ts) => {
    if (!ts) return '';
    const diff = Math.floor((Date.now() - new Date(ts).getTime()) / 1000);
    if (diff < 60) return 'agora';
    if (diff < 3600) return `${Math.floor(diff / 60)}min`;
    if (diff < 86400) return `${Math.floor(diff / 3600)}h`;
    if (diff < 604800) return `${Math.floor(diff / 86400)}d`;
    return new Date(ts).toLocaleDateString('pt');
  };

  const unreadCount = items.filter(n => !n.read).length;
  const recent = items.slice(0, 15);

  if (collapsed) {
    return (
      <aside className="ticket-panel collapsed">
        <button className="tp-toggle" onClick={onToggle} style={{ position: 'relative' }}>
          <Ico name="bell" size={16} />
          {unreadCount > 0 && <span style={{ position:'absolute', top:6, right:6, width:8, height:8, borderRadius:'50%', background:'#ef4444' }} />}
        </button>
      </aside>
    );
  }

  return (
    <aside className="ticket-panel">
      <div className="tp-head">
        <div className="tp-title">
          <Ico name="bell" size={16} />
          <span>{_t('webapp.notifications_title')}</span>
          {unreadCount > 0 && <span className="tk-cnt" style={{ marginLeft: 4 }}>{unreadCount}</span>}
        </div>
        <div style={{ display: 'flex', gap: 4 }}>
          {unreadCount > 0 && (
            <button className="tp-action" onClick={markAllRead} title={_t('webapp.notif_read_all')} style={{ fontSize: 11 }}>
              <Ico name="check" size={12} /> Ler tudo
            </button>
          )}
          <button className="tp-action" onClick={onToggle} title={_t('webapp.panel_collapse')}><Ico name="chevR" size={14} /></button>
          {onClose && <button className="tp-action" onClick={onClose} title={_t('webapp.close')}><Ico name="cross" size={14} /></button>}
        </div>
      </div>

      <div style={{ flex: 1, overflowY: 'auto', padding: '0.5rem 0.75rem' }}>
        {!signedIn ? (
          <div style={{ padding: 40, textAlign: 'center', color: 'var(--d-fg-3)' }}>
            <Ico name="bell" size={28} />
            <p style={{ marginTop: 8, fontSize: 13 }}>{_t('webapp.notif_login')}</p>
          </div>
        ) : recent.length === 0 ? (
          <div style={{ padding: 40, textAlign: 'center', color: 'var(--d-fg-3)' }}>
            <Ico name="bell" size={28} />
            <p style={{ marginTop: 8, fontSize: 13 }}>Sem notificações.</p>
            <p style={{ fontSize: 11, color: 'var(--d-fg-muted)' }}>Receberás avisos quando a tua senha for chamada ou quando houver actualizações.</p>
          </div>
        ) : (
          <div className="ntf-list" style={{ gap: '0.25rem' }}>
            {recent.map(item => {
              const meta = getMeta(item.type);
              return (
                <div key={item.id} className={`ntf-card ${!item.read ? 'ntf-card--unread' : ''}`} style={{ padding: '0.625rem 0.75rem' }}>
                  <div className="ntf-icon" style={{ background: `${meta.color}1a`, color: meta.color, width: 28, height: 28, minWidth: 28 }}>
                    <Ico name={meta.icon} size={13} />
                  </div>
                  <div className="ntf-content" style={{ minWidth: 0 }}>
                    <div className="ntf-header">
                      <span className="ntf-title" style={{ fontSize: '0.75rem' }}>{item.title}</span>
                      <span className="ntf-time" style={{ fontSize: '0.625rem' }}>{timeAgo(item.timestamp)}</span>
                    </div>
                    <p className="ntf-body" style={{ fontSize: '0.6875rem' }}>{item.body}</p>
                  </div>
                </div>
              );
            })}
          </div>
        )}
      </div>
    </aside>
  );
}

// ─── Service Info Panel (right aside) ────────────────────────
function ServiceInfoPanel({ service, onClose, collapsed, onToggle, signedIn }) {
  const [loading, setLoading] = useState(true);
  const [info, setInfo] = useState({ name: '', description: '', textItems: [], pdfItems: [] });
  const [showChat, setShowChat] = useState(false);
  const [infoOpen, setInfoOpen] = useState(true);
  const [aiInitialMsg, setAiInitialMsg] = useState(null);

  useEffect(() => {
    if (!service?.hash) return;
    setLoading(true);
    setShowChat(false);
    setInfoOpen(true);
    setAiInitialMsg(null);
    API.get(`/data/services/${service.hash}/documentation`).then(res => {
      if (res.message === 'success') {
        setInfo({
          name: res.service?.name || service.name || '',
          description: res.service?.description || '',
          textItems: res.textItems || [],
          pdfItems: res.pdfItems || [],
        });
      }
      setLoading(false);
    }).catch(() => setLoading(false));
  }, [service?.hash]);

  const hasDoc = info.description || info.textItems.length > 0 || info.pdfItems.length > 0;

  const buildAiMsg = () => {
    const svcName = info.name || service.name || '';
    let apiMsg = 'O utilizador pediu informações sobre o serviço "' + svcName + '".';
    if (info.description) apiMsg += ' Descrição do serviço: ' + info.description + '.';
    if (info.textItems.length > 0) {
      apiMsg += '\n\nInformações do serviço:\n';
      info.textItems.forEach((t, i) => { apiMsg += (i + 1) + '. ' + t.information + '\n'; });
    }
    if (info.pdfItems.length > 0) {
      apiMsg += '\nDocumentos disponíveis:\n';
      info.pdfItems.forEach(p => {
        const url = p.filename && p.filename.startsWith('http') ? p.filename : '';
        apiMsg += '- ' + (p.description || 'Documento') + (url ? ' (Link: ' + url + ')' : '') + '\n';
      });
    }
    if (info.textItems.length === 0 && info.pdfItems.length === 0) {
      apiMsg += '\nNão existem informações adicionais registadas para este serviço.';
    }
    apiMsg += '\n\nResponde ao utilizador na língua que ele usar. Apresenta um resumo claro e organizado das informações. Se houver documentos, apresenta os links para download.';
    return apiMsg;
  };

  const askAi = () => {
    const svcName = info.name || service.name || '';
    setAiInitialMsg({ api: buildAiMsg(), display: 'Que informações tens sobre ' + svcName + '?' });
    setInfoOpen(false);
    setShowChat(true);
  };

  const exitChat = () => {
    setShowChat(false);
    setInfoOpen(true);
  };

  if (collapsed) {
    return (
      <aside className="ticket-panel collapsed">
        <button className="tp-toggle" onClick={onToggle}><Ico name="help" size={16} /></button>
      </aside>
    );
  }

  const svcName = info.name || service.name || '';

  return (
    <aside className="ticket-panel" style={{ display: 'flex', flexDirection: 'column' }}>
      <div className="tp-head">
        <div className="tp-title"><Ico name="help" size={16} /><span>Info do serviço</span></div>
        <div style={{ display: 'flex', gap: 4 }}>
          <button className="tp-action" onClick={onClose} title={_t('webapp.close')}><Ico name="cross" size={14} /></button>
          <button className="tp-action" onClick={onToggle} title={_t('webapp.panel_collapse')}><Ico name="chevR" size={14} /></button>
        </div>
      </div>

      {/* Collapsible info section */}
      <div style={{ flexShrink: 0, borderBottom: '1px solid var(--d-border)' }}>
        <button onClick={() => setInfoOpen(!infoOpen)}
          style={{ display: 'flex', alignItems: 'center', gap: 10, width: '100%', padding: '0.625rem 0.75rem', background: 'none', border: 'none', cursor: 'pointer', textAlign: 'left' }}>
          <div style={{ width: 32, height: 32, borderRadius: 10, background: 'linear-gradient(135deg, rgba(2,165,134,0.18), rgba(2,165,134,0.06))', color: 'var(--nb-green)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
            <Ico name="help" size={16} />
          </div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontWeight: 600, fontSize: '0.8125rem', color: 'var(--d-fg-1)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{svcName}</div>
            {!infoOpen && info.description && <div style={{ fontSize: '0.6875rem', color: 'var(--d-fg-3)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{info.description}</div>}
          </div>
          <span style={{ display: 'inline-flex', transform: infoOpen ? 'rotate(180deg)' : 'none', transition: 'transform 200ms' }}><Ico name="chevD" size={14} /></span>
        </button>

        {infoOpen && !loading && (
          <div style={{ padding: '0 0.75rem 0.75rem', overflowY: 'auto', maxHeight: showChat ? '35vh' : 'none' }}>
            {/* Description */}
            {info.description && (
              <div style={{ fontSize: '0.78125rem', color: 'var(--d-fg-3)', lineHeight: 1.45, marginBottom: 10, padding: '0 0.25rem' }}>{info.description}</div>
            )}

            {/* Stats */}
            {service.stats && (
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 6, marginBottom: 10 }}>
                {[
                  { val: service.stats.people, label: 'Na fila' },
                  { val: service.stats.waitTime, label: 'Espera' },
                  { val: service.stats.duration || '—', label: 'Duração' },
                ].map((s, i) => (
                  <div key={i} style={{ textAlign: 'center', padding: '0.5rem 0.25rem', background: 'var(--d-bg-surface)', border: '1px solid var(--d-border)', borderRadius: 'var(--nb-r-md)' }}>
                    <div style={{ fontSize: '1rem', fontWeight: 700, color: 'var(--d-fg-1)' }}>{s.val}</div>
                    <div style={{ fontSize: '0.5625rem', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.06em', color: 'var(--d-fg-3)', marginTop: 1 }}>{s.label}</div>
                  </div>
                ))}
              </div>
            )}

            {/* Text items */}
            {info.textItems.length > 0 && (
              <div style={{ marginBottom: 10 }}>
                <div style={{ fontSize: '0.5625rem', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.1em', color: 'var(--d-fg-muted)', marginBottom: 5, display: 'flex', alignItems: 'center', gap: 5 }}>
                  <Ico name="receipt" size={11} /> Informações
                </div>
                {info.textItems.map((item, i) => (
                  <div key={item.id || i} style={{ background: 'var(--d-bg-surface)', border: '1px solid var(--d-border)', borderRadius: 'var(--nb-r-md)', padding: '0.625rem', marginBottom: 4, fontSize: '0.78125rem', color: 'var(--d-fg-1)', lineHeight: 1.5 }}>
                    {item.information}
                  </div>
                ))}
              </div>
            )}

            {/* PDF documents */}
            {info.pdfItems.length > 0 && (
              <div style={{ marginBottom: 10 }}>
                <div style={{ fontSize: '0.5625rem', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.1em', color: 'var(--d-fg-muted)', marginBottom: 5, display: 'flex', alignItems: 'center', gap: 5 }}>
                  <Ico name="receipt" size={11} /> Documentos
                </div>
                {info.pdfItems.map((pdf, i) => {
                  const url = pdf.filename && pdf.filename.startsWith('http') ? pdf.filename : '';
                  return (
                    <a key={pdf.id || i} href={url || '#'} target={url ? '_blank' : undefined} rel="noopener"
                      style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '0.5rem 0.625rem', borderRadius: 'var(--nb-r-md)', border: '1px solid var(--d-border)', background: 'var(--d-bg-surface)', marginBottom: 4, textDecoration: 'none', color: 'inherit', transition: 'border-color 120ms' }}
                      onMouseEnter={e => e.currentTarget.style.borderColor = 'var(--nb-green)'}
                      onMouseLeave={e => e.currentTarget.style.borderColor = 'var(--d-border)'}>
                      <div style={{ width: 28, height: 28, borderRadius: 6, background: 'rgba(229,57,53,0.08)', color: '#e53935', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, fontSize: '0.625rem', fontWeight: 700 }}>PDF</div>
                      <div style={{ flex: 1, minWidth: 0 }}>
                        <div style={{ fontSize: '0.78125rem', fontWeight: 500, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{pdf.description || 'Documento'}</div>
                        {pdf.date && <div style={{ fontSize: '0.625rem', color: 'var(--d-fg-3)' }}>{new Date(pdf.date).toLocaleDateString('pt-PT')}</div>}
                      </div>
                      {url && <Ico name="chevR" size={14} />}
                    </a>
                  );
                })}
              </div>
            )}

            {/* Empty state */}
            {!hasDoc && !service.stats && (
              <div style={{ padding: 20, textAlign: 'center', color: 'var(--d-fg-3)' }}>
                <Ico name="help" size={22} />
                <p style={{ margin: '6px 0 0', fontSize: '0.78125rem' }}>{_t('webapp.no_additional_info')}</p>
              </div>
            )}
          </div>
        )}
      </div>

      {/* Chat AI area OR Ask AI button */}
      {showChat && _feat('appweb.ai.chat') ? (
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0 }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0.375rem 0.75rem', borderBottom: '1px solid var(--d-border)', flexShrink: 0 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: '0.6875rem', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.08em', color: 'var(--nb-green)' }}>
              <Ico name="sparkle" size={13} /> NhaBex AI
            </div>
            <button onClick={exitChat}
              style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--d-fg-3)', fontSize: '0.6875rem', display: 'flex', alignItems: 'center', gap: 4 }}>
              <Ico name="cross" size={12} /> Fechar chat
            </button>
          </div>
          <InlineAiChat signedIn={signedIn} initialMessage={aiInitialMsg} hideHeader />
        </div>
      ) : (
        <div style={{ flex: 1 }} />
      )}

      {/* Ask AI footer — only when chat not open */}
      {!loading && !showChat && _feat('appweb.ai.chat') && (
        <div style={{ padding: '0.625rem 0.75rem', borderTop: '1px solid var(--d-border)', flexShrink: 0 }}>
          <button
            onClick={askAi}
            style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8, width: '100%', padding: '0.6875rem', borderRadius: 'var(--nb-r-md)', border: 'none', background: 'var(--nb-green)', color: '#013D32', fontWeight: 600, fontSize: '0.8125rem', cursor: 'pointer', transition: 'background 120ms' }}>
            <Ico name="sparkle" size={16} />
            Perguntar ao NhaBex AI
          </button>
        </div>
      )}
    </aside>
  );
}

// ─── User Behaviour Tracker ─────────────────────────────────
const NbTracker = (() => {
  const STORAGE_KEY = 'nb_user_behaviour';
  const MAX_EVENTS = 500;

  function _load() {
    try { return JSON.parse(localStorage.getItem(STORAGE_KEY) || '{}'); } catch { return {}; }
  }
  function _save(data) {
    try { localStorage.setItem(STORAGE_KEY, JSON.stringify(data)); } catch {}
  }

  function track(action, meta = {}) {
    const data = _load();
    if (!data.events) data.events = [];
    if (!data.viewCounts) data.viewCounts = {};
    if (!data.actionCounts) data.actionCounts = {};
    data.events.push({ action, ...meta, ts: Date.now() });
    if (data.events.length > MAX_EVENTS) data.events = data.events.slice(-MAX_EVENTS);
    data.actionCounts[action] = (data.actionCounts[action] || 0) + 1;
    if (action === 'view_change' && meta.view) {
      data.viewCounts[meta.view] = (data.viewCounts[meta.view] || 0) + 1;
    }
    data.lastActive = Date.now();
    _save(data);
  }

  function trackSession() {
    const data = _load();
    data.sessions = (data.sessions || 0) + 1;
    data.lastSession = Date.now();
    if (!data.firstSession) data.firstSession = Date.now();
    _save(data);
  }

  function getProfile() {
    const data = _load();
    const vc = data.viewCounts || {};
    const ac = data.actionCounts || {};
    const topViews = Object.entries(vc).sort((a, b) => b[1] - a[1]).slice(0, 5).map(([k]) => k);
    const topActions = Object.entries(ac).sort((a, b) => b[1] - a[1]).slice(0, 5).map(([k]) => k);
    const recent = (data.events || []).slice(-20);
    return { sessions: data.sessions || 0, topViews, topActions, recentActions: recent, firstSession: data.firstSession, lastActive: data.lastActive };
  }

  function getContextSummary(view) {
    const profile = getProfile();
    const parts = [];
    if (profile.sessions > 1) parts.push(`Utilizador recorrente (${profile.sessions} sessões).`);
    else parts.push('Primeiro uso da plataforma.');
    if (profile.topViews.length > 0) parts.push(`Secções mais visitadas: ${profile.topViews.join(', ')}.`);
    parts.push(`Página actual: ${view}.`);
    const recentViews = profile.recentActions.filter(e => e.action === 'view_change').map(e => e.view).slice(-5);
    if (recentViews.length > 0) parts.push(`Navegação recente: ${recentViews.join(' → ')}.`);
    return parts.join(' ');
  }

  return { track, trackSession, getProfile, getContextSummary };
})();

// ─── Contextual FAQ data per view ───────────────────────────
const CONTEXTUAL_FAQ = {
  _global: [
    { q: _t('webapp.faq_global_q1'), a: _t('webapp.faq_global_a1') },
    { q: _t('webapp.faq_global_q2'), a: _t('webapp.faq_global_a2') },
    { q: _t('webapp.faq_global_q3'), a: _t('webapp.faq_global_a3') },
  ],
  home: [
    { q: _t('webapp.faq_home_q1'), a: _t('webapp.faq_home_a1') },
    { q: _t('webapp.faq_home_q2'), a: _t('webapp.faq_home_a2') },
    { q: _t('webapp.faq_home_q3'), a: _t('webapp.faq_home_a3') },
  ],
  tickets: [
    { q: _t('webapp.faq_tickets_q1'), a: _t('webapp.faq_tickets_a1') },
    { q: _t('webapp.faq_tickets_q2'), a: _t('webapp.faq_tickets_a2') },
    { q: _t('webapp.faq_tickets_q3'), a: _t('webapp.faq_tickets_a3') },
    { q: _t('webapp.faq_tickets_q4'), a: _t('webapp.faq_tickets_a4') },
  ],
  tracking: [
    { q: _t('webapp.faq_tracking_q1'), a: _t('webapp.faq_tracking_a1') },
    { q: _t('webapp.faq_tracking_q2'), a: _t('webapp.faq_tracking_a2') },
    { q: _t('webapp.faq_tracking_q3'), a: _t('webapp.faq_tracking_a3') },
  ],
  appointments: [
    { q: _t('webapp.faq_appt_q1'), a: _t('webapp.faq_appt_a1') },
    { q: _t('webapp.faq_appt_q2'), a: _t('webapp.faq_appt_a2') },
    { q: _t('webapp.faq_appt_q3'), a: _t('webapp.faq_appt_a3') },
  ],
  map: [
    { q: _t('webapp.faq_map_q1'), a: _t('webapp.faq_map_a1') },
    { q: _t('webapp.faq_map_q2'), a: _t('webapp.faq_map_a2') },
  ],
  payments: [
    { q: _t('webapp.faq_pay_q1'), a: _t('webapp.faq_pay_a1') },
    { q: _t('webapp.faq_pay_q2'), a: _t('webapp.faq_pay_a2') },
    { q: _t('webapp.faq_pay_q3'), a: _t('webapp.faq_pay_a3') },
  ],
  store: [
    { q: _t('webapp.faq_store_q1'), a: _t('webapp.faq_store_a1') },
    { q: _t('webapp.faq_store_q2'), a: _t('webapp.faq_store_a2') },
    { q: _t('webapp.faq_store_q3'), a: _t('webapp.faq_store_a3') },
  ],
  games: [
    { q: _t('webapp.faq_games_q1'), a: _t('webapp.faq_games_a1') },
    { q: _t('webapp.faq_games_q2'), a: _t('webapp.faq_games_a2') },
  ],
  pharmacy: [
    { q: _t('webapp.faq_pharm_q1'), a: _t('webapp.faq_pharm_a1') },
    { q: _t('webapp.faq_pharm_q2'), a: _t('webapp.faq_pharm_a2') },
  ],
  flights: [
    { q: _t('webapp.faq_flights_q1'), a: _t('webapp.faq_flights_a1') },
    { q: _t('webapp.faq_flights_q2'), a: _t('webapp.faq_flights_a2') },
  ],
  cars: [
    { q: _t('webapp.faq_cars_q1'), a: _t('webapp.faq_cars_a1') },
    { q: _t('webapp.faq_cars_q2'), a: _t('webapp.faq_cars_a2') },
  ],
  carwash: [
    { q: _t('webapp.faq_wash_q1'), a: _t('webapp.faq_wash_a1') },
    { q: _t('webapp.faq_wash_q2'), a: _t('webapp.faq_wash_a2') },
    { q: _t('webapp.faq_wash_q3'), a: _t('webapp.faq_wash_a3') },
  ],
  profile: [
    { q: _t('webapp.faq_profile_q1'), a: _t('webapp.faq_profile_a1') },
    { q: _t('webapp.faq_profile_q2'), a: _t('webapp.faq_profile_a2') },
  ],
  settings: [
    { q: _t('webapp.faq_settings_q1'), a: _t('webapp.faq_settings_a1') },
    { q: _t('webapp.faq_settings_q2'), a: _t('webapp.faq_settings_a2') },
  ],
  agency: [
    { q: _t('webapp.faq_agency_q1'), a: _t('webapp.faq_agency_a1') },
    { q: _t('webapp.faq_agency_q2'), a: _t('webapp.faq_agency_a2') },
  ],
};

function getContextualFAQ(view) {
  return [...(CONTEXTUAL_FAQ[view] || []), ...(CONTEXTUAL_FAQ._global || [])];
}

const VIEW_LABELS = {
  home: _t('webapp.vl_home'), tickets: _t('webapp.vl_tickets'), tracking: _t('webapp.vl_tracking'), map: _t('webapp.vl_map'),
  appointments: _t('webapp.vl_appointments'), payments: _t('webapp.vl_payments'), store: _t('webapp.vl_store'),
  games: _t('webapp.vl_games'), pharmacy: _t('webapp.vl_pharmacy'), flights: _t('webapp.vl_flights'), cars: _t('webapp.vl_cars'), carwash: _t('webapp.vl_carwash'),
  profile: _t('webapp.vl_profile'), settings: _t('webapp.vl_settings'), agency: _t('webapp.vl_agency'),
  companies: _t('webapp.vl_companies'), company: _t('webapp.vl_company'),
};

const VIEW_TIPS = {
  home: { icon: 'home', text: _t('webapp.vt_home') },
  tickets: { icon: 'ticket', text: _t('webapp.vt_tickets') },
  tracking: { icon: 'radar', text: _t('webapp.vt_tracking') },
  map: { icon: 'map', text: _t('webapp.vt_map') },
  appointments: { icon: 'calendar', text: _t('webapp.vt_appointments') },
  payments: { icon: 'wallet', text: _t('webapp.vt_payments') },
  store: { icon: 'store', text: _t('webapp.vt_store') },
  games: { icon: 'gamepad', text: _t('webapp.vt_games') },
  pharmacy: { icon: 'pharmacy', text: _t('webapp.vt_pharmacy') },
  flights: { icon: 'plane', text: _t('webapp.vt_flights') },
  cars: { icon: 'car', text: _t('webapp.vt_cars') },
  carwash: { icon: 'carWash', text: _t('webapp.vt_carwash') },
  profile: { icon: 'user', text: _t('webapp.vt_profile') },
  settings: { icon: 'settings', text: _t('webapp.vt_settings') },
  agency: { icon: 'building', text: _t('webapp.vt_agency') },
};

// ─── Help Panel (right aside) ───────────────────────────────
function HelpPanel({ collapsed, onToggle, onClose, currentView, signedIn }) {
  const [tab, setTab] = useState('faq');
  const [openFaq, setOpenFaq] = useState(null);
  const [chatMessages, setChatMessages] = useState([]);
  const [chatInput, setChatInput] = useState('');
  const [chatSending, setChatSending] = useState(false);
  const [chatAgentId, setChatAgentId] = useState(null);
  const [chatThreadId, setChatThreadId] = useState(null);
  const [chatReady, setChatReady] = useState(false);
  const chatEndRef = useRef(null);

  const faq = useMemo(() => getContextualFAQ(currentView), [currentView]);
  const viewLabel = VIEW_LABELS[currentView] || currentView;
  const viewTip = VIEW_TIPS[currentView];

  useEffect(() => { setOpenFaq(null); }, [currentView]);

  // Init AI chat agent
  useEffect(() => {
    if (!signedIn) return;
    API.get('/client/ai/agents').then(res => {
      if (res.message === 'success' && res.data?.length) {
        setChatAgentId(res.data[0].ID);
        setChatReady(true);
      }
    }).catch(() => {});
  }, [signedIn]);

  useEffect(() => {
    chatEndRef.current?.scrollIntoView({ behavior: 'smooth' });
  }, [chatMessages]);

  const sendChat = async (text) => {
    const msg = text || chatInput.trim();
    if (!msg || chatSending || !chatAgentId) return;
    setChatInput('');
    setChatMessages(prev => [...prev, { role: 'user', text: msg }]);
    setChatSending(true);
    NbTracker.track('help_ai_chat', { view: currentView, query: msg.substring(0, 100) });
    try {
      let tid = chatThreadId;
      if (!tid) {
        const cr = await API.post('/client/ai/create-thread', { ID_Agent: chatAgentId });
        if (cr.message === 'success' && cr.threadId) { tid = cr.threadId; setChatThreadId(tid); }
        else { setChatMessages(prev => [...prev, { role: 'assistant', text: _t('webapp.help_ai_error_init') }]); setChatSending(false); return; }
        // Send context as system primer
        const ctx = `[CONTEXTO] O utilizador está na secção "${viewLabel}" da app NhaBex. ${NbTracker.getContextSummary(currentView)} Responde de forma útil e contextualizada sobre a plataforma NhaBex e os seus serviços. Sê conciso e amigável.`;
        await API.post('/client/ai/send-message', { ThreadID: tid, Message: ctx });
        // Poll context message to completion
        let ctxAttempts = 0;
        const pollCtx = () => API.get('/client/ai/poll-run', { ThreadID: tid }).then(r => {
          if (r.status === 'completed' || ++ctxAttempts > 15) return;
          return new Promise(res => setTimeout(res, 1000)).then(pollCtx);
        }).catch(() => {});
        await pollCtx();
      }
      const sendRes = await API.post('/client/ai/send-message', { ThreadID: tid, Message: msg });
      if (sendRes.message === 'success' && sendRes.runId) {
        let attempts = 0;
        const poll = async () => {
          attempts++;
          const pr = await API.get('/client/ai/poll-run', { ThreadID: tid, RunID: sendRes.runId });
          if (pr.status === 'completed') {
            let reply = (pr.response || _t('webapp.help_ai_no_response')).replace(/\[QUICK_REPLIES\][\s\S]*?\[\/QUICK_REPLIES\]/g, '').replace(/\[CONTEXTO\][\s\S]*?\./g, '').trim();
            setChatMessages(prev => [...prev, { role: 'assistant', text: reply || _t('webapp.help_ai_no_response') }]);
            setChatSending(false);
          } else if (['queued', 'in_progress'].includes(pr.status) && attempts < 40) {
            setTimeout(poll, 1500);
          } else {
            setChatMessages(prev => [...prev, { role: 'assistant', text: pr.error || _t('webapp.help_ai_error_proc') }]);
            setChatSending(false);
          }
        };
        poll();
      } else {
        setChatMessages(prev => [...prev, { role: 'assistant', text: sendRes.error || _t('webapp.help_ai_error_send') }]);
        setChatSending(false);
      }
    } catch {
      setChatMessages(prev => [...prev, { role: 'assistant', text: _t('webapp.help_ai_error_conn') }]);
      setChatSending(false);
    }
  };

  const contextStarters = useMemo(() => {
    const s = {
      home: [_t('webapp.cs_home_1'), _t('webapp.cs_home_2')],
      tickets: [_t('webapp.cs_tickets_1'), _t('webapp.cs_tickets_2')],
      tracking: [_t('webapp.cs_tracking_1'), _t('webapp.cs_tracking_2')],
      appointments: [_t('webapp.cs_appt_1'), _t('webapp.cs_appt_2')],
      payments: [_t('webapp.cs_pay_1'), _t('webapp.cs_pay_2')],
      store: [_t('webapp.cs_store_1'), _t('webapp.cs_store_2')],
      pharmacy: [_t('webapp.cs_pharm_1'), _t('webapp.cs_pharm_2')],
      flights: [_t('webapp.cs_flights_1'), _t('webapp.cs_flights_2')],
      map: [_t('webapp.cs_map_1'), _t('webapp.cs_map_2')],
      cars: [_t('webapp.cs_cars_1'), _t('webapp.cs_cars_2')],
      carwash: [_t('webapp.cs_wash_1'), _t('webapp.cs_wash_2')],
      games: [_t('webapp.cs_games_1'), _t('webapp.cs_games_2')],
    };
    return s[currentView] || s.home;
  }, [currentView]);

  if (collapsed) {
    return (
      <aside className="ticket-panel collapsed">
        <button className="tp-toggle" onClick={onToggle}><Ico name="help" size={16} /></button>
      </aside>
    );
  }

  return (
    <aside className="ticket-panel">
      <div className="tp-head">
        <div className="tp-title"><Ico name="help" size={16} /><span>{_t('webapp.help_title')}</span></div>
        <div style={{ display: 'flex', gap: 4 }}>
          <button className="tp-action" onClick={onClose} title={_t('webapp.close')}><Ico name="cross" size={14} /></button>
          <button className="tp-action" onClick={onToggle} title={_t('webapp.panel_collapse')}><Ico name="chevR" size={14} /></button>
        </div>
      </div>

      {/* Tab switcher */}
      <div style={{ display: 'flex', borderBottom: '1px solid var(--d-border)', padding: '0 0.75rem' }}>
        <button onClick={() => setTab('faq')}
          style={{ flex: 1, padding: '0.5rem', fontSize: '0.75rem', fontWeight: 600, background: 'none', border: 'none', borderBottom: tab === 'faq' ? '2px solid var(--nb-green)' : '2px solid transparent', color: tab === 'faq' ? 'var(--nb-green)' : 'var(--d-fg-3)', cursor: 'pointer', transition: 'all 150ms', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 4 }}>
          <Ico name="help" size={13} /> FAQ
        </button>
        {_feat('appweb.ai.chat') && <button onClick={() => setTab('chat')}
          style={{ flex: 1, padding: '0.5rem', fontSize: '0.75rem', fontWeight: 600, background: 'none', border: 'none', borderBottom: tab === 'chat' ? '2px solid var(--nb-green)' : '2px solid transparent', color: tab === 'chat' ? 'var(--nb-green)' : 'var(--d-fg-3)', cursor: 'pointer', transition: 'all 150ms', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 4 }}>
          <Ico name="sparkle" size={13} /> AI Chat
        </button>}
      </div>

      {tab === 'faq' ? (
        <div style={{ flex: 1, overflowY: 'auto', padding: '0.75rem' }}>
          {/* Context badge */}
          {viewTip && (
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '0.625rem 0.75rem', marginBottom: 14, background: 'rgba(2,165,134,0.08)', border: '1px solid rgba(2,165,134,0.2)', borderRadius: 'var(--nb-r-md)' }}>
              <Ico name={viewTip.icon} size={16} style={{ color: 'var(--nb-green)', flexShrink: 0 }} />
              <div>
                <div style={{ fontSize: '0.6875rem', fontWeight: 700, color: 'var(--nb-green)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>{viewLabel}</div>
                <div style={{ fontSize: '0.75rem', color: 'var(--d-fg-2)', marginTop: 1 }}>{viewTip.text}</div>
              </div>
            </div>
          )}

          {/* How it works (only on home) */}
          {currentView === 'home' && (
            <div style={{ marginBottom: 20 }}>
              <div style={{ fontSize: '0.6875rem', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.08em', color: 'var(--d-fg-3)', marginBottom: 10 }}>{_t('webapp.help_how_it_works')}</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                {[
                  { icon: 'search', text: _t('webapp.help_step1') },
                  { icon: 'building', text: _t('webapp.help_step2') },
                  { icon: 'ticket', text: _t('webapp.help_step3') },
                  { icon: 'bell', text: _t('webapp.help_step4') },
                ].map((step, i) => (
                  <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '0.625rem 0.75rem', background: 'var(--d-bg-surface)', border: '1px solid var(--d-border)', borderRadius: 'var(--nb-r-md)' }}>
                    <div style={{ width: 28, height: 28, borderRadius: '50%', background: 'rgba(2,165,134,0.12)', color: 'var(--nb-green)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, fontSize: 12, fontWeight: 700 }}>{i + 1}</div>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: '0.8125rem', color: 'var(--d-fg-1)' }}>
                      <Ico name={step.icon} size={14} /> {step.text}
                    </div>
                  </div>
                ))}
              </div>
            </div>
          )}

          {/* Contextual FAQ */}
          <div>
            <div style={{ fontSize: '0.6875rem', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.08em', color: 'var(--d-fg-3)', marginBottom: 10 }}>{_t('webapp.help_faq_title')}</div>
            <div className="prf-cards-grid">
              {faq.map((f, i) => (
                <div className="prf-card-block" key={i}>
                  <div className="prf-card-block__head" onClick={() => { setOpenFaq(openFaq === i ? null : i); NbTracker.track('help_faq_open', { view: currentView, question: f.q }); }}>
                    <Ico name="help" size={14} />
                    <div><strong>{f.q}</strong></div>
                    <Ico name={openFaq === i ? 'chevD' : 'chevR'} size={12} />
                  </div>
                  {openFaq === i && (
                    <div className="prf-card-block__body">
                      <p style={{ fontSize: '0.8125rem', color: 'var(--d-fg-2)', lineHeight: 1.5, margin: 0 }}>{f.a}</p>
                    </div>
                  )}
                </div>
              ))}
            </div>
          </div>

          {/* CTA to AI chat */}
          {signedIn && chatReady && (
            <div style={{ marginTop: 20, padding: '0.75rem', background: 'var(--d-bg-surface)', border: '1px solid var(--d-border)', borderRadius: 'var(--nb-r-md)', textAlign: 'center' }}>
              <Ico name="sparkle" size={18} style={{ color: 'var(--nb-green)' }} />
              <p style={{ fontSize: '0.75rem', color: 'var(--d-fg-2)', margin: '6px 0 10px' }}>{_t('webapp.help_no_answer')}</p>
              <button onClick={() => setTab('chat')}
                style={{ padding: '0.5rem 1rem', background: 'var(--nb-green)', color: '#013D32', border: 'none', borderRadius: 'var(--nb-r-md)', fontWeight: 600, fontSize: '0.8125rem', cursor: 'pointer' }}>
                Abrir AI Chat
              </button>
            </div>
          )}
        </div>
      ) : (
        /* AI Chat tab */
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0 }}>
          {!signedIn ? (
            <div style={{ padding: 40, textAlign: 'center', color: 'var(--d-fg-3)', flex: 1 }}>
              <Ico name="sparkle" size={28} />
              <p style={{ marginTop: 8, fontSize: 13 }}>{_t('webapp.help_login_ai')}</p>
            </div>
          ) : !chatReady ? (
            <div style={{ padding: 40, textAlign: 'center', color: 'var(--d-fg-3)', flex: 1 }}>
              <Ico name="sparkle" size={28} />
              <p style={{ marginTop: 8, fontSize: 13 }}>{_t('webapp.help_ai_unavail')}</p>
            </div>
          ) : (
            <>
              <div style={{ flex: 1, overflowY: 'auto', padding: '0.75rem' }}>
                {chatMessages.length === 0 && (
                  <div style={{ textAlign: 'center', padding: '1.5rem 0.5rem' }}>
                    <div style={{ width: 40, height: 40, borderRadius: '50%', background: 'rgba(2,165,134,0.12)', color: 'var(--nb-green)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', marginBottom: 10 }}>
                      <Ico name="sparkle" size={20} />
                    </div>
                    <p style={{ fontSize: '0.8125rem', color: 'var(--d-fg-2)', margin: '0 0 14px' }}>{_t('webapp.help_ai_greeting').replace(':section', '<strong>' + viewLabel + '</strong>')}</p>
                    <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                      {contextStarters.map((s, i) => (
                        <button key={i} onClick={() => sendChat(s)} disabled={chatSending}
                          style={{ padding: '0.5rem 0.75rem', background: 'var(--d-bg-surface)', border: '1px solid var(--d-border)', borderRadius: 'var(--nb-r-md)', fontSize: '0.75rem', color: 'var(--d-fg-1)', cursor: 'pointer', textAlign: 'left', transition: 'border-color 150ms' }}>
                          {s}
                        </button>
                      ))}
                    </div>
                  </div>
                )}
                {chatMessages.map((m, i) => (
                  <div key={i} className={`inline-ai-msg inline-ai-msg--${m.role}`}>
                    {m.role === 'assistant' && <span className="inline-ai-avatar"><Ico name="sparkle" size={10} /></span>}
                    <div className="inline-ai-bubble" dangerouslySetInnerHTML={{ __html: _mdToHtml(m.text) }} />
                  </div>
                ))}
                {chatSending && (
                  <div className="inline-ai-msg inline-ai-msg--assistant">
                    <span className="inline-ai-avatar"><Ico name="sparkle" size={10} /></span>
                    <div className="inline-ai-bubble inline-ai-typing"><span /><span /><span /></div>
                  </div>
                )}
                <div ref={chatEndRef} />
              </div>
              <div className="inline-ai-input-row" style={{ borderTop: '1px solid var(--d-border)', padding: '0.5rem 0.75rem' }}>
                <input
                  type="text"
                  placeholder={_t('webapp.ai_ask_section')}
                  value={chatInput}
                  onChange={e => setChatInput(e.target.value)}
                  onKeyDown={e => { if (e.key === 'Enter') sendChat(); }}
                  disabled={chatSending}
                />
                <button onClick={() => sendChat()} disabled={!chatInput.trim() || chatSending} aria-label={_t('webapp.send_message') || 'Enviar mensagem'}>
                  <Ico name="send" size={16} />
                </button>
              </div>
            </>
          )}
        </div>
      )}
    </aside>
  );
}

// ─── Map View (with real agencies) ──────────────────────────
function MapView({ onBack, locationGranted, userLat, userLng }) {
  const [agencies, setAgencies] = useState([]);
  const [selected, setSelected] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const params = {};
    if (locationGranted && userLat && userLng) {
      params.lat = userLat;
      params.lng = userLng;
      params.radius = 50;
    }
    API.get('/data/agencies/map', params).then(res => {
      if (res.message === 'success') {
        const list = Array.isArray(res.data) ? res.data : (res.data?.agencies || []);
        setAgencies(list);
      }
      setLoading(false);
    }).catch(() => setLoading(false));
  }, [locationGranted, userLat, userLng]);

  const selectedAgency = selected ? agencies.find(a => (a.Hash || a.Token) === selected) : null;

  return (
    <div className="map-view">
      <div className="detail-head">
        <button className="back-btn" onClick={onBack}><Ico name="arrowL" /></button>
        <div className="titles">
          <h1>{_t('webapp.map_title')}</h1>
          <p>{agencies.length} agências encontradas</p>
        </div>
      </div>

      {loading ? (
        <SkeletonRows count={6} />
      ) : (
        <div className="map-layout">
          <aside className="map-list">
            <div className="ml-head">
              <span>{locationGranted ? _t('webapp.map_near_you') : _t('webapp.map_all_agencies')}</span>
              <span className="ml-count">{agencies.length}</span>
            </div>
            <div className="ml-scroll">
              {agencies.map((a, i) => {
                const hash = a.Hash || a.Token;
                return (
                  <button
                    key={hash || i}
                    className={`ml-row ${selected === hash ? 'on' : ''}`}
                    onClick={() => setSelected(hash)}
                  >
                    <div className="ml-ico"><Ico name="pin" size={14} /></div>
                    <div className="ml-text">
                      <div className="ml-name">{a.Name || a.name}</div>
                      <div className="ml-where">{a.Zone || a.City || ''}{a.Distance ? ` · ${a.Distance}` : ''}</div>
                    </div>
                  </button>
                );
              })}
            </div>
          </aside>
        </div>
      )}
    </div>
  );
}

// ─── Brand auth icons ───────────────────────────────────────
const GoogleIcon = ({ size = 18 }) => (
  <svg width={size} height={size} viewBox="0 0 48 48">
    <path fill="#FFC107" d="M43.6 20.5H42V20H24v8h11.3a12 12 0 0 1-23.3-4 12 12 0 0 1 19.7-9.2l5.7-5.7A20 20 0 0 0 4 24a20 20 0 0 0 20 20c11 0 20-8 20-20 0-1.3-.1-2.4-.4-3.5z"/>
    <path fill="#FF3D00" d="m6.3 14.7 6.6 4.8a12 12 0 0 1 18.8-4.7l5.7-5.7A20 20 0 0 0 6.3 14.7z"/>
    <path fill="#4CAF50" d="M24 44c5.2 0 10-2 13.6-5.2l-6.3-5.3A12 12 0 0 1 12.7 28L6.1 33A20 20 0 0 0 24 44z"/>
    <path fill="#1976D2" d="M43.6 20.5H42V20H24v8h11.3a12 12 0 0 1-4.1 5.5l6.3 5.3c-.4.4 6.7-4.9 6.7-14.8 0-1.3-.1-2.4-.6-3.5z"/>
  </svg>
);
const AppleIcon = ({ size = 18 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor">
    <path d="M16.4 1.5a4.4 4.4 0 0 1-1 3.3 3.7 3.7 0 0 1-3 1.4 4.2 4.2 0 0 1 1-3.2 4.5 4.5 0 0 1 3-1.5zm4 16.4a10 10 0 0 1-1 1.8c-.6.9-1.1 1.5-1.5 1.8-.6.6-1.3.9-2.1.9-.5 0-1.2-.2-2-.5a5.7 5.7 0 0 0-2.1-.5c-.7 0-1.4.2-2.2.5-.7.3-1.4.5-1.9.5-.7 0-1.4-.3-2.1-1-.4-.3-1-1-1.5-1.9a10.5 10.5 0 0 1-1.7-3.5 13 13 0 0 1-.7-4.2c0-1.6.4-3 1-4 .6-1 1.3-1.7 2.2-2.3a6 6 0 0 1 3-.9c.6 0 1.4.2 2.3.5.9.3 1.5.5 1.8.5.2 0 .9-.2 2-.6 1-.4 1.9-.5 2.6-.5 2 .2 3.4.9 4.4 2.3-1.7 1-2.6 2.5-2.6 4.4 0 1.5.5 2.7 1.6 3.7.5.5 1 .8 1.7 1l-.6 1.5z"/>
  </svg>
);
const FacebookIcon = ({ size = 18 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24">
    <path fill="#1877F2" d="M22 12a10 10 0 1 0-11.6 9.9V14.9H7.9V12h2.5V9.8c0-2.5 1.5-3.9 3.8-3.9 1.1 0 2.2.2 2.2.2v2.5H15c-1.2 0-1.6.8-1.6 1.6V12h2.8l-.5 2.9h-2.4V22A10 10 0 0 0 22 12z"/>
    <path fill="#FFF" d="M15.7 14.9 16.2 12h-2.8V10.2c0-.8.4-1.6 1.6-1.6h1.4V6.1s-1.1-.2-2.2-.2c-2.3 0-3.8 1.4-3.8 3.9V12H7.9v2.9h2.5V22a10 10 0 0 0 3 0v-7.1h2.3z"/>
  </svg>
);

// ─── Autentika icon ─────────────────────────────────────────
const AutentikaIcon = ({ size = 18 }) => (
  <svg viewBox="0 0 24 24" width={size} height={size} fill="#00843D">
    <path d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H4V6h16v12zM6 10h2v2H6v-2zm0 4h8v2H6v-2zm10 0h2v2h-2v-2zm-6-4h8v2h-8v-2z"/>
  </svg>
);

// ─── Social login helpers ───────────────────────────────────
function loadScript(src) {
  return new Promise((resolve, reject) => {
    if (document.querySelector(`script[src="${src}"]`)) { resolve(); return; }
    const s = document.createElement('script');
    s.src = src; s.async = true;
    s.onload = resolve;
    s.onerror = () => reject(new Error('Failed to load: ' + src));
    document.head.appendChild(s);
  });
}

let _gsiInitialized = false;

async function doGoogleLogin(clientId, onSuccess, onError) {
  try {
    await loadScript('https://accounts.google.com/gsi/client');
    const onCredential = (response) => {
      if (response.credential) {
        API.post('/client/auth/google-login', { id_token: response.credential }).then(res => {
          if (res.message === 'success' && res.data?.token) onSuccess(res.data);
          else onError(res.detail || res.message || 'Erro Google');
        }).catch(() => onError('Erro de ligação'));
      }
    };
    if (!_gsiInitialized) {
      google.accounts.id.initialize({ client_id: clientId, use_fedcm_for_prompt: true, callback: onCredential });
      _gsiInitialized = true;
    }
    google.accounts.id.cancel();
    const result = await new Promise(resolve => {
      google.accounts.id.prompt(n => resolve(n.isDisplayed() ? 'displayed' : 'skipped'));
    });
    if (result === 'skipped') {
      const old = document.getElementById('nb-gsi-btn-wrap');
      if (old) old.remove();
      const wrapper = document.createElement('div');
      wrapper.id = 'nb-gsi-btn-wrap';
      wrapper.style.cssText = 'position:fixed;top:-9999px;left:-9999px;';
      document.body.appendChild(wrapper);
      google.accounts.id.renderButton(wrapper, { type: 'standard', size: 'large' });
      await new Promise(r => setTimeout(r, 100));
      const btn = wrapper.querySelector('[role="button"]') || wrapper.firstElementChild;
      if (btn) btn.click();
      setTimeout(() => wrapper.remove(), 60000);
    }
  } catch (e) { onError('Erro Google login'); }
}

async function doFacebookLogin(appId, onSuccess, onError) {
  try {
    if (!window.FB?._nbReady) {
      if (window.FB && !window.FB._nbReady) {
        FB.init({ appId, cookie: true, xfbml: false, version: 'v19.0' });
        window.FB._nbReady = true;
      } else {
        await new Promise((resolve, reject) => {
          window.fbAsyncInit = function() { FB.init({ appId, cookie: true, xfbml: false, version: 'v19.0' }); window.FB._nbReady = true; resolve(); };
          if (!document.getElementById('facebook-jssdk')) {
            const s = document.createElement('script'); s.id = 'facebook-jssdk'; s.src = 'https://connect.facebook.net/en_US/sdk.js'; s.async = true; s.onerror = reject; document.head.appendChild(s);
          }
        });
      }
    }
    FB.login((response) => {
      if (response.authResponse?.accessToken) {
        API.post('/client/auth/facebook-login', { access_token: response.authResponse.accessToken }).then(res => {
          if (res.message === 'success' && res.data?.token) onSuccess(res.data);
          else onError(res.detail || res.message || 'Erro Facebook');
        }).catch(() => onError('Erro de ligação'));
      }
    }, { scope: 'email,public_profile' });
  } catch (e) { onError('Erro Facebook login'); }
}

async function doAppleLogin(serviceId, onSuccess, onError) {
  try {
    await loadScript('https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js');
    AppleID.auth.init({ clientId: serviceId, scope: 'name email', redirectURI: window.location.origin + window.location.pathname, usePopup: true });
    const response = await AppleID.auth.signIn();
    if (response.authorization?.id_token) {
      const userName = response.user ? [response.user.name?.firstName, response.user.name?.lastName].filter(Boolean).join(' ') : null;
      API.post('/client/auth/apple-login', { id_token: response.authorization.id_token, name: userName }).then(res => {
        if (res.message === 'success' && res.data?.token) onSuccess(res.data);
        else onError(res.detail || res.message || 'Erro Apple');
      }).catch(() => onError('Erro de ligação'));
    }
  } catch (e) {
    if (e.error !== 'popup_closed_by_user') onError('Erro Apple login');
  }
}

// ─── Password requirements check ────────────────────────────
function PwdCheck({ label, ok }) {
  return (
    <div style={{ display:'flex', alignItems:'center', gap:6, fontSize:12, color: ok ? 'var(--nb-green)' : 'var(--nb-danger, #d32f2f)', padding:'2px 0' }}>
      <span style={{ fontSize:14 }}>{ok ? '✓' : '✗'}</span>
      <span>{label}</span>
    </div>
  );
}

// ─── Auth panel (dynamic providers, login + register) ───────
function AuthPanel({ onLogin }) {
  const [tab, setTab] = useState('login'); // login | register
  const [step, setStep] = useState('chooser'); // chooser | email | register
  const [error, setError] = useState('');
  const [errors, setErrors] = useState({});
  const [submitting, setSubmitting] = useState(false);
  const [socialMethods, setSocialMethods] = useState([]);

  // Login form
  const [loginEmail, setLoginEmail] = useState('');
  const [loginPassword, setLoginPassword] = useState('');

  // Register form
  const [regName, setRegName] = useState('');
  const [regEmail, setRegEmail] = useState('');
  const [regPassword, setRegPassword] = useState('');
  const [regPhone, setRegPhone] = useState('');
  const [regPhoneCode, setRegPhoneCode] = useState('+238');
  const [regAcceptTerms, setRegAcceptTerms] = useState(false);

  useEffect(() => {
    API.get('/data/login-methods', { module: 'app' }).then(res => {
      if (res.message === 'success' && Array.isArray(res.data)) setSocialMethods(res.data);
    }).catch(() => {});
  }, []);

  const getSocialClientId = (provider) => {
    const m = socialMethods.find(m => m.provider === provider);
    return m?.client_id || null;
  };
  const hasSocial = socialMethods.length > 0;

  const handleAuthSuccess = (data) => {
    if (data.token) localStorage.setItem('sanctum_token', data.token);
    onLogin(data.user || data.client || { name: _t('webapp.user_default'), email: '' });
  };

  const handleEmailLogin = async () => {
    if (!loginEmail.includes('@') || !loginPassword) return;
    setSubmitting(true); setError(''); setErrors({});
    try {
      const res = await API.post('/client/auth/login', { email: loginEmail, password: loginPassword });
      if (res.message === 'success' && res.data) handleAuthSuccess(res.data);
      else {
        setError(res.detail || res.message || _t('webapp.login_error'));
        setErrors(res.errors || {});
      }
    } catch (e) { setError(_t('webapp.connection_error')); }
    setSubmitting(false);
  };

  const handleRegister = async () => {
    if (!regName || !regEmail.includes('@') || !regPassword || !regAcceptTerms) return;
    setSubmitting(true); setError(''); setErrors({});
    try {
      const res = await API.post('/client/auth/register', {
        name: regName,
        email: regEmail,
        password: regPassword,
        phone: regPhone || null,
        phone_country_code: regPhoneCode || null,
      });
      if (res.message === 'success' && res.data) {
        handleAuthSuccess(res.data);
      } else {
        setError(res.detail || res.message || _t('webapp.register_error'));
        setErrors(res.errors || {});
      }
    } catch (e) { setError(_t('webapp.connection_error')); }
    setSubmitting(false);
  };

  const handleSocialLogin = (provider) => {
    setError('');
    const clientId = getSocialClientId(provider);
    if (!clientId) return;
    const onSuccess = (data) => handleAuthSuccess(data);
    const onErr = (msg) => setError(msg);
    if (provider === 'google') doGoogleLogin(clientId, onSuccess, onErr);
    else if (provider === 'facebook') doFacebookLogin(clientId, onSuccess, onErr);
    else if (provider === 'apple') doAppleLogin(clientId, onSuccess, onErr);
  };

  const PROVIDERS = {
    google:    { icon: <GoogleIcon size={18} />,   label: _t('webapp.continue_with_google') },
    facebook:  { icon: <FacebookIcon size={18} />, label: _t('webapp.continue_with_facebook') },
    apple:     { icon: <span className="apple-glyph"><AppleIcon size={18} /></span>, label: _t('webapp.continue_with_apple') },
    autentika: { icon: <AutentikaIcon size={18} />, label: _t('webapp.continue_with_autentika') },
  };

  // Password validation
  const pw = regPassword;
  const pwOk = { min8: pw.length >= 8, upper: /[A-Z]/.test(pw), lower: /[a-z]/.test(pw), num: /[0-9]/.test(pw), special: /[\W_]/.test(pw) };
  const pwValid = Object.values(pwOk).every(Boolean);

  return (
    <aside className="ticket-panel auth-panel" id="nb-auth-panel">
      <div className="auth-head">
        <img src={window.__nbLogo || '../img/favicon/favicon-64.png'} alt="" className="auth-mark" />
        <h2>{step === 'register' ? _t('webapp.register') : _t('webapp.enter_nhabex')}</h2>
        <p>{_t('webapp.enter_nhabex_desc')}</p>
      </div>

      {error && <p style={{ color: 'var(--nb-danger)', fontSize: 12, padding: '0 20px', textAlign: 'center' }}>{error}</p>}

      {/* ─── Chooser (social + email buttons) ─── */}
      {step === 'chooser' && (
        <div className="auth-body">
          {socialMethods.map(method => {
            const cfg = PROVIDERS[method.provider];
            if (!cfg) return null;
            if (method.provider === 'autentika') {
              return (
                <a key={method.provider} className="sso-btn" href="autentika-redirect" style={{ textDecoration: 'none', color: 'inherit' }}>
                  {cfg.icon}<span>{cfg.label}</span>
                </a>
              );
            }
            return (
              <button key={method.provider} className="sso-btn" onClick={() => handleSocialLogin(method.provider)}>
                {cfg.icon}<span>{cfg.label}</span>
              </button>
            );
          })}
          {hasSocial && <div className="auth-sep"><span>{_t('webapp.or_separator')}</span></div>}
          <button className="sso-btn ghost" onClick={() => setStep('email')}>
            <Ico name="mail" size={16} /><span>{_t('webapp.continue_with_email')}</span>
          </button>
          <p className="auth-fine">
            {_t('webapp.accept_terms_intro')} <a href="../app/terms">{_t('webapp.terms_link')}</a> {_t('webapp.accept_terms_suffix')}
          </p>
        </div>
      )}

      {/* ─── Email Login ─── */}
      {step === 'email' && (
        <div className="auth-body">
          <button className="auth-back" onClick={() => { setStep('chooser'); setError(''); setErrors({}); }}>
            <Ico name="arrowL" size={14} /> {_t('webapp.back')}
          </button>
          <label className="auth-label">{_t('webapp.email_label')}</label>
          <input className="auth-input" placeholder="o-teu@email.cv" type="email"
            value={loginEmail} onChange={(e) => setLoginEmail(e.target.value)} autoFocus />
          {errors.email && <p style={{ color:'var(--nb-danger)', fontSize:11, marginTop:4 }}>{errors.email[0]}</p>}

          <label className="auth-label" style={{ marginTop: 12 }}>{_t('webapp.password_label')}</label>
          <input className="auth-input" placeholder={_t('webapp.password_placeholder')} type="password"
            value={loginPassword} onChange={(e) => setLoginPassword(e.target.value)}
            onKeyDown={(e) => e.key === 'Enter' && handleEmailLogin()} />
          {errors.password && <p style={{ color:'var(--nb-danger)', fontSize:11, marginTop:4 }}>{errors.password[0]}</p>}

          <div style={{ textAlign:'right', margin:'8px 0' }}>
            <a href="reset-account" style={{ fontSize:12, color:'var(--nb-green-400)' }}>{_t('webapp.forgot_password_link')}</a>
          </div>

          <button className="auth-cta" onClick={handleEmailLogin}
            disabled={!loginEmail.includes('@') || !loginPassword || submitting}>
            {submitting ? <><span className="btn-spinner" /> {_t('webapp.entering')}</> : _t('webapp.login')}
          </button>
        </div>
      )}

      {/* ─── Register ─── */}
      {step === 'register' && (
        <div className="auth-body">
          <button className="auth-back" onClick={() => { setStep('chooser'); setError(''); setErrors({}); }}>
            <Ico name="arrowL" size={14} /> {_t('webapp.back')}
          </button>

          <label className="auth-label">{_t('webapp.name_label')}</label>
          <input className="auth-input" placeholder={_t('webapp.name_placeholder')} type="text"
            value={regName} onChange={(e) => setRegName(e.target.value)} autoFocus />
          {errors.name && <p style={{ color:'var(--nb-danger)', fontSize:11, marginTop:4 }}>{errors.name[0]}</p>}

          <label className="auth-label" style={{ marginTop: 10 }}>{_t('webapp.email_label')}</label>
          <input className="auth-input" placeholder="o-teu@email.cv" type="email"
            value={regEmail} onChange={(e) => setRegEmail(e.target.value)} />
          {errors.email && <p style={{ color:'var(--nb-danger)', fontSize:11, marginTop:4 }}>{errors.email[0]}</p>}

          <label className="auth-label" style={{ marginTop: 10 }}>{_t('webapp.phone_label')} {_t('webapp.phone_optional')}</label>
          <div style={{ display:'flex', gap:8 }}>
            <input className="auth-input" style={{ width:80, flexShrink:0, textAlign:'center' }}
              value={regPhoneCode} onChange={(e) => setRegPhoneCode(e.target.value)} />
            <input className="auth-input" placeholder="9XX XXXX" type="tel"
              value={regPhone} onChange={(e) => setRegPhone(e.target.value)} style={{ flex:1 }} />
          </div>
          {errors.phone && <p style={{ color:'var(--nb-danger)', fontSize:11, marginTop:4 }}>{errors.phone[0]}</p>}

          <label className="auth-label" style={{ marginTop: 10 }}>{_t('webapp.password_label')}</label>
          <input className="auth-input" placeholder={_t('webapp.password_new_placeholder')} type="password"
            value={regPassword} onChange={(e) => setRegPassword(e.target.value)} />
          {errors.password && <p style={{ color:'var(--nb-danger)', fontSize:11, marginTop:4 }}>{errors.password[0]}</p>}

          {pw.length > 0 && (
            <div style={{ background:'var(--d-bg-sunken, #0f1a1e)', borderRadius:8, padding:'8px 12px', marginTop:8 }}>
              <PwdCheck label={_t('webapp.password_min_8')}  ok={pwOk.min8} />
              <PwdCheck label={_t('webapp.pwd_uppercase')}  ok={pwOk.upper} />
              <PwdCheck label={_t('webapp.pwd_lowercase')}  ok={pwOk.lower} />
              <PwdCheck label={_t('webapp.pwd_number')}  ok={pwOk.num} />
              <PwdCheck label={_t('webapp.pwd_special')}  ok={pwOk.special} />
            </div>
          )}

          <label style={{ display:'flex', alignItems:'center', gap:8, fontSize:12, color:'var(--d-fg-2)', marginTop:12, cursor:'pointer' }}>
            <input type="checkbox" checked={regAcceptTerms} onChange={(e) => setRegAcceptTerms(e.target.checked)} />
            <span>{_t('webapp.accept_terms_checkbox')} <a href="../app/terms" style={{ color:'var(--nb-green-400)' }}>{_t('webapp.terms_link')}</a> {_t('webapp.accept_privacy')}</span>
          </label>

          <button className="auth-cta" onClick={handleRegister} style={{ marginTop:14 }}
            disabled={!regName || !regEmail.includes('@') || !pwValid || !regAcceptTerms || submitting}>
            {submitting ? <><span className="btn-spinner" /> {_t('webapp.creating')}</> : _t('webapp.register')}
          </button>
        </div>
      )}

      {/* Footer toggle */}
      <div className="auth-foot">
        {step === 'register' ? (
          <><span>{_t('webapp.already_have_account')}</span> <a href="#" onClick={(e) => { e.preventDefault(); setStep('email'); setError(''); setErrors({}); }}>{_t('webapp.login')}</a></>
        ) : (
          <><span>{_t('webapp.no_account')}</span> <a href="#" onClick={(e) => { e.preventDefault(); setStep('register'); setError(''); setErrors({}); }}>{_t('webapp.create_now')}</a></>
        )}
      </div>
    </aside>
  );
}

// ─── Ticket Panel (active ticket) ───────────────────────────
function TicketPanel({ ticket, onCancel, collapsed, onToggle, onShare, addToast, signedIn }) {
  const [chatActive, setChatActive] = useState(false);

  if (collapsed) {
    return (
      <aside className="ticket-panel collapsed">
        <button className="ticket-collapse-btn" onClick={onToggle} title={_t('webapp.panel_expand')}>
          <span style={{ transform: 'rotate(180deg)', display: 'inline-flex' }}><Ico name="chevR" size={16} /></span>
        </button>
      </aside>
    );
  }

  if (!ticket) {
    return (
      <aside className={`ticket-panel ${chatActive ? 'chat-expanded' : ''}`}>
        <button className="ticket-collapse-btn" onClick={onToggle} title={_t('webapp.panel_collapse')}>
          <Ico name="chevR" size={16} />
        </button>
        <div className="ticket-top-section">
          <div className="ticket-head" onClick={() => setChatActive(!chatActive)} style={{ cursor: 'pointer' }}>
            <h3>{_t('webapp.active_ticket')}</h3>
            <span style={{ display: 'inline-flex', transform: chatActive ? 'rotate(180deg)' : 'none', transition: 'transform 200ms', color: 'var(--d-fg-3)' }}><Ico name="chevD" size={14} /></span>
          </div>
          {!chatActive && (
            <div className="no-ticket">
              <img src={window.__nbLogo || '../img/favicon/favicon-64.png'} alt="" />
              <h4>{_t('webapp.queue_empty')}</h4>
              <p>{_t('webapp.queue_empty_desc')}</p>
            </div>
          )}
        </div>
        {_feat('appweb.ai.chat') && <InlineAiChat signedIn={signedIn} onActiveChange={setChatActive} />}
      </aside>
    );
  }

  const people = ticket.People || 0;
  const progress = Math.max(5, 100 - (people * 5));

  return (
    <aside className={`ticket-panel ${chatActive ? 'chat-expanded' : ''}`}>
      <button className="ticket-collapse-btn" onClick={onToggle} title={_t('webapp.panel_collapse')}>
        <Ico name="chevR" size={16} />
      </button>
      <div className="ticket-top-section">
        <div className="ticket-head" onClick={() => setChatActive(!chatActive)} style={{ cursor: 'pointer' }}>
          <h3>{_t('webapp.active_ticket')}</h3>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
            <span className="live-tag"><span className="live-dot" />Em fila</span>
            <span style={{ display: 'inline-flex', transform: chatActive ? 'rotate(180deg)' : 'none', transition: 'transform 200ms', color: 'var(--d-fg-3)' }}><Ico name="chevD" size={14} /></span>
          </div>
        </div>

        <div className="ticket-card">
          <div className="ticket-top">
            <div className="agency-name">
              {ticket.CompanyName && <span style={{ fontWeight: 700 }}>{ticket.CompanyName} — </span>}
              {ticket.AgencyName}
            </div>
            <span className="status-pill"><span className="d" /> Em espera</span>
          </div>
          {ticket.CategoryName && (
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 4, padding: '2px 8px', borderRadius: 4, background: 'rgba(2,165,134,0.08)', fontSize: 10, fontWeight: 600, color: 'var(--nb-green)', textTransform: 'uppercase', letterSpacing: '.5px', marginBottom: 4 }}>
              {ticket.CategoryName}
            </div>
          )}
          <div className="pos-row">
            <div className="pos-block">
              <div className="pos-label">Senha</div>
              <div className="pos-num">{ticket.Code || ticket.Number}</div>
            </div>
            <div className="eta-block-mini">
              <div className="pos-label">Espera</div>
              <div className="eta-mini">{ticket.WaitTime || '—'}</div>
            </div>
          </div>
          <div className="progress-bar"><div style={{ width: `${progress}%` }} /></div>
          <div className="progress-meta">
            <span>{people} pessoas à frente</span>
            <span>{ticket.ServiceName}</span>
          </div>
          {ticket.IsDriver && (
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 8, padding: '6px 12px', borderRadius: 8, background: 'rgba(245,158,11,0.1)', border: '1px solid rgba(245,158,11,0.2)' }}>
              <Ico name="car" size={14} style={{ color: '#f59e0b' }} />
              <span style={{ fontSize: 11, fontWeight: 700, color: '#d97706' }}>{_t('webapp.driver_tab')}</span>
              <span style={{ fontSize: 13, fontWeight: 800, fontFamily: "'Courier New', monospace", letterSpacing: 1, color: '#92400e' }}>{ticket.VehiclePlate}</span>
              {ticket.VehicleCapacity && <span style={{ fontSize: 10, color: '#b45309', marginLeft: 'auto' }}>{ticket.VehicleCapacity} lug.</span>}
            </div>
          )}
        </div>

        <div className="ticket-actions">
          <button onClick={onShare}><Ico name="qr" size={15} /> QR</button>
          <button onClick={onShare}><Ico name="share" size={15} /> Partilhar</button>
          <button className="danger" onClick={onCancel}><span style={{ fontSize: 16, lineHeight: 1 }}>×</span> Desistir</button>
          <button onClick={() => { try { if(navigator.vibrate) navigator.vibrate(200); } catch(e){} if(addToast) addToast('Serás avisado quando faltar pouco.', 'success', 3000); }}><Ico name="bell" size={15} /> Avisar-me</button>
        </div>

        <div className="eta-block">
          <div className="row">
            <span className="label">Conselho</span>
            <span className="label" style={{ color: 'var(--nb-green-400)' }}>Bu vez ta txiga</span>
          </div>
          <p className="reassure">Fica tranquilo — avisamos-te quando faltar pouco.</p>
        </div>
      </div>
      <InlineAiChat signedIn={signedIn} onActiveChange={setChatActive} />
    </aside>
  );
}

// ─── Inline AI Chat (embedded in ticket panel) ──────────────
// Light markdown → HTML for AI chat bubbles
function _mdToHtml(text) {
  // Escape HTML via textContent
  const _esc = document.createElement('div');
  _esc.textContent = text;
  let html = _esc.innerHTML;

  // Remove markdown images: ![alt](url) → alt
  html = html.replace(/!\[([^\]]*)\]\([^)]+\)/g, '$1');
  // Links: [text](url) → pill button
  html = html.replace(/\[([^\]]+)\]\((https?:\/\/[^)]+)\)/g,
    '<a href="$2" target="_blank" rel="noopener" class="ai-link-pill"><span class="ai-link-pill__ico">&#128196;</span> $1</a>');
  // Headings: ### Title → <strong>
  html = html.replace(/^(#{1,4})\s+(.+)$/gm, '<strong>$2</strong>');
  // Bold: **text**
  html = html.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
  // Italic: *text* (single, not inside bold)
  html = html.replace(/\*(.+?)\*/g, '<em>$1</em>');
  // Strikethrough: ~~text~~
  html = html.replace(/~~(.+?)~~/g, '<s>$1</s>');
  // Inline code: `text`
  html = html.replace(/`(.+?)`/g, '<code style="background:rgba(0,0,0,0.06);padding:1px 4px;border-radius:3px;font-size:0.9em">$1</code>');
  // Unordered lists: lines starting with - or * or •
  html = html.replace(/(?:^|\n)[•\-\*]\s+(.+)/g, '\n<li>$1</li>');
  // Ordered lists: 1. 2. etc.
  html = html.replace(/(?:^|\n)\d+\.\s+(.+)/g, '\n<li>$1</li>');
  // Wrap consecutive <li> in <ul>
  html = html.replace(/((?:<li>.*?<\/li>\s*)+)/g, '<ul style="margin:4px 0;padding-left:18px">$1</ul>');
  // Newlines
  html = html.replace(/\n/g, '<br>');
  // Clean up <br> around lists
  html = html.replace(/<br>\s*<ul/g, '<ul');
  html = html.replace(/<\/ul>\s*<br>/g, '</ul>');
  // Bare URLs not already in tags
  html = html.replace(/(?<!href="|">|\/)(https?:\/\/[^\s<"]+)/g,
    '<a href="$1" target="_blank" rel="noopener" class="ai-link-pill"><span class="ai-link-pill__ico">&#128279;</span> Abrir link</a>');
  return html;
}

function AiAttachment({ att }) {
  if (!att || !att.type || !att.data) return null;

  const navClick = (btn) => {
    if (btn.type === 'navigate' && btn.view) {
      const params = {};
      if (btn.params) Object.entries(btn.params).forEach(([k, v]) => { params[k] = String(v); });
      window.dispatchEvent(new CustomEvent('nb-ai-navigate', { detail: { view: btn.view, params } }));
    }
  };

  if (att.type === 'generic_cards' && Array.isArray(att.data)) {
    return (
      <div style={{ display: 'flex', gap: 8, overflowX: 'auto', padding: '8px 0', scrollSnapType: 'x mandatory' }}>
        {att.data.map((card, i) => (
          <div key={i} style={{ minWidth: 200, maxWidth: 220, background: 'var(--d-bg-2, #f5f5f5)', borderRadius: 10, overflow: 'hidden', scrollSnapAlign: 'start', flexShrink: 0 }}>
            {card.image_url && <img src={card.image_url} alt="" style={{ width: '100%', height: 120, objectFit: 'cover' }} onError={e => e.target.style.display='none'} />}
            <div style={{ padding: '8px 10px' }}>
              <div style={{ fontWeight: 600, fontSize: 13 }}>{card.title}</div>
              {card.subtitle && <div style={{ fontSize: 11, color: 'var(--d-fg-3)', marginTop: 2 }}>{card.subtitle}</div>}
              {card.buttons && card.buttons.map((btn, j) => (
                <button key={j} onClick={() => navClick(btn)} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 4, width: '100%', marginTop: 6, padding: '6px 10px', background: 'var(--nb-primary, #02A586)', color: '#fff', border: 'none', borderRadius: 6, fontSize: 12, fontWeight: 600, cursor: 'pointer' }}>
                  {btn.icon && <Ico name={btn.icon} size={13} />} {btn.title}
                </button>
              ))}
            </div>
          </div>
        ))}
      </div>
    );
  }

  if (att.type === 'list_card' && att.data) {
    const d = att.data;
    return (
      <div style={{ background: 'var(--d-bg-2, #f5f5f5)', borderRadius: 10, padding: '10px 12px', margin: '6px 0' }}>
        {d.title && <div style={{ fontWeight: 700, fontSize: 12, marginBottom: 6, textTransform: 'uppercase', letterSpacing: '0.03em', color: 'var(--nb-primary, #02A586)' }}>{d.title}</div>}
        {(d.items || []).map((item, i) => (
          <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '5px 0', borderBottom: i < (d.items || []).length - 1 ? '1px solid var(--d-border, #eee)' : 'none' }}>
            {item.image && <span className="material-symbols-rounded" style={{ fontSize: 18, color: 'var(--nb-primary, #02A586)' }}>{item.image}</span>}
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontWeight: 600, fontSize: 12.5, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{item.title}</div>
              {item.subtitle && <div style={{ fontSize: 11, color: 'var(--d-fg-3)' }}>{item.subtitle}</div>}
            </div>
          </div>
        ))}
      </div>
    );
  }

  if (att.type === 'button_card' && att.data) {
    const d = att.data;
    return (
      <div style={{ margin: '6px 0' }}>
        {d.buttons && d.buttons.map((btn, j) => (
          <button key={j} onClick={() => navClick(btn)} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 4, width: '100%', padding: '8px 12px', background: 'var(--nb-primary, #02A586)', color: '#fff', border: 'none', borderRadius: 8, fontSize: 12.5, fontWeight: 600, cursor: 'pointer' }}>
            {btn.icon && <Ico name={btn.icon} size={14} />} {btn.title}
          </button>
        ))}
      </div>
    );
  }

  if (att.type === 'ticket_card' && att.data) {
    const d = att.data;
    return (
      <div style={{ background: 'var(--d-bg-2, #f5f5f5)', borderRadius: 10, padding: 12, margin: '6px 0', textAlign: 'center' }}>
        <div style={{ fontSize: 11, color: 'var(--d-fg-3)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Senha emitida</div>
        <div style={{ fontSize: 24, fontWeight: 800, margin: '4px 0' }}>{d.ticket_number || d.number}</div>
        <div style={{ fontSize: 12, color: 'var(--d-fg-2)' }}>{d.service || d.service_name}</div>
        <div style={{ fontSize: 11, color: 'var(--d-fg-3)' }}>{d.agency || d.agency_name}</div>
      </div>
    );
  }

  return null;
}

function InlineAiChat({ signedIn, onActiveChange, initialMessage, hideHeader }) {
  const [messages, setMessages] = useState([]);
  const [input, setInput] = useState('');
  const [sending, setSending] = useState(false);
  const [threadId, setThreadId] = useState(null);
  const [agentId, setAgentId] = useState(null);
  const [ready, setReady] = useState(false);
  const [starters, setStarters] = useState([]);
  const messagesEndRef = useRef(null);
  const doSendRef = useRef(null);

  // Notify parent when chat becomes active (has messages)
  useEffect(() => {
    if (onActiveChange) onActiveChange(messages.length > 0);
  }, [messages.length]);

  // Load agents + restore last thread on mount
  useEffect(() => {
    if (!signedIn) return;
    API.get('/client/ai/agents').then(async (res) => {
      if (res.message !== 'success' || !res.data?.length) return;
      const agent = res.data[0];
      setAgentId(agent.ID);
      setStarters(agent.starters || []);
      setReady(true);

      // Restore last thread from localStorage
      const savedThread = localStorage.getItem('nb_ai_last_thread');
      if (savedThread) {
        try {
          const threadsRes = await API.get('/client/ai/threads');
          if (threadsRes.message === 'success' && Array.isArray(threadsRes.threads)) {
            const thread = threadsRes.threads.find(t => String(t.ID) === savedThread);
            if (thread) {
              setThreadId(thread.ID);
              // Load messages for this thread
              const msgRes = await API.get('/client/ai/messages', { ThreadID: thread.ID });
              if (msgRes.message === 'success' && Array.isArray(msgRes.messages) && msgRes.messages.length > 0) {
                // Ensure chronological order (oldest first) — reverse if needed
                const sorted = [...msgRes.messages];
                if (sorted.length >= 2) {
                  const first = sorted[0].created_at || sorted[0].time || '';
                  const last = sorted[sorted.length - 1].created_at || sorted[sorted.length - 1].time || '';
                  if (first > last) sorted.reverse();
                }
                setMessages(sorted.map(m => {
                  let text = m.text || '';
                  if (m.role === 'assistant') {
                    text = text.replace(/\[QUICK_REPLIES\][\s\S]*?\[\/QUICK_REPLIES\]/g, '');
                    text = text.replace(/\[CAROUSEL\][\s\S]*?\[\/CAROUSEL\]/g, '');
                    text = text.replace(/\[(GENERIC_CARD|BUTTON_CARD|LIST_CARD|QUEUE_CARD|SERVICE_LIST|RECEIPT_CARD|MEDIA_CARD|FEEDBACK_CARD|COUPON_CARD|CHECKLIST_CARD|MY_TICKET_CARD|TICKET_CARD|NAVIGATE)\][\s\S]*?\[\/\1\]/g, '');
                    text = text.replace(/\[\/?(?:CAROUSEL|GENERIC_CARD|BUTTON_CARD|LIST_CARD|QUEUE_CARD|SERVICE_LIST|RECEIPT_CARD|MEDIA_CARD|FEEDBACK_CARD|COUPON_CARD|CHECKLIST_CARD|MY_TICKET_CARD|TICKET_CARD|NAVIGATE|QUICK_REPLIES)\]/g, '');
                    text = text.trim();
                  }
                  return { role: m.role, text };
                }));
              }
            }
          }
        } catch (e) { /* silent */ }
      }
    }).catch(() => {});
  }, [signedIn]);

  // Listen for service-info AI event — auto-send the API message
  useEffect(() => {
    const handler = (e) => {
      const detail = e.detail || {};
      const apiMsg = detail.api || detail.display || '';
      const displayMsg = detail.display || '';
      if (apiMsg && ready && agentId) {
        doSendRef.current(apiMsg, displayMsg || undefined);
      }
    };
    window.addEventListener('open-ai-chat-service-info', handler);
    return () => window.removeEventListener('open-ai-chat-service-info', handler);
  }, [ready, agentId]);

  // Auto-send initialMessage when provided and ready
  // initialMessage can be a string or { api: string, display: string }
  const initialSentRef = useRef(false);
  useEffect(() => {
    if (initialMessage && ready && agentId && !initialSentRef.current) {
      initialSentRef.current = true;
      setTimeout(() => {
        if (typeof initialMessage === 'object' && initialMessage.api) {
          doSendRef.current(initialMessage.api, initialMessage.display);
        } else {
          doSendRef.current(initialMessage);
        }
      }, 200);
    }
  }, [initialMessage, ready, agentId]);

  // Auto-scroll
  useEffect(() => {
    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
  }, [messages]);

  const doSend = async (text, displayText) => {
    if (!text || sending || !agentId) return;

    setInput('');
    setMessages(prev => [...prev, { role: 'user', text: displayText || text }]);
    setSending(true);

    try {
      // Create thread if needed
      let tid = threadId;
      if (!tid) {
        const createRes = await API.post('/client/ai/create-thread', { ID_Agent: agentId });
        if (createRes.message === 'success' && createRes.threadId) {
          tid = createRes.threadId;
          setThreadId(tid);
          try { localStorage.setItem('nb_ai_last_thread', String(tid)); } catch(e) {}
        } else {
          setMessages(prev => [...prev, { role: 'assistant', text: _t('webapp.help_ai_error_init') }]);
          setSending(false);
          return;
        }
      }

      // Send message
      const sendRes = await API.post('/client/ai/send-message', { ThreadID: tid, Message: text });
      if (sendRes.message === 'success' && sendRes.runId) {
        const runId = sendRes.runId;
        let attempts = 0;
        const poll = async () => {
          attempts++;
          const pollRes = await API.get('/client/ai/poll-run', { ThreadID: tid, RunID: runId });
          if (pollRes.status === 'completed') {
            let reply = pollRes.response || _t('webapp.help_ai_no_response');
            const atts = Array.isArray(pollRes.attachments) ? [...pollRes.attachments] : [];

            // Fallback: extract GENERIC_CARDs from AI text if no attachments came from backend
            if (atts.length === 0) {
              // Extract from CAROUSEL
              const carouselRx = /\[CAROUSEL\]([\s\S]*?)\[\/CAROUSEL\]/g;
              let cm;
              while ((cm = carouselRx.exec(reply)) !== null) {
                const cards = [];
                const cardRx = /\[GENERIC_CARD\]([\s\S]*?)\[\/GENERIC_CARD\]/g;
                let gm;
                while ((gm = cardRx.exec(cm[1])) !== null) {
                  try { cards.push(JSON.parse(gm[1].trim())); } catch { /* skip */ }
                }
                if (cards.length > 0) atts.push({ type: 'generic_cards', data: cards });
              }
              // Extract standalone GENERIC_CARDs
              const gcRx = /\[GENERIC_CARD\]([\s\S]*?)\[\/GENERIC_CARD\]/g;
              let gm2;
              while ((gm2 = gcRx.exec(reply)) !== null) {
                try { atts.push({ type: 'generic_cards', data: [JSON.parse(gm2[1].trim())] }); } catch { /* skip */ }
              }
              // Extract LIST_CARDs
              const lcRx = /\[LIST_CARD\]([\s\S]*?)\[\/LIST_CARD\]/g;
              let lm;
              while ((lm = lcRx.exec(reply)) !== null) {
                try { atts.push({ type: 'list_card', data: JSON.parse(lm[1].trim()) }); } catch { /* skip */ }
              }
              // Extract BUTTON_CARDs
              const bcRx = /\[BUTTON_CARD\]([\s\S]*?)\[\/BUTTON_CARD\]/g;
              let bm;
              while ((bm = bcRx.exec(reply)) !== null) {
                try { atts.push({ type: 'button_card', data: JSON.parse(bm[1].trim()) }); } catch { /* skip */ }
              }
            }

            // Strip all rich card markers from text (complete pairs + orphaned tags)
            reply = reply.replace(/\[CAROUSEL\][\s\S]*?\[\/CAROUSEL\]/g, '');
            reply = reply.replace(/\[(GENERIC_CARD|BUTTON_CARD|LIST_CARD|QUEUE_CARD|SERVICE_LIST|RECEIPT_CARD|MEDIA_CARD|FEEDBACK_CARD|COUPON_CARD|CHECKLIST_CARD|MY_TICKET_CARD|TICKET_CARD|NAVIGATE|QUICK_REPLIES)\][\s\S]*?\[\/\1\]/g, '');
            reply = reply.replace(/\[\/?(?:CAROUSEL|GENERIC_CARD|BUTTON_CARD|LIST_CARD|QUEUE_CARD|SERVICE_LIST|RECEIPT_CARD|MEDIA_CARD|FEEDBACK_CARD|COUPON_CARD|CHECKLIST_CARD|MY_TICKET_CARD|TICKET_CARD|NAVIGATE|QUICK_REPLIES)\]/g, '');
            reply = reply.trim();

            setMessages(prev => [...prev, { role: 'assistant', text: reply || _t('webapp.help_ai_no_response'), attachments: atts.length > 0 ? atts : undefined }]);
            setSending(false);
          } else if (['queued', 'in_progress'].includes(pollRes.status) && attempts < 40) {
            setTimeout(poll, 1500);
          } else if (pollRes.status === 'failed' || pollRes.status === 'cancelled') {
            setMessages(prev => [...prev, { role: 'assistant', text: pollRes.error || _t('webapp.help_ai_error_proc') }]);
            setSending(false);
          } else if (attempts >= 40) {
            setMessages(prev => [...prev, { role: 'assistant', text: 'Tempo limite excedido. Tenta novamente.' }]);
            setSending(false);
          } else {
            setTimeout(poll, 1500);
          }
        };
        poll();
      } else {
        setMessages(prev => [...prev, { role: 'assistant', text: sendRes.error || sendRes.detail || _t('webapp.help_ai_error_send') }]);
        setSending(false);
      }
    } catch (e) {
      setMessages(prev => [...prev, { role: 'assistant', text: _t('webapp.help_ai_error_conn') }]);
      setSending(false);
    }
  };

  doSendRef.current = doSend;
  const sendMessage = () => doSend(input.trim());

  if (!signedIn || !ready) return null;

  return (
    <div className="inline-ai-chat">
      {!hideHeader && (
        <div className="inline-ai-header">
          <Ico name="sparkle" size={14} />
          <span>NHABEX AI</span>
        </div>
      )}
      <div className="inline-ai-messages">
        {messages.length === 0 && (
          <div className="inline-ai-empty">
            <p>{_t('webapp.chat_welcome')}</p>
            {starters.length > 0 && (
              <div className="inline-ai-starters">
                {starters.slice(0, 3).map((s, i) => (
                  <button key={i} className="inline-ai-starter" onClick={() => doSend(s.text || s)} disabled={sending}>
                    {s.label || s.text || s}
                  </button>
                ))}
              </div>
            )}
          </div>
        )}
        {messages.map((m, i) => (
          <div key={i} className={`inline-ai-msg inline-ai-msg--${m.role}`}>
            {m.role === 'assistant' && <span className="inline-ai-avatar"><Ico name="sparkle" size={10} /></span>}
            <div className="inline-ai-bubble">
              <div dangerouslySetInnerHTML={{ __html: _mdToHtml(m.text) }} />
              {m.attachments && m.attachments.map((att, j) => (
                <AiAttachment key={j} att={att} />
              ))}
            </div>
          </div>
        ))}
        {sending && (
          <div className="inline-ai-msg inline-ai-msg--assistant">
            <span className="inline-ai-avatar"><Ico name="sparkle" size={10} /></span>
            <div className="inline-ai-bubble inline-ai-typing">
              <span /><span /><span />
            </div>
          </div>
        )}
        <div ref={messagesEndRef} />
      </div>
      <div className="inline-ai-input-row">
        <input
          type="text"
          placeholder={_t('webapp.chat_placeholder')}
          value={input}
          onChange={e => setInput(e.target.value)}
          onKeyDown={e => { if (e.key === 'Enter') sendMessage(); }}
          disabled={sending}
        />
        <button onClick={sendMessage} disabled={!input.trim() || sending} aria-label={_t('webapp.send_message') || 'Enviar mensagem'}>
          <Ico name="send" size={16} />
        </button>
      </div>
    </div>
  );
}

// ─── Skeleton Loaders ───────────────────────────────────────
function SkeletonCards({ count = 6 }) {
  return (
    <div className="category-grid" style={{ gridTemplateColumns: 'repeat(3, 1fr)' }}>
      {Array.from({ length: count }, (_, i) => (
        <div key={i} className="skeleton skeleton-card" />
      ))}
    </div>
  );
}

function SkeletonRows({ count = 4 }) {
  return (
    <div>
      {Array.from({ length: count }, (_, i) => (
        <div key={i} className="skeleton skeleton-row" />
      ))}
    </div>
  );
}

// ─── Peak Hours Chart ───────────────────────────────────────
function PeakHoursChart({ agencyHash, companyHash }) {
  const [data, setData] = useState(null);
  const [expanded, setExpanded] = useState(false);

  useEffect(() => {
    API.get(`/data/agencies/${agencyHash}/peak-hours`, { company: companyHash }).then(res => {
      if (res.message === 'success' && res.data) setData(res.data);
    }).catch(() => {});
  }, [agencyHash]);

  if (!data || !data.hourly) return null;

  const hourly = data.hourly;
  const maxVal = Math.max(...hourly.map(h => h.avg_count), 1);
  const currentHour = new Date().getHours();

  return (
    <div className="peak-hours">
      <button className="peak-hours__title" onClick={() => setExpanded(!expanded)} style={{ background:'none', border:'none', cursor:'pointer', width:'100%', justifyContent:'space-between' }}>
        <span style={{ display:'flex', alignItems:'center', gap:6 }}><Ico name="clock" size={14} /> Horários de pico</span>
        <Ico name={expanded ? 'chevD' : 'chevR'} size={14} />
      </button>
      {expanded && (
        <>
          <div className="peak-hours__bars">
            {hourly.filter(h => h.hour >= 7 && h.hour <= 19).map(h => (
              <div
                key={h.hour}
                className={`peak-hours__bar ${h.hour === currentHour ? 'current' : ''} ${h.hour === data.best_hour ? 'best' : ''}`}
                style={{ height: `${Math.max(4, (h.avg_count / maxVal) * 100)}%` }}
                title={`${h.hour}h: ~${h.avg_count.toFixed(1)} senhas/dia`}
              />
            ))}
          </div>
          <div className="peak-hours__labels">
            {hourly.filter(h => h.hour >= 7 && h.hour <= 19).map(h => (
              <span key={h.hour}>{h.hour}</span>
            ))}
          </div>
          {data.best_hour !== undefined && (
            <div className="peak-hours__tip">
              <Ico name="bolt" size={13} />
              Melhor hora: {data.best_hour}h (~{(data.best_hour_avg || 0).toFixed(1)} senhas)
            </div>
          )}
        </>
      )}
    </div>
  );
}

// ─── Timetable Modal ────────────────────────────────────────
function TimetableModal({ timeTable, agencyName, onClose }) {
  const DAYS = ['Segunda', 'Terça', 'Quarta', 'Quinta', 'Sexta', 'Sábado', 'Domingo'];
  const today = (new Date().getDay() + 6) % 7; // JS Sunday=0 → our Monday=0

  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal-dialog" onClick={e => e.stopPropagation()} style={{ maxWidth: 400 }}>
        <div className="modal-header">
          <h3>{_t('webapp.operating_hours')}</h3>
          <button className="modal-close" onClick={onClose}>&times;</button>
        </div>
        <div className="modal-body">
          {agencyName && <p style={{ fontSize: 13, color: 'var(--d-fg-2)', marginBottom: 16 }}>{agencyName}</p>}
          {(!timeTable || timeTable.length === 0) ? (
            <p style={{ color: 'var(--d-fg-3)', fontSize: 13 }}>Horário não disponível.</p>
          ) : (
            timeTable.map((row, i) => {
              const dayIdx = row.Day !== undefined ? row.Day : i;
              const isToday = dayIdx === today;
              const isClosed = row.Locked === 1;
              const isAlwaysOpen = row.AlwaysOpen === 1;
              return (
                <div key={i} className={`timetable-row ${isToday ? 'timetable-today' : ''}`}>
                  <span className="timetable-day">
                    {row.DayName || DAYS[dayIdx] || `Dia ${dayIdx}`}
                    {isToday && <span style={{ fontSize: 10, color: 'var(--nb-green)', marginLeft: 6 }}>HOJE</span>}
                  </span>
                  {isClosed ? (
                    <span className="timetable-closed">{_t('webapp.pharm_closed')}</span>
                  ) : isAlwaysOpen ? (
                    <span className="timetable-time">24 horas</span>
                  ) : (
                    <span className="timetable-time">{row.StartTime} — {row.EndTime}</span>
                  )}
                </div>
              );
            })
          )}
        </div>
      </div>
    </div>
  );
}

// ─── Edit Profile Modal ─────────────────────────────────────
function EditProfileModal({ user, onClose, onSave }) {
  const [name, setName] = useState(user.name || '');
  const [phone, setPhone] = useState(user.phone || '');
  const [phoneCode, setPhoneCode] = useState(user.phone_country_code || '+238');
  const [birthday, setBirthday] = useState(user.birthday || '');
  const [gender, setGender] = useState(user.gender || '');
  const [submitting, setSubmitting] = useState(false);
  const [error, setError] = useState('');
  const [photoPreview, setPhotoPreview] = useState(null);
  const fileRef = useRef(null);

  const handlePhotoSelect = async (e) => {
    const file = e.target.files?.[0];
    if (!file) return;
    if (file.size > 5 * 1024 * 1024) { setError('Imagem demasiado grande (max 5MB)'); return; }
    const reader = new FileReader();
    reader.onload = async () => {
      const dataUri = reader.result;
      setPhotoPreview(dataUri);
      try {
        await API.post('/client/auth/profile/photo', { photo: dataUri });
      } catch(e) { setError(_t('webapp.error_send_photo')); }
    };
    reader.readAsDataURL(file);
  };

  const handleSave = async () => {
    setSubmitting(true); setError('');
    try {
      const body = { name };
      if (phone) { body.phone = phone; body.phone_country_code = phoneCode; }
      if (birthday) body.birthday = birthday;
      if (gender) body.gender = gender;
      const res = await API.put('/client/auth/profile', body);
      if (res.message === 'success') {
        const updated = res.data ? mapUserData(res.data) : { ...user, name, phone, phone_country_code: phoneCode, birthday, gender, photo_url: photoPreview || user.photo_url };
        onSave(updated);
        onClose();
      } else {
        setError(res.detail || res.message || _t('webapp.save_error_generic'));
      }
    } catch(e) { setError(_t('webapp.connection_error')); }
    setSubmitting(false);
  };

  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal-dialog" onClick={e => e.stopPropagation()} style={{ maxWidth: 420 }}>
        <div className="modal-header">
          <h3>{_t('webapp.edit_profile')}</h3>
          <button className="modal-close" onClick={onClose}>&times;</button>
        </div>
        <div className="modal-body">
          {/* Photo */}
          <div style={{ textAlign: 'center', marginBottom: 20 }}>
            <div style={{ position: 'relative', display: 'inline-block', cursor: 'pointer' }} onClick={() => fileRef.current?.click()}>
              {(photoPreview || user.photo_url) ? (
                <img src={photoPreview || user.photo_url} alt="" referrerPolicy="no-referrer"
                  style={{ width: 72, height: 72, borderRadius: '50%', objectFit: 'cover', border: '2px solid var(--nb-green)' }} />
              ) : (
                <div style={{ width: 72, height: 72, borderRadius: '50%', background: 'var(--nb-green)', color: 'var(--nb-teal-ink)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 24, fontWeight: 700 }}>
                  {user.initials}
                </div>
              )}
              <div style={{ position: 'absolute', bottom: -2, right: -2, width: 24, height: 24, borderRadius: '50%', background: 'var(--nb-green)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <Ico name="user" size={12} />
              </div>
            </div>
            <input ref={fileRef} type="file" accept="image/jpeg,image/png,image/webp" onChange={handlePhotoSelect} style={{ display: 'none' }} />
            <p style={{ fontSize: 11, color: 'var(--d-fg-3)', marginTop: 6 }}>{_t('webapp.click_change_photo')}</p>
          </div>

          {error && <p style={{ color: 'var(--nb-danger)', fontSize: 12, marginBottom: 12, textAlign: 'center' }}>{error}</p>}

          <label className="modal-label">{_t('webapp.name_label')}</label>
          <input className="modal-input" value={name} onChange={e => setName(e.target.value)} style={{ marginBottom: 12 }} />

          <label className="modal-label">{_t('webapp.email_label')}</label>
          <input className="modal-input" value={user.email} disabled style={{ marginBottom: 12, opacity: 0.6 }} />

          <label className="modal-label">{_t('webapp.phone_label')}</label>
          <div style={{ display: 'flex', gap: 8, marginBottom: 12 }}>
            <input className="modal-input" style={{ width: 80 }} value={phoneCode} onChange={e => setPhoneCode(e.target.value)} />
            <input className="modal-input" style={{ flex: 1 }} value={phone} onChange={e => setPhone(e.target.value)} placeholder="9XX XXXX" />
          </div>

          <div style={{ display: 'flex', gap: 12 }}>
            <div style={{ flex: 1 }}>
              <label className="modal-label">{_t('webapp.birthday')}</label>
              <input className="modal-input" type="date" value={birthday} onChange={e => setBirthday(e.target.value)} />
            </div>
            <div style={{ flex: 1 }}>
              <label className="modal-label">{_t('webapp.gender')}</label>
              <select className="modal-input" value={gender} onChange={e => setGender(e.target.value)}>
                <option value="">—</option>
                <option value="M">{_t('webapp.gender_m')}</option>
                <option value="F">{_t('webapp.gender_f')}</option>
              </select>
            </div>
          </div>
        </div>
        <div className="modal-footer">
          <button className="modal-btn-secondary" onClick={onClose}>{_t('webapp.cancel')}</button>
          <button className="modal-btn-primary" onClick={handleSave} disabled={!name || submitting}>
            {submitting ? <><span className="btn-spinner" /> {_t('webapp.saving')}</> : _t('webapp.save')}
          </button>
        </div>
      </div>
    </div>
  );
}

// ─── Cancel Ticket Modal ────────────────────────────────────
function CancelTicketModal({ ticket, onConfirm, onClose }) {
  const [reason, setReason] = useState('');
  const REASONS = [
    { id: 'no_longer_need', label: _t('webapp.cancel_reason_no_need') },
    { id: 'come_back_later', label: _t('webapp.cancel_reason_later') },
    { id: 'wrong_service', label: _t('webapp.cancel_reason_wrong_service') },
    { id: 'too_long_wait', label: _t('webapp.cancel_reason_too_long') },
    { id: 'other', label: _t('webapp.cancel_reason_other') },
  ];
  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal-dialog" onClick={e => e.stopPropagation()} style={{ maxWidth: 380 }}>
        <div className="modal-header">
          <h3>{_t('webapp.cancel_modal_title')}</h3>
          <button className="modal-close" onClick={onClose}>&times;</button>
        </div>
        <div className="modal-body">
          <p style={{ fontSize: 13, color: 'var(--d-fg-2)', marginBottom: 16 }} dangerouslySetInnerHTML={{ __html: _t('webapp.cancel_modal_confirm').replace(':ticket', '<strong style="color:var(--nb-green)">' + (ticket?.Code || ticket?.Number || '') + '</strong>') }} />
          <label style={{ fontSize: 12, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.06em', color: 'var(--d-fg-3)', marginBottom: 8, display: 'block' }}>{_t('webapp.cancel_modal_reason')}</label>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
            {REASONS.map(r => (
              <button key={r.id}
                className={`chip ${reason === r.id ? 'chip-active' : ''}`}
                style={{ textAlign: 'left', justifyContent: 'flex-start' }}
                onClick={() => setReason(reason === r.id ? '' : r.id)}>
                {r.label}
              </button>
            ))}
          </div>
        </div>
        <div className="modal-footer">
          <button className="modal-btn-secondary" onClick={onClose}>{_t('webapp.cancel_modal_back')}</button>
          <button className="modal-btn-primary" style={{ background: '#ef4444' }} onClick={() => onConfirm(reason)}>
            {_t('webapp.cancel_modal_btn')}
          </button>
        </div>
      </div>
    </div>
  );
}

// ─── Ticket Upload by Code ──────────────────────────────────
function TicketUploadModal({ onClose, addToast, onSuccess }) {
  const [code, setCode] = useState('');
  const [submitting, setSubmitting] = useState(false);

  const handleSubmit = async () => {
    if (!code.trim()) return;
    setSubmitting(true);
    try {
      const res = await API.post('/tickets/upload', { code: code.trim() });
      if (res.message === 'success') {
        addToast(_t('webapp.associate_success'), 'success');
        onSuccess && onSuccess();
        onClose();
      } else {
        addToast(res.detail || _t('webapp.associate_error'), 'error');
      }
    } catch(e) { addToast(_t('webapp.eval_connection_error'), 'error'); }
    setSubmitting(false);
  };

  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal-dialog" onClick={e => e.stopPropagation()} style={{ maxWidth: 360 }}>
        <div className="modal-header">
          <h3>{_t('webapp.associate_ticket')}</h3>
          <button className="modal-close" onClick={onClose}>&times;</button>
        </div>
        <div className="modal-body">
          <p style={{ fontSize: 13, color: 'var(--d-fg-2)', marginBottom: 16 }}>
            {_t('webapp.associate_ticket_desc')}
          </p>
          <input className="modal-input" placeholder={_t('webapp.redeem_code_placeholder')} value={code}
            onChange={e => setCode(e.target.value.trim())}
            onKeyDown={e => e.key === 'Enter' && handleSubmit()}
            autoFocus style={{ textAlign: 'center', fontSize: 20, fontWeight: 700, letterSpacing: 2 }} />
        </div>
        <div className="modal-footer">
          <button className="modal-btn-secondary" onClick={onClose}>{_t('webapp.cancel')}</button>
          <button className="modal-btn-primary" onClick={handleSubmit} disabled={!code.trim() || submitting}>
            {submitting ? <><span className="btn-spinner" /> {_t('webapp.associating')}</> : _t('webapp.associate_btn')}
          </button>
        </div>
      </div>
    </div>
  );
}

// ─── Beauty/Barber Booking Flow ─────────────────────────────
function BeautyBookingFlow({ agency, service, company, onClose, onBooked, addToast, signedIn, platformFee = 0 }) {
  const [step, setStep] = useState('barbers'); // barbers | subject | slots
  const [barbers, setBarbers] = useState([]);
  const [subjects, setSubjects] = useState([]);
  const [allowOther, setAllowOther] = useState(false);
  const [selectedBarber, setSelectedBarber] = useState(null);
  const [selectedSubject, setSelectedSubject] = useState(null);
  const [customSubject, setCustomSubject] = useState('');
  const [selectedDate, setSelectedDate] = useState('');
  const [slots, setSlots] = useState([]);
  const [slotsDuration, setSlotsDuration] = useState(30);
  const [selectedTime, setSelectedTime] = useState('');
  const [notes, setNotes] = useState('');
  const [imagePreview, setImagePreview] = useState(null);
  const [loading, setLoading] = useState(true);
  const [slotsLoading, setSlotsLoading] = useState(false);
  const [submitting, setSubmitting] = useState(false);
  const fileRef = useRef(null);

  const agencyHash = agency.Hash || agency.Token || agency.hash;
  const serviceId = service.Hash || service.hash || service.ID;
  const companyHash = company?.hash || company?.Hash || '';

  // Load barbers + subjects
  useEffect(() => {
    setLoading(true);
    let url = `/data/agencies/${agencyHash}/barbers`;
    if (serviceId) url += `?service=${encodeURIComponent(serviceId)}`;
    API.get(url).then(res => {
      if (res.message === 'success') {
        setBarbers(Array.isArray(res.data) ? res.data : []);
        setSubjects(res.subjects || []);
        setAllowOther(res.allowOther || false);
      }
      setLoading(false);
    }).catch(() => setLoading(false));
  }, [agencyHash, serviceId]);

  // Generate next 14 dates with shift info
  const bookableDates = useMemo(() => {
    if (!selectedBarber?.weekSchedule) return [];
    const DAYS = ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb'];
    const MONTHS = ['Jan','Fev','Mar','Abr','Mai','Jun','Jul','Ago','Set','Out','Nov','Dez'];
    const dates = [];
    const today = new Date();
    for (let i = 0; i < 14; i++) {
      const d = new Date(today); d.setDate(today.getDate() + i);
      const dow = d.getDay();
      const hasShift = selectedBarber.weekSchedule[String(dow)]?.length > 0;
      dates.push({
        value: d.toISOString().split('T')[0],
        dayLabel: i === 0 ? 'Hoje' : DAYS[dow],
        dayNum: d.getDate(),
        month: MONTHS[d.getMonth()],
        isToday: i === 0,
        hasShift,
      });
    }
    return dates;
  }, [selectedBarber]);

  // Load slots when barber + date selected
  useEffect(() => {
    if (!selectedBarber || !selectedDate) return;
    setSlotsLoading(true); setSlots([]); setSelectedTime('');
    const params = {
      agency: agencyHash, service: serviceId,
      operator: selectedBarber.id, date: selectedDate,
    };
    if (selectedSubject) params.subject_id = selectedSubject;
    API.get('/data/beauty/available-slots', params).then(res => {
      if (res.message === 'success' && res.data) {
        setSlots(res.data.absent ? [] : (res.data.slots || []));
        setSlotsDuration(res.data.duration || 30);
      }
      setSlotsLoading(false);
    }).catch(() => setSlotsLoading(false));
  }, [selectedBarber?.id, selectedDate, selectedSubject]);

  const selectBarber = (b) => {
    setSelectedBarber(b);
    setSelectedDate('');
    setSelectedTime('');
    setSlots([]);
    if (subjects.length > 0 || allowOther) {
      setStep('subject');
    } else {
      setStep('slots');
      // Auto-select first available date
      const firstDate = bookableDates.find(d => d.hasShift);
      // Will be recalculated when barber changes, use timeout
      setTimeout(() => {
        const d = new Date(); setSelectedDate(d.toISOString().split('T')[0]);
      }, 0);
    }
  };

  const handleImageUpload = (e) => {
    const file = e.target.files?.[0];
    if (!file) return;
    if (file.size > 5 * 1024 * 1024) { addToast('Imagem demasiado grande (max 5MB)', 'error'); return; }
    const reader = new FileReader();
    reader.onload = () => setImagePreview(reader.result);
    reader.readAsDataURL(file);
  };

  // Price & prepayment detection
  const servicePrice = service.Price || null;
  const serviceCurrency = service.PriceCurrency || 'CVE';
  const allowPrepayment = parseInt(service.AllowPrepayment) || 0;
  // Active price: variant price (if subject selected) or service base price
  const activeSubject = selectedSubject ? subjects.find(s => s.id === selectedSubject) : null;
  const activePrice = activeSubject?.price ?? servicePrice;
  const activeCurrency = activeSubject?.currency ?? serviceCurrency;
  const hasPrice = activePrice && activePrice > 0;
  const canPrepay = hasPrice && allowPrepayment >= 1;
  const hasFee = platformFee > 0 && hasPrice;
  const totalWithFee = hasPrice ? parseFloat(activePrice) + platformFee : 0;
  const prepayOnly = hasPrice && allowPrepayment >= 2;

  const handleBook = async () => {
    if (!signedIn) { addToast('Faz login para agendar.', 'error'); return; }
    if (prepayOnly) { addToast('Este serviço requer pagamento antecipado.', 'error'); return; }
    setSubmitting(true);
    try {
      if (selectedDate && selectedTime) {
        const bookParams = {
          agency: agencyHash, service: serviceId,
          operator_id: selectedBarber.id,
          date: selectedDate, time: selectedTime,
        };
        if (selectedSubject) bookParams.subject_id = selectedSubject;
        if (notes.trim()) bookParams.notes = notes.trim();
        if (customSubject.trim()) bookParams.custom_subject = customSubject.trim();
        if (imagePreview) bookParams.image = imagePreview;

        const res = await API.post('/beauty/book', bookParams);
        if (res.message === 'success') {
          const dateFormatted = selectedDate.split('-').reverse().join('/');
          addToast(`Agendamento confirmado: ${dateFormatted} ${selectedTime}`, 'success', 5000);
          onBooked(res.data);
          onClose();
        } else {
          addToast(res.detail || res.message || _t('webapp.error_schedule'), 'error');
        }
      } else {
        const params = {
          agency: agencyHash, service: serviceId, company: companyHash,
          preferred_operator: selectedBarber.id,
        };
        if (notes.trim()) params.notes = notes.trim();
        if (selectedSubject) params.subject_id = selectedSubject;
        if (customSubject.trim()) params.custom_subject = customSubject.trim();

        const res = await API.post('/tickets/print', params);
        if (res.message === 'success' && res.data) {
          addToast(`Senha ${res.data.Code || res.data.Number} emitida!`, 'success');
          if (imagePreview && res.data.TicketHash) {
            API.post(`/tickets/${res.data.TicketHash}/reference-image`, { image: imagePreview }).catch(() => {});
          }
          onBooked(res.data);
          onClose();
        } else {
          addToast(res.detail || res.message || _t('webapp.error_issue_ticket'), 'error');
        }
      }
    } catch(e) { addToast(_t('webapp.eval_connection_error'), 'error'); }
    setSubmitting(false);
  };

  // Pay & Book — opens SISP payment
  const handleBookAndPay = async () => {
    if (!signedIn) { addToast('Faz login para agendar.', 'error'); return; }
    setSubmitting(true);
    try {
      const params = {
        agency: agencyHash, service: serviceId,
        return_path: location.origin + location.pathname.replace(/\/(webapp|web)$/, '/payment-return'),
      };
      if (companyHash) params.company = companyHash;
      if (selectedBarber) params.preferred_operator = selectedBarber.id;
      if (notes.trim()) params.notes = notes.trim();

      if (selectedDate && selectedTime) {
        params.operator_id = selectedBarber.id;
        params.date = selectedDate;
        params.time = selectedTime;
        if (selectedSubject) params.subject_id = selectedSubject;
        if (customSubject.trim()) params.custom_subject = customSubject.trim();
        if (imagePreview) params.image = imagePreview;
      }

      const endpoint = (selectedDate && selectedTime) ? '/beauty/book-and-pay' : '/tickets/print-prepaid';
      const res = await API.post(endpoint, params);

      if (res.message === 'success' && res.data?.redirect_html) {
        onClose();
        document.open();
        document.write(res.data.redirect_html);
        document.close();
      } else {
        addToast(res.detail || res.data || _t('webapp.error_generic'), 'error');
      }
    } catch(e) { addToast(_t('webapp.eval_connection_error'), 'error'); }
    setSubmitting(false);
  };

  const barberInitials = (name) => {
    if (!name) return '?';
    const parts = name.trim().split(/\s+/);
    return parts.length >= 2 ? (parts[0][0] + parts[parts.length-1][0]).toUpperCase() : parts[0].substring(0,2).toUpperCase();
  };

  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal-dialog" onClick={e => e.stopPropagation()} style={{ maxWidth: 520, maxHeight: '90vh', display: 'flex', flexDirection: 'column' }}>
        <div className="modal-header">
          <h3>
            {step === 'barbers' ? 'Escolhe o profissional' : step === 'subject' ? 'Tipo de serviço' : 'Agendar horário'}
          </h3>
          <button className="modal-close" onClick={onClose}>&times;</button>
        </div>
        <div className="modal-body" style={{ overflowY: 'auto', flex: 1 }}>

          {/* ── Step 1: Barber selection ── */}
          {step === 'barbers' && (
            loading ? <SkeletonRows count={3} /> : (
              <>
                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 10 }}>
                  {barbers.map(b => (
                    <button key={b.id} onClick={() => b.available && !b.absent && selectBarber(b)}
                      style={{
                        display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6, padding: 14,
                        background: selectedBarber?.id === b.id ? 'var(--d-bg-surface-3)' : 'var(--d-bg-surface-2)',
                        border: selectedBarber?.id === b.id ? '2px solid var(--nb-green)' : '1px solid var(--d-border)',
                        borderRadius: 12, cursor: b.available && !b.absent ? 'pointer' : 'not-allowed',
                        opacity: b.available && !b.absent ? 1 : 0.4, color: 'var(--d-fg-1)', position: 'relative',
                      }}
                      disabled={!b.available || b.absent}>
                      {/* Avatar */}
                      <div style={{ position: 'relative' }}>
                        {b.photo ? (
                          <img src={b.photo} alt="" style={{ width: 52, height: 52, borderRadius: '50%', objectFit: 'cover' }} />
                        ) : (
                          <div style={{ width: 52, height: 52, borderRadius: '50%', background: 'var(--nb-green)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--nb-teal-ink)', fontWeight: 700, fontSize: 16 }}>
                            {barberInitials(b.name)}
                          </div>
                        )}
                        {/* Online indicator */}
                        <span style={{
                          position: 'absolute', bottom: 2, right: 2, width: 10, height: 10, borderRadius: '50%',
                          background: b.online ? 'var(--nb-green)' : 'var(--d-fg-muted)',
                          border: '2px solid var(--d-bg-surface-2)',
                        }} />
                      </div>
                      <span style={{ fontSize: 13, fontWeight: 500 }}>{b.name.split(' ')[0]}</span>
                      {/* Service tags */}
                      {b.services?.length > 0 && (
                        <div style={{ display: 'flex', gap: 3, flexWrap: 'wrap', justifyContent: 'center' }}>
                          {b.services.slice(0,3).map((svc, i) => (
                            <span key={i} style={{ fontSize: 9, padding: '1px 5px', borderRadius: 4, background: 'var(--d-bg-surface-3)', color: 'var(--d-fg-3)' }}>
                              {svc.abbreviation || svc.name?.substring(0,3)}
                            </span>
                          ))}
                          {b.services.length > 3 && <span style={{ fontSize: 9, color: 'var(--d-fg-muted)' }}>+{b.services.length - 3}</span>}
                        </div>
                      )}
                      {/* Schedule */}
                      {b.schedule && <span style={{ fontSize: 10, color: 'var(--d-fg-3)' }}>{b.schedule.start} - {b.schedule.end}</span>}
                      {b.absent && <span style={{ fontSize: 11, color: 'var(--nb-danger)' }}>Ausente</span>}
                    </button>
                  ))}
                </div>
                {barbers.length === 0 && <p style={{ textAlign: 'center', color: 'var(--d-fg-3)', padding: 20 }}>Nenhum profissional disponível.</p>}
              </>
            )
          )}

          {/* ── Step 2: Subject/type selection ── */}
          {step === 'subject' && (
            <>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 16 }}>
                <button style={{ background:'none', border:'none', cursor:'pointer', color:'var(--d-fg-2)' }} onClick={() => setStep('barbers')}>
                  <Ico name="arrowL" size={16} />
                </button>
                <span style={{ fontSize: 13, color: 'var(--d-fg-2)' }}>{selectedBarber?.name}</span>
              </div>
              <label className="modal-label">TIPO DE SERVIÇO</label>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginBottom: 16 }}>
                {subjects.map(sub => (
                  <button key={sub.id} className={`chip ${selectedSubject === sub.id ? 'chip-active' : ''}`}
                    onClick={() => { setSelectedSubject(selectedSubject === sub.id ? null : sub.id); setCustomSubject(''); }}>
                    <span>{sub.name}</span>
                    {sub.duration && <span style={{ fontSize: 10, opacity: 0.7, marginLeft: 4 }}>{sub.duration}min</span>}
                    {sub.price != null && <span style={{ fontSize: 10, opacity: 0.7, marginLeft: 4 }}>{Math.round(sub.price)} CVE</span>}
                  </button>
                ))}
                {allowOther && (
                  <button className={`chip ${!selectedSubject && customSubject ? 'chip-active' : ''}`}
                    onClick={() => { setSelectedSubject(null); }}>
                    Outro
                  </button>
                )}
              </div>
              {allowOther && !selectedSubject && (
                <input className="modal-input" placeholder={_t('webapp.custom_type_placeholder')} maxLength={100}
                  value={customSubject} onChange={e => setCustomSubject(e.target.value)} style={{ marginBottom: 16 }} />
              )}
              <button className="modal-btn-primary" style={{ width: '100%' }}
                onClick={() => { setStep('slots'); if (bookableDates.length > 0) setSelectedDate(bookableDates.find(d => d.hasShift)?.value || ''); }}
                disabled={subjects.length > 0 && !selectedSubject && !customSubject.trim()}>
                Continuar
              </button>
            </>
          )}

          {/* ── Step 3: Date + Time + Notes + Image ── */}
          {step === 'slots' && selectedBarber && (
            <>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 16 }}>
                <button style={{ background:'none', border:'none', cursor:'pointer', color:'var(--d-fg-2)' }}
                  onClick={() => setStep(subjects.length > 0 || allowOther ? 'subject' : 'barbers')}>
                  <Ico name="arrowL" size={16} />
                </button>
                <span style={{ fontSize: 13, color: 'var(--d-fg-2)' }}>
                  {selectedBarber.name}
                  {selectedSubject && subjects.find(s => s.id === selectedSubject) && ` · ${subjects.find(s => s.id === selectedSubject).name}`}
                </span>
              </div>

              {/* Date strip */}
              <label className="modal-label">DATA</label>
              <div style={{ display: 'flex', gap: 6, overflowX: 'auto', paddingBottom: 8, marginBottom: 12 }}>
                {bookableDates.map(d => (
                  <button key={d.value}
                    className={`chip ${selectedDate === d.value ? 'chip-active' : ''}`}
                    onClick={() => d.hasShift && setSelectedDate(d.value)}
                    disabled={!d.hasShift}
                    style={{ flexShrink: 0, display: 'flex', flexDirection: 'column', padding: '6px 12px', minWidth: 48, opacity: d.hasShift ? 1 : 0.3 }}>
                    <span style={{ fontSize: 9 }}>{d.dayLabel}</span>
                    <span style={{ fontSize: 16, fontWeight: 600 }}>{d.dayNum}</span>
                    <span style={{ fontSize: 8, color: 'var(--d-fg-3)' }}>{d.month}</span>
                  </button>
                ))}
              </div>

              {/* Time slots */}
              {selectedDate && (
                <>
                  <label className="modal-label">
                    HORÁRIO
                    {slotsDuration > 0 && <span style={{ fontWeight: 400, marginLeft: 6 }}>{slotsDuration} min</span>}
                  </label>
                  {slotsLoading ? (
                    <div style={{ textAlign: 'center', padding: 12 }}><SkeletonRows count={1} /></div>
                  ) : slots.length > 0 ? (
                    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginBottom: 12 }}>
                      {slots.map(s => (
                        <button key={s.time} className={`chip ${selectedTime === s.time ? 'chip-active' : ''}`}
                          onClick={() => s.available && setSelectedTime(selectedTime === s.time ? '' : s.time)}
                          disabled={!s.available}
                          style={{ opacity: s.available ? 1 : 0.3 }}>
                          {s.time}
                        </button>
                      ))}
                    </div>
                  ) : (
                    <p style={{ color: 'var(--d-fg-3)', fontSize: 13, textAlign: 'center', margin: '8px 0 12px' }}>Sem horários disponíveis para esta data.</p>
                  )}
                </>
              )}

              {/* Selected slot confirmation */}
              {selectedDate && selectedTime && (
                <div style={{ background: 'var(--d-bg-surface-3)', borderRadius: 8, padding: '8px 12px', marginBottom: 12, fontSize: 13, display: 'flex', alignItems: 'center', gap: 8 }}>
                  <Ico name="clock" size={14} />
                  <span>{selectedDate.split('-').reverse().join('/')} — {selectedTime}</span>
                  <span style={{ opacity: 0.5 }}>·</span>
                  <span>{slotsDuration} min</span>
                </div>
              )}

              {/* Reference image */}
              <label className="modal-label">FOTO DE REFERÊNCIA (opcional)</label>
              {!imagePreview ? (
                <button onClick={() => fileRef.current?.click()}
                  style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8, width: '100%', padding: 16,
                    border: '1px dashed var(--d-border)', borderRadius: 8, background: 'none', color: 'var(--d-fg-3)', cursor: 'pointer', marginBottom: 12 }}>
                  <Ico name="user" size={20} />
                  <span style={{ fontSize: 12 }}>Clica para enviar foto</span>
                </button>
              ) : (
                <div style={{ position: 'relative', display: 'inline-block', marginBottom: 12 }}>
                  <img src={imagePreview} alt="" style={{ width: 80, height: 80, borderRadius: 8, objectFit: 'cover' }} />
                  <button onClick={() => setImagePreview(null)}
                    style={{ position: 'absolute', top: -6, right: -6, width: 20, height: 20, borderRadius: '50%', background: 'var(--nb-danger)', color: '#fff', border: 'none', cursor: 'pointer', fontSize: 12, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                    &times;
                  </button>
                </div>
              )}
              <input ref={fileRef} type="file" accept="image/*" onChange={handleImageUpload} style={{ display: 'none' }} />

              {/* Notes */}
              <label className="modal-label">NOTAS (opcional)</label>
              <textarea className="modal-input" rows={2} placeholder={_t('webapp.svc_details_placeholder')}
                value={notes} onChange={e => setNotes(e.target.value)} maxLength={500}
                style={{ resize: 'vertical', marginBottom: 12 }} />
            </>
          )}
        </div>

        {/* Footer actions */}
        {step === 'slots' && (
          <div className="modal-footer" style={{ flexDirection: 'column', gap: 8 }}>
            {/* Price display with fee breakdown */}
            {hasPrice && (
              hasFee ? (
                <div style={{ background: 'var(--d-bg-surface-2)', borderRadius: 8, padding: '8px 14px', width: '100%', fontSize: 12 }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', padding: '2px 0', color: 'var(--d-fg-3)' }}>
                    <span>{_t('webapp.receipt_service_price') || 'Serviço'}</span>
                    <span>{parseInt(activePrice).toLocaleString('pt')} {activeCurrency}</span>
                  </div>
                  <div style={{ display: 'flex', justifyContent: 'space-between', padding: '2px 0', color: 'var(--d-fg-3)' }}>
                    <span>{_t('webapp.receipt_platform_fee') || 'Taxa de plataforma'}</span>
                    <span>{parseInt(platformFee).toLocaleString('pt')} {activeCurrency}</span>
                  </div>
                  <div style={{ borderTop: '1px solid var(--d-border)', margin: '4px 0' }}></div>
                  <div style={{ display: 'flex', justifyContent: 'space-between', padding: '2px 0', fontWeight: 700 }}>
                    <span>Total</span>
                    <span style={{ color: 'var(--nb-green)', fontSize: 14 }}>{parseInt(totalWithFee).toLocaleString('pt')} {activeCurrency}</span>
                  </div>
                </div>
              ) : (
                <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'baseline', gap: 6, fontSize: 13, color: 'var(--d-fg-2)' }}>
                  <span>{activeSubject ? '' : 'A partir de '}</span>
                  <span style={{ fontSize: 18, fontWeight: 700, color: 'var(--nb-green)' }}>{activePrice}$</span>
                  <span style={{ fontSize: 11 }}>{activeCurrency}</span>
                </div>
              )
            )}
            {selectedDate && selectedTime ? (
              <>
                {/* Pay & Book button (primary when prepay available) */}
                {canPrepay && (
                  <button className="pay-btn-primary" onClick={handleBookAndPay} disabled={submitting} style={{ width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6 }}>
                    {submitting ? <><span className="btn-spinner" /> A processar...</> : <><Ico name="lock" size={14} /> Pagar e Agendar {selectedTime}</>}
                  </button>
                )}
                {/* Regular book button (secondary if prepay available, hidden if prepayOnly) */}
                {!prepayOnly && (
                  <button className={canPrepay ? 'modal-btn-secondary' : 'modal-btn-primary'} onClick={handleBook} disabled={submitting} style={{ width: '100%' }}>
                    {submitting ? <><span className="btn-spinner" /> A agendar...</> : `Agendar ${selectedTime} com ${selectedBarber?.name.split(' ')[0]}`}
                  </button>
                )}
              </>
            ) : (
              <button className="modal-btn-primary" onClick={handleBook} disabled={submitting} style={{ width: '100%' }}>
                {submitting ? <><span className="btn-spinner" /> A emitir...</> : `Tirar senha agora com ${selectedBarber?.name.split(' ')[0]}`}
              </button>
            )}
          </div>
        )}
      </div>
    </div>
  );
}

// ─── Onboarding Tour ────────────────────────────────────────
function OnboardingTour({ onClose }) {
  const [stepIdx, setStepIdx] = useState(0);

  const STEPS = [
    { icon: '👋', title: _t('webapp.onb_welcome_title'), desc: _t('webapp.onb_welcome_desc') },
    { icon: '📂', title: _t('webapp.onb_categories_title'), desc: _t('webapp.onb_categories_desc') },
    { icon: '⭐', title: _t('webapp.onb_favourites_title'), desc: _t('webapp.onb_favourites_desc') },
    { icon: '🎫', title: _t('webapp.onb_tickets_title'), desc: _t('webapp.onb_tickets_desc') },
    { icon: '🗺️', title: _t('webapp.onb_map_title'), desc: _t('webapp.onb_map_desc') },
    { icon: '🔔', title: _t('webapp.onb_notif_title'), desc: _t('webapp.onb_notif_desc') },
    { icon: '🔍', title: _t('webapp.onb_search_title'), desc: _t('webapp.onb_search_desc') },
    { icon: '👤', title: _t('webapp.onb_profile_title'), desc: _t('webapp.onb_profile_desc') },
    { icon: '✅', title: _t('webapp.onb_done_title'), desc: _t('webapp.onb_done_desc') },
  ];

  const step = STEPS[stepIdx];
  const isLast = stepIdx === STEPS.length - 1;

  const finish = () => {
    localStorage.setItem('nb_onboarding_done', '1');
    onClose();
  };

  return (
    <div className="modal-overlay" onClick={finish}>
      <div className="modal-dialog" onClick={e => e.stopPropagation()} style={{ maxWidth: 400, textAlign: 'center' }}>
        <div className="modal-body" style={{ padding: 32 }}>
          <div style={{ fontSize: 48, marginBottom: 16 }}>{step.icon}</div>
          <h3 style={{ color: 'var(--d-fg-1)', marginBottom: 8, fontSize: 18 }}>{step.title}</h3>
          <p style={{ color: 'var(--d-fg-2)', fontSize: 14, lineHeight: 1.5 }}>{step.desc}</p>

          {/* Progress dots */}
          <div style={{ display: 'flex', justifyContent: 'center', gap: 6, margin: '24px 0 16px' }}>
            {STEPS.map((_, i) => (
              <div key={i} style={{
                width: 8, height: 8, borderRadius: '50%',
                background: i === stepIdx ? 'var(--nb-green)' : 'var(--d-bg-surface-3)',
                transition: 'background 0.2s',
              }} />
            ))}
          </div>

          <div style={{ display: 'flex', gap: 10, justifyContent: 'center' }}>
            {stepIdx > 0 && (
              <button className="modal-btn-secondary" onClick={() => setStepIdx(s => s - 1)}>{_t('webapp.onb_prev')}</button>
            )}
            {isLast ? (
              <button className="modal-btn-primary" onClick={finish}>{_t('webapp.onb_start')}</button>
            ) : (
              <button className="modal-btn-primary" onClick={() => setStepIdx(s => s + 1)}>{_t('webapp.onb_next')}</button>
            )}
          </div>
          <button onClick={finish} style={{ background: 'none', border: 'none', color: 'var(--d-fg-muted)', fontSize: 12, marginTop: 12, cursor: 'pointer' }}>
            {_t('webapp.onb_skip')}
          </button>
        </div>
      </div>
    </div>
  );
}

// ─── Leaflet Map View (real map) ────────────────────────────
function RealMapView({ onBack, locationGranted, userLat, userLng, onSelectAgency }) {
  const mapRef = useRef(null);
  const mapInstanceRef = useRef(null);
  const markersLayerRef = useRef(null);
  const markersMapRef = useRef({});
  const iconCacheRef = useRef({});
  const popupReqRef = useRef(0);
  const [agencies, setAgencies] = useState([]);
  const [loading, setLoading] = useState(true);
  const [companyFilter, setCompanyFilter] = useState('');
  const [stats, setStats] = useState({ agencies: 0, companies: 0 });

  const hasGeo = locationGranted && userLat && userLng;

  // ── Utility helpers ──
  const esc = (s) => { if (!s) return ''; const d = document.createElement('div'); d.appendChild(document.createTextNode(s)); return d.innerHTML; };
  const haversineKm = (lat1, lng1, lat2, lng2) => {
    const R = 6371, dLat = (lat2 - lat1) * Math.PI / 180, dLng = (lng2 - lng1) * Math.PI / 180;
    const a = Math.sin(dLat / 2) ** 2 + Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) * Math.sin(dLng / 2) ** 2;
    return R * 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
  };
  const fmtDist = (km) => km < 1 ? Math.round(km * 1000) + ' m' : km.toFixed(1) + ' km';
  const fmtDur = (sec) => {
    if (!sec || sec <= 0) return '0'; if (sec < 60) return '< 1 min';
    const m = Math.round(sec / 60); if (m < 60) return m + ' min';
    const h = Math.floor(m / 60), r = m % 60;
    return r === 0 ? h + 'h' : h + 'h ' + r + 'min';
  };

  const createNhaBexIcon = (color) => {
    color = color || '#02A586';
    if (iconCacheRef.current[color]) return iconCacheRef.current[color];
    const svg = '<svg xmlns="http://www.w3.org/2000/svg" width="36" height="46" viewBox="0 0 36 46" style="display:block">' +
      '<path d="M18 0C8.06 0 0 8.06 0 18c0 12.6 18 28 18 28s18-15.4 18-28C36 8.06 27.94 0 18 0z" fill="' + color + '"/>' +
      '<g transform="translate(18,16) scale(0.19) translate(-311.5,-68.5)">' +
        '<path fill="#fff" d="M270.192 55.5216C275.814 54.1208 278.245 50.6793 280.056 46.373C285.229 34.1115 290.747 21.9538 296.3 9.79607C298.808 3.71893 304.834-0.191264 311.389 0.00761824H311.855C318.411-0.196452 324.441 3.71547 326.944 9.79607C332.496 21.9019 338.015 34.1115 343.188 46.373C344.999 50.6793 347.43 54.1208 353.069 55.5216C358.242 56.8187 359.312 59.6376 359.07 63.8228C358.001 83.0711 357.346 102.337 356.535 121.602C356.363 125.753 356.001 129.903 355.88 134.054C355.88 135.783 355.294 136.441 352.966 136.544C343.912 136.977 343.947 137.046 340.808 130.076C335.428 118.143 330.117 106.193 324.529 94.3122C322.195 89.2745 317.137 86.037 311.596 86.037C306.055 86.037 300.998 89.2745 298.663 94.3122C293.075 106.193 287.764 118.143 282.384 130.076C279.245 136.994 279.28 136.994 270.226 136.544C267.898 136.441 267.364 135.749 267.312 134.054C267.191 129.903 266.829 125.753 266.657 121.602C265.829 102.337 265.208 83.0711 264.122 63.8228C263.932 59.6376 264.95 56.8187 270.192 55.5216Z"/>' +
      '</g></svg>';
    iconCacheRef.current[color] = L.divIcon({ html: svg, className: 'nhb-map-pin', iconSize: [36, 46], iconAnchor: [18, 46], popupAnchor: [0, -42] });
    return iconCacheRef.current[color];
  };

  const fetchRoute = async (fromLat, fromLng, toLat, toLng) => {
    try {
      const url = 'https://router.project-osrm.org/route/v1/driving/' + fromLng + ',' + fromLat + ';' + toLng + ',' + toLat + '?overview=false';
      const res = await fetch(url);
      const data = await res.json();
      if (data.code === 'Ok' && data.routes?.[0]) return { distance_km: data.routes[0].distance / 1000, duration_sec: data.routes[0].duration };
    } catch (_) {}
    return null;
  };

  const fetchAvgWait = async (hash) => {
    try {
      const res = await API.get('/data/agencies/' + hash + '/services-monitoring');
      if (res.message === 'success' && Array.isArray(res.data?.services)) {
        let totalWaiting = 0, totalWaitSec = 0, waitCount = 0;
        res.data.services.forEach(s => {
          totalWaiting += parseInt(s.People || '0', 10);
          const sec = parseInt(s.avg_wait_seconds || '0', 10);
          if (sec > 0) { totalWaitSec += sec; waitCount++; }
        });
        const avgSec = waitCount > 0 ? Math.round(totalWaitSec / waitCount) : 0;
        return { avgWaitStr: avgSec > 0 ? fmtDur(avgSec) : null, totalWaiting };
      }
    } catch (_) {}
    return null;
  };

  // ── Load agencies ──
  useEffect(() => {
    const params = {};
    if (hasGeo) { params.lat = userLat; params.lng = userLng; params.radius = 50; }
    API.get('/data/agencies/map', params).then(res => {
      if (res.message === 'success') {
        const list = (Array.isArray(res.data) ? res.data : (res.data?.agencies || [])).filter(a => a.Lat && a.Long && parseFloat(a.Lat) !== 0 && parseFloat(a.Long) !== 0);
        setAgencies(list);
      }
      if (res.stats) setStats(res.stats);
      setLoading(false);
    }).catch(() => setLoading(false));
  }, [locationGranted, userLat, userLng]);

  // ── Derived: companies list and colors ──
  const { companies, companyColors } = useMemo(() => {
    const seen = {};
    const colors = {};
    agencies.forEach(a => {
      if (a.Company && !seen[a.Company]) {
        seen[a.Company] = true;
        if (a.CompanyColor) colors[a.Company] = a.CompanyColor;
      }
    });
    return { companies: Object.keys(seen).sort((a, b) => a.localeCompare(b)), companyColors: colors };
  }, [agencies]);

  const filteredAgencies = useMemo(() => {
    if (!companyFilter) return agencies;
    return agencies.filter(a => a.Company === companyFilter);
  }, [agencies, companyFilter]);

  // ── Render markers ──
  const renderMarkers = useCallback((map, list, doFitBounds) => {
    if (!map || !window.L) return;
    if (markersLayerRef.current) { map.removeLayer(markersLayerRef.current); markersLayerRef.current = null; }
    markersMapRef.current = {};
    if (list.length === 0) return;

    const bounds = L.latLngBounds();
    const markers = L.layerGroup();

    list.forEach(a => {
      const lat = parseFloat(a.Lat), lng = parseFloat(a.Long);
      if (isNaN(lat) || isNaN(lng) || lat === 0 || lng === 0) return;

      const dirUrl = 'https://www.google.com/maps/dir/?api=1&destination=' + lat + ',' + lng + (hasGeo ? '&origin=' + userLat + ',' + userLng : '');
      const straightDist = hasGeo ? fmtDist(haversineKm(userLat, userLng, lat, lng)) : '';
      const infoId = 'nhb-info-' + (a.Hash || Math.random().toString(36).substr(2, 6));

      // Description
      let descHtml = '';
      if (a.CompanyDescription) {
        const desc = a.CompanyDescription.length > 120 ? a.CompanyDescription.substring(0, 120) + '...' : a.CompanyDescription;
        descHtml = '<div style="font-size:11px;color:#555;margin-top:6px;line-height:1.4;">' + esc(desc) + '</div>';
      }

      // Hours
      let hoursHtml = '';
      if (a.TimeTable && a.TimeTable.findTimeTable > 0) {
        hoursHtml = '<div style="font-size:11px;margin-top:6px;color:#333;">' +
          '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#02A586" stroke-width="2" style="vertical-align:-2px;margin-right:3px;"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>' +
          '<strong>' + (a.TimeTable.Week || '') + '</strong> — ' + (a.TimeTable.startTime || '') + ' - ' + (a.TimeTable.endTime || '') + '</div>';
      } else {
        hoursHtml = '<div style="font-size:11px;margin-top:6px;color:#c62828;">' +
          '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#c62828" stroke-width="2" style="vertical-align:-2px;margin-right:3px;"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>' +
          '' + _t('webapp.map_closed_today') + '</div>';
      }

      // Dynamic info section
      let infoHtml = '';
      if (hasGeo || a.Hash) {
        infoHtml = '<div id="' + infoId + '" style="margin-top:8px;padding:8px 10px;background:#f5f7fa;border-radius:6px;font-size:11px;line-height:1.6;">';
        if (hasGeo) {
          infoHtml += '<div style="display:flex;align-items:center;gap:6px;">' +
            '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#1565C0" stroke-width="2"><path d="M3 11l19-9-9 19-2-8-8-2z"/></svg>' +
            '<span><strong>' + _t('webapp.map_distance') + ':</strong> ' + straightDist + '</span></div>';
          infoHtml += '<div style="display:flex;align-items:center;gap:6px;" data-travel="1">' +
            '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#02A586" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>' +
            '<span><strong>' + _t('webapp.map_travel_time') + ':</strong> <em>' + _t('webapp.map_calculating') + '</em></span></div>';
        }
        if (a.Hash) {
          infoHtml += '<div style="display:flex;align-items:center;gap:6px;" data-wait="1">' +
            '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#E65100" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M9 12h6M12 9v6"/></svg>' +
            '<span><strong>' + _t('webapp.map_avg_wait') + ':</strong> <em>' + _t('webapp.map_calculating') + '</em></span></div>';
        }
        infoHtml += '</div>';
      }

      // Popup HTML
      const popupHtml = '<div style="min-width:200px;max-width:280px;font-family:sans-serif;">' +
        (a.LogoURL ? '<img src="' + esc(a.LogoURL) + '" style="height:28px;margin-bottom:6px;" alt="">' : '') +
        '<div style="font-weight:600;font-size:13px;">' + esc(a.Name) + '</div>' +
        '<div style="font-size:12px;color:#666;">' + esc(a.Company) + '</div>' +
        descHtml +
        (a.Street ? '<div style="font-size:11px;margin-top:4px;">' + esc(a.Street) + '</div>' : '') +
        (a.City ? '<div style="font-size:11px;color:#888;">' + [a.City, a.Island].filter(Boolean).map(s => esc(s)).join(', ') + '</div>' : '') +
        (a.Phone ? '<div style="margin-top:4px;"><a href="tel:' + esc(a.Phone) + '" style="font-size:12px;">' + esc(a.Phone) + '</a></div>' : '') +
        hoursHtml +
        infoHtml +
        '<div style="display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;">' +
          '<a href="' + dirUrl + '" target="_blank" rel="noopener" style="display:inline-flex;align-items:center;gap:4px;padding:6px 12px;background:#02A586;color:#fff;border-radius:6px;font-size:12px;font-weight:500;text-decoration:none;">' +
            '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 11l19-9-9 19-2-8-8-2z"/></svg>' + _t('webapp.map_directions') + '</a>' +
          (a.Hash ? '<button data-agency-hash="' + esc(a.Hash) + '" data-agency-name="' + esc(a.Name) + '" data-company-hash="' + esc(a.CompanyHash || a.ID_Company || '') + '" style="display:inline-flex;align-items:center;gap:4px;padding:6px 12px;border:none;cursor:pointer;background:#1565C0;color:#fff;border-radius:6px;font-size:12px;font-weight:500;">' +
            '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="6" y="4" width="12" height="16" rx="1"/><line x1="9" y1="8" x2="15" y2="8"/><line x1="9" y1="11" x2="15" y2="11"/><line x1="9" y1="14" x2="12" y2="14"/></svg>' +
            '' + _t('webapp.map_issue_ticket') + '</button>' : '') +
        '</div></div>';

      const markerColor = (a.Company && companyColors[a.Company]) ? companyColors[a.Company] : '#02A586';
      const marker = L.marker([lat, lng], { icon: createNhaBexIcon(markerColor) }).bindPopup(popupHtml, { maxWidth: 300 });

      // Dynamic data on popup open
      marker.on('popupopen', () => {
        const reqId = ++popupReqRef.current;
        const infoEl = document.getElementById(infoId);
        if (!infoEl) return;

        // Route
        if (hasGeo) {
          fetchRoute(userLat, userLng, lat, lng).then(route => {
            if (reqId !== popupReqRef.current) return;
            const travelEl = infoEl.querySelector('[data-travel]');
            if (!travelEl) return;
            if (route) {
              travelEl.querySelector('span').innerHTML = '<strong>' + _t('webapp.map_travel_time') + ':</strong> ' + fmtDur(route.duration_sec) + ' <span style="color:#888;">(' + fmtDist(route.distance_km) + ')</span>';
              const distEl = travelEl.previousElementSibling;
              if (distEl) distEl.querySelector('span').innerHTML = '<strong>' + _t('webapp.map_distance') + ':</strong> ' + fmtDist(route.distance_km);
            } else {
              travelEl.querySelector('span').innerHTML = '<strong>' + _t('webapp.map_travel_time') + ':</strong> ~' + straightDist + ' <span style="color:#888;font-style:italic;">(' + _t('webapp.map_straight_line') + ')</span>';
            }
          });
        }

        // Wait time
        if (a.Hash) {
          fetchAvgWait(a.Hash).then(info => {
            if (reqId !== popupReqRef.current) return;
            const waitEl = infoEl.querySelector('[data-wait]');
            if (!waitEl) return;
            if (info) {
              const waitText = info.avgWaitStr || _t('webapp.map_no_data');
              waitEl.querySelector('span').innerHTML = '<strong>' + _t('webapp.map_avg_wait') + ':</strong> ' + waitText +
                (info.totalWaiting > 0 ? ' <span style="color:#E65100;">(' + info.totalWaiting + ' ' + _t('webapp.map_people_waiting') + ')</span>' : '');
            } else {
              waitEl.querySelector('span').innerHTML = '<strong>' + _t('webapp.map_avg_wait') + ':</strong> ' + _t('webapp.map_no_data');
            }
          });
        }

        // Bind "Emitir Senha" button inside popup
        const popup = marker.getPopup();
        if (popup) {
          const el = popup.getElement();
          if (el) {
            const btn = el.querySelector('[data-agency-hash]');
            if (btn && !btn._bound) {
              btn._bound = true;
              btn.addEventListener('click', () => {
                if (onSelectAgency) onSelectAgency({
                  Hash: btn.getAttribute('data-agency-hash'),
                  Name: btn.getAttribute('data-agency-name'),
                  CompanyHash: btn.getAttribute('data-company-hash'),
                });
              });
            }
          }
        }
      });

      markers.addLayer(marker);
      bounds.extend([lat, lng]);
      if (a.Hash) markersMapRef.current[a.Hash] = marker;
    });

    markersLayerRef.current = markers;
    markers.addTo(map);

    // Fit bounds
    if (doFitBounds && bounds.isValid()) {
      if (hasGeo) {
        const withDist = list.filter(a => a.Lat && a.Long).map(a => ({
          lat: parseFloat(a.Lat), lng: parseFloat(a.Long), dist: haversineKm(userLat, userLng, parseFloat(a.Lat), parseFloat(a.Long))
        })).sort((a, b) => a.dist - b.dist);
        const nearBounds = L.latLngBounds([[userLat, userLng]]);
        for (let i = 0; i < Math.min(withDist.length, 10); i++) nearBounds.extend([withDist[i].lat, withDist[i].lng]);
        map.fitBounds(nearBounds, { padding: [40, 40], maxZoom: 15 });
      } else {
        map.fitBounds(bounds, { padding: [30, 30], maxZoom: 14 });
      }
    }
  }, [hasGeo, userLat, userLng, companyColors]);

  // ── Initialize Leaflet map ──
  useEffect(() => {
    if (loading || !mapRef.current || typeof L === 'undefined') return;
    if (mapInstanceRef.current) return;

    const center = hasGeo ? [userLat, userLng] : [15.0, -23.6];
    const zoom = hasGeo ? 13 : 8;
    const map = L.map(mapRef.current).setView(center, zoom);
    mapInstanceRef.current = map;

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '&copy; <a href="https://openstreetmap.org">OpenStreetMap</a>', maxZoom: 19
    }).addTo(map);

    // User location marker
    if (hasGeo) {
      L.circleMarker([userLat, userLng], {
        radius: 8, fillColor: '#4285F4', color: '#fff', weight: 2, fillOpacity: 1
      }).addTo(map).bindPopup('A tua localização');
    }

    renderMarkers(map, filteredAgencies, true);

    // Legend
    if (companies.length > 1) {
      const legend = L.control({ position: 'bottomleft' });
      legend.onAdd = () => {
        const div = L.DomUtil.create('div');
        div.style.cssText = 'background:var(--d-bg-surface, #fff);color:var(--d-fg-1, #1a1a1a);padding:8px 12px;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.15);font-size:12px;border:1px solid var(--d-border, rgba(0,0,0,.08));';
        L.DomEvent.disableClickPropagation(div);
        L.DomEvent.disableScrollPropagation(div);
        const title = L.DomUtil.create('div', '', div);
        title.style.cssText = 'font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.5px;opacity:.7;margin-bottom:4px;cursor:pointer;';
        title.textContent = 'Legenda';
        const items = L.DomUtil.create('div', '', div);
        items.style.cssText = 'max-height:180px;overflow-y:auto;';
        companies.forEach(name => {
          const color = companyColors[name] || '#02A586';
          const item = L.DomUtil.create('div', '', items);
          item.style.cssText = 'display:flex;align-items:center;gap:6px;margin:3px 0;';
          item.innerHTML = '<span style="display:inline-block;width:12px;height:12px;border-radius:50%;background:' + color + ';flex-shrink:0;"></span>' +
            '<span style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px;">' + esc(name) + '</span>';
        });
        let collapsed = false;
        title.addEventListener('click', () => { collapsed = !collapsed; items.style.display = collapsed ? 'none' : 'block'; });
        return div;
      };
      legend.addTo(map);
    }

    setTimeout(() => map.invalidateSize(), 200);
    return () => { map.remove(); mapInstanceRef.current = null; };
  }, [loading, agencies]);

  // ── Re-render markers on filter change ──
  useEffect(() => {
    if (!mapInstanceRef.current || loading) return;
    renderMarkers(mapInstanceRef.current, filteredAgencies, false);
  }, [companyFilter]);

  return (
    <div className="map-view">
      <div className="detail-head">
        <button className="back-btn" onClick={onBack}><Ico name="arrowL" /></button>
        <div className="titles">
          <h1><Ico name="map" size={22} /> Mapa de Agências</h1>
          <p>{filteredAgencies.length} agências{hasGeo ? ' · Perto de ti' : ''}</p>
        </div>
        {companies.length > 1 && (
          <select
            value={companyFilter}
            onChange={e => setCompanyFilter(e.target.value)}
            style={{ marginLeft: 'auto', padding: '6px 10px', borderRadius: 8, border: '1px solid var(--d-border)', background: 'var(--d-bg-surface)', color: 'var(--d-fg-1)', fontSize: 13, maxWidth: 200 }}
          >
            <option value="">{_t('webapp.all_companies')}</option>
            {companies.map(c => <option key={c} value={c}>{c}</option>)}
          </select>
        )}
      </div>
      {loading ? <SkeletonRows count={3} /> : (
        <div ref={mapRef} style={{ width: '100%', height: 'calc(100vh - 180px)', borderRadius: 12, overflow: 'hidden' }} />
      )}
    </div>
  );
}

// ─── Pre-Print Dialog (before ticket issue) ────────────────
function PrePrintDialog({ service, agency, company, onConfirm, onCancel }) {
  const [clientTypes, setClientTypes] = useState([]);
  const [selectedType, setSelectedType] = useState(null);
  const [identifier, setIdentifier] = useState('');
  const [description, setDescription] = useState('');
  const [mood, setMood] = useState('');
  const [preference, setPreference] = useState('');
  const [notifyAdvance, setNotifyAdvance] = useState(() => parseInt(localStorage.getItem('nb-notify-advance')) || 3);
  const [wantEmail, setWantEmail] = useState(false);
  const [email, setEmail] = useState('');
  const [loading, setLoading] = useState(true);

  const agencyHash = agency.Hash || agency.Token || agency.hash;
  const companyHash = company?.hash || company?.Hash || '';
  const peopleWaiting = service.People || 0;
  const abbr = service.Abbreviation || (service.Name || '').substring(0, 2).toUpperCase();
  const stateService = service.StateService ?? 1;

  useEffect(() => {
    API.get(`/data/agencies/${agencyHash}/client-types`, { company: companyHash }).then(res => {
      if (res.message === 'success' && Array.isArray(res.data) && res.data.length > 1) {
        setClientTypes(res.data);
      }
      setLoading(false);
    }).catch(() => setLoading(false));
  }, [agencyHash]);

  const MOODS = [
    { id: 'calm', emoji: '\u{1F60C}', label: 'Calmo' },
    { id: 'happy', emoji: '\u{1F60A}', label: 'Contente' },
    { id: 'neutral', emoji: '\u{1F610}', label: 'Neutro' },
    { id: 'anxious', emoji: '\u{1F630}', label: 'Ansioso' },
    { id: 'frustrated', emoji: '\u{1F624}', label: 'Frustrado' },
  ];

  const PREFS = [
    { id: 'quick', icon: 'bolt', label: 'Rápido' },
    { id: 'detailed', icon: 'checklist', label: 'Detalhado' },
    { id: 'empathetic', icon: 'favorite', label: 'Empático' },
    { id: 'formal', icon: 'person', label: 'Formal' },
  ];

  const handleConfirm = () => {
    localStorage.setItem('nb-notify-advance', String(notifyAdvance));
    const extras = {
      client_type: selectedType,
      identifier,
      description,
      mood,
      service_preference: preference,
    };
    if (peopleWaiting > 0) extras.notification = notifyAdvance;
    if (wantEmail && email.trim()) extras.emailToSend = email.trim();
    onConfirm(extras);
  };

  const noDesks = stateService === 0 || stateService === '0';
  const lowQueue = !noDesks && peopleWaiting >= 0 && peopleWaiting <= 2;

  return (
    <div className="modal-overlay" onClick={onCancel}>
      <div className="modal-dialog preprint-dialog" onClick={e => e.stopPropagation()} style={{ maxWidth: 460 }}>

        {/* ── Header banner (like web.php nb-preprint__header) ── */}
        <div className="preprint-header">
          <span className="preprint-abbr">{abbr}</span>
          <div className="preprint-header-info">
            <h3>{service.Name}</h3>
            <p>{agency.Name || agency.name}</p>
          </div>
          <button className="modal-close" onClick={onCancel}>&times;</button>
        </div>

        <div className="modal-body" style={{ padding: '16px 20px' }}>

          {/* ── Queue warnings ── */}
          {noDesks && (
            <div className="preprint-alert preprint-alert--warning">
              <Ico name="alert" size={16} />
              <span>{_t('webapp.no_desk_open')}</span>
            </div>
          )}
          {lowQueue && !noDesks && (
            <div className="preprint-alert">
              <Ico name="info" size={16} />
              <span>{peopleWaiting === 0 ? 'Fila vazia — serás atendido assim que chegares.' : `Apenas ${peopleWaiting} pessoa${peopleWaiting > 1 ? 's' : ''} na fila. Dirija-se ao local.`}</span>
            </div>
          )}

          {/* ── Queue info bar ── */}
          <div className="preprint-queue-bar">
            <div className="preprint-queue-stat">
              <span className="preprint-queue-val">{peopleWaiting}</span>
              <span className="preprint-queue-lbl">Na fila</span>
            </div>
            <div className="preprint-queue-stat">
              <span className="preprint-queue-val">{service.WaitTime || '—'}</span>
              <span className="preprint-queue-lbl">Espera</span>
            </div>
          </div>

          {loading && <p style={{ color: 'var(--d-fg-3)', fontSize: 13 }}>A carregar...</p>}

          {/* ── Client type selection ── */}
          {clientTypes.length > 1 && (
            <div className="preprint-section">
              <label className="preprint-label">Tipo de cliente</label>
              <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
                {clientTypes.map(ct => (
                  <button key={ct.ID} className={`chip ${selectedType === ct.ID ? 'chip-active' : ''}`}
                    onClick={() => setSelectedType(ct.ID)}>
                    {ct.Name}
                  </button>
                ))}
              </div>
            </div>
          )}

          {/* ── Identifier ── */}
          <div className="preprint-section">
            <label className="preprint-label">Nome / Identificação (opcional)</label>
            <input className="modal-input" placeholder={_t('webapp.your_name_placeholder')} value={identifier}
                   onChange={e => setIdentifier(e.target.value)} autoFocus />
          </div>

          {/* ── Description ── */}
          <div className="preprint-section">
            <label className="preprint-label">Motivo da visita (opcional)</label>
            <input className="modal-input" placeholder={_t('webapp.ticket_desc_placeholder')} value={description}
                   onChange={e => setDescription(e.target.value)} />
          </div>

          {/* ── Mood ── */}
          <div className="preprint-section">
            <label className="preprint-label">Como te sentes?</label>
            <div style={{ display: 'flex', gap: 8 }}>
              {MOODS.map(m => (
                <button key={m.id} className={`chip ${mood === m.id ? 'chip-active' : ''}`}
                  onClick={() => setMood(mood === m.id ? '' : m.id)} title={m.label}>
                  {m.emoji}
                </button>
              ))}
            </div>
          </div>

          {/* ── Preference ── */}
          <div className="preprint-section">
            <label className="preprint-label">Preferência de atendimento</label>
            <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
              {PREFS.map(p => (
                <button key={p.id} className={`chip ${preference === p.id ? 'chip-active' : ''}`}
                  onClick={() => setPreference(preference === p.id ? '' : p.id)}>
                  {p.label}
                </button>
              ))}
            </div>
          </div>

          {/* ── Notification advance ── */}
          {peopleWaiting > 0 && (
            <div className="preprint-section">
              <label className="preprint-label">Notificar quando faltarem</label>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <input type="range" min={1} max={Math.max(peopleWaiting, 5)} value={notifyAdvance}
                       onChange={e => setNotifyAdvance(parseInt(e.target.value))}
                       style={{ flex: 1 }} />
                <span style={{ fontWeight: 600, minWidth: 60, textAlign: 'center' }}>
                  {notifyAdvance} pessoa{notifyAdvance > 1 ? 's' : ''}
                </span>
              </div>
            </div>
          )}

          {/* ── Email notification ── */}
          <div className="preprint-section">
            <label style={{ display: 'flex', alignItems: 'center', gap: 8, cursor: 'pointer', fontSize: 13 }}>
              <input type="checkbox" checked={wantEmail} onChange={e => setWantEmail(e.target.checked)} />
              Receber senha por e-mail
            </label>
            {wantEmail && (
              <input className="modal-input" placeholder={_t('webapp.your_email_placeholder')} value={email}
                     onChange={e => setEmail(e.target.value)} type="email" style={{ marginTop: 8 }} />
            )}
          </div>
        </div>

        {/* ── Footer ── */}
        <div className="modal-footer">
          <button className="modal-btn-secondary" onClick={onCancel}>Cancelar</button>
          <button className="modal-btn-primary" onClick={handleConfirm}>
            Tirar Senha
          </button>
        </div>
      </div>
    </div>
  );
}

// ─── Evaluation Modal ───────────────────────────────────────
function EvaluationModal({ ticket, onClose, addToast }) {
  const previousRating = ticket.previousRating || (ticket.reception && ticket.reception.Evaluation !== null && ticket.reception.Evaluation !== undefined
    ? parseInt(ticket.reception.Evaluation) : null);
  const [rating, setRating] = useState(0);
  const [feedback, setFeedback] = useState('');
  const [submitted, setSubmitted] = useState(false);
  const [submitting, setSubmitting] = useState(false);
  const [configLoading, setConfigLoading] = useState(true);
  const [config, setConfig] = useState(null);
  const [step, setStep] = useState('rating'); // 'rating' | 'questions' | 'done'
  const [responses, setResponses] = useState({});

  // Load evaluation config: service → agency → fallback to simple
  useEffect(() => {
    (async () => {
      try {
        const serviceHash = ticket.ServiceHash || '';
        const agencyHash = ticket.AgencyHash || ticket.Token || '';
        // Tier 1: service-level config
        if (serviceHash) {
          const r = await API.get('/evaluation/load?service=' + encodeURIComponent(serviceHash));
          if (r.message === 'found' && r.data) { setConfig(r.data); setConfigLoading(false); return; }
        }
        // Tier 2: agency-level config
        if (agencyHash) {
          const r = await API.get('/evaluation/load-agency?agency=' + encodeURIComponent(agencyHash));
          if (r.message === 'found' && r.data) { setConfig(r.data); setConfigLoading(false); return; }
        }
      } catch {}
      // Tier 3: no config — simple 5-star
      setConfigLoading(false);
    })();
  }, []);

  const maxRating = config ? (parseInt(config.configRanking) || 5) : 5;
  const useStars = !config || config.configRepres === 'FLAG_STARS';
  const questions = config?.questions || [];
  const hasQuestions = questions.length > 0;
  const configTitle = config?.configTitle || _t('webapp.eval_rate_service') || 'Como avalia o serviço?';
  const minLabel = config?.configMin || '';
  const maxLabel = config?.configMax || '';

  const toggleAnswer = (qId, ansId) => {
    setResponses(prev => {
      const cur = prev[qId]?.answer || [];
      return { ...prev, [qId]: { answerTp: 'click', answer: cur.includes(ansId) ? cur.filter(a => a !== ansId) : [...cur, ansId] } };
    });
  };
  const setTextAnswer = (qId, text) => setResponses(prev => ({ ...prev, [qId]: { answerTp: 'text', answer: text } }));
  const setStarsAnswer = (qId, val) => setResponses(prev => ({ ...prev, [qId]: { answerTp: 'stars', answer: String(val) } }));

  const visibleQuestions = hasQuestions ? questions.filter(q => {
    const sw = parseInt(q.shwen) || 0;
    if (sw === 0) return true;
    return sw === rating;
  }).filter(q => q.anstyp !== 'click' || (q.answers && q.answers.length > 0)) : [];

  const handleNext = () => {
    if (rating === 0) return;
    if (visibleQuestions.length > 0) {
      setStep('questions');
    } else {
      handleSubmit();
    }
  };

  const handleSubmit = async () => {
    if (rating === 0) return;
    setSubmitting(true);
    try {
      let res;
      if (config) {
        // Build questionnaire response payload
        const relResponse = [];
        for (const [qId, resp] of Object.entries(responses)) {
          if (resp.answerTp === 'click' && Array.isArray(resp.answer)) {
            for (const aid of resp.answer) relResponse.push({ questionId: parseInt(qId), answerTp: 'click', answer: parseInt(aid) });
          } else if (resp.answer !== null && resp.answer !== undefined) {
            relResponse.push({ questionId: parseInt(qId), answerTp: resp.answerTp, answer: resp.answer });
          }
        }
        // Save via configured endpoint
        const endpoint = ticket.isAppointment ? '/evaluation/save-agency' : '/evaluation/save';
        res = await API.post(endpoint, {
          evaluationId: config.configId,
          avaliacaoValor: rating,
          receptionId: ticket.reception?.ID || null,
          ticketHash: ticket.TicketHash || null,
          deskId: ticket.reception?.ID_Desk || null,
          appointmentId: ticket.isAppointment ? ticket.appointmentId : null,
          rel_response: relResponse
        });
        // Also rate appointment via dedicated endpoint
        if (ticket.isAppointment && ticket.appointmentId) {
          await API.post('/beauty/rate-appointment', { appointment_id: ticket.appointmentId, rating }).catch(() => {});
        }
        if (res.message === 'saved' || res.message === 'success') {
          setSubmitted(true); setStep('done'); ticket._submittedRating = rating;
          if (addToast) addToast(_t('webapp.eval_thanks_toast'), 'success');
          setTimeout(onClose, 1500); setSubmitting(false); return;
        }
      } else if (ticket.isAppointment) {
        res = await API.post('/beauty/rate-appointment', { appointment_id: ticket.appointmentId, rating });
      } else {
        res = await API.post(`/tickets/${ticket.TicketHash}/evaluate`, { star: rating, feedback });
      }
      if (res.message === 'success') {
        setSubmitted(true); setStep('done'); ticket._submittedRating = rating;
        if (addToast) addToast(_t('webapp.eval_thanks_toast'), 'success');
        setTimeout(onClose, 1500);
      } else {
        if (addToast) addToast(res.detail || _t('webapp.eval_save_error'), 'error');
      }
    } catch(e) {
      if (addToast) addToast(_t('webapp.eval_connection_error'), 'error');
    }
    setSubmitting(false);
  };

  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal-dialog" onClick={e => e.stopPropagation()} style={{ maxWidth: 420 }}>
        <div className="modal-header">
          <h3>{submitted ? _t('webapp.eval_thank_you') : (previousRating ? _t('webapp.eval_retitle') : _t('webapp.eval_title'))}</h3>
          <button className="modal-close" onClick={onClose}>&times;</button>
        </div>
        {configLoading ? (
          <div className="modal-body" style={{ textAlign: 'center', padding: 32 }}><SkeletonRows count={3} /></div>
        ) : submitted ? (
          <div className="modal-body" style={{ textAlign: 'center', padding: 32 }}>
            <div style={{ fontSize: 48, marginBottom: 8 }}>⭐</div>
            <p>{_t("webapp.eval_thank_msg")}</p>
          </div>
        ) : step === 'questions' ? (
          <>
            <div className="modal-body">
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 }}>
                <p style={{ fontSize: 13, color: 'var(--d-fg-2)' }}><strong>{ticket.ServiceName}</strong> · {ticket.AgencyName}</p>
                <span style={{ color: 'var(--nb-gold, #FDB812)', fontSize: 14 }}>{'★'.repeat(rating)}</span>
              </div>
              {visibleQuestions.map((q, idx) => (
                <div key={q.id} style={{ marginBottom: 14 }}>
                  <label style={{ fontSize: 12, fontWeight: 600, display: 'block', marginBottom: 6, color: 'var(--d-fg-2)' }}>{idx + 1}. {q.quest}</label>
                  {q.anstyp === 'text' ? (
                    <textarea className="modal-input" rows={2} placeholder={_t('webapp.eval_type_answer') || 'Escreve aqui...'}
                      value={responses[q.id]?.answer || ''} onChange={e => setTextAnswer(q.id, e.target.value)}
                      style={{ resize: 'vertical', minHeight: 40, fontSize: 13 }} />
                  ) : q.anstyp === 'stars' ? (
                    <div style={{ display: 'flex', gap: 4 }}>
                      {[1,2,3,4,5].map(s => (
                        <button key={s} onClick={() => setStarsAnswer(q.id, s)} style={{
                          background: 'none', border: 'none', cursor: 'pointer', fontSize: 22,
                          color: s <= (parseInt(responses[q.id]?.answer) || 0) ? 'var(--nb-gold, #FDB812)' : 'var(--d-fg-muted, #ccc)',
                        }}>★</button>
                      ))}
                    </div>
                  ) : (
                    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                      {(q.answers || []).map(a => (
                        <button key={a.id} className={`chip ${(responses[q.id]?.answer || []).includes(a.id) ? 'chip-active' : ''}`}
                          style={{ fontSize: 12 }} onClick={() => toggleAnswer(q.id, a.id)}>
                          {a.answer}
                        </button>
                      ))}
                    </div>
                  )}
                </div>
              ))}
            </div>
            <div className="modal-footer">
              <button className="modal-btn-secondary" onClick={() => setStep('rating')}>{_t('webapp.eval_back') || 'Voltar'}</button>
              <button className="modal-btn-primary" onClick={handleSubmit} disabled={submitting}>
                {submitting ? <><span className="btn-spinner" /> {_t('webapp.eval_sending')}</> : _t('webapp.eval_submit')}
              </button>
            </div>
          </>
        ) : (
          <>
            <div className="modal-body">
              <p style={{ fontSize: 13, color: 'var(--d-fg-2)', marginBottom: 16 }}>
                <strong>{ticket.ServiceName}</strong> &middot; {ticket.AgencyName}
              </p>
              {previousRating && (
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '8px 12px', marginBottom: 16, background: 'var(--d-bg-2, #f5f5f5)', borderRadius: 8, fontSize: 13, color: 'var(--d-fg-2)' }}>
                  <span style={{ fontSize: 16 }}>★</span>
                  <span>{_t('webapp.eval_previous_rating') || 'Avaliação anterior'}: <strong>{previousRating}/{maxRating}</strong></span>
                </div>
              )}
              <p style={{ fontSize: 13, fontWeight: 600, color: 'var(--d-fg-2)', marginBottom: 12, textAlign: 'center' }}>{configTitle}</p>
              <div style={{ display: 'flex', justifyContent: 'center', gap: 8, marginBottom: 8 }}>
                {Array.from({ length: maxRating }, (_, i) => i + 1).map(s => (
                  <button key={s} onClick={() => setRating(s)} style={{
                    background: 'none', border: 'none', cursor: 'pointer', fontSize: maxRating > 5 ? 24 : 32,
                    color: s <= rating ? 'var(--nb-gold, #FDB812)' : 'var(--d-fg-muted, #ccc)',
                    transition: 'transform 0.15s', transform: s <= rating ? 'scale(1.2)' : 'scale(1)',
                  }}>
                    {useStars ? '★' : s}
                  </button>
                ))}
              </div>
              {(minLabel || maxLabel) && (
                <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, color: 'var(--d-fg-3)', marginBottom: 16 }}>
                  <span>{minLabel}</span><span>{maxLabel}</span>
                </div>
              )}
              {!hasQuestions && (
                <>
                  <label className="modal-label">{_t("webapp.eval_comment_label")}</label>
                  <textarea className="modal-input" rows={3} placeholder={_t("webapp.eval_placeholder")}
                    value={feedback} onChange={e => setFeedback(e.target.value)}
                    style={{ resize: 'vertical', minHeight: 60 }} />
                </>
              )}
            </div>
            <div className="modal-footer">
              <button className="modal-btn-secondary" onClick={onClose}>{_t('webapp.eval_not_now')}</button>
              <button className="modal-btn-primary" onClick={hasQuestions ? handleNext : handleSubmit} disabled={rating === 0 || submitting}>
                {submitting ? <><span className="btn-spinner" /> {_t('webapp.eval_sending')}</> :
                  hasQuestions ? (_t('webapp.eval_next') || 'Seguinte') :
                  (previousRating ? _t('webapp.eval_resubmit') : _t('webapp.eval_submit'))}
              </button>
            </div>
          </>
        )}
      </div>
    </div>
  );
}

// ─── No-Show Evaluation Modal ────────────────────────────────
function NoShowEvalModal({ ticket, onClose, addToast }) {
  const [loading, setLoading] = useState(true);
  const [config, setConfig] = useState(null);
  const [rating, setRating] = useState(0);
  const [feedback, setFeedback] = useState('');
  const [responses, setResponses] = useState({});
  const [submitted, setSubmitted] = useState(false);
  const [submitting, setSubmitting] = useState(false);

  useEffect(() => {
    const agencyHash = ticket.AgencyHash || ticket.Token || '';
    const serviceHash = ticket.ServiceHash || '';
    if (!agencyHash) { setLoading(false); return; }
    (async () => {
      try {
        // 1. Try no-show specific config
        const checkRes = await API.get('/evaluation/check-noshow?agency=' + encodeURIComponent(agencyHash) + (serviceHash ? '&service=' + encodeURIComponent(serviceHash) : ''));
        if (checkRes.message === 'found' && checkRes.data?.evalHash) {
          const loadRes = await API.get('/evaluation/load-noshow?hash=' + encodeURIComponent(checkRes.data.evalHash));
          if (loadRes?.message === 'found' && loadRes.data) { setConfig(loadRes.data); return; }
        }
        // 2. Fallback: agency's regular evaluation config
        const agencyRes = await API.get('/evaluation/load-agency?agency=' + encodeURIComponent(agencyHash));
        if (agencyRes?.message === 'found' && agencyRes.data) { setConfig(agencyRes.data); return; }
        // 3. No config — will show generic 5-star
      } catch {}
      finally { setLoading(false); }
    })();
  }, []);

  const questions = config?.questions || [];
  const hasQuestions = questions.length > 0;
  const configRepres = config?.configRepres || 'FLAG_STARS';
  const configRanking = config?.configRanking || 5;

  const toggleAnswer = (qId, ansId) => {
    setResponses(prev => {
      const cur = prev[qId] || [];
      return { ...prev, [qId]: cur.includes(ansId) ? cur.filter(a => a !== ansId) : [...cur, ansId] };
    });
  };
  const setTextAnswer = (qId, text) => {
    setResponses(prev => ({ ...prev, [qId]: text }));
  };

  const handleSubmit = async () => {
    setSubmitting(true);
    try {
      if (config) {
        const relResponse = questions.map(q => ({
          questionId: q.id,
          answerTp: q.anstyp || 'click',
          answer: q.anstyp === 'text' ? (responses[q.id] || '') : (responses[q.id] || [])
        }));
        const res = await API.post('/evaluation/save-agency', {
          evaluationId: config.configId || config.id,
          avaliacaoValor: rating,
          appointmentId: ticket.isAppointment ? ticket.appointmentId : null,
          rel_response: relResponse
        });
        if (res.message === 'success' || res.message === 'saved') {
          ticket._submittedRating = rating;
          // Also rate appointment
          if (ticket.isAppointment && ticket.appointmentId) {
            await API.post('/beauty/rate-appointment', { appointment_id: ticket.appointmentId, rating }).catch(() => {});
          }
          setSubmitted(true);
        } else { addToast && addToast(_t('webapp.eval_error'), 'error'); }
      } else if (ticket.TicketHash && !ticket.isAppointment) {
        const res = await API.post('/tickets/' + ticket.TicketHash + '/evaluate', {
          star: rating,
          feedback
        });
        if (res.message === 'success') { setSubmitted(true); } else { addToast && addToast(_t('webapp.eval_error'), 'error'); }
      } else if (ticket.isAppointment && ticket.appointmentId) {
        // Appointment without config — use dedicated rating endpoint
        const res = await API.post('/beauty/rate-appointment', { appointment_id: ticket.appointmentId, rating });
        if (res.message === 'success') { ticket._submittedRating = rating; setSubmitted(true); } else { addToast && addToast(_t('webapp.eval_error'), 'error'); }
      } else {
        ticket._submittedRating = rating; setSubmitted(true);
      }
    } catch { addToast && addToast(_t('webapp.network_error'), 'error'); }
    setSubmitting(false);
    if (submitted) setTimeout(onClose, 1500);
  };

  useEffect(() => { if (submitted) setTimeout(onClose, 1500); }, [submitted]);

  const canSubmit = config ? (hasQuestions || rating > 0) : rating > 0;

  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal-dialog" onClick={e => e.stopPropagation()} style={{ maxWidth: 400 }}>
        <div className="modal-header">
          <h3>{submitted ? _t('webapp.eval_thank_you') : _t('webapp.evaluate_noshow')}</h3>
          <button className="modal-close" onClick={onClose}>&times;</button>
        </div>
        {loading ? (
          <div className="modal-body" style={{ textAlign: 'center', padding: 32 }}><SkeletonRows count={3} /></div>
        ) : submitted ? (
          <div className="modal-body" style={{ textAlign: 'center', padding: 32 }}>
            <div style={{ fontSize: 48, marginBottom: 8 }}>✓</div>
            <p>{_t('webapp.eval_submitted_desc')}</p>
          </div>
        ) : (
          <>
            <div className="modal-body">
              <p style={{ fontSize: 13, color: 'var(--d-fg-2)', marginBottom: 16 }}>
                {(ticket.Agency || ticket.AgencyName) ? _t('webapp.noshow_eval_body').replace(':agency', ticket.Agency || ticket.AgencyName) : _t('webapp.noshow_eval_body_no_agency')}
              </p>
              {/* Rating (if config has it or generic) */}
              {(!hasQuestions || config?.configRepres) && (
                <div style={{ display: 'flex', justifyContent: 'center', gap: 8, marginBottom: 16 }}>
                  {Array.from({ length: configRanking }, (_, i) => i + 1).map(s => (
                    <button key={s} onClick={() => setRating(s)} style={{
                      background: 'none', border: 'none', cursor: 'pointer', fontSize: 28,
                      color: s <= rating ? 'var(--nb-gold, #FDB812)' : 'var(--d-fg-muted, #ccc)',
                      transition: 'transform 0.15s', transform: s <= rating ? 'scale(1.15)' : 'scale(1)',
                    }}>★</button>
                  ))}
                </div>
              )}
              {/* Questions from company config */}
              {hasQuestions && questions.map(q => (
                <div key={q.id} style={{ marginBottom: 14 }}>
                  <label style={{ fontSize: 12, fontWeight: 600, display: 'block', marginBottom: 6, color: 'var(--d-fg-2)' }}>{q.quest}</label>
                  {q.anstyp === 'text' ? (
                    <textarea className="modal-input" rows={2} placeholder={_t('webapp.noshow_eval_write_here')}
                      value={responses[q.id] || ''} onChange={e => setTextAnswer(q.id, e.target.value)}
                      style={{ resize: 'vertical', minHeight: 40, fontSize: 13 }} />
                  ) : (
                    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                      {(q.answers || []).map(a => (
                        <button key={a.id} className={`chip ${(responses[q.id] || []).includes(a.id) ? 'chip-active' : ''}`}
                          style={{ fontSize: 12 }} onClick={() => toggleAnswer(q.id, a.id)}>
                          {a.answer}
                        </button>
                      ))}
                    </div>
                  )}
                </div>
              ))}
              {/* Generic feedback if no config */}
              {!hasQuestions && (
                <>
                  <label className="modal-label">{_t('webapp.noshow_eval_comment')}</label>
                  <textarea className="modal-input" rows={3} placeholder={_t('webapp.noshow_eval_placeholder')}
                    value={feedback} onChange={e => setFeedback(e.target.value)}
                    style={{ resize: 'vertical', minHeight: 60 }} />
                </>
              )}
            </div>
            <div className="modal-footer">
              <button className="modal-btn-secondary" onClick={onClose}>{_t('webapp.noshow_eval_not_now')}</button>
              <button className="modal-btn-primary" onClick={handleSubmit} disabled={!canSubmit || submitting}>
                {submitting ? <><span className="btn-spinner" /> {_t('webapp.noshow_eval_sending')}</> : _t('webapp.noshow_eval_send')}
              </button>
            </div>
          </>
        )}
      </div>
    </div>
  );
}

// ─── Share/QR Modal ─────────────────────────────────────────
function ShareModal({ ticket, onClose, addToast }) {
  const [shareEmail, setShareEmail] = useState('');
  const code = ticket.Number || ticket.Code || '';
  const hash = ticket.TicketHash || (ticket.CodeGeneration || '').replace(/^ticket\s+/i, '') || '';
  const base = window.location.origin + window.location.pathname.replace(/\/[^/]*$/, '/');
  const ticketLink = base + 'qrcode-read?uuid=' + encodeURIComponent(hash);
  const qrDataUrl = NbQR.toDataURL(ticketLink, 200);

  const copyLink = async () => {
    try {
      await navigator.clipboard.writeText(ticketLink);
      if (addToast) addToast(_t('webapp.tkt_link_copied'), 'success', 3000);
    } catch {
      // Fallback
      const inp = document.createElement('input'); inp.value = ticketLink;
      document.body.appendChild(inp); inp.select(); document.execCommand('copy'); document.body.removeChild(inp);
      if (addToast) addToast(_t('webapp.tkt_link_copied'), 'success', 3000);
    }
  };

  const nativeShare = async () => {
    if (navigator.share) {
      try {
        await navigator.share({ title: _t('webapp.tkt_share_title') + ' #' + code, url: ticketLink });
      } catch(e) {}
    }
  };

  const emailShare = async () => {
    if (!shareEmail || !shareEmail.includes('@')) return;
    try {
      const res = await API.post('/tickets/share', { ticket_hash: ticket.TicketHash, share_with: shareEmail });
      if (res.message === 'success') {
        if (addToast) addToast(_t('webapp.share_sent') + ' ' + shareEmail, 'success');
        setShareEmail('');
      } else {
        if (addToast) addToast(res.detail || _t('webapp.share_error'), 'error');
      }
    } catch(e) {
      if (addToast) addToast(_t('webapp.eval_connection_error'), 'error');
    }
  };

  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal-dialog" onClick={e => e.stopPropagation()} style={{ maxWidth: 360 }}>
        <div className="modal-header">
          <h3>{_t("webapp.share_title")} #{code}</h3>
          <button className="modal-close" onClick={onClose}>&times;</button>
        </div>
        <div className="modal-body" style={{ textAlign: 'center' }}>
          <img src={qrDataUrl} alt="QR Code" style={{ width: 180, height: 180, margin: '0 auto 16px', display: 'block', borderRadius: 8 }} />
          <div style={{ display: 'flex', gap: 8, marginBottom: 16 }}>
            <input className="modal-input" readOnly value={ticketLink} style={{ flex: 1, fontSize: 11 }} />
            <button className="modal-btn-primary" onClick={copyLink} style={{ whiteSpace: 'nowrap' }}>{_t("webapp.share_copy")}</button>
          </div>
          {navigator.share && (
            <button className="modal-btn-secondary" onClick={nativeShare} style={{ width: '100%', marginBottom: 12 }}>
              <Ico name="share" size={14} /> {_t("webapp.share_via")}
            </button>
          )}
          <div style={{ borderTop: '1px solid var(--d-border, #e0e0e0)', paddingTop: 12, marginTop: 4 }}>
            <label className="modal-label">{_t("webapp.share_by_email")}</label>
            <div style={{ display: 'flex', gap: 8 }}>
              <input className="modal-input" placeholder="email@exemplo.cv" type="email"
                value={shareEmail} onChange={e => setShareEmail(e.target.value)} style={{ flex: 1 }} />
              <button className="modal-btn-primary" onClick={emailShare} disabled={!shareEmail.includes('@')}>{_t('webapp.share_send')}</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ─── Search Results (global search) ─────────────────────────
function SearchResults({ query, onSelectResult, onClose }) {
  const [results, setResults] = useState([]);
  const [loading, setLoading] = useState(false);
  const debounceRef = useRef(null);

  useEffect(() => {
    if (!query || query.length < 2) { setResults([]); return; }
    setLoading(true);
    clearTimeout(debounceRef.current);
    debounceRef.current = setTimeout(() => {
      API.get('/data/search', { q: query }).then(res => {
        if (res.message === 'success') {
          setResults(Array.isArray(res.data) ? res.data : []);
        }
        setLoading(false);
      }).catch(() => setLoading(false));
    }, 350);
    return () => clearTimeout(debounceRef.current);
  }, [query]);

  if (!query || query.length < 2) return null;

  const TYPE_LABELS = { category: _t('webapp.type_category'), company: _t('webapp.type_company'), agency: _t('webapp.type_agency'), service: _t('webapp.type_service'), product: _t('webapp.type_product'), tournament: _t('webapp.type_tournament'), venue: _t('webapp.type_venue'), team: _t('webapp.type_team'), pharmacy: _t('webapp.type_pharmacy') };
  const TYPE_ICONS = { category: 'grid', company: 'briefcase', agency: 'building', service: 'ticket', product: 'store', tournament: 'trophy', venue: 'field', team: 'users', pharmacy: 'pharmacy' };

  return (
    <div className="search-results" style={{
      position:'absolute', top:'100%', left:0, right:0, zIndex:100,
      background:'var(--d-bg-surface, #fff)', borderRadius:'0 0 12px 12px',
      boxShadow:'0 8px 24px rgba(0,0,0,0.15)', maxHeight:400, overflowY:'auto',
    }}>
      {loading && <div style={{ padding: 16, fontSize: 13, color:'var(--d-fg-3)' }}>A pesquisar...</div>}
      {!loading && results.length === 0 && <div style={{ padding: 16, fontSize: 13, color:'var(--d-fg-3)' }}>Nenhum resultado para "{query}"</div>}
      {results.map((r, i) => (
        <button key={i} className="search-result-item" onClick={() => { onSelectResult(r); onClose(); }}
          style={{
            display:'flex', alignItems:'center', gap:12, width:'100%', padding:'12px 16px',
            border:'none', background:'none', cursor:'pointer', textAlign:'left', fontSize:13,
            borderBottom:'1px solid var(--d-border)',
          }}
          onMouseEnter={e => e.currentTarget.style.background='var(--d-bg-sunken, #f5f5f5)'}
          onMouseLeave={e => e.currentTarget.style.background='none'}>
          <Ico name={TYPE_ICONS[r._type] || 'search'} size={16} />
          <div style={{ flex:1, minWidth:0 }}>
            <div style={{ fontWeight:500, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>{r.Name || r.name}</div>
            {(r.AgencyName || r.Zone || r.CompanyName || r.Address || r.Island || r.Description) && (
              <div style={{ fontSize:11, color:'var(--d-fg-3)', overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>
                {r._type === 'service' && r.AgencyName ? `${r.AgencyName} · ${r.CompanyName || ''}` : (r.CompanyName || r.Zone || r.Address || r.Island || r.Description)}
              </div>
            )}
          </div>
          <span style={{
            fontSize:10, padding:'2px 8px', borderRadius:99,
            background:'var(--d-bg-sunken, #eee)', color:'var(--d-fg-3)',
          }}>
            {TYPE_LABELS[r._type] || r._type}
          </span>
        </button>
      ))}
    </div>
  );
}

// ─── Favorite Star Button ───────────────────────────────────
function FavStar({ isFav, onToggle }) {
  return (
    <button onClick={e => { e.stopPropagation(); onToggle(); }} title={isFav ? 'Remover favorito' : 'Adicionar favorito'}
      style={{ background:'none', border:'none', cursor:'pointer', padding:4, color: isFav ? 'var(--nb-gold, #FDB812)' : 'var(--d-fg-muted, #ccc)', transition:'color 0.2s' }}>
      <svg width={18} height={18} viewBox="0 0 24 24" fill={isFav ? 'currentColor' : 'none'} stroke="currentColor" strokeWidth="1.5">
        <path d="M12 2l3 6.2 6.8 1-4.9 4.8L18 21l-6-3.2L6 21l1.1-7L2.2 9.2l6.8-1z"/>
      </svg>
    </button>
  );
}

// ─── User data mapper ────────────────────────────────────────
function mapUserData(u) {
  return {
    name: u.name || u.Name || '',
    email: u.email || '',
    initials: (u.name || u.Name || 'U').split(' ').filter(Boolean).map(w => w[0]).slice(0, 2).join('').toUpperCase(),
    photo_url: u.photo_url || u.ProfilePhotoURL || '',
    phone: u.phone || u.Cellphone || '',
    phone_country_code: u.phone_country_code || u.PhoneCountryCode || '',
    birthday: u.birthday || u.Birthday || '',
    gender: u.gender || u.Gender || '',
    preferred_lang: u.preferred_lang || u.PreferredLang || 'pt',
    registry_date: u.registry_date || u.RegistryDateTime || '',
    has_password: u.has_password ?? false,
    login_method: u.login_method || u.LastLoginMethod || '',
    address_line1: u.address_line1 || '',
    address_line2: u.address_line2 || '',
    city: u.city || '',
    postal_code: u.postal_code || '',
    document_type: u.document_type || '',
    document_number: u.document_number || '',
    document_expiry: u.document_expiry || u.DocumentExpiry || '',
    tax_id: u.tax_id || '',
  };
}

// ─── Profile View (main area) ───────────────────────────────
function ProfileView({ user, onEditProfile, onSignOut, onUpdateUser, favAgencies, onSelectFavAgency, recents, onSelectRecent, signedIn, addToast }) {
  const [stats, setStats] = useState(null);
  const [tickets, setTickets] = useState([]);
  const [showAllTickets, setShowAllTickets] = useState(false);
  const [section, setSection] = useState(null); // null | 'password' | 'address' | 'documents' | 'preferences'
  const [saving, setSaving] = useState(false);
  const [msg, setMsg] = useState(null);
  const photoRef = useRef(null);
  const [uploadingPhoto, setUploadingPhoto] = useState(false);

  // Password form
  const [pw, setPw] = useState({ password: '', password_confirmation: '' });
  // Address form
  const [addr, setAddr] = useState({ address_line1: user.address_line1 || '', address_line2: user.address_line2 || '', city: user.city || '', postal_code: user.postal_code || '' });
  // Documents form
  const [docs, setDocs] = useState({ document_type: user.document_type || '', document_number: user.document_number || '', document_expiry: user.document_expiry || '', tax_id: user.tax_id || '' });
  // Preferences
  const [prefs, setPrefs] = useState({ preferred_lang: user.preferred_lang || 'pt' });

  useEffect(() => {
    if (!signedIn) return;
    API.get('/tickets/history', { per_page: 100 }).then(res => {
      if (res.message === 'success') {
        const items = Array.isArray(res.data) ? res.data : res.data?.data || [];
        const evaluated = items.filter(t => t.evaluated == 1 || t.Rating > 0);
        const avgRating = evaluated.length > 0 ? (evaluated.reduce((s, t) => s + (parseFloat(t.Rating) || 0), 0) / evaluated.length).toFixed(1) : null;
        setStats({ total: res.pagination?.total || items.length, evaluated: evaluated.length, avgRating });
        setTickets(items);
      }
    }).catch(() => {});
  }, [signedIn]);

  const fmtDate = (d) => { try { return new Date(d).toLocaleDateString('pt', { day: '2-digit', month: '2-digit', year: 'numeric' }); } catch { return d; } };
  const fmtDateTime = (d) => { try { const dt = new Date(d); return dt.toLocaleDateString('pt', { day: '2-digit', month: '2-digit' }) + ' ' + dt.toLocaleTimeString('pt', { hour: '2-digit', minute: '2-digit' }); } catch { return d; } };

  const flash = (text, type) => { setMsg({ text, type }); setTimeout(() => setMsg(null), 3000); };

  const saveSection = async (data) => {
    setSaving(true); setMsg(null);
    try {
      const res = await API.put('/client/auth/profile', data);
      if (res.message === 'success') {
        flash(_t('webapp.saved_success'), 'ok');
        if (onUpdateUser && res.data) onUpdateUser(mapUserData(res.data));
        if (data.password) setPw({ password: '', password_confirmation: '' });
        // Persist language preference for API calls
        if (data.preferred_lang) {
          localStorage.setItem('nb_preferred_lang', data.preferred_lang);
        }
        setSection(null);
      } else { flash(res.detail || res.message || _t('webapp.login_error'), 'err'); }
    } catch { flash(_t('webapp.connection_error'), 'err'); }
    setSaving(false);
  };

  // Photo upload from avatar
  const handlePhotoUpload = async (e) => {
    const file = e.target.files?.[0];
    if (!file) return;
    if (file.size > 5 * 1024 * 1024) { flash(_t('webapp.photo_too_large'), 'err'); return; }
    setUploadingPhoto(true);
    const reader = new FileReader();
    reader.onload = async () => {
      try {
        const res = await API.post('/client/auth/profile/photo', { photo: reader.result });
        if (res.message === 'success') {
          flash(_t('webapp.photo_updated'), 'ok');
          if (onUpdateUser) onUpdateUser({ ...user, photo_url: res.data?.url || reader.result });
        } else { flash(res.detail || _t('webapp.photo_error'), 'err'); }
      } catch { flash(_t('webapp.photo_error'), 'err'); }
      setUploadingPhoto(false);
    };
    reader.readAsDataURL(file);
    e.target.value = '';
  };

  const LANG_LABELS = { pt: 'Português', en: 'English', fr: 'Français', zh: '中文' };
  const DOC_LABELS = { BI: _t('webapp.doc_bi'), PASSPORT: _t('webapp.doc_passport'), NIF: _t('webapp.doc_nif'), CC: _t('webapp.doc_cc') };

  const ticketStatus = (t) => {
    const s = t.State ?? t.TicketState;
    if (s === 3 || s === '3') return { label: _t('webapp.status_attended'), cls: 'attended' };
    if (s === 2 || s === '2') return { label: _t('webapp.status_no_show'), cls: 'cancelled' };
    if (s === 4 || s === '4') return { label: _t('webapp.status_redirected'), cls: 'called' };
    if (s === 5 || s === '5') return { label: _t('webapp.status_suspended'), cls: 'cancelled' };
    if (s === 'not_called') return { label: _t('webapp.status_not_called'), cls: 'waiting' };
    if (s === 6 || s === '6') return { label: _t('webapp.status_called'), cls: 'called' };
    if (s === 7 || s === '7') return { label: _t('webapp.status_serving'), cls: 'called' };
    return { label: _t('webapp.status_waiting'), cls: 'waiting' };
  };

  const visibleTickets = showAllTickets ? tickets : tickets.slice(0, 5);

  return (
    <>
      {/* Flash message */}
      {msg && (
        <div style={{ padding: '0.625rem 1rem', marginBottom: '0.75rem', borderRadius: 8, fontSize: 13, fontWeight: 500,
          background: msg.type === 'ok' ? 'rgba(2,165,134,0.12)' : 'rgba(220,38,38,0.1)',
          color: msg.type === 'ok' ? 'var(--nb-green)' : '#f87171' }}>{msg.text}</div>
      )}

      {/* Header */}
      <div className="prf-main-header">
        <div className="prf-main-avatar-wrap" onClick={() => !uploadingPhoto && photoRef.current?.click()}>
          {user.photo_url ? (
            <img src={user.photo_url} alt="" className="prf-main-avatar" referrerPolicy="no-referrer" />
          ) : (
            <div className="prf-main-avatar prf-main-avatar--initials">{user.initials || user.name?.charAt(0) || 'U'}</div>
          )}
          <div className="prf-avatar-overlay">
            {uploadingPhoto ? (
              <span style={{ fontSize: 11, color: '#fff', fontWeight: 600 }}>...</span>
            ) : (
              <Ico name="camera" size={20} />
            )}
          </div>
          <input ref={photoRef} type="file" accept="image/jpeg,image/png,image/webp" onChange={handlePhotoUpload} style={{ display: 'none' }} />
        </div>
        <div className="prf-main-info">
          <h1 className="prf-main-name">{user.name}</h1>
          <p className="prf-main-email">{user.email}</p>
          <div className="prf-main-meta">
            {user.phone && <span><Ico name="phone" size={13} /> {user.phone_country_code || ''} {user.phone}</span>}
            {user.birthday && <span><Ico name="calendar" size={13} /> {fmtDate(user.birthday)}</span>}
            {user.gender && <span><Ico name="user" size={13} /> {user.gender === 'M' ? _t('webapp.gender_m') : user.gender === 'F' ? _t('webapp.gender_f') : user.gender}</span>}
            {user.registry_date && <span><Ico name="calendar" size={13} /> {_t('webapp.member_since')} {fmtDate(user.registry_date)}</span>}
          </div>
        </div>
        <div className="prf-main-actions">
          <button className="prf-main-btn" onClick={onEditProfile}><Ico name="settings" size={14} /> {_t('webapp.edit_profile')}</button>
        </div>
      </div>

      {/* Stats cards */}
      {stats && (
        <div className="prf-stats-row">
          <div className="prf-stat-card"><div className="prf-stat-val">{stats.total}</div><div className="prf-stat-label">{_t('webapp.tickets_issued')}</div></div>
          <div className="prf-stat-card"><div className="prf-stat-val">{stats.evaluated}</div><div className="prf-stat-label">{_t('webapp.evaluations')}</div></div>
          {stats.avgRating && <div className="prf-stat-card"><div className="prf-stat-val"><Ico name="star" size={14} /> {stats.avgRating}</div><div className="prf-stat-label">{_t('webapp.avg_rating')}</div></div>}
          {favAgencies && <div className="prf-stat-card"><div className="prf-stat-val">{favAgencies.length}</div><div className="prf-stat-label">{_t('webapp.favorites_count')}</div></div>}
        </div>
      )}

      {/* Ticket History */}
      {tickets.length > 0 && (
        <div className="prf-section">
          <div className="section-head">
            <h2><Ico name="ticket" size={16} /> {_t('webapp.ticket_history')}</h2>
            <div className="right">{stats?.total || tickets.length}</div>
          </div>
          <div className="prf-history-list">
            {visibleTickets.map((t, i) => {
              const st = ticketStatus(t);
              return (
                <div className="prf-history-item" key={t.ID || t.id || i}>
                  <div className="prf-history-code">{t.Code || t.Number || t.TicketNumber || '—'}</div>
                  <div className="prf-history-info">
                    <div className="prf-history-service">{t.ServiceName || t.Service || '—'}</div>
                    <div className="prf-history-agency">{t.AgencyName || t.Agency || ''}{t.CompanyName ? ` · ${t.CompanyName}` : ''}</div>
                  </div>
                  <div className="prf-history-meta">
                    <span className={`prf-history-badge prf-history-badge--${st.cls}`}>{st.label}</span>
                    <span className="prf-history-date">{t.Date && t.Time ? `${t.Date} ${t.Time.substring(0, 5)}` : fmtDateTime(t.DateCreated || t.CreatedAt || '')}</span>
                  </div>
                </div>
              );
            })}
          </div>
          {tickets.length > 5 && (
            <button className="prf-show-more" onClick={() => setShowAllTickets(!showAllTickets)} style={{ marginTop: 8 }}>
              {showAllTickets ? _t('webapp.show_less') : `${_t('webapp.show_all')} (${tickets.length})`}
            </button>
          )}
        </div>
      )}

      {/* Section cards grid */}
      <div className="prf-cards-grid">
        {/* Password */}
        <div className="prf-card-block">
          <div className="prf-card-block__head" onClick={() => setSection(section === 'password' ? null : 'password')}>
            <Ico name="lock" size={16} />
            <div><strong>{_t('webapp.security')}</strong><p>{user.has_password ? _t('webapp.password_is_set') : _t('webapp.no_password_social')}</p></div>
            <Ico name={section === 'password' ? 'chevD' : 'chevR'} size={14} />
          </div>
          {section === 'password' && (
            <div className="prf-card-block__body">
              <label className="prf-field-label">{_t('webapp.new_password')}</label>
              <input type="password" className="prf-field-input" value={pw.password} onChange={e => setPw({ ...pw, password: e.target.value })} placeholder={_t('webapp.password_hint')} />
              <label className="prf-field-label">{_t('webapp.confirm_password')}</label>
              <input type="password" className="prf-field-input" value={pw.password_confirmation} onChange={e => setPw({ ...pw, password_confirmation: e.target.value })} />
              {pw.password && pw.password.length < 8 && (
                <p style={{ fontSize: 11, color: '#f87171', margin: 0 }}>{_t('webapp.min_8_chars')}</p>
              )}
              {pw.password && pw.password_confirmation && pw.password !== pw.password_confirmation && (
                <p style={{ fontSize: 11, color: '#f87171', margin: 0 }}>{_t('webapp.passwords_dont_match')}</p>
              )}
              <button className="prf-save-btn" disabled={saving || pw.password.length < 8 || pw.password !== pw.password_confirmation}
                onClick={() => saveSection(pw)}>
                {saving ? _t('webapp.saving') : _t('webapp.change_password_btn')}
              </button>
            </div>
          )}
        </div>

        {/* Address */}
        <div className="prf-card-block">
          <div className="prf-card-block__head" onClick={() => setSection(section === 'address' ? null : 'address')}>
            <Ico name="pin" size={16} />
            <div><strong>{_t('webapp.address_section')}</strong><p>{user.address_line1 ? `${user.address_line1}, ${user.city || ''}` : _t('webapp.address_not_set')}</p></div>
            <Ico name={section === 'address' ? 'chevD' : 'chevR'} size={14} />
          </div>
          {section === 'address' && (
            <div className="prf-card-block__body">
              <label className="prf-field-label">{_t('webapp.address_line1')}</label>
              <input className="prf-field-input" value={addr.address_line1} onChange={e => setAddr({ ...addr, address_line1: e.target.value })} placeholder={_t('webapp.address_placeholder')} />
              <label className="prf-field-label">{_t('webapp.address_complement')}</label>
              <input className="prf-field-input" value={addr.address_line2} onChange={e => setAddr({ ...addr, address_line2: e.target.value })} placeholder={_t('webapp.address_complement_placeholder')} />
              <div style={{ display: 'flex', gap: 8 }}>
                <div style={{ flex: 2 }}>
                  <label className="prf-field-label">{_t('webapp.city')}</label>
                  <input className="prf-field-input" value={addr.city} onChange={e => setAddr({ ...addr, city: e.target.value })} />
                </div>
                <div style={{ flex: 1 }}>
                  <label className="prf-field-label">{_t('webapp.postal_code')}</label>
                  <input className="prf-field-input" value={addr.postal_code} onChange={e => setAddr({ ...addr, postal_code: e.target.value })} />
                </div>
              </div>
              <button className="prf-save-btn" disabled={saving} onClick={() => saveSection(addr)}>
                {saving ? _t('webapp.saving') : _t('webapp.save_address')}
              </button>
            </div>
          )}
        </div>

        {/* Documents / Tax */}
        <div className="prf-card-block">
          <div className="prf-card-block__head" onClick={() => setSection(section === 'documents' ? null : 'documents')}>
            <Ico name="receipt" size={16} />
            <div><strong>{_t('webapp.documents_section')}</strong><p>{user.document_number ? `${DOC_LABELS[user.document_type] || user.document_type} · ${user.document_number}` : _t('webapp.doc_not_set')}{user.tax_id ? ` · NIF ${user.tax_id}` : ''}</p></div>
            <Ico name={section === 'documents' ? 'chevD' : 'chevR'} size={14} />
          </div>
          {section === 'documents' && (
            <div className="prf-card-block__body">
              <label className="prf-field-label">{_t('webapp.doc_type')}</label>
              <select className="prf-field-input" value={docs.document_type} onChange={e => setDocs({ ...docs, document_type: e.target.value })}>
                <option value="">{_t('webapp.doc_select')}</option>
                {Object.entries(DOC_LABELS).map(([k, v]) => <option key={k} value={k}>{v}</option>)}
              </select>
              <label className="prf-field-label">{_t('webapp.doc_number')}</label>
              <input className="prf-field-input" value={docs.document_number} onChange={e => setDocs({ ...docs, document_number: e.target.value })} />
              <label className="prf-field-label">{_t('webapp.doc_expiry')}</label>
              <input type="date" className="prf-field-input" value={docs.document_expiry} onChange={e => setDocs({ ...docs, document_expiry: e.target.value })} />
              <label className="prf-field-label">{_t('webapp.doc_nif')}</label>
              <input className="prf-field-input" value={docs.tax_id} onChange={e => setDocs({ ...docs, tax_id: e.target.value })} />
              <button className="prf-save-btn" disabled={saving} onClick={() => saveSection(docs)}>
                {saving ? _t('webapp.saving') : _t('webapp.save_documents')}
              </button>
            </div>
          )}
        </div>

        {/* Preferences */}
        <div className="prf-card-block">
          <div className="prf-card-block__head" onClick={() => setSection(section === 'preferences' ? null : 'preferences')}>
            <Ico name="settings" size={16} />
            <div><strong>{_t('webapp.preferences_section')}</strong><p>{_t('webapp.preferred_lang')}: {LANG_LABELS[user.preferred_lang] || user.preferred_lang || 'Português'}{user.login_method ? ` · ${_t('webapp.login_via')} ${user.login_method}` : ''}</p></div>
            <Ico name={section === 'preferences' ? 'chevD' : 'chevR'} size={14} />
          </div>
          {section === 'preferences' && (
            <div className="prf-card-block__body">
              <label className="prf-field-label">{_t('webapp.preferred_lang')}</label>
              <select className="prf-field-input" value={prefs.preferred_lang} onChange={e => setPrefs({ ...prefs, preferred_lang: e.target.value })}>
                {Object.entries(LANG_LABELS).map(([k, v]) => <option key={k} value={k}>{v}</option>)}
              </select>
              <button className="prf-save-btn" disabled={saving} onClick={() => saveSection(prefs)}>
                {saving ? _t('webapp.saving') : _t('webapp.save_preferences')}
              </button>
            </div>
          )}
        </div>
      </div>

      {/* Favorite agencies */}
      {favAgencies && favAgencies.length > 0 && (
        <div className="prf-section">
          <div className="section-head">
            <h2><Ico name="star" size={16} /> {_t('webapp.fav_agencies')}</h2>
            <div className="right">{favAgencies.length}</div>
          </div>
          <div className="recents">
            {favAgencies.map((a, i) => (
              <div className="recent-card" key={a.hash || i} onClick={() => onSelectFavAgency(a)}>
                <div className="ico" style={{ color: 'var(--nb-gold, #FDB812)' }}><Ico name="star" size={16} /></div>
                <div className="info">
                  <div className="label">{a.name}</div>
                  <div className="when">{a.zone || a.company || ''}</div>
                </div>
                <Ico name="chevR" size={16} />
              </div>
            ))}
          </div>
        </div>
      )}

      {/* Recent activity */}
      {recents && recents.length > 0 && (
        <div className="prf-section">
          <div className="section-head">
            <h2><Ico name="clock" size={16} /> {_t('webapp.recent_activity')}</h2>
            <div className="right">{recents.length}</div>
          </div>
          <div className="recents">
            {recents.map((r, i) => (
              <div className="recent-card" key={r.id || i} onClick={() => onSelectRecent(r)}>
                <div className="ico"><Ico name="ticket" size={16} /></div>
                <div className="info">
                  <div className="label">{r.name}</div>
                  <div className="when">{r.when}</div>
                </div>
                <Ico name="chevR" size={16} />
              </div>
            ))}
          </div>
        </div>
      )}
    </>
  );
}

// ─── App root ───────────────────────────────────────────────
function App() {
  // Auth state
  const [signedIn, setSignedIn] = useState(false);
  const [authChecking, setAuthChecking] = useState(!!localStorage.getItem('sanctum_token'));
  const [user, setUser] = useState(null);

  // Navigation — persist active view in sessionStorage
  const VALID_VIEWS = ['home','tickets','tracking','map','appointments','payments','store','games','pharmacy','flights','cars','carwash','profile','settings'];
  const [_deepLinkParams] = useState(() => {
    const params = new URLSearchParams(window.location.search);
    const section = params.get('section');
    const c = params.get('c');
    const p = params.get('p');
    const receipt = params.get('receipt');
    if (section || c || p || receipt) {
      const url = new URL(window.location);
      ['section', 'c', 'p', 'receipt'].forEach(k => url.searchParams.delete(k));
      window.history.replaceState({}, '', url.toString());
    }
    return { section, storeHash: c, productId: p, receiptRef: receipt };
  });
  const [view, _setView] = useState(() => {
    if (_deepLinkParams.section && VALID_VIEWS.includes(_deepLinkParams.section)) return _deepLinkParams.section;
    if (_deepLinkParams.storeHash) return 'store';
    const saved = sessionStorage.getItem('nb_webapp_view');
    return saved && VALID_VIEWS.includes(saved) ? saved : 'home';
  });
  const setView = (v) => { _setView(v); sessionStorage.setItem('nb_webapp_view', v); NbTracker.track('view_change', { view: v }); if (v !== 'games') setGamesPanel(null); if (v !== 'pharmacy') setPharmacyPanel(null); if (v !== 'cars') { setCarsPanel(null); setRoutePanel(null); } if (v !== 'carwash') setCarwashPanel(null); if (v !== 'store') setStoreProductPanel(null); if (v !== 'agency') setServiceInfoPanel(null); if (v !== 'appointments') setAppointmentPanel(null); if (v !== 'payments') setPaymentPanel(null); if (v === 'payments') setPaymentPanel({ mode: 'history' }); setHelpPanel(false); setShowNotifPanel(false); };
  const [currentCategory, setCurrentCategory] = useState(null);
  const [currentCompany, setCurrentCompany] = useState(null);
  const [currentAgency, setCurrentAgency] = useState(null);
  const [currentAgencyCompany, setCurrentAgencyCompany] = useState(null);
  const [query, setQuery] = useState('');

  // Data
  const [categories, setCategories] = useState([]);
  const [companies, setCompanies] = useState([]);
  const [loadingCompanies, setLoadingCompanies] = useState(false);
  const [loadingCats, setLoadingCats] = useState(true);
  const [recents, setRecents] = useState([]);

  // Location
  const [locationGranted, setLocationGranted] = useState(false);
  const [locationName, setLocationName] = useState('');
  const [userLat, setUserLat] = useState(null);
  const [userLng, setUserLng] = useState(null);

  // Active ticket
  const [activeTicket, setActiveTicket] = useState(null);
  const [ticketCollapsed, setTicketCollapsed] = useState(false);
  const myTicketsRef = useRef([]); // all today's tickets (for duplicate check)

  // Modals
  const [showPrePrint, setShowPrePrint] = useState(null);
  const [showEvaluation, setShowEvaluation] = useState(null);
  const [showNoShowEval, setShowNoShowEval] = useState(null);
  const [showShare, setShowShare] = useState(false);
  const [showEditProfile, setShowEditProfile] = useState(false);
  const [showTicketUpload, setShowTicketUpload] = useState(false);
  const [ticketsRefreshKey, setTicketsRefreshKey] = useState(0);
  const [appointmentsRefreshKey, setAppointmentsRefreshKey] = useState(0);
  // Games detail panel (right side) — { type: 'tournament'|'venue'|'training'|'team'|'athlete'|'bookings', data, extra }
  const [gamesPanel, setGamesPanel] = useState(null);
  // Pharmacy detail panel
  const [pharmacyPanel, setPharmacyPanel] = useState(null);
  // Store product detail panel
  const [storeProductPanel, setStoreProductPanel] = useState(null);
  const [storeCartPanel, setStoreCartPanel] = useState(false);
  const [storeInitialView, setStoreInitialView] = useState(null);
  const [aiNavStore, setAiNavStore] = useState(null); // { companyHash, productId } from AI chat navigate
  // Help & Service info panels
  const [helpPanel, setHelpPanel] = useState(false);
  const [showNotifPanel, setShowNotifPanel] = useState(false);
  const [notifUnread, setNotifUnread] = useState(0);
  useEffect(() => {
    const countUnread = () => { try { const n = JSON.parse(localStorage.getItem(_geoKey('nb_notifications')) || '[]'); setNotifUnread(Array.isArray(n) ? n.filter(i => !i.read).length : 0); } catch { setNotifUnread(0); } };
    countUnread();
    const onStorage = (e) => { if (e.key === 'nb_notifications') countUnread(); };
    window.addEventListener('storage', onStorage);
    const t = setInterval(countUnread, 30000);
    return () => { window.removeEventListener('storage', onStorage); clearInterval(t); };
  }, []);
  // Platform fees (loaded once from API, used by all modules)
  const [platformFees, setPlatformFees] = useState({
    store_purchase_platform_fee: 20, store_delivery_fee_default: 150,
    wash_booking_platform_fee: 20, car_route_platform_fee: 20,
    games_booking_platform_fee: 20, games_tournament_platform_fee: 20,
    games_subscription_platform_fee: 20, nhabex_pay_platform_fee: 0,
    beauty_prepaid_platform_fee: 20,
  });
  useEffect(() => {
    API.get('/platform/fees').then(r => {
      if (r.message === 'success' && r.data) setPlatformFees(prev => ({ ...prev, ...r.data }));
    }).catch(() => {});
  }, []);

  // Global store cart count (reads from localStorage, syncs via events)
  const [globalCartCount, setGlobalCartCount] = useState(0);
  useEffect(() => {
    const countCartItems = () => {
      let total = 0;
      for (let i = 0; i < localStorage.length; i++) {
        const key = localStorage.key(i);
        if (key && key.startsWith('nhabex_store_cart_')) {
          try { const items = JSON.parse(localStorage.getItem(key) || '[]'); if (Array.isArray(items)) total += items.reduce((s, it) => s + (it.qty || 1), 0); } catch {}
        }
      }
      setGlobalCartCount(total);
    };
    countCartItems();
    const onCartUpdate = () => countCartItems();
    window.addEventListener('nb-store-cart-update', onCartUpdate);
    window.addEventListener('storage', (e) => { if (e.key && e.key.startsWith('nhabex_store_cart_')) countCartItems(); });
    return () => window.removeEventListener('nb-store-cart-update', onCartUpdate);
  }, []);

  const [serviceInfoPanel, setServiceInfoPanel] = useState(null); // { hash, name, stats }
  const [flightPanel, setFlightPanel] = useState(null);
  const [flightPanelType, setFlightPanelType] = useState('arrivals');
  const [carsPanel, setCarsPanel] = useState(null);
  const [routePanel, setRoutePanel] = useState(null);
  const [carwashPanel, setCarwashPanel] = useState(null);
  const [trackingPanel, setTrackingPanel] = useState(null);
  const [appointmentPanel, setAppointmentPanel] = useState(null);
  const [paymentPanel, setPaymentPanel] = useState(() => {
    const saved = sessionStorage.getItem('nb_webapp_view');
    return saved === 'payments' ? { mode: 'history' } : null;
  }); // { mode: 'form'|'info'|'history', service, category }
  const [gamesMyTeams, setGamesMyTeams] = useState([]);
  const [gamesPlayerId, setGamesPlayerId] = useState(() => parseInt(localStorage.getItem('nbgames_player_id')) || null);
  const [showBeautyBooking, setShowBeautyBooking] = useState(null); // {service, agency, company}
  const [showOnboarding, setShowOnboarding] = useState(() => !localStorage.getItem('nb_onboarding_done'));
  const [orderUpdatesModal, setOrderUpdatesModal] = useState(null); // [{ id, code, title, status, statusLabel, oldStatus, company, agency }]

  // PWA install prompt
  const [deferredInstall, setDeferredInstall] = useState(null);
  const [showInstallBanner, setShowInstallBanner] = useState(false);
  useEffect(() => {
    const handler = (e) => { e.preventDefault(); setDeferredInstall(e); if (!localStorage.getItem('nb-pwa-dismissed')) setShowInstallBanner(true); };
    window.addEventListener('beforeinstallprompt', handler);
    return () => window.removeEventListener('beforeinstallprompt', handler);
  }, []);
  const installPWA = async () => {
    if (!deferredInstall) return;
    deferredInstall.prompt();
    const { outcome } = await deferredInstall.userChoice;
    if (outcome === 'accepted') localStorage.setItem('nb_pwa_installed', '1');
    setDeferredInstall(null);
    setShowInstallBanner(false);
  };
  const dismissInstall = () => { setShowInstallBanner(false); localStorage.setItem('nb-pwa-dismissed', '1'); };

  // Push notification prompt
  const [showPushPrompt, setShowPushPrompt] = useState(false);
  useEffect(() => {
    if (!signedIn) return;
    const timer = setTimeout(() => {
      if (!('Notification' in window) || !('serviceWorker' in navigator)) return;
      if (Notification.permission !== 'default') return;
      if (localStorage.getItem('nb-push-prompt-dismissed')) return;
      const isPWA = window.matchMedia('(display-mode: standalone)').matches || window.navigator.standalone === true || localStorage.getItem('nb_pwa_installed') === '1';
      if (!isPWA) return;
      setShowPushPrompt(true);
    }, 3000);
    return () => clearTimeout(timer);
  }, [signedIn]);
  const enablePush = async () => {
    setShowPushPrompt(false);
    localStorage.setItem('nb-push-prompt-dismissed', '1');
    if ('Notification' in window) await Notification.requestPermission();
  };
  const dismissPush = () => { setShowPushPrompt(false); localStorage.setItem('nb-push-prompt-dismissed', '1'); };

  // Pull-to-refresh
  const mainRef = useRef(null);
  const [pullProgress, setPullProgress] = useState(0);
  const [refreshing, setRefreshing] = useState(false);
  const pullState = useRef({ startY: 0, pulling: false });
  useEffect(() => {
    const el = mainRef.current;
    if (!el) return;
    const onTouchStart = (e) => {
      if (el.scrollTop > 5 || refreshing) return;
      pullState.current = { startY: e.touches[0].clientY, pulling: true };
    };
    const onTouchMove = (e) => {
      if (!pullState.current.pulling || refreshing) return;
      const dy = e.touches[0].clientY - pullState.current.startY;
      if (dy < 0) { pullState.current.pulling = false; setPullProgress(0); return; }
      const progress = Math.min(dy / 80, 1.5);
      setPullProgress(progress);
      if (progress > 0.1) e.preventDefault();
    };
    const onTouchEnd = () => {
      if (!pullState.current.pulling) return;
      pullState.current.pulling = false;
      if (pullProgress >= 1) {
        setRefreshing(true);
        setPullProgress(1);
        // Trigger refresh
        Promise.all([
          API.get('/data/categories').then(res => {
            if (res.message === 'success' && res.data) {
              setCategories((Array.isArray(res.data) ? res.data : []).map(c => ({
                id: c.ID || c.id, title: c.Name || c.name, sub: c.Description || '',
                icon: getCategoryIcon(c.Icon || ''), flag: c.FlagEmoji || '',
              })));
            }
          }).catch(() => {}),
          signedIn ? API.get('/tickets/my').then(res => {
            if (res.message === 'success') {
              const t = Array.isArray(res.data) ? res.data : [];
              if (t.length > 0) setActiveTicket(t[0]);
            }
          }).catch(() => {}) : Promise.resolve(),
        ]).finally(() => {
          setTimeout(() => { setRefreshing(false); setPullProgress(0); }, 400);
        });
      } else {
        setPullProgress(0);
      }
    };
    el.addEventListener('touchstart', onTouchStart, { passive: true });
    el.addEventListener('touchmove', onTouchMove, { passive: false });
    el.addEventListener('touchend', onTouchEnd, { passive: true });
    return () => {
      el.removeEventListener('touchstart', onTouchStart);
      el.removeEventListener('touchmove', onTouchMove);
      el.removeEventListener('touchend', onTouchEnd);
    };
  }, [pullProgress, refreshing, signedIn]);

  // Location preferences
  const [showLocationPrefs, setShowLocationPrefs] = useState(false);
  const [nearestFirst, setNearestFirst] = useState(() => localStorage.getItem('nb-nearest-first') !== '0');
  useEffect(() => { localStorage.setItem('nb-nearest-first', nearestFirst ? '1' : '0'); }, [nearestFirst]);

  // Theme
  const [theme, setTheme] = useState(() => localStorage.getItem('nb-theme') || 'dark');
  useEffect(() => {
    document.documentElement.setAttribute('data-theme', theme);
    localStorage.setItem('nb-theme', theme);
  }, [theme]);
  const toggleTheme = () => setTheme(t => t === 'dark' ? 'light' : 'dark');

  // Favorites
  const favorites = useFavorites(signedIn);

  // Toast (accessed via global bridge from ToastProvider)
  const addToast = useCallback((msg, type, dur) => {
    if (window.__nbAddToast) window.__nbAddToast(msg, type, dur);
  }, []);

  // Shared payment receipt modal — detect ?pay_receipt=HASH
  const [sharedReceipt, setSharedReceipt] = useState(null);
  useEffect(() => {
    const hash = new URLSearchParams(window.location.search).get('pay_receipt');
    if (!hash) return;
    window.history.replaceState({}, '', window.location.pathname);
    API.get('/payments/receipt/' + hash).then(res => {
      if (res.message === 'success' && res.data) setSharedReceipt(res.data);
    }).catch(() => {});
  }, []);

  // Helper: abrir recibo por TransactionId (reutilizado por Games, Store, Wash, Beauty)
  const openReceiptByTxId = async (transactionId) => {
    if (!transactionId) return;
    try {
      const r = await API.post('/client/payments/' + transactionId + '/share');
      if (r.message === 'success' && r.data?.hash) {
        const receiptRes = await API.get('/payments/receipt/' + r.data.hash);
        if (receiptRes.message === 'success' && receiptRes.data) {
          setSharedReceipt(receiptRes.data);
          return;
        }
      }
      addToast(_t('webapp.receipt_not_found') || 'Recibo não encontrado.', 'error');
    } catch(e) {
      addToast(_t('webapp.error_generic'), 'error');
    }
  };

  // Deep link receipt — detect ?receipt=TransactionRef (from payment-return page)
  useEffect(() => {
    if (!_deepLinkParams.receiptRef || !signedIn) return;
    setView('payments');
    setPaymentPanel({ mode: 'history' });
    openReceiptByTxId(_deepLinkParams.receiptRef);
  }, [signedIn]);

  // Shared player profile — detect ?view=games&profile=HASH
  useEffect(() => {
    const params = new URLSearchParams(window.location.search);
    const profileHash = params.get('profile');
    const viewParam = params.get('view');
    if (profileHash && viewParam === 'games') {
      setView('games');
      // Delay to let games component mount, then dispatch profile load
      setTimeout(() => {
        window.dispatchEvent(new CustomEvent('nb-games-panel-action', { detail: { action: 'view-profile', playerHash: profileHash } }));
      }, 500);
      window.history.replaceState({}, '', window.location.pathname + '?view=games');
    }
  }, []);

  // SISP payment return handler — detect ?result= in URL or from popup via localStorage
  useEffect(() => {
    const params = new URLSearchParams(window.location.search);
    const result = params.get('result');
    const ref = params.get('ref');
    const stype = params.get('stype') || '';

    // Handle token card callbacks (add/cancel card)
    const action = params.get('action');
    if (action === 'tokenize' || action === 'token_cancel') {
      const tokenResult = params.get('result');
      if (action === 'tokenize') {
        if (tokenResult === 'success') addToast(_t('tokencard.add_success'), 'success');
        else if (tokenResult === 'error') addToast(params.get('errdesc') || _t('tokencard.add_error'), 'error');
      } else {
        if (tokenResult === 'success') addToast(_t('tokencard.cancel_success'), 'success');
        else if (tokenResult === 'error') addToast(params.get('errdesc') || _t('tokencard.cancel_error'), 'error');
      }
      window.history.replaceState({}, '', window.location.pathname + '?view=payments');
      setView('payments');
      return;
    }

    if (result) {
      // This page was loaded with SISP callback params (either popup or same window)
      // Store result for the parent window to pick up
      const errdesc = params.get('errdesc') || '';
      const errcode = params.get('errcode') || '';
      localStorage.setItem('nb_sisp_result', JSON.stringify({ result, ref, stype, errdesc, errcode, ts: Date.now() }));

      // If this is a popup, notify parent and close
      if (window.opener) {
        try { window.opener.focus(); } catch(e) {}
        window.close();
        return;
      }

      // Detect which view we came from
      const viewParam = params.get('view');

      // If same window, process the result
      handleSispReturn(result, ref, viewParam, stype, errdesc, errcode);

      // Clean URL params but preserve view if present
      const cleanUrl = viewParam
        ? window.location.pathname + '?view=' + viewParam
        : window.location.pathname;
      window.history.replaceState({}, '', cleanUrl);
    }

    // Listen for storage events from popup
    const onStorage = (e) => {
      if (e.key === 'nb_sisp_result' && e.newValue) {
        try {
          const data = JSON.parse(e.newValue);
          if (data.ts && Date.now() - data.ts < 30000) {
            handleSispReturn(data.result, data.ref, null, data.stype, data.errdesc, data.errcode);
          }
        } catch(err) {}
        localStorage.removeItem('nb_sisp_result');
      }
    };
    window.addEventListener('storage', onStorage);
    return () => window.removeEventListener('storage', onStorage);
  }, []);

  const [sispReturnModal, setSispReturnModal] = useState(null);

  function handleSispReturn(result, ref, viewParam, stype, errdesc, errcode) {
    const pendingBooking = localStorage.getItem('nb_carwash_pending_booking');

    // Store purchase return — navigate to store and let StoreView handle it
    if (stype === 'store_purchase') {
      // Save result for StoreView to pick up on mount
      localStorage.setItem('nb_store_sisp_result', JSON.stringify({ result, ref }));
      setView('store');
      if (result === 'success') {
        addToast(_t('webapp.store_payment_confirmed'), 'success', 6000);
      } else if (result === 'canceled') {
        addToast('Pagamento cancelado. A encomenda ficou pendente.', 'warning', 6000);
      } else {
        addToast('Erro no pagamento. A encomenda ficou pendente.', 'error', 6000);
      }
      return;
    }

    // Games subscription return
    if (viewParam === 'games' || stype === 'games_subscription') {
      if (result === 'success') {
        setSispReturnModal({ type: 'games_subscription_success', ref });
        if (playerId) {
          gApi('/my-subscriptions', { player_id: playerId }).then(r => {
            if (r.message === 'success') setMySubscriptions(Array.isArray(r.data) ? r.data : []);
          });
        }
      } else if (result === 'canceled') {
        setSispReturnModal({ type: 'games_subscription_canceled' });
      } else {
        setSispReturnModal({ type: 'games_subscription_error' });
      }
      return;
    }

    // Mensagens contextuais por tipo de serviço
    const successMessages = {
      phone_topup:      'Carregamento realizado com sucesso!',
      electricity:      'Pagamento de electricidade confirmado!',
      water:            'Pagamento de água confirmado!',
      insurance:        'Pagamento de seguro confirmado!',
      internet:         'Pagamento de internet confirmado!',
      purchase:         'Pagamento realizado com sucesso!',
      other:            'Pagamento realizado com sucesso!',
      games_booking:    'Reserva de campo confirmada!',
      games_tournament: 'Inscrição no torneio confirmada!',
      car_route_booking:'Reserva de transporte confirmada!',
      wash_booking:     'Pagamento confirmado! Marcação confirmada.',
    };

    const cancelMessages = {
      phone_topup:      'Carregamento cancelado.',
      electricity:      'Pagamento cancelado.',
      water:            'Pagamento cancelado.',
      insurance:        'Pagamento cancelado.',
      internet:         'Pagamento cancelado.',
      purchase:         'Pagamento cancelado.',
      other:            'Pagamento cancelado.',
      games_booking:    'Reserva cancelada.',
      games_tournament: 'Inscrição cancelada.',
      car_route_booking:'Reserva cancelada.',
      wash_booking:     'Pagamento cancelado. A marcação ficou pendente.',
    };

    if (result === 'success') {
      addToast(successMessages[stype] || 'Pagamento realizado com sucesso!', 'success', 6000);
      if (pendingBooking) localStorage.removeItem('nb_carwash_pending_booking');
    } else if (result === 'canceled') {
      addToast(cancelMessages[stype] || 'Pagamento cancelado.', 'warning', 6000);
    } else {
      const serviceRechargeTypes = ['electricity', 'water', 'insurance', 'internet', 'other', 'phone_topup'];
      let isCardError = false;
      if (serviceRechargeTypes.includes(stype)) {
        if (['057','004','007','062'].includes(errcode)) {
          isCardError = true;
        } else if (errdesc && /not allowed|not supported|not permitted|restricted|não permitid|nao permitid/i.test(errdesc)) {
          isCardError = true;
        }
      }
      if (isCardError) {
        addToast(_t('pay_return.card_not_supported_subtitle') || 'O cartão utilizado não suporta esta operação. Para pagamento de serviços e recargas, utilize um cartão Vinti4 nacional.', 'error', 8000);
      }
      if (errdesc) {
        addToast(errdesc, 'error', 6000);
      } else if (!isCardError) {
        addToast('Erro no pagamento. Tente novamente.', 'error', 6000);
      }
    }
  }

  // Sidebar
  const [sidebarWidth, setSidebarWidth] = useState(() => {
    const saved = parseInt(localStorage.getItem('nb-sidebar-w') || '', 10);
    return Number.isFinite(saved) && saved > 0 ? saved : 72;
  });
  const collapsed = sidebarWidth < 130;

  const toggleSidebar = () => setSidebarWidth(w => (w < 130 ? 248 : 72));

  useEffect(() => {
    document.documentElement.style.setProperty('--sidebar-w', sidebarWidth + 'px');
    localStorage.setItem('nb-sidebar-w', String(sidebarWidth));
  }, [sidebarWidth]);

  useEffect(() => {
    document.documentElement.style.setProperty('--ticket-w', ticketCollapsed ? '3rem' : '22.5rem');
  }, [ticketCollapsed]);

  const onResizeStart = (e) => {
    e.preventDefault();
    const startX = e.clientX;
    const startW = sidebarWidth;
    document.body.classList.add('resizing-sidebar');
    const onMove = (ev) => {
      const next = Math.max(72, Math.min(420, startW + (ev.clientX - startX)));
      setSidebarWidth(next);
    };
    const onUp = () => {
      document.body.classList.remove('resizing-sidebar');
      window.removeEventListener('mousemove', onMove);
      window.removeEventListener('mouseup', onUp);
    };
    window.addEventListener('mousemove', onMove);
    window.addEventListener('mouseup', onUp);
  };

  // Check existing session — restore auth from localStorage token
  useEffect(() => {
    const token = localStorage.getItem('sanctum_token');
    if (!token) { setAuthChecking(false); return; }
    API.get('/client/auth/me').then(res => {
      if (res.message === 'success' && res.data) {
        const u = res.data.user || res.data;
        const mapped = mapUserData(u);
        setUser(mapped);
        setSignedIn(true);
        if (mapped.preferred_lang) localStorage.setItem('nb_preferred_lang', mapped.preferred_lang);
      } else {
        console.warn('[Auth] Session restore failed:', res.message);
      }
    }).catch(err => {
      console.warn('[Auth] Session restore error (keeping token):', err.message || err);
    }).finally(() => setAuthChecking(false));
  }, []);

  // Deep linking — process URL params on mount
  useEffect(() => {
    const params = new URLSearchParams(window.location.search);
    const agencyHash = params.get('agency');
    const companyId = params.get('cid');
    const evaluateHash = params.get('evaluate');
    const openTickets = params.has('openTickets');
    const mtoken = params.get('mtoken');

    // Clean URL params
    if (params.toString()) {
      window.history.replaceState({}, '', window.location.pathname);
    }

    // mtoken: redeem deep-link token and auto-login
    if (mtoken) {
      API.post('/client/auth/redeem-token', { token: mtoken }).then(res => {
        if (res.message === 'success' && res.data) {
          const token = res.data.token;
          if (token) localStorage.setItem('sanctum_token', token);
          const u = res.data.user;
          if (u) { setUser(mapUserData(u)); setSignedIn(true); }
          // Execute action if present
          if (res.data.action === 'printticket' && res.data.agency) {
            setCurrentAgency({ Hash: res.data.agency });
            setCurrentAgencyCompany({ hash: res.data.company || '' });
            setView('agency');
          }
        }
      }).catch(() => {});
      return;
    }

    // agency: navigate directly to agency services
    if (agencyHash) {
      setCurrentAgency({ Hash: agencyHash });
      setCurrentAgencyCompany({ hash: companyId || '' });
      setView('agency');
      return;
    }

    // evaluate: open evaluation for specific ticket
    if (evaluateHash) {
      // Wait for auth, then open evaluation
      const tryEval = () => {
        API.get(`/tickets/${evaluateHash}/info`).then(res => {
          if (res.message === 'success' && res.data) {
            setShowEvaluation(res.data);
          }
        }).catch(() => {});
      };
      setTimeout(tryEval, 1500);
      return;
    }

    // openTickets: go to tickets view
    if (openTickets) {
      setView('tickets');
    }
  }, []);

  // Track session start
  useEffect(() => { NbTracker.trackSession(); }, []);

  // Check for order tracking status changes on login
  useEffect(() => {
    if (!signedIn) return;
    API.get('/client/orders/tracked').then(res => {
      if (res.message === 'success' && Array.isArray(res.data)) {
        const updates = res.data.filter(o => o.hasUpdate);
        if (updates.length > 0) {
          setOrderUpdatesModal(updates);
        }
      }
    }).catch(() => {});
  }, [signedIn]);

  // Load categories
  useEffect(() => {
    setLoadingCats(true);
    API.get('/data/categories').then(res => {
      if (res.message === 'success' && res.data) {
        const cats = (Array.isArray(res.data) ? res.data : []).map(c => ({
          id: c.ID || c.id,
          title: c.Name || c.name,
          sub: c.Description || '',
          icon: getCategoryIcon(c.Icon || ''),
          flag: c.FlagEmoji || '',
        }));
        setCategories(cats);
      }
      setLoadingCats(false);
    }).catch(() => setLoadingCats(false));
  }, []);

  // Load active tickets + poll for state changes
  const prevStatesRef = useRef({});

  const fetchMyTickets = useCallback(() => {
    if (!signedIn) return;
    API.get('/tickets/my').then(res => {
      if (res.message === 'success' && Array.isArray(res.data)) {
        const tickets = res.data.map(normalizeTicket);
        const active = tickets.find(t => [1, 6, 7].includes(t.TicketState || t.State));

        // Detect state transitions for notifications
        tickets.forEach(t => {
          const hash = t.TicketHash;
          const oldState = prevStatesRef.current[hash];
          const newState = t.TicketState || t.State;

          if (oldState !== undefined && oldState !== newState) {
            // Ticket called (1 → 6)
            if (newState === 6) {
              playNotificationSound();
              try { if (navigator.vibrate) navigator.vibrate([300, 100, 300, 100, 300]); } catch(e) {}
              addToast(`A tua senha ${t.Code || t.Number} foi chamada!`, 'success', 8000);
            }
            // Ticket in service (6 → 7)
            if (newState === 7) {
              addToast(`Senha ${t.Code || t.Number} em atendimento.`, 'info', 5000);
            }
            // Ticket served (→ 3)
            if (newState === 3) {
              addToast(`Senha ${t.Code || t.Number} atendida. Avalia o serviço!`, 'info', 5000);
              setTimeout(() => setShowEvaluation(t), 2000);
            }
            // Ticket cancelled (→ 4, 5)
            if (newState === 4 || newState === 5) {
              addToast(`Senha ${t.Code || t.Number} foi cancelada.`, 'error', 5000);
            }
          }
          prevStatesRef.current[hash] = newState;
        });

        myTicketsRef.current = tickets;
        if (active) setActiveTicket(active);
        else setActiveTicket(null);
      }
    }).catch(() => {});
  }, [signedIn, addToast]);

  useEffect(() => { fetchMyTickets(); }, [signedIn]);

  // Auto-check for unevaluated appointments on login
  const aptEvalCheckedRef = useRef(false);
  useEffect(() => {
    if (!signedIn || aptEvalCheckedRef.current) return;
    if (sessionStorage.getItem('nb-webapp-apt-eval-reminded')) return;
    aptEvalCheckedRef.current = true;
    // Delay to ensure auth is fully established
    const timer = setTimeout(() => {
      API.get('/beauty/my-appointments').then(res => {
        if (res.message !== 'success' || !Array.isArray(res.data) || res.data.length === 0) return;
        const today = new Date().toISOString().split('T')[0];
        // 1. Completed without rating
        const unevaluated = res.data.filter(a => parseInt(a.ID_AudienceState) === 3 && (!a.Rating || parseInt(a.Rating) === 0));
        if (unevaluated.length > 0) {
          sessionStorage.setItem('nb-webapp-apt-eval-reminded', '1');
          const apt = unevaluated[0];
          const svcName = apt.ServiceName || apt.AgencyName || '';
          addToast(_t('webapp.apt_eval_reminder').replace(':service', svcName) || ('Avalia o teu atendimento de ' + svcName + '!'), 'info', 6000);
          setTimeout(() => setShowEvaluation({ TicketHash: apt.Code, AgencyHash: apt.AgencyHash, ServiceHash: apt.ServiceHash, AgencyName: apt.AgencyName, ServiceName: apt.ServiceName, isAppointment: true, appointmentId: apt.ID }), 1500);
          return;
        }
        // 2. No-show (past, not completed, not cancelled, no rating)
        const noShow = res.data.filter(a => {
          const st = parseInt(a.ID_AudienceState);
          return (a.DateAudience || '') < today && st !== 3 && st !== 4 && st !== 5 && (!a.Rating || parseInt(a.Rating) === 0);
        });
        if (noShow.length > 0) {
          sessionStorage.setItem('nb-webapp-apt-eval-reminded', '1');
          const apt = noShow[0];
          addToast(_t('webapp.apt_noshow_reminder') || 'Tens uma marcação por avaliar.', 'info', 6000);
          setTimeout(() => setShowNoShowEval({ TicketHash: apt.Code, AgencyHash: apt.AgencyHash, ServiceHash: apt.ServiceHash, AgencyName: apt.AgencyName, isAppointment: true, appointmentId: apt.ID }), 1500);
        }
      }).catch(() => {});
    }, 2000);
    return () => clearTimeout(timer);
  }, [signedIn]);

  // Listen for Pusher queue updates to refresh ticket state
  useEffect(() => {
    let queueDebounce = null;
    const handler = () => {
      clearTimeout(queueDebounce);
      queueDebounce = setTimeout(fetchMyTickets, 2000);
    };
    window.addEventListener('nb-queue-updated', handler);
    // Fallback: poll every 60s
    const interval = setInterval(fetchMyTickets, 60000);
    return () => { window.removeEventListener('nb-queue-updated', handler); clearInterval(interval); clearTimeout(queueDebounce); };
  }, [fetchMyTickets]);

  // ── AI Chat navigation: listen for module navigation requests ──
  useEffect(() => {
    const handler = (e) => {
      const { view: targetView, params } = e.detail || {};
      if (!targetView) return;
      const validViews = ['store', 'games', 'pharmacy', 'cars', 'carwash', 'payments', 'appointments', 'tickets', 'home'];
      if (validViews.includes(targetView)) {
        if (targetView === 'store') {
          setAiNavStore({ companyHash: params?.companyHash || null, productId: params?.productId || null });
        }
        if (targetView === 'payments') {
          setPaymentPanel({ mode: 'history' });
        }
        setView(targetView);
      }
    };
    window.addEventListener('nb-ai-navigate', handler);
    return () => window.removeEventListener('nb-ai-navigate', handler);
  }, []);

  // ── Pusher: subscribe to agency channels for active tickets ──
  // Keeps connection alive regardless of which view the user is on.
  const ticketPusherRef = useRef({ channels: new Set(), handlers: {} });
  useEffect(() => {
    const tickets = myTicketsRef.current || [];
    const activeTickets = tickets.filter(t => {
      const state = t.TicketState || t.State;
      return [1, 6, 7].includes(state);
    });

    // Collect unique agency channels from active tickets
    const needed = new Set();
    activeTickets.forEach(t => {
      if (t.PusherEnabled && t.PusherKey && t.PusherChannel) {
        PusherClient.init(t.PusherKey, t.PusherCluster || 'eu');
        needed.add(t.PusherChannel);
      }
    });

    const ref = ticketPusherRef.current;

    // Subscribe to new channels
    needed.forEach(ch => {
      if (!ref.channels.has(ch)) {
        PusherClient.subscribe(ch);

        const debounceTimer = { id: null };
        const ticketStateDebounce = { id: null };
        const onQueueEvent = () => {
          clearTimeout(debounceTimer.id);
          debounceTimer.id = setTimeout(() => {
            window.dispatchEvent(new CustomEvent('nb-queue-updated', { detail: { channel: ch } }));
          }, 2000);
        };
        const onTicketState = (data) => {
          window.dispatchEvent(new CustomEvent('nb-ticket-state-push', { detail: data }));
          // Debounced fetch to avoid excessive requests during rapid state changes
          clearTimeout(ticketStateDebounce.id);
          ticketStateDebounce.id = setTimeout(() => fetchMyTickets(), 1500);
        };

        PusherClient.bind(ch, 'up-monitor', onQueueEvent);
        PusherClient.bind(ch, 'up-waiting', onQueueEvent);
        PusherClient.bind(ch, 'data-changed', onQueueEvent);
        PusherClient.bind(ch, 'ticket-state-changed', onTicketState);

        ref.channels.add(ch);
        ref.handlers[ch] = { onQueueEvent, onTicketState, debounceTimer, ticketStateDebounce };
      }
    });

    // Unsubscribe from channels that are no longer needed
    ref.channels.forEach(ch => {
      if (!needed.has(ch)) {
        const h = ref.handlers[ch];
        if (h) {
          clearTimeout(h.debounceTimer.id);
          clearTimeout(h.ticketStateDebounce.id);
          PusherClient.unbind(ch, 'up-monitor', h.onQueueEvent);
          PusherClient.unbind(ch, 'up-waiting', h.onQueueEvent);
          PusherClient.unbind(ch, 'data-changed', h.onQueueEvent);
          PusherClient.unbind(ch, 'ticket-state-changed', h.onTicketState);
          delete ref.handlers[ch];
        }
        PusherClient.unsubscribe(ch);
        ref.channels.delete(ch);
      }
    });
  }, [activeTicket, fetchMyTickets]);

  // Load recents from localStorage (works without login)
  useEffect(() => {
    const local = getRecentAgencies();
    if (local.length > 0) {
      setRecents(local.map(r => ({
        id: r.hash, icon: 'building', name: r.name, when: r.date,
        agencyHash: r.hash, agencyName: r.name, companyName: r.companyName, companyHash: r.companyHash,
      })));
    }
  }, []);

  function getInitials(name) {
    if (!name) return 'U';
    return name.split(' ').filter(Boolean).map(w => w[0]).slice(0, 2).join('').toUpperCase();
  }

  // Category → load companies
  const onOpenCategory = (cat) => {
    trackCatUsage(cat.id, 'visit');
    // Categoria Lavagem → redirecionar para o módulo dedicado car wash
    if (cat.title && cat.title.toUpperCase().includes('LAVAGEM')) {
      setView('carwash');
      return;
    }
    setCurrentCategory(cat);
    setCompanies([]);
    setLoadingCompanies(true);
    setView('companies');
    API.get('/data/companies', { category: cat.id }).then(res => {
      if (res.message === 'success' && res.data) {
        const list = (Array.isArray(res.data) ? res.data : []).map(c => ({
          id: c.ID || c.id,
          hash: c.ExternCompany || c.Hash || c.hash,
          name: c.Name || c.name,
          logo: c.LogoURL || '',
          description: c.Description || '',
          headquarters: c.Headquarters || '',
          color: c.Color || '',
          agencyCount: c.AgencyCount || 0,
        }));
        setCompanies(list);
        if (list.length === 1) onSelectCompany(list[0]);
      }
    }).catch(() => {}).finally(() => setLoadingCompanies(false));
  };

  const onSelectCompany = (company) => {
    setCurrentCompany(company);
    setView('company');
  };

  const onSelectAgency = (agency, company) => {
    setCurrentAgency(agency);
    setCurrentAgencyCompany(company);
    setView('agency');
    saveRecentAgency(agency, company);
    setRecents(getRecentAgencies().map(r => ({
      id: r.hash, icon: 'building', name: r.name, when: r.date,
      agencyHash: r.hash, agencyName: r.name, companyName: r.companyName, companyHash: r.companyHash,
    })));
  };

  // Open pre-print dialog or beauty flow
  // Check if user has active ticket for a specific service at an agency
  const hasActiveTicketForService = (serviceHash, agencyHash) => {
    return myTicketsRef.current.some(t => {
      const state = t.TicketState || t.State;
      const isActive = state === 1 || state === 6 || state === 7;
      const sameService = (t.ServiceHash || '') === serviceHash;
      const sameAgency = (t.AgencyHash || '') === agencyHash;
      return isActive && sameService && sameAgency;
    });
  };

  const onPrintTicket = (service, agency, company) => {
    if (!signedIn) {
      addToast('Faz login para tirar uma senha.', 'error');
      return;
    }
    const svcHash = service.Hash || service.hash || '';
    const agcHash = agency.Hash || agency.Token || agency.hash || '';
    if (svcHash && agcHash && hasActiveTicketForService(svcHash, agcHash)) {
      addToast('Já tens uma senha ativa para este serviço. Aguarda o atendimento ou cancela a senha anterior.', 'error', 5000);
      return;
    }
    // Block if service is outside configured schedule (timeservice)
    if (service.TimeService === 0) {
      let msg = _t('webapp.service_outside_schedule');
      if (service.TimeServiceSchedule?.length) {
        msg += '\n' + _t('webapp.schedule_label') + ': ' + service.TimeServiceSchedule.join(', ');
      }
      addToast(msg, 'warning', 5000);
      return;
    }
    // Beauty services → open dedicated booking flow (barber selection + date/time)
    if (service.CategorySlug === 'beauty') {
      setShowBeautyBooking({ service, agency, company });
    } else {
      setShowPrePrint({ service, agency, company });
    }
  };

  // Actual print after dialog confirmation
  const doConfirmPrint = async (extras) => {
    const { service, agency, company } = showPrePrint;
    setShowPrePrint(null);

    const agencyHash = agency.Hash || agency.Token || agency.hash;
    const serviceHash = service.Hash || service.hash;
    try {
      const res = await API.post('/tickets/print', {
        agency: agencyHash,
        service: serviceHash,
        company: company?.hash || company?.Hash || '',
        ...extras,
      });
      if (res.message === 'success' && res.data) {
        if (currentCategory?.id) trackCatUsage(currentCategory.id, 'ticket');
        setActiveTicket(res.data);
        addToast(`Senha ${res.data.Code || res.data.Number} emitida!`, 'success');
        fetchMyTickets();
        // Manter na view da agência para monitorizar a fila (não redirecionar para home)
      } else {
        const errMsg = {
          'agency-closed': 'Esta agência está fechada.',
          'ticket-active-agency': 'Já tens uma senha ativa para este serviço. Aguarda o atendimento ou cancela a anterior.',
          'service-disabled': 'Este serviço não permite senhas online.',
          'ticket-limit': 'Limite diário atingido.',
          'ticket-sould-out': 'Senhas esgotadas para hoje.',
        };
        addToast(errMsg[res.message] || res.detail || res.message || _t('webapp.error_issue_ticket'), 'error');
      }
    } catch (e) {
      addToast('Erro de ligação ao servidor.', 'error');
    }
  };

  // Helper: lookup order and open tracking panel
  const lookup_order_for_panel = (code) => {
    fetch(`../commercial/api/client-orders/public-lookup?code=${encodeURIComponent(code)}`)
      .then(r => r.json())
      .then(data => { if (data.message === 'success') setTrackingPanel(data.data); })
      .catch(() => {});
  };

  // Handle search result selection
  const onSearchSelect = (result) => {
    NbTracker.track('search_select', { type: result._type, name: (result.Name || '').substring(0, 50) });
    const type = result._type;
    if (type === 'agency') {
      setCurrentAgency(result);
      setCurrentAgencyCompany({ hash: result.CompanyHash || result.ExternCompany });
      setView('agency');
    } else if (type === 'company') {
      setCurrentCompany({ id: result.ID, hash: result.ExternCompany || result.Hash, name: result.Name, logo: result.LogoURL });
      setView('company');
    } else if (type === 'category') {
      onOpenCategory({ id: result.ID, title: result.Name, sub: '', icon: getCategoryIcon(result.Icon || '') });
    } else if (type === 'service') {
      // Navigate directly to the agency services view (monitoring)
      if (result.AgencyHash) {
        setCurrentAgency({ Hash: result.AgencyHash, Name: result.AgencyName });
        setCurrentAgencyCompany({ hash: result.CompanyHash });
        setView('agency');
      } else if (result.CompanyHash) {
        setCurrentCompany({ id: result.ID, hash: result.CompanyHash, name: result.CompanyName });
        setView('company');
      }
    } else if (type === 'product') {
      setView('store');
    } else if (type === 'tournament' || type === 'venue' || type === 'team') {
      setView('games');
    } else if (type === 'pharmacy') {
      setView('pharmacy');
    }
    setQuery('');
  };

  const [showCancelModal, setShowCancelModal] = useState(false);
  const onCancelTicket = () => { if (activeTicket) setShowCancelModal(true); };
  const doCancel = async (reason) => {
    setShowCancelModal(false);
    if (!activeTicket) return;
    const cancelledTicket = { ...activeTicket };
    try {
      await API.post('/tickets/remove', { ticket_hashes: [activeTicket.TicketHash], reason });
      setActiveTicket(null);
      addToast(_t('webapp.ticket_cancelled'), 'success');
      setShowNoShowEval(cancelledTicket);
    } catch (e) {
      addToast(_t('webapp.network_error'), 'error');
    }
  };

  const handleLogin = (userData) => {
    const mapped = mapUserData(userData);
    setUser(mapped);
    setSignedIn(true);
    // Persist language preference for API Accept-Language header
    if (mapped.preferred_lang) localStorage.setItem('nb_preferred_lang', mapped.preferred_lang);
    NbTracker.track('login');
  };

  const [showLogoutModal, setShowLogoutModal] = useState(false);
  const handleSignOut = () => { setShowLogoutModal(true); };
  const confirmSignOut = async () => {
    setShowLogoutModal(false);
    NbTracker.track('logout');
    try { await API.post('/client/auth/logout'); } catch(e) {}
    localStorage.removeItem('sanctum_token');
    setSignedIn(false);
    setUser(null);
    setActiveTicket(null);
    setRecents([]);
  };

  const requestLocation = async () => {
    if (!navigator.geolocation) {
      addToast('O teu navegador não suporta geolocalização.', 'error');
      return;
    }

    // Verificar se a permissão foi bloqueada permanentemente
    if (navigator.permissions) {
      try {
        const perm = await navigator.permissions.query({ name: 'geolocation' });
        if (perm.state === 'denied') {
          addToast('Localização bloqueada. Vai a Definições do Safari → Websites → Localização e permite o acesso para este site.', 'warning', 8000);
          setLocationGranted(false);
          return;
        }
      } catch (_) { /* permissions API não suportada, continuar normalmente */ }
    }

    navigator.geolocation.getCurrentPosition(
      (pos) => {
        setUserLat(pos.coords.latitude);
        setUserLng(pos.coords.longitude);
        setLocationGranted(true);
        addToast('Localização ativada.', 'success', 3000);
        API.get('/data/reverse-geocode', { lat: pos.coords.latitude, lng: pos.coords.longitude }).then(res => {
          if (res.message === 'success' && res.data) {
            const _str = (v) => typeof v === 'string' ? v : (v && v.Name ? v.Name : '');
            setLocationName(_str(res.data.city) || _str(res.data.zone) || _str(res.data.island) || '');
          }
        }).catch(() => {});
      },
      (err) => {
        setLocationGranted(false);
        if (err.code === 1) {
          addToast('Permissão de localização negada. No Safari, vai a Definições → Websites → Localização para permitir.', 'warning', 8000);
        } else {
          addToast('Não foi possível obter a localização. Tenta novamente.', 'error');
        }
      },
      { enableHighAccuracy: true, timeout: 10000, maximumAge: 300000 }
    );
  };

  // Auto-request location on mount
  useEffect(() => {
    if (!navigator.geolocation) return;
    navigator.geolocation.getCurrentPosition(
      (pos) => {
        setUserLat(pos.coords.latitude);
        setUserLng(pos.coords.longitude);
        setLocationGranted(true);
        API.get('/data/reverse-geocode', { lat: pos.coords.latitude, lng: pos.coords.longitude }).then(res => {
          if (res.message === 'success' && res.data) {
            const _str = (v) => typeof v === 'string' ? v : (v && v.Name ? v.Name : '');
            setLocationName(_str(res.data.city) || _str(res.data.zone) || _str(res.data.island) || '');
          }
        }).catch(() => {});
      },
      () => {},
      { enableHighAccuracy: true, timeout: 10000, maximumAge: 300000 }
    );
  }, []);

  const activeTicketCount = activeTicket ? 1 : 0;

  return (
    <div className="app">
      <Sidebar
        view={view}
        setView={(v) => { setView(v); if (v === 'home') { setCurrentCategory(null); setCurrentCompany(null); setCurrentAgency(null); } }}
        activeTickets={activeTicketCount}
        width={sidebarWidth}
        onResizeStart={onResizeStart}
        collapsed={collapsed}
        onToggle={toggleSidebar}
      />
      <Topbar
        view={view}
        currentCategory={currentCategory?.title}
        onSearch={setQuery}
        query={query}
        signedIn={signedIn}
        authChecking={authChecking}
        user={user || {}}
        onSignOut={handleSignOut}
        onSearchSelect={onSearchSelect}
        activeTicketCount={activeTicket ? 1 : 0}
        onViewTickets={() => setView('tickets')}
        onEditProfile={() => setShowEditProfile(true)}
        theme={theme}
        onToggleTheme={toggleTheme}
        notifUnread={notifUnread}
        onNotifications={() => { setHelpPanel(false); setServiceInfoPanel(null); setShowNotifPanel(p => !p); setTicketCollapsed(false); }}
        onHelp={() => { setServiceInfoPanel(null); setHelpPanel(true); }}
        onLogin={() => setTicketCollapsed(false)}
        onGoHome={() => { setView('home'); setCurrentCategory(null); setCurrentCompany(null); setCurrentAgency(null); }}
        locationGranted={locationGranted}
        locationName={locationName}
        onRequestLocation={() => locationGranted ? setShowLocationPrefs(true) : requestLocation()}
        onViewPayments={() => { setView('payments'); setPaymentPanel({ mode: 'history' }); }}
        onPayPending={(item) => {
          setPaymentPanel({ mode: 'form', service: null, category: null, pendingItem: item });
          setTicketCollapsed(false);
        }}
        cartCount={globalCartCount}
        onViewCart={() => { setStoreCartPanel(true); setTicketCollapsed(false); }}
      />
      <main className="main" ref={mainRef}>
        {/* Pull-to-refresh indicator */}
        {(pullProgress > 0 || refreshing) && (
          <div className="ptr-indicator" style={{ transform: `translateY(${Math.min(pullProgress, 1) * 50}px)`, opacity: Math.min(pullProgress, 1) }}>
            <div className={`ptr-spinner ${refreshing ? 'ptr-spinning' : ''}`} style={{ transform: `rotate(${pullProgress * 360}deg)` }}>
              <Ico name="arrowL" size={18} />
            </div>
          </div>
        )}
        {view === 'home' && (
          <HomeView
            onOpenCategory={onOpenCategory}
            query={query}
            categories={categories}
            loading={loadingCats}
            recents={recents}
            onSelectRecent={(r) => {
              if (r.agencyHash) {
                setCurrentAgency({ Hash: r.agencyHash, Name: r.agencyName || r.name, Zone: '' });
                setCurrentAgencyCompany({ hash: r.companyHash || '' });
                setView('agency');
              }
            }}
            favAgencies={favorites.favAgencyData}
            onSelectFavAgency={(a) => {
              setCurrentAgency({ Hash: a.hash, Name: a.name, Zone: a.zone });
              setCurrentAgencyCompany({ hash: a.companyHash || '' });
              setView('agency');
            }}
          />
        )}
        {view === 'companies' && currentCategory && (
          <>
            <div className="detail-head">
              <button className="back-btn" onClick={() => { setView('home'); setCurrentCategory(null); }}><Ico name="arrowL" /></button>
              <div className="titles">
                <h1>{currentCategory.title}</h1>
                <p>{currentCategory.sub}{!loadingCompanies ? ` · ${companies.length} empresas` : ''}</p>
              </div>
            </div>
            {loadingCompanies ? (
              <SkeletonCards count={6} />
            ) : (
              <div className="company-grid">
                {companies.map(c => (
                  <button key={c.id} className="cmp-card" onClick={() => onSelectCompany(c)} style={c.color ? {'--company-accent': c.color} : {}}>
                    <div className="cmp-card__top">
                      <div className="cmp-card__logo">
                        {c.logo ? (
                          <img src={c.logo} alt="" />
                        ) : (
                          <div className="cmp-card__logo-fb"><Ico name={currentCategory.icon || 'briefcase'} size={22} /></div>
                        )}
                      </div>
                      <div className="cmp-card__head">
                        <h3>{c.name}</h3>
                        {c.headquarters && (
                          <span className="cmp-card__loc"><Ico name="pin" size={12} />{c.headquarters}</span>
                        )}
                      </div>
                    </div>
                    {c.description && <p className="cmp-card__desc">{c.description}</p>}
                    <div className="cmp-card__footer">
                      {c.agencyCount > 0 ? (
                        <span className="cmp-card__badge cmp-card__badge--active">
                          <Ico name="building" size={12} />{c.agencyCount} {c.agencyCount === 1 ? 'agência ativa' : 'agências ativas'}
                        </span>
                      ) : (
                        <span className="cmp-card__badge"><Ico name="building" size={12} />Sem agências</span>
                      )}
                      <span className="cmp-card__arrow"><Ico name="chevR" size={16} /></span>
                    </div>
                  </button>
                ))}
                {companies.length === 0 && (
                  <div style={{ padding: 40, textAlign: 'center', color: 'var(--d-fg-3)', gridColumn: '1 / -1' }}>
                    Nenhuma empresa nesta categoria.
                  </div>
                )}
              </div>
            )}
          </>
        )}
        {view === 'company' && currentCompany && (
          <CompanyView
            company={currentCompany}
            onBack={() => { setView('companies'); setCurrentCompany(null); }}
            onSelectAgency={onSelectAgency}
            userLat={userLat}
            userLng={userLng}
          />
        )}
        {view === 'agency' && currentAgency && (
          <AgencyServicesView
            agency={currentAgency}
            company={currentAgencyCompany}
            onBack={() => { setView(currentCompany ? 'company' : 'home'); setCurrentAgency(null); }}
            onPrintTicket={onPrintTicket}
            signedIn={signedIn}
            isAgencyFav={favorites.isAgencyFav(currentAgency?.Hash || currentAgency?.Token || '')}
            onToggleFav={() => favorites.toggleAgency(currentAgency?.Hash || currentAgency?.Token || '', currentAgency)}
            isServiceFav={favorites.isServiceFav}
            onToggleServiceFav={favorites.toggleService}
            onServiceInfo={(svc) => { setHelpPanel(false); setServiceInfoPanel(svc); }}
            hasActiveTicketForService={hasActiveTicketForService}
          />
        )}
        {view === 'map' && (
          typeof L !== 'undefined' ? (
            <RealMapView
              onBack={() => setView('home')}
              locationGranted={locationGranted}
              userLat={userLat}
              userLng={userLng}
              onSelectAgency={(a) => {
                setCurrentAgency(a);
                setCurrentAgencyCompany({ hash: a.CompanyHash || a.ExternCompany || '' });
                setView('agency');
              }}
            />
          ) : (
            <MapView
              onBack={() => setView('home')}
              locationGranted={locationGranted}
              userLat={userLat}
              userLng={userLng}
            />
          )
        )}
        {view === 'tickets' && (
          <TicketsView
            onBack={() => setView('home')}
            signedIn={signedIn}
            onSelectTicket={(t) => {
              if ([1, 6, 7].includes(t.TicketState || t.State)) {
                setActiveTicket(t);
              }
            }}
            onUploadTicket={() => setShowTicketUpload(true)}
            onEvaluate={(t) => setShowEvaluation(t)}
            onNoShowEval={(t) => setShowNoShowEval(t)}
            refreshKey={ticketsRefreshKey}
          />
        )}
        {view === 'appointments' && (
          <AppointmentsView
            onBack={() => setView('home')}
            signedIn={signedIn}
            onSelectAppointment={(apt) => setAppointmentPanel(apt)}
            selectedId={appointmentPanel?.ID}
            refreshKey={appointmentsRefreshKey}
            onNewBooking={(ctx) => {
              if (ctx && ctx.agency && ctx.service) {
                setShowBeautyBooking({ service: ctx.service, agency: ctx.agency, company: ctx.company });
              } else {
                setView('home');
              }
            }}
          />
        )}
        {view === 'payments' && (
          <PaymentsView
            onBack={() => setView('home')}
            signedIn={signedIn}
            addToast={addToast}
            onSelectService={(svc, cat) => setPaymentPanel({ mode: 'form', service: svc, category: cat })}
            onServiceInfo={(svc, cat) => setPaymentPanel({ mode: 'info', service: svc, category: cat })}
            onShowHistory={() => setPaymentPanel({ mode: 'history' })}
            selectedServiceId={paymentPanel?.service?.ID}
          />
        )}
        {view === 'store' && (
          <StoreView
            onBack={() => setView('home')}
            signedIn={signedIn}
            user={user}
            addToast={addToast}
            onSelectProduct={(p, store) => setStoreProductPanel({ product: p, store })}
            initialView={storeInitialView}
            onInitialViewConsumed={() => setStoreInitialView(null)}
            deepLinkStoreHash={aiNavStore?.companyHash || _deepLinkParams.storeHash}
            deepLinkProductId={aiNavStore?.productId || _deepLinkParams.productId}
            onDeepLinkConsumed={() => setAiNavStore(null)}
          />
        )}
        {view === 'games' && (
          <GamesView onBack={() => setView('home')} signedIn={signedIn} user={user} addToast={addToast} platformFees={platformFees}
            onPanelUpdate={(panel, teams, pid) => { setGamesPanel(panel); if (teams) setGamesMyTeams(teams); if (pid !== undefined) setGamesPlayerId(pid); }}
            onPanelClose={() => setGamesPanel(null)} />
        )}
        {view === 'pharmacy' && (
          <PharmacyView onBack={() => setView('home')} locationGranted={locationGranted} userLat={userLat} userLng={userLng} onSelectPharmacy={(p) => setPharmacyPanel(p)} />
        )}
        {view === 'flights' && (
          <FlightsView onBack={() => setView('home')} onSelectFlight={(fl, t) => { setFlightPanel(fl); setFlightPanelType(t); }} />
        )}
        {view === 'cars' && (
          <CarsView onBack={() => setView('home')} onSelectCar={(car) => { setCarsPanel(car); setRoutePanel(null); }} onSelectRoute={(route) => { setRoutePanel(route); setCarsPanel(null); }} addToast={addToast} onTabChange={(t) => { setCarsPanel(null); setRoutePanel(null); }} signedIn={signedIn} />
        )}
        {view === 'carwash' && (
          <CarWashView onBack={() => setView('home')} onSelectCompany={(c) => setCarwashPanel(c)} addToast={addToast} />
        )}
        {view === 'tracking' && (
          <TrackingView onBack={() => setView('home')} onSelectOrder={(order) => setTrackingPanel(order)} selectedCode={trackingPanel?.code} signedIn={signedIn} companyHash={currentAgencyCompany?.hash || currentCompany?.hash || ''} />
        )}
        {view === 'settings' && (
          <SettingsView onBack={() => setView('home')} theme={theme} onToggleTheme={toggleTheme} />
        )}
        {view === 'profile' && user && (
          <ProfileView
            user={user}
            onEditProfile={() => setShowEditProfile(true)}
            onSignOut={handleSignOut}
            favAgencies={favorites.favAgencyData}
            onSelectFavAgency={(a) => {
              setCurrentAgency({ Hash: a.hash, Name: a.name, Zone: a.zone });
              setCurrentAgencyCompany({ hash: a.companyHash || '' });
              setView('agency');
            }}
            recents={recents}
            onSelectRecent={(r) => {
              if (r.agencyHash) {
                setCurrentAgency({ Hash: r.agencyHash, Name: r.agencyName || r.name });
                setCurrentAgencyCompany({ hash: r.companyHash || '' });
                setView('agency');
              }
            }}
            signedIn={signedIn}
            onUpdateUser={(u) => setUser(u)}
            addToast={addToast}
          />
        )}
        {!['home', 'companies', 'company', 'agency', 'map', 'tickets', 'appointments', 'payments', 'store', 'games', 'pharmacy', 'flights', 'cars', 'carwash', 'tracking', 'settings', 'profile'].includes(view) && (
          <div style={{ padding: 60, textAlign: 'center', color: 'var(--d-fg-3)' }}>
            <h2 style={{ color: 'var(--d-fg-1)', fontWeight: 400 }}>{view}</h2>
            <p>{_t('webapp.section_wip')}</p>
            <button onClick={() => setView('home')} style={{ marginTop: 16, padding: '10px 18px', background: 'var(--nb-green)', color: '#013D32', borderRadius: 8, fontWeight: 600 }}>{_t('webapp.back_home')}</button>
          </div>
        )}
      </main>
      {serviceInfoPanel ? (
        <ServiceInfoPanel
          service={serviceInfoPanel}
          onClose={() => setServiceInfoPanel(null)}
          collapsed={ticketCollapsed}
          onToggle={() => setTicketCollapsed(!ticketCollapsed)}
          signedIn={signedIn}
        />
      ) : helpPanel ? (
        <HelpPanel
          collapsed={ticketCollapsed}
          onToggle={() => setTicketCollapsed(!ticketCollapsed)}
          onClose={() => setHelpPanel(false)}
          currentView={view}
          signedIn={signedIn}
        />
      ) : showNotifPanel ? (
        <NotificationsPanel
          collapsed={ticketCollapsed}
          onToggle={() => setTicketCollapsed(!ticketCollapsed)}
          signedIn={signedIn}
          onClose={() => setShowNotifPanel(false)}
        />
      ) : storeCartPanel ? (
        <StoreCartPanel
          onClose={() => setStoreCartPanel(false)}
          collapsed={ticketCollapsed}
          onToggle={() => setTicketCollapsed(!ticketCollapsed)}
          addToast={addToast}
          onGoToStore={() => { setStoreCartPanel(false); setStoreInitialView('cart'); setView('store'); }}
          signedIn={signedIn}
          user={user}
        />
      ) : signedIn && view === 'profile' ? (
        <ProfilePanel
          user={user}
          onSignOut={handleSignOut}
          onEditProfile={() => setShowEditProfile(true)}
          collapsed={ticketCollapsed}
          onToggle={() => setTicketCollapsed(!ticketCollapsed)}
        />
      ) : view === 'flights' && flightPanel ? (
        <FlightDetailPanel
          flight={flightPanel}
          type={flightPanelType}
          onClose={() => setFlightPanel(null)}
          collapsed={ticketCollapsed}
          onToggle={() => setTicketCollapsed(!ticketCollapsed)}
        />
      ) : view === 'cars' && routePanel ? (
        <RouteDetailPanel
          route={routePanel}
          onClose={() => setRoutePanel(null)}
          collapsed={ticketCollapsed}
          onToggle={() => setTicketCollapsed(!ticketCollapsed)}
          addToast={addToast}
          signedIn={signedIn}
          platformFees={platformFees}
        />
      ) : view === 'cars' && carsPanel ? (
        <CarDetailPanel
          car={carsPanel}
          onClose={() => setCarsPanel(null)}
          collapsed={ticketCollapsed}
          onToggle={() => setTicketCollapsed(!ticketCollapsed)}
        />
      ) : view === 'carwash' && carwashPanel ? (
        <CarWashDetailPanel
          company={carwashPanel}
          onClose={() => setCarwashPanel(null)}
          collapsed={ticketCollapsed}
          onToggle={() => setTicketCollapsed(!ticketCollapsed)}
          addToast={addToast}
          platformFees={platformFees}
        />
      ) : view === 'carwash' && !carwashPanel ? (
        <CarWashInfoPanel
          collapsed={ticketCollapsed}
          onToggle={() => setTicketCollapsed(!ticketCollapsed)}
          userLat={userLat}
          userLng={userLng}
          onSelectCompany={(c) => setCarwashPanel(c)}
        />
      ) : view === 'store' && storeProductPanel ? (
        <StoreProductPanel
          product={storeProductPanel.product}
          store={storeProductPanel.store}
          onClose={() => setStoreProductPanel(null)}
          collapsed={ticketCollapsed}
          onToggle={() => setTicketCollapsed(!ticketCollapsed)}
          addToast={addToast}
          currency={storeProductPanel.store?.settings?.currency || 'CVE'}
          onGoToCart={() => { setStoreProductPanel(null); setStoreCartPanel(true); }}
        />
      ) : view === 'pharmacy' && pharmacyPanel ? (
        <PharmacyDetailPanel
          pharmacy={pharmacyPanel}
          onClose={() => setPharmacyPanel(null)}
          collapsed={ticketCollapsed}
          onToggle={() => setTicketCollapsed(!ticketCollapsed)}
        />
      ) : view === 'appointments' && appointmentPanel ? (
        <AppointmentDetailPanel
          appointment={appointmentPanel}
          onClose={() => setAppointmentPanel(null)}
          collapsed={ticketCollapsed}
          onToggle={() => setTicketCollapsed(!ticketCollapsed)}
          onEvaluate={(t) => setShowEvaluation(t)}
          onNoShowEval={(t) => setShowNoShowEval(t)}
          addToast={addToast}
          openReceiptByTxId={openReceiptByTxId}
          setSharedReceipt={setSharedReceipt}
        />
      ) : (view === 'payments' && paymentPanel && (paymentPanel.mode !== 'history' || signedIn)) || (paymentPanel?.pendingItem) ? (
        <PaymentFormPanel
          panel={paymentPanel}
          onClose={() => setPaymentPanel(null)}
          collapsed={ticketCollapsed}
          onToggle={() => setTicketCollapsed(!ticketCollapsed)}
          addToast={addToast}
          platformFees={platformFees}
          onSwitchToForm={() => setPaymentPanel(prev => prev ? { ...prev, mode: 'form' } : prev)}
        />
      ) : view === 'tracking' && trackingPanel ? (
        <TrackingDetailPanel
          order={trackingPanel}
          onClose={() => setTrackingPanel(null)}
          collapsed={ticketCollapsed}
          onToggle={() => setTicketCollapsed(!ticketCollapsed)}
        />
      ) : view === 'games' && gamesPanel ? (
        <GamesDetailPanel
          panel={gamesPanel}
          onClose={() => setGamesPanel(null)}
          onAction={(evt) => window.dispatchEvent(new CustomEvent('nb-games-panel-action', { detail: evt }))}
          myTeams={gamesMyTeams}
          playerId={gamesPlayerId}
          collapsed={ticketCollapsed}
          onToggle={() => setTicketCollapsed(!ticketCollapsed)}
        />
      ) : authChecking ? (
        <aside className="ticket-panel auth-panel" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: 200 }}>
          <div style={{ textAlign: 'center', color: 'var(--d-fg-3)' }}>
            <div className="skeleton-pulse" style={{ width: 48, height: 48, borderRadius: '50%', margin: '0 auto 12px' }} />
            <div className="skeleton-pulse" style={{ width: 120, height: 14, borderRadius: 7, margin: '0 auto' }} />
          </div>
        </aside>
      ) : signedIn ? (
        <TicketPanel
          ticket={activeTicket}
          onCancel={onCancelTicket}
          collapsed={ticketCollapsed}
          onToggle={() => setTicketCollapsed(!ticketCollapsed)}
          onShare={() => activeTicket && setShowShare(true)}
          addToast={addToast}
          signedIn={signedIn}
        />
      ) : (
        <AuthPanel
          onLogin={handleLogin}
        />
      )}

      {/* Pre-print dialog */}
      {showPrePrint && (
        <PrePrintDialog
          service={showPrePrint.service}
          agency={showPrePrint.agency}
          company={showPrePrint.company}
          onConfirm={doConfirmPrint}
          onCancel={() => setShowPrePrint(null)}
        />
      )}

      {/* Evaluation modal */}
      {showEvaluation && (
        <EvaluationModal
          ticket={showEvaluation}
          onClose={() => {
            const wasApt = showEvaluation.isAppointment;
            setShowEvaluation(null);
            if (wasApt) {
              setAppointmentsRefreshKey(k => k + 1);
              if (appointmentPanel && appointmentPanel.ID === showEvaluation.appointmentId) {
                setAppointmentPanel(prev => ({ ...prev, Rating: showEvaluation._submittedRating || prev.Rating, RatingDate: new Date().toISOString() }));
              }
            }
          }}
          addToast={addToast}
        />
      )}

      {/* No-show evaluation modal */}
      {showNoShowEval && (
        <NoShowEvalModal
          ticket={showNoShowEval}
          onClose={() => {
            const wasApt = showNoShowEval.isAppointment;
            setShowNoShowEval(null);
            if (wasApt) {
              setAppointmentsRefreshKey(k => k + 1);
              if (appointmentPanel && appointmentPanel.ID === showNoShowEval.appointmentId) {
                setAppointmentPanel(prev => ({ ...prev, Rating: showNoShowEval._submittedRating || prev.Rating, RatingDate: new Date().toISOString() }));
              }
            }
          }}
          addToast={addToast}
        />
      )}

      {/* Share/QR modal */}
      {showShare && activeTicket && (
        <ShareModal
          ticket={activeTicket}
          onClose={() => setShowShare(false)}
          addToast={addToast}
        />
      )}

      {/* Edit Profile modal */}
      {showEditProfile && user && (
        <EditProfileModal
          user={user}
          onClose={() => setShowEditProfile(false)}
          onSave={(updated) => {
            setUser({ ...user, ...updated, initials: getInitials(updated.name || user.name) });
            addToast('Perfil atualizado!', 'success');
          }}
        />
      )}

      {/* Ticket Upload modal */}
      {/* Cancel Ticket modal */}
      {showCancelModal && activeTicket && (
        <CancelTicketModal
          ticket={activeTicket}
          onConfirm={doCancel}
          onClose={() => setShowCancelModal(false)}
        />
      )}

      {showLogoutModal && (
        <div className="modal-overlay" onClick={() => setShowLogoutModal(false)}>
          <div className="modal-dialog" onClick={e => e.stopPropagation()} style={{ maxWidth: 360, textAlign: 'center' }}>
            <div className="modal-body" style={{ padding: '32px 24px 16px' }}>
              <Ico name="logout" size={40} style={{ color: 'var(--nb-danger, #ef4444)', marginBottom: 12 }} />
              <h3 style={{ margin: '0 0 8px', fontSize: 18 }}>{_t('webapp.logout_title')}</h3>
              <p style={{ color: 'var(--d-fg-3)', fontSize: 14, margin: 0 }}>{_t('webapp.logout_confirm')}</p>
            </div>
            <div className="modal-footer" style={{ justifyContent: 'center', gap: 12, padding: '12px 24px 24px' }}>
              <button className="modal-btn-secondary" onClick={() => setShowLogoutModal(false)} style={{ minWidth: 100 }}>{_t('webapp.cancel')}</button>
              <button className="modal-btn-primary" onClick={confirmSignOut} style={{ minWidth: 100, background: 'var(--nb-danger, #ef4444)' }}>{_t('webapp.logout')}</button>
            </div>
          </div>
        </div>
      )}

      {showTicketUpload && (
        <TicketUploadModal
          onClose={() => setShowTicketUpload(false)}
          addToast={addToast}
          onSuccess={() => { fetchMyTickets(); setTicketsRefreshKey(k => k + 1); }}
        />
      )}

      {/* Beauty Booking flow */}
      {showBeautyBooking && (
        <BeautyBookingFlow
          agency={showBeautyBooking.agency}
          service={showBeautyBooking.service}
          company={showBeautyBooking.company}
          onClose={() => setShowBeautyBooking(null)}
          onBooked={(ticket) => { setActiveTicket(ticket); fetchMyTickets(); setAppointmentsRefreshKey(k => k + 1); }}
          addToast={addToast}
          signedIn={signedIn}
          platformFee={platformFees?.beauty_prepaid_platform_fee || 0}
        />
      )}

      {/* PWA Install Banner */}
      {showInstallBanner && (
        <div className="nb-prompt-banner">
          <Ico name="sparkle" size={18} />
          <div className="nb-prompt-text">
            <strong>{_t('webapp.pwa_install')}</strong>
            <span>{_t('webapp.pwa_install_desc')}</span>
          </div>
          <button className="nb-prompt-btn" onClick={installPWA}>Instalar</button>
          <button className="nb-prompt-dismiss" onClick={dismissInstall}>&times;</button>
        </div>
      )}

      {/* Push Notification Prompt */}
      {showPushPrompt && (
        <div className="nb-prompt-banner">
          <Ico name="bell" size={18} />
          <div className="nb-prompt-text">
            <strong>Ativar notificações</strong>
            <span>{_t('webapp.notif_enable_desc')}</span>
          </div>
          <button className="nb-prompt-btn" onClick={enablePush}>Ativar</button>
          <button className="nb-prompt-dismiss" onClick={dismissPush}>&times;</button>
        </div>
      )}

      {/* Location Preferences Modal */}
      {showLocationPrefs && (
        <div className="modal-overlay" onClick={() => setShowLocationPrefs(false)}>
          <div className="modal-dialog" onClick={e => e.stopPropagation()} style={{ maxWidth: 400 }}>
            <div className="modal-header">
              <h3>{_t('webapp.location_prefs')}</h3>
              <button className="modal-close" onClick={() => setShowLocationPrefs(false)}>&times;</button>
            </div>
            <div className="modal-body">
              {/* Current location status */}
              <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '12px 16px', borderRadius: 'var(--nb-r-md)', background: locationGranted ? 'rgba(2,165,134,0.08)' : 'rgba(220,38,38,0.08)', marginBottom: 16 }}>
                <Ico name={locationGranted ? 'pin' : 'pinOff'} size={18} />
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--d-fg-1)' }}>{locationGranted ? 'Localização ativa' : 'Localização desativada'}</div>
                  <div style={{ fontSize: 12, color: 'var(--d-fg-3)' }}>{locationGranted ? (locationName || 'Coordenadas obtidas') : 'Permite o acesso para ordenar por proximidade'}</div>
                </div>
              </div>

              {/* Refresh / Request location button */}
              <button className="modal-btn-secondary" style={{ width: '100%', marginBottom: 16, justifyContent: 'center' }}
                onClick={() => { requestLocation(); }}>
                <Ico name="pin" size={14} /> {locationGranted ? 'Atualizar localização' : 'Ativar localização'}
              </button>

              {/* Coordinates display */}
              {locationGranted && userLat && (
                <div style={{ fontSize: 12, color: 'var(--d-fg-muted)', textAlign: 'center', marginBottom: 16 }}>
                  {userLat.toFixed(5)}, {userLng.toFixed(5)}
                </div>
              )}

              {/* Nearest first toggle */}
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '12px 0', borderTop: '1px solid var(--d-border)' }}>
                <div>
                  <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--d-fg-1)' }}>Mais perto primeiro</div>
                  <div style={{ fontSize: 12, color: 'var(--d-fg-3)' }}>Ordenar agências e farmácias por proximidade</div>
                </div>
                <div className={`stg-toggle ${nearestFirst ? 'stg-toggle--on' : ''}`}
                  onClick={() => setNearestFirst(!nearestFirst)} style={{ cursor: 'pointer' }}>
                  <div className="stg-toggle-thumb" />
                </div>
              </div>
            </div>
            <div className="modal-footer">
              <button className="modal-btn-primary" onClick={() => setShowLocationPrefs(false)}>{_t('webapp.routes_close')}</button>
            </div>
          </div>
        </div>
      )}

      {/* Onboarding tour */}
      {showOnboarding && (
        <OnboardingTour onClose={() => setShowOnboarding(false)} />
      )}

      {/* Order tracking status updates modal */}
      {orderUpdatesModal && orderUpdatesModal.length > 0 && (
        <OrderUpdatesModal
          updates={orderUpdatesModal}
          onClose={() => {
            // Acknowledge all updates so they don't show again
            const ids = orderUpdatesModal.map(o => o.id);
            API.post('/client/orders/acknowledge', { order_ids: ids }).catch(() => {});
            setOrderUpdatesModal(null);
          }}
          onViewOrder={(order) => {
            // Acknowledge and navigate to tracking
            const ids = orderUpdatesModal.map(o => o.id);
            API.post('/client/orders/acknowledge', { order_ids: ids }).catch(() => {});
            setOrderUpdatesModal(null);
            setView('tracking');
            // Open detail panel for this order
            lookup_order_for_panel(order.code);
          }}
        />
      )}

      {/* Shared Payment Receipt Modal */}
      {sharedReceipt && (() => {
        const r = sharedReceipt;
        const svcLabels = { phone_topup: 'Carregamento', electricity: 'Electricidade', water: 'Água', insurance: 'Seguro', internet: 'Internet', purchase: 'Compra', other: 'Pagamento', games_booking: 'Reserva Campo', games_tournament: 'Torneio', games_subscription: 'Subscrição', car_route_booking: 'Transporte', wash_booking: 'Car Wash', beauty_prepaid: 'Agendamento' };
        const svcName = r.ServiceName || svcLabels[r.ServiceType] || r.ServiceType;
        const amount = parseInt(r.Amount).toLocaleString('pt') + ' CVE';
        const hasBreakdown = r.service_price != null && r.platform_fee != null && r.platform_fee > 0;
        const date = r.created_at ? new Date(r.created_at).toLocaleDateString('pt', { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit' }) : '—';
        return (
          <div className="modal-overlay" onClick={() => setSharedReceipt(null)} style={{ zIndex: 100000 }}>
            <div className="modal-dialog" onClick={e => e.stopPropagation()} style={{ maxWidth: 400, textAlign: 'center' }}>
              <div style={{ background: '#02A586', padding: '20px 24px', borderRadius: '12px 12px 0 0' }}>
                <div style={{ fontSize: 12, opacity: 0.8, color: '#fff' }}>NhaBex Pay</div>
                <div style={{ color: '#fff', fontSize: 18, fontWeight: 700, marginTop: 4 }}>Recibo de Pagamento</div>
              </div>
              <div style={{ padding: '20px 24px' }}>
                {r.ClientName && <div style={{ fontSize: '0.8125rem', color: 'var(--d-fg-3)', marginBottom: 12 }}>{r.ClientName}</div>}
                <div style={{ background: 'var(--d-bg-2)', borderRadius: 8, padding: '12px 14px', fontSize: '0.8125rem', textAlign: 'left', marginBottom: 16 }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', padding: '4px 0' }}><span style={{ color: 'var(--d-fg-3)' }}>Serviço</span><span style={{ fontWeight: 600 }}>{svcName}</span></div>
                  {r.ProviderName ? <div style={{ display: 'flex', justifyContent: 'space-between', padding: '4px 0' }}><span style={{ color: 'var(--d-fg-3)' }}>Empresa</span><span style={{ fontWeight: 600 }}>{r.ProviderName}</span></div> : null}
                  {r.EntityCode ? <div style={{ display: 'flex', justifyContent: 'space-between', padding: '4px 0' }}><span style={{ color: 'var(--d-fg-3)' }}>Entidade</span><span style={{ fontWeight: 600 }}>{r.ServiceName ? r.ServiceName + ' (' + r.EntityCode + ')' : r.EntityCode}</span></div> : null}
                  {r.ReferenceNumber ? <div style={{ display: 'flex', justifyContent: 'space-between', padding: '4px 0' }}><span style={{ color: 'var(--d-fg-3)' }}>Referência</span><span style={{ fontWeight: 600 }}>{r.ReferenceNumber}</span></div> : null}
                  <div style={{ display: 'flex', justifyContent: 'space-between', padding: '4px 0' }}><span style={{ color: 'var(--d-fg-3)' }}>Data</span><span>{date}</span></div>
                  <div style={{ display: 'flex', justifyContent: 'space-between', padding: '4px 0' }}><span style={{ color: 'var(--d-fg-3)' }}>Transacção</span><span style={{ fontFamily: 'monospace', fontSize: 11 }}>{r.TransactionId}</span></div>
                  <div style={{ borderTop: '2px solid var(--d-bg-3)', margin: '8px 0' }}></div>
                  {hasBreakdown ? (
                    <>
                      <div style={{ display: 'flex', justifyContent: 'space-between', padding: '4px 0' }}><span style={{ color: 'var(--d-fg-3)' }}>{_t('webapp.receipt_service_price') || 'Serviço'}</span><span>{parseInt(r.service_price).toLocaleString('pt')} CVE</span></div>
                      <div style={{ display: 'flex', justifyContent: 'space-between', padding: '4px 0' }}><span style={{ color: 'var(--d-fg-3)' }}>{_t('webapp.receipt_platform_fee') || 'Taxa de plataforma'}</span><span>{parseInt(r.platform_fee).toLocaleString('pt')} CVE</span></div>
                      <div style={{ borderTop: '1px solid var(--d-bg-3)', margin: '6px 0' }}></div>
                    </>
                  ) : null}
                  <div style={{ display: 'flex', justifyContent: 'space-between', padding: '4px 0', fontSize: '1rem' }}><span style={{ fontWeight: 700 }}>Total</span><span style={{ fontWeight: 700, color: '#02A586' }}>{amount}</span></div>
                </div>
                <div style={{ display: 'flex', gap: 8 }}>
                  <button className="pay-btn-outline" style={{ flex: 1 }} onClick={() => setSharedReceipt(null)}>{_t('webapp.routes_close')}</button>
                </div>
              </div>
            </div>
          </div>
        );
      })()}

      {/* SISP Payment Return Modal — Games Subscription */}
      {sispReturnModal && sispReturnModal.type === 'games_subscription_success' && (() => {
        const activeSub = mySubscriptions.find(s => s.Status === 'active');
        return (
          <div className="modal-overlay" onClick={() => setSispReturnModal(null)} style={{ zIndex: 100000 }}>
            <div className="modal-dialog" onClick={e => e.stopPropagation()} style={{ maxWidth: 440, textAlign: 'center' }}>
              <div style={{ padding: '32px 24px 24px' }}>
                <div style={{ width: 64, height: 64, borderRadius: '50%', background: 'rgba(2,165,134,0.12)', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 16px' }}>
                  <Ico name="check" size={32} />
                </div>
                <h3 style={{ margin: '0 0 8px', fontSize: '1.25rem', fontWeight: 700 }}>Plano Activado!</h3>
                <p style={{ color: 'var(--d-fg-3)', fontSize: '0.875rem', margin: '0 0 20px' }}>O teu plano foi activado com sucesso. Já podes começar a usar os teus créditos.</p>

                {activeSub && (
                  <div style={{ background: 'var(--d-bg-2, #f9fafb)', borderRadius: 12, padding: 16, textAlign: 'left', marginBottom: 20 }}>
                    <div style={{ fontWeight: 700, fontSize: '1rem', marginBottom: 4 }}>{activeSub.plan_name}</div>
                    <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px 16px', fontSize: '0.8125rem', color: 'var(--d-fg-3)' }}>
                      <span><strong style={{ color: '#02A586' }}>{activeSub.credits_remaining || activeSub.BookingsIncluded}</strong> reservas disponíveis</span>
                      {activeSub.discount_percent > 0 && <span>{activeSub.discount_percent}% {_t('webapp.extra_discount')}</span>}
                      {activeSub.priority_booking ? <span>{_t('webapp.priority_booking')}</span> : null}
                      <span>{_t('webapp.sub_valid_until')} {activeSub.EndDate || activeSub.NextBillingDate}</span>
                    </div>
                    {sispReturnModal.ref && <div style={{ fontSize: '0.6875rem', color: 'var(--d-fg-3)', marginTop: 8 }}>Ref: {sispReturnModal.ref}</div>}
                  </div>
                )}

                <div style={{ display: 'flex', gap: 8 }}>
                  <button className="pay-btn-outline" style={{ flex: 1 }} onClick={() => setSispReturnModal(null)}>{_t('webapp.routes_close')}</button>
                  <button className="pay-btn-primary" style={{ flex: 2, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6 }}
                          onClick={() => { setSispReturnModal(null); setView('games'); }}>
                    <Ico name="field" size={14} /> Reservar Campo
                  </button>
                </div>
              </div>
            </div>
          </div>
        );
      })()}

      {sispReturnModal && sispReturnModal.type === 'games_subscription_canceled' && (
        <div className="modal-overlay" onClick={() => setSispReturnModal(null)} style={{ zIndex: 100000 }}>
          <div className="modal-dialog" onClick={e => e.stopPropagation()} style={{ maxWidth: 380, textAlign: 'center' }}>
            <div style={{ padding: '32px 24px 24px' }}>
              <div style={{ width: 64, height: 64, borderRadius: '50%', background: 'rgba(245,158,11,0.12)', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 16px' }}>
                <Ico name="alert" size={32} />
              </div>
              <h3 style={{ margin: '0 0 8px', fontSize: '1.125rem', fontWeight: 700 }}>Pagamento Cancelado</h3>
              <p style={{ color: 'var(--d-fg-3)', fontSize: '0.875rem', margin: '0 0 20px' }}>O pagamento foi cancelado. Podes tentar novamente a qualquer momento.</p>
              <button className="pay-btn-primary" style={{ width: '100%' }} onClick={() => setSispReturnModal(null)}>OK</button>
            </div>
          </div>
        </div>
      )}

      {sispReturnModal && sispReturnModal.type === 'games_subscription_error' && (
        <div className="modal-overlay" onClick={() => setSispReturnModal(null)} style={{ zIndex: 100000 }}>
          <div className="modal-dialog" onClick={e => e.stopPropagation()} style={{ maxWidth: 380, textAlign: 'center' }}>
            <div style={{ padding: '32px 24px 24px' }}>
              <div style={{ width: 64, height: 64, borderRadius: '50%', background: 'rgba(239,68,68,0.12)', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 16px' }}>
                <Ico name="cross" size={32} />
              </div>
              <h3 style={{ margin: '0 0 8px', fontSize: '1.125rem', fontWeight: 700 }}>Erro no Pagamento</h3>
              <p style={{ color: 'var(--d-fg-3)', fontSize: '0.875rem', margin: '0 0 20px' }}>Houve um problema ao processar o pagamento. Tenta novamente ou contacta o suporte.</p>
              <button className="pay-btn-primary" style={{ width: '100%' }} onClick={() => setSispReturnModal(null)}>OK</button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

// ─── Root with Toast Provider ───────────────────────────────
function AppWithProviders() {
  return (
    <ToastProvider>
      <ToastBridge />
      <App />
    </ToastProvider>
  );
}

// Bridge to get addToast into App via ref
function ToastBridge() {
  const { addToast } = React.useContext(ToastContext);
  useEffect(() => {
    // Make addToast globally accessible for App component
    window.__nbAddToast = addToast;
  }, [addToast]);
  return null;
}

ReactDOM.createRoot(document.getElementById('root')).render(<AppWithProviders />);