"use client";

import Link from "next/link";
import { useEffect, useState } from "react";

type Pending = {
  id: string;
  confidence: number;
  reasons: string[];
  primary: { id: string; name: string; slug: string };
  candidate: { id: string; name: string; slug: string };
};

export function DuplicatesDashboard() {
  const [data, setData] = useState<{ pending: Pending[]; stats: Record<string, number> } | null>(null);
  const [busy, setBusy] = useState(false);

  async function refresh() {
    const res = await fetch("/api/admin/duplicates");
    if (res.ok) setData(await res.json());
  }
  useEffect(() => {
    void refresh();
  }, []);

  async function scan() {
    setBusy(true);
    try {
      await fetch("/api/admin/duplicates", {
        method: "POST",
        headers: { "content-type": "application/json" },
        body: JSON.stringify({ action: "scan" }),
      });
      await refresh();
    } finally {
      setBusy(false);
    }
  }

  async function actOn(id: string, action: "merge" | "ignore") {
    await fetch("/api/admin/duplicates", {
      method: "POST",
      headers: { "content-type": "application/json" },
      body: JSON.stringify({ action, id }),
    });
    await refresh();
  }

  return (
    <div className="space-y-6">
      <section className="rounded-2xl border border-border bg-white p-6">
        <div className="flex items-center justify-between gap-3">
          <div>
            <p className="text-xs font-bold uppercase tracking-[0.16em] text-muted-foreground">
              Pending review
            </p>
            <p className="mt-2 font-display text-3xl font-bold">{data?.stats?.PENDING ?? 0}</p>
          </div>
          <button
            type="button"
            onClick={scan}
            disabled={busy}
            className="rounded-lg bg-primary px-4 py-2 text-sm font-bold text-primary-foreground disabled:opacity-50"
          >
            {busy ? "Skeniram..." : "🔍 Skeniraj duplikate"}
          </button>
        </div>
      </section>

      <section className="rounded-2xl border border-border bg-white p-6">
        <h3 className="font-display text-lg font-semibold text-foreground">Potencijalni duplikati</h3>
        <div className="mt-4 space-y-3">
          {(data?.pending ?? []).map((p) => (
            <div key={p.id} className="rounded-xl border border-border p-4">
              <div className="flex items-center justify-between gap-3">
                <span
                  className={`rounded-full px-2 py-0.5 text-xs font-bold ${
                    p.confidence >= 80
                      ? "bg-rose-100 text-rose-800"
                      : p.confidence >= 60
                        ? "bg-amber-100 text-amber-800"
                        : "bg-zinc-100 text-zinc-700"
                  }`}
                >
                  {p.confidence}% confidence
                </span>
                <div className="text-xs text-muted-foreground">
                  Razlog: {p.reasons.join(", ")}
                </div>
              </div>
              <div className="mt-3 grid gap-3 sm:grid-cols-2">
                <Link
                  href={`/admin/kompanije/${p.primary.id}`}
                  className="rounded-lg border border-border bg-zinc-50 p-3 text-sm hover:border-primary/30"
                >
                  <p className="text-[0.65rem] font-bold uppercase text-muted-foreground">Primary</p>
                  <p className="mt-1 font-semibold">{p.primary.name}</p>
                </Link>
                <Link
                  href={`/admin/kompanije/${p.candidate.id}`}
                  className="rounded-lg border border-border bg-zinc-50 p-3 text-sm hover:border-primary/30"
                >
                  <p className="text-[0.65rem] font-bold uppercase text-muted-foreground">Candidate</p>
                  <p className="mt-1 font-semibold">{p.candidate.name}</p>
                </Link>
              </div>
              <div className="mt-3 flex justify-end gap-2">
                <button
                  type="button"
                  onClick={() => actOn(p.id, "ignore")}
                  className="rounded border border-border bg-white px-3 py-1 text-xs font-semibold hover:border-zinc-400"
                >
                  Nije duplikat
                </button>
                <button
                  type="button"
                  onClick={() => actOn(p.id, "merge")}
                  className="rounded bg-primary px-3 py-1 text-xs font-bold text-primary-foreground"
                >
                  Označi kao merged
                </button>
              </div>
            </div>
          ))}
          {(data?.pending ?? []).length === 0 && (
            <p className="text-sm text-muted-foreground">Nema pending duplikata. Pokreni skeniranje gore.</p>
          )}
        </div>
      </section>
    </div>
  );
}