"use client";

import {
  DASHBOARD_APPEARANCE_LANGUAGE_VALUES,
  DASHBOARD_APPEARANCE_STATUS_VALUES,
} from "@/components/dashboard/appearance/appearance-types";
import { Button } from "@/components/ui/button";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { cn } from "@/lib/utils";
import { useLocale, useTranslations } from "next-intl";
import { useRouter, useSearchParams } from "next/navigation";
import { useState } from "react";

interface MenuFilterPanelProps {
  className?: string;
  isOpen: boolean;
  onClose: () => void;
}

export function MenuFilterPanel({ className, isOpen, onClose }: MenuFilterPanelProps) {
  const t = useTranslations("dashboard.appearance.filters");
  const tCommon = useTranslations("common");
  const locale = useLocale();
  const isRtl = locale === "ar";
  const router = useRouter();
  const searchParams = useSearchParams();
  const queryString = searchParams.toString();

  const [statusValue, setStatusValue] = useState(() => searchParams.get("status") || "all");
  const [languageValue, setLanguageValue] = useState(
    () => searchParams.get("language") || "all"
  );
  const [siteValue, setSiteValue] = useState(() => searchParams.get("site") || "all");

  const applyFilters = () => {
    const params = new URLSearchParams(queryString);

    if (statusValue === "all") {
      params.delete("status");
    } else {
      params.set("status", statusValue);
    }

    if (languageValue === "all") {
      params.delete("language");
    } else {
      params.set("language", languageValue);
    }

    if (siteValue === "all") {
      params.delete("site");
    } else {
      params.set("site", siteValue);
    }

    params.set("page", "1");
    router.push(`?${params.toString()}`, { scroll: false });
    onClose();
  };

  const clearFilters = () => {
    setStatusValue("all");
    setLanguageValue("all");
    setSiteValue("all");

    const params = new URLSearchParams(queryString);
    params.delete("status");
    params.delete("language");
    params.delete("site");
    params.set("page", "1");
    router.push(`?${params.toString()}`, { scroll: false });
    onClose();
  };

  if (!isOpen) {
    return null;
  }

  return (
    <div className={cn("space-y-4 rounded-xl border border-border bg-card p-4", className)}>
      <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
        <div className="space-y-2">
          <p className={cn("text-sm font-medium text-foreground", isRtl ? "" : "")}>
            {t("status")}
          </p>
          <Select value={statusValue} onValueChange={setStatusValue}>
            <SelectTrigger className="h-12 rounded-xl">
              <SelectValue placeholder={t("all")} />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">{t("all")}</SelectItem>
              {DASHBOARD_APPEARANCE_STATUS_VALUES.map((status) => (
                <SelectItem key={status} value={status}>
                  {t(`statuses.${status}`)}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>

        <div className="space-y-2">
          <p className={cn("text-sm font-medium text-foreground", isRtl ? "" : "")}>
            {t("language")}
          </p>
          <Select value={languageValue} onValueChange={setLanguageValue}>
            <SelectTrigger className="h-12 rounded-xl">
              <SelectValue placeholder={t("all")} />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">{t("all")}</SelectItem>
              {DASHBOARD_APPEARANCE_LANGUAGE_VALUES.map((language) => (
                <SelectItem key={language} value={language}>
                  {t(`languages.${language}`)}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>

        <div className="space-y-2">
          <p className={cn("text-sm font-medium text-foreground", isRtl ? "" : "")}>
            {t("site")}
          </p>
          <Select value={siteValue} onValueChange={setSiteValue}>
            <SelectTrigger className="h-12 rounded-xl">
              <SelectValue placeholder={t("all")} />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">{t("all")}</SelectItem>
              <SelectItem value="maal">{t("sites.maal")}</SelectItem>
              <SelectItem value="maal-capital">{t("sites.maalCapital")}</SelectItem>
            </SelectContent>
          </Select>
        </div>
      </div>

      <div className="flex flex-wrap items-center gap-3">
        <Button
          type="button"
          variant="outline"
          className="h-11 rounded-xl px-4"
          onClick={clearFilters}
        >
          {tCommon("cancel")}
        </Button>
        <Button type="button" className="h-11 rounded-xl px-4" onClick={applyFilters}>
          {tCommon("filter")}
        </Button>
      </div>
    </div>
  );
}