"use client";

import { Eye, History, Loader2, RotateCcw, Undo2, X } from "lucide-react";

/*
  O histórico de publicações da página (as 15 últimas, migration 196/199):
  quando, quem e o que mudou em cada uma. "Ver como era" põe aquela versão
  na loja do editor, só para olhar; "Voltar para esta versão" publica de
  novo (vira uma publicação nova, que também dá para desfazer).
*/

export type PublicacaoDoHistorico = {
  id: string;
  created_at: string;
  autor: string | null;
  secoes_mexidas: boolean;
  navegacao_mexida: boolean;
  navegacao_antes: Record<string, unknown> | null;
  navegacao_depois: Record<string, unknown> | null;
  restaurada_de: string | null;
};

function quando(iso: string) {
  try {
    const data = new Date(iso);
    const hoje = new Date();
    const mesmoDia = data.toDateString() === hoje.toDateString();
    const hora = new Intl.DateTimeFormat("pt-BR", { hour: "2-digit", minute: "2-digit" }).format(data);
    if (mesmoDia) return `Hoje às ${hora}`;
    const ontem = new Date(hoje.getTime() - 24 * 3600 * 1000);
    if (data.toDateString() === ontem.toDateString()) return `Ontem às ${hora}`;
    return `${new Intl.DateTimeFormat("pt-BR", { day: "2-digit", month: "2-digit" }).format(data)} às ${hora}`;
  } catch {
    return "";
  }
}

function quem(autor: string | null) {
  if (!autor) return "Alguém da equipe";
  return autor.includes("@") ? autor.split("@")[0] : autor;
}

/** O que mudou: seções, cabeçalho, menu, rodapé. */
export function oQueMudou(p: PublicacaoDoHistorico, ehPagina: boolean): string[] {
  const partes: string[] = [];
  if (p.secoes_mexidas) partes.push(ehPagina ? "Seções da página" : "Seções");
  if (p.navegacao_mexida) {
    const antes = p.navegacao_antes || {};
    const depois = p.navegacao_depois;
    if (!depois) partes.push("Menu e rodapé");
    else {
      for (const [chave, nome] of [
        ["cabecalho", "Cabeçalho"],
        ["menu", "Menu"],
        ["rodape", "Rodapé"],
      ] as const) {
        if (JSON.stringify(antes[chave] ?? null) !== JSON.stringify(depois[chave] ?? null)) partes.push(nome);
      }
      if (partes.length === (p.secoes_mexidas ? 1 : 0)) partes.push("Menu e rodapé");
    }
  }
  return partes;
}

