"use client";

import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { cn } from "@/lib/utils";
import { useTranslations } from "next-intl";
import { usePathname, useRouter, useSearchParams } from "next/navigation";
import { useState } from "react";

interface TicketFilterPanelProps {
  isOpen: boolean;
  onClose: () => void;
}

const STATUS_OPTIONS = ["new", "replied"] as const;

export function TicketFilterPanel({ isOpen, onClose }: TicketFilterPanelProps) {
  const t = useTranslations("dashboard.tickets.filters");
  const router = useRouter();
  const pathname = usePathname();
  const searchParams = useSearchParams();
  const queryString = searchParams.toString();
  const [status, setStatus] = useState(searchParams.get("status") || "all");

  const navigate = (params: URLSearchParams) => {
    const nextQuery = params.toString();
    router.push(nextQuery ? `${pathname}?${nextQuery}` : pathname, { scroll: false });
  };

  const applyFilters = () => {
    const params = new URLSearchParams(queryString);
    if (status !== "all") params.set("status", status);
    else params.delete("status");
    params.set("page", "1");
    navigate(params);
    onClose();
  };

  const clearFilters = () => {
    setStatus("all");
    const params = new URLSearchParams(queryString);
    params.delete("status");
    params.set("page", "1");
    navigate(params);
    onClose();
  };

  if (!isOpen) return null;

  return (
    <div className="space-y-5 rounded-xl border border-border bg-card p-4">
      <div className="grid grid-cols-1 gap-4 lg:grid-cols-3">
        <div className="space-y-2">
          <Label className="text-sm font-medium text-foreground">{t("status")}</Label>
          <Select value={status} onValueChange={setStatus}>
            <SelectTrigger className={cn("h-12 w-full rounded-xl bg-card")}>
              <SelectValue placeholder={t("all")} />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">{t("all")}</SelectItem>
              {STATUS_OPTIONS.map((value) => (
                <SelectItem key={value} value={value}>
                  {t(value)}
                </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}>
          {t("reset")}
        </Button>
        <Button type="button" className="h-11 rounded-xl px-4" onClick={applyFilters}>
          {t("apply")}
        </Button>
      </div>
    </div>
  );
}