/* crm-billing.jsx — Faturação · Stripe ↔ TOConline reconciliation */

// Generate reconciliation data from contracts
const RECON_ITEMS = [
  {stripeId:'ch_3PYwT2Aa', toconlineId:'F2026/0431', contract:'HTL-26-0142', date:'15.09.2026', value:3842.00, status:'matched',     issues:null},
  {stripeId:'ch_3PYwS9Bb', toconlineId:'F2026/0430', contract:'HTL-26-0151', date:'14.09.2026', value:3120.00, status:'matched',     issues:null},
  {stripeId:'ch_3PYwR1Cc', toconlineId:'F2026/0429', contract:'GYM-26-0073', date:'12.09.2026', value:920.00,  status:'matched',     issues:null},
  {stripeId:'ch_3PYwQ8Dd', toconlineId:'F2026/0428', contract:'HTL-26-0166', date:'10.09.2026', value:5680.00, status:'matched',     issues:null},
  {stripeId:'ch_3PYwP3Ee', toconlineId:'—',         contract:'BRB-26-0114', date:'09.09.2026', value:480.00,  status:'failed',      issues:'IBAN sem provisão'},
  {stripeId:'ch_3PYwO5Ff', toconlineId:'F2026/0427', contract:'SPA-26-0091', date:'08.09.2026', value:1280.00, status:'matched',     issues:null},
  {stripeId:'ch_3PYwN2Gg', toconlineId:'F2026/0426', contract:'BRB-26-0092', date:'08.09.2026', value:540.00,  status:'mismatch',    issues:'Diferença +20,00 €'},
  {stripeId:'ch_3PYwM7Hh', toconlineId:'F2026/0425', contract:'GYM-26-0131', date:'06.09.2026', value:1120.00, status:'matched',     issues:null},
  {stripeId:'ch_3PYwL4Ii', toconlineId:'—',         contract:'BRB-26-0058', date:'05.09.2026', value:620.00,  status:'pending',     issues:'Aguarda emissão TOConline'},
  {stripeId:'—',          toconlineId:'F2026/0424', contract:'GYM-26-0102', date:'04.09.2026', value:480.00,  status:'orphan',      issues:'Fatura sem charge correspondente'},
  {stripeId:'ch_3PYwK9Jj', toconlineId:'F2026/0423', contract:'HTL-25-0021', date:'03.09.2026', value:4110.00, status:'matched',     issues:null},
  {stripeId:'ch_3PYwJ6Kk', toconlineId:'F2026/0422', contract:'SPA-26-0061', date:'02.09.2026', value:1640.00, status:'matched',     issues:null},
  {stripeId:'ch_3PYwI3Ll', toconlineId:'F2026/0421', contract:'BRB-26-0079', date:'31.08.2026', value:780.00,  status:'matched',     issues:null},
  {stripeId:'ch_3PYwH8Mm', toconlineId:'F2026/0420', contract:'GYM-26-0118', date:'30.08.2026', value:380.00,  status:'matched',     issues:null},
];

const RECON_LABELS = {
  matched:  {label:'Reconciliado', cls:'charged'},
  pending:  {label:'Pendente',     cls:'pending'},
  mismatch: {label:'Divergência',  cls:'pending'},
  failed:   {label:'Falha SEPA',   cls:'failed'},
  orphan:   {label:'Órfã',         cls:'pending'},
};

