"use client";

import type {
  DashboardPageLanguage,
  PagesListFilters,
} from "@/components/dashboard/pages/pages-types";
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 { getIsoDateRangeError } from "@/lib/filter/date-range";
import { usePageLocations } from "@/hooks/use-dashboard-pages-data";
import { cn } from "@/lib/utils";
import { useLocale, useTranslations } from "next-intl";
import { useState } from "react";

interface PagesFilterPanelProps {
  className?: string;
  isOpen: boolean;
  onClose: () => void;
  value: PagesListFilters;
  onApply: (next: PagesListFilters) => void;
  onClear: () => void;
}

export function PagesFilterPanel({
  className,
  isOpen,
  onClose,
  value,
  onApply,
  onClear,
}: PagesFilterPanelProps) {
  const t = useTranslations("dashboard.pages.filters");
  const tCommon = useTranslations("dashboard.taxonomy.common");
  const tRootCommon = useTranslations("common");
  const locale = useLocale() as DashboardPageLanguage;

  const [draft, setDraft] = useState<PagesListFilters>(value);
  const { data: locations } = usePageLocations();
  const createdDateError = getIsoDateRangeError(
    draft.createdFrom ?? "",
    draft.createdTo ?? ""
  );

  return (
    <FilterSurface
      open={isOpen}
      onOpenChange={(open) => {
        if (!open) onClose();
      }}
      title={tRootCommon("filter")}
      className={cn("md:mx-6 md:mb-6", className)}
    >
      <FilterGrid className="xl:grid-cols-4">
      <FilterField label={t("statusLabel")}>
        <Select
          value={draft.status ?? "__all__"}
          onValueChange={(v) =>
            setDraft({
              ...draft,
              status:
                v === "__all__" ? undefined : (v as "active" | "disabled"),
            })
          }
        >
          <SelectTrigger className="h-10 rounded-lg bg-background">
            <SelectValue placeholder={t("allOption")} />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="__all__">{t("allOption")}</SelectItem>
            <SelectItem value="active">{t("statusActive")}</SelectItem>
            <SelectItem value="disabled">{t("statusDisabled")}</SelectItem>
          </SelectContent>
        </Select>
      </FilterField>

      <FilterField label={t("locationLabel")}>
        <Select
          value={draft.locationKey ?? "__all__"}
          onValueChange={(v) =>
            setDraft({
              ...draft,
              locationKey: v === "__all__" ? undefined : v,
            })
          }
        >
          <SelectTrigger className="h-10 rounded-lg bg-background">
            <SelectValue placeholder={t("allOption")} />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="__all__">{t("allOption")}</SelectItem>
            {locations.map((loc) => (
              <SelectItem key={loc.key} value={loc.key}>
                {loc.label[locale] ?? loc.label.ar ?? loc.label.en}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
      </FilterField>

      <FilterField label={t("languageLabel")}>
        <Select
          value={draft.language ?? "__all__"}
          onValueChange={(v) =>
            setDraft({
              ...draft,
              language:
                v === "__all__" ? undefined : (v as DashboardPageLanguage),
            })
          }
        >
          <SelectTrigger className="h-10 rounded-lg bg-background">
            <SelectValue placeholder={t("allOption")} />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="__all__">{t("allOption")}</SelectItem>
            <SelectItem value="ar">{tCommon("languages.ar")}</SelectItem>
            <SelectItem value="en">{tCommon("languages.en")}</SelectItem>
          </SelectContent>
        </Select>
      </FilterField>

      <FilterField
        label={t("createdDateLabel")}
        error={createdDateError ? tRootCommon("invalidDateRange") : undefined}
      >
        <div className="grid grid-cols-2 gap-2">
          <DatePicker
            value={draft.createdFrom ?? ""}
            onChange={(v) => setDraft({ ...draft, createdFrom: v || undefined })}
            invalid={Boolean(createdDateError)}
          />
          <DatePicker
            value={draft.createdTo ?? ""}
            onChange={(v) => setDraft({ ...draft, createdTo: v || undefined })}
            invalid={Boolean(createdDateError)}
          />
        </div>
      </FilterField>
      </FilterGrid>

      <FilterActions
        onClear={() => {
          setDraft({});
          onClear();
        }}
        onApply={() => onApply(draft)}
        clearLabel={tCommon("clearButton")}
        applyLabel={tCommon("applyButton")}
        applyDisabled={Boolean(createdDateError)}
      />
    </FilterSurface>
  );
}