/* ===== Pago na Hora — App shell + PJ views ===== */

function Sidebar({ role, setRole, section, setSection, onNew, pjEntity, setPjEntity }) {
  const [entityOpen, setEntityOpen] = useState(false);
  const entityRef = useRef(null);
  const pjOptions = [
    { name: 'Estúdio Norte', initials: 'EN' },
    { name: 'Fluxvia LTDA', initials: 'FL' },
    { name: 'Norte Labs LTDA', initials: 'NL' },
  ];
  const pfEntity = { name: 'Marina Alves', initials: 'MA', type: 'PF' };
  const navPJ = [
    { id: 'overview', label: 'Visão geral', icon: 'grid' },
    { id: 'assistant', label: 'Assistente', icon: 'spark', tag: 'IA' },
    { id: 'new-payment', label: 'Novo pagamento', icon: 'plus' },
    { id: 'payments', label: 'Pagar', icon: 'pay', ct: '4' },
    { id: 'receivables', label: 'Receber', icon: 'wallet', ct: '2' },
    { id: 'providers', label: 'Entidades', icon: 'users' },
    { id: 'contracts', label: 'Contratos', icon: 'contract' },
    { id: 'documents', label: 'Documentos', icon: 'doc' },
  ];
  const navPF = [
    { id: 'overview', label: 'Visão geral', icon: 'grid' },
    { id: 'assistant', label: 'Assistente', icon: 'spark', tag: 'IA' },
    { id: 'new-payment', label: 'Novo pagamento', icon: 'plus' },
    { id: 'payments', label: 'Pagar', icon: 'pay', ct: '1' },
    { id: 'receivables', label: 'Receber', icon: 'wallet', ct: '2' },
    { id: 'contracts', label: 'Contratos', icon: 'contract' },
    { id: 'documents', label: 'Documentos', icon: 'doc' },
  ];
  const nav = role === 'pj' ? navPJ : navPF;
  const user = role === 'pj'
    ? { name: pjEntity.name, sub: 'PJ', color: 'var(--blue-600)' }
    : { name: 'Marina Alves', sub: 'PF', color: 'var(--green)' };
  const activeEntity = role === 'pj'
    ? { ...pjEntity, type: 'PJ' }
    : pfEntity;
  const choosePj = (entity) => {
    setPjEntity(entity);
    setRole('pj');
    setSection('overview');
    setEntityOpen(false);
  };
  const choosePf = () => {
    setRole('pf');
    setSection('overview');
    setEntityOpen(false);
  };
  useEffect(() => {
    if (!entityOpen) return;
    const onPointerDown = (event) => {
      if (entityRef.current && !entityRef.current.contains(event.target)) {
        setEntityOpen(false);
      }
    };
    document.addEventListener('pointerdown', onPointerDown);
    return () => document.removeEventListener('pointerdown', onPointerDown);
  }, [entityOpen]);

  return (
    <aside className="sb">
      <a className="logo" href="https://pagonahora.com/"><BrandMark size={28} /> Pago <span className="thin">na Hora</span></a>

      <div className="entity-label">Entidade ativa</div>
      <div className="role-switch" ref={entityRef}>
        <button className="on entity-trigger" onClick={() => setEntityOpen(v => !v)}>
          <span className={'switch-avatar' + (role === 'pf' ? ' pf' : '')}>{activeEntity.initials}</span>
          <span className="switch-copy">{activeEntity.name}<small>{activeEntity.type}</small></span>
          <span className="chev"><Icon name="chevD" size={13} /></span>
        </button>
        {entityOpen && (
          <div className="pj-menu">
            <div className="pj-menu-title">Trocar entidade</div>
            {pjOptions.map(entity => (
              <button key={entity.name} className={role === 'pj' && entity.name === pjEntity.name ? 'sel' : ''} onClick={() => choosePj(entity)}>
                <Avatar name={entity.name} size={28} />
                <span>{entity.name}<small>PJ</small></span>
                {role === 'pj' && entity.name === pjEntity.name && <Icon name="check" size={15} color="var(--blue-700)" sw={2.4} />}
              </button>
            ))}
            {[pfEntity].map(entity => (
              <button key={entity.name} className={role === 'pf' ? 'sel' : ''} onClick={choosePf}>
                <Avatar name={entity.name} size={28} color="var(--green)" />
                <span>{entity.name}<small>PF</small></span>
                {role === 'pf' && <Icon name="check" size={15} color="var(--green-600)" sw={2.4} />}
              </button>
            ))}
            <button className="new" onClick={() => setEntityOpen(false)}>
              <span className="mini-plus"><Icon name="plus" size={13} /></span>
              <span>Cadastrar nova PJ<small>Adicionar entidade</small></span>
            </button>
          </div>
        )}
      </div>

      <div className="navlabel">Menu</div>
      <nav>
        {nav.map(n => (
          <a key={n.id} className={section === n.id ? 'on' : ''} onClick={() => n.id === 'new-payment' ? onNew() : setSection(n.id)}>
            <Icon name={n.icon} size={18} />{n.label}
            {n.ct && <span className="ct">{n.ct}</span>}
            {n.tag && <span className="ct ia">{n.tag}</span>}
          </a>
        ))}
      </nav>

      <div className="navlabel">Conta</div>
      <nav>
        <a><Icon name="settings" size={18} />Configurações</a>
        <a><Icon name="shield" size={18} />Segurança</a>
      </nav>

      <div className="userbox">
        <Avatar name={user.name} color={user.color} size={34} />
        <div className="nm">{user.name}<small>{user.sub}</small></div>
        <span className="gear"><Icon name="logout" size={16} /></span>
      </div>
    </aside>
  );
}

