"use client";

import { useMemo, useRef, useState } from "react";
import Link from "next/link";
import { ArrowLeft, Copy, ExternalLink, Plus, Search, Trash2 } from "lucide-react";

type SponsoredBanner = {
  id: string;
  placement: string;
  title: string | null;
  link_url: string | null;
  open_in_new_tab: boolean;
  image_url: string;
  image_alt: string | null;
  active: boolean;
  position: number;
  start_at: string | null;
  end_at: string | null;
  config: Record<string, unknown>;
  created_at?: string | null;
  updated_at?: string | null;
};

function formatDate(value: string | null | undefined) {
  if (!value) return "";
  const d = new Date(value);
  if (Number.isNaN(d.getTime())) return "";
  return d.toISOString().slice(0, 10);
}

function formatPlacementLabel(value: string) {
  if (value === "admin.meus_fornecedores.top") return "Admin • Fornecedores • Topo";
  return value || "—";
}

function Badge({ active }: { active: boolean }) {
  return (
    <span
      className={[
        "inline-flex items-center rounded-full border px-2.5 py-1 text-xs font-semibold",
        active ? "border-emerald-200 bg-emerald-50 text-emerald-700" : "border-slate-200 bg-slate-50 text-slate-600",
      ].join(" ")}
    >
      {active ? "Ativo" : "Inativo"}
    </span>
  );
}

