import { useEffect, useState } from "react";
import { toast } from "sonner";
import { useServerFn } from "@tanstack/react-start";
import {
  listMetaCustomConversions,
  syncMetaCustomConversions,
} from "@/lib/meta-conversions.functions";

type Item = {
  form_id: string;
  slug: string;
  name: string;
  event_name: string;
  is_active: boolean;
  send_to_meta: boolean;
  status: "configured" | "missing";
  custom_conversion_id: string | null;
};

type Summary = {
  configured: boolean;
  pixel_id: string | null;
  ad_account_id: string | null;
  has_token: boolean;
  fetch_error: string | null;
  items: Item[];
  orphans: { id: string; name: string; custom_event_type: string }[];
  total_existing: number;
};

export function MetaConversionsPanel() {
  const load = useServerFn(listMetaCustomConversions);
  const sync = useServerFn(syncMetaCustomConversions);
  const [data, setData] = useState<Summary | null>(null);
  const [loading, setLoading] = useState(true);
  const [syncing, setSyncing] = useState(false);

  const refresh = async () => {
    setLoading(true);
    try {
      const r = (await load()) as Summary;
      setData(r);
    } catch (e) {
      toast.error(e instanceof Error ? e.message : "Erro ao carregar");
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    void refresh();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const onSync = async () => {
    setSyncing(true);
    try {
      const r = (await sync()) as {
        created: { slug: string }[];
        skipped: { slug: string; reason: string }[];
        failed: { slug: string; error: string }[];
      };
      if (r.created.length) toast.success(`Criadas ${r.created.length} conversão(ões) personalizada(s).`);
      if (r.failed.length) toast.error(`${r.failed.length} falha(s): ${r.failed.map((f) => f.slug).join(", ")}`);
      if (!r.created.length && !r.failed.length)
        toast.info("Nenhuma nova conversão criada — tudo já sincronizado.");
      await refresh();
    } catch (e) {
      toast.error(e instanceof Error ? e.message : "Erro ao sincronizar");
    } finally {
      setSyncing(false);
    }
  };

  if (loading) {
    return (
      <div className="rounded-2xl border border-border bg-card p-5 text-sm text-muted-foreground">
        Carregando conversões do Meta…
      </div>
    );
  }
  if (!data) return null;

  const missingCount = data.items.filter((i) => i.status === "missing" && i.send_to_meta).length;

  return (
    <div className="rounded-2xl border border-border bg-card p-5 space-y-4">
      <div className="flex flex-wrap items-start justify-between gap-3">
        <div>
          <h3 className="text-sm font-black uppercase tracking-wider">
            Conversões Personalizadas — Meta Ads
          </h3>
          <p className="text-xs text-muted-foreground mt-1 max-w-xl">
            Gera automaticamente uma <strong>Conversão Personalizada</strong> por formulário,
            associada ao evento <code className="font-mono">Lead_&lt;slug&gt;</code> do Pixel.
            Use-as como objetivo de otimização nas campanhas do Meta Ads.
          </p>
        </div>
        <button
          onClick={onSync}
          disabled={syncing || !data.configured}
          className="rounded-lg bg-[#3DFF8A] px-4 py-2 text-sm font-bold text-black disabled:opacity-50"
        >
          {syncing ? "Sincronizando…" : "Sincronizar rascunhos"}
        </button>
      </div>

      {!data.configured && (
        <div className="rounded-lg border border-amber-500/40 bg-amber-500/5 p-3 text-xs text-amber-300">
          Configuração incompleta em <strong>Pixels & Tag Manager</strong>:
          <ul className="mt-1 list-disc pl-5">
            {!data.pixel_id && <li>Meta Pixel ID</li>}
            {!data.ad_account_id && <li>Ad Account ID (act_…)</li>}
            {!data.has_token && <li>Access Token com escopo ads_management</li>}
          </ul>
        </div>
      )}

      {data.fetch_error && (
        <div className="rounded-lg border border-red-500/40 bg-red-500/5 p-3 text-xs text-red-300">
          Erro ao consultar Meta: {data.fetch_error}
        </div>
      )}

      <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
        <StatCard label="Formulários" value={data.items.length} />
        <StatCard label="Configuradas" value={data.items.filter((i) => i.status === "configured").length} />
        <StatCard label="Faltando" value={missingCount} tone={missingCount ? "warn" : undefined} />
        <StatCard label="Total no Meta" value={data.total_existing} />
      </div>

      <div className="overflow-x-auto rounded-xl border border-border">
        <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-3 py-2">Formulário</th>
              <th className="px-3 py-2">Evento do Pixel</th>
              <th className="px-3 py-2 text-center">Status</th>
              <th className="px-3 py-2 text-center">ID no Meta</th>
            </tr>
          </thead>
          <tbody>
            {data.items.length === 0 ? (
              <tr>
                <td colSpan={4} className="px-3 py-6 text-center text-muted-foreground">
                  Nenhum formulário ainda.
                </td>
              </tr>
            ) : (
              data.items.map((i) => (
                <tr key={i.form_id} className="border-t border-border">
                  <td className="px-3 py-2">
                    <div className="font-semibold">{i.name}</div>
                    <div className="text-xs font-mono text-muted-foreground">/f/{i.slug}</div>
                  </td>
                  <td className="px-3 py-2 font-mono text-xs">{i.event_name}</td>
                  <td className="px-3 py-2 text-center">
                    {i.status === "configured" ? (
                      <span className="inline-block rounded-full bg-emerald-500/15 px-2 py-0.5 text-xs font-semibold text-emerald-400">
                        Configurada
                      </span>
                    ) : !i.send_to_meta ? (
                      <span className="inline-block rounded-full bg-muted px-2 py-0.5 text-xs text-muted-foreground">
                        Meta desativado
                      </span>
                    ) : (
                      <span className="inline-block rounded-full bg-amber-500/15 px-2 py-0.5 text-xs font-semibold text-amber-400">
                        Faltando
                      </span>
                    )}
                  </td>
                  <td className="px-3 py-2 text-center font-mono text-xs">
                    {i.custom_conversion_id ?? "—"}
                  </td>
                </tr>
              ))
            )}
          </tbody>
        </table>
      </div>

      {data.orphans.length > 0 && (
        <div className="rounded-xl border border-border bg-background p-3">
          <div className="text-xs font-black uppercase tracking-wider text-muted-foreground mb-2">
            Outras conversões Lead_* no Meta (sem formulário correspondente)
          </div>
          <ul className="text-xs space-y-1">
            {data.orphans.map((o) => (
              <li key={o.id} className="font-mono">
                {o.name} <span className="text-muted-foreground">— {o.id}</span>
              </li>
            ))}
          </ul>
        </div>
      )}
    </div>
  );
}

function StatCard({
  label,
  value,
  tone,
}: {
  label: string;
  value: number;
  tone?: "warn";
}) {
  return (
    <div
      className={`rounded-xl border p-4 ${
        tone === "warn" ? "border-amber-500/40 bg-amber-500/5" : "border-border bg-background"
      }`}
    >
      <div className="text-xs uppercase tracking-wider text-muted-foreground">{label}</div>
      <div className="mt-1 text-2xl font-black font-mono">{value}</div>
    </div>
  );
}