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

function Sidebar({ role, setRole, section, setSection, pjEntity, setPjEntity, onLogout, me, accounts = [], onSwitch, onNewOwned }) {
  const [entityOpen, setEntityOpen] = useState(false);
  const entityRef = useRef(null);
  const nav = [
    { id: 'overview', label: 'Visão geral', icon: 'grid' },
    { id: 'assistant', label: 'Assistente', icon: 'spark', tag: 'IA' },
    { id: 'payments', label: 'Pagar', icon: 'pay' },
    { id: 'receivables', label: 'Receber', icon: 'wallet' },
    { id: 'providers', label: 'Entidades', icon: 'users' },
    { id: 'contracts', label: 'Contratos', icon: 'contract' },
    { id: 'documents', label: 'Documentos', icon: 'doc' },
  ];
  const entityType = role === 'pj' ? 'PJ' : 'PF';
  const entityColor = role === 'pj' ? 'var(--blue-600)' : 'var(--green)';
  const activeEntity = { name: pjEntity.name, initials: pjEntity.initials, type: entityType };
  const accountList = accounts.length
    ? accounts
    : [{ id: me && me.account_id, name: pjEntity.name, type: role }];
  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="#painel" onClick={() => setSection('overview')}><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">
            {me && me.email && <div className="pj-menu-title">{me.email}</div>}
            {accountList.map(a => (
              <button key={a.id} className={me && a.id === me.account_id ? 'sel' : ''} onClick={() => { setEntityOpen(false); onSwitch && onSwitch(a.id); }}>
                <Avatar name={a.name} size={28} color={a.type === 'pf' ? 'var(--green)' : 'var(--blue-600)'} />
                <span>{a.name}<small>{(a.type || '').toUpperCase()}</small></span>
                {me && a.id === me.account_id && <Icon name="check" size={15} color="var(--blue-700)" sw={2.4} />}
              </button>
            ))}
            <button className="new" onClick={() => { setEntityOpen(false); onNewOwned && onNewOwned(); }}>
              <span className="mini-plus"><Icon name="plus" size={13} /></span>
              <span>Cadastrar nova entidade<small>Outra que você administra</small></span>
            </button>
            <button className="pj-menu-logout" onClick={() => { setEntityOpen(false); onLogout && onLogout(); }}>
              <Icon name="logout" size={16} /><span>Sair</span>
            </button>
          </div>
        )}
      </div>

      <div className="navlabel">Menu</div>
      <nav>
        {nav.map(n => (
          <a key={n.id} className={section === n.id ? 'on' : ''} onClick={() => 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>
    </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, payments = [], providers = [] }) {
  const approvals = payments.filter(p => p.status === 'aprovar');
  const recent = payments.slice(0, 5);
  const findProvider = (name) => providers.find(x => x.name === name);
  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(findProvider(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>
          ))}
          {!recent.length && <div className="sec" style={{ padding: '18px', fontSize: 13.5 }}>Nenhum pagamento ainda.</div>}
        </div>
      </div>
    </div>
  );
}

/* ---------------- PJ: PAYMENTS ---------------- */
function PaymentsPJ({ onNew, openProvider, payments = [], providers = [] }) {
  const [filter, setFilter] = useState('todos');
  const list = filter === 'todos' ? payments : payments.filter(p => p.status === filter);
  const findProvider = (name) => providers.find(x => x.name === name);
  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(findProvider(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>
          ))}
          {!list.length && <div className="sec" style={{ padding: '18px', fontSize: 13.5 }}>Nenhum pagamento nesta visão.</div>}
        </div>
      </div>
    </div>
  );
}

/* ---------------- PJ: PROVIDERS ---------------- */
function ProvidersPJ({ openProvider, providers = [], onNew }) {
  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" onClick={onNew}><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>
          {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>
          ))}
          {!providers.length && <div className="sec" style={{ padding: '18px', fontSize: 13.5 }}>Nenhuma entidade cadastrada ainda.</div>}
        </div>
      </div>
    </div>
  );
}

