"use client";

import React from "react";
import { X } from "lucide-react";
import { useTranslation } from "react-i18next";
import Modal from "../elements/Modal";
import RoundedButton from "../elements/RoundedButton";
import { cn } from "@/lib/utils";

interface CategoryOption {
  value: string;
  label: string;
  icon?: string;
  color?: string;
}

export interface AcademyFilterValues {
  search: string;
  category: string;
  minPrice: string;
  maxPrice: string;
  hasOffer: boolean;
  type: string;
  sortBy: string;
}

interface AcademyFilterModalProps {
  showFilterModal: boolean;
  setShowFilterModal: (open: boolean) => void;
  filters: AcademyFilterValues;
  setFilters: React.Dispatch<React.SetStateAction<AcademyFilterValues>>;
  categories: CategoryOption[];
  categoriesLoading: boolean;
  sortOptions: { value: string; label: string }[];
  courseTypes: { value: string; label: string }[];
  onApply: () => void;
  onClear: () => void;
  activeFiltersCount: number;
}

export default function AcademyFilterModal({
  showFilterModal,
  setShowFilterModal,
  filters,
  setFilters,
  categories,
  categoriesLoading,
  sortOptions,
  courseTypes,
  onApply,
  onClear,
  activeFiltersCount,
}: AcademyFilterModalProps) {
  const { t } = useTranslation("common");
  const selectedCategory = categories.find((cat) => cat.value === filters.category);

  const handleFieldChange = (name: keyof AcademyFilterValues, value: string | boolean) => {
    setFilters((prev) => ({ ...prev, [name]: value }));
  };

  return (
    <Modal
      isOpen={showFilterModal}
      onClose={() => setShowFilterModal(false)}
      height="auto"
      panelClassName="max-h-[min(88vh,640px)] overflow-y-auto rounded-t-3xl sm:rounded-3xl"
    >
      <div className="mx-auto flex w-full max-w-md flex-col pb-4">
        <span className="mb-4 text-center font-semibold">{t("academy.filter.title")}</span>

        <div className="space-y-4">
          <div>
            <label className="mb-1 block text-sm font-medium">{t("academy.filter.category")}</label>
            <select
              value={filters.category}
              onChange={(e) => handleFieldChange("category", e.target.value)}
              className="w-full rounded-lg border border-gray-300 bg-gray-50 px-3 py-2 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-pink-500 dark:border-gray-600 dark:bg-gray-800"
              disabled={categoriesLoading}
            >
              {categoriesLoading ? (
                <option value="" disabled>
                  {t("common.loading")}
                </option>
              ) : (
                categories.map((cat) => (
                  <option key={cat.value} value={cat.value}>
                    {cat.icon && `${cat.icon} `}
                    {cat.label}
                  </option>
                ))
              )}
            </select>
            {selectedCategory && selectedCategory.value !== "" && (
              <div className="mt-1 flex items-center gap-1 text-xs text-gray-500">
                <span>{t("academy.filter.selected")}</span>
                {selectedCategory.icon && <span>{selectedCategory.icon}</span>}
                <span style={{ color: selectedCategory.color }}>
                  {selectedCategory.label}
                </span>
              </div>
            )}
          </div>

          <div>
            <label className="mb-1 block text-sm font-medium">{t("academy.filter.courseType")}</label>
            <select
              value={filters.type}
              onChange={(e) => handleFieldChange("type", e.target.value)}
              className="w-full rounded-lg border border-gray-300 bg-gray-50 px-3 py-2 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-pink-500 dark:border-gray-600 dark:bg-gray-800"
            >
              {courseTypes.map((type) => (
                <option key={type.value} value={type.value}>
                  {type.label}
                </option>
              ))}
            </select>
          </div>

          <div>
            <label className="mb-1 block text-sm font-medium">
              {t("academy.filter.priceRange")}
            </label>
            <div className="flex gap-2">
              <input
                type="number"
                placeholder={t("academy.filter.from")}
                value={filters.minPrice}
                onChange={(e) => handleFieldChange("minPrice", e.target.value)}
                className="w-1/2 rounded-lg border border-gray-300 bg-gray-50 px-3 py-2 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-pink-500 dark:border-gray-600 dark:bg-gray-800"
              />
              <input
                type="number"
                placeholder={t("academy.filter.to")}
                value={filters.maxPrice}
                onChange={(e) => handleFieldChange("maxPrice", e.target.value)}
                className="w-1/2 rounded-lg border border-gray-300 bg-gray-50 px-3 py-2 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-pink-500 dark:border-gray-600 dark:bg-gray-800"
              />
            </div>
          </div>

          <div>
            <label className="mb-1 block text-sm font-medium">{t("academy.filter.sortBy")}</label>
            <select
              value={filters.sortBy}
              onChange={(e) => handleFieldChange("sortBy", e.target.value)}
              className="w-full rounded-lg border border-gray-300 bg-gray-50 px-3 py-2 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-pink-500 dark:border-gray-600 dark:bg-gray-800"
            >
              {sortOptions.map((opt) => (
                <option key={opt.value} value={opt.value}>
                  {opt.label}
                </option>
              ))}
            </select>
          </div>

          <div className="flex items-center gap-2">
            <input
              type="checkbox"
              id="academy-hasOffer"
              checked={filters.hasOffer}
              onChange={(e) => handleFieldChange("hasOffer", e.target.checked)}
              className="h-4 w-4 rounded text-pink-500 focus:ring-pink-500"
            />
            <label htmlFor="academy-hasOffer" className="text-sm">
              {t("academy.filter.discountedOnly")}
            </label>
          </div>

          {activeFiltersCount > 0 && (
            <button
              type="button"
              onClick={onClear}
              className="flex items-center gap-1 text-sm text-pink-500 transition hover:text-pink-600"
            >
              <X className="h-4 w-4" />
              {t("academy.filter.clearAll")}
            </button>
          )}
        </div>

        <div className="mt-6 flex w-full flex-col items-center gap-3 border-t border-neutral-200 pt-5 dark:border-neutral-700">
          <RoundedButton
            type="button"
            variant="primary"
            onClick={onApply}
            className="h-10 w-full max-w-[200px] text-sm"
          >
            {t("academy.filter.apply")}
          </RoundedButton>
          <RoundedButton
            type="button"
            onClick={() => setShowFilterModal(false)}
            className={cn("h-10 w-full max-w-[200px] text-sm")}
          >
            {t("academy.filter.cancel")}
          </RoundedButton>
        </div>
      </div>
    </Modal>
  );
}
