/* portal-renewal.jsx — Renewal decision panel (D-60 window) */

function RenewalScreen({ onNav, onDenunciate, onRenegotiate }) {
  const r = PORTAL_RENEWAL;
  return (
    <div className="content stack gap-6">
      {/* Header */}
      <div>
        <div className="smallcaps">Janela de renovação · {r.today}</div>
        <h1 className="page-title mt-2">
          O contrato <em className="italic-serif clay">renova-se em {r.daysToDecide} dias</em>.
        </h1>
        <div className="page-sub" style={{ maxWidth: 680 }}>
          Faltam dois meses para o fim do compromisso de 24 meses. Por defeito o contrato renova
          tacitamente por mais 24 meses. Diz-nos se preferes renegociar, ou denunciar — sem
          decisão, prossegue tal-qual a 15 SET.
        </div>
      </div>

      {/* Hero: relationship recap */}
      <div className="hero">
        <div className="grid" style={{ gridTemplateColumns: 'repeat(4, 1fr)', gap: 24, position: 'relative', zIndex: 1, paddingRight: 80 }}>
          <div>
            <div className="smallcaps">A relação até hoje</div>
            <div className="display tab" style={{ fontSize: 54, color: 'var(--sand)', lineHeight: 1, marginTop: 8, fontWeight: 300 }}>22</div>
            <div className="mono" style={{ color: 'rgba(242,233,210,0.7)', fontSize: 11, marginTop: 4 }}>meses · {r.cyclesDelivered} ciclos entregues</div>
          </div>
          <div>
            <div className="smallcaps">Em produtos</div>
            <div className="display tab" style={{ fontSize: 54, color: 'var(--bone)', lineHeight: 1, marginTop: 8, fontWeight: 300 }}>{r.productsSent.toLocaleString('pt-PT')}</div>
            <div className="mono" style={{ color: 'rgba(242,233,210,0.7)', fontSize: 11, marginTop: 4 }}>unidades expedidas</div>
          </div>
          <div>
            <div className="smallcaps">Em faturação</div>
            <div className="display tab" style={{ fontSize: 32, color: 'var(--bone)', lineHeight: 1, marginTop: 12, fontWeight: 300 }}>{CRM_FMT_EUR(r.totalValue)}</div>
            <div className="mono" style={{ color: 'rgba(242,233,210,0.7)', fontSize: 11, marginTop: 8 }}>recebido · sem falhas</div>
          </div>
          <div>
            <div className="smallcaps">Cobranças falhadas</div>
            <div className="display tab" style={{ fontSize: 54, color: 'var(--moss)', lineHeight: 1, marginTop: 8, fontWeight: 300 }}>0</div>
            <div className="mono" style={{ color: 'rgba(242,233,210,0.7)', fontSize: 11, marginTop: 4 }}>SEPA · sempre limpo</div>
          </div>
        </div>
      </div>

      {/* Three paths */}
      <div>
        <div className="flex between items-c" style={{ marginBottom: 14 }}>
          <h2 className="section-title">Três caminhos · escolhe um</h2>
          <span className="ink-3" style={{ fontSize: 12 }}>
            Sem decisão até <span className="mono" style={{ color: 'var(--clay)' }}>{r.noticeBy}</span> · renova tal-qual
          </span>
        </div>

        <div className="grid gap-4" style={{ gridTemplateColumns: 'repeat(3, 1fr)' }}>
          {/* Path 1: keep */}
          <div className="card path-card path-recommended">
            <div className="path-badge"><Icon k="check" size={10} color="var(--bone)"/> Recomendado</div>
            <div className="smallcaps">Caminho 1</div>
            <h3 className="display mt-2" style={{ fontSize: 22, letterSpacing: '-0.01em', lineHeight: 1.15 }}>
              Renovar tal-qual<br/>
              <span className="italic-serif clay">por mais 24 meses</span>
            </h3>
            <div className="ink-3 mt-3" style={{ fontSize: 12.5, lineHeight: 1.55 }}>
              Mesmas quantidades, mesmos preços, mesmas datas trimestrais. Continua o ritmo sem fricção — é o que acontece automaticamente se não fizeres nada.
            </div>
            <hr className="divider" style={{ margin: '18px 0' }}/>
            <div className="stack gap-2" style={{ fontSize: 12.5 }}>
              <div className="flex between"><span className="ink-3">Novo período</span><span className="mono">{r.newStart} → {r.newEnd}</span></div>
              <div className="flex between"><span className="ink-3">Valor / ciclo</span><span className="mono tab">{CRM_FMT_EUR(r.currentValue)}</span></div>
              <div className="flex between"><span className="ink-3">Próximo ciclo Q9</span><span className="mono">15 DEZ 2026</span></div>
            </div>
            <button className="btn clay lg mt-4" style={{ width: '100%', justifyContent: 'center' }}>
              <Icon k="check" size={14}/> Renovar tal-qual
            </button>
            <div className="ink-3 mt-2" style={{ fontSize: 11, textAlign: 'center', fontStyle: 'italic' }}>
              um clique · email de confirmação
            </div>
          </div>

          {/* Path 2: renegotiate */}
          <div className="card path-card">
            <div className="smallcaps">Caminho 2</div>
            <h3 className="display mt-2" style={{ fontSize: 22, letterSpacing: '-0.01em', lineHeight: 1.15 }}>
              Renegociar<br/>
              <span className="italic-serif clay">com o Jorge</span>
            </h3>
            <div className="ink-3 mt-3" style={{ fontSize: 12.5, lineHeight: 1.55 }}>
              Mudar quantidades, mexer em produtos, ajustar a cadência. Jorge prepara uma nova proposta — passamos pelo wizard de adesão como na primeira vez.
            </div>
            <hr className="divider" style={{ margin: '18px 0' }}/>
            <div className="smallcaps mb-2">Jorge sugere · com base no histórico</div>
            <div className="stack gap-2" style={{ fontSize: 12 }}>
              {r.suggestedChanges.map(s => {
                const p = CRM_PRODUCTS.find(x => x.code === s.code);
                return (
                  <div key={s.code} className="row gap-2" style={{ alignItems: 'baseline' }}>
                    <span className="grow truncate">{p?.name || s.code}</span>
                    <span className="mono ink-3">{s.from}</span>
                    <Icon k="arrow-r" size={10} color="var(--clay)"/>
                    <span className="mono" style={{ color: 'var(--clay)', fontWeight: 600 }}>{s.to}</span>
                  </div>
                );
              })}
              <div className="flex between mt-2" style={{ paddingTop: 6, borderTop: '0.5px solid var(--rule-2)' }}>
                <span className="ink-3">Valor / ciclo</span>
                <span><span className="mono ink-3" style={{ textDecoration: 'line-through' }}>{CRM_FMT_EUR(r.currentValue)}</span> <span className="mono" style={{ color: 'var(--clay)', fontWeight: 600 }}>{CRM_FMT_EUR(r.suggestedValue)}</span></span>
              </div>
            </div>
            <button className="btn outline lg mt-4" style={{ width: '100%', justifyContent: 'center' }} onClick={onRenegotiate}>
              <Icon k="edit" size={13}/> Falar com Jorge
            </button>
            <div className="ink-3 mt-2" style={{ fontSize: 11, textAlign: 'center', fontStyle: 'italic' }}>
              chamada agendada · wizard depois
            </div>
          </div>

          {/* Path 3: denounce */}
          <div className="card path-card path-deny">
            <div className="smallcaps">Caminho 3</div>
            <h3 className="display mt-2" style={{ fontSize: 22, letterSpacing: '-0.01em', lineHeight: 1.15 }}>
              Denunciar<br/>
              <span className="italic-serif ink-3">e terminar a 14 SET</span>
            </h3>
            <div className="ink-3 mt-3" style={{ fontSize: 12.5, lineHeight: 1.55 }}>
              Sem renovação. O contrato termina na data prevista (14 SET 2026), o último ciclo Q8 segue normalmente, e mantens acesso ao portal por 12 meses.
            </div>
            <hr className="divider" style={{ margin: '18px 0' }}/>
            <div className="stack gap-2" style={{ fontSize: 12.5 }}>
              <div className="flex between"><span className="ink-3">Último ciclo</span><span className="mono">Q8 · 15 JUN 2026</span></div>
              <div className="flex between"><span className="ink-3">Última entrega</span><span className="mono">~19 JUN 2026</span></div>
              <div className="flex between"><span className="ink-3">Fim oficial</span><span className="mono">14 SET 2026</span></div>
              <div className="flex between"><span className="ink-3">Acesso arquivo</span><span className="mono">+12 meses</span></div>
            </div>
            <button className="btn outline lg mt-4" style={{ width: '100%', justifyContent: 'center', borderColor: 'var(--rule)', color: 'var(--ink-3)' }} onClick={onDenunciate}>
              Denunciar contrato
            </button>
            <div className="ink-3 mt-2" style={{ fontSize: 11, textAlign: 'center', fontStyle: 'italic' }}>
              confirmação por email · sem custo
            </div>
          </div>
        </div>
      </div>

      {/* Footer note: Jorge */}
      <div className="card surface-2" style={{ display: 'flex', gap: 18, alignItems: 'center', padding: '20px 24px' }}>
        <div style={{
          width: 48, height: 48, borderRadius: '50%',
          background: 'var(--clay)', color: 'var(--bone)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontFamily: 'var(--display)', fontSize: 20, flexShrink: 0,
        }}>J</div>
        <div className="grow">
          <div className="italic-serif" style={{ fontSize: 15, color: 'var(--ink-2)', lineHeight: 1.45 }}>
            "Sei que decidir um contrato de 2 anos é pesado — fala comigo se houver dúvidas. A
            decisão é a tua, mas a conversa é gratuita."
          </div>
          <div className="ink-3 mt-2" style={{ fontSize: 11.5 }}>
            <span className="mono">jorge@rvde.pt</span> · <span className="mono">+351 962 408 117</span>
          </div>
        </div>
        <div className="row gap-2" style={{ flexShrink: 0 }}>
          <button className="btn outline sm">Marcar chamada</button>
        </div>
      </div>
    </div>
  );
}

