/* SCREEN 3 — Finance aging report (desktop)
   User: Patrícia Mota, C&C specialist.
   Aging table + per-row Digi AI actions + side panel of critical clients. */

const FinanceiroScreen = ({ variation = 'balanced', onOpenChat }) => {
  const rows = [
    { client: 'Olimpo Lda', brand: 'Mimaki', amount: 12400, days: 14, bucket: '0-30', risk: 'high', docs: 2, dso: 56, trend: 'up' },
    { client: 'Meta Print SA', brand: 'BIOND', amount: 28900, days: 47, bucket: '30-60', risk: 'critical', docs: 5, dso: 74, trend: 'up' },
    { client: 'Sigma Visual', brand: 'Mimaki', amount: 8720, days: 22, bucket: '0-30', risk: 'medium', docs: 1, dso: 38, trend: 'down' },
    { client: 'Tipografia Norte', brand: 'Decal', amount: 4100, days: 8, bucket: '0-30', risk: 'low', docs: 1, dso: 29, trend: 'flat' },
    { client: 'GráficaSul', brand: 'Mimaki', amount: 17200, days: 62, bucket: '60-90', risk: 'critical', docs: 3, dso: 88, trend: 'up' },
    { client: 'ArtePrint', brand: 'Sensek', amount: 2340, days: 5, bucket: '0-30', risk: 'low', docs: 1, dso: 22, trend: 'flat' },
    { client: 'VisualMax Lda', brand: 'AllDecor', amount: 19800, days: 91, bucket: '90+', risk: 'critical', docs: 4, dso: 112, trend: 'up' },
    { client: 'Imprensa Central', brand: 'BIOND', amount: 6800, days: 18, bucket: '0-30', risk: 'medium', docs: 2, dso: 41, trend: 'flat' },
  ];

  const riskColor = { low: 'var(--success)', medium: 'var(--warning)', high: 'var(--danger)', critical: 'var(--danger)' };

  return (
    <div style={{ padding: 'var(--pad-screen)', display: 'flex', flexDirection: 'column', gap: 'var(--gap-section)' }}>
      <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 16 }}>
        <div>
          <div style={{ fontSize: 11, color: 'var(--text-dim)', fontFamily: 'var(--font-mono)', letterSpacing: '0.08em' }}>FINANCEIRO · CRÉDITO & COBRANÇAS</div>
          <h2 className="font-display" style={{ margin: '6px 0 0', fontSize: 28, fontWeight: 500, letterSpacing: '-0.01em' }}>
            Aging report <span style={{ color: 'var(--text-muted)', fontWeight: 400 }}>· Abril 2026</span>
          </h2>
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          <button className="btn btn-sm"><Icon name="refresh" size={13} />Sincronizar ERP</button>
          <button className="btn btn-sm btn-primary"><Icon name="download" size={13} />Exportar</button>
        </div>
      </div>

      {/* KPI strip */}
      <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr 1fr 1fr', gap: 14 }}>
        <div className="card kpi">
          <div className="kpi-label">Total em atraso</div>
          <div className="kpi-value">€ 342.890</div>
          <div style={{ display: 'flex', gap: 12, marginTop: 10, fontSize: 11 }}>
            {[['0-30', 94, 'var(--success)'], ['30-60', 108, 'var(--warning)'], ['60-90', 68, 'var(--danger)'], ['90+', 73, 'var(--danger)']].map(([l, k, c], i) => (
              <div key={i} style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
                <div style={{ fontFamily: 'var(--font-mono)', color: 'var(--text-dim)' }}>{l}d</div>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 14 }}>€{k}k</div>
                <div style={{ width: 48, height: 3, borderRadius: 2, background: c, opacity: 0.7 }} />
              </div>
            ))}
          </div>
        </div>
        <div className="card kpi">
          <div className="kpi-label">DSO</div>
          <div className="kpi-value">56 <span style={{ fontSize: 16, color: 'var(--text-muted)' }}>dias</span></div>
          <div className="kpi-delta" style={{ color: 'var(--danger)' }}><Icon name="arrowUp" size={12} />+4d vs. mês ant.</div>
        </div>
        <div className="card kpi">
          <div className="kpi-label">Cobrado este mês</div>
          <div className="kpi-value">€ 187.420</div>
          <div className="kpi-delta" style={{ color: 'var(--success)' }}><Icon name="arrowUp" size={12} />+12,4%</div>
        </div>
        <div className="card kpi">
          <div className="kpi-label">Clientes críticos</div>
          <div className="kpi-value">7 <span style={{ fontSize: 16, color: 'var(--text-muted)' }}>/ 214</span></div>
          <div className="kpi-delta" style={{ color: 'var(--text-muted)' }}><Icon name="flag" size={12} />3 novos esta semana</div>
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 320px', gap: 14 }}>
        {/* Aging table */}
        <div className="card" style={{ padding: 0, overflow: 'hidden' }}>
          {/* Filters */}
          <div style={{ padding: 14, borderBottom: '1px solid var(--border)', display: 'flex', gap: 8, alignItems: 'center', flexWrap: 'wrap' }}>
            <span style={{ fontSize: 11, color: 'var(--text-dim)', fontFamily: 'var(--font-display)', fontWeight: 600, letterSpacing: '0.08em', marginRight: 4 }}>FILTROS</span>
            {[
              { l: 'Digidelta PT', k: 'company' },
              { l: 'Todas as marcas', k: 'brand' },
              { l: 'Todas as idades', k: 'age' },
              { l: 'Risco ≥ médio', k: 'risk', active: true },
            ].map(f => (
              <button key={f.k} className="btn btn-xs" style={f.active ? { borderColor: 'var(--brand-900)', background: 'var(--brand-900)', color: '#fff' } : {}}>
                {f.l}<Icon name="chevron" size={10} />
              </button>
            ))}
            <div style={{ flex: 1 }} />
            <div style={{ display: 'flex', gap: 6, padding: '5px 10px', border: '1px solid var(--border)', borderRadius: 8, alignItems: 'center', background: 'var(--surface-muted)' }}>
              <Icon name="search" size={12} style={{ color: 'var(--text-dim)' }} />
              <input placeholder="Cliente ou fatura…" style={{ border: 0, background: 'transparent', outline: 'none', fontSize: 12, width: 160 }} />
            </div>
          </div>

          <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13 }}>
            <thead>
              <tr style={{ background: 'var(--surface-muted)', textAlign: 'left' }}>
                {['Cliente', 'Marca', 'Valor', 'Dias', 'Faixa', 'DSO', 'Tendência', 'Ações Digi AI'].map(h => (
                  <th key={h} style={{ padding: '10px 14px', fontSize: 10, fontFamily: 'var(--font-display)', fontWeight: 600, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--text-muted)', borderBottom: '1px solid var(--border)' }}>{h}</th>
                ))}
              </tr>
            </thead>
            <tbody>
              {rows.map((r, i) => (
                <tr key={r.client} style={{ borderBottom: '1px solid var(--border)' }}>
                  <td style={{ padding: '12px 14px' }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                      <div style={{ width: 4, alignSelf: 'stretch', borderRadius: 2, background: riskColor[r.risk], minHeight: 28 }} />
                      <div>
                        <div style={{ fontWeight: 500 }}>{r.client}</div>
                        <div style={{ fontSize: 10, color: 'var(--text-dim)', fontFamily: 'var(--font-mono)' }}>{r.docs} faturas · FT 2026/{1800 + i}</div>
                      </div>
                    </div>
                  </td>
                  <td style={{ padding: '12px 14px' }}><span className="badge">{r.brand}</span></td>
                  <td style={{ padding: '12px 14px', fontFamily: 'var(--font-display)', fontWeight: 600 }}>€ {r.amount.toLocaleString('pt-PT')}</td>
                  <td style={{ padding: '12px 14px', fontFamily: 'var(--font-mono)', color: r.days > 60 ? 'var(--danger)' : r.days > 30 ? 'color-mix(in oklch, var(--warning) 80%, #000)' : 'var(--text)' }}>{r.days}d</td>
                  <td style={{ padding: '12px 14px' }}>
                    <span className={`badge ${r.bucket === '90+' || r.bucket === '60-90' ? 'badge-danger' : r.bucket === '30-60' ? 'badge-warning' : ''}`} style={{ fontFamily: 'var(--font-mono)' }}>{r.bucket}d</span>
                  </td>
                  <td style={{ padding: '12px 14px', fontFamily: 'var(--font-mono)', fontSize: 12 }}>{r.dso}d</td>
                  <td style={{ padding: '12px 14px' }}>
                    <Icon name={r.trend === 'up' ? 'arrowUp' : r.trend === 'down' ? 'arrowDown' : 'arrowRight'} size={14} style={{ color: r.trend === 'up' ? 'var(--danger)' : r.trend === 'down' ? 'var(--success)' : 'var(--text-dim)' }} />
                  </td>
                  <td style={{ padding: '10px 14px' }}>
                    <div style={{ display: 'flex', gap: 4 }}>
                      <button className="btn btn-xs" title="Ligar"><Icon name="phone" size={10} />Ligar</button>
                      <button className="btn btn-xs" title="Enviar lembrete"><Icon name="mail" size={10} />Lembrete</button>
                      {(r.risk === 'high' || r.risk === 'critical') && (
                        <button className="btn btn-xs" style={{ background: 'var(--ai-tint)', borderColor: 'color-mix(in oklch, var(--ai-500) 35%, transparent)', color: 'var(--ai-700)' }}>
                          <Icon name="escalate" size={10} />Escalar Comercial
                        </button>
                      )}
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
          <div style={{ padding: 12, display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: 12, color: 'var(--text-muted)' }}>
            <span>8 de 214 clientes com atraso · ordenado por dias em atraso</span>
            <div style={{ display: 'flex', gap: 4 }}>
              <button className="btn btn-xs">← Anterior</button>
              <button className="btn btn-xs">Seguinte →</button>
            </div>
          </div>
        </div>

        {/* Side panel: critical clients */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          <div className="ai-surface card" style={{ padding: 16 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
              <span className="ai-chip"><span className="ai-dot" />Digi AI · resumo</span>
            </div>
            <div style={{ fontSize: 13, lineHeight: 1.55 }}>
              DSO subiu <strong>+4 dias</strong>. <strong>3 clientes</strong> explicam 68% da subida. Recomendo credit review urgente em <strong>VisualMax Lda</strong> (91d) antes da próxima encomenda.
            </div>
            <div style={{ display: 'flex', gap: 6, marginTop: 10 }}>
              <button className="btn btn-xs btn-ai" onClick={onOpenChat}>Abrir análise completa</button>
            </div>
          </div>

          <div className="card" style={{ padding: 0, overflow: 'hidden' }}>
            <div style={{ padding: '12px 14px', borderBottom: '1px solid var(--border)', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
              <div style={{ fontSize: 11, color: 'var(--text-dim)', fontFamily: 'var(--font-display)', fontWeight: 600, letterSpacing: '0.08em' }}>CLIENTES CRÍTICOS</div>
              <span className="badge badge-danger">7</span>
            </div>
            {[
              { n: 'VisualMax Lda', a: '€19.800', d: '91d', note: 'Sem resposta a 2 lembretes' },
              { n: 'GráficaSul', a: '€17.200', d: '62d', note: 'Proposta acordo de pagamento' },
              { n: 'Meta Print SA', a: '€28.900', d: '47d', note: 'Credit review em curso' },
            ].map(c => (
              <button key={c.n} style={{ width: '100%', textAlign: 'left', padding: '12px 14px', borderBottom: '1px solid var(--border)', display: 'flex', flexDirection: 'column', gap: 4 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                  <span style={{ fontWeight: 500, fontSize: 13 }}>{c.n}</span>
                  <span className="font-display" style={{ fontWeight: 600 }}>{c.a}</span>
                </div>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                  <span style={{ fontSize: 11, color: 'var(--text-muted)' }}>{c.note}</span>
                  <span className="badge badge-danger" style={{ fontFamily: 'var(--font-mono)' }}>{c.d}</span>
                </div>
              </button>
            ))}
          </div>

          <div className="card" style={{ padding: 14 }}>
            <div style={{ fontSize: 11, color: 'var(--text-dim)', fontFamily: 'var(--font-display)', fontWeight: 600, letterSpacing: '0.08em', marginBottom: 8 }}>ALERTAS CRUZADOS</div>
            <div style={{ fontSize: 12, lineHeight: 1.55, color: 'var(--text-muted)' }}>
              <strong style={{ color: 'var(--text)' }}>Comercial</strong> avisou que Olimpo Lda pediu nova proposta UJV200. Bloqueio preventivo ativo.
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

window.FinanceiroLegacyAging = FinanceiroScreen;