import { createFileRoute, useNavigate, Link } from "@tanstack/react-router";
import { useEffect, useState } from "react";
import { toast } from "sonner";
import { supabase } from "@/integrations/supabase/client";
import logo from "@/assets/logo-ponto.png";
import { BRIEFING_SECTIONS, emptyBriefingData, type BriefingData } from "@/lib/briefing-schema";
import { generateBriefingPdf } from "@/lib/briefing-pdf";
import { FormsAdmin } from "@/components/FormsAdmin";

type Briefing = {
  id: string;
  client_name: string;
  token: string;
  status: string;
  data: BriefingData;
  submitted_at: string | null;
  created_at: string;
  updated_at: string;
};

type Lead = {
  id: string;
  nome: string;
  email: string;
  telefone: string;
  cidade: string;
  nicho: string;
  variant: string | null;
  created_at: string;
  utm_source: string | null;
  utm_medium: string | null;
  utm_campaign: string | null;
  utm_term: string | null;
  utm_content: string | null;
  referrer: string | null;
  landing_path: string | null;
};

type Settings = {
  gtm_id: string | null;
  meta_pixel_id: string | null;
  ga4_id: string | null;
  google_ads_id: string | null;
  tiktok_pixel_id: string | null;
  whatsapp_number: string | null;
  whatsapp_message_template: string | null;
  custom_head_html: string | null;
  cal_link: string | null;
  meta_capi_token: string | null;
  meta_capi_test_event_code: string | null;
  meta_ad_account_id: string | null;
  meta_ads_token: string | null;

};

export const Route = createFileRoute("/admin")({
  component: AdminPage,
  head: () => ({ meta: [{ title: "Painel — .PONTO" }] }),
});

