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

/* ---------------- PF: OVERVIEW ---------------- */
function OverviewPF({ receivables = [] }) {
  const next = receivables.find(r => r.status === 'agendado') || receivables[0];
  const recebidoMes = receivables.filter(r => r.status === 'pago').reduce((s, r) => s + r.amount, 0);
  const aReceber = 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>
          {next ? (
            <>
              <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 className="sec" style={{ marginTop: 14, fontSize: 13.5 }}>Nenhum recebimento previsto.</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>
          {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>
          ))}
          {!receivables.length && <div className="sec" style={{ padding: '18px', fontSize: 13.5 }}>Nenhum valor a receber ainda.</div>}
        </div>
      </div>
    </div>
  );
}

/* ---------------- PF: RECEIVABLES ---------------- */
function ReceivablesPF({ receivables = [] }) {
  const [filter, setFilter] = useState('todos');
  const list = filter === 'todos' ? receivables : 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>
          ))}
          {!list.length && <div className="sec" style={{ padding: '18px', fontSize: 13.5 }}>Nenhum valor nesta visão.</div>}
        </div>
      </div>
    </div>
  );
}

/* ---------------- SHARED: CONTRACTS ---------------- */
function ContractsView({ role, onNew, contracts = [], providers = [] }) {
  // Maps API contracts into the row shape this table renders. Entity name is
  // resolved through the loaded providers; status collapses to pago/pendente.
  const byId = {};
  providers.forEach(pv => { byId[pv.id] = pv; });
  const data = (contracts || []).map(c => {
    const pv = byId[c.entity_id];
    const signed = c.status === 'signed' || c.status === 'pago' || !!c.signed_at;
    return {
      p: (pv && pv.name) || c.entity_name || 'Entidade',
      t: c.scope || c.title || 'Contrato',
      v: PNH.toReais(c.amount_cents),
      st: signed ? 'pago' : 'pendente',
      d: c.due_date || (signed ? 'Assinado' : 'Aguardando assinatura'),
    };
  });
  return (
    <div className="content">
      <div className="section-title" style={{ marginTop: 4 }}>
        <h2>{role === 'pj' ? 'Contratos enviados' : 'Seus contratos'}</h2>
        <div className="right">{onNew && <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>
          ))}
          {!data.length && <div className="sec" style={{ padding: '18px', fontSize: 13.5 }}>Nenhum contrato ainda.</div>}
        </div>
      </div>
    </div>
  );
}