export default function SponsoredBannersListClient({ initialRows }: { initialRows: SponsoredBanner[] }) {
  const [rows, setRows] = useState<SponsoredBanner[]>(() => initialRows || []);
  const [query, setQuery] = useState("");
  const [placement, setPlacement] = useState("todos");
  const [loading, setLoading] = useState(false);
  const [deleteId, setDeleteId] = useState<string | null>(null);
  const [busyDelete, setBusyDelete] = useState(false);
  const [toast, setToast] = useState<string>("");
  const toastRef = useRef<number | null>(null);

  const placements = useMemo(
    () => [
      { value: "todos", label: "Placement: Todos" },
      { value: "admin.meus_fornecedores.top", label: "Admin • Fornecedores • Topo" },
    ],
    []
  );

  const filtered = useMemo(() => {
    const term = query.trim().toLowerCase();
    return rows.filter((row) => {
      if (placement !== "todos" && row.placement !== placement) return false;
      if (!term) return true;
      const hay = `${row.title || ""} ${row.placement || ""} ${row.link_url || ""}`.toLowerCase();
      return hay.includes(term);
    });
  }, [rows, query, placement]);

  async function reload(nextPlacement = placement) {
    setLoading(true);
    try {
      const url =
        nextPlacement !== "todos"
          ? `/api/sponsored-banners?placement=${encodeURIComponent(nextPlacement)}`
          : "/api/sponsored-banners";
      const res = await fetch(url);
      const json = (await res.json().catch(() => null)) as { banners?: SponsoredBanner[] } | null;
      setRows(Array.isArray(json?.banners) ? json!.banners! : []);
      setDeleteId(null);
    } finally {
      setLoading(false);
    }
  }

  function showToast(text: string) {
    setToast(text);
    if (toastRef.current) window.clearTimeout(toastRef.current);
    toastRef.current = window.setTimeout(() => setToast(""), 1500);
  }

  return (
    <div className="min-h-screen bg-slate-50/50 p-6 sm:p-8 font-sans">
      <div className="mx-auto flex max-w-[1600px] flex-col gap-6">
        <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
          <div className="space-y-1">
            <div className="flex items-center gap-3">
              <Link
                href="/"
                className="inline-flex h-10 w-10 items-center justify-center rounded-xl bg-white shadow-sm ring-1 ring-slate-200 transition hover:bg-slate-50 active:scale-95"
                aria-label="Voltar"
                title="Voltar"
              >
                <ArrowLeft className="h-4.5 w-4.5 text-slate-700" />
              </Link>
              <div>
                <h1 className="text-2xl font-bold tracking-tight text-slate-900">Banners patrocinados</h1>
                <p className="text-slate-500">Cadastre imagens que aparecem dentro do sistema com rotação automática e link configurável.</p>
              </div>
            </div>
          </div>

          <div className="flex items-center gap-3">
            <Link
              href="/banners-patrocinados/novo"
              className="inline-flex items-center justify-center gap-2 rounded-xl bg-slate-900 px-4 py-2.5 text-sm font-semibold text-white shadow-sm transition hover:bg-slate-800 active:scale-95"
            >
              <Plus className="h-4.5 w-4.5" />
              Novo banner
            </Link>
          </div>
        </div>

        <div className="rounded-2xl border border-slate-200 bg-white p-4 shadow-sm">
          <div className="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
            <div className="flex flex-1 flex-col gap-2 sm:flex-row">
              <div className="flex h-11 flex-1 items-center gap-2 rounded-xl border border-slate-200 bg-white px-3 text-sm text-slate-700">
                <Search className="h-4 w-4 text-slate-400" />
                <input
                  value={query}
                  onChange={(e) => setQuery(e.target.value)}
                  placeholder="Buscar por título, placement ou link..."
                  className="min-w-0 flex-1 bg-transparent outline-none placeholder:text-slate-400"
                />
              </div>

              <div className="relative">
                <select
                  value={placement}
                  onChange={(e) => {
                    const value = e.target.value;
                    setPlacement(value);
                    reload(value);
                  }}
                  className="h-11 w-full rounded-xl border border-slate-200 bg-white px-3 text-sm font-semibold text-slate-700 shadow-sm ring-0 focus:outline-none sm:w-[300px]"
                >
                  {placements.map((p) => (
                    <option key={p.value} value={p.value}>
                      {p.label}
                    </option>
                  ))}
                </select>
              </div>
            </div>

            <div className="flex items-center justify-between gap-3 lg:justify-end">
              <div className="text-xs font-medium text-slate-500">{loading ? "Carregando..." : `${filtered.length} banner(s)`}</div>
              <button
                type="button"
                onClick={() => reload()}
                className="inline-flex h-11 items-center justify-center rounded-xl bg-white px-4 text-sm font-semibold text-slate-700 shadow-sm ring-1 ring-slate-200 transition hover:bg-slate-50 active:scale-95"
              >
                Atualizar
              </button>
            </div>
          </div>
        </div>

        <div className="overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm">
          <div className="max-h-[680px] overflow-auto">
            <table className="w-full border-collapse text-sm">
              <thead className="sticky top-0 z-10 bg-white">
                <tr className="border-b border-slate-200 text-xs font-semibold text-slate-500">
                  <th className="w-[112px] px-4 py-3 text-left">Preview</th>
                  <th className="px-4 py-3 text-left">Banner</th>
                  <th className="px-4 py-3 text-left">Placement</th>
                  <th className="px-4 py-3 text-left">Link</th>
                  <th className="px-4 py-3 text-left">Agenda</th>
                  <th className="px-4 py-3 text-left">Status</th>
                  <th className="w-[220px] px-4 py-3 text-right">Ações</th>
                </tr>
              </thead>
              <tbody>
                {filtered.map((row) => {
                  const schedule =
                    row.start_at || row.end_at
                      ? `${row.start_at ? formatDate(row.start_at) : "—"} → ${row.end_at ? formatDate(row.end_at) : "—"}`
                      : "Sem agendamento";
                  const isConfirming = deleteId === row.id;
                  return (
                    <tr key={row.id} className="border-b border-slate-100 transition hover:bg-slate-50">
                      <td className="px-4 py-4">
                        <div className="overflow-hidden rounded-xl border border-slate-200 bg-slate-950">
                          <div className="aspect-[32/5] w-[92px]">
                            <img src={row.image_url} alt={row.image_alt || row.title || "Banner"} className="h-full w-full object-cover" />
                          </div>
                        </div>
                      </td>
                      <td className="px-4 py-4">
                        <div className="min-w-0">
                          <div className="truncate text-sm font-semibold text-slate-950">{row.title || "Banner patrocinado"}</div>
                          <div className="mt-0.5 text-xs text-slate-500">Ordem: {row.position}</div>
                        </div>
                      </td>
                      <td className="px-4 py-4">
                        <div className="text-sm font-medium text-slate-700">{formatPlacementLabel(row.placement)}</div>
                        <div className="mt-0.5 text-xs text-slate-500">{row.placement}</div>
                      </td>
                      <td className="px-4 py-4">
                        {row.link_url ? (
                          <a
                            href={row.link_url}
                            target={row.open_in_new_tab ? "_blank" : undefined}
                            rel={row.open_in_new_tab ? "noopener noreferrer" : undefined}
                            className="inline-flex max-w-[420px] items-center gap-2 truncate rounded-xl border border-slate-200 bg-white px-3 py-2 text-xs font-semibold text-slate-700 transition hover:bg-slate-50"
                          >
                            <ExternalLink className="h-4 w-4 text-slate-400" />
                            <span className="truncate">{row.link_url}</span>
                          </a>
                        ) : (
                          <span className="text-xs text-slate-400">Sem link</span>
                        )}
                      </td>
                      <td className="px-4 py-4">
                        <div className="text-xs font-semibold text-slate-700">{schedule}</div>
                        <div className="mt-0.5 text-xs text-slate-500">Abre em: {row.open_in_new_tab ? "Nova aba" : "Mesma aba"}</div>
                      </td>
                      <td className="px-4 py-4">
                        <Badge active={row.active} />
                      </td>
                      <td className="px-4 py-4 text-right">
                        {isConfirming ? (
                          <div className="inline-flex items-center gap-2">
                            <button
                              type="button"
                              disabled={busyDelete}
                              onClick={() => {
                                setDeleteId(null);
                              }}
                              className="inline-flex h-9 items-center justify-center rounded-xl bg-white px-3 text-xs font-semibold text-slate-700 shadow-sm ring-1 ring-slate-200 transition hover:bg-slate-50 disabled:opacity-60"
                            >
                              Cancelar
                            </button>
                            <button
                              type="button"
                              disabled={busyDelete}
                              onClick={async () => {
                                setBusyDelete(true);
                                try {
                                  const res = await fetch(`/api/sponsored-banners?id=${encodeURIComponent(row.id)}`, { method: "DELETE" });
                                  if (res.ok) {
                                    showToast("Banner deletado");
                                    await reload();
                                  }
                                } finally {
                                  setBusyDelete(false);
                                }
                              }}
                              className="inline-flex h-9 items-center justify-center gap-2 rounded-xl bg-rose-600 px-3 text-xs font-semibold text-white shadow-sm transition hover:bg-rose-500 disabled:opacity-60"
                            >
                              <Trash2 className="h-4 w-4" />
                              {busyDelete ? "Deletando..." : "Confirmar"}
                            </button>
                          </div>
                        ) : (
                          <div className="inline-flex items-center gap-2">
                            <button
                              type="button"
                              onClick={() => {
                                navigator.clipboard.writeText(row.id).catch(() => null);
                                showToast("ID copiado");
                              }}
                              className="inline-flex h-9 items-center justify-center gap-2 rounded-xl bg-white px-3 text-xs font-semibold text-slate-700 shadow-sm ring-1 ring-slate-200 transition hover:bg-slate-50 active:scale-95"
                            >
                              <Copy className="h-4 w-4 text-slate-400" />
                              ID
                            </button>
                            <Link
                              href={`/banners-patrocinados/${encodeURIComponent(row.id)}`}
                              className="inline-flex h-9 items-center justify-center rounded-xl bg-white px-3 text-xs font-semibold text-slate-700 shadow-sm ring-1 ring-slate-200 transition hover:bg-slate-50 active:scale-95"
                            >
                              Editar
                            </Link>
                            <button
                              type="button"
                              onClick={() => setDeleteId(row.id)}
                              className="inline-flex h-9 items-center justify-center gap-2 rounded-xl bg-white px-3 text-xs font-semibold text-rose-600 shadow-sm ring-1 ring-rose-200 transition hover:bg-rose-50 active:scale-95"
                            >
                              <Trash2 className="h-4 w-4" />
                              Deletar
                            </button>
                          </div>
                        )}
                      </td>
                    </tr>
                  );
                })}
                {filtered.length === 0 ? (
                  <tr>
                    <td colSpan={7} className="px-4 py-10 text-center text-sm text-slate-500">
                      Nenhum banner encontrado.
                    </td>
                  </tr>
                ) : null}
              </tbody>
            </table>
          </div>
        </div>

        {toast ? (
          <div className="fixed bottom-6 left-1/2 z-[200] -translate-x-1/2 rounded-full border border-slate-200 bg-white px-4 py-2 text-sm font-semibold text-slate-700 shadow-[0_18px_44px_rgba(15,23,42,0.12)]">
            {toast}
          </div>
        ) : null}
      </div>
    </div>
  );
}