export function HistoricoDePublicacoes({
  itens,
  carregando,
  vendo,
  ocupado,
  ehPagina,
  aoVer,
  aoVoltar,
  aoFechar,
}: {
  itens: PublicacaoDoHistorico[];
  carregando: boolean;
  vendo: string | null;
  ocupado: boolean;
  ehPagina: boolean;
  aoVer: (id: string) => void;
  aoVoltar: (id: string) => void;
  aoFechar: () => void;
}) {
  return (
    <div data-editor="historico" className="flex h-full flex-col">
      <div className="flex items-start gap-3 border-b border-[var(--ks-n-100)] px-5 pb-4 pt-5">
        <span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-[var(--ks-brand-50)] text-[var(--ks-color-primary)]">
          <History size={17} />
        </span>
        <div className="min-w-0 flex-1">
          <p className="text-[15px] font-extrabold text-[var(--ks-color-text-primary)]">Histórico de publicações</p>
          <p className="mt-0.5 text-[11.5px] text-[var(--ks-color-text-soft)]">As 15 últimas desta página. Veja como era antes de voltar.</p>
        </div>
        <button type="button" aria-label="Fechar" onClick={aoFechar} className="flex h-8 w-8 items-center justify-center rounded-lg text-[var(--ks-color-text-soft)] hover:bg-[var(--ks-color-bg-hover)]">
          <X size={16} />
        </button>
      </div>
      <div className="min-h-0 flex-1 overflow-y-auto pb-6">
        {carregando ? (
          <div className="flex justify-center py-10">
            <Loader2 size={20} className="animate-spin text-[var(--ks-color-primary)]" />
          </div>
        ) : !itens.length ? (
          <p className="px-5 py-8 text-center text-[12.5px] text-[var(--ks-color-text-soft)]">Esta página ainda não foi publicada pelo editor.</p>
        ) : (
          <ol className="relative px-5 pt-4">
            <span aria-hidden className="absolute bottom-6 left-[29px] top-6 w-[2px] rounded-full bg-[var(--ks-n-100)]" />
            {itens.map((p, indice) => {
              const atual = indice === 0;
              const aberta = vendo === p.id;
              const mudou = oQueMudou(p, ehPagina);
              return (
                <li key={p.id} className="relative mb-2 flex gap-3">
                  <span
                    className={`relative z-[1] mt-3 h-[18px] w-[18px] shrink-0 rounded-full border-[3px] ${
                      atual ? "border-[var(--ks-color-primary)] bg-white" : aberta ? "border-[#0f766e] bg-[#0f766e]" : "border-[var(--ks-n-200)] bg-white"
                    }`}
                  />
                  <div
                    className={`min-w-0 flex-1 rounded-2xl px-3.5 py-3 transition ${
                      aberta ? "bg-[#e6f6f3] ring-1 ring-[#0f766e]/30" : "hover:bg-[var(--ks-color-bg-hover)]"
                    }`}
                  >
                    <div className="flex items-center gap-2">
                      <p className="text-[13px] font-extrabold text-[var(--ks-color-text-primary)]">{quando(p.created_at)}</p>
                      {atual ? <span className="rounded-full bg-[var(--ks-brand-50)] px-2 py-0.5 text-[10px] font-bold text-[var(--ks-color-primary)]">Na loja agora</span> : null}
                    </div>
                    <p className="mt-0.5 truncate text-[11.5px] text-[var(--ks-color-text-soft)]">
                      por {quem(p.autor)}
                      {p.restaurada_de ? " · voltou a uma versão anterior" : ""}
                    </p>
                    {mudou.length ? (
                      <div className="mt-2 flex flex-wrap gap-1">
                        {mudou.map((m) => (
                          <span key={m} className="rounded-full bg-[var(--ks-color-bg-inset)] px-2 py-0.5 text-[10.5px] font-bold text-[var(--ks-color-text-secondary)]">
                            {m}
                          </span>
                        ))}
                      </div>
                    ) : null}
                    {atual ? null : (
                      <div className="mt-2.5 flex flex-wrap gap-1.5">
                        <button
                          type="button"
                          disabled={ocupado}
                          onClick={() => aoVer(p.id)}
                          aria-pressed={aberta}
                          className={`inline-flex items-center gap-1.5 rounded-full px-3 py-1.5 text-[11.5px] font-bold transition disabled:opacity-40 ${
                            aberta ? "bg-[#0f766e] text-white" : "bg-[var(--ks-color-bg-elevated)] text-[var(--ks-color-text-primary)] ring-1 ring-[var(--ks-color-border-subtle)] hover:ring-[var(--ks-color-primary)]"
                          }`}
                        >
                          {aberta ? <Undo2 size={13} /> : <Eye size={13} />} {aberta ? "Vendo esta versão" : "Ver como era"}
                        </button>
                        <button
                          type="button"
                          disabled={ocupado}
                          onClick={() => aoVoltar(p.id)}
                          className="inline-flex items-center gap-1.5 rounded-full bg-[var(--ks-color-primary)] px-3 py-1.5 text-[11.5px] font-bold text-white transition hover:brightness-110 disabled:opacity-40"
                        >
                          <RotateCcw size={13} /> Voltar para esta versão
                        </button>
                      </div>
                    )}
                  </div>
                </li>
              );
            })}
          </ol>
        )}
      </div>
    </div>
  );
}