"use client";

import { useState } from "react";
import { AlertTriangle } from "lucide-react";
import { deleteOrphanAction } from "@/app/actions/admin";
import { Input } from "@/components/ui/input";
import { SubmitButton } from "@/components/forms/submit-button";

export function DeleteOrphanForm({
  orphanId,
  caseNumber,
  orphanName
}: {
  orphanId: string;
  caseNumber: string;
  orphanName: string;
}) {
  const [confirmation, setConfirmation] = useState("");
  const matches = confirmation.trim() === caseNumber;

  return (
    <form action={deleteOrphanAction} className="grid gap-4">
      <input type="hidden" name="id" value={orphanId} />
      <div className="flex items-start gap-3 rounded-md border border-[#e1b6b7] bg-[#fff4f4] p-4 text-[#7d292b]">
        <AlertTriangle className="mt-0.5 shrink-0" size={20} aria-hidden />
        <p className="text-sm font-semibold leading-7">
          سيحذف هذا الإجراء نهائياً ملف {orphanName} ({caseNumber}) وجميع الوثائق والكفالات والدفعات والتحويلات والإيصالات التابعة له.
        </p>
      </div>
      <div>
        <label htmlFor="caseConfirmation" className="mb-2 block text-sm font-bold">
          اكتب رقم الحالة للتأكيد: <span dir="ltr">{caseNumber}</span>
        </label>
        <Input
          id="caseConfirmation"
          name="caseConfirmation"
          value={confirmation}
          onChange={(event) => setConfirmation(event.target.value)}
          dir="ltr"
          autoComplete="off"
        />
      </div>
      <SubmitButton pendingText="جارٍ حذف الملف بالكامل..." variant="danger" disabled={!matches} className="w-full sm:w-auto sm:justify-self-start">
        حذف ملف الحالة نهائياً
      </SubmitButton>
    </form>
  );
}
