"use client";

import { useState, useMemo } 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;
  animalType?: "horse" | "camel";
  config?: {
    countries?: { id: number; name: string }[];
    usages?: { id: number; name: string }[];
    colors?: { id: number; name: string }[];
    /*     breeds?: { id: number; name: string }[];
     */
  };
}

export default function HorseFiltersAuction({
  onApply,
  config,
  animalType = "horse",
}: Props) {
  const locale = useLocale();
  const isArabic = locale === "ar";
  const t = useTranslations("AUCTIONS_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: "",
    age_from: "",
    age_to: "",
    age_unit: "",
    gender: "",
    type: "",
    vaccination_status: "",
    height_from: "",
    height_to: "",
    animal_count_from: "",
    animal_count_to: "",
    price_from: "",
    price_to: "",
    auction_type: "",
    animal_type: animalType,
  });

  const typeOptions = useMemo(() => {
    const isCamel = animalType === "camel";

    if (filters.gender === "male") {
      return [
        { key: "male", label: t("type.male") },
        { key: "castrated", label: t("type.castrated") },
      ];
    }

    if (filters.gender === "female") {
      return [
        {
          key: "breeding_female",
          label: isCamel
            ? t("type.camel_breeding_female")
            : t("type.horse_breeding_female"),
        },
        {
          key: "non_breeding_female",
          label: isCamel
            ? t("type.camel_non_breeding_female")
            : t("type.horse_non_breeding_female"),
        },
      ];
    }

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

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

  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: "",
      age_from: "",
      age_to: "",
      age_unit: "",
      gender: "",
      type: "",
      vaccination_status: "",
      height_from: "",
      height_to: "",
      animal_count_from: "",
      animal_count_to: "",
      price_from: "",
      price_to: "",
      auction_type: "",
      animal_type: animalType,
    });

  return (
    <>
      <Button
        color="primary"
        radius="lg"
        onPress={() => setOpen(true)}
        className="hidden md:flex"
      >
        {t("open")}
      </Button>

      <Button
        color="primary"
        radius="lg"
        onPress={() => setOpen(true)}
        isIconOnly
        aria-label={t("open")}
        className="md:hidden"
      >
        <SlidersHorizontal className="w-5 h-5" />
      </Button>

      <Modal
        isOpen={open}
        onOpenChange={setOpen}
        size="5xl"
        scrollBehavior="inside"
        placement="center"
      >
        <ModalContent>
          <div
            dir={isArabic ? "rtl" : "ltr"}
            className="flex flex-col w-[95vw] sm:w-auto max-w-[720px] md:max-w-[1100px]"
          >
            <ModalHeader className="text-xl font-bold">
              {animalType === "camel" ? t("title.camel") : t("title.horse")}
            </ModalHeader>

            <ModalBody className="grid grid-cols-1 md:grid-cols-2 gap-4 max-h-[60vh] md:max-h-[70vh] overflow-y-auto">
              <DatePicker
                label={t("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")}
                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")}
                selectedKeys={new Set([filters.country_id])}
                onSelectionChange={setSel("country_id")}
              >
                <SelectItem key="">{t("all")}</SelectItem>
                {(config?.countries as any)?.map((c: any) => (
                  <SelectItem key={String(c?.id)}>{c?.name}</SelectItem>
                ))}
              </Select>

              <Input
                label={t("state_id")}
                variant="bordered"
                value={filters.state_id}
                onChange={(e) =>
                  setFilters((p) => ({ ...p, state_id: e.target.value }))
                }
              />
              <Select
                label={t("usage")}
                selectedKeys={new Set([filters.animal_usage_id])}
                onSelectionChange={setSel("animal_usage_id")}
              >
                <SelectItem key="">{t("all")}</SelectItem>
                {(config?.usages as any).map((u: any) => (
                  <SelectItem key={String(u.id)}>{u.name}</SelectItem>
                ))}
              </Select>
              <Select
                label={t("color")}
                selectedKeys={new Set([filters.animal_color_id])}
                onSelectionChange={setSel("animal_color_id")}
              >
                <SelectItem key="">{t("all")}</SelectItem>
                {(config?.colors as any).map((c: any) => (
                  <SelectItem key={String(c.id)}>{c.name}</SelectItem>
                ))}
              </Select>

              <Select
                label={t("breed")}
                selectedKeys={new Set([filters.breed_id])}
                onSelectionChange={setSel("breed_id")}
              >
                <SelectItem key="">{t("all")}</SelectItem>
                {/*  {(config?.breeds as any).map((b: any) => (
                <SelectItem key={String(b.id)}>{b.name}</SelectItem>
              ))} */}
              </Select>

              <Select
                label={t("listing_type")}
                selectedKeys={new Set([filters.is_group])}
                onSelectionChange={setSel("is_group")}
              >
                <SelectItem key="">{t("all")}</SelectItem>
                <SelectItem key="1">{t("listing_type_group")}</SelectItem>
                <SelectItem key="0">{t("listing_type_single")}</SelectItem>
              </Select>

              <Select
                label={t("auction_type.label")}
                selectedKeys={new Set([filters.auction_type])}
                onSelectionChange={setSel("auction_type")}
              >
                <SelectItem key="">{t("all")}</SelectItem>
                <SelectItem key="live">{t("auction_type.live")}</SelectItem>
                <SelectItem key="electronic">
                  {t("auction_type.electronic")}
                </SelectItem>
              </Select>
              <Select
                label={t("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")}</SelectItem>
                <SelectItem key="male">{t("gender_male")}</SelectItem>
                <SelectItem key="female">{t("gender_female")}</SelectItem>
              </Select>
              <Select
                label={
                  animalType === "camel"
                    ? t("animal_subtype.camel")
                    : t("animal_subtype.horse")
                }
                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")}</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")}</SelectItem>
                  <SelectItem key="vaccinated">{tVax("vaccinated")}</SelectItem>
                  <SelectItem key="unvaccinated">
                    {tVax("unvaccinated")}
                  </SelectItem>
                  <SelectItem key="unsure">{tVax("unsure")}</SelectItem>
                </Select>
              )}

              <Input
                label={t("age_from")}
                type="number"
                variant="bordered"
                value={filters.age_from}
                onChange={(e) =>
                  setFilters((p) => ({ ...p, age_from: e.target.value }))
                }
              />
              <Input
                label={t("age_to")}
                type="number"
                variant="bordered"
                value={filters.age_to}
                onChange={(e) =>
                  setFilters((p) => ({ ...p, age_to: e.target.value }))
                }
              />

              {/* وحدة العمر */}
              <Select
                label={t("age_unit")}
                selectedKeys={new Set([filters.age_unit])}
                onSelectionChange={setSel("age_unit")}
              >
                <SelectItem key="year">{t("age_unit_year")}</SelectItem>
                <SelectItem key="month">{t("age_unit_month")}</SelectItem>
                <SelectItem key="day">{t("age_unit_day")}</SelectItem>
              </Select>

              {/* 📏 الارتفاع */}
              <Input
                label={t("height_from")}
                type="number"
                variant="bordered"
                value={filters.height_from}
                onChange={(e) =>
                  setFilters((p) => ({ ...p, height_from: e.target.value }))
                }
              />
              <Input
                label={t("height_to")}
                type="number"
                variant="bordered"
                value={filters.height_to}
                onChange={(e) =>
                  setFilters((p) => ({ ...p, height_to: e.target.value }))
                }
              />

              {/* 🧮 عدد الخيول */}
              <Input
                label={t("count_min")}
                type="number"
                variant="bordered"
                value={filters.animal_count_from}
                onChange={(e) =>
                  setFilters((p) => ({
                    ...p,
                    animal_count_from: e.target.value,
                  }))
                }
              />
              <Input
                label={t("count_max")}
                type="number"
                variant="bordered"
                value={filters.animal_count_to}
                onChange={(e) =>
                  setFilters((p) => ({
                    ...p,
                    animal_count_to: e.target.value,
                  }))
                }
              />

              {/* 💰 السعر */}
              <Input
                label={t("price_min")}
                type="number"
                variant="bordered"
                value={filters.price_from}
                onChange={(e) =>
                  setFilters((p) => ({ ...p, price_from: e.target.value }))
                }
              />
              <Input
                label={t("price_max")}
                type="number"
                variant="bordered"
                value={filters.price_to}
                onChange={(e) =>
                  setFilters((p) => ({ ...p, price_to: e.target.value }))
                }
              />
            </ModalBody>

            <ModalFooter className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 border-t border-gray-100 bg-white sticky bottom-0">
              <Button
                color="default"
                variant="flat"
                onPress={reset}
                className="w-full sm:w-auto"
              >
                {t("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")}
                </Button>
                <Button
                  color="primary"
                  onPress={() => {
                    onApply(filters);
                    setOpen(false);
                  }}
                  className="w-full sm:w-auto"
                >
                  {t("search")}
                </Button>
              </div>
            </ModalFooter>
          </div>
        </ModalContent>
      </Modal>
    </>
  );
}