"use client";

import { use, useCallback, useEffect, useState } from "react";
import { CalendarDays, Loader2, Printer } from "lucide-react";
import { getSupabaseClient } from "@/lib/supabase";
import type { EventoAgenda } from "@/app/dashboard/agenda/tipos";
import { CorpoRelatorio, DIMENSOES, type ChaveDim } from "@/components/relatorio/corpo";
import { nomeDoRelatorio, useTituloDaPagina } from "@/components/relatorio/titulo-da-pagina";

/**
 * Relatório da agenda aberto por link público.
 *
 * Fora de /dashboard de proposito: quem abre nao tem sessao, e nada aqui pode
 * depender de estar logado. O token no caminho e a unica credencial, e e ele
 * que carrega o recorte — periodo, cruzamento e permissao de ver nomes vem do
 * banco, nunca da URL. Trocar a querystring aqui nao muda o que aparece.
 *
 * Sem barra lateral, sem menu e sem link para o sistema: a pagina entrega o
 * relatorio e mais nada. Quem recebeu nao e usuario.
 */

type Meta = {
  valido: boolean;
  motivo: string | null;
  empresa: string | null;
  periodo_inicio: string | null;
  periodo_fim: string | null;
  linha: string | null;
  coluna: string | null;
  incluir_detalhes: boolean;
  expira_em: string | null;
};

/* O que vem da leitura publica: menos colunas que a agenda interna. O resto
   e preenchido aqui para o corpo do relatorio, que e o mesmo dos dois lados. */
type LinhaPublica = {
  tipo: string;
  titulo: string;
  subtitulo: string | null;
  data: string;
  situacao: string | null;
  categoria_nome: string;
  categoria_cor: string;
};

const MOTIVOS: Record<string, { titulo: string; texto: string }> = {
  inexistente: {
    titulo: "Link não encontrado",
    texto: "Confira se o endereço foi copiado inteiro. Se veio de uma conversa, pode ter sido cortado.",
  },
  revogado: {
    titulo: "Link desativado",
    texto: "Quem compartilhou este relatório desativou o acesso. Peça um link novo.",
  },
  expirado: {
    titulo: "Link expirado",
    texto: "Todo link de relatório tem prazo. Peça um novo a quem enviou este.",
  },
};

