/* portal-billing.jsx — Faturas + Mandato SEPA */

function PortalBilling({ suspended, onOpenIban }) {
  const invoices = PORTAL_CYCLES.filter(c => c.invoice).map(c => ({
    ...c,
    period: c.label + ' 2025',
    issued: c.date,
    state: 'paid',
  }));

  const totalPaid = invoices.reduce((s, i) => s + i.value, 0);
  const s = PORTAL_SUSPENDED;

  return (
    <div className="content stack gap-5">
      <div>
        <h1 className="page-title">Faturas & Pagamento</h1>
        <div className="page-sub">
          {suspended
            ? <>Cobrança Q3 falhou em {s.failedOn} — resolve para o ciclo voltar a correr.</>
            : <>Hist\u00f3rico de faturação e estado do mandato SEPA.</>}
        </div>
      </div>

      {/* Failed-payment hero (suspended only) */}
      {suspended && (
        <div className="card" style={{
          background: 'linear-gradient(to right, rgba(150,63,37,0.06), rgba(150,63,37,0.02))',
          borderColor: 'var(--clay-deep)',
          padding: '24px 26px',
        }}>
          <div className="grid gap-4" style={{ gridTemplateColumns: '1.5fr 1fr', alignItems: 'flex-start' }}>
            <div>
              <div className="row gap-3" style={{ alignItems: 'center' }}>
                <div style={{
                  width: 36, height: 36, borderRadius: '50%',
                  background: 'var(--clay-deep)', color: 'var(--bone)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontFamily: 'var(--display)', fontSize: 20,
                  flexShrink: 0,
                }}>!</div>
                <div>
                  <div className="smallcaps" style={{ color:'var(--clay-deep)' }}>Em dívida · cobrança bloqueada</div>
                  <h2 className="section-title mt-1" style={{ fontSize: 22 }}>
                    Fatura {s.invoice} · ciclo Q3 2025
                  </h2>
                </div>
              </div>

              <div className="grid gap-4 mt-4" style={{ gridTemplateColumns: 'repeat(3, 1fr)' }}>
                <div>
                  <div className="smallcaps">Valor</div>
                  <div className="display tab" style={{ fontSize: 24, color: 'var(--clay-deep)', marginTop: 4 }}>{CRM_FMT_EUR(s.amount)}</div>
                </div>
                <div>
                  <div className="smallcaps">Falhou em</div>
                  <div className="mono mt-2" style={{ fontSize: 14 }}>{s.failedOn}</div>
                </div>
                <div>
                  <div className="smallcaps">Motivo do banco</div>
                  <div className="mono mt-2" style={{ fontSize: 13 }}>{s.reasonCode}</div>
                  <div className="ink-3" style={{ fontSize: 10.5, marginTop: 2 }}>{s.reasonLabel}</div>
                </div>
              </div>

              {/* Retry timeline */}
              <div className="mt-4">
                <div className="smallcaps">Histórico de tentativas</div>
                <div className="stack gap-2 mt-2">
                  {s.retries.map((r, i) => (
                    <div key={i} className="row gap-3" style={{ alignItems: 'center', fontSize: 12.5 }}>
                      <div className="mono" style={{
                        width: 56, color: 'var(--ink-3)',
                      }}>{r.date}</div>
                      <div style={{
                        width: 8, height: 8, borderRadius: '50%',
                        background: 'var(--clay-deep)',
                      }}/>
                      <span style={{ flex: 1 }}>{r.label}</span>
                      <span className="mono ink-3">{r.code}</span>
                    </div>
                  ))}
                  <div className="row gap-3" style={{ alignItems: 'center', fontSize: 12.5, opacity: 0.7 }}>
                    <div className="mono" style={{ width: 56, color: 'var(--clay)' }}>25 SET</div>
                    <div style={{
                      width: 8, height: 8, borderRadius: '50%',
                      border: '0.5px dashed var(--clay)', background: 'transparent',
                    }}/>
                    <span style={{ flex: 1, color: 'var(--clay)' }}>Tentativa 4 · após atualizar IBAN</span>
                    <span className="mono ink-3">aguarda</span>
                  </div>
                </div>
              </div>
            </div>

            {/* Resolve panel */}
            <div className="card" style={{ background: 'var(--bone)', padding: '18px 20px' }}>
              <div className="smallcaps">Como resolver</div>
              <div className="italic-serif mt-2" style={{ fontSize: 14, color:'var(--ink-2)', lineHeight: 1.5 }}>
                Escolhe um caminho — voltamos a tentar 3 dias depois.
              </div>
              <div className="stack gap-2 mt-3">
                <button className="btn clay lg" style={{ justifyContent: 'center' }} onClick={onOpenIban}>
                  <Icon k="sepa" size={14}/> Atualizar IBAN
                </button>
                <button className="btn outline" style={{ justifyContent: 'center' }}>
                  <Icon k="download" size={13}/> Pagar por transferência
                </button>
                <button className="btn ghost sm" style={{ justifyContent: 'center', marginTop: 4 }}>
                  Falar com Jorge
                </button>
              </div>
              <div className="ink-3 mt-3" style={{ fontSize: 11, lineHeight: 1.55, textAlign: 'center' }}>
                Encomenda em standby até {s.deadline}.<br/>
                Sem stress — Jorge fica a par.
              </div>
            </div>
          </div>
        </div>
      )}

      {/* KPI row */}
      <div className="grid gap-4" style={{ gridTemplateColumns: 'repeat(3, 1fr)' }}>
        <div className="card">
          <div className="smallcaps">Pago até hoje</div>
          <div className="display tab mt-2" style={{ fontSize: 32, lineHeight: 1 }}>{CRM_FMT_EUR(totalPaid)}</div>
          <div className="ink-3 mt-1" style={{ fontSize: 11 }}>{invoices.length} faturas · 2 ciclos</div>
        </div>
        <div className="card">
          <div className="smallcaps">{suspended ? 'Em dívida' : 'Próxima cobrança'}</div>
          <div className="display tab mt-2" style={{
            fontSize: 32, lineHeight: 1,
            color: suspended ? 'var(--clay-deep)' : 'var(--clay)',
          }}>{CRM_FMT_EUR(PORTAL_CONTRACT.value)}</div>
          <div className="ink-3 mt-1" style={{ fontSize: 11 }}>
            {suspended ? `Q3 · falhou em ${s.failedOn}` : `${PORTAL_CHARGE_DATE} · SEPA automático`}
          </div>
        </div>
        <div className="card">
          <div className="smallcaps">Mandato SEPA</div>
          <div className="mt-2">
            {suspended
              ? <span className="badge failed"><span className="dot"/>Ativo · a falhar</span>
              : <span className="badge charged"><span className="dot"/>Ativo · validado</span>}
          </div>
          <div className="ink-3 mt-3 mono" style={{ fontSize: 11.5 }}>desde {PORTAL_MANDATE.signed}</div>
        </div>
      </div>

      {/* Mandate detail */}
      <div className="card tobacco" style={{ padding: '24px 26px' }}>
        <div className="grid" style={{ gridTemplateColumns: '1fr 1fr 1fr', gap: 24, alignItems:'flex-start' }}>
          <div>
            <div className="smallcaps">Mandato</div>
            <div className="display mt-2" style={{ fontSize: 18, color: 'var(--sand)' }}>{PORTAL_MANDATE.ref}</div>
            <div className="ink-3 mt-1" style={{ fontSize: 11.5 }}>{PORTAL_MANDATE.provider} · assinado {PORTAL_MANDATE.signed}</div>
          </div>
          <div>
            <div className="smallcaps">IBAN</div>
            <div className="mono mt-2" style={{
              fontSize: 14, color:'var(--bone)',
              textDecoration: suspended ? 'line-through' : 'none',
              opacity: suspended ? 0.65 : 1,
            }}>{PORTAL_MANDATE.iban}</div>
            <div className="ink-3 mt-1" style={{ fontSize: 11.5 }}>{PORTAL_MANDATE.bank}</div>
          </div>
          <div style={{ textAlign: 'right' }}>
            <div className="smallcaps">{suspended ? 'Próxima tentativa' : 'Próxima execução'}</div>
            <div className="mono mt-2" style={{
              fontSize: 14,
              color: suspended ? '#ffb98a' : 'var(--bone)',
              fontWeight: suspended ? 600 : 400,
            }}>{suspended ? '25 SET 2025' : PORTAL_CHARGE_DATE}</div>
            <div className="mt-3 row gap-2" style={{ justifyContent: 'flex-end' }}>
              <button className="btn outline sm" style={{ color: 'var(--sand)', borderColor: 'rgba(201,166,97,0.4)' }} onClick={onOpenIban}>
                Atualizar IBAN
              </button>
            </div>
          </div>
        </div>
      </div>

      {/* Invoice table */}
      <div>
        <div className="flex between items-c" style={{ marginBottom: 12 }}>
          <h2 className="section-title">Faturas emitidas</h2>
          <div className="row gap-2">
            <span className="pill active">Todas <span className="count">{invoices.length + 1}</span></span>
            <span className="pill">Pagas <span className="count">{invoices.length}</span></span>
            <span className="pill">{suspended ? 'Falhadas' : 'Pendentes'} <span className="count">{suspended ? 1 : 0}</span></span>
          </div>
        </div>
        <div style={{ border: '0.5px solid var(--rule)', borderRadius: 6, overflow: 'hidden', background:'var(--bone)' }}>
          <table className="t">
            <thead>
              <tr>
                <th style={{ width: 140 }}>Nº fatura</th>
                <th style={{ width: 110 }}>Data</th>
                <th>Período</th>
                <th style={{ width: 150 }}>Estado</th>
                <th className="num" style={{ width: 130 }}>Valor</th>
                <th style={{ width: 80 }}/>
              </tr>
            </thead>
            <tbody>
              {/* Failed Q3 row, pinned to top in suspended mode */}
              {suspended && (
                <tr style={{ background: 'rgba(150,63,37,0.06)' }}>
                  <td className="mono" style={{ color: 'var(--clay-deep)', fontWeight: 600 }}>{s.invoice}</td>
                  <td className="mono tab" style={{ fontSize: 11.5 }}>15.09.2025</td>
                  <td>Ciclo Q3 2025</td>
                  <td><span className="badge failed"><span className="dot"/>Falhou · {s.reasonCode}</span></td>
                  <td className="num" style={{ fontWeight: 600, color: 'var(--clay-deep)' }}>{CRM_FMT_EUR(s.amount)}</td>
                  <td>
                    <div className="row gap-1">
                      <button className="btn ghost sm" style={{ padding:'0 6px' }} title="Descarregar PDF">
                        <Icon k="download" size={13}/>
                      </button>
                      <button className="btn clay sm" onClick={onOpenIban} title="Resolver">
                        Resolver
                      </button>
                    </div>
                  </td>
                </tr>
              )}

              {invoices.map(inv => (
                <tr key={inv.invoice}>
                  <td className="mono">{inv.invoice}</td>
                  <td className="mono tab" style={{ fontSize: 11.5 }}>{inv.issued}</td>
                  <td>Ciclo {inv.period}</td>
                  <td><span className="badge charged"><span className="dot"/>Paga · SEPA</span></td>
                  <td className="num" style={{ fontWeight: 600 }}>{CRM_FMT_EUR(inv.value)}</td>
                  <td>
                    <div className="row gap-1">
                      <button className="btn ghost sm" style={{ padding:'0 6px' }} title="Descarregar PDF">
                        <Icon k="download" size={13}/>
                      </button>
                      <button className="btn ghost sm" style={{ padding:'0 6px' }} title="Detalhe">
                        <Icon k="chevron-r" size={13}/>
                      </button>
                    </div>
                  </td>
                </tr>
              ))}

              {/* Upcoming (only when active) */}
              {!suspended && (
                <tr style={{ background:'var(--surface-2)' }}>
                  <td className="mono ink-3">por emitir</td>
                  <td className="mono tab ink-3" style={{ fontSize: 11.5 }}>{PORTAL_CHARGE_DATE.toLowerCase()}</td>
                  <td className="ink-3">Ciclo Q3 2025</td>
                  <td><span className="badge pending"><span className="dot"/>Agendada</span></td>
                  <td className="num ink-3" style={{ fontWeight: 500 }}>{CRM_FMT_EUR(PORTAL_CONTRACT.value)}</td>
                  <td></td>
                </tr>
              )}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { PortalBilling });