"use client";

import { FilterActions } from "@/components/ui/filter/filter-actions";
import { FilterField } from "@/components/ui/filter/filter-field";
import { FilterGrid } from "@/components/ui/filter/filter-grid";
import { FilterSurface } from "@/components/ui/filter/filter-surface";
import { DatePicker } from "@/components/ui/inputs/date-picker";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { cn } from "@/lib/utils";
import { useTranslations } from "next-intl";
import { useRouter, useSearchParams } from "next/navigation";
import { useEffect, useState } from "react";

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

export function FilterPanel({ className, isOpen, onClose }: FilterPanelProps) {
  const t = useTranslations("dashboard.filters");
  const tCommon = useTranslations("common");
  const router = useRouter();
  const searchParams = useSearchParams();

  const [statusFilter, setStatusFilter] = useState(() => searchParams.get("status") || "all");
  const [publishDate, setPublishDate] = useState(
    () => searchParams.get("publishDate") || searchParams.get("publishDateFrom") || ""
  );
  const [releaseDate, setReleaseDate] = useState(
    () => searchParams.get("releaseDate") || searchParams.get("releaseDateFrom") || ""
  );
  const [viewsFilter, setViewsFilter] = useState(() => searchParams.get("views") || "all");

  useEffect(() => {
    const status = searchParams.get("status") || "all";
    const nextPublishDate =
      searchParams.get("publishDate") || searchParams.get("publishDateFrom") || "";
    const nextReleaseDate =
      searchParams.get("releaseDate") || searchParams.get("releaseDateFrom") || "";
    const views = searchParams.get("views") || "all";

    // eslint-disable-next-line react-hooks/set-state-in-effect
    setStatusFilter((prev) => prev !== status ? status : prev);
    setPublishDate((prev) => prev !== nextPublishDate ? nextPublishDate : prev);
    setReleaseDate((prev) => prev !== nextReleaseDate ? nextReleaseDate : prev);
    setViewsFilter((prev) => prev !== views ? views : prev);
  }, [searchParams]);

  const handleApplyFilters = () => {
    const params = new URLSearchParams(searchParams);

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

    if (publishDate) {
      params.set("publishDate", publishDate);
    } else {
      params.delete("publishDate");
    }
    params.delete("publishDateFrom");
    params.delete("publishDateTo");

    if (releaseDate) {
      params.set("releaseDate", releaseDate);
    } else {
      params.delete("releaseDate");
    }
    params.delete("releaseDateFrom");
    params.delete("releaseDateTo");

    if (viewsFilter && viewsFilter !== "all") {
      params.set("views", viewsFilter);
    } else {
      params.delete("views");
    }

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

  const handleClearFilters = () => {
    setStatusFilter("all");
    setPublishDate("");
    setReleaseDate("");
    setViewsFilter("all");

    const params = new URLSearchParams(searchParams);
    params.delete("status");
    params.delete("publishDate");
    params.delete("publishDateFrom");
    params.delete("publishDateTo");
    params.delete("releaseDate");
    params.delete("releaseDateFrom");
    params.delete("releaseDateTo");
    params.delete("views");
    params.set("page", "1");
    router.push(`?${params.toString()}`, { scroll: false });
    onClose();
  };

  return (
    <FilterSurface
      open={isOpen}
      onOpenChange={(open) => {
        if (!open) onClose();
      }}
      title={tCommon("filter")}
      className={cn("md:mx-6 md:mb-6", className)}
    >
      <FilterGrid>
        <FilterField label={t("status")}>
          <Select value={statusFilter} onValueChange={setStatusFilter}>
            <SelectTrigger className="h-10 rounded-lg bg-background">
              <SelectValue placeholder={t("all")} />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">{t("all")}</SelectItem>
              <SelectItem value="published">{t("statuses.published")}</SelectItem>
              <SelectItem value="disabled">{t("statuses.disabled")}</SelectItem>
              <SelectItem value="scheduled">{t("statuses.scheduled")}</SelectItem>
              <SelectItem value="draft">{t("statuses.draft")}</SelectItem>
            </SelectContent>
          </Select>
        </FilterField>

        <FilterField label={t("releaseDate")}>
          <DatePicker
            value={releaseDate}
            onChange={setReleaseDate}
            placeholder={t("selectDateRange")}
            aria-label={t("releaseDate")}
          />
        </FilterField>

        <FilterField label={t("publishDate")}>
          <DatePicker
            value={publishDate}
            onChange={setPublishDate}
            placeholder={t("selectDateRange")}
            aria-label={t("publishDate")}
          />
        </FilterField>

        <FilterField label={t("views")}>
          <Select value={viewsFilter} onValueChange={setViewsFilter}>
            <SelectTrigger className="h-10 rounded-lg bg-background">
              <SelectValue placeholder={t("all")} />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">{t("all")}</SelectItem>
              <SelectItem value="most">{t("viewsOptions.most")}</SelectItem>
              <SelectItem value="least">{t("viewsOptions.least")}</SelectItem>
            </SelectContent>
          </Select>
        </FilterField>
      </FilterGrid>

      <FilterActions
        onApply={handleApplyFilters}
        onClear={handleClearFilters}
        applyLabel={tCommon("filter")}
        clearLabel={tCommon("cancel")}
      />
    </FilterSurface>
  );
}