/* ── Denounce confirmation dialog ──────────────────────── */
function DenounceDialog({ open, onClose }) {
  const [reason, setReason] = React.useState('');
  const [phase, setPhase] = React.useState('confirm');

  if (!open) return null;

  const submit = () => setPhase('done');
  const close = () => { setReason(''); setPhase('confirm'); onClose(); };

  return (
    <div className="modal-backdrop" onClick={close}>
      <div className="modal-card" onClick={e => e.stopPropagation()}>
        {phase === 'confirm' && (
          <>
            <div className="modal-head">
              <div>
                <div className="smallcaps">Denúncia formal</div>
                <h2 className="section-title mt-1" style={{ fontSize: 24 }}>Tens a certeza?</h2>
              </div>
              <button className="btn ghost sm icon-only" onClick={close} title="Fechar">
                <Icon k="x" size={13}/>
              </button>
            </div>
            <div className="modal-body stack gap-4">
              <div className="italic-serif" style={{ fontSize: 15, color: 'var(--ink-2)', lineHeight: 1.5 }}>
                Denunciar agora encerra o contrato a <strong style={{color:'var(--ink)'}}>14 SET 2026</strong>.
                Mantemos o último ciclo Q8 a correr normalmente e o teu portal acessível por 12 meses depois.
              </div>
              <div className="card surface-2 flat">
                <div className="smallcaps mb-2">Vamos enviar-te</div>
                <div className="stack gap-1" style={{ fontSize: 12.5, color: 'var(--ink-2)', lineHeight: 1.6 }}>
                  <div>· Email de confirmação imediato com data certa do fim</div>
                  <div>· Aviso 30 dias antes do fim (16 AGO 2026)</div>
                  <div>· Confirmação da entrega final (~19 JUN 2026)</div>
                </div>
              </div>
              <div className="field">
                <span className="lbl">Queres dizer-nos porquê? · opcional</span>
                <textarea
                  className="input"
                  style={{ height: 'auto', padding: '10px 12px', minHeight: 80, lineHeight: 1.55, resize: 'vertical' }}
                  placeholder="Para nos ajudar a melhorar — em duas linhas chega."
                  value={reason}
                  onChange={e => setReason(e.target.value)}
                />
                <span className="ink-3" style={{ fontSize: 11.5, marginTop: 2 }}>
                  Jorge lê todas as respostas pessoalmente.
                </span>
              </div>
            </div>
            <div className="modal-foot">
              <button className="btn ghost" onClick={close}>Voltar atrás</button>
              <div style={{ flex: 1 }}/>
              <button className="btn outline" style={{ borderColor: 'var(--clay-deep)', color: 'var(--clay-deep)' }} onClick={submit}>
                Confirmar denúncia
              </button>
            </div>
          </>
        )}
        {phase === 'done' && (
          <>
            <div className="modal-head">
              <div>
                <div className="smallcaps">Denúncia recebida</div>
                <h2 className="section-title mt-1" style={{ fontSize: 24 }}>Obrigado por estes 22 meses.</h2>
              </div>
              <button className="btn ghost sm icon-only" onClick={close} title="Fechar">
                <Icon k="x" size={13}/>
              </button>
            </div>
            <div className="modal-body stack gap-4">
              <div style={{ display: 'flex', justifyContent: 'center', padding: '8px 0 4px' }}>
                <div style={{
                  width: 64, height: 64, borderRadius: '50%',
                  background: 'var(--ink-3)', color: 'var(--bone)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                }}>
                  <Icon k="check" size={30} color="var(--bone)"/>
                </div>
              </div>
              <div className="italic-serif" style={{ textAlign: 'center', fontSize: 16, lineHeight: 1.5, color: 'var(--ink-2)' }}>
                Recebemos a tua denúncia. O contrato termina a <strong style={{ color: 'var(--ink)' }}>14 SET 2026</strong> —
                até lá tudo continua tal-qual.
              </div>
              <div className="ink-3" style={{ fontSize: 11.5, textAlign: 'center', fontStyle: 'italic' }}>
                Jorge vai dar-te um toque nos próximos dias.
              </div>
            </div>
            <div className="modal-foot">
              <div style={{ flex: 1 }}/>
              <button className="btn outline" onClick={close}>Voltar ao portal</button>
            </div>
          </>
        )}
      </div>
    </div>
  );
}

/* ── Ended state — replaces the whole home ─────────────── */
function PortalEnded({ onNav }) {
  const e = PORTAL_ENDED;
  return (
    <div className="content stack gap-6">
      {/* Read-only banner */}
      <div className="ended-banner">
        <div className="row gap-3" style={{ alignItems: 'center' }}>
          <Icon k="contracts" size={16} color="var(--ink-3)"/>
          <div className="grow">
            <strong>Modo arquivo</strong> · podes consultar e descarregar tudo, mas o contrato terminou. Acesso ativo até <span className="mono">{e.archiveUntil}</span>.
          </div>
        </div>
      </div>

      {/* Hero · obrigado */}
      <div className="hero hero-ended">
        <div style={{ position: 'relative', zIndex: 1 }}>
          <div className="smallcaps">Fechado · {e.endedOn}</div>
          <h1 className="page-title mt-3" style={{ color: 'var(--bone)', fontSize: 52, maxWidth: 720 }}>
            Obrigado pelos <em className="italic-serif sand">24 meses</em>, Maria.
          </h1>
          <div style={{ color: 'rgba(242,233,210,0.78)', fontSize: 15.5, lineHeight: 1.65, maxWidth: 580, marginTop: 18 }}>
            O contrato do Hotel Sereno fechou-se em 14 SET 2026 — 8 ciclos sem falhas, sem extras
            esquecidos, sem entregas atrasadas. Foi um ritmo limpo, e isso não se faz sozinho.
          </div>
        </div>
      </div>

      {/* Recap numbers */}
      <div className="grid gap-4" style={{ gridTemplateColumns: 'repeat(4, 1fr)' }}>
        <div className="card">
          <div className="smallcaps">Ciclos entregues</div>
          <div className="display tab mt-2" style={{ fontSize: 38, lineHeight: 1, color: 'var(--clay)' }}>{e.cyclesDone}</div>
          <div className="ink-3 mt-1" style={{ fontSize: 11 }}>de 8 previstos · 100%</div>
        </div>
        <div className="card">
          <div className="smallcaps">Faturação total</div>
          <div className="display tab mt-2" style={{ fontSize: 30, lineHeight: 1 }}>{CRM_FMT_EUR(e.totalValue)}</div>
          <div className="ink-3 mt-1" style={{ fontSize: 11 }}>IVA incluído · 24 meses</div>
        </div>
        <div className="card">
          <div className="smallcaps">Última fatura</div>
          <div className="mono mt-2" style={{ fontSize: 16 }}>{e.lastInvoice}</div>
          <div className="ink-3 mt-1" style={{ fontSize: 11 }}>15.06.2026 · paga SEPA</div>
        </div>
        <div className="card">
          <div className="smallcaps">Acesso arquivo</div>
          <div className="mono mt-2" style={{ fontSize: 16 }}>{e.archiveUntil}</div>
          <div className="ink-3 mt-1" style={{ fontSize: 11 }}>12 meses após o fim</div>
        </div>
      </div>

      {/* Actions + Jorge */}
      <div className="grid gap-4" style={{ gridTemplateColumns: '1.55fr 1fr' }}>
        <div className="card">
          <h2 className="section-title">O que continua disponível</h2>
          <div className="stack gap-2 mt-3">
            {[
              { icon: 'contracts', title: '8 ciclos no histórico', desc: 'Detalhes, extras pedidos, tracking de cada entrega', route: 'history' },
              { icon: 'billing',   title: 'Faturas em PDF',         desc: 'Todas as 8 disponíveis para download',           route: 'billing' },
              { icon: 'download',  title: 'Contrato e mandato',    desc: 'PDF originais · v1.0 e v1.1',                     route: null },
              { icon: 'customers', title: 'Dados de conta',        desc: 'Contactos, morada, dados fiscais',                route: 'account' },
            ].map(item => (
              <div key={item.title} className="row gap-3" style={{ padding: '12px 0', borderBottom: '0.5px solid var(--rule-2)' }}>
                <Icon k={item.icon} size={16} color="var(--ink-3)"/>
                <div className="grow">
                  <div style={{ fontSize: 13.5, fontWeight: 500 }}>{item.title}</div>
                  <div className="ink-3" style={{ fontSize: 11.5, marginTop: 2 }}>{item.desc}</div>
                </div>
                {item.route && (
                  <button className="btn ghost sm" style={{ padding: '0 8px' }} onClick={() => onNav(item.route)}>
                    <Icon k="chevron-r" size={13}/>
                  </button>
                )}
                {!item.route && (
                  <button className="btn ghost sm" style={{ padding: '0 8px' }}>
                    <Icon k="download" size={13}/>
                  </button>
                )}
              </div>
            ))}
          </div>
          <div className="row gap-2 mt-4">
            <button className="btn outline">
              <Icon k="download" size={13}/> Descarregar arquivo completo (.zip)
            </button>
          </div>
        </div>

        <div className="stack gap-3">
          <div className="card tobacco" style={{ padding: '22px 24px' }}>
            <div className="smallcaps">Reabrir a relação</div>
            <div className="italic-serif mt-2" style={{ fontSize: 16, color: 'var(--bone)', lineHeight: 1.45 }}>
              A porta fica sempre aberta. Se quiseres voltar — em três meses ou em três anos — falamos.
            </div>
            <div className="row gap-3 mt-4" style={{ alignItems: 'center' }}>
              <div style={{
                width: 36, height: 36, borderRadius: '50%',
                background: 'var(--clay)', color: 'var(--bone)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontFamily: 'var(--display)', fontSize: 16,
              }}>J</div>
              <div className="grow">
                <div style={{ fontSize: 13, color: 'var(--bone)', fontWeight: 600 }}>{PORTAL_REP.name}</div>
                <div className="mono" style={{ fontSize: 11, color: 'rgba(242,233,210,0.55)' }}>{PORTAL_REP.email}</div>
              </div>
            </div>
            <button className="btn sm mt-3" style={{ width: '100%', justifyContent: 'center', background: 'var(--sand)', color: 'var(--tobacco)' }}>
              Voltar a falar com Jorge
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { RenewalScreen, DenounceDialog, PortalEnded });