"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 LandmarkRow = {
  id: string;
};

export default function NearbyLandmarksFields({
  name = "nearbyLandmarks",
  showDistance = true,
  addButtonLabel = "+ إضافة معلم آخر",
  deleteAriaLabel = "حذف المعلم",
  deleteTitle = "حذف",
}: {
  name?: string;
  showDistance?: boolean;
  addButtonLabel?: string;
  deleteAriaLabel?: string;
  deleteTitle?: string;
}) {
  const [rows, setRows] = useState<LandmarkRow[]>([]);

  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}>
            {showDistance ? (
              <div 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]`}
                    className="flex-1"
                    label="العنوان"
                    type="text"
                    placeholder="مثال: مستشفى الحبيب"
                  />
                  <Field
                    name={`${name}[${idx}][distanceKm]`}
                    className="flex-1"
                    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={deleteAriaLabel}
                  title={deleteTitle}
                >
                  <Trash2 className="w-4 h-4 text-[#45556C]" />
                </button>
              </div>
            ) : (
              <div className="grid grid-cols-[1fr_auto] gap-3 items-end">
                <Field
                  name={`${name}[${idx}][title]`}
                  label="العنوان"
                  type="text"
                  placeholder="مثال: حضان اطفال"
                />
                <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={deleteAriaLabel}
                  title={deleteTitle}
                >
                  <Trash2 className="w-4 h-4 text-[#45556C]" />
                </button>
              </div>
            )}
          </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()) }])}
        >
          {addButtonLabel}
        </Button>
      </div>
    </div>
  );
}