"use client";

import { useEffect, useState } from "react";

type Snapshot = {
  date: string;
  newSubmissions: number;
  pendingSubmissions: number;
  pendingReviews: number;
  waitingChats: number;
  lowQualityProfiles: number;
  pendingDuplicates: number;
  newErrors: number;
  topActions: Array<{ kind: string; label: string; count: number; url: string }>;
};

type DigestRun = {
  id: string;
  runAt: string;
  slackOk: boolean;
  emailOk: boolean;
};

export function DigestDashboard() {
  const [data, setData] = useState<{ snapshot: Snapshot; history: DigestRun[] } | null>(null);
  const [busy, setBusy] = useState(false);

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

  async function send() {
    setBusy(true);
    try {
      await fetch("/api/admin/digest", { method: "POST" });
      await refresh();
    } finally {
      setBusy(false);
    }
  }

  return (
    <div className="space-y-6">
      <section className="rounded-2xl border border-border bg-white p-6">
        <div className="flex items-start justify-between gap-3 flex-wrap">
          <div>
            <h3 className="font-display text-lg font-semibold">Trenutni snapshot — {data?.snapshot.date}</h3>
            <p className="text-sm text-muted-foreground">
              Pošalji ručno ili pusti kroz cron da bude jutarnji digest.
            </p>
          </div>
          <button
            type="button"
            onClick={send}
            disabled={busy}
            className="rounded bg-primary px-4 py-2 text-sm font-bold text-primary-foreground disabled:opacity-50"
          >
            {busy ? "Šaljem..." : "📧 Pošalji digest"}
          </button>
        </div>
        {data?.snapshot && (
          <div className="mt-4 grid gap-3 sm:grid-cols-3 lg:grid-cols-4">
            {[
              ["Nove prijave danas", data.snapshot.newSubmissions],
              ["Pending prijava", data.snapshot.pendingSubmissions],
              ["Recenzije", data.snapshot.pendingReviews],
              ["Live chat", data.snapshot.waitingChats],
              ["Low quality", data.snapshot.lowQualityProfiles],
              ["Duplikati", data.snapshot.pendingDuplicates],
              ["Greške", data.snapshot.newErrors],
            ].map(([label, val]) => (
              <div key={label as string} className="rounded border border-border bg-zinc-50 p-3 text-center">
                <p className="text-[0.65rem] font-bold uppercase text-muted-foreground">{label}</p>
                <p className="mt-1 font-display text-2xl font-bold">{val}</p>
              </div>
            ))}
          </div>
        )}
      </section>

      <section className="rounded-2xl border border-border bg-white p-6">
        <h3 className="font-display text-base font-semibold">Istorijat digest-a (poslednjih 14)</h3>
        <ul className="mt-3 space-y-1.5 text-sm">
          {(data?.history ?? []).map((h) => (
            <li key={h.id} className="flex items-center justify-between">
              <span>{new Date(h.runAt).toLocaleString("sr-RS")}</span>
              <span className="flex gap-2 text-xs">
                <span className={h.slackOk ? "text-emerald-700" : "text-rose-700"}>
                  Slack: {h.slackOk ? "✓" : "✗"}
                </span>
                <span className={h.emailOk ? "text-emerald-700" : "text-rose-700"}>
                  Email: {h.emailOk ? "✓" : "✗"}
                </span>
              </span>
            </li>
          ))}
          {(data?.history ?? []).length === 0 && (
            <li className="text-muted-foreground">Još uvek nema digest run-ova.</li>
          )}
        </ul>
      </section>
    </div>
  );
}