function Billing() {
  const [filter, setFilter] = React.useState('all');

  const counts = React.useMemo(() => {
    const c = {all: RECON_ITEMS.length};
    Object.keys(RECON_LABELS).forEach(k => { c[k] = RECON_ITEMS.filter(x => x.status === k).length; });
    return c;
  }, []);

  let list = RECON_ITEMS;
  if (filter !== 'all') list = list.filter(x => x.status === filter);

  const totalMatched = RECON_ITEMS.filter(x => x.status === 'matched').reduce((s, x) => s + x.value, 0);
  const totalIssues = RECON_ITEMS.filter(x => x.status !== 'matched').reduce((s, x) => s + x.value, 0);

  return (
    <div className="content stack gap-5">
      <div className="flex between" style={{alignItems:'flex-end'}}>
        <div>
          <h1 className="page-title">Faturação</h1>
          <div className="page-sub">Reconciliação Stripe ↔ TOConline · setembro 2026 · {RECON_ITEMS.length} registos</div>
        </div>
        <div className="row gap-2">
          <button className="btn outline sm"><Icon k="download" size={13}/> Export reconciliação</button>
          <button className="btn primary sm">Sincronizar agora</button>
        </div>
      </div>

      {/* KPI */}
      <div className="grid gap-4" style={{gridTemplateColumns:'repeat(4, 1fr)'}}>
        <KPICard label="Faturado · setembro" value={CRM_FMT_EUR(totalMatched + totalIssues)} hint="14 ciclos" />
        <KPICard label="Reconciliadas"        value={counts.matched + ''} hint={CRM_FMT_EUR(totalMatched)} tone="moss"/>
        <KPICard label="Divergências"         value={counts.mismatch + ''} hint="manual review" tone="clay"/>
        <KPICard label="Falhas / órfãs"       value={(counts.failed + counts.orphan) + ''} hint={CRM_FMT_EUR(totalIssues)} tone="alert"/>
      </div>

      {/* Status integrations */}
      <div className="grid gap-4" style={{gridTemplateColumns:'1fr 1fr'}}>
        <div className="card">
          <div className="flex between items-c">
            <div className="row gap-3 items-c">
              <div style={{width:28, height:28, background:'#635bff', borderRadius:5, color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', fontWeight:700, fontSize:11, fontFamily:'var(--mono)'}}>S</div>
              <div>
                <div style={{fontWeight:600}}>Stripe</div>
                <div className="ink-3 mono" style={{fontSize:10.5}}>SEPA SDD · B2B</div>
              </div>
            </div>
            <span className="badge charged"><span className="dot"/>Ligado</span>
          </div>
          <hr style={{border:0, borderTop:'0.5px solid var(--rule-2)', margin:'14px 0'}}/>
          <div className="row between" style={{fontSize:12.5}}>
            <span className="ink-3">Última sync</span>
            <span className="mono tab">há 12 min · 14 charges</span>
          </div>
          <div className="row between mt-2" style={{fontSize:12.5}}>
            <span className="ink-3">Webhook endpoint</span>
            <span className="mono" style={{fontSize:11}}>…/stripe/wh</span>
          </div>
        </div>

        <div className="card">
          <div className="flex between items-c">
            <div className="row gap-3 items-c">
              <div style={{width:28, height:28, background:'var(--clay)', borderRadius:5, color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', fontWeight:700, fontSize:11, fontFamily:'var(--mono)'}}>T</div>
              <div>
                <div style={{fontWeight:600}}>TOConline</div>
                <div className="ink-3 mono" style={{fontSize:10.5}}>certificado AT · série F</div>
              </div>
            </div>
            <span className="badge charged"><span className="dot"/>Ligado</span>
          </div>
          <hr style={{border:0, borderTop:'0.5px solid var(--rule-2)', margin:'14px 0'}}/>
          <div className="row between" style={{fontSize:12.5}}>
            <span className="ink-3">Última fatura</span>
            <span className="mono tab">F2026/0431 · há 12 min</span>
          </div>
          <div className="row between mt-2" style={{fontSize:12.5}}>
            <span className="ink-3">Numeração série</span>
            <span className="mono">F · #420 → #431</span>
          </div>
        </div>
      </div>

      {/* Filter */}
      <div className="row gap-2" style={{flexWrap:'wrap'}}>
        <div className={'pill ' + (filter==='all' ? 'active' : '')} onClick={() => setFilter('all')}>
          Todos <span className="count">{counts.all}</span>
        </div>
        {['matched','pending','mismatch','failed','orphan'].map(k => counts[k] > 0 && (
          <div key={k} className={'pill ' + (filter===k ? 'active' : '')} onClick={() => setFilter(k)}>
            {RECON_LABELS[k].label} <span className="count">{counts[k]}</span>
          </div>
        ))}
      </div>

      {/* Recon table */}
      <div style={{border:'0.5px solid var(--rule)', borderRadius:6, overflow:'hidden', background:'var(--bone)'}}>
        <table className="t">
          <thead>
            <tr>
              <th style={{width:90}}>Data</th>
              <th style={{width:130}}>Stripe</th>
              <th style={{width:120}}>TOConline</th>
              <th style={{width:120}}>Contrato</th>
              <th>Cliente</th>
              <th className="num" style={{width:100}}>Valor</th>
              <th style={{width:130}}>Estado</th>
              <th style={{width:140}}>Ação</th>
            </tr>
          </thead>
          <tbody>
            {list.map((it, i) => {
              const cust = CRM_BY_ID[it.contract];
              const stat = RECON_LABELS[it.status];
              return (
                <tr key={i}>
                  <td className="mono tab" style={{fontSize:11.5}}>{it.date}</td>
                  <td className="mono" style={{fontSize:11, color: it.stripeId === '—' ? 'var(--ink-3)' : 'var(--ink-2)'}}>{it.stripeId}</td>
                  <td className="mono" style={{fontSize:11, color: it.toconlineId === '—' ? 'var(--ink-3)' : 'var(--ink-2)'}}>{it.toconlineId}</td>
                  <td className="id">{it.contract}</td>
                  <td>
                    <div style={{fontSize:13}}>{cust?.name}</div>
                    {it.issues && <div className="ink-3" style={{fontSize:11, marginTop:1, color: it.status==='failed'?'var(--clay-deep)':'var(--clay)'}}>{it.issues}</div>}
                  </td>
                  <td className="num" style={{fontWeight:600}}>{CRM_FMT_EUR(it.value)}</td>
                  <td><span className={'badge ' + stat.cls} style={{color: it.status==='failed'?'var(--clay-deep)':(it.status==='mismatch'||it.status==='orphan')?'var(--clay)':'var(--moss)'}}><span className="dot"/>{stat.label}</span></td>
                  <td>
                    <ReconAction status={it.status}/>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>

        {list.length === 0 && (
          <div style={{padding:'40px', textAlign:'center'}}>
            <div className="display ink-3" style={{fontSize:20, fontStyle:'italic'}}>Sem registos.</div>
          </div>
        )}
      </div>
    </div>
  );
}

function KPICard({label, value, hint, tone}) {
  const isAlert = tone === 'alert';
  const valColor = tone === 'moss' ? 'var(--moss)' : tone === 'clay' ? 'var(--clay)' : 'var(--ink)';
  return (
    <div className={'card' + (isAlert ? ' tobacco' : '')}>
      <div className="smallcaps">{label}</div>
      <div className="display tab" style={{fontSize:32, marginTop:6, lineHeight:1, color: isAlert ? 'var(--bone)' : valColor}}>{value}</div>
      <div className="mono mt-2" style={{fontSize:10.5, color: isAlert ? 'rgba(242,233,210,0.55)' : 'var(--ink-3)'}}>{hint}</div>
    </div>
  );
}

function ReconAction({status}) {
  if (status === 'matched')  return <span className="ink-3" style={{fontSize:11.5}}>—</span>;
  if (status === 'failed')   return <button className="btn danger sm">Retry SEPA</button>;
  if (status === 'mismatch') return <button className="btn outline sm">Resolver</button>;
  if (status === 'pending')  return <button className="btn outline sm">Emitir fatura</button>;
  if (status === 'orphan')   return <button className="btn outline sm">Reconciliar</button>;
  return null;
}

Object.assign(window, { Billing });