"use client";

import Link from "next/link";
import { useEffect, useState } from "react";

import { Aviso } from "@/components/ui/aviso";
import { faixaDaAssinatura, type FaixaDaAssinatura } from "@/lib/avisos-da-assinatura";

/**
 * A faixa do topo do painel: vencimento chegando (quem não renova sozinho) e
 * cobrança recusada. Mesma regra dos e-mails (`lib/avisos-da-assinatura`).
 * Fechar esconde até o fim da sessão do navegador.
 */

const LER_A_CADA_MS = 30 * 60 * 1000;
const CHAVE = "ktalogu:faixa-da-assinatura-fechada";

export function FaixaDaAssinaturaDoPainel() {
  const [faixa, setFaixa] = useState<FaixaDaAssinatura>(null);
  const [fechada, setFechada] = useState(false);

  useEffect(() => {
    let vivo = true;
    const ler = () =>
      fetch("/api/assinatura/situacao", { cache: "no-store" })
        .then((res) => (res.ok ? res.json() : null))
        .then((json: { venceEm?: string | null; ativa?: boolean; renovaSozinha?: boolean; pagamentoRecusado?: boolean } | null) => {
          if (!vivo || !json) return;
          try {
            setFechada(window.sessionStorage.getItem(CHAVE) === "1");
          } catch {
            /* Sem armazenamento: a faixa só não lembra que foi fechada. */
          }
          setFaixa(
            faixaDaAssinatura({
              venceEm: json.venceEm ? new Date(json.venceEm) : null,
              ativa: Boolean(json.ativa),
              renovaSozinha: Boolean(json.renovaSozinha),
              pagamentoRecusado: Boolean(json.pagamentoRecusado),
            })
          );
        })
        .catch(() => undefined);
    void ler();
    const relogio = window.setInterval(() => void ler(), LER_A_CADA_MS);
    return () => {
      vivo = false;
      window.clearInterval(relogio);
    };
  }, []);

  if (!faixa || fechada) return null;
  return (
    <div className="mb-4">
      <Aviso
        tom={faixa.tom}
        aoFechar={() => {
          setFechada(true);
          try {
            window.sessionStorage.setItem(CHAVE, "1");
          } catch {
            /* idem */
          }
        }}
      >
        {faixa.texto}{" "}
        <Link href="/dashboard/assinatura" className="font-semibold underline underline-offset-2">
          Ver minha assinatura
        </Link>
      </Aviso>
    </div>
  );
}