"use client";

import type {
  DashboardUserLanguage,
  DashboardUserRole,
  DashboardUserStatus,
} from "@/components/dashboard/users/users-types";
import {
  DASHBOARD_USER_LANGUAGE_VALUES,
  DASHBOARD_USER_ROLE_VALUES,
  DASHBOARD_USER_STATUS_VALUES,
} from "@/components/dashboard/users/users-types";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { cn } from "@/lib/utils";
import { CalendarDays } from "lucide-react";
import { useLocale, useTranslations } from "next-intl";
import { useRouter, useSearchParams } from "next/navigation";
import { useMemo, useState } from "react";

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

function isDashboardUserStatus(value: string): value is DashboardUserStatus {
  return DASHBOARD_USER_STATUS_VALUES.includes(value as DashboardUserStatus);
}

function isDashboardUserRole(value: string): value is DashboardUserRole {
  return DASHBOARD_USER_ROLE_VALUES.includes(value as DashboardUserRole);
}

function isDashboardUserLanguage(value: string): value is DashboardUserLanguage {
  return DASHBOARD_USER_LANGUAGE_VALUES.includes(value as DashboardUserLanguage);
}

export function UsersFilterPanel({
  className,
  isOpen,
  onClose,
}: UsersFilterPanelProps) {
  const t = useTranslations("dashboard.users.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 [roleValue, setRoleValue] = useState(() => searchParams.get("role") || "all");
  const [languageValue, setLanguageValue] = useState(
    () => searchParams.get("language") || "all"
  );
  const [joinedAtValue, setJoinedAtValue] = useState(() => searchParams.get("joinedAt") || "");

  const statusOptions = useMemo(
    () =>
      DASHBOARD_USER_STATUS_VALUES.filter((value) =>
        isDashboardUserStatus(value)
      ),
    []
  );

  const roleOptions = useMemo(
    () =>
      DASHBOARD_USER_ROLE_VALUES.filter((value) => isDashboardUserRole(value)),
    []
  );

  const languageOptions = useMemo(
    () =>
      DASHBOARD_USER_LANGUAGE_VALUES.filter((value) =>
        isDashboardUserLanguage(value)
      ),
    []
  );

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

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

    if (roleValue === "all") {
      params.delete("role");
    } else {
      params.set("role", roleValue);
    }

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

    if (joinedAtValue.trim()) {
      params.set("joinedAt", joinedAtValue.trim());
    } else {
      params.delete("joinedAt");
    }

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

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

    const params = new URLSearchParams(queryString);
    params.delete("status");
    params.delete("role");
    params.delete("language");
    params.delete("joinedAt");
    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-2 xl:grid-cols-4">
        <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={cn("h-12 rounded-xl", isRtl ? "" : "")}>
              <SelectValue placeholder={t("all")} />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">{t("all")}</SelectItem>
              {statusOptions.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("role")}
          </p>
          <Select value={roleValue} onValueChange={setRoleValue}>
            <SelectTrigger className={cn("h-12 rounded-xl", isRtl ? "" : "")}>
              <SelectValue placeholder={t("all")} />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">{t("all")}</SelectItem>
              {roleOptions.map((role) => (
                <SelectItem key={role} value={role}>
                  {t(`roles.${role}`)}
                </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={cn("h-12 rounded-xl", isRtl ? "" : "")}>
              <SelectValue placeholder={t("all")} />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">{t("all")}</SelectItem>
              {languageOptions.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("joinedAt")}
          </p>
          <div className="relative">
            <Input
              value={joinedAtValue}
              onChange={(event) => setJoinedAtValue(event.target.value)}
              placeholder={t("placeholders.joinedAt")}
              className={cn("h-12 rounded-xl pe-10", isRtl ? "" : "")}
            />
            <CalendarDays
              className={cn(
                "pointer-events-none absolute top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground",
                isRtl ? "left-3" : "right-3"
              )}
            />
          </div>
        </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>
  );
}