// src/chrome.jsx — minimal browser window chrome that wraps the Piixi app.
// Listens to hash changes to keep the URL bar live.

function useLocationHash() {
  const [hash, setHash] = useState(window.location.hash || '#/inicio');
  useEffect(() => {
    const fn = () => setHash(window.location.hash || '#/inicio');
    window.addEventListener('hashchange', fn);
    return () => window.removeEventListener('hashchange', fn);
  }, []);
  return hash;
}

const SCREEN_TITLE = {
  '/inicio':       'Inicio',
  '/eventos':      'Eventos',
  '/importar/revision': 'Revisión de importación',
  '/importar':     'Importar pólizas',
  '/pendientes':   'Pendientes',
  '/operaciones':  'Operaciones',
  '/polizas':      'Pólizas',
  '/clientes':     'Clientes',
  '/contactos':    'Contactos',
  '/cumplimiento': 'Cumplimiento',
  '/catalogo':     'Catálogo de reglas',
  '/ajustes':      'Ajustes',
  '/ajustes/doctor': 'Diagnóstico',
  '/signin':       'Entrar',
  '/onboarding':   'Configuración inicial',
};

function ChromeShell({ children }) {
  const hash = useLocationHash();
  const path = hash.replace(/^#/, '').split('?')[0];
  // Match best title
  let title = 'Piixi';
  for (const k of Object.keys(SCREEN_TITLE).sort((a, b) => b.length - a.length)) {
    if (path === k || path.startsWith(k + '/')) { title = SCREEN_TITLE[k]; break; }
  }

  const url = 'localhost:7878' + path;

  return (
    <div style={{
      position: 'fixed', inset: 0,
      background: '#050505',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      overflow: 'hidden',
      backgroundImage: 'radial-gradient(circle at 20% -10%, rgba(0,255,136,0.04), transparent 40%), radial-gradient(circle at 80% 110%, rgba(0,255,136,0.025), transparent 40%)',
    }}>
      <div style={{
        width: 'min(1480px, calc(100vw - 32px))',
        height: 'min(960px, calc(100vh - 32px))',
        background: '#202124',
        borderRadius: 10,
        boxShadow: '0 30px 100px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.04)',
        display: 'flex', flexDirection: 'column',
        overflow: 'hidden',
      }}>
        {/* Tab bar */}
        <div style={{
          display: 'flex', alignItems: 'center', height: 38,
          background: '#202124', paddingRight: 8, flexShrink: 0,
        }}>
          {/* Traffic lights */}
          <div style={{ display: 'flex', gap: 8, padding: '0 14px' }}>
            <div style={{ width: 12, height: 12, borderRadius: '50%', background: '#ff5f57' }}/>
            <div style={{ width: 12, height: 12, borderRadius: '50%', background: '#febc2e' }}/>
            <div style={{ width: 12, height: 12, borderRadius: '50%', background: '#28c840' }}/>
          </div>
          {/* Tabs */}
          <div style={{ display: 'flex', alignItems: 'flex-end', height: '100%', paddingLeft: 4, flex: 1 }}>
            <ChromeTabActive title={title + ' · Piixi'}/>
            <ChromeTabPassive title="MAPFRE Agentes"/>
            <ChromeTabPassive title="GNP Asociados"/>
          </div>
          <button style={{
            width: 28, height: 28, marginLeft: 6,
            background: 'transparent', border: 0, color: '#9aa0a6',
            borderRadius: 14, fontSize: 18, lineHeight: 1, cursor: 'default',
          }}>+</button>
        </div>
        {/* Toolbar */}
        <div style={{
          height: 44, background: '#35363a', flexShrink: 0,
          display: 'flex', alignItems: 'center', gap: 4, padding: '0 8px',
          borderBottom: '1px solid rgba(0,0,0,0.3)',
        }}>
          <ToolbarBtn>←</ToolbarBtn>
          <ToolbarBtn>→</ToolbarBtn>
          <ToolbarBtn>⟳</ToolbarBtn>
          <div style={{
            flex: 1, height: 30, borderRadius: 15,
            background: '#282a2d',
            display: 'flex', alignItems: 'center', gap: 8, padding: '0 14px', margin: '0 6px',
            color: '#e8eaed', fontSize: 13, fontFamily: 'system-ui, sans-serif',
          }}>
            <span style={{ color: '#9aa0a6', fontSize: 12 }}>🔒</span>
            <span style={{ flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{url}</span>
          </div>
          <ToolbarBtn>⋮</ToolbarBtn>
        </div>
        {/* Content */}
        <div style={{ flex: 1, background: 'var(--ax-bg)', overflow: 'hidden', position: 'relative' }}>
          {children}
        </div>
      </div>
    </div>
  );
}

function ChromeTabActive({ title }) {
  return (
    <div style={{
      position: 'relative', height: 30, alignSelf: 'flex-end',
      padding: '0 14px', display: 'flex', alignItems: 'center', gap: 8,
      background: '#35363a', borderRadius: '8px 8px 0 0', minWidth: 180, maxWidth: 260,
      fontFamily: 'system-ui, sans-serif', fontSize: 12, color: '#e8eaed',
    }}>
      {/* curves */}
      <svg width="8" height="10" viewBox="0 0 8 10" style={{ position: 'absolute', bottom: 0, left: -8 }}>
        <path d="M0 10C2 9 6 8 8 0V10H0Z" fill="#35363a"/>
      </svg>
      <svg width="8" height="10" viewBox="0 0 8 10" style={{ position: 'absolute', bottom: 0, right: -8, transform: 'scaleX(-1)' }}>
        <path d="M0 10C2 9 6 8 8 0V10H0Z" fill="#35363a"/>
      </svg>
      <span style={{
        width: 14, height: 14, borderRadius: 3, flexShrink: 0,
        background: '#0A0A0A', border: '1px solid #1f1f1f',
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      }}>
        <span style={{ width: 5, height: 5, borderRadius: '50%', background: '#00FF88' }}/>
      </span>
      <span style={{ flex: 1, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{title}</span>
    </div>
  );
}
function ChromeTabPassive({ title }) {
  return (
    <div style={{
      position: 'relative', height: 30, alignSelf: 'flex-end',
      padding: '0 14px', display: 'flex', alignItems: 'center', gap: 8,
      borderRadius: '8px 8px 0 0', minWidth: 130, maxWidth: 200,
      fontFamily: 'system-ui, sans-serif', fontSize: 12, color: '#9aa0a6',
    }}>
      <span style={{ width: 14, height: 14, borderRadius: '50%', background: '#5f6368', flexShrink: 0 }}/>
      <span style={{ flex: 1, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{title}</span>
    </div>
  );
}
function ToolbarBtn({ children }) {
  return (
    <button style={{
      appearance: 'none', background: 'transparent', border: 0,
      width: 28, height: 28, borderRadius: 14, color: '#9aa0a6',
      fontSize: 14, cursor: 'default',
    }}>{children}</button>
  );
}

window.ChromeShell = ChromeShell;