"use client";

import { useEffect, useState } from "react";
import { Trash2 } from "lucide-react";
import Field from "@/components/ui/Field";
import { Button } from "@/components/ui/button";

type WarrantyRow = {
  id: string;
};

export default function WarrantiesFields({
  name = "warranties",
}: {
  name?: string;
}) {
  const [rows, setRows] = useState<WarrantyRow[]>([]);

  useEffect(() => {
    if (rows.length === 0) {
      setRows([{ id: String(Date.now()) }]);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return (
    <div className="space-y-4">
      <div className="space-y-3">
        {rows.map((row, idx) => (
          <div
            key={row.id}
            className="flex items-center gap-3 mb-6"
          >
            <div className="w-full flex flex-col md:flex-row gap-3">
              <Field
                name={`${name}[${idx}][title]`}
                label="الضمان"
                type="text"
                placeholder="مثال: ضمان السباكة"
              />
              <Field
                name={`${name}[${idx}][years]`}
                label="عدد سنوات الضمان"
                type="number"
                placeholder="مثال: 10"
              />
            </div>  
            <button
              type="button"
              className="h-9 w-9 flex items-center justify-center rounded-md border border-input bg-white hover:bg-[#F8FAFC] disabled:opacity-50"
              onClick={() => setRows((prev) => prev.filter((x) => x.id !== row.id))}
              disabled={rows.length === 1}
              aria-label="حذف الضمان"
              title="حذف"
            >
              <Trash2 className="w-4 h-4 text-[#45556C]" />
            </button>
          </div>
        ))}
      </div>

      <div className="flex justify-start">
        <Button
          type="button"
          variant="secondary"
          size="sm"
          className="rounded-full"
          onClick={() => setRows((prev) => [...prev, { id: String(Date.now()) }])}
        >
          + إضافة ضمان آخر
        </Button>
      </div>
    </div>
  );
}