"use client";

import { useEffect, useMemo, useRef, useState } from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import ImageUpload from "@/components/image-upload";
import { ArrowLeft, Check, Copy, ExternalLink, Save } 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>;
};

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 normalizeUrl(value: string) {
  return String(value || "").trim();
}

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

export default function SponsoredBannerFormClient({
  mode,
  initial,
}: {
  mode: "create" | "edit";
  initial: SponsoredBanner | null;
}) {
  const router = useRouter();
  const [saving, setSaving] = useState(false);
  const [message, setMessage] = useState<{ type: "success" | "error"; text: string } | null>(null);
  const [copied, setCopied] = useState(false);
  const copiedRef = useRef<number | null>(null);

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

  const base = useMemo<Partial<SponsoredBanner>>(() => {
    if (initial) return { ...initial };
    return {
      placement: "admin.meus_fornecedores.top",
      open_in_new_tab: true,
      active: true,
      position: 0,
      title: "",
      link_url: "",
      image_url: "",
      image_alt: "",
      start_at: null,
      end_at: null,
      config: {},
    };
  }, [initial]);

  const [draft, setDraft] = useState<Partial<SponsoredBanner>>(base);

  useEffect(() => {
    setDraft(base);
    setMessage(null);
    setCopied(false);
  }, [base]);

  useEffect(() => {
    return () => {
      if (copiedRef.current) window.clearTimeout(copiedRef.current);
      copiedRef.current = null;
    };
  }, []);

  const canSave = Boolean(String(draft.image_url || "").trim()) && Boolean(String(draft.placement || "").trim());

  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="/banners-patrocinados"
                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">
                  {mode === "create" ? "Novo banner patrocinado" : "Editar banner patrocinado"}
                </h1>
                <p className="text-slate-500">Recomendado: 2560×400px (32:5). O carrossel corta automaticamente no centro.</p>
              </div>
            </div>
          </div>

          <div className="flex items-center gap-2">
            <Link
              href="/banners-patrocinados"
              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 disabled:opacity-60"
            >
              Cancelar
            </Link>
            <button
              type="button"
              disabled={!canSave || saving}
              onClick={async () => {
                if (!canSave) return;
                setSaving(true);
                setMessage(null);
                try {
                  const method = mode === "edit" ? "PATCH" : "POST";
                  const res = await fetch("/api/sponsored-banners", {
                    method,
                    headers: { "content-type": "application/json" },
                    body: JSON.stringify({
                      id: initial?.id,
                      placement: String(draft.placement || "admin.meus_fornecedores.top"),
                      title: String(draft.title || "").trim() || null,
                      link_url: normalizeUrl(String(draft.link_url || "")) || null,
                      open_in_new_tab: Boolean(draft.open_in_new_tab),
                      image_url: String(draft.image_url || "").trim(),
                      image_alt: String(draft.image_alt || "").trim() || null,
                      active: Boolean(draft.active),
                      position: Number(draft.position || 0),
                      start_at: draft.start_at || null,
                      end_at: draft.end_at || null,
                      config: draft.config && typeof draft.config === "object" ? draft.config : {},
                    }),
                  });
                  const json = (await res.json().catch(() => null)) as { error?: string } | null;
                  if (!res.ok) {
                    setMessage({ type: "error", text: json?.error || "Não foi possível salvar." });
                    return;
                  }
                  setMessage({ type: "success", text: "Banner salvo com sucesso." });
                  window.setTimeout(() => router.push("/banners-patrocinados"), 220);
                } finally {
                  setSaving(false);
                }
              }}
              className="inline-flex h-11 items-center justify-center gap-2 rounded-xl bg-slate-900 px-5 text-sm font-semibold text-white shadow-sm transition hover:bg-slate-800 disabled:opacity-60"
            >
              <Save className="h-4.5 w-4.5" />
              {saving ? "Salvando..." : "Salvar"}
            </button>
          </div>
        </div>

        <div className="grid gap-6 lg:grid-cols-[1.05fr_0.95fr]">
          <div className="space-y-4">
            <div className="rounded-2xl border border-slate-200 bg-white shadow-sm">
              <div className="flex items-center justify-between border-b border-slate-100 px-4 py-3">
                <div className="text-sm font-semibold text-slate-900">Imagem</div>
                <div className="text-xs text-slate-500">32:5</div>
              </div>
              <div className="p-4">
                <ImageUpload
                  bucket="products"
                  folder="owner/sponsored-banners"
                  value={String(draft.image_url || "")}
                  onChange={(url) => setDraft((prev) => ({ ...prev, image_url: url }))}
                  aspect={32 / 5}
                />
              </div>
            </div>

            <div className="rounded-2xl border border-slate-200 bg-white p-4 shadow-sm">
              <div className="grid gap-4">
                <label className="space-y-2">
                  <div className="text-sm font-semibold text-slate-900">Texto alternativo (alt)</div>
                  <input
                    value={String(draft.image_alt || "")}
                    onChange={(e) => setDraft((prev) => ({ ...prev, image_alt: e.target.value }))}
                    placeholder="Ex: Ferramentas profissionais em promoção"
                    className="h-11 w-full rounded-xl border border-slate-200 bg-white px-3 text-sm text-slate-800 outline-none placeholder:text-slate-400"
                  />
                </label>
                <div className="rounded-xl border border-slate-200 bg-slate-50 px-3 py-2 text-xs text-slate-600">
                  Área segura: mantenha textos/CTA afastados das bordas para evitar corte em telas menores.
                </div>
              </div>
            </div>

            {message ? (
              <div
                className={[
                  "rounded-2xl border px-4 py-3 text-sm font-semibold",
                  message.type === "success" ? "border-emerald-200 bg-emerald-50 text-emerald-800" : "border-rose-200 bg-rose-50 text-rose-700",
                ].join(" ")}
              >
                {message.text}
              </div>
            ) : null}
          </div>

          <div className="space-y-4">
            <div className="rounded-2xl border border-slate-200 bg-white p-4 shadow-sm">
              <div className="text-sm font-semibold text-slate-900">Distribuição</div>
              <div className="mt-4 grid gap-4 md:grid-cols-2">
                <label className="space-y-2 md:col-span-2">
                  <div className="text-sm font-semibold text-slate-900">Local (placement)</div>
                  <select
                    value={String(draft.placement || "admin.meus_fornecedores.top")}
                    onChange={(e) => setDraft((prev) => ({ ...prev, placement: e.target.value }))}
                    className="h-11 w-full rounded-xl border border-slate-200 bg-white px-3 text-sm font-semibold text-slate-700 outline-none"
                  >
                    {placements.map((p) => (
                      <option key={p.value} value={p.value}>
                        {p.label}
                      </option>
                    ))}
                  </select>
                </label>

                <label className="space-y-2">
                  <div className="text-sm font-semibold text-slate-900">Status</div>
                  <select
                    value={draft.active ? "ativo" : "inativo"}
                    onChange={(e) => setDraft((prev) => ({ ...prev, active: e.target.value === "ativo" }))}
                    className="h-11 w-full rounded-xl border border-slate-200 bg-white px-3 text-sm font-semibold text-slate-700 outline-none"
                  >
                    <option value="ativo">Ativo</option>
                    <option value="inativo">Inativo</option>
                  </select>
                </label>

                <label className="space-y-2">
                  <div className="text-sm font-semibold text-slate-900">Ordem</div>
                  <input
                    value={String(draft.position ?? 0)}
                    onChange={(e) => setDraft((prev) => ({ ...prev, position: Number(e.target.value || 0) }))}
                    inputMode="numeric"
                    className="h-11 w-full rounded-xl border border-slate-200 bg-white px-3 text-sm text-slate-800 outline-none"
                    placeholder="0"
                  />
                </label>

                <label className="space-y-2">
                  <div className="text-sm font-semibold text-slate-900">Início (opcional)</div>
                  <input
                    type="date"
                    value={formatDate(draft.start_at || null)}
                    onChange={(e) =>
                      setDraft((prev) => ({
                        ...prev,
                        start_at: e.target.value ? new Date(e.target.value).toISOString() : null,
                      }))
                    }
                    className="h-11 w-full rounded-xl border border-slate-200 bg-white px-3 text-sm text-slate-800 outline-none"
                  />
                </label>

                <label className="space-y-2">
                  <div className="text-sm font-semibold text-slate-900">Fim (opcional)</div>
                  <input
                    type="date"
                    value={formatDate(draft.end_at || null)}
                    onChange={(e) =>
                      setDraft((prev) => ({
                        ...prev,
                        end_at: e.target.value ? new Date(e.target.value).toISOString() : null,
                      }))
                    }
                    className="h-11 w-full rounded-xl border border-slate-200 bg-white px-3 text-sm text-slate-800 outline-none"
                  />
                </label>
              </div>
            </div>

            <div className="rounded-2xl border border-slate-200 bg-white p-4 shadow-sm">
              <div className="text-sm font-semibold text-slate-900">Clique</div>
              <div className="mt-4 grid gap-4">
                <label className="space-y-2">
                  <div className="text-sm font-semibold text-slate-900">Título (interno)</div>
                  <input
                    value={String(draft.title || "")}
                    onChange={(e) => setDraft((prev) => ({ ...prev, title: e.target.value }))}
                    placeholder="Ex: IRWIN • Ferramentas"
                    className="h-11 w-full rounded-xl border border-slate-200 bg-white px-3 text-sm text-slate-800 outline-none placeholder:text-slate-400"
                  />
                </label>

                <label className="space-y-2">
                  <div className="text-sm font-semibold text-slate-900">Link</div>
                  <input
                    value={String(draft.link_url || "")}
                    onChange={(e) => setDraft((prev) => ({ ...prev, link_url: e.target.value }))}
                    placeholder="https://..."
                    className="h-11 w-full rounded-xl border border-slate-200 bg-white px-3 text-sm text-slate-800 outline-none placeholder:text-slate-400"
                  />
                </label>

                <label className="space-y-2">
                  <div className="text-sm font-semibold text-slate-900">Abrir em</div>
                  <select
                    value={draft.open_in_new_tab ? "new" : "same"}
                    onChange={(e) => setDraft((prev) => ({ ...prev, open_in_new_tab: e.target.value === "new" }))}
                    className="h-11 w-full rounded-xl border border-slate-200 bg-white px-3 text-sm font-semibold text-slate-700 outline-none"
                  >
                    <option value="new">Nova aba</option>
                    <option value="same">Mesma aba</option>
                  </select>
                </label>

                <div className="flex flex-wrap items-center gap-2">
                  <button
                    type="button"
                    onClick={() => {
                      const url = normalizeUrl(String(draft.link_url || ""));
                      if (!url) return;
                      navigator.clipboard.writeText(url).catch(() => null);
                      setCopied(true);
                      if (copiedRef.current) window.clearTimeout(copiedRef.current);
                      copiedRef.current = window.setTimeout(() => setCopied(false), 1400);
                    }}
                    className="inline-flex h-11 items-center justify-center gap-2 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"
                  >
                    {copied ? <Check className="h-4.5 w-4.5 text-emerald-600" /> : <Copy className="h-4.5 w-4.5 text-slate-400" />}
                    Copiar link
                  </button>

                  <button
                    type="button"
                    onClick={() => {
                      const url = normalizeUrl(String(draft.link_url || ""));
                      if (!url) return;
                      window.open(url, draft.open_in_new_tab ? "_blank" : "_self", draft.open_in_new_tab ? "noopener,noreferrer" : undefined);
                    }}
                    className="inline-flex h-11 items-center justify-center gap-2 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"
                  >
                    <ExternalLink className="h-4.5 w-4.5 text-slate-400" />
                    Abrir
                  </button>
                </div>
              </div>
            </div>

            <div className="rounded-2xl border border-slate-200 bg-slate-50 p-4 text-sm text-slate-600">
              <div className="font-semibold text-slate-900">Especificações</div>
              <div className="mt-2 space-y-2">
                <div className="flex items-center justify-between gap-3">
                  <span>Proporção</span>
                  <span className="font-semibold text-slate-900">32:5</span>
                </div>
                <div className="flex items-center justify-between gap-3">
                  <span>Tamanho recomendado</span>
                  <span className="font-semibold text-slate-900">2560×400px</span>
                </div>
                <div className="flex items-center justify-between gap-3">
                  <span>Placement</span>
                  <span className="font-semibold text-slate-900">{formatPlacementLabel(String(draft.placement || ""))}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}