"use client";

import { useServices } from "@/components/dashboard/services/services-api";
import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
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 { useMemo, useState } from "react";

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

function parseBinary(value: string | null) {
  return value === "1" ? "1" : value === "0" ? "0" : "all";
}

export function PreviousWorkFilterPanel({ isOpen, onClose }: PreviousWorkFilterPanelProps) {
  const t = useTranslations("dashboard.previousWork");
  const router = useRouter();
  const pathname = usePathname();
  const searchParams = useSearchParams();
  const queryString = searchParams.toString();
  const { services } = useServices();
  const [serviceId, setServiceId] = useState(searchParams.get("service_id") || "all");
  const [isActive, setIsActive] = useState(parseBinary(searchParams.get("is_active")));
  const [isFeatured, setIsFeatured] = useState(parseBinary(searchParams.get("is_featured")));

  const serviceOptions = useMemo(
    () => (services || []).filter((service) => service.is_active).map((service) => ({ id: service.id, label: service.title || String(service.id) })),
    [services],
  );

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

  const applyFilters = () => {
    const params = new URLSearchParams(queryString);
    if (serviceId !== "all") params.set("service_id", serviceId);
    else params.delete("service_id");
    if (isActive === "1" || isActive === "0") params.set("is_active", isActive);
    else params.delete("is_active");
    if (isFeatured === "1" || isFeatured === "0") params.set("is_featured", isFeatured);
    else params.delete("is_featured");
    params.set("page", "1");
    navigate(params);
    onClose();
  };

  const clearFilters = () => {
    setServiceId("all");
    setIsActive("all");
    setIsFeatured("all");
    const params = new URLSearchParams(queryString);
    params.delete("service_id");
    params.delete("is_active");
    params.delete("is_featured");
    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("form.fields.service")}</Label>
          <Select value={serviceId} onValueChange={setServiceId}>
            <SelectTrigger className={cn("h-12 w-full rounded-xl bg-card")}>
              <SelectValue placeholder={t("filters.all")} />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">{t("filters.all")}</SelectItem>
              {serviceOptions.map((service) => (
                <SelectItem key={service.id} value={String(service.id)}>
                  {service.label}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>

        <label className="flex items-center gap-2 rounded-xl border border-border px-3 py-2">
          <Checkbox checked={isActive === "1"} onCheckedChange={(checked) => setIsActive(checked ? "1" : "all")} />
          <span className="text-sm text-foreground">{t("filters.active")}</span>
        </label>

        <label className="flex items-center gap-2 rounded-xl border border-border px-3 py-2">
          <Checkbox checked={isFeatured === "1"} onCheckedChange={(checked) => setIsFeatured(checked ? "1" : "all")} />
          <span className="text-sm text-foreground">{t("filters.featured")}</span>
        </label>
      </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("filters.reset")}
        </Button>
        <Button type="button" className="h-11 rounded-xl px-4" onClick={applyFilters}>
          {t("filters.apply")}
        </Button>
      </div>
    </div>
  );
}