/* App Shell — Desktop Sidebar + Topbar */
const D4 = window.AppData;

const NAV = [
  { id: 'dashboard', label: 'Dashboard', icon: 'home' },
  { id: 'schedule', label: 'Agenda', icon: 'cal' },
  { id: 'crm', label: 'Clientes', icon: 'users' },
  { id: 'whatsapp', label: 'WhatsApp', icon: 'whats', badge: 8 },
  { id: 'financial', label: 'Financeiro', icon: 'money' },
  { id: 'analytics', label: 'Analytics', icon: 'chart' },
  { id: 'odonto', label: 'Clínico', icon: 'tooth' },
  { id: 'settings', label: 'Configurações', icon: 'settings' },
];

const Sidebar = ({ active, onNav, onLogout }) => {
  const [collapsed, setCollapsed] = React.useState(false);
  return (
    <aside className={`sidebar ${collapsed ? 'is-collapsed' : ''}`}>
      <div className="sidebar-brand">
        <div style={{ width: 36, height: 36, borderRadius: 10, background: 'linear-gradient(135deg, #0EA5E9, #2563EB)', color: 'white', display: 'grid', placeItems: 'center', fontWeight: 800, fontSize: 16, flexShrink: 0 }}>K</div>
        {!collapsed && <div><div style={{ fontWeight: 700, letterSpacing: '-0.01em' }}>Kairos</div><div className="muted" style={{ fontSize: 11 }}>Odonto Sorriso</div></div>}
      </div>
      <div className="sidebar-section">
        {!collapsed && <div className="sidebar-section-label">PRINCIPAL</div>}
        {NAV.map(item => (
          <button key={item.id} className={`sidebar-item ${active===item.id?'is-active':''}`} onClick={() => onNav(item.id)}>
            <Icon name={item.icon} />
            {!collapsed && <span className="sidebar-item-label">{item.label}</span>}
            {!collapsed && item.badge && <span className="sidebar-item-badge">{item.badge}</span>}
          </button>
        ))}
      </div>
      <div className="sidebar-foot">
        <div className="sidebar-user">
          <Avatar initials="AP" color="#0EA5E9" size={36} />
          {!collapsed && (<>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 13, fontWeight: 600, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>Dra. Ana Paula</div>
              <div className="muted" style={{ fontSize: 11 }}>Proprietária</div>
            </div>
            <IconBtn name="logout" title="Sair" onClick={onLogout} />
          </>)}
        </div>
      </div>
    </aside>
  );
};

const Topbar = ({ title, onCommand }) => (
  <div className="topbar">
    <div className="search-wrap">
      <Icon name="search" size={16} />
      <input className="search-input" placeholder="Buscar clientes, serviços, agendamentos..." />
      <kbd>⌘K</kbd>
    </div>
    <div className="topbar-actions">
      <Btn kind="ghost" size="sm" icon="globe" onClick={()=>window.open('landings/odontologia.html','_blank')}>Ver landing</Btn>
      <Btn kind="ghost" size="sm" icon="help">Ajuda</Btn>
      <IconBtn name="bell" title="Notificações" />
      <Btn icon="plus" size="sm">Novo agendamento</Btn>
    </div>
  </div>
);

const SuperAdminBanner = ({ onExit }) => (
  <div style={{ background: 'linear-gradient(90deg, #7C3AED, #5B21B6)', color: 'white', padding: '10px 24px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', fontSize: 13 }}>
    <div className="hstack-tight"><Icon name="shield" size={14} /><strong>Modo Superadmin</strong> — visualizando como Odonto Sorriso</div>
    <Btn kind="ghost" size="sm" style={{ color: 'white' }} onClick={onExit}>Sair do modo</Btn>
  </div>
);

const SuperAdminScreen = () => (
  <div className="page">
    <div className="page-head"><div><h1 className="page-title">Superadmin · Visão da plataforma</h1><p className="page-sub">Métricas operacionais do Kairos · Todos os tenants</p></div></div>
    <div className="kpi-grid" style={{ marginBottom: 24 }}>
      <StatTile label="Tenants ativos" value="1.284" icon="home" delta={12} accent="#7C3AED" />
      <StatTile label="MRR" value="R$ 412k" icon="money" delta={18} accent="#10B981" />
      <StatTile label="Atendimentos / mês" value="284k" icon="cal" delta={22} accent="#0EA5E9" />
      <StatTile label="Churn (90d)" value="2,8%" icon="alert" delta={-0.4} accent="#EF4444" />
    </div>
    <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 24 }}>
      <Card padding="0">
        <div className="card-head"><h4>Tenants recentes</h4><Btn kind="ghost" size="sm">Ver todos</Btn></div>
        <table className="tbl">
          <thead><tr><th>Estabelecimento</th><th>Categoria</th><th>Plano</th><th>MRR</th><th>Saúde</th><th></th></tr></thead>
          <tbody>
            {[['Odonto Sorriso','Odontologia','Pro','R$ 297',{l:'Excelente',c:'#10B981'}],
              ['Barbearia do Tio','Barbearia','Starter','R$ 97',{l:'Boa',c:'#10B981'}],
              ['Espaço Renove','Estética','Pro','R$ 297',{l:'Atenção',c:'#F59E0B'}],
              ['Vida em Movimento','Fisioterapia','Pro+','R$ 497',{l:'Excelente',c:'#10B981'}],
              ['Centro Mente Sã','Psicologia','Starter','R$ 97',{l:'Em risco',c:'#EF4444'}]].map(([n,c,p,m,s],i)=>(
              <tr key={i}><td><strong>{n}</strong></td><td>{c}</td><td>{p}</td><td className="tabular">{m}</td><td><Badge color={s.c}>{s.l}</Badge></td><td><Btn kind="ghost" size="sm">Acessar como</Btn></td></tr>
            ))}
          </tbody>
        </table>
      </Card>
      <Card>
        <h4 style={{margin:'0 0 12px'}}>Saúde do sistema</h4>
        <div className="vstack-tight">
          {[['API','99.98%','#10B981'],['WhatsApp gateway','99.7%','#10B981'],['Webhooks','100%','#10B981'],['Email (SES)','99.4%','#F59E0B'],['Background workers','99.99%','#10B981']].map(([n,v,c]) => (
            <div key={n} className="hstack" style={{padding:8,background:'var(--text-bg)',borderRadius:6,fontSize:13}}>
              <span style={{width:8,height:8,borderRadius:'50%',background:c}}></span>
              <span style={{flex:1}}>{n}</span>
              <strong className="tabular">{v}</strong>
            </div>
          ))}
        </div>
      </Card>
    </div>
  </div>
);

Object.assign(window, { Sidebar, Topbar, SuperAdminBanner, SuperAdminScreen, NAV });