// shell.jsx — Sidebar, Topbar, Tweaks, Modal

const { useState, useEffect, useRef } = React;

const NAV_USER = [
  { group: 'Operação', items: [
    { id: 'dashboard', label: 'Dashboard', icon: 'lucide:layout-dashboard' },
    { id: 'sync', label: 'Sincronizações', icon: 'lucide:refresh-cw' },
    { id: 'logs', label: 'Logs de execução', icon: 'lucide:scroll-text' },
  ]},
  { group: 'Conta', items: [
    { id: 'billing', label: 'Plano & cobrança', icon: 'lucide:credit-card' },
    { id: 'settings', label: 'Conexões', icon: 'lucide:plug' },
  ]},
];

const NAV_ADMIN = [
  { group: 'Plataforma', items: [
    { id: 'admin', label: 'Visão geral', icon: 'lucide:radar' },
    { id: 'admin-tenants', label: 'Tenants', icon: 'lucide:building-2' },
    { id: 'logs', label: 'Logs globais', icon: 'lucide:scroll-text' },
    { id: 'admin-plans', label: 'Planos', icon: 'lucide:layers' },
  ]},
  { group: 'Sistema', items: [
    { id: 'settings', label: 'Configurações', icon: 'lucide:settings-2' },
  ]},
];