function AdminPage() {
  const navigate = useNavigate();
  const [loading, setLoading] = useState(true);
  const [tab, setTab] = useState<"leads" | "briefings" | "forms" | "pixels">("leads");
  const [leads, setLeads] = useState<Lead[]>([]);
  const [settings, setSettings] = useState<Settings>({
    gtm_id: "",
    meta_pixel_id: "",
    ga4_id: "",
    google_ads_id: "",
    tiktok_pixel_id: "",
    whatsapp_number: "",
    whatsapp_message_template: "",
    custom_head_html: "",
    cal_link: "",
    meta_capi_token: "",
    meta_capi_test_event_code: "",
    meta_ad_account_id: "",
    meta_ads_token: "",

  });
  const [savingSettings, setSavingSettings] = useState(false);
  const [filter, setFilter] = useState<string>("todos");
  const [briefings, setBriefings] = useState<Briefing[]>([]);
  const [editing, setEditing] = useState<Briefing | null>(null);
  const [newClientName, setNewClientName] = useState("");
  const [creatingBriefing, setCreatingBriefing] = useState(false);

  useEffect(() => {
    (async () => {
      const { data: sess } = await supabase.auth.getSession();
      if (!sess.session) {
        navigate({ to: "/login" });
        return;
      }
      // Revalida o token com o servidor Supabase atual.
      // Se o token foi emitido por outro projeto (troca de backend), ele é inválido aqui
      // e precisa ser descartado antes de qualquer chamada de serverFn.
      const { data: userCheck, error: userErr } = await supabase.auth.getUser();
      if (userErr || !userCheck.user) {
        await supabase.auth.signOut();
        navigate({ to: "/login" });
        return;
      }
      const userId = userCheck.user.id;

      // Try to bootstrap as admin if no admin exists yet (policy enforces).
      await supabase.from("user_roles").insert({ user_id: userId, role: "admin" });

      // Verify role
      const { data: roles } = await supabase
        .from("user_roles")
        .select("role")
        .eq("user_id", userId);

      if (!roles?.some((r) => r.role === "admin")) {
        toast.error("Você não tem permissão de administrador.");
        await supabase.auth.signOut();
        navigate({ to: "/login" });
        return;
      }

      await Promise.all([loadLeads(), loadSettings(), loadBriefings()]);
      setLoading(false);
    })();
  }, [navigate]);


  const loadBriefings = async () => {
    const { data, error } = await supabase
      .from("briefings")
      .select("*")
      .order("created_at", { ascending: false });
    if (error) {
      toast.error("Erro ao carregar briefings.");
      return;
    }
    setBriefings((data ?? []) as unknown as Briefing[]);
  };

  const createBriefing = async () => {
    if (!newClientName.trim()) return toast.error("Informe o nome do cliente.");
    setCreatingBriefing(true);
    const { data, error } = await supabase
      .from("briefings")
      .insert({ client_name: newClientName.trim() })
      .select("*")
      .single();
    setCreatingBriefing(false);
    if (error || !data) return toast.error("Erro ao criar briefing.");
    setNewClientName("");
    setBriefings((s) => [data as unknown as Briefing, ...s]);
    const url = `${window.location.origin}/briefing/${(data as { token: string }).token}`;
    await navigator.clipboard.writeText(url).catch(() => {});
    toast.success("Briefing criado! Link copiado para a área de transferência.");
  };

  const deleteBriefing = async (id: string) => {
    if (!confirm("Excluir este briefing?")) return;
    const { error } = await supabase.from("briefings").delete().eq("id", id);
    if (error) return toast.error("Erro ao excluir.");
    setBriefings((s) => s.filter((b) => b.id !== id));
  };

  const saveBriefingEdit = async () => {
    if (!editing) return;
    const { error } = await supabase
      .from("briefings")
      .update({ data: editing.data, client_name: editing.client_name })
      .eq("id", editing.id);
    if (error) return toast.error("Erro ao salvar.");
    setBriefings((s) => s.map((b) => (b.id === editing.id ? editing : b)));
    toast.success("Briefing atualizado.");
    setEditing(null);
  };

  const copyLink = async (token: string) => {
    const url = `${window.location.origin}/briefing/${token}`;
    await navigator.clipboard.writeText(url);
    toast.success("Link copiado!");
  };


  const loadLeads = async () => {
    const { data, error } = await supabase
      .from("leads")
      .select("*")
      .order("created_at", { ascending: false });
    if (error) {
      toast.error("Erro ao carregar leads.");
      return;
    }
    setLeads((data ?? []) as Lead[]);
  };

  const loadSettings = async () => {
    const [pub, priv] = await Promise.all([
      supabase.from("site_settings").select("*").eq("id", true).maybeSingle(),
      supabase.from("private_settings" as never).select("*").eq("id", true).maybeSingle(),
    ]);
    const data = pub.data as Record<string, unknown> | null;
    const p = priv.data as Record<string, unknown> | null;
    if (data) {
      setSettings({
        gtm_id: (data.gtm_id as string) ?? "",
        meta_pixel_id: (data.meta_pixel_id as string) ?? "",
        ga4_id: (data.ga4_id as string) ?? "",
        google_ads_id: (data.google_ads_id as string) ?? "",
        tiktok_pixel_id: (data.tiktok_pixel_id as string) ?? "",
        whatsapp_number: (data.whatsapp_number as string) ?? "",
        whatsapp_message_template: (data.whatsapp_message_template as string) ?? "",
        custom_head_html: (data.custom_head_html as string) ?? "",
        cal_link: (data.cal_link as string) ?? "",
        meta_capi_token: (p?.meta_capi_token as string) ?? "",
        meta_capi_test_event_code: (p?.meta_capi_test_event_code as string) ?? "",
        meta_ad_account_id: (p?.meta_ad_account_id as string) ?? "",
        meta_ads_token: (p?.meta_ads_token as string) ?? "",

      });
    }
  };

  const saveSettings = async (e: React.FormEvent) => {
    e.preventDefault();
    setSavingSettings(true);
    const payload = {
      gtm_id: settings.gtm_id?.trim() || null,
      meta_pixel_id: settings.meta_pixel_id?.trim() || null,
      ga4_id: settings.ga4_id?.trim() || null,
      google_ads_id: settings.google_ads_id?.trim() || null,
      tiktok_pixel_id: settings.tiktok_pixel_id?.trim() || null,
      whatsapp_number: settings.whatsapp_number?.trim() || null,
      whatsapp_message_template: settings.whatsapp_message_template?.trim() || null,
      custom_head_html: settings.custom_head_html?.trim() || null,
      cal_link: settings.cal_link?.trim() || null,
      updated_at: new Date().toISOString(),

    };
    const privatePayload = {
      meta_capi_token: settings.meta_capi_token?.trim() || null,
      meta_capi_test_event_code: settings.meta_capi_test_event_code?.trim() || null,
      meta_ad_account_id: settings.meta_ad_account_id?.trim() || null,
      meta_ads_token: settings.meta_ads_token?.trim() || null,
      updated_at: new Date().toISOString(),
    };
    const [pubRes, privRes] = await Promise.all([
      supabase.from("site_settings").update(payload).eq("id", true),
      (supabase.from("private_settings" as never) as never as { update: (p: unknown) => { eq: (c: string, v: boolean) => Promise<{ error: unknown }> } }).update(privatePayload).eq("id", true),
    ]);
    setSavingSettings(false);
    if (pubRes.error || privRes.error) {
      toast.error("Erro ao salvar.");
      return;
    }
    toast.success("Configurações salvas. Recarregue as landing pages para aplicar.");
  };

  const deleteLead = async (id: string) => {
    if (!confirm("Excluir este lead?")) return;
    const { error } = await supabase.from("leads").delete().eq("id", id);
    if (error) return toast.error("Erro ao excluir.");
    setLeads((s) => s.filter((l) => l.id !== id));
  };

  const logout = async () => {
    await supabase.auth.signOut();
    navigate({ to: "/login" });
  };

  const exportCsv = () => {
    const headers = [
      "Data", "Nome", "Email", "Telefone", "Cidade", "Nicho", "Variante A/B",
      "utm_source", "utm_medium", "utm_campaign", "utm_term", "utm_content",
      "referrer", "landing_path",
    ];
    const rows = filtered.map((l) => [
      new Date(l.created_at).toLocaleString("pt-BR"),
      l.nome, l.email, l.telefone, l.cidade, l.nicho, l.variant ?? "",
      l.utm_source ?? "", l.utm_medium ?? "", l.utm_campaign ?? "", l.utm_term ?? "", l.utm_content ?? "",
      l.referrer ?? "", l.landing_path ?? "",
    ]);
    const csv = [headers, ...rows]
      .map((row) => row.map((v) => `"${String(v).replace(/"/g, '""')}"`).join(","))
      .join("\n");
    const blob = new Blob([`\uFEFF${csv}`], { type: "text/csv;charset=utf-8;" });
    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url;
    a.download = `leads-${new Date().toISOString().slice(0, 10)}.csv`;
    a.click();
    URL.revokeObjectURL(url);
  };

  const nichos = Array.from(new Set(leads.map((l) => l.nicho)));
  const filtered = filter === "todos" ? leads : leads.filter((l) => l.nicho === filter);

  // A/B summary for estética
  const esteticaLeads = leads.filter((l) => l.nicho === "Estética");
  const variantA = esteticaLeads.filter((l) => l.variant === "A").length;
  const variantB = esteticaLeads.filter((l) => l.variant === "B").length;
  const variantTotal = variantA + variantB;
  const showAbSummary = filter === "Estética" && variantTotal > 0;

  if (loading) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-background">
        <p className="text-muted-foreground">Carregando painel...</p>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-background">
      <header className="border-b border-border bg-card">
        <div className="mx-auto flex max-w-6xl items-center justify-between px-6 py-4">
          <Link to="/" className="flex items-center gap-3">
            <img src={logo} alt=".PONTO" className="h-8 w-auto" />
            <span className="text-sm font-bold uppercase tracking-widest">Painel</span>
          </Link>
          <button
            onClick={logout}
            className="rounded-full border border-border px-4 py-2 text-sm font-semibold hover:bg-muted"
          >
            Sair
          </button>
        </div>
      </header>

      <div className="mx-auto max-w-6xl px-6 py-8">
        <div className="mb-8 flex gap-2 border-b border-border">
          {[
            { id: "leads", label: `Leads (${leads.length})` },
            { id: "briefings", label: `Briefings (${briefings.length})` },
            { id: "forms", label: "Formulários" },
            { id: "pixels", label: "Pixels & Tag Manager" },
          ].map((t) => (
            <button
              key={t.id}
              onClick={() => setTab(t.id as typeof tab)}
              className={`px-4 py-3 text-sm font-bold uppercase tracking-wider transition-colors ${
                tab === t.id
                  ? "border-b-2 border-primary text-primary"
                  : "text-muted-foreground hover:text-foreground"
              }`}
            >
              {t.label}
            </button>
          ))}
        </div>

        {tab === "leads" ? (
          <div>
            <div className="mb-4 flex flex-wrap items-center justify-between gap-3">
              <select
                value={filter}
                onChange={(e) => setFilter(e.target.value)}
                className="rounded-lg border border-border bg-card px-3 py-2 text-sm"
              >
                <option value="todos">Todos os nichos</option>
                {nichos.map((n) => (
                  <option key={n} value={n}>
                    {n}
                  </option>
                ))}
              </select>
              <button
                onClick={exportCsv}
                disabled={!filtered.length}
                className="rounded-lg bg-[#3DFF8A] px-4 py-2 text-sm font-bold text-black disabled:opacity-50"
              >
                Exportar CSV ↓
              </button>
            </div>

            {showAbSummary && (
              <div className="mb-6 rounded-2xl border border-border bg-card p-5">
                <div className="mb-3 flex items-center justify-between">
                  <div>
                    <div className="text-xs font-bold uppercase tracking-widest text-muted-foreground">
                      Teste A/B — Estética
                    </div>
                    <div className="text-sm text-muted-foreground">
                      Variantes do hero/CTA · {variantTotal} leads atribuídos
                    </div>
                  </div>
                </div>
                <div className="grid gap-3 md:grid-cols-2">
                  {[
                    { id: "A", label: "Variante A — Máquina de pacientes", count: variantA },
                    { id: "B", label: "Variante B — Agenda cheia 30d", count: variantB },
                  ].map((v) => {
                    const pct = variantTotal ? Math.round((v.count / variantTotal) * 100) : 0;
                    const winner = v.count === Math.max(variantA, variantB) && variantTotal > 0;
                    return (
                      <div
                        key={v.id}
                        className={`rounded-xl border p-4 ${
                          winner ? "border-[#3DFF8A]/60 bg-[#3DFF8A]/5" : "border-border bg-background"
                        }`}
                      >
                        <div className="flex items-center justify-between">
                          <span className="text-sm font-bold">{v.label}</span>
                          {winner && (
                            <span className="rounded-full bg-[#3DFF8A] px-2 py-0.5 text-[10px] font-black uppercase text-black">
                              Líder
                            </span>
                          )}
                        </div>
                        <div className="mt-2 flex items-baseline gap-2">
                          <span className="text-2xl font-black">{v.count}</span>
                          <span className="text-xs text-muted-foreground">leads · {pct}%</span>
                        </div>
                        <div className="mt-2 h-2 overflow-hidden rounded-full bg-muted">
                          <div
                            className="h-full bg-gradient-to-r from-primary to-[#3DFF8A]"
                            style={{ width: `${pct}%` }}
                          />
                        </div>
                      </div>
                    );
                  })}
                </div>
              </div>
            )}

            {filtered.length === 0 ? (
              <div className="rounded-2xl border border-dashed border-border bg-card p-12 text-center text-muted-foreground">
                Nenhum lead ainda.
              </div>
            ) : (
              <div className="overflow-x-auto rounded-2xl border border-border bg-card">
                <table className="w-full text-sm">
                  <thead className="bg-muted/40 text-left text-xs uppercase tracking-wider text-muted-foreground">
                    <tr>
                      <th className="px-4 py-3">Data</th>
                      <th className="px-4 py-3">Nome</th>
                      <th className="px-4 py-3">Contato</th>
                      <th className="px-4 py-3">Cidade</th>
                      <th className="px-4 py-3">Nicho</th>
                      <th className="px-4 py-3">Origem (UTM)</th>
                      <th className="px-4 py-3">A/B</th>
                      <th className="px-4 py-3"></th>
                    </tr>
                  </thead>
                  <tbody>
                    {filtered.map((l) => (
                      <tr key={l.id} className="border-t border-border hover:bg-muted/20">
                        <td className="px-4 py-3 text-xs text-muted-foreground">
                          {new Date(l.created_at).toLocaleString("pt-BR")}
                        </td>
                        <td className="px-4 py-3 font-semibold">{l.nome}</td>
                        <td className="px-4 py-3">
                          <div>{l.email}</div>
                          <div className="text-xs text-muted-foreground">{l.telefone}</div>
                        </td>
                        <td className="px-4 py-3">{l.cidade}</td>
                        <td className="px-4 py-3">
                          <span className="rounded-full bg-primary/15 px-2 py-0.5 text-xs font-bold text-primary">
                            {l.nicho}
                          </span>
                        </td>
                        <td className="px-4 py-3 text-xs">
                          {l.utm_source || l.utm_campaign ? (
                            <div className="space-y-0.5">
                              <div className="font-semibold">{l.utm_source ?? "—"}{l.utm_medium ? ` · ${l.utm_medium}` : ""}</div>
                              {l.utm_campaign && (
                                <div className="text-muted-foreground">{l.utm_campaign}</div>
                              )}
                            </div>
                          ) : (
                            <span className="text-muted-foreground">orgânico</span>
                          )}
                        </td>
                        <td className="px-4 py-3">
                          {l.variant ? (
                            <span
                              className={`rounded-full px-2 py-0.5 text-xs font-black ${
                                l.variant === "A"
                                  ? "bg-blue-500/15 text-blue-500"
                                  : "bg-pink-500/15 text-pink-500"
                              }`}
                            >
                              {l.variant}
                            </span>
                          ) : (
                            <span className="text-xs text-muted-foreground">—</span>
                          )}
                        </td>
                        <td className="px-4 py-3 text-right">
                          <button
                            onClick={() => deleteLead(l.id)}
                            className="text-xs text-destructive hover:underline"
                          >
                            Excluir
                          </button>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            )}
          </div>
        ) : tab === "briefings" ? (
          <div className="space-y-6">
            <div className="rounded-2xl border border-border bg-card p-5">
              <h3 className="mb-3 text-sm font-black uppercase tracking-wider">
                Criar novo briefing
              </h3>
              <div className="flex flex-wrap gap-2">
                <input
                  value={newClientName}
                  onChange={(e) => setNewClientName(e.target.value)}
                  placeholder="Nome do cliente (ex: Padaria do João)"
                  className="flex-1 min-w-[240px] rounded-lg border border-border bg-background px-3 py-2 text-sm"
                />
                <button
                  onClick={createBriefing}
                  disabled={creatingBriefing}
                  className="rounded-lg bg-[#3DFF8A] px-4 py-2 text-sm font-bold text-black disabled:opacity-60"
                >
                  {creatingBriefing ? "Criando…" : "Gerar link"}
                </button>
              </div>
              <p className="mt-2 text-xs text-muted-foreground">
                Um link único é gerado e copiado para sua área de transferência. Envie para o cliente preencher.
              </p>
            </div>

            {briefings.length === 0 ? (
              <div className="rounded-2xl border border-dashed border-border bg-card p-12 text-center text-muted-foreground">
                Nenhum briefing ainda.
              </div>
            ) : (
              <div className="overflow-x-auto rounded-2xl border border-border bg-card">
                <table className="w-full text-sm">
                  <thead className="bg-muted/40 text-left text-xs uppercase tracking-wider text-muted-foreground">
                    <tr>
                      <th className="px-4 py-3">Cliente</th>
                      <th className="px-4 py-3">Status</th>
                      <th className="px-4 py-3">Criado</th>
                      <th className="px-4 py-3">Enviado</th>
                      <th className="px-4 py-3 text-right">Ações</th>
                    </tr>
                  </thead>
                  <tbody>
                    {briefings.map((b) => (
                      <tr key={b.id} className="border-t border-border hover:bg-muted/20">
                        <td className="px-4 py-3 font-semibold">{b.client_name}</td>
                        <td className="px-4 py-3">
                          <span
                            className={`rounded-full px-2 py-0.5 text-xs font-black ${
                              b.status === "submitted"
                                ? "bg-[#3DFF8A]/20 text-[#3DFF8A]"
                                : "bg-yellow-500/15 text-yellow-500"
                            }`}
                          >
                            {b.status === "submitted" ? "Enviado" : "Pendente"}
                          </span>
                        </td>
                        <td className="px-4 py-3 text-xs text-muted-foreground">
                          {new Date(b.created_at).toLocaleString("pt-BR")}
                        </td>
                        <td className="px-4 py-3 text-xs text-muted-foreground">
                          {b.submitted_at
                            ? new Date(b.submitted_at).toLocaleString("pt-BR")
                            : "—"}
                        </td>
                        <td className="px-4 py-3 text-right space-x-3">
                          <button
                            onClick={() => copyLink(b.token)}
                            className="text-xs font-semibold text-primary hover:underline"
                          >
                            Copiar link
                          </button>
                          <button
                            onClick={() =>
                              setEditing({
                                ...b,
                                data: { ...emptyBriefingData(), ...(b.data || {}) },
                              })
                            }
                            className="text-xs font-semibold hover:underline"
                          >
                            Ver / Editar
                          </button>
                          <button
                            onClick={() => generateBriefingPdf(b.client_name, b.data || {})}
                            className="text-xs font-semibold hover:underline"
                          >
                            PDF
                          </button>
                          <button
                            onClick={() => deleteBriefing(b.id)}
                            className="text-xs text-destructive hover:underline"
                          >
                            Excluir
                          </button>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            )}

            {editing && (
              <BriefingEditor
                briefing={editing}
                onChange={setEditing}
                onClose={() => setEditing(null)}
                onSave={saveBriefingEdit}
                onPdf={() => generateBriefingPdf(editing.client_name, editing.data)}
              />
            )}
          </div>
        ) : tab === "forms" ? (
          <FormsAdmin />
        ) : (
          <form
            onSubmit={saveSettings}
            className="space-y-5 rounded-2xl border border-border bg-card p-6"
          >
            <p className="text-sm text-muted-foreground">
              Os códigos abaixo são carregados automaticamente em todas as landing pages do site.
              Deixe em branco para desativar.
            </p>

            <Field
              label="Google Tag Manager (GTM ID)"
              placeholder="GTM-XXXXXXX"
              value={settings.gtm_id ?? ""}
              onChange={(v) => setSettings((s) => ({ ...s, gtm_id: v }))}
            />
            <Field
              label="Meta Pixel (Facebook/Instagram)"
              placeholder="1234567890"
              value={settings.meta_pixel_id ?? ""}
              onChange={(v) => setSettings((s) => ({ ...s, meta_pixel_id: v }))}
            />
            <Field
              label="Google Analytics 4 (Measurement ID)"
              placeholder="G-XXXXXXXXXX"
              value={settings.ga4_id ?? ""}
              onChange={(v) => setSettings((s) => ({ ...s, ga4_id: v }))}
            />
            <Field
              label="Google Ads (Conversion ID)"
              placeholder="AW-XXXXXXXXX"
              value={settings.google_ads_id ?? ""}
              onChange={(v) => setSettings((s) => ({ ...s, google_ads_id: v }))}
            />
            <Field
              label="TikTok Pixel"
              placeholder="CXXXXXXXXXXXXXXXXXXX"
              value={settings.tiktok_pixel_id ?? ""}
              onChange={(v) => setSettings((s) => ({ ...s, tiktok_pixel_id: v }))}
            />

            <div className="rounded-xl border border-emerald-500/30 bg-emerald-500/5 p-5">
              <h3 className="text-sm font-black uppercase tracking-wider text-emerald-400">
                Cal.com — Agendamento após envio
              </h3>
              <p className="mt-1 text-xs text-muted-foreground">
                Ao preencher este campo, todos os formulários exibirão o widget do Cal.com na tela de
                agradecimento para o lead agendar uma reunião. Aceita o handle (ex.: <code className="font-mono">seunome/30min</code>)
                ou a URL completa (<code className="font-mono">https://cal.com/seunome/30min</code>). Deixe em branco para desativar.
              </p>
              <div className="mt-4">
                <Field
                  label="Cal.com link"
                  placeholder="seunome/30min"
                  value={settings.cal_link ?? ""}
                  onChange={(v) => setSettings((s) => ({ ...s, cal_link: v }))}
                />
              </div>
            </div>



            <div className="rounded-xl border border-blue-500/30 bg-blue-500/5 p-5">
              <h3 className="text-sm font-black uppercase tracking-wider text-blue-400">
                Meta — API de Conversões (CAPI)
              </h3>
              <p className="mt-1 text-xs text-muted-foreground">
                Eventos server-side (Lead e Contact) são enviados para o Pixel acima usando este token.
                Crie o token em Eventos &gt; Configurações &gt; API de Conversões no Gerenciador de Eventos da Meta.
              </p>
              <div className="mt-4 space-y-4">
                <Field
                  label="Access Token (CAPI)"
                  placeholder="EAAB..."
                  value={settings.meta_capi_token ?? ""}
                  onChange={(v) => setSettings((s) => ({ ...s, meta_capi_token: v }))}
                />
                <Field
                  label="Test Event Code (opcional, para testar)"
                  placeholder="TEST12345"
                  value={settings.meta_capi_test_event_code ?? ""}
                  onChange={(v) => setSettings((s) => ({ ...s, meta_capi_test_event_code: v }))}
                />
              </div>
            </div>

            <div className="rounded-xl border border-purple-500/30 bg-purple-500/5 p-5">
              <h3 className="text-sm font-black uppercase tracking-wider text-purple-400">
                Meta — Conversões Personalizadas (Ad Account)
              </h3>
              <p className="mt-1 text-xs text-muted-foreground">
                Usado para criar automaticamente <strong>Conversões Personalizadas</strong> (uma por formulário,
                nome <code className="font-mono">Lead_&lt;slug&gt;</code>) no Ads Manager. Requer um token de
                usuário do sistema com escopo <code className="font-mono">ads_management</code>.
                Se vazio, o token da CAPI acima será tentado.
              </p>
              <div className="mt-4 space-y-4">
                <Field
                  label="Ad Account ID"
                  placeholder="act_1234567890"
                  value={settings.meta_ad_account_id ?? ""}
                  onChange={(v) => setSettings((s) => ({ ...s, meta_ad_account_id: v }))}
                />
                <Field
                  label="Access Token (ads_management) — opcional"
                  placeholder="EAAB... (deixe vazio para usar o token da CAPI)"
                  value={settings.meta_ads_token ?? ""}
                  onChange={(v) => setSettings((s) => ({ ...s, meta_ads_token: v }))}
                />
              </div>
            </div>


            <div className="rounded-xl border border-border bg-background p-5">
              <h3 className="text-sm font-black uppercase tracking-wider">
                Scripts personalizados no &lt;head&gt;
              </h3>
              <p className="mt-1 text-xs text-muted-foreground">
                Cole aqui qualquer HTML / &lt;script&gt; / &lt;meta&gt; que deve ser injetado no cabeçalho de todas as páginas
                (ex.: Hotjar, Clarity, Crisp, Search Console, verificações de domínio, scripts próprios).
              </p>
              <textarea
                rows={8}
                value={settings.custom_head_html ?? ""}
                onChange={(e) =>
                  setSettings((s) => ({ ...s, custom_head_html: e.target.value }))
                }
                placeholder={`<!-- Exemplo -->\n<script>console.log("oi")</script>\n<meta name="minha-verificacao" content="abc" />`}
                className="mt-3 w-full rounded-xl border border-border bg-card px-4 py-3 text-xs font-mono outline-none focus:border-primary"
              />
            </div>


            <div className="rounded-xl border border-[#3DFF8A]/30 bg-[#3DFF8A]/5 p-5">
              <h3 className="text-sm font-black uppercase tracking-wider text-[#3DFF8A]">
                WhatsApp — botão flutuante
              </h3>
              <p className="mt-1 text-xs text-muted-foreground">
                Configure o número e a mensagem usada nas landing pages.
                Placeholders disponíveis: <code className="text-[#3DFF8A]">{"{nome}"}</code>,{" "}
                <code className="text-[#3DFF8A]">{"{cidade}"}</code>,{" "}
                <code className="text-[#3DFF8A]">{"{nicho}"}</code>.
                Eles são preenchidos automaticamente com os dados do formulário e do nicho da página.
              </p>

              <div className="mt-4 space-y-4">
                <Field
                  label="Número WhatsApp (com DDI + DDD, só dígitos)"
                  placeholder="5511999999999"
                  value={settings.whatsapp_number ?? ""}
                  onChange={(v) => setSettings((s) => ({ ...s, whatsapp_number: v }))}
                />
                <div>
                  <label className="mb-2 block text-xs font-bold uppercase tracking-wider text-muted-foreground">
                    Mensagem pré-preenchida
                  </label>
                  <textarea
                    rows={4}
                    value={settings.whatsapp_message_template ?? ""}
                    onChange={(e) =>
                      setSettings((s) => ({ ...s, whatsapp_message_template: e.target.value }))
                    }
                    placeholder="Olá! Meu nome é {nome}, sou de {cidade} e vim pela página de {nicho}. Quero saber mais sobre tráfego pago."
                    className="w-full rounded-xl border border-border bg-background px-4 py-3 text-sm outline-none focus:border-primary"
                  />
                </div>
              </div>
            </div>


            <button
              type="submit"
              disabled={savingSettings}
              className="rounded-xl bg-[#3DFF8A] px-6 py-3 font-black uppercase text-black disabled:opacity-60"
            >
              {savingSettings ? "Salvando..." : "Salvar configurações"}
            </button>
          </form>
        )}
      </div>
    </div>
  );
}

function Field({
  label,
  value,
  onChange,
  placeholder,
}: {
  label: string;
  value: string;
  onChange: (v: string) => void;
  placeholder: string;
}) {
  return (
    <div>
      <label className="mb-2 block text-xs font-bold uppercase tracking-wider text-muted-foreground">
        {label}
      </label>
      <input
        value={value}
        onChange={(e) => onChange(e.target.value)}
        placeholder={placeholder}
        className="w-full rounded-xl border border-border bg-background px-4 py-3 text-sm font-mono outline-none focus:border-primary"
      />
    </div>
  );
}

function BriefingEditor({
  briefing,
  onChange,
  onClose,
  onSave,
  onPdf,
}: {
  briefing: Briefing;
  onChange: (b: Briefing) => void;
  onClose: () => void;
  onSave: () => void;
  onPdf: () => void;
}) {
  const setField = (key: string, value: string | string[]) =>
    onChange({ ...briefing, data: { ...briefing.data, [key]: value } });

  const toggleCheckbox = (key: string, opt: string) => {
    const cur = Array.isArray(briefing.data[key]) ? (briefing.data[key] as string[]) : [];
    setField(key, cur.includes(opt) ? cur.filter((o) => o !== opt) : [...cur, opt]);
  };

  return (
    <div className="fixed inset-0 z-50 grid place-items-center bg-black/70 p-4 overflow-y-auto">
      <div className="my-8 w-full max-w-3xl rounded-2xl border border-border bg-card p-6">
        <div className="mb-4 flex flex-wrap items-center justify-between gap-3 border-b border-border pb-4">
          <input
            value={briefing.client_name}
            onChange={(e) => onChange({ ...briefing, client_name: e.target.value })}
            className="text-xl font-black bg-transparent outline-none border-b border-transparent focus:border-primary"
          />
          <div className="flex gap-2">
            <button
              onClick={onPdf}
              className="rounded-lg border border-border px-3 py-2 text-xs font-bold"
            >
              Gerar PDF
            </button>
            <button
              onClick={onSave}
              className="rounded-lg bg-[#3DFF8A] px-3 py-2 text-xs font-bold text-black"
            >
              Salvar
            </button>
            <button
              onClick={onClose}
              className="rounded-lg border border-border px-3 py-2 text-xs"
            >
              Fechar
            </button>
          </div>
        </div>

        <div className="max-h-[70vh] space-y-6 overflow-y-auto pr-2">
          {BRIEFING_SECTIONS.map((section) => (
            <section key={section.title}>
              <h3 className="mb-3 text-sm font-black uppercase tracking-wider text-primary">
                {section.title}
              </h3>
              <div className="space-y-4">
                {section.fields.map((f) => (
                  <div key={f.key}>
                    <label className="mb-1 block text-xs font-semibold">{f.label}</label>
                    {f.type === "text" && (
                      <input
                        value={(briefing.data[f.key] as string) || ""}
                        onChange={(e) => setField(f.key, e.target.value)}
                        className="w-full rounded-lg border border-border bg-background px-3 py-2 text-sm"
                      />
                    )}
                    {f.type === "textarea" && (
                      <textarea
                        rows={3}
                        value={(briefing.data[f.key] as string) || ""}
                        onChange={(e) => setField(f.key, e.target.value)}
                        className="w-full rounded-lg border border-border bg-background px-3 py-2 text-sm"
                      />
                    )}
                    {f.type === "radio" && (
                      <div className="flex flex-wrap gap-2">
                        {f.options!.map((opt) => (
                          <label
                            key={opt}
                            className="flex items-center gap-2 rounded-lg border border-border bg-background px-3 py-1.5 text-xs cursor-pointer"
                          >
                            <input
                              type="radio"
                              name={`${briefing.id}-${f.key}`}
                              checked={briefing.data[f.key] === opt}
                              onChange={() => setField(f.key, opt)}
                            />
                            {opt}
                          </label>
                        ))}
                      </div>
                    )}
                    {f.type === "checkboxes" && (
                      <div className="flex flex-wrap gap-2">
                        {f.options!.map((opt) => {
                          const checked =
                            Array.isArray(briefing.data[f.key]) &&
                            (briefing.data[f.key] as string[]).includes(opt);
                          return (
                            <label
                              key={opt}
                              className={`flex items-center gap-2 rounded-lg border px-3 py-1.5 text-xs cursor-pointer ${
                                checked
                                  ? "border-primary bg-primary/10"
                                  : "border-border bg-background"
                              }`}
                            >
                              <input
                                type="checkbox"
                                checked={checked}
                                onChange={() => toggleCheckbox(f.key, opt)}
                              />
                              {opt}
                            </label>
                          );
                        })}
                      </div>
                    )}
                  </div>
                ))}
              </div>
            </section>
          ))}
        </div>
      </div>
    </div>
  );
}