"use client";

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

type Finding = {
  kind: string;
  entityId: string;
  entityName: string;
  url: string;
  daysOld: number;
  detail?: string;
};

const KIND_LABEL: Record<string, string> = {
  stale_company: "Stagnira firma (>180d)",
  old_submission: "Prijava bez akcije (>14d)",
  expired_event: "Istekli događaj",
  expired_deal: "Istekla akcija",
  old_job: "Star posao",
  expired_plan: "Istekao plan",
};

export function OutdatedDashboard() {
  const [data, setData] = useState<{ findings: Finding[]; byKind: Record<string, number> } | null>(null);

  useEffect(() => {
    void fetch("/api/admin/outdated")
      .then((r) => r.json())
      .then(setData)
      .catch(() => null);
  }, []);

  return (
    <div className="space-y-4">
      <div className="grid gap-3 sm:grid-cols-3 lg:grid-cols-6">
        {Object.entries(data?.byKind ?? {}).map(([kind, count]) => (
          <div key={kind} className="rounded-xl border border-border bg-white p-3">
            <p className="text-[0.65rem] font-bold uppercase tracking-[0.14em] text-muted-foreground">
              {KIND_LABEL[kind] ?? kind}
            </p>
            <p className="mt-1 font-display text-2xl font-bold">{count}</p>
          </div>
        ))}
      </div>
      <div className="space-y-2">
        {(data?.findings ?? []).map((f, idx) => (
          <Link
            key={`${f.kind}-${f.entityId}-${idx}`}
            href={f.url}
            className="block rounded-xl border border-border bg-white p-3 hover:border-primary/40"
          >
            <div className="flex items-center justify-between gap-3">
              <div>
                <p className="text-[0.65rem] font-bold uppercase text-muted-foreground">
                  {KIND_LABEL[f.kind] ?? f.kind}
                </p>
                <p className="mt-1 font-semibold">{f.entityName}</p>
                {f.detail && <p className="text-xs text-muted-foreground">{f.detail}</p>}
              </div>
              <span className="rounded bg-amber-100 px-2 py-0.5 text-xs font-bold text-amber-800">
                {f.daysOld} dana
              </span>
            </div>
          </Link>
        ))}
      </div>
    </div>
  );
}