export default function RelatorioPublicoPage({ params }: { params: Promise<{ token: string }> }) {
  const { token } = use(params);

  const [meta, setMeta] = useState<Meta | null>(null);
  const [eventos, setEventos] = useState<EventoAgenda[]>([]);
  const [carregando, setCarregando] = useState(true);
  const [falhou, setFalhou] = useState(false);

  const carregar = useCallback(async () => {
    setCarregando(true);
    setFalhou(false);
    try {
      const supabase = getSupabaseClient();

      /* Cabecalho primeiro: assim a pagina diz "expirou" sem antes puxar
         evento nenhum. */
      const { data: metaData, error: metaErro } = await supabase.rpc("ler_meta_relatorio_agenda", {
        p_token: token,
      });
      if (metaErro) throw new Error(metaErro.message);

      const m = (metaData as Meta[])?.[0] ?? null;
      setMeta(m);
      if (!m?.valido) return;

      const { data, error } = await supabase.rpc("ler_relatorio_agenda_publico", { p_token: token });
      if (error) throw new Error(error.message);

      const lista = ((data as LinhaPublica[]) ?? []).map((l, i) => ({
        tipo: l.tipo as EventoAgenda["tipo"],
        origem_id: `p-${i}`,
        titulo: l.titulo,
        subtitulo: l.subtitulo,
        data: l.data,
        valor: null,
        situacao: l.situacao,
        rota: "",
        categoria_id: l.categoria_nome,
        categoria_nome: l.categoria_nome,
        categoria_cor: l.categoria_cor,
      }));
      setEventos(lista);
    } catch {
      setFalhou(true);
    } finally {
      setCarregando(false);
    }
  }, [token]);

  useEffect(() => {
    carregar();
  }, [carregar]);

  /* Fica acima dos returns: hook nao pode ficar depois de um caminho que
     sai antes. Enquanto o cabecalho nao chegou, o titulo e o generico. */
  useTituloDaPagina(
    meta?.valido && meta.periodo_inicio && meta.periodo_fim
      ? nomeDoRelatorio(meta.periodo_inicio, meta.periodo_fim, meta.empresa)
      : "Relatório da agenda"
  );

  if (carregando) {
    return (
      <Moldura>
        <div className="flex min-h-[50vh] items-center justify-center">
          <Loader2 className="h-5 w-5 animate-spin text-[var(--ag-text-5)]" />
        </div>
      </Moldura>
    );
  }

  if (falhou) {
    return (
      <Moldura>
        <Aviso titulo="Não foi possível carregar" texto="Tente novamente em instantes." />
      </Moldura>
    );
  }

  if (!meta?.valido) {
    const info = MOTIVOS[meta?.motivo ?? "inexistente"] ?? MOTIVOS.inexistente;
    return (
      <Moldura>
        <Aviso titulo={info.titulo} texto={info.texto} />
      </Moldura>
    );
  }

  const de = meta.periodo_inicio!;
  const ate = meta.periodo_fim!;
  const linha = (meta.linha && meta.linha in DIMENSOES ? meta.linha : "categoria") as ChaveDim;
  const coluna = (meta.coluna && meta.coluna in DIMENSOES ? meta.coluna : "diaSemana") as ChaveDim;

  const periodo = `${fmt(de)} a ${fmt(ate)}`;

  return (
    <Moldura>
      <div className="relatorio-agenda w-full space-y-4">
        <header className="flex flex-wrap items-start justify-between gap-3">
          <div>
            <p className="flex items-center gap-1.5 text-[11.5px] font-semibold uppercase tracking-[0.05em] text-[var(--ag-text-4)]">
              <CalendarDays className="h-3.5 w-3.5" />
              Relatório de agenda
            </p>
            <h1 className="mt-1 text-[24px] font-bold leading-tight text-[var(--ag-text)]">{meta.empresa}</h1>
            <p className="mt-0.5 text-[13px] text-[var(--ag-text-3)]">
              {periodo} · {eventos.length} {eventos.length === 1 ? "registro" : "registros"}
            </p>
          </div>

          <button
            type="button"
            onClick={() => window.print()}
            className="flex h-9 items-center gap-2 rounded-[9px] bg-[#6C3CF0] px-[14px] text-[12px] font-semibold text-white transition-colors hover:bg-[#5C31D8] print:hidden"
          >
            <Printer className="h-4 w-4" />
            Baixar PDF
          </button>
        </header>

        {eventos.length === 0 ? (
          <div className="rounded-[14px] border border-[var(--ag-border)] bg-[var(--ag-surface)] px-4 py-12 text-center">
            <p className="text-[13px] text-[var(--ag-text-3)]">Nenhum registro neste período.</p>
          </div>
        ) : (
          <CorpoRelatorio
            eventos={eventos}
            de={de}
            ate={ate}
            linha={linha}
            coluna={coluna}
            comDetalhes={meta.incluir_detalhes}
          />
        )}

        <footer className="space-y-1 pt-1 text-center">
          <p className="text-[10.5px] text-[var(--ag-text-5)]">
            Somente leitura · Este link expira em{" "}
            {meta.expira_em ? new Date(meta.expira_em).toLocaleDateString("pt-BR") : "—"}
          </p>
          <p className="text-[10.5px] text-[var(--ag-text-5)] print:hidden">Gerado pelo Ktalogu</p>
        </footer>
      </div>
    </Moldura>
  );
}

function Moldura({ children }: { children: React.ReactNode }) {
  return (
    <div className="min-h-screen bg-[var(--ag-canvas)] px-4 py-8 sm:px-6 lg:px-10 print:bg-[var(--ag-surface)] print:p-0">
      <div className="mx-auto w-full max-w-[1180px]">{children}</div>
    </div>
  );
}

function Aviso({ titulo, texto }: { titulo: string; texto: string }) {
  return (
    <div className="mx-auto mt-16 max-w-[420px] rounded-[14px] border border-[var(--ag-border)] bg-[var(--ag-surface)] px-6 py-10 text-center shadow-[var(--ag-sombra-1)]">
      <div className="mx-auto mb-3 flex h-11 w-11 items-center justify-center rounded-full bg-[var(--ag-surface-2)]">
        <CalendarDays className="h-5 w-5 text-[var(--ag-text-5)]" />
      </div>
      <h1 className="text-[16px] font-semibold text-[var(--ag-text)]">{titulo}</h1>
      <p className="mt-1.5 text-[12.5px] leading-relaxed text-[var(--ag-text-3)]">{texto}</p>
    </div>
  );
}

function fmt(d: string) {
  const [a, m, dia] = d.split("-");
  return `${dia}/${m}/${a}`;
}