"use client";

import { useCallback, useEffect, useState } from "react";
import Link from "next/link";
import { ArrowLeft, Loader2 } from "lucide-react";
import type { AdminCaseDetail } from "@/lib/admin-types";
import ScoringOverridePanel from "@/components/admin/ScoringOverridePanel";

export default function AdminCaseDetailPage({ params }: { params: Promise<{ id: string }> }) {
  const [caseId, setCaseId] = useState<string | null>(null);
  const [detail, setDetail] = useState<AdminCaseDetail | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");

  useEffect(() => {
    params.then((p) => setCaseId(p.id));
  }, [params]);

  const load = useCallback(async () => {
    if (!caseId) return;
    setLoading(true);
    setError("");
    try {
      const res = await fetch(`/api/admin/cases/${caseId}`);
      if (!res.ok) throw new Error("Case not found");
      const data = await res.json();
      setDetail(data.case);
    } catch (e: unknown) {
      setError(e instanceof Error ? e.message : "Failed to load case");
    } finally {
      setLoading(false);
    }
  }, [caseId]);

  useEffect(() => {
    load();
  }, [load]);

  const handleOverride = async (payload: { score: number; outcome: string; notes: string }) => {
    if (!caseId) return;
    const res = await fetch(`/api/admin/cases/${caseId}/scoring`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(payload),
    });
    if (!res.ok) {
      const body = await res.json().catch(() => ({}));
      throw new Error(body?.error?.message ?? "Override failed");
    }
    const data = await res.json();
    setDetail(data.case);
  };

  if (loading) {
    return (
      <div className="flex items-center justify-center py-20 gap-3">
        <Loader2 className="w-6 h-6 text-[#198F38] animate-spin" />
        <span className="font-inter text-sm text-[#042718]/50">Loading case…</span>
      </div>
    );
  }

  if (error || !detail) {
    return (
      <div className="text-center py-20">
        <p className="font-inter text-sm text-red-600">{error || "Case not found"}</p>
        <Link href="/admin/cases" className="mt-4 inline-block font-inter text-sm text-[#198F38]">
          Back to queue
        </Link>
      </div>
    );
  }

  return (
    <div className="space-y-6">
      <div>
        <Link
          href="/admin/cases"
          className="inline-flex items-center gap-1 font-inter text-sm text-[#042718]/50 hover:text-[#198F38] mb-3"
        >
          <ArrowLeft className="w-4 h-4" />
          Case queue
        </Link>
        <h1 className="font-onest text-2xl font-semibold text-[#042718]">{detail.financeCaseId}</h1>
        <p className="mt-1 font-inter text-sm text-[#042718]/60">
          {detail.farmerName} · {detail.phone}
        </p>
      </div>

      <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
        {[
          ["Status", detail.status],
          ["Amount", detail.amountUzs ? `${detail.amountUzs.toLocaleString()} so'm` : "—"],
          ["Step", detail.currentStep],
        ].map(([label, value]) => (
          <div key={label} className="rounded-xl border border-[#042718]/8 bg-white px-4 py-3">
            <p className="font-inter text-xs text-[#042718]/40 uppercase tracking-wide">{label}</p>
            <p className="font-inter text-sm font-medium text-[#042718] mt-0.5">{value}</p>
          </div>
        ))}
      </div>

      <ScoringOverridePanel caseDetail={detail} onOverride={handleOverride} />
    </div>
  );
}