function Topbar({ title, sub, search, noSearch }) {
  return (
    <div className="topbar">
      <div>
        <h1>{title}</h1>
        {sub && <div className="sub">{sub}</div>}
      </div>
      {!noSearch && (
        <div className="searchbar">
          <Icon name="search" size={16} />
          <input placeholder={search || 'Buscar…'} />
        </div>
      )}
      <div className="right">
        <button className="iconbtn"><Icon name="bell" size={18} /><span className="nd"></span></button>
        <button className="iconbtn"><Icon name="settings" size={18} /></button>
      </div>
    </div>
  );
}

function KCard({ lbl, val, small, icon, iconBg, iconColor, chg, chgColor }) {
  return (
    <div className="kcard">
      <div className="top">
        <span className="lbl">{lbl}</span>
        <span className="ic" style={{ background: iconBg }}><Icon name={icon} size={17} color={iconColor} /></span>
      </div>
      <div className="val mono tnum">{val}{small && <small> {small}</small>}</div>
      {chg && <div className="chg" style={{ color: chgColor || 'var(--ink-3)' }}>{chg}</div>}
    </div>
  );
}

/* ---------------- PJ: OVERVIEW ---------------- */
function OverviewPJ({ onNew, openProvider }) {
  const approvals = PNH.payments.filter(p => p.status === 'aprovar');
  const recent = PNH.payments.slice(0, 5);
  return (
    <div className="content">
      <div className="kgrid">
        <KCard lbl="Pago em junho" val="R$ 86.940" icon="trend" iconBg="var(--blue-50)" iconColor="var(--blue-600)" chg="↑ 12% vs. maio" chgColor="var(--green-600)" />
        <KCard lbl="Aguardando aprovação" val="R$ 12.000" icon="clock" iconBg="var(--amber-tint)" iconColor="var(--amber)" chg="2 pagamentos" />
        <KCard lbl="Agendado" val="R$ 2.400" icon="calendar" iconBg="#F0EBFB" iconColor="var(--violet)" chg="1 para 30 Jun" />
        <KCard lbl="Entidades conectadas" val="37" icon="users" iconBg="var(--green-tint)" iconColor="var(--green-600)" chg="+5 este mês" chgColor="var(--green-600)" />
      </div>

      {approvals.length > 0 && (
        <div className="panel" style={{ marginTop: 22, borderColor: 'var(--amber)', borderWidth: 1.5 }}>
          <div className="panel-head">
            <span className="ic" style={{ width: 32, height: 32, borderRadius: 9, background: 'var(--amber-tint)', display: 'grid', placeItems: 'center' }}><Icon name="clock" size={17} color="var(--amber)" /></span>
            <div><h3>Esperando você</h3><div className="sub">{approvals.length} pagamentos prontos para aprovar e enviar</div></div>
            <div className="right"><button className="btn btn-primary btn-sm" onClick={onNew}>Aprovar lote</button></div>
          </div>
          {approvals.map(p => (
            <div className="dt" key={p.id}>
              <div className="row" style={{ gridTemplateColumns: '1.6fr 1fr 1fr auto' }}>
                <div className="who"><Avatar name={p.who} size={34} /><div className="nm">{p.who}<small>{p.desc}</small></div></div>
                <div><KindTag kind={p.kind} /></div>
                <div className="amt">R$ {PNH.fmt(p.amount)}</div>
                <div style={{ display: 'flex', gap: 8 }}>
                  <button className="btn btn-ghost btn-sm">Revisar</button>
                  <button className="btn btn-green btn-sm"><Icon name="bolt" size={14} color="#fff" /> Pagar</button>
                </div>
              </div>
            </div>
          ))}
        </div>
      )}

      <div className="section-title"><h2>Pagamentos recentes</h2><div className="right"><button className="linkbtn">Ver todos</button></div></div>
      <div className="panel">
        <div className="dt">
          <div className="row head" style={{ gridTemplateColumns: '1.8fr 1fr 1fr 1fr 0.7fr' }}>
            <div>Parte</div><div>Descrição</div><div>Método</div><div>Valor</div><div>Status</div>
          </div>
          {recent.map(p => (
            <div className="row click" key={p.id} style={{ gridTemplateColumns: '1.8fr 1fr 1fr 1fr 0.7fr' }} onClick={() => openProvider(PNH.providers.find(x => x.name === p.who))}>
              <div className="who"><Avatar name={p.who} size={34} /><div className="nm">{p.who}<small>{p.id} · {p.date}</small></div></div>
              <div className="sec">{p.desc}</div>
              <div className="sec mono" style={{ fontSize: 12.5 }}>{p.method}</div>
              <div className="amt">R$ {PNH.fmt(p.amount)}</div>
              <div><Badge status={p.status} /></div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

/* ---------------- PJ: PAYMENTS ---------------- */
function PaymentsPJ({ onNew, openProvider }) {
  const [filter, setFilter] = useState('todos');
  const list = filter === 'todos' ? PNH.payments : PNH.payments.filter(p => p.status === filter);
  return (
    <div className="content">
      <div className="section-title" style={{ marginTop: 4 }}>
        <div className="seg">
          {[['todos', 'Todos'], ['aprovar', 'Aprovar'], ['agendado', 'Agendados'], ['pago', 'Pagos']].map(([k, l]) => (
            <button key={k} className={filter === k ? 'on' : ''} onClick={() => setFilter(k)}>{l}</button>
          ))}
        </div>
        <div className="right">
          <button className="btn btn-ghost btn-sm"><Icon name="download" size={15} /> Exportar</button>
          <button className="btn btn-primary btn-sm" onClick={onNew}><Icon name="plus" size={15} /> Novo pagamento</button>
        </div>
      </div>
      <div className="panel">
        <div className="dt">
          <div className="row head" style={{ gridTemplateColumns: '1.6fr 1.1fr 0.7fr 1fr 1fr 0.8fr' }}>
            <div>Parte</div><div>Descrição</div><div>Tipo</div><div>Data</div><div>Valor</div><div>Status</div>
          </div>
          {list.map(p => (
            <div className="row click" key={p.id} style={{ gridTemplateColumns: '1.6fr 1.1fr 0.7fr 1fr 1fr 0.8fr' }} onClick={() => openProvider(PNH.providers.find(x => x.name === p.who))}>
              <div className="who"><Avatar name={p.who} size={34} /><div className="nm">{p.who}<small>{p.id}</small></div></div>
              <div className="sec">{p.desc}</div>
              <div><KindTag kind={p.kind} /></div>
              <div className="sec mono" style={{ fontSize: 13 }}>{p.date}</div>
              <div className="amt">R$ {PNH.fmt(p.amount)}</div>
              <div><Badge status={p.status} /></div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

/* ---------------- PJ: PROVIDERS ---------------- */
function ProvidersPJ({ openProvider }) {
  return (
    <div className="content">
      <div className="section-title" style={{ marginTop: 4 }}>
        <div className="searchbar" style={{ maxWidth: 280, marginLeft: 0 }}><Icon name="search" size={16} /><input placeholder="Buscar entidade…" /></div>
        <div className="right"><button className="btn btn-primary btn-sm"><Icon name="plus" size={15} /> Nova entidade</button></div>
      </div>
      <div className="panel">
        <div className="dt">
          <div className="row head" style={{ gridTemplateColumns: '1.8fr 1.2fr 0.7fr 1fr 1fr' }}>
            <div>Entidade</div><div>Atividade</div><div>Tipo</div><div>Contrato</div><div>Valor base</div>
          </div>
          {PNH.providers.map(pv => (
            <div className="row click" key={pv.id} style={{ gridTemplateColumns: '1.8fr 1.2fr 0.7fr 1fr 1fr' }} onClick={() => openProvider(pv)}>
              <div className="who"><Avatar name={pv.name} size={36} /><div className="nm">{pv.name}<small>{pv.city}</small></div></div>
              <div className="sec">{pv.role}</div>
              <div><KindTag kind={pv.kind} /></div>
              <div className="sec">{pv.contract}</div>
              <div className="amt">R$ {PNH.fmt(pv.monthly)}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

window.Sidebar = Sidebar;
window.Topbar = Topbar;
window.KCard = KCard;
window.OverviewPJ = OverviewPJ;
window.PaymentsPJ = PaymentsPJ;
window.ProvidersPJ = ProvidersPJ;