/* ===== Pago na Hora — PF views + shared views + drawer ===== */

/* ---------------- PF: OVERVIEW ---------------- */
function OverviewPF() {
  const next = PNH.receivables.find(r => r.status === 'agendado') || PNH.receivables[0];
  const recebidoMes = PNH.receivables.filter(r => r.status === 'pago').reduce((s, r) => s + r.amount, 0);
  const aReceber = PNH.receivables.filter(r => r.status !== 'pago').reduce((s, r) => s + r.amount, 0);
  return (
    <div className="content">
      <div style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 18 }}>
        <div className="panel" style={{ background: 'var(--navy-900)', color: '#fff', border: 0, padding: 24, position: 'relative', overflow: 'hidden' }}>
          <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(400px 200px at 90% 0%, rgba(7,150,90,.24), transparent 60%)' }}></div>
          <div style={{ position: 'relative' }}>
            <div style={{ fontSize: 13, color: 'rgba(255,255,255,.6)', fontWeight: 600 }}>A receber nos próximos dias</div>
            <div className="mono tnum" style={{ fontSize: 40, fontWeight: 800, letterSpacing: '-.02em', marginTop: 8 }}>R$ {PNH.fmt(aReceber)}</div>
            <div style={{ display: 'flex', gap: 24, marginTop: 22 }}>
              <div><div style={{ fontSize: 12, color: 'rgba(255,255,255,.55)', fontWeight: 600 }}>Recebido em junho</div><div className="mono" style={{ fontSize: 18, fontWeight: 700, marginTop: 3 }}>R$ {PNH.fmt(recebidoMes)}</div></div>
              <div><div style={{ fontSize: 12, color: 'rgba(255,255,255,.55)', fontWeight: 600 }}>Entidades</div><div className="mono" style={{ fontSize: 18, fontWeight: 700, marginTop: 3 }}>5 ativas</div></div>
            </div>
          </div>
        </div>
        <div className="panel" style={{ padding: 22, display: 'flex', flexDirection: 'column' }}>
          <div style={{ fontSize: 13, color: 'var(--ink-3)', fontWeight: 700 }}>Próximo Pix</div>
          <div className="who" style={{ marginTop: 14 }}>
            <Avatar name={next.from} color={next.logo} size={42} />
            <div className="nm" style={{ fontSize: 15 }}>{next.from}<small>{next.desc}</small></div>
          </div>
          <div className="mono tnum" style={{ fontSize: 30, fontWeight: 800, marginTop: 16 }}>R$ {PNH.fmt(next.amount)}</div>
          <div style={{ marginTop: 'auto', paddingTop: 16, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
            <Badge status={next.status} />
            <span className="sec" style={{ fontSize: 13, fontWeight: 700 }}>Previsto {next.date}</span>
          </div>
        </div>
      </div>

      <div className="section-title"><h2>Valores a receber</h2><div className="right"><button className="linkbtn">Baixar extrato</button></div></div>
      <div className="panel">
        <div className="dt">
          <div className="row head" style={{ gridTemplateColumns: '1.8fr 1.4fr 1fr 1fr 0.8fr' }}>
            <div>Entidade</div><div>Descrição</div><div>Data</div><div>Valor</div><div>Status</div>
          </div>
          {PNH.receivables.map(r => (
            <div className="row" key={r.id} style={{ gridTemplateColumns: '1.8fr 1.4fr 1fr 1fr 0.8fr' }}>
              <div className="who"><Avatar name={r.from} color={r.logo} size={36} /><div className="nm">{r.from}<small>{r.id}</small></div></div>
              <div className="sec">{r.desc}</div>
              <div className="sec mono" style={{ fontSize: 13 }}>{r.date}</div>
              <div className="amt" style={{ color: r.status === 'pago' ? 'var(--green-600)' : 'inherit' }}>R$ {PNH.fmt(r.amount)}</div>
              <div><Badge status={r.status} /></div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

/* ---------------- PF: RECEIVABLES ---------------- */
function ReceivablesPF() {
  const [filter, setFilter] = useState('todos');
  const list = filter === 'todos' ? PNH.receivables : PNH.receivables.filter(r => r.status === filter);
  return (
    <div className="content">
      <div className="section-title" style={{ marginTop: 4 }}>
        <div className="seg">
          {[['todos', 'Todos'], ['agendado', 'A receber'], ['aprovar', 'Em aprovação'], ['pago', 'Recebidos']].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} /> Extrato</button></div>
      </div>
      <div className="panel">
        <div className="dt">
          <div className="row head" style={{ gridTemplateColumns: '1.8fr 1.4fr 1fr 1fr 0.8fr' }}>
            <div>Entidade</div><div>Descrição</div><div>Data</div><div>Valor</div><div>Status</div>
          </div>
          {list.map(r => (
            <div className="row" key={r.id} style={{ gridTemplateColumns: '1.8fr 1.4fr 1fr 1fr 0.8fr' }}>
              <div className="who"><Avatar name={r.from} color={r.logo} size={36} /><div className="nm">{r.from}<small>{r.id}</small></div></div>
              <div className="sec">{r.desc}</div>
              <div className="sec mono" style={{ fontSize: 13 }}>{r.date}</div>
              <div className="amt" style={{ color: r.status === 'pago' ? 'var(--green-600)' : 'inherit' }}>R$ {PNH.fmt(r.amount)}</div>
              <div><Badge status={r.status} /></div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

/* ---------------- SHARED: CONTRACTS ---------------- */
function ContractsView({ role, onNew }) {
  const data = role === 'pj'
    ? [
        { p: 'Marina Alves', t: 'Prestação recorrente', v: 4200, st: 'pago', d: 'Assinado 12 Mai' },
        { p: 'Rafael Costa', t: 'Por entrega — pacote 14', v: 6800, st: 'pendente', d: 'Aguardando assinatura' },
        { p: 'Júlia Santos', t: 'Prestação recorrente', v: 2400, st: 'pago', d: 'Assinado 03 Mai' },
        { p: 'Diego Martins', t: 'Prestação recorrente', v: 5200, st: 'pendente', d: 'Enviado hoje' },
        { p: 'André Souza', t: 'Consultoria mensal', v: 7400, st: 'pago', d: 'Assinado 20 Abr' },
      ]
    : [
        { p: 'Estúdio Norte', t: 'Identidade visual', v: 4200, st: 'pago', d: 'Você assinou 12 Mai' },
        { p: 'Lumen Co.', t: 'Pacote visual', v: 3200, st: 'pendente', d: 'Aguardando sua assinatura' },
        { p: 'Maramar', t: 'Consultoria de marca', v: 2600, st: 'pago', d: 'Você assinou 28 Abr' },
      ];
  return (
    <div className="content">
      <div className="section-title" style={{ marginTop: 4 }}>
        <h2>{role === 'pj' ? 'Contratos enviados' : 'Seus contratos'}</h2>
        <div className="right">{role === 'pj' && <button className="btn btn-primary btn-sm" onClick={onNew}><Icon name="plus" size={15} /> Novo contrato</button>}</div>
      </div>
      <div className="panel">
        <div className="dt">
          <div className="row head" style={{ gridTemplateColumns: '1.6fr 1.4fr 1fr 1.1fr 0.8fr' }}>
            <div>Entidade</div><div>Contrato</div><div>Valor</div><div>Situação</div><div></div>
          </div>
          {data.map((c, i) => (
            <div className="row" key={i} style={{ gridTemplateColumns: '1.6fr 1.4fr 1fr 1.1fr 0.8fr' }}>
              <div className="who"><span className="ic" style={{ width: 36, height: 36, borderRadius: 9, background: 'var(--blue-50)', display: 'grid', placeItems: 'center', flex: 'none' }}><Icon name="contract" size={18} color="var(--blue-600)" /></span><div className="nm">{c.p}<small>{c.d}</small></div></div>
              <div className="sec">{c.t}</div>
              <div className="amt">R$ {PNH.fmt(c.v)}</div>
              <div><Badge status={c.st === 'pago' ? 'pago' : 'pendente'} />{c.st === 'pago' ? '' : ''}</div>
              <div style={{ textAlign: 'right' }}>
                {c.st === 'pendente' && role === 'pf'
                  ? <button className="btn btn-green btn-sm">Assinar</button>
                  : <button className="btn btn-ghost btn-sm"><Icon name="download" size={14} /> PDF</button>}
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

/* ---------------- SHARED: DOCUMENTS ---------------- */
function DocumentsView({ role }) {
  const docs = [
    { n: 'Contrato — Marina Alves.pdf', t: 'Contrato', who: 'Marina Alves', d: '12 Mai 2026', ic: 'contract', c: 'var(--blue-600)', bg: 'var(--blue-50)' },
    { n: 'NF 1042 — Pedro Lima.pdf', t: 'Nota fiscal', who: 'Pedro Lima', d: '28 Mai 2026', ic: 'doc', c: 'var(--amber)', bg: 'var(--amber-tint)' },
    { n: 'Comprovante PG-2041.pdf', t: 'Comprovante Pix', who: 'Marina Alves', d: '02 Jun 2026', ic: 'pay', c: 'var(--green-600)', bg: 'var(--green-tint)' },
    { n: 'Contrato — André Souza.pdf', t: 'Contrato', who: 'André Souza', d: '20 Abr 2026', ic: 'contract', c: 'var(--blue-600)', bg: 'var(--blue-50)' },
    { n: 'NF 0991 — Camila Rocha.pdf', t: 'Nota fiscal', who: 'Camila Rocha', d: '31 Mai 2026', ic: 'doc', c: 'var(--amber)', bg: 'var(--amber-tint)' },
    { n: 'Comprovante PG-2035.pdf', t: 'Comprovante Pix', who: 'Pedro Lima', d: '28 Mai 2026', ic: 'pay', c: 'var(--green-600)', bg: 'var(--green-tint)' },
  ];
  return (
    <div className="content">
      <div className="section-title" style={{ marginTop: 4 }}>
        <div className="seg">
          <button className="on">Todos</button><button>Contratos</button><button>Notas fiscais</button><button>Comprovantes</button>
        </div>
        <div className="right"><button className="btn btn-ghost btn-sm"><Icon name="download" size={15} /> Baixar tudo</button></div>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }}>
        {docs.map((d, i) => (
          <div className="panel" key={i} style={{ padding: 18, cursor: 'pointer' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
              <span className="ic" style={{ width: 42, height: 42, borderRadius: 11, background: d.bg, display: 'grid', placeItems: 'center', flex: 'none' }}><Icon name={d.ic} size={20} color={d.c} /></span>
              <span className="badge badge-gray">{d.t}</span>
              <button className="iconbtn" style={{ marginLeft: 'auto', width: 32, height: 32 }}><Icon name="download" size={15} /></button>
            </div>
            <div style={{ fontWeight: 700, fontSize: 14.5, marginTop: 14, lineHeight: 1.3 }}>{d.n}</div>
            <div className="sec" style={{ fontSize: 12.5, marginTop: 4 }}>{d.who} · {d.d}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

/* ---------------- PROVIDER DRAWER ---------------- */
function ProviderDrawer({ provider, onClose, onPay }) {
  if (!provider) return null;
  const pv = provider;
  const hist = PNH.payments.filter(p => p.who === pv.name);
  return (
    <div className="scrim" onClick={onClose}>
      <div className="drawer" onClick={e => e.stopPropagation()}>
        <div className="drawer-head">
          <Avatar name={pv.name} size={42} />
          <div><div style={{ fontWeight: 800, fontSize: 17 }}>{pv.name}</div><div className="sec" style={{ fontSize: 13 }}>{pv.role}</div></div>
          <button className="closex" onClick={onClose}><Icon name="x" size={18} /></button>
        </div>
        <div className="drawer-body">
          <div style={{ display: 'flex', gap: 8, marginBottom: 18 }}>
            <button className="btn btn-primary btn-sm" style={{ flex: 1 }} onClick={() => onPay(pv)}><Icon name="bolt" size={14} color="#fff" /> Pagar via Pix</button>
            <button className="btn btn-ghost btn-sm"><Icon name="contract" size={14} /> Contrato</button>
            <button className="btn btn-ghost btn-sm"><Icon name="more" size={16} /></button>
          </div>
          <div className="panel" style={{ padding: '4px 16px', marginBottom: 18 }}>
            <div className="kv"><span className="k">Tipo</span><span className="v"><KindTag kind={pv.kind} /></span></div>
            <div className="kv"><span className="k">{pv.kind === 'PJ' ? 'CNPJ' : 'CPF'}</span><span className="v mono">{pv.doc}</span></div>
            <div className="kv"><span className="k">Chave Pix</span><span className="v">{pv.pixType}</span></div>
            <div className="kv"><span className="k">Contrato</span><span className="v">{pv.contract} · R$ {PNH.fmt(pv.monthly)}</span></div>
            <div className="kv"><span className="k">Cidade</span><span className="v">{pv.city}</span></div>
            <div className="kv"><span className="k">Desde</span><span className="v">{pv.since}</span></div>
          </div>
          <div style={{ fontWeight: 800, fontSize: 14, margin: '4px 0 10px' }}>Histórico da entidade</div>
          {hist.length ? hist.map(h => (
            <div key={h.id} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '11px 0', borderBottom: '1px solid var(--line)' }}>
              <span className="ic" style={{ width: 34, height: 34, borderRadius: 9, background: 'var(--green-tint)', display: 'grid', placeItems: 'center' }}><Icon name="check" size={16} color="var(--green)" sw={2.4} /></span>
              <div style={{ flex: 1 }}><div style={{ fontWeight: 700, fontSize: 13.5 }}>{h.desc}</div><div className="sec" style={{ fontSize: 12 }}>{h.id} · {h.date}</div></div>
              <div className="amt" style={{ fontSize: 13.5 }}>R$ {PNH.fmt(h.amount)}</div>
            </div>
          )) : <div className="sec" style={{ fontSize: 13.5, padding: '8px 0' }}>Nenhum pagamento ainda.</div>}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { OverviewPF, ReceivablesPF, ContractsView, DocumentsView, ProviderDrawer });