// Tela: Minha Assinatura — o cliente vê o plano, status e faturas, e paga (recorrente)

const asHeaders = () => { const t = localStorage.getItem('ezza_token'); return { 'Content-Type':'application/json', ...(t?{'Authorization':`Bearer ${t}`}:{}) }; };
const asMoney = (v) => 'R$ ' + (Number(v)||0).toLocaleString('pt-BR', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
const asData = (d) => { if (!d) return '—'; const [y,m,dd] = String(d).slice(0,10).split('-'); return `${dd}/${m}/${y}`; };

// Rótulo + cor de cada status (assinatura e fatura)
const AS_STATUS = {
  ativa:        { label: 'Ativa',        cls: 'mint',   dot: true },
  trial:        { label: 'Em teste',     cls: 'lav',    dot: true },
  pendente:     { label: 'Aguardando pagamento', cls: 'yellow' },
  inadimplente: { label: 'Pagamento atrasado',   cls: 'pink' },
  cancelada:    { label: 'Cancelada',    cls: 'off' },
};
const FAT_STATUS = {
  paga:     { label: 'Paga',     cls: 'mint' },
  pendente: { label: 'Pendente', cls: 'yellow' },
  atrasada: { label: 'Atrasada', cls: 'pink' },
};

function Assinatura({ onBack }) {
  const [dados, setDados] = React.useState(null);   // { assinatura, faturas }
  const [carregando, setCarregando] = React.useState(true);
  const toast = useToast();

  React.useEffect(() => {
    fetch('/api/assinatura', { headers: asHeaders() })
      .then(r => r.json())
      .then(d => { if (d.ok) setDados(d); })
      .catch(() => {})
      .finally(() => setCarregando(false));
  }, []);

  const a = dados?.assinatura || {};
  const faturas = dados?.faturas || [];
  const st = AS_STATUS[a.status] || null;
  const temPlano = !!a.plano;
  const valorCiclo = a.ciclo === 'anual' ? (a.preco_mensal * 12) : a.preco_mensal;

  // Próxima fatura em aberto (pendente/atrasada) — pra destacar o botão de pagar
  const faturaAberta = faturas.find(f => f.status !== 'paga');

  const gerenciar = () => {
    if (a.link) window.open(a.link, '_blank');
    else toast('O link de pagamento ainda não foi configurado. Fale com o suporte.', { kind: 'err', duration: 4000 });
  };

  return (
    <>
      <PageHead
        title={<>Minha <em>assinatura</em></>}
        subtitle="Plano, cobranças e faturas"
        back onBack={onBack}
      />

      {carregando && <div className="card" style={{padding:'40px', textAlign:'center'}} ><span className="muted">Carregando…</span></div>}

      {!carregando && !temPlano && (
        <div className="card" style={{padding:'40px 28px', textAlign:'center'}}>
          <div style={{width:56, height:56, borderRadius:16, background:'oklch(0.94 0.05 285)', color:'oklch(0.5 0.2 285)', display:'grid', placeItems:'center', margin:'0 auto 16px'}}>{ICN.briefcase}</div>
          <div style={{fontSize:17, fontWeight:700, marginBottom:6}}>Nenhum plano ativo ainda</div>
          <p className="muted" style={{fontSize:13, maxWidth:400, margin:'0 auto 18px', lineHeight:1.6}}>
            Sua conta está em cortesia. Para ativar todos os recursos e a Sofia respondendo 24/7, fale com o nosso time.
          </p>
          <button className="btn-primary" onClick={() => { const msg = encodeURIComponent('Olá! Quero ativar meu plano no Ezza CRM.'); window.open(`https://wa.me/${window.EZZA_SUPORTE_WA || '5585991598284'}?text=${msg}`, '_blank'); }}>
            {ICN.whatsapp} Falar com o time
          </button>
        </div>
      )}

      {!carregando && temPlano && (
        <>
          {/* ── Cartão do plano ── */}
          <div className="card as-plan">
            <div className="as-plan-main">
              <div className="row" style={{gap:10, alignItems:'center', marginBottom:8}}>
                <span className="as-plan-name">Plano {a.plano_label}</span>
                {st && <span className={`pill pill-${st.cls==='off'?'':st.cls} as-badge as-badge-${st.cls}`}>{st.dot && <span className="as-dot" />}{st.label}</span>}
              </div>
              <div className="as-price">
                {asMoney(valorCiclo)} <span className="as-price-ciclo muted">/ {a.ciclo === 'anual' ? 'ano' : 'mês'}</span>
              </div>
              <div className="as-meta muted">
                {a.metodo && <span>{a.metodo === 'cartao' ? '💳 Cartão de crédito' : a.metodo === 'pix' ? 'Pix recorrente' : 'Boleto'}</span>}
                {a.dia && <span> · Cobrança todo dia {a.dia}</span>}
                {a.plano_desde && <span> · Cliente desde {asData(a.plano_desde)}</span>}
              </div>
              {a.titular && <div className="as-meta muted" style={{marginTop:2}}>Titular: {a.titular}</div>}
            </div>
            <div className="as-plan-side">
              {faturaAberta
                ? <button className="btn-primary" onClick={gerenciar}>{ICN.card || ICN.bolt} Pagar {asMoney(faturaAberta.valor)}</button>
                : <button className="btn-ghost" onClick={gerenciar}>{ICN.settings} Gerenciar pagamento</button>}
              <div className="as-side-hint muted">Pagamento seguro · seus dados de cartão ficam no provedor, nunca no CRM</div>
            </div>
          </div>

          {/* ── Faturas ── */}
          <div className="card" style={{marginTop:14}}>
            <div className="card-head"><div className="card-title">Histórico de faturas</div></div>
            {faturas.length === 0 && <div className="muted" style={{padding:'22px', textAlign:'center', fontSize:12.5}}>Nenhuma fatura registrada ainda. A primeira aparece na próxima cobrança.</div>}
            {faturas.length > 0 && (
              <table className="tbl as-tbl">
                <thead><tr><th>Competência</th><th>Vencimento</th><th>Valor</th><th>Status</th><th></th></tr></thead>
                <tbody>
                  {faturas.map(f => { const fs = FAT_STATUS[f.status] || FAT_STATUS.pendente; return (
                    <tr key={f.id}>
                      <td><strong>{f.competencia || '—'}</strong></td>
                      <td className="muted">{asData(f.vencimento)}</td>
                      <td className="money">{asMoney(f.valor)}</td>
                      <td><span className={`pill pill-${fs.cls} as-fat-${f.status}`}>{fs.label}</span></td>
                      <td style={{textAlign:'right'}}>
                        {f.status !== 'paga' && f.link_pagamento && <button className="btn-ghost btn-sm" onClick={() => window.open(f.link_pagamento, '_blank')}>Pagar</button>}
                        {f.status === 'paga' && <span className="muted" style={{fontSize:11}}>Pago em {asData(f.pago_em)}</span>}
                      </td>
                    </tr>
                  ); })}
                </tbody>
              </table>
            )}
          </div>

          {/* ── Ajuda ── */}
          <div className="as-help muted">
            Precisa mudar de plano, trocar o cartão ou emitir nota fiscal? {' '}
            <a href="#" onClick={(e) => { e.preventDefault(); const msg = encodeURIComponent('Olá! Preciso de ajuda com minha assinatura no Ezza CRM.'); window.open(`https://wa.me/${window.EZZA_SUPORTE_WA || '5585991598284'}?text=${msg}`, '_blank'); }}>Fale com o suporte</a>.
          </div>
        </>
      )}

      <style>{`
        .as-plan { display:flex; flex-wrap:wrap; gap:24px; justify-content:space-between; align-items:center; padding:24px 26px !important; }
        .as-plan-main { min-width:240px; }
        .as-plan-name { font-size:17px; font-weight:800; letter-spacing:-0.02em; }
        .as-price { font-size:32px; font-weight:800; letter-spacing:-0.03em; line-height:1.1; margin:2px 0 6px; }
        .as-price-ciclo { font-size:15px; font-weight:500; }
        .as-meta { font-size:12.5px; }
        .as-plan-side { display:flex; flex-direction:column; gap:8px; align-items:flex-end; min-width:220px; }
        .as-plan-side .btn-primary, .as-plan-side .btn-ghost { white-space:nowrap; }
        .as-side-hint { font-size:11px; max-width:220px; text-align:right; line-height:1.5; }
        .as-badge { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:600; }
        .as-badge-mint   { background:oklch(0.94 0.06 155); color:oklch(0.4 0.14 155); }
        .as-badge-yellow { background:oklch(0.95 0.08 90);  color:oklch(0.45 0.14 75); }
        .as-badge-pink   { background:oklch(0.95 0.05 20);  color:oklch(0.55 0.18 25); }
        .as-badge-lav    { background:oklch(0.94 0.05 285); color:oklch(0.48 0.18 285); }
        .as-badge-off    { background:oklch(0.94 0.005 255); color:var(--ink-muted); }
        .as-dot { width:7px; height:7px; border-radius:50%; background:currentColor; display:inline-block; }
        .as-tbl .pill-mint   { background:oklch(0.94 0.06 155); color:oklch(0.4 0.14 155); }
        .as-tbl .pill-yellow { background:oklch(0.95 0.08 90);  color:oklch(0.45 0.14 75); }
        .as-tbl .pill-pink   { background:oklch(0.95 0.05 20);  color:oklch(0.55 0.18 25); }
        .as-help { font-size:12.5px; margin-top:16px; padding:0 4px; }
        .as-help a { color:var(--acc-lav, oklch(0.55 0.2 285)); font-weight:600; text-decoration:none; }
        .as-help a:hover { text-decoration:underline; }
      `}</style>
    </>
  );
}

window.Assinatura = Assinatura;