"use client";

import Link from "next/link";
import type { AdminCaseSummary } from "@/lib/admin-types";

const STATUS_STYLES: Record<string, string> = {
  draft: "bg-[#042718]/5 text-[#042718]/60",
  submitted: "bg-blue-50 text-blue-700",
  scoring: "bg-amber-50 text-amber-700",
  under_review: "bg-violet-50 text-violet-700",
  approved: "bg-[#198F38]/10 text-[#198F38]",
  rejected: "bg-red-50 text-red-600",
};

function formatUzs(amount: number | null): string {
  if (amount == null) return "—";
  return new Intl.NumberFormat("uz-UZ").format(amount) + " so'm";
}

export default function AdminCaseTable({ cases }: { cases: AdminCaseSummary[] }) {
  if (cases.length === 0) {
    return (
      <div className="rounded-xl border border-[#042718]/8 bg-white p-10 text-center">
        <p className="font-inter text-sm text-[#042718]/50">No cases in queue yet.</p>
      </div>
    );
  }

  return (
    <div className="rounded-xl border border-[#042718]/8 bg-white overflow-hidden">
      <table className="w-full text-left">
        <thead>
          <tr className="border-b border-[#042718]/8 bg-[#042718]/[0.02]">
            {["Case", "Farmer", "Amount", "Score", "Status", ""].map((h) => (
              <th
                key={h}
                className="px-4 py-3 font-inter text-xs font-medium text-[#042718]/50 uppercase tracking-wide"
              >
                {h}
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {cases.map((c) => (
            <tr key={c.id} className="border-b border-[#042718]/5 last:border-0 hover:bg-[#198F38]/[0.02]">
              <td className="px-4 py-3">
                <p className="font-inter text-sm font-medium text-[#042718]">{c.financeCaseId}</p>
                <p className="font-inter text-xs text-[#042718]/40">{c.district ?? c.region ?? "—"}</p>
              </td>
              <td className="px-4 py-3">
                <p className="font-inter text-sm text-[#042718]">{c.farmerName}</p>
                <p className="font-inter text-xs text-[#042718]/40">{c.phone}</p>
              </td>
              <td className="px-4 py-3 font-inter text-sm text-[#042718]/80">{formatUzs(c.amountUzs)}</td>
              <td className="px-4 py-3 font-inter text-sm text-[#042718]/80">{c.score ?? "—"}</td>
              <td className="px-4 py-3">
                <span
                  className={`inline-flex px-2 py-0.5 rounded-full font-inter text-xs font-medium ${
                    STATUS_STYLES[c.status] ?? STATUS_STYLES.draft
                  }`}
                >
                  {c.status.replace("_", " ")}
                </span>
              </td>
              <td className="px-4 py-3 text-right">
                <Link
                  href={`/admin/cases/${c.id}`}
                  className="font-inter text-sm text-[#198F38] hover:underline"
                >
                  Review
                </Link>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}