/* Painel Nanda — componentes reutilizáveis. window.App.UI */
(function () {
  const I = window.App.Icons;
  const CFG = window.NANDA_CONFIG || {};
  const BR = CFG.brand || {};

  const initials = (name) => (name || '?').split(/\s+/).filter(Boolean).slice(0, 2).map((s) => s[0]).join('').toUpperCase();
  const hueFor = (s) => { let h = 0; for (const c of (s || '')) h = (h * 31 + c.charCodeAt(0)) % 360; return h; };

  function Avatar({ name, size = 40, ring }) {
    const hu = hueFor(name);
    return (
      <div className="shrink-0 grid place-items-center rounded-full font-semibold"
        style={{
          width: size, height: size, fontSize: size * 0.34,
          color: `hsl(${hu} 70% 82%)`,
          background: `hsl(${hu} 45% 22% / .55)`,
          border: `1px solid ${ring ? 'rgba(90,162,255,.55)' : `hsl(${hu} 45% 40% / .45)`}`,
        }}>
        {initials(name)}
      </div>
    );
  }

  function Badge({ children, tone = 'brand', soft = true, className = '' }) {
    const map = {
      brand: ['#5aa2ff', 'rgba(46,111,214,.16)', 'rgba(46,111,214,.35)'],
      ok: ['#57d8a3', 'rgba(38,162,105,.15)', 'rgba(38,162,105,.35)'],
      warn: ['#e6bd6a', 'rgba(216,161,58,.15)', 'rgba(216,161,58,.35)'],
      bad: ['#e08a8a', 'rgba(193,91,91,.15)', 'rgba(193,91,91,.35)'],
      muted: ['#9fb0c3', 'rgba(140,151,168,.12)', 'rgba(140,151,168,.28)'],
    };
    const [fg, bg, bd] = map[tone] || map.brand;
    return (
      <span className={'inline-flex items-center gap-1 rounded-full px-2 py-[3px] text-[11px] font-medium leading-none ' + className}
        style={{ color: fg, background: soft ? bg : 'transparent', border: `1px solid ${bd}` }}>
        {children}
      </span>
    );
  }

  function Delta({ v }) {
    if (v == null || v === 0) return <Badge tone="muted"><span className="opacity-70">–</span></Badge>;
    const up = v > 0;
    return <Badge tone={up ? 'ok' : 'bad'}>{up ? <I.TrendUp size={12} /> : <I.TrendDown size={12} />}{(up ? '+' : '') + v}%</Badge>;
  }

  function Card({ children, className = '', pad = true, style }) {
    return (
      <div className={'rounded-xl border border-line bg-surface/60 ' + (pad ? 'p-5 ' : '') + className}
        style={{ backdropFilter: 'blur(6px)', ...style }}>
        {children}
      </div>
    );
  }

  function StatCard({ label, value, delta, icon }) {
    const Ic = icon;
    return (
      <Card>
        <div className="flex items-start justify-between">
          <span className="text-[13px] text-muted">{label}</span>
          <span className="grid h-9 w-9 place-items-center rounded-lg border border-line bg-elevate text-bright"><Ic size={17} /></span>
        </div>
        <div className="mt-3 flex items-end justify-between">
          <span className="text-[30px] font-semibold leading-none tracking-tight">{value}</span>
          <Delta v={delta} />
        </div>
      </Card>
    );
  }

  function Button({ children, kind = 'ghost', size = 'md', className = '', ...p }) {
    const base = 'inline-flex items-center justify-center gap-2 rounded-lg font-medium transition-colors whitespace-nowrap disabled:opacity-50';
    const sz = size === 'sm' ? 'h-8 px-3 text-[12px]' : 'h-9 px-4 text-[13px]';
    const kinds = {
      primary: 'bg-brand hover:bg-brand-hover text-white',
      ghost: 'border border-line bg-surface hover:bg-elevate text-fg',
      subtle: 'text-muted hover:text-fg hover:bg-elevate',
    };
    return <button className={[base, sz, kinds[kind], className].join(' ')} {...p}>{children}</button>;
  }

  function Search({ value, onChange, placeholder }) {
    return (
      <div className="relative">
        <span className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-faint"><I.Search size={16} /></span>
        <input value={value} onChange={(e) => onChange && onChange(e.target.value)} placeholder={placeholder}
          className="h-9 w-full rounded-lg border border-line bg-surface pl-9 pr-3 text-[13px] text-fg placeholder:text-faint outline-none focus:border-brand/60" />
      </div>
    );
  }

  function Modal({ open, onClose, title, children, width = 420 }) {
    if (!open) return null;
    return (
      <div className="fixed inset-0 z-50 grid place-items-center bg-black/60 p-4" onClick={onClose}>
        <div onClick={(e) => e.stopPropagation()} className="w-full rounded-xl border border-line bg-surface2 p-5 shadow-2xl" style={{ maxWidth: width }}>
          <div className="mb-4 flex items-center justify-between">
            <span className="text-[15px] font-semibold">{title}</span>
            <button onClick={onClose} className="text-faint hover:text-fg"><I.X size={16} /></button>
          </div>
          {children}
        </div>
      </div>
    );
  }

  function PageHead({ title, subtitle, right, ro }) {
    return (
      <div className="mb-6 flex flex-wrap items-start justify-between gap-4">
        <div>
          <div className="flex items-center gap-3">
            <h1 className="text-[26px] font-semibold tracking-tight">{title}</h1>
            {ro && <Badge tone="muted" className="translate-y-[2px]"><I.Info size={12} />Somente leitura</Badge>}
          </div>
          {subtitle && <p className="mt-1 text-[14px] text-muted">{subtitle}</p>}
        </div>
        {right && <div className="flex flex-wrap items-center gap-2">{right}</div>}
      </div>
    );
  }

  const NAV = [
    ['dashboard', 'Dashboard', 'Dashboard'],
    ['pipeline', 'Pipeline', 'Pipeline'],
    ['chat', 'Chat Ao Vivo', 'Chat'],
    ['training', 'Treinamento', 'Training'],
    ['contacts', 'Contatos', 'Contacts'],
    ['scheduling', 'Agendamentos', 'Calendar'],
    ['team', 'Equipe', 'Team'],
    ['help', 'Ajuda', 'Help'],
    ['settings', 'Configurações', 'Settings'],
  ];

  function Sidebar({ route, go, role, user, onLogout, open, onClose, verVendas }) {
    const isAdmin = (role || 'admin') === 'admin';
    let nav = NAV.filter(([key]) => isAdmin || (key !== 'team' && key !== 'settings'));
    // verVendas=false esconde o menu de vendas mantendo só o Chat. A Nanda só
    // tem UM fluxo, então isto na prática nunca dispara hoje; mantido como
    // cinto de segurança caso a RLS um dia negue verVendas (falha aberta seria pior).
    if (verVendas === false) nav = nav.filter(([key]) => key === 'chat');
    const uname = (user && user.email) || BR.usuario || 'Equipe Nanda';
    const rlabel = role === 'admin' ? 'Administrador' : role === 'atendente' ? 'Atendente' : (BR.email || '');
    return (
      <>
      {/* Fundo escurecido do drawer (só mobile, quando aberto) */}
      <div onClick={onClose}
        className={'fixed inset-0 z-40 bg-black/60 transition-opacity md:hidden ' + (open ? 'opacity-100' : 'pointer-events-none opacity-0')} />
      <aside className={'fixed inset-y-0 left-0 z-50 flex w-64 shrink-0 flex-col border-r border-line bg-surface2 transition-transform duration-200 md:static md:z-auto md:translate-x-0 md:bg-surface2/70 ' + (open ? 'translate-x-0' : '-translate-x-full')}>
        <div className="flex items-center gap-3 px-5 py-5">
          <I.Logo size={34} />
          <div className="leading-tight">
            <div className="text-[15px] font-semibold">{BR.empresa || 'Nanda'}</div>
            <div className="text-[10px] font-medium tracking-[.18em] text-faint">WORKSPACE</div>
          </div>
          <button onClick={onClose} title="Fechar menu" className="ml-auto grid h-9 w-9 place-items-center rounded-lg text-faint hover:bg-elevate hover:text-fg md:hidden"><I.X size={18} /></button>
        </div>
        <nav className="mt-1 flex-1 space-y-1 px-3">
          {nav.map(([key, label, ic]) => {
            const Ic = I[ic]; const on = route === key;
            return (
              <button key={key} onClick={() => go(key)}
                className={'group flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-[13.5px] transition-colors ' +
                  (on ? 'bg-brand-soft text-fg' : 'text-muted hover:bg-elevate hover:text-fg')}>
                <span className={on ? 'text-bright' : 'text-faint group-hover:text-muted'}><Ic size={18} /></span>
                <span className="font-medium">{label}</span>
                {on && <span className="ml-auto h-4 w-1 rounded-full bg-bright" />}
              </button>
            );
          })}
        </nav>
        <div className="px-5 pb-3 pt-2">
          <div className="flex items-center gap-2 py-3 text-faint">
            <I.Logo size={18} />
            <span className="text-[12px] font-medium tracking-[.28em] text-muted/80">{(BR.rodape || 'RÁDIO REAL FM').toUpperCase()}</span>
          </div>
          <div className="mt-1 flex items-center gap-3 border-t border-line pt-3">
            <Avatar name={uname} size={38} />
            <div className="min-w-0 flex-1 leading-tight">
              <div className="truncate text-[13px] font-medium">{uname}</div>
              <div className="truncate text-[11px] text-faint">{rlabel}</div>
            </div>
            {onLogout ? <button onClick={onLogout} className="text-faint hover:text-fg" title="Sair"><I.LogOut size={17} /></button> : null}
          </div>
        </div>
      </aside>
      </>
    );
  }

  window.App = window.App || {};
  window.App.UI = { Avatar, Badge, Delta, Card, StatCard, Button, Search, Modal, PageHead, Sidebar, initials, hueFor };
})();