/* portal-extras.jsx — "Próximo ciclo" — the D-7 confirmation flow */

function PortalCycle({ onNav, suspended, onOpenIban }) {
  // Base quantities, mutable for this cycle
  const [base, setBase] = React.useState(() => PORTAL_BASE.map(p => ({ ...p, baseQty: p.qty })));
  // Extras: keyed by code -> qty
  const [extras, setExtras] = React.useState({});

  const setBaseQty = (code, q) => {
    setBase(b => b.map(p => p.code === code ? { ...p, qty: Math.max(0, q) } : p));
  };
  const setExtraQty = (code, q) => {
    setExtras(e => {
      const next = { ...e };
      if (q <= 0) delete next[code];
      else next[code] = q;
      return next;
    });
  };

  const catalog = CRM_PRODUCTS;

  // Totals
  const baseSubtotal = base.reduce((s, p) => s + p.price * p.qty, 0);
  const extrasSubtotal = Object.entries(extras).reduce((s, [code, q]) => {
    const p = catalog.find(x => x.code === code);
    return s + (p ? p.price * q : 0);
  }, 0);
  const subtotal = baseSubtotal + extrasSubtotal;
  const iva = subtotal * 0.23;
  const total = subtotal + iva;

  const hasChanges = base.some(p => p.qty !== p.baseQty) || Object.keys(extras).length > 0;

  return (
    <div className={'content stack gap-5' + (suspended ? ' is-suspended' : '')}>
      {/* Suspended overlay banner inline (in addition to the global one) */}
      {suspended && (
        <div className="card flat" style={{
          background: 'rgba(150,63,37,0.06)',
          borderColor: 'var(--clay-deep)',
          borderLeft: '3px solid var(--clay-deep)',
          padding: '16px 20px',
        }}>
          <div className="row gap-3" style={{ alignItems: 'flex-start' }}>
            <div style={{
              width: 28, height: 28, borderRadius: '50%',
              background: 'var(--clay-deep)', color: 'var(--bone)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontFamily: 'var(--display)', fontSize: 18, flexShrink: 0,
            }}>!</div>
            <div className="grow">
              <div style={{ fontFamily: 'var(--display)', fontSize: 17, letterSpacing: '-0.005em' }}>
                Ajustes deste ciclo estão em pausa
              </div>
              <div className="ink-3" style={{ fontSize: 12.5, marginTop: 4, lineHeight: 1.5 }}>
                A lista fechou em D-7 (08 SET) e a cobrança falhou em 15 SET.
                Reabre quando o débito for aceite e seguirmos para expedição.
                Próximas alterações · ciclo Q4 (DEZ 2025).
              </div>
            </div>
            <button className="btn clay" onClick={onOpenIban}>
              <Icon k="sepa" size={13}/> Resolver agora
            </button>
          </div>
        </div>
      )}

      {/* Header */}
      <div className="flex between" style={{ alignItems: 'flex-end' }}>
        <div>
          <div className="row gap-3" style={{ alignItems: 'baseline' }}>
            <h1 className="page-title">Ciclo Q3 · 2025</h1>
            <span className="smallcaps">
              {suspended ? 'Lista fechada · cobrança bloqueada' : 'Confirmação até ' + PORTAL_D7_DATE}
            </span>
          </div>
          <div className="page-sub" style={{ maxWidth: 720 }}>
            {suspended
              ? <>O ciclo está fechado para edição desde D-7. As quantidades mostradas são o que vai partir assim que a cobrança passar — podes ajustá-las no próximo ciclo.</>
              : <>Ajusta as quantidades da tua base para este ciclo, ou pede extras do catálogo. Após D-7
              a lista fecha e seguimos para cobrança ({PORTAL_CHARGE_DATE}) e expedição.</>}
          </div>
        </div>
        <div className="row gap-2">
          <button className="btn outline sm">
            <Icon k="download" size={13}/> Exportar lista (PDF)
          </button>
        </div>
      </div>

      {/* Timeline of the ritual */}
      <div className="card flat" style={{ background: 'var(--surface-2)' }}>
        <div className="grid" style={{ gridTemplateColumns: 'repeat(4, 1fr)', gap: 0 }}>
          {(suspended ? [
            { d:'08 SET', label:'D-7 · lista fechou', status:'done', note:'extras confirmados' },
            { d:'15 SET', label:'Cobrança SEPA',     status:'fail', note:'devolvido · AC04' },
            { d:'21 SET', label:'Retry 3 · falhou',   status:'fail', note:'aguarda novo IBAN' },
            { d:'~25 SET', label:'Próxima tentativa', status:'curr', note:'após IBAN atualizado' },
          ] : [
            { d:'01 SET', label:'Ciclo aberto',    status:'done',   note:'recebes este pedido' },
            { d:'08 SET', label:'D-7 · lista fecha', status:'curr', note:'última hora para extras' },
            { d:'15 SET', label:'Cobrança SEPA',    status:'fut',   note:'débito automático' },
            { d:'~19 SET', label:'Expedição CTT',   status:'fut',   note:'entrega 2–3 dias úteis' },
          ]).map((s, i) => (
            <div key={i} style={{
              padding:'14px 18px',
              borderLeft: i>0 ? '0.5px solid var(--rule-2)' : 'none',
            }}>
              <div className="row gap-2" style={{alignItems:'center'}}>
                <div style={{
                  width:10, height:10, borderRadius:'50%',
                  background: s.status==='done' ? 'var(--moss)'
                    : s.status==='curr' ? 'var(--clay)'
                    : s.status==='fail' ? 'var(--clay-deep)'
                    : 'transparent',
                  border: s.status==='fut' ? '0.5px dashed var(--rule)' : 'none',
                }}/>
                <div className="mono" style={{fontSize:11, color:'var(--ink-3)', letterSpacing:0.08}}>{s.d}</div>
              </div>
              <div className="mt-2" style={{
                fontSize:13.5,
                fontWeight: s.status==='curr' || s.status==='fail' ? 600 : 500,
                color: s.status==='fail' ? 'var(--clay-deep)' : 'inherit',
              }}>{s.label}</div>
              <div className="ink-3" style={{fontSize:11, marginTop:2}}>{s.note}</div>
            </div>
          ))}
        </div>
      </div>

      {/* Two-column layout: editor on left, basket on right */}
      <div className="grid gap-5" style={{ gridTemplateColumns: '1.55fr 1fr', alignItems: 'flex-start' }}>
        {/* LEFT: base + suggested + catalog */}
        <div className="stack gap-5">
          {/* Base */}
          <div>
            <div className="flex between items-c" style={{ marginBottom: 12 }}>
              <div>
                <h2 className="section-title">Linha base</h2>
                <div className="ink-3" style={{fontSize:12, marginTop:2}}>Acordada no contrato · ajustável para este ciclo</div>
              </div>
              <span className="badge"><span className="dot" style={{background:'var(--moss)'}}/>Contrato 24 m</span>
            </div>
            <div style={{ border: '0.5px solid var(--rule)', borderRadius: 6, overflow: 'hidden', background: 'var(--bone)' }}>
              <table className="t">
                <thead>
                  <tr>
                    <th>Produto · fragrância</th>
                    <th style={{ width: 150 }}>Formato</th>
                    <th className="num" style={{ width: 90 }}>Base</th>
                    <th style={{ width: 110, textAlign:'center' }}>Este ciclo</th>
                    <th className="num" style={{ width: 110 }}>Subtotal</th>
                  </tr>
                </thead>
                <tbody>
                  {base.map(p => (
                    <tr key={p.code}>
                      <td>
                        <div className="row gap-3" style={{ alignItems:'center' }}>
                          <div style={{
                            width: 32, height: 32, borderRadius: 4,
                            background: 'var(--surface-2)',
                            backgroundImage: 'repeating-linear-gradient(135deg, transparent 0 6px, rgba(168,106,61,0.08) 6px 7px)',
                            border: '0.5px solid var(--rule-2)',
                            flexShrink: 0,
                          }}/>
                          <div>
                            <div style={{ fontSize: 13, fontWeight: 500 }}>{p.name}</div>
                            <div className="italic-serif ink-3" style={{ fontSize: 11.5 }}>{p.scent}</div>
                          </div>
                        </div>
                      </td>
                      <td className="ink-3" style={{fontSize:12}}>{p.fmt}</td>
                      <td className="num ink-3">{p.baseQty}</td>
                      <td style={{ textAlign:'center' }}>
                        <Stepper value={p.qty} onChange={(v) => setBaseQty(p.code, v)} highlight={p.qty !== p.baseQty}/>
                      </td>
                      <td className="num" style={{ fontWeight: 600 }}>{CRM_FMT_EUR(p.price * p.qty)}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>

          {/* Suggested extras */}
          <div>
            <div className="flex between items-c" style={{ marginBottom: 12 }}>
              <div>
                <h2 className="section-title">Sugestões para Q3</h2>
                <div className="ink-3" style={{fontSize:12, marginTop:2}}>Baseado no teu histórico e na época</div>
              </div>
            </div>
            <div className="grid gap-3" style={{ gridTemplateColumns: 'repeat(2, 1fr)' }}>
              {PORTAL_SUGGESTED.map(s => {
                const p = catalog.find(x => x.code === s.code);
                if (!p) return null;
                const inCart = extras[p.code] || 0;
                return (
                  <div key={p.code} className="card flat" style={{ display:'flex', gap:14, alignItems:'flex-start' }}>
                    <div style={{
                      width: 52, height: 52, borderRadius: 4,
                      background: 'var(--surface-2)',
                      backgroundImage: 'repeating-linear-gradient(135deg, transparent 0 6px, rgba(168,106,61,0.08) 6px 7px)',
                      border: '0.5px solid var(--rule-2)',
                      flexShrink: 0,
                    }}/>
                    <div className="grow">
                      <div style={{ fontSize: 13, fontWeight: 500 }}>{p.name}</div>
                      <div className="italic-serif ink-3" style={{ fontSize: 11.5 }}>{p.scent}</div>
                      <div className="ink-3" style={{fontSize:11, marginTop:6, fontStyle:'italic'}}>{s.reason}</div>
                      <div className="row gap-3 mt-3" style={{alignItems:'center'}}>
                        <Stepper value={inCart} onChange={(v) => setExtraQty(p.code, v)} small/>
                        <span className="mono tab ink-3" style={{fontSize:11}}>{CRM_FMT_EUR(p.price)} / un.</span>
                      </div>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>

          {/* Full catalog (collapsed-ish) */}
          <div>
            <div className="flex between items-c" style={{ marginBottom: 12 }}>
              <div>
                <h2 className="section-title">Catálogo</h2>
                <div className="ink-3" style={{fontSize:12, marginTop:2}}>Tudo o que podes adicionar a este ciclo</div>
              </div>
              <div className="row gap-2">
                <span className="pill active">Todos <span className="count">{catalog.length}</span></span>
                <span className="pill">Cabelo</span>
                <span className="pill">Corpo</span>
                <span className="pill">Barba</span>
                <span className="pill">Vestuário</span>
              </div>
            </div>
            <div style={{ border: '0.5px solid var(--rule)', borderRadius: 6, overflow: 'hidden', background: 'var(--bone)' }}>
              <table className="t">
                <thead>
                  <tr>
                    <th>Produto</th>
                    <th style={{ width: 150 }}>Formato</th>
                    <th className="num" style={{ width: 90 }}>PU s/ IVA</th>
                    <th style={{ width: 130, textAlign:'center' }}>Adicionar</th>
                  </tr>
                </thead>
                <tbody>
                  {catalog.filter(p => !base.find(b => b.code === p.code)).map(p => {
                    const inCart = extras[p.code] || 0;
                    return (
                      <tr key={p.code}>
                        <td>
                          <div style={{ fontSize: 13, fontWeight: 500 }}>{p.name}</div>
                          <div className="italic-serif ink-3" style={{ fontSize: 11.5 }}>{p.scent}</div>
                        </td>
                        <td className="ink-3" style={{fontSize:12}}>{p.fmt}</td>
                        <td className="num mono tab">{CRM_FMT_EUR(p.price)}</td>
                        <td style={{ textAlign:'center' }}>
                          <Stepper value={inCart} onChange={(v) => setExtraQty(p.code, v)} small/>
                        </td>
                      </tr>
                    );
                  })}
                </tbody>
              </table>
            </div>
          </div>
        </div>

        {/* RIGHT: basket summary, sticky */}
        <div className="extras-sticky stack gap-3">
          <div className="card" style={{padding:'22px 22px'}}>
            <div className="smallcaps">Resumo · ciclo Q3</div>
            <div className="display tab mt-2" style={{ fontSize: 38, lineHeight: 1, color: 'var(--ink)' }}>{CRM_FMT_EUR(total)}</div>
            <div className="ink-3" style={{ fontSize: 11, marginTop: 4 }}>cobrança a {PORTAL_CHARGE_DATE} · IVA incluído</div>

            <hr className="divider" style={{ margin: '18px 0 14px' }}/>

            <div className="stack gap-2" style={{ fontSize: 13 }}>
              <div className="flex between" style={{whiteSpace:'nowrap', gap:12}}>
                <span className="ink-3">Base ({base.reduce((s,p)=>s+p.qty,0)} un.)</span>
                <span className="mono tab">{CRM_FMT_EUR(baseSubtotal)}</span>
              </div>
              <div className="flex between" style={{whiteSpace:'nowrap', gap:12}}>
                <span className="ink-3">Extras ({Object.values(extras).reduce((s,v)=>s+v,0)} un.)</span>
                <span className="mono tab" style={{color: extrasSubtotal>0 ? 'var(--clay)' : 'inherit'}}>{CRM_FMT_EUR(extrasSubtotal)}</span>
              </div>
              <div className="flex between" style={{whiteSpace:'nowrap', gap:12}}>
                <span className="ink-3">Subtotal</span>
                <span className="mono tab">{CRM_FMT_EUR(subtotal)}</span>
              </div>
              <div className="flex between" style={{whiteSpace:'nowrap', gap:12}}>
                <span className="ink-3">IVA · 23%</span>
                <span className="mono tab">{CRM_FMT_EUR(iva)}</span>
              </div>
            </div>

            {/* Extras detail */}
            {Object.keys(extras).length > 0 && (
              <>
                <hr className="divider" style={{ margin: '14px 0' }}/>
                <div className="smallcaps">Extras adicionados</div>
                <div className="stack gap-1 mt-2" style={{ fontSize: 12.5 }}>
                  {Object.entries(extras).map(([code, q]) => {
                    const p = catalog.find(x => x.code === code);
                    return (
                      <div key={code} className="flex between" style={{ gap: 12 }}>
                        <span className="truncate">{p.name} <span className="ink-3 mono">×{q}</span></span>
                        <span className="mono tab">{CRM_FMT_EUR(p.price * q)}</span>
                      </div>
                    );
                  })}
                </div>
              </>
            )}

            <hr className="divider" style={{ margin: '18px 0 14px' }}/>

            <div className="stack gap-2">
              <button className="btn clay lg" disabled={!hasChanges || suspended} style={{justifyContent:'center'}}>
                <Icon k="check" size={14}/> {suspended ? 'Confirmações em pausa' : 'Confirmar este ciclo'}
              </button>
              <button className="btn outline sm" style={{justifyContent:'center'}} disabled={!hasChanges || suspended}>
                Repor base do contrato
              </button>
            </div>
            <div className="ink-3 mt-3" style={{fontSize:11, lineHeight:1.5, textAlign:'center'}}>
              {suspended
                ? <>Cobrança tem de regularizar antes da próxima janela de edição.</>
                : <>Sem alterações? Não precisas de fazer nada — a base do contrato cobra-se automaticamente.</>
              }
            </div>
          </div>

          <div className="card surface-2 flat">
            <div className="row gap-2" style={{alignItems:'flex-start'}}>
              <Icon k="truck" size={14} color="var(--ink-3)"/>
              <div className="grow" style={{fontSize:12, color:'var(--ink-2)', lineHeight:1.5}}>
                Entrega para <strong>{PORTAL_DELIVERY.name}</strong> · {PORTAL_DELIVERY.zip}
                <br/>
                <span className="ink-3">Para mudar morada, abre <span style={{textDecoration:'underline', cursor:'default'}} onClick={() => onNav('account')}>Conta</span></span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

/* Compact stepper for quantities */
function Stepper({ value, onChange, small=false, highlight=false }) {
  const h = small ? 26 : 30;
  return (
    <div className="row gap-1" style={{justifyContent:'center', alignItems:'center'}}>
      <button className="btn ghost" style={{height:h, width:h, padding:0, justifyContent:'center', border:'0.5px solid var(--rule)'}}
        onClick={() => onChange(value - 1)} disabled={value <= 0}>
        <Icon k="x" size={10}/>
      </button>
      <input
        className="qty-input"
        style={{
          width: small ? 44 : 56, height: h,
          borderColor: highlight ? 'var(--clay)' : 'var(--rule)',
          color: highlight ? 'var(--clay)' : 'var(--ink)',
          fontWeight: highlight ? 600 : 400,
        }}
        type="number"
        value={value}
        onChange={(e) => onChange(parseInt(e.target.value || '0', 10))}
      />
      <button className="btn ghost" style={{height:h, width:h, padding:0, justifyContent:'center', border:'0.5px solid var(--rule)'}}
        onClick={() => onChange(value + 1)}>
        <Icon k="plus" size={10}/>
      </button>
    </div>
  );
}

Object.assign(window, { PortalCycle });