"use client";

import { useEffect, useMemo, useState, type ChangeEvent } from "react";
import { useLocale, useTranslations } from "next-intl";
import {
  Modal,
  ModalContent,
  ModalHeader,
  ModalBody,
  ModalFooter,
  Button,
  Input,
  Select,
  SelectItem,
  DatePicker,
} from "@heroui/react";
import { parseDate } from "@internationalized/date";
import { SlidersHorizontal } from "lucide-react";

interface Props {
  onApply: (filters: Record<string, any>) => void;
  initialFilters?: Record<string, any>;
  config?: {
    countries?: { id: number; name: string }[];
    usages?: { id: number; name: string }[];
    colors?: { id: number; name: string }[];
    breeds?: { id: number; name: string }[];
  };
}

export default function HorseFilters({
  onApply,
  config,
  initialFilters,
}: Props) {
  const locale = useLocale();
  const isArabic = locale === "ar";
  const t = useTranslations("HORSES_FILTERS");
  const tVax = useTranslations("ANIMAL_VACCINATION_STATUS");
  const [open, setOpen] = useState(false);

  const [filters, setFilters] = useState<Record<string, any>>({
    is_group: "",
    country_id: "",
    state_id: "",
    animal_usage_id: "",
    animal_color_id: "",
    breed_id: "",
    date_from: "",
    date_to: "",
    from_date_of_birth: "",
    to_date_of_birth: "",
    gender: "",
    type: "",
    vaccination_status: "",
    height_from: "",
    height_to: "",
    animal_count_from: "",
    animal_count_to: "",
    price_from: "",
    price_to: "",
    animal_type: "horse",
  });

  const minDate = useMemo(() => {
    const d = new Date();
    d.setDate(d.getDate() - 30);
    return parseDate(d.toISOString().slice(0, 10));
  }, []);

  const typeOptions = useMemo(() => {
    if (filters.gender === "male") {
      return [
        {
          key: "male",
          label: t("male_type", {
            defaultValue: isArabic ? "فحل" : "Male",
          }),
        },
        {
          key: "castrated",
          label: t("castrated", {
            defaultValue: isArabic ? "خصي" : "Castrated",
          }),
        },
      ];
    }

    if (filters.gender === "female") {
      return [
        {
          key: "breeding_female",
          label: t("breeding_female", {
            defaultValue: isArabic ? "رمكة إنتاج" : "Breeding female",
          }),
        },
        {
          key: "non_breeding_female",
          label: t("non_breeding_female", {
            defaultValue: isArabic ? "فرس" : "Non breeding female",
          }),
        },
      ];
    }

    return [] as Array<{ key: string; label: string }>;
  }, [filters.gender, isArabic, t]);

  useEffect(() => {
    if (!open) return;
    if (!initialFilters) return;
    setFilters((p) => ({ ...p, ...initialFilters }));
  }, [open, initialFilters]);

  const setSel = (key: string) => (keys: any) => {
    const value = Array.from(keys).at(0) as string | undefined;
    setFilters((p) => ({ ...p, [key]: value ?? "" }));
  };

  const reset = () =>
    setFilters({
      is_group: "",
      country_id: "",
      state_id: "",
      animal_usage_id: "",
      animal_color_id: "",
      breed_id: "",
      date_from: "",
      date_to: "",
      from_date_of_birth: "",
      to_date_of_birth: "",
      gender: "",
      type: "",
      vaccination_status: "",
      height_from: "",
      height_to: "",
      animal_count_from: "",
      animal_count_to: "",
      price_from: "",
      price_to: "",
      animal_type: "horse",
    });

  return (
    <>
      {/* Desktop: text button */}
      <Button
        color="primary"
        radius="lg"
        onPress={() => setOpen(true)}
        className="hidden md:flex"
      >
        {t("open", { defaultValue: isArabic ? "تصفية 🔎" : "Filter 🔎" })}
      </Button>

      {/* Mobile: icon-only button */}
      <Button
        color="primary"
        radius="lg"
        onPress={() => setOpen(true)}
        isIconOnly
        aria-label={t("open", { defaultValue: isArabic ? "تصفية" : "Filter" })}
        className="md:hidden"
      >
        <SlidersHorizontal className="w-5 h-5" />
      </Button>

      <Modal
        isOpen={open}
        onOpenChange={setOpen}
        size="5xl"
        scrollBehavior="inside"
        placement="center"
      >
        <ModalContent className="w-[min(94vw,980px)] sm:w-[min(92vw,980px)]">
          <div dir={isArabic ? "rtl" : "ltr"} className="flex flex-col">
            <ModalHeader className="text-xl font-bold">
              {t("title", {
                defaultValue: isArabic
                  ? "تصفية متقدمة للخيول 🐎"
                  : "Advanced horse filters 🐎",
              })}
            </ModalHeader>

            <ModalBody className="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4 max-h-[70vh] overflow-y-auto pb-28">
              <DatePicker
                label={t("from_date", {
                  defaultValue: isArabic ? "من تاريخ" : "From date",
                })}
                variant="bordered"
                minValue={minDate}
                value={filters.date_from ? parseDate(filters.date_from) : null}
                onChange={(v) =>
                  setFilters((p) => ({
                    ...p,
                    date_from: v ? v.toString() : "",
                  }))
                }
              />
              <DatePicker
                label={t("to_date", {
                  defaultValue: isArabic ? "إلى تاريخ" : "To date",
                })}
                variant="bordered"
                minValue={
                  filters.date_from ? parseDate(filters.date_from) : minDate
                }
                value={filters.date_to ? parseDate(filters.date_to) : null}
                onChange={(v) =>
                  setFilters((p) => ({ ...p, date_to: v ? v.toString() : "" }))
                }
              />

              <Select
                label={t("country", {
                  defaultValue: isArabic ? "الدولة" : "Country",
                })}
                selectedKeys={new Set([filters.country_id])}
                onSelectionChange={setSel("country_id")}
              >
                <SelectItem key="">
                  {t("all", { defaultValue: isArabic ? "الكل" : "All" })}
                </SelectItem>
                <>
                  {(config?.countries ?? []).map((c: any) => (
                    <SelectItem key={String(c.id)}>{c.name}</SelectItem>
                  ))}
                </>
              </Select>

              <Input
                label={t("state_id", {
                  defaultValue: isArabic ? "المنطقة (ID)" : "State (ID)",
                })}
                variant="bordered"
                value={filters.state_id}
                onChange={(e: ChangeEvent<HTMLInputElement>) =>
                  setFilters((p) => ({ ...p, state_id: e.target.value }))
                }
              />

              <Select
                label={t("usage", {
                  defaultValue: isArabic ? "الاستخدام" : "Usage",
                })}
                selectedKeys={new Set([filters.animal_usage_id])}
                onSelectionChange={setSel("animal_usage_id")}
              >
                <SelectItem key="">
                  {t("all", { defaultValue: isArabic ? "الكل" : "All" })}
                </SelectItem>
                <>
                  {(config?.usages ?? []).map((u: any) => (
                    <SelectItem key={String(u.id)}>{u.name}</SelectItem>
                  ))}
                </>
              </Select>

              {/* 🎨 اللون */}
              <Select
                label={t("color", {
                  defaultValue: isArabic ? "اللون" : "Color",
                })}
                selectedKeys={new Set([filters.animal_color_id])}
                onSelectionChange={setSel("animal_color_id")}
              >
                <SelectItem key="">
                  {t("all", { defaultValue: isArabic ? "الكل" : "All" })}
                </SelectItem>
                <>
                  {(config?.colors ?? []).map((c: any) => (
                    <SelectItem key={String(c.id)}>{c.name}</SelectItem>
                  ))}
                </>
              </Select>

              {/* 🧬 السلالة */}
              <Select
                label={t("breed", {
                  defaultValue: isArabic ? "السلالة" : "Breed",
                })}
                selectedKeys={new Set([filters.breed_id])}
                onSelectionChange={setSel("breed_id")}
              >
                <SelectItem key="">
                  {t("all", { defaultValue: isArabic ? "الكل" : "All" })}
                </SelectItem>
                {/* {(config?.breeds as any).map((b: any) => (
                <SelectItem key={String(b.id)}>{b.name}</SelectItem>
              ))} */}
              </Select>

              {/* 👥 نوع العرض */}
              <Select
                label={t("listing_type", {
                  defaultValue: isArabic ? "نوع العرض" : "Listing type",
                })}
                selectedKeys={new Set([filters.is_group])}
                onSelectionChange={setSel("is_group")}
              >
                <SelectItem key="">
                  {t("all", { defaultValue: isArabic ? "الكل" : "All" })}
                </SelectItem>
                <SelectItem key="1">
                  {t("group", { defaultValue: isArabic ? "مجموعة" : "Group" })}
                </SelectItem>
                <SelectItem key="0">
                  {t("single", { defaultValue: isArabic ? "فرد" : "Single" })}
                </SelectItem>
              </Select>

              {/* 👤 الجنس */}
              <Select
                label={t("gender", {
                  defaultValue: isArabic ? "الجنس" : "Gender",
                })}
                selectedKeys={new Set([filters.gender])}
                onSelectionChange={(keys) => {
                  const value = Array.from(keys).at(0) as string | undefined;
                  setFilters((p) => ({
                    ...p,
                    gender: value ?? "",
                    type: "",
                    vaccination_status: "",
                  }));
                }}
              >
                <SelectItem key="">
                  {t("all", { defaultValue: isArabic ? "الكل" : "All" })}
                </SelectItem>
                <SelectItem key="male">
                  {t("male", { defaultValue: isArabic ? "ذكر" : "Male" })}
                </SelectItem>
                <SelectItem key="female">
                  {t("female", { defaultValue: isArabic ? "أنثى" : "Female" })}
                </SelectItem>
              </Select>

              {/* 🐴 نوع الخيل */}
              <Select
                label={t("horse_type", {
                  defaultValue: isArabic ? "نوع الخيل" : "Horse type",
                })}
                selectedKeys={new Set([filters.type])}
                onSelectionChange={(keys) => {
                  const value = Array.from(keys).at(0) as string | undefined;
                  setFilters((p) => ({
                    ...p,
                    type: value ?? "",
                    vaccination_status:
                      (value ?? "") === "breeding_female"
                        ? p.vaccination_status
                        : "",
                  }));
                }}
              >
                <SelectItem key="">
                  {t("all", { defaultValue: isArabic ? "الكل" : "All" })}
                </SelectItem>
                {typeOptions.length > 0 ? (
                  <>
                    {typeOptions.map((opt) => (
                      <SelectItem key={opt.key}>{opt.label}</SelectItem>
                    ))}
                  </>
                ) : null}
              </Select>

              {filters.type === "breeding_female" && (
                <Select
                  label={tVax("label")}
                  selectedKeys={new Set([filters.vaccination_status])}
                  onSelectionChange={setSel("vaccination_status")}
                >
                  <SelectItem key="">
                    {t("all", { defaultValue: isArabic ? "الكل" : "All" })}
                  </SelectItem>
                  <SelectItem key="vaccinated">{tVax("vaccinated")}</SelectItem>
                  <SelectItem key="unvaccinated">
                    {tVax("unvaccinated")}
                  </SelectItem>
                  <SelectItem key="unsure">{tVax("unsure")}</SelectItem>
                </Select>
              )}
              {/* 🎂 تاريخ الميلاد */}
              <DatePicker
                label={t("dob_from", {
                  defaultValue: isArabic
                    ? "تاريخ الميلاد من"
                    : "Birth date from",
                })}
                variant="bordered"
                value={
                  filters.from_date_of_birth
                    ? parseDate(filters.from_date_of_birth)
                    : null
                }
                onChange={(v) =>
                  setFilters((p) => ({
                    ...p,
                    from_date_of_birth: v ? v.toString() : "",
                  }))
                }
              />
              <DatePicker
                label={t("dob_to", {
                  defaultValue: isArabic
                    ? "تاريخ الميلاد إلى"
                    : "Birth date to",
                })}
                variant="bordered"
                value={
                  filters.to_date_of_birth
                    ? parseDate(filters.to_date_of_birth)
                    : null
                }
                onChange={(v) =>
                  setFilters((p) => ({
                    ...p,
                    to_date_of_birth: v ? v.toString() : "",
                  }))
                }
              />

              {/* 📏 الارتفاع */}
              <Input
                label={t("height_from", {
                  defaultValue: isArabic
                    ? "الارتفاع من (سم)"
                    : "Height from (cm)",
                })}
                type="number"
                variant="bordered"
                value={filters.height_from}
                onChange={(e: ChangeEvent<HTMLInputElement>) =>
                  setFilters((p) => ({ ...p, height_from: e.target.value }))
                }
              />
              <Input
                label={t("height_to", {
                  defaultValue: isArabic
                    ? "الارتفاع إلى (سم)"
                    : "Height to (cm)",
                })}
                type="number"
                variant="bordered"
                value={filters.height_to}
                onChange={(e: ChangeEvent<HTMLInputElement>) =>
                  setFilters((p) => ({ ...p, height_to: e.target.value }))
                }
              />

              {/* 🧮 عدد الخيول */}
              <Input
                label={t("count_min", {
                  defaultValue: isArabic ? "العدد الأدنى" : "Min count",
                })}
                type="number"
                variant="bordered"
                value={filters.animal_count_from}
                onChange={(e: ChangeEvent<HTMLInputElement>) =>
                  setFilters((p) => ({
                    ...p,
                    animal_count_from: e.target.value,
                  }))
                }
              />
              <Input
                label={t("count_max", {
                  defaultValue: isArabic ? "العدد الأعلى" : "Max count",
                })}
                type="number"
                variant="bordered"
                value={filters.animal_count_to}
                onChange={(e: ChangeEvent<HTMLInputElement>) =>
                  setFilters((p) => ({
                    ...p,
                    animal_count_to: e.target.value,
                  }))
                }
              />

              {/* 💰 السعر */}
              <Input
                label={t("price_min", {
                  defaultValue: isArabic ? "السعر الأدنى" : "Min price",
                })}
                type="number"
                variant="bordered"
                value={filters.price_from}
                onChange={(e: ChangeEvent<HTMLInputElement>) =>
                  setFilters((p) => ({ ...p, price_from: e.target.value }))
                }
              />
              <Input
                label={t("price_max", {
                  defaultValue: isArabic ? "السعر الأعلى" : "Max price",
                })}
                type="number"
                variant="bordered"
                value={filters.price_to}
                onChange={(e: ChangeEvent<HTMLInputElement>) =>
                  setFilters((p) => ({ ...p, price_to: e.target.value }))
                }
              />
            </ModalBody>

            <ModalFooter className="sticky bottom-0 z-10 bg-white border-t border-slate-200 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
              <Button
                color="default"
                variant="flat"
                onPress={reset}
                className="w-full sm:w-auto"
              >
                {t("reset", {
                  defaultValue: isArabic ? "تفريغ البحث" : "Reset",
                })}
              </Button>
              <div className="flex flex-col sm:flex-row gap-2 sm:gap-3 w-full sm:w-auto">
                <Button
                  color="default"
                  variant="bordered"
                  onPress={() => setOpen(false)}
                  className="w-full sm:w-auto"
                >
                  {t("cancel", { defaultValue: isArabic ? "إلغاء" : "Cancel" })}
                </Button>
                <Button
                  color="primary"
                  onPress={() => {
                    onApply(filters);
                    setOpen(false);
                  }}
                  className="w-full sm:w-auto"
                >
                  {t("apply", { defaultValue: isArabic ? "بحث" : "Apply" })}
                </Button>
              </div>
            </ModalFooter>
          </div>
        </ModalContent>
      </Modal>
    </>
  );
}