"use client";

import { useEffect, useState } from "react";
import { useParams, useRouter } from "next/navigation";
import { AppShell } from "@/components/layout/AppShell";
import { Button, Card, CardContent, CardHeader, CardTitle, Input, Select, Textarea } from "@/components/ui/index";
import { useLanguage } from "@/i18n/LanguageContext";
import { toast } from "sonner";
import { useAuth } from "@/hooks/useAuth";
import { hasPermission } from "@/lib/permissions";

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

  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [title, setTitle] = useState("");
  const [description, setDescription] = useState("");
  const [contractNo, setContractNo] = useState("");
  const [value, setValue] = useState("0");
  const [currency, setCurrency] = useState("USD");
  const [status, setStatus] = useState("DRAFT");

  useEffect(() => {
    if (!id) return;
    let cancel = false;
    setLoading(true);
    fetch(`/api/contracts/${id}`)
      .then((r) => r.json())
      .then((d) => {
        if (cancel) return;
        const row = d.data;
        setTitle(row?.title ?? "");
        setDescription(row?.description ?? "");
        setContractNo(row?.contractNo ?? "");
        setValue(String(row?.value ?? 0));
        setCurrency(row?.currency ?? "USD");
        setStatus(row?.status ?? "DRAFT");
      })
      .catch(() => toast.error(isArabic ? "تعذر تحميل العقد" : "Failed to load contract"))
      .finally(() => !cancel && setLoading(false));
    return () => {
      cancel = true;
    };
  }, [id, isArabic]);

  const onSave = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!id) return;
    setSaving(true);
    try {
      const res = await fetch(`/api/contracts/${id}`, {
        method: "PATCH",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          title: title.trim(),
          description: description || null,
          contractNo: contractNo || null,
          value: Number(value) || 0,
          currency,
          status,
        }),
      });
      const json = await res.json();
      if (!res.ok) throw new Error(json.error ?? "Failed");
      toast.success(isArabic ? "تم تحديث العقد" : "Contract updated");
      router.push("/contracts");
    } catch (err: any) {
      toast.error(err.message ?? (isArabic ? "تعذر التحديث" : "Failed to update"));
    } finally {
      setSaving(false);
    }
  };

  return (
    <AppShell breadcrumbs={[{ label: isArabic ? "العقود" : "Contracts", href: "/contracts" }, { label: isArabic ? "تعديل" : "Edit" }]}>
      {!canUpdate ? (
        <Card>
          <CardContent className="py-10 text-center text-muted-foreground">
            {isArabic ? "ليس لديك صلاحية تعديل العقود." : "You do not have permission to edit contracts."}
          </CardContent>
        </Card>
      ) : (
      <form onSubmit={onSave} className="space-y-6">
        <Card>
          <CardHeader><CardTitle>{isArabic ? "تعديل العقد" : "Edit Contract"}</CardTitle></CardHeader>
          <CardContent className="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <Input label={isArabic ? "عنوان العقد" : "Contract Title"} value={title} onChange={(e) => setTitle(e.target.value)} />
            <Input label={isArabic ? "رقم العقد" : "Contract Number"} value={contractNo} onChange={(e) => setContractNo(e.target.value)} />
            <Input label={isArabic ? "القيمة" : "Value"} type="number" value={value} onChange={(e) => setValue(e.target.value)} />
            <Select
              label={isArabic ? "العملة" : "Currency"}
              value={currency}
              onChange={(e) => setCurrency(e.target.value)}
              options={[
                { value: "USD", label: "USD" },
                { value: "EUR", label: "EUR" },
                { value: "GBP", label: "GBP" },
                { value: "SAR", label: "SAR" },
              ]}
            />
            <Select
              label={isArabic ? "الحالة" : "Status"}
              value={status}
              onChange={(e) => setStatus(e.target.value)}
              options={[
                { value: "DRAFT", label: isArabic ? "مسودة" : "Draft" },
                { value: "IN_REVIEW", label: isArabic ? "قيد المراجعة" : "In Review" },
                { value: "ACTIVE", label: isArabic ? "نشط" : "Active" },
                { value: "EXPIRED", label: isArabic ? "منتهي" : "Expired" },
                { value: "TERMINATED", label: isArabic ? "منهى" : "Terminated" },
              ]}
            />
            <div className="sm:col-span-2">
              <Textarea label={isArabic ? "الوصف" : "Description"} value={description} onChange={(e) => setDescription(e.target.value)} />
            </div>
          </CardContent>
        </Card>
        <div className="flex justify-end gap-3">
          <Button type="button" variant="outline" onClick={() => router.back()} disabled={saving || loading}>{isArabic ? "إلغاء" : "Cancel"}</Button>
          <Button type="submit" loading={saving || loading}>{isArabic ? "حفظ" : "Save"}</Button>
        </div>
      </form>
      )}
    </AppShell>
  );
}