/* portal-cycles.jsx — Histórico de ciclos */

function PortalHistory() {
  const c = PORTAL_CONTRACT;
  return (
    <div className="content stack gap-5">
      <div>
        <h1 className="page-title">Histórico</h1>
        <div className="page-sub">Todos os ciclos do contrato 24 meses — entregas, faturas, extras pedidos.</div>
      </div>

      <div className="card">
        <h2 className="section-title">Cronologia · 8 ciclos trimestrais</h2>
        <div className="mt-4">
          <Timeline current={c.current}/>
        </div>
      </div>

      <div className="stack gap-3">
        {PORTAL_CYCLES.map(cy => (
          <CycleRow key={cy.q} cy={cy}/>
        ))}
      </div>
    </div>
  );
}

function CycleRow({ cy }) {
  const done = cy.state === 'delivered';
  const curr = cy.state === 'awaiting';
  const fut  = cy.state === 'future';
  const extrasEnriched = (cy.extras || []).map(([code, qty]) => {
    const p = CRM_PRODUCTS.find(x => x.code === code);
    return p ? { ...p, qty } : null;
  }).filter(Boolean);

  return (
    <div className="card" style={{ padding: 0, overflow:'hidden' }}>
      <div className="grid" style={{
        gridTemplateColumns: '160px 1fr 200px 140px',
        gap: 0,
        alignItems: 'stretch',
      }}>
        {/* LEFT: Cycle marker */}
        <div style={{
          padding: '22px 22px',
          background: done ? 'var(--clay)' : curr ? 'var(--tobacco)' : 'var(--surface-2)',
          color: done ? 'var(--bone)' : curr ? 'var(--sand)' : 'var(--ink-3)',
          borderRight: '0.5px solid var(--rule-2)',
        }}>
          <div className="smallcaps" style={{color:'inherit', opacity:0.7}}>Ciclo</div>
          <div className="display" style={{ fontSize: 36, lineHeight: 1, marginTop: 8 }}>{cy.label}</div>
          <div className="mono mt-3" style={{ fontSize: 11, opacity: 0.8 }}>{cy.date}</div>
        </div>

        {/* MID: status + extras */}
        <div style={{ padding: '20px 24px', borderRight:'0.5px solid var(--rule-2)' }}>
          <div className="row gap-3">
            {done && <span className="badge delivered"><span className="dot" style={{background:'var(--moss)'}}/>Entregue</span>}
            {curr && <span className="badge pending"><span className="dot"/>Extras pendentes</span>}
            {fut  && <span className="badge ended"><span className="dot"/>Futuro</span>}
            {cy.delivery && (
              <span className="ink-3 mono" style={{fontSize:11}}>
                {cy.delivery.carrier} · {cy.delivery.boxes} caixas · {cy.delivery.date}
              </span>
            )}
          </div>

          {extrasEnriched.length > 0 && (
            <div className="mt-3">
              <div className="smallcaps">Extras deste ciclo</div>
              <div className="row gap-3 mt-2" style={{flexWrap:'wrap'}}>
                {extrasEnriched.map(e => (
                  <div key={e.code} style={{
                    fontSize: 12, padding: '4px 10px', borderRadius: 4,
                    background:'var(--surface-2)', border:'0.5px solid var(--rule-2)',
                  }}>
                    {e.name} <span className="ink-3 mono">×{e.qty}</span>
                  </div>
                ))}
              </div>
            </div>
          )}

          {curr && (
            <div className="mt-3 italic-serif ink-3" style={{fontSize:13}}>
              A correr · confirma extras até {PORTAL_D7_DATE}.
            </div>
          )}

          {fut && (
            <div className="mt-3 ink-3" style={{fontSize:12}}>
              Abrirá <span className="mono">{cy.date}</span>. Receberás email para confirmar extras.
            </div>
          )}

          {done && cy.delivery?.tracking && (
            <div className="mt-3 mono ink-3" style={{ fontSize: 11 }}>
              tracking · <span style={{ color: 'var(--clay)' }}>{cy.delivery.tracking}</span>
            </div>
          )}
        </div>

        {/* INVOICE */}
        <div style={{ padding: '20px 20px', borderRight:'0.5px solid var(--rule-2)' }}>
          <div className="smallcaps">Fatura</div>
          {cy.invoice ? (
            <>
              <div className="mono mt-2" style={{fontSize:13}}>{cy.invoice}</div>
              <div className="display tab mt-1" style={{ fontSize: 19 }}>{CRM_FMT_EUR(cy.value)}</div>
            </>
          ) : (
            <div className="ink-3 mt-2" style={{ fontSize: 12 }}>{curr ? 'Emite-se a 15.09' : 'Por emitir'}</div>
          )}
        </div>

        {/* ACTIONS */}
        <div style={{ padding: '20px 20px', display:'flex', flexDirection:'column', justifyContent:'center', gap:8 }}>
          {done && (
            <>
              <button className="btn outline sm"><Icon k="download" size={12}/> Fatura</button>
              <button className="btn ghost sm">Repetir extras</button>
            </>
          )}
          {curr && <button className="btn clay sm">Rever ciclo</button>}
          {fut && <span className="ink-3" style={{ fontSize: 12, textAlign:'center' }}>—</span>}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { PortalHistory });