function Sidebar({ route, setRoute, role, tenant }) {
  const nav = role === 'super_admin' ? NAV_ADMIN : NAV_USER;
  const status = tenant?.status ?? 'pending';
  const lastLog = null; // pode buscar via polling se quiser

  return (
    <aside className="sidebar">
      <div className="brand">
        <div className="brand-mark">S</div>
        <div>
          <div className="brand-name">SyncBridge</div>
          <div className="brand-sub">{role === 'super_admin' ? 'Console Admin' : 'Loja conectada'}</div>
        </div>
      </div>
      {nav.map(g => (
        <div className="nav-group" key={g.group}>
          <div className="nav-group-label">{g.group}</div>
          {g.items.map(it => (
            <a key={it.id}
               className={'nav-item' + (route === it.id ? ' active' : '')}
               onClick={() => setRoute(it.id)}>
              <iconify-icon icon={it.icon} />
              <span>{it.label}</span>
              {it.count && <span className="badge-count">{it.count}</span>}
            </a>
          ))}
        </div>
      ))}
      {role !== 'super_admin' && (
        <div className="sidebar-foot">
          <div style={{ background:'var(--bg-elevated)', border:'1px solid var(--border)', borderRadius:'var(--r-md)', padding:'10px 12px', fontSize:12 }}>
            <div className="row gap-sm" style={{ marginBottom:6 }}>
              <span style={{
                width:7, height:7, borderRadius:'50%',
                background: status === 'active' ? 'var(--ok)' : 'var(--warn)',
                boxShadow: status === 'active' ? '0 0 8px var(--ok)' : 'none',
              }} />
              <span style={{ fontWeight:700, color:'var(--text-primary)' }}>
                {status === 'active' ? 'Integração ativa' : 'Integração pendente'}
              </span>
            </div>
            {tenant?.store_name && (
              <div className="muted" style={{ fontSize:11, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>
                {tenant.store_name}
              </div>
            )}
          </div>
        </div>
      )}
    </aside>
  );
}

function TopNav({ route, setRoute, role }) {
  const nav = (role === 'super_admin' ? NAV_ADMIN : NAV_USER).flatMap(g => g.items);
  return (
    <div className="topbar-nav-mode">
      <div className="brand" style={{ borderBottom:'none' }}>
        <div className="brand-mark">S</div>
        <div className="brand-name">SyncBridge</div>
      </div>
      <div style={{ width:1, height:24, background:'var(--border)', margin:'0 8px' }} />
      {nav.map(it => (
        <a key={it.id}
           className={'nav-item' + (route === it.id ? ' active' : '')}
           onClick={() => setRoute(it.id)}>
          <iconify-icon icon={it.icon} />
          <span>{it.label}</span>
        </a>
      ))}
    </div>
  );
}

function Topbar({ crumbs, role, profile, onTweaks, onLogout }) {
  const [menuOpen, setMenuOpen] = useState(false);
  const initials = profile?.full_name
    ? profile.full_name.split(' ').map(n => n[0]).join('').slice(0,2).toUpperCase()
    : role === 'super_admin' ? 'SA' : '?';

  return (
    <div className="topbar">
      <div className="crumbs">
        {crumbs.map((c, i) => (
          <React.Fragment key={i}>
            {i > 0 && <span className="sep">/</span>}
            <span className={i === crumbs.length - 1 ? 'here' : ''}>{c}</span>
          </React.Fragment>
        ))}
      </div>
      <div className="topbar-spacer" />
      <button className="iconbtn" onClick={onTweaks} title="Tweaks (T)">
        <iconify-icon icon="lucide:sliders-horizontal" />
      </button>
      {/* Avatar + menu */}
      <div style={{ position:'relative' }}>
        <div className="avatar" style={{ cursor:'pointer' }} onClick={() => setMenuOpen(o => !o)}>
          {initials}
        </div>
        {menuOpen && (
          <>
            <div style={{ position:'fixed', inset:0, zIndex:50 }} onClick={() => setMenuOpen(false)} />
            <div style={{
              position:'absolute', top:'calc(100% + 8px)', right:0, zIndex:51,
              background:'var(--bg-elevated)', border:'1px solid var(--border-strong)',
              borderRadius:'var(--r-md)', padding:4, minWidth:180, boxShadow:'var(--shadow-md)',
            }}>
              {profile && (
                <div style={{ padding:'10px 12px', borderBottom:'1px solid var(--border-subtle)', marginBottom:4 }}>
                  <div style={{ fontWeight:700, fontSize:13 }}>{profile.full_name || 'Usuário'}</div>
                  <div className="muted" style={{ fontSize:11 }}>{role === 'super_admin' ? 'Super Admin' : 'Lojista'}</div>
                </div>
              )}
              <button style={{ display:'flex', alignItems:'center', gap:8, width:'100%', padding:'8px 12px', borderRadius:6, fontSize:12, fontWeight:600, color:'var(--err)' }}
                onClick={() => { setMenuOpen(false); onLogout(); }}>
                <iconify-icon icon="lucide:log-out" />Sair
              </button>
            </div>
          </>
        )}
      </div>
    </div>
  );
}

function TweaksPanel({ open, setOpen, prefs, setPrefs }) {
  return (
    <div className="tweaks" data-open={open}>
      <div className="tweaks-head">
        <span>Tweaks</span>
        <button className="iconbtn" style={{ width:24, height:24 }} onClick={() => setOpen(false)}>
          <iconify-icon icon="lucide:x" />
        </button>
      </div>
      <Tweak label="Tema" value={prefs.theme} options={[['dark','Escuro'],['light','Claro']]}
        on={v => setPrefs({ ...prefs, theme: v })} />
      <Tweak label="Densidade" value={prefs.density} options={[['comfortable','Arejado'],['compact','Compacto']]}
        on={v => setPrefs({ ...prefs, density: v })} />
      <Tweak label="Navegação" value={prefs.nav} options={[['side','Lateral'],['top','Topo']]}
        on={v => setPrefs({ ...prefs, nav: v })} />
      <Tweak label="Layout do dashboard" value={prefs.dashLayout} options={[['cards','Cards'],['hybrid','Híbrido'],['table','Tabela']]}
        on={v => setPrefs({ ...prefs, dashLayout: v })} />
      <Tweak label="Logs" value={prefs.logsView} options={[['table','Tabela'],['timeline','Timeline']]}
        on={v => setPrefs({ ...prefs, logsView: v })} />
    </div>
  );
}

function Tweak({ label, value, options, on }) {
  return (
    <div className="tweaks-row">
      <div className="tweaks-label">{label}</div>
      <div className="tweaks-options">
        {options.map(([v, l]) => (
          <button key={v} className={value === v ? 'on' : ''} onClick={() => on(v)}>{l}</button>
        ))}
      </div>
    </div>
  );
}

function Modal({ open, onClose, children, title, footer, maxWidth = 720 }) {
  useEffect(() => {
    const h = e => { if (e.key === 'Escape') onClose(); };
    if (open) window.addEventListener('keydown', h);
    return () => window.removeEventListener('keydown', h);
  }, [open]);
  return (
    <div className="modal-back" data-open={open} onClick={onClose}>
      <div className="modal" style={{ maxWidth }} onClick={e => e.stopPropagation()}>
        <div className="modal-head">
          <div style={{ fontWeight:700, fontSize:15 }}>{title}</div>
          <button className="iconbtn" onClick={onClose}><iconify-icon icon="lucide:x" /></button>
        </div>
        <div className="modal-body">{children}</div>
        {footer && <div className="modal-foot">{footer}</div>}
      </div>
    </div>
  );
}

Object.assign(window, { Sidebar, TopNav, Topbar, TweaksPanel, Modal, NAV_USER, NAV_ADMIN });