/* ---------- New entity modal ---------- */
function NewEntity({ onClose, onDone }) {
  const [form, setForm] = useState({ name: '', kind: 'pj', role: '', doc: '', city: '', email: '' });
  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState('');

  const submit = async (e) => {
    e.preventDefault();
    if (busy) return;
    if (!form.name.trim()) { setError('Informe o nome da entidade.'); return; }
    setError('');
    setBusy(true);
    const payload = { name: form.name.trim(), kind: form.kind };
    if (form.role.trim()) payload.role = form.role.trim();
    if (form.doc.trim()) payload.doc = form.doc.trim();
    if (form.city.trim()) payload.city = form.city.trim();
    if (form.email.trim()) payload.email = form.email.trim();
    try {
      await onDone(payload);
    } catch (err) {
      setError(err.detail || err.message || 'Não foi possível cadastrar a entidade.');
      setBusy(false);
    }
  };

  return (
    <div className="content">
      <form onSubmit={submit} className="entity-form">
        <div className="entity-form-body">
          <div className="field">
            <label>Nome *</label>
            <input value={form.name} onChange={e => set('name', e.target.value)} placeholder="Ex: Estúdio Norte Ltda." autoFocus />
          </div>
          <div className="field-row">
            <div className="field">
              <label>Tipo</label>
              <select value={form.kind} onChange={e => set('kind', e.target.value)}>
                <option value="pj">PJ</option><option value="pf">PF</option>
              </select>
            </div>
            <div className="field">
              <label>CPF / CNPJ</label>
              <input value={form.doc} onChange={e => set('doc', e.target.value)} placeholder="000.000.000-00" />
            </div>
          </div>
          <div className="field">
            <label>Atividade</label>
            <input value={form.role} onChange={e => set('role', e.target.value)} placeholder="Ex: Design de produto" />
          </div>
          <div className="field-row">
            <div className="field">
              <label>Cidade</label>
              <input value={form.city} onChange={e => set('city', e.target.value)} placeholder="São Paulo, SP" />
            </div>
            <div className="field">
              <label>E-mail</label>
              <input value={form.email} onChange={e => set('email', e.target.value)} placeholder="contato@email.com" />
            </div>
          </div>
          {error && <div className="entity-modal-error">{error}</div>}
        </div>
        <div className="entity-form-foot">
          <button type="button" className="btn btn-ghost" onClick={onClose}><Icon name="arrowL" size={14} /> Cancelar</button>
          <button type="submit" className="btn btn-primary" disabled={busy} style={{ opacity: busy ? .6 : 1 }}>{busy ? 'Salvando…' : 'Cadastrar entidade'}</button>
        </div>
      </form>
    </div>
  );
}

/* ---------- New owned account (an entity the user administers) ---------- */
function NewAccount({ onClose, onDone }) {
  const [form, setForm] = useState({ type: 'pj', name: '', doc: '', city: '' });
  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState('');

  const submit = async (e) => {
    e.preventDefault();
    if (busy) return;
    if (!form.name.trim()) { setError('Informe o nome da entidade.'); return; }
    setError('');
    setBusy(true);
    const payload = { type: form.type, name: form.name.trim() };
    if (form.doc.trim()) payload.doc = form.doc.trim();
    if (form.city.trim()) payload.city = form.city.trim();
    try {
      await onDone(payload);
    } catch (err) {
      setError(err.detail || err.message || 'Não foi possível criar a entidade.');
      setBusy(false);
    }
  };

  return (
    <div className="content">
      <form onSubmit={submit} className="entity-form">
        <div className="entity-form-body">
          <div className="field">
            <label>Nome *</label>
            <input value={form.name} onChange={e => set('name', e.target.value)} placeholder="Ex: Wilson Studios Ltda." autoFocus />
          </div>
          <div className="field-row">
            <div className="field">
              <label>Tipo</label>
              <select value={form.type} onChange={e => set('type', e.target.value)}>
                <option value="pj">PJ</option><option value="pf">PF</option>
              </select>
            </div>
            <div className="field">
              <label>CPF / CNPJ</label>
              <input value={form.doc} onChange={e => set('doc', e.target.value)} placeholder="000.000.000-00" />
            </div>
          </div>
          <div className="field">
            <label>Cidade</label>
            <input value={form.city} onChange={e => set('city', e.target.value)} placeholder="São Paulo, SP" />
          </div>
          {error && <div className="entity-modal-error">{error}</div>}
        </div>
        <div className="entity-form-foot">
          <button type="button" className="btn btn-ghost" onClick={onClose}><Icon name="arrowL" size={14} /> Cancelar</button>
          <button type="submit" className="btn btn-primary" disabled={busy} style={{ opacity: busy ? .6 : 1 }}>{busy ? 'Criando…' : 'Criar entidade'}</button>
        </div>
      </form>
    </div>
  );
}

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