/* portal-home.jsx — Início (customer dashboard) */

function PortalHome({ onNav, suspended, onOpenIban }) {
  const c = PORTAL_CONTRACT;
  const cust = PORTAL_CUSTOMER;
  const s = PORTAL_SUSPENDED;

  const subtotal = PORTAL_BASE.reduce((s, p) => s + p.price * p.qty, 0);
  const iva = subtotal * 0.23;
  const total = subtotal + iva;

  return (
    <div className="content stack gap-6">
      {/* Welcome line */}
      <div>
        <div className="smallcaps">{suspended ? 'Atenção, Maria' : 'Bom dia, Maria'}</div>
        {!suspended && (
          <>
            <h1 className="page-title mt-2">
              Estás <em className="italic-serif clay">a {PORTAL_D7_DAYS} dias</em> de fechar o ciclo Q3.
            </h1>
            <div className="page-sub" style={{ maxWidth: 640 }}>
              A próxima cobrança é {PORTAL_CHARGE_DATE}. Tens até {PORTAL_D7_DATE} (D-7) para ajustar
              quantidades base ou pedir extras para esta entrega.
            </div>
          </>
        )}
        {suspended && (
          <>
            <h1 className="page-title mt-2">
              A cobrança do ciclo Q3 <em className="italic-serif" style={{color:'var(--clay-deep)'}}>não passou</em>.
            </h1>
            <div className="page-sub" style={{ maxWidth: 640 }}>
              Tentámos {s.retries.length} débitos desde {s.failedOn} e foram todos devolvidos pelo banco.
              A encomenda fica em standby até resolveres — e temos {s.daysToResolve} dias confortáveis ({s.deadline}).
            </div>
          </>
        )}
      </div>

      {/* Hero — swaps between countdown and resolve */}
      {!suspended && (
        <div className="hero">
        <div className="grid" style={{ gridTemplateColumns: '0.85fr 1.15fr', gap: 36, alignItems: 'center', position: 'relative', zIndex: 1 }}>
          <div className="stack gap-2">
            <div className="smallcaps">Dias até D-7</div>
            <div className="big-num">{PORTAL_D7_DAYS}</div>
            <div className="mono" style={{ color: 'var(--sand)', fontSize: 12, marginTop: 8 }}>
              {PORTAL_TODAY} → {PORTAL_D7_DATE}
            </div>
          </div>
          <div className="stack gap-4">
            <div className="lead">
              "Diz-nos se queres ajustar algo no ciclo Q3 — depois desta data, partimos para
              cobrança e expedição."
            </div>
            <div className="row gap-3">
              <button className="btn lg" style={{background:'var(--sand)', color:'var(--tobacco)'}}
                onClick={() => onNav('cycle')}>
                Rever ciclo Q3 →
              </button>
              <button className="btn lg ghost" style={{ color: 'var(--bone)', borderColor: 'rgba(242,233,210,0.25)', border: '0.5px solid rgba(242,233,210,0.25)' }}>
                Ignorar · manter base
              </button>
            </div>
            <div className="row gap-4 mt-2" style={{ fontSize: 12, color: 'rgba(242,233,210,0.7)' }}>
              <span>Sem alterações? A base atual cobra-se a {PORTAL_CHARGE_DATE}.</span>
            </div>
          </div>
        </div>
      </div>
      )}

      {/* Suspended hero — the resolve panel */}
      {suspended && (
        <div className="hero hero-fail">
          <div className="grid" style={{ gridTemplateColumns: '0.85fr 1.15fr', gap: 36, alignItems: 'center', position: 'relative', zIndex: 1 }}>
            <div className="stack gap-2">
              <div className="smallcaps">Dias para resolver</div>
              <div className="big-num" style={{ color: '#f6e0d0' }}>{s.daysToResolve}</div>
              <div className="mono" style={{ color: 'rgba(246,224,208,0.7)', fontSize: 12, marginTop: 8 }}>
                {s.today} → {s.deadline}
              </div>
            </div>
            <div className="stack gap-4">
              <div className="lead">
                "O banco devolveu o débito três vezes. Não te preocupes — é um contratempo, não uma
                cobrança em atraso. Vamos resolver."
              </div>
              <div className="row gap-3">
                <button className="btn lg" style={{ background:'#fff', color:'var(--clay-deep)' }}
                  onClick={onOpenIban}>
                  <Icon k="sepa" size={14}/> Atualizar IBAN
                </button>
                <button className="btn lg ghost" style={{
                  color: 'var(--bone)', border: '0.5px solid rgba(255,255,255,0.3)',
                }} onClick={() => onNav('billing')}>
                  Prefiro transferência
                </button>
              </div>
              <div className="row gap-4 mt-2" style={{ fontSize: 12, color: 'rgba(246,224,208,0.7)' }}>
                <span>Motivo do banco: <span className="mono">{s.reasonCode} · {s.reasonLabel.toLowerCase()}</span></span>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* Two columns: contract pulse + RVDE rep */}
      <div className="grid gap-4" style={{ gridTemplateColumns: '1.55fr 1fr' }}>
        <div className="card" style={{ padding: '24px 26px' }}>
          <div className="flex between items-c">
            <div>
              <div className="smallcaps">Pulso do contrato</div>
              <h2 className="section-title mt-2">Ciclo {c.current} / 8 · mês {(c.current-1)*3 + 1} / 24</h2>
            </div>
            <div style={{ textAlign: 'right' }}>
              <div className="smallcaps">Início → Fim</div>
              <div className="mono tab mt-2" style={{ fontSize: 13 }}>{c.startDate} → {c.endDate}</div>
            </div>
          </div>
          <div className="mt-5">
            <Timeline current={c.current} states={suspended
              ? ['done','done','fail','fut','fut','fut','fut','fut']
              : null}/>
          </div>
          <div className="grid mt-5" style={{ gridTemplateColumns: 'repeat(3,1fr)', paddingTop: 18, borderTop: '0.5px solid var(--rule-2)', gap: 16 }}>
            <div>
              <div className="smallcaps">{suspended ? 'Próxima tentativa' : 'Próxima cobrança'}</div>
              <div className="mono tab mt-1" style={{ fontSize: 14, color: suspended ? 'var(--clay-deep)' : 'inherit', fontWeight: suspended ? 600 : 400 }}>
                {suspended ? '25 SET 2025' : PORTAL_CHARGE_DATE}
              </div>
              <div className="ink-3" style={{ fontSize: 11, marginTop: 2 }}>{suspended ? 'após atualizar IBAN' : 'SEPA · automático'}</div>
            </div>
            <div>
              <div className="smallcaps">Estado do ciclo</div>
              <div className="mt-1">
                {suspended
                  ? <span className="badge failed"><span className="dot"/>Cobrança falhou</span>
                  : <span className="badge pending"><span className="dot"/>Extras pendentes</span>}
              </div>
              <div className="ink-3" style={{ fontSize: 11, marginTop: 4 }}>
                {suspended ? `${s.retries.length} tentativas devolvidas` : 'esperamos a tua decisão'}
              </div>
            </div>
            <div style={{ textAlign: 'right' }}>
              <div className="smallcaps">{suspended ? 'Valor em dívida' : 'Valor estimado'}</div>
              <div className="display tab mt-2" style={{ fontSize: 26, lineHeight: 1, color: suspended ? 'var(--clay-deep)' : 'var(--clay)' }}>{CRM_FMT_EUR(total)}</div>
              <div className="ink-3" style={{ fontSize: 11, marginTop: 4 }}>{suspended ? `fatura ${s.invoice}` : 'IVA incluído · 23%'}</div>
            </div>
          </div>
        </div>

        <div className="stack gap-3">
          <div className="card">
            <div className="smallcaps">O teu contacto na RVDE</div>
            <div className="row gap-3 mt-3" style={{ alignItems: 'center' }}>
              <div style={{
                width: 44, height: 44, borderRadius: '50%',
                background: 'var(--tobacco)', color: 'var(--sand)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontFamily: 'var(--display)', fontSize: 18,
              }}>{PORTAL_REP.avatar}</div>
              <div className="grow">
                <div className="display" style={{ fontSize: 18 }}>{PORTAL_REP.name}</div>
                <div className="ink-3" style={{ fontSize: 11 }}>{PORTAL_REP.role}</div>
              </div>
            </div>
            <div className="italic-serif mt-3" style={{ fontSize: 13.5, color: 'var(--ink-2)', lineHeight: 1.45 }}>
              "{PORTAL_REP.bio}"
            </div>
            <div className="row gap-2 mt-4">
              <button className="btn outline sm">Enviar mensagem</button>
              <button className="btn ghost sm" style={{padding:'0 8px'}}>Ligar</button>
            </div>
          </div>

          <div className="card surface-2">
            <div className="smallcaps">Mandato SEPA</div>
            <div className="flex between items-c mt-2">
              {suspended
                ? <span className="badge failed"><span className="dot"/>Ativo · a falhar</span>
                : <span className="badge charged"><span className="dot"/>Ativo</span>}
              <span className="ink-3" style={{ fontSize: 11 }}>desde {PORTAL_MANDATE.signed}</span>
            </div>
            <div className="mono tab mt-3" style={{ fontSize: 13, textDecoration: suspended ? 'line-through' : 'none', opacity: suspended ? 0.6 : 1 }}>{PORTAL_MANDATE.iban}</div>
            <div className="ink-3" style={{ fontSize: 11, marginTop: 2 }}>{PORTAL_MANDATE.bank}</div>
            {suspended && (
              <button className="btn clay sm mt-3" style={{ width: '100%', justifyContent: 'center' }} onClick={onOpenIban}>
                Atualizar IBAN
              </button>
            )}
          </div>
        </div>
      </div>

      {/* Lower split: next delivery + activity */}
      <div className="grid gap-4" style={{ gridTemplateColumns: '1.55fr 1fr' }}>
        <div className="card">
          <div className="flex between items-c">
            <h2 className="section-title">{suspended ? 'Encomenda em standby · Q3' : 'Próxima entrega · ciclo Q3'}</h2>
            <span className="ink-3" style={{ fontSize: 12 }}>
              {suspended ? 'parte após débito OK' : 'estimativa: 19.06.2025'}
            </span>
          </div>
          <div className="grid gap-2 mt-4">
            {PORTAL_BASE.map(p => (
              <div key={p.code} className="row gap-3" style={{ padding: '10px 0', borderBottom: '0.5px solid var(--rule-2)' }}>
                <div style={{
                  width: 36, height: 36, 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>
                <div className="ink-3" style={{ fontSize: 12 }}>{p.fmt}</div>
                <div className="mono tab" style={{ fontSize: 13, width: 50, textAlign:'right', fontWeight: 600 }}>×{p.qty}</div>
              </div>
            ))}
          </div>
          <div className="row gap-2 mt-4">
            {!suspended && (
              <>
                <button className="btn outline sm" onClick={() => onNav('cycle')}>
                  <Icon k="edit" size={13}/> Ajustar quantidades
                </button>
                <button className="btn clay sm" onClick={() => onNav('cycle')}>
                  <Icon k="plus" size={13}/> Adicionar extras
                </button>
              </>
            )}
            {suspended && (
              <span className="ink-3" style={{ fontSize: 12, fontStyle: 'italic' }}>
                Lista fechada em D-7 · ajustes reabrem no próximo ciclo.
              </span>
            )}
            <div className="ml-auto ink-3" style={{ fontSize: 11 }}>
              Total deste ciclo · <span className="mono tab" style={{ color: 'var(--ink)', fontWeight: 600 }}>{CRM_FMT_EUR(total)}</span>
            </div>
          </div>
        </div>

        <div className="card">
          <h2 className="section-title">Movimentos recentes</h2>
          <div className="mt-3">
            {(suspended ? [
              { when: 'hoje',       kind: 'fail', title: 'Retry 3 · devolvido',  detail: `${PORTAL_SUSPENDED.reasonCode} · 21 SET` },
              { when: 'há 4 dias',  kind: 'fail', title: 'Retry 2 · devolvido',  detail: `${PORTAL_SUSPENDED.reasonCode} · 18 SET` },
              { when: 'há 7 dias',  kind: 'fail', title: 'Cobrança falhou',     detail: `Q3 · ${PORTAL_SUSPENDED.invoice} · 15 SET` },
              { when: '14.09.2025', kind: 'info', title: 'Ciclo Q3 fechado em D-7', detail: 'extras confirmados · lista fechada' },
              { when: '01.09.2025', kind: 'cycle',title: 'Ciclo Q3 aberto',        detail: 'D-7 a 8 SET' },
            ] : PORTAL_ACTIVITY.slice(0, 5)).map((a, i) => {
              const dotCls = a.kind === 'cycle' ? 'clay' : a.kind === 'paid' ? 'moss' : a.kind === 'shipped' ? 'moss' : a.kind === 'fail' ? 'deep' : '';
              return (
                <div key={i} className="act-row">
                  <div className="when">{a.when}</div>
                  <div className={'dot ' + dotCls} />
                  <div>
                    <div style={{ fontSize: 13, fontWeight: 500 }}>{a.title}</div>
                    <div className="ink-3" style={{ fontSize: 11.5, marginTop: 2 }}>{a.detail}</div>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { PortalHome });