/* ---------------- SHARED: NEW CONTRACT LAB ---------------- */
function NewContract({ role, entity, onClose, onDone, providers = [] }) {
  const [party, setParty] = useState(null);
  const [partyQuery, setPartyQuery] = useState('');
  const [partyOpen, setPartyOpen] = useState(true);
  const [source, setSource] = useState('import');
  const [amount, setAmount] = useState(0);
  const [scope, setScope] = useState('Desenvolvimento e entrega do módulo financeiro com revisão de interface e handoff técnico.');
  const [due, setDue] = useState('30 Jun 2026');
  const [payMode, setPayMode] = useState('50% na aprovação e 50% na entrega');
  const [confirmFields, setConfirmFields] = useState({
    parties: true,
    value: true,
    schedule: false,
    signature: true,
  });
  const [clauses, setClauses] = useState({
    nf: true,
    nda: true,
    ip: true,
    late: false,
    approval: true,
    recurrence: false,
  });
  const readiness = 62
    + (party ? 8 : -18)
    + (source ? 7 : 0)
    + (amount > 0 ? 8 : 0)
    + (scope.length > 35 ? 8 : 0)
    + (clauses.nf ? 4 : 0)
    + (clauses.approval ? 3 : 0);
  const score = Math.min(readiness, 100);
  const clauseItems = [
    { id: 'nf', title: 'Nota fiscal obrigatória', text: 'Libera pagamento só com documento anexado.' },
    { id: 'nda', title: 'Confidencialidade', text: 'Protege dados, estratégia e materiais compartilhados.' },
    { id: 'ip', title: 'Direitos de uso', text: 'Define cessão, portfólio e propriedade intelectual.' },
    { id: 'late', title: 'Multa por atraso', text: 'Cria regra objetiva para atraso de entrega ou pagamento.' },
    { id: 'approval', title: 'Aprovação por etapa', text: 'Cada marco gera aceite antes do próximo pagamento.' },
    { id: 'recurrence', title: 'Recorrência automática', text: 'Renova agenda e cobrança para contratos mensais.' },
  ];
  const selectedClauses = clauseItems.filter(c => clauses[c.id]);
  const toggleClause = (id) => setClauses(prev => ({ ...prev, [id]: !prev[id] }));
  const partyMatches = providers
    .filter(p => (p.name + ' ' + p.role + ' ' + p.kind).toLowerCase().includes(partyQuery.toLowerCase()))
    .slice(0, 5);
  const chooseParty = (p) => {
    setParty(p);
    setAmount(p.monthly);
    setPartyQuery('');
    setPartyOpen(false);
  };
  const suggestions = [
    { id: 'delivery', title: 'Entrega com marcos', text: 'Parecido com 8 contratos já usados por esta entidade.', amount: 6800, pay: '50% na aprovação e 50% na entrega' },
    { id: 'monthly', title: 'Recorrente mensal', text: 'Sugestão criada a partir de contratos mensais anteriores.', amount: 4200, pay: 'Pagamento mensal após aceite e nota fiscal' },
    { id: 'consulting', title: 'Consultoria por horas', text: 'Baseado em acordos de consultoria já importados.', amount: 7400, pay: 'Pagamento por horas aprovadas no fechamento do mês' },
  ];
  const extractedFields = [
    { id: 'parties', title: 'Partes do contrato', value: entity + ' ↔ ' + (party ? party.name : 'Selecionar') },
    { id: 'value', title: 'Valor e condição', value: 'R$ ' + PNH.fmt(amount || 0) + ' · ' + payMode },
    { id: 'schedule', title: 'Prazo de entrega', value: due },
    { id: 'signature', title: 'Assinatura e aceite', value: 'Assinatura digital das duas partes' },
  ];
  const toggleField = (id) => setConfirmFields(prev => ({ ...prev, [id]: !prev[id] }));
  const applySuggestion = (s) => {
    setAmount(s.amount);
    setPayMode(s.pay);
    setScope(s.title + ' para ' + (party ? party.role.toLowerCase() : 'prestação de serviço') + ', com aceite registrado na Pago na Hora.');
  };

  return (
    <div className="content contract-content">
      <div className="contract-stagebar">
        {['Parte', 'Origem', 'Campos', 'Cláusulas', 'Assinatura'].map((s, i) => (
          <span className={((party && i < 4) || i === 0) ? 'on' : ''} key={s}>
            <b>{i + 1}</b>{s}
          </span>
        ))}
      </div>
      <div className="contract-lab contract-screen">
        <div className="contract-rail">
          <div className="contract-brand">
            <span><Icon name="spark" size={17} color="#fff" /></span>
            <div>
              <b>Bancada de acordo</b>
              <small>{entity} · {role === 'pj' ? 'PJ' : 'PF'}</small>
            </div>
          </div>
          <div className="contract-steps">
            {['Parte', 'Modelo', 'Escopo', 'Cláusulas', 'Assinatura'].map((s, i) => (
              <div className={'contract-step ' + (((party && i < 4) || i === 0) ? 'done' : '')} key={s}>
                <span>{i + 1}</span>{s}
              </div>
            ))}
          </div>
          <button className="contract-close" onClick={onClose}><Icon name="arrowL" size={18} /></button>
        </div>

        <div className="contract-builder">
          <section className="contract-workbench">
            <div className="contract-hero">
              <span className="badge badge-blue"><span className="dot"></span> Novo contrato</span>
              <h2>Monte o acordo pelo que vai acontecer no dinheiro.</h2>
              <p>Primeiro escolha a outra parte. Depois a Pago na Hora revela o caminho certo para importar, sugerir, preencher e assinar.</p>
            </div>

            <div className="contract-block">
              <div className="contract-block-head">
                <div>
                  <h3>Outra parte</h3>
                  <p>Busque uma entidade existente ou cadastre uma nova no fluxo.</p>
                </div>
              </div>
              <div className="party-combo">
                <div className="party-search">
                  <Icon name="search" size={16} color="var(--ink-3)" />
                  <input
                    value={partyQuery}
                    onChange={e => { setPartyQuery(e.target.value); setPartyOpen(true); }}
                    onFocus={() => setPartyOpen(true)}
                    placeholder="Buscar por nome, atividade, CPF, MEI ou PJ..."
                  />
                  <button onClick={() => setPartyOpen(v => !v)}><Icon name="chevD" size={14} /></button>
                </div>
                {partyOpen && (
                  <div className="party-menu">
                    <div className="party-menu-title">Sugestões inteligentes</div>
                    {partyMatches.map(p => (
                      <button key={p.id} onClick={() => chooseParty(p)}>
                        <Avatar name={p.name} size={30} />
                        <span>{p.name}<small>{p.role} · {p.kind} · {p.city}</small></span>
                        {party && party.id === p.id && <Icon name="check" size={15} color="var(--green-600)" sw={2.5} />}
                      </button>
                    ))}
                    {!partyMatches.length && (
                      <button className="create-party" onClick={() => setPartyOpen(false)}>
                        <span className="mini-plus"><Icon name="plus" size={13} /></span>
                        <span>Cadastrar "{partyQuery || 'nova entidade'}"<small>Adicionar dados, Pix e documentos depois</small></span>
                      </button>
                    )}
                    {!!partyMatches.length && (
                      <button className="create-party" onClick={() => setPartyOpen(false)}>
                        <span className="mini-plus"><Icon name="plus" size={13} /></span>
                        <span>Cadastrar nova entidade<small>PF, MEI ou PJ</small></span>
                      </button>
                    )}
                  </div>
                )}
                {party && (
                  <div className="party-selected">
                    <Avatar name={party.name} size={36} />
                    <div><b>{party.name}</b><small>{party.role} · {party.kind} · {party.pixType}</small></div>
                    <span>Selecionada</span>
                  </div>
                )}
              </div>
            </div>

            {party && <div className="contract-block">
              <div className="contract-block-head">
                <div>
                  <h3>Ponto de partida</h3>
                  <p>Comece limpo ou traga um contrato anterior para a IA mapear o que precisa ser confirmado.</p>
                </div>
              </div>
              <div className="source-switch">
                <button className={source === 'blank' ? 'on' : ''} onClick={() => setSource('blank')}>
                  <span><Icon name="plus" size={18} /></span>
                  <b>Começar do zero</b>
                  <small>Crie o acordo com escopo, pagamento e cláusulas guiadas.</small>
                </button>
                <button className={source === 'import' ? 'on' : ''} onClick={() => setSource('import')}>
                  <span><Icon name="doc" size={18} /></span>
                  <b>Importar contrato ou PDF</b>
                  <small>A IA extrai campos de confirmação e mostra o que falta preencher.</small>
                </button>
              </div>

              {source === 'import' ? (
                <div className="import-panel">
                  <div className="dropzone">
                    <Icon name="download" size={20} color="var(--blue-600)" />
                    <div>
                      <b>Contrato_Rafael_modelo.pdf</b>
                      <small>Simulação do upload · 14 campos detectados · 4 precisam de confirmação</small>
                    </div>
                    <span className="badge badge-blue"><span className="dot"></span> IA lendo</span>
                  </div>
                  <div className="extracted-fields">
                    {extractedFields.map(f => (
                      <button key={f.id} className={confirmFields[f.id] ? 'on' : ''} onClick={() => toggleField(f.id)}>
                        <span className="cbx-mini">{confirmFields[f.id] && <Icon name="check" size={12} color="#fff" sw={2.8} />}</span>
                        <b>{f.title}</b>
                        <small>{f.value}</small>
                      </button>
                    ))}
                  </div>
                </div>
              ) : (
                <div className="blank-start">
                  <Icon name="spark" size={18} color="var(--green-600)" />
                  <div>
                    <b>Rascunho inteligente ativado</b>
                    <small>A Pago na Hora monta a primeira versão a partir de parte, escopo, valor e regras de pagamento.</small>
                  </div>
                </div>
              )}
            </div>}

            {party && <div className="contract-block">
              <div className="contract-block-head">
                <div>
                  <h3>Sugestões da IA</h3>
                  <p>Atalhos criados com base nos contratos que esta conta já subiu ou assinou.</p>
                </div>
                <span className="badge badge-gray">aprende com uso</span>
              </div>
              <div className="suggestion-strip">
                {suggestions.map(s => (
                  <button key={s.id} onClick={() => applySuggestion(s)}>
                    <b>{s.title}</b>
                    <span>{s.text}</span>
                    <small>Usar sugestão</small>
                  </button>
                ))}
              </div>
            </div>}

            {party && <div className="contract-block">
              <div className="contract-block-head">
                <div>
                  <h3>Escopo e pagamento</h3>
                  <p>O contrato já sai conectado ao financeiro.</p>
                </div>
              </div>
              <div className="field-row">
                <div className="field" style={{ marginTop: 0 }}>
                  <label>Valor do acordo</label>
                  <input value={amount} onChange={e => setAmount(Number(e.target.value || 0))} />
                </div>
                <div className="field" style={{ marginTop: 0 }}>
                  <label>Data alvo</label>
                  <input value={due} onChange={e => setDue(e.target.value)} />
                </div>
              </div>
              <div className="field">
                <label>Como o pagamento acontece</label>
                <input value={payMode} onChange={e => setPayMode(e.target.value)} />
              </div>
              <div className="field">
                <label>Escopo resumido</label>
                <textarea rows="3" value={scope} onChange={e => setScope(e.target.value)} />
              </div>
            </div>}

            {party && <div className="contract-block">
              <div className="contract-block-head">
                <div>
                  <h3>Cláusulas inteligentes</h3>
                  <p>Ative regras que impactam pagamento, documentos e aprovação.</p>
                </div>
              </div>
              <div className="clause-grid">
                {clauseItems.map(c => (
                  <button key={c.id} className={clauses[c.id] ? 'on' : ''} onClick={() => toggleClause(c.id)}>
                    <span className="cbx-mini">{clauses[c.id] && <Icon name="check" size={12} color="#fff" sw={2.8} />}</span>
                    <b>{c.title}</b>
                    <small>{c.text}</small>
                  </button>
                ))}
              </div>
            </div>}
          </section>

          <aside className="contract-preview">
            {!party ? (
              <div className="preview-paper preview-empty">
                <Icon name="users" size={24} color="var(--blue-600)" />
                <h3>Selecione uma entidade para começar.</h3>
                <p>Depois aparecem importação de PDF, sugestões da IA, campos extraídos e preview do contrato.</p>
              </div>
            ) : (
            <div className="preview-paper">
              <div className="paper-top">
                <div>
                  <span>Contrato de serviço</span>
                  <h3>{source === 'import' ? 'Importado de PDF com campos extraídos' : 'Contrato criado do zero'}</h3>
                </div>
                <div className="score-ring" style={{ '--score': score + '%' }}>{score}<small>%</small></div>
              </div>
              <div className="paper-ai">
                <Icon name="spark" size={15} color="var(--blue-600)" />
                <span>{source === 'import' ? 'IA encontrou campos para confirmar antes da assinatura.' : 'IA vai gerar a primeira minuta a partir dos dados preenchidos.'}</span>
              </div>
              <div className="paper-parties">
                <div><small>Origem</small><b>{entity}</b></div>
                <Icon name="link" size={18} color="var(--blue-600)" />
                <div><small>Outra parte</small><b>{party ? party.name : 'Selecionar'}</b></div>
              </div>
              <div className="paper-line">
                <small>Escopo</small>
                <p>{scope}</p>
              </div>
              <div className="money-stack">
                <div><small>Valor</small><b>R$ {PNH.fmt(amount || 0)}</b></div>
                <div><small>Data alvo</small><b>{due}</b></div>
                <div><small>Regra de pagamento</small><b>{payMode}</b></div>
              </div>
              <div className="paper-line">
                <small>Cláusulas ativas</small>
                <div className="paper-tags">
                  {selectedClauses.map(c => <span key={c.id}>{c.title}</span>)}
                  {!selectedClauses.length && <span>Nenhuma cláusula extra</span>}
                </div>
              </div>
              <div className="paper-checks">
                <div><Icon name="check" size={14} color="var(--green-600)" sw={2.6} /> Documento pronto para revisão</div>
                <div><Icon name="check" size={14} color="var(--green-600)" sw={2.6} /> Fluxo de pagamento vinculado</div>
                <div><Icon name="clock" size={14} color="var(--amber)" sw={2.2} /> Assinatura pendente das partes</div>
              </div>
            </div>
            )}
            <div className="contract-actions">
              <button className="btn btn-ghost" onClick={onClose}>Salvar rascunho</button>
              <button className="btn btn-primary" disabled={!party} onClick={() => onDone({ party, source, amount, scope, due, payMode, readiness: score, clauses })}><Icon name="spark" size={15} color="#fff" /> Gerar contrato</button>
            </div>
          </aside>
        </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, payments = [] }) {
  if (!provider) return null;
  const pv = provider;
  const hist = 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, NewContract, DocumentsView, ProviderDrawer });