"use client";

import { useEffect, useState } from "react";
import { useParams, useRouter } from "next/navigation";
import { AppShell } from "@/components/layout/AppShell";
import { Badge, Button, Card, CardContent } from "@/components/ui/index";
import { useLanguage } from "@/i18n/LanguageContext";
import { useAuth } from "@/hooks/useAuth";
import { hasPermission } from "@/lib/permissions";
import { formatCurrency, formatDate } from "@/lib/utils";
import { toast } from "sonner";

export default function ContractDetailsPage() {
  const router = useRouter();
  const params = useParams<{ id: string }>();
  const { user } = useAuth();
  const { language } = useLanguage();
  const isArabic = language === "ar";
  const canRead = !!user && hasPermission(user.role, "contracts:read");

  const [item, setItem] = useState<any | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    if (!canRead || !params?.id) return;
    let cancelled = false;
    setLoading(true);
    fetch(`/api/contracts/${params.id}`)
      .then(async (r) => {
        const json = await r.json();
        if (!r.ok) throw new Error(json.error ?? "Failed");
        return json.data;
      })
      .then((data) => {
        if (!cancelled) setItem(data);
      })
      .catch((e: any) => !cancelled && toast.error(e.message))
      .finally(() => !cancelled && setLoading(false));
    return () => {
      cancelled = true;
    };
  }, [canRead, params?.id]);

  const statusMapAr: Record<string, string> = {
    DRAFT: "مسودة",
    IN_REVIEW: "قيد المراجعة",
    ACTIVE: "نشط",
    EXPIRED: "منتهي",
    TERMINATED: "منهى",
  };

  return (
    <AppShell
      breadcrumbs={[
        { label: isArabic ? "العقود" : "Contracts", href: "/contracts" },
        { label: isArabic ? "التفاصيل" : "Details" },
      ]}
    >
      {!canRead ? (
        <Card>
          <CardContent className="py-10 text-center text-muted-foreground">
            {isArabic ? "ليس لديك صلاحية عرض العقد." : "You do not have permission to view contracts."}
          </CardContent>
        </Card>
      ) : loading ? (
        <Card><CardContent className="py-10 text-center text-muted-foreground">{isArabic ? "جاري التحميل..." : "Loading..."}</CardContent></Card>
      ) : !item ? (
        <Card><CardContent className="py-10 text-center text-muted-foreground">{isArabic ? "العقد غير موجود" : "Contract not found"}</CardContent></Card>
      ) : (
        <div className="space-y-4">
          <div className="flex items-center justify-between gap-2">
            <h1 className="text-xl font-bold">{item.title}</h1>
            <div className="flex gap-2">
              <Button variant="outline" onClick={() => router.push("/contracts")}>{isArabic ? "رجوع" : "Back"}</Button>
              <Button onClick={() => router.push(`/contracts/${item.id}/edit`)}>{isArabic ? "تعديل" : "Edit"}</Button>
            </div>
          </div>
          <Card>
            <CardContent className="py-5 grid grid-cols-1 sm:grid-cols-2 gap-3 text-sm">
              <div><span className="text-muted-foreground">{isArabic ? "الحالة: " : "Status: "}</span><Badge variant="secondary">{isArabic ? (statusMapAr[item.status] ?? item.status) : item.status}</Badge></div>
              <div><span className="text-muted-foreground">{isArabic ? "رقم العقد: " : "Contract #: "}</span>{item.contractNo ?? "—"}</div>
              <div><span className="text-muted-foreground">{isArabic ? "القيمة: " : "Value: "}</span>{formatCurrency(item.value, item.currency)}</div>
              <div><span className="text-muted-foreground">{isArabic ? "العميل: " : "Account: "}</span>{item.account?.name ?? "—"}</div>
              <div><span className="text-muted-foreground">{isArabic ? "تاريخ البداية: " : "Start Date: "}</span>{item.startDate ? formatDate(item.startDate) : "—"}</div>
              <div><span className="text-muted-foreground">{isArabic ? "تاريخ الانتهاء: " : "End Date: "}</span>{item.endDate ? formatDate(item.endDate) : "—"}</div>
              <div className="sm:col-span-2"><span className="text-muted-foreground">{isArabic ? "الوصف: " : "Description: "}</span>{item.description || "—"}</div>
            </CardContent>
          </Card>
        </div>
      )}
    </AppShell>
  );
}