import { Filter, Search } from "lucide-react";
import Input from "@/components/ui/Input";
import type { MenuBoardFilters as Filters } from "@/components/business/menu-boards/types";
import { useMenuBoardText } from "@/components/business/menu-boards/menuBoardI18n";

type Props = {
  filters: Filters;
  resultCount: number;
  onChange: (filters: Filters) => void;
};

const selectClass =
  "h-10 rounded-lg border border-[var(--border)] bg-[var(--bg-elevated)] px-3 text-sm text-[var(--text)] outline-none transition focus:border-[var(--accent)] focus:ring-2 focus:ring-[var(--accent)]/30";

export default function MenuBoardFilters({ filters, resultCount, onChange }: Props) {
  const t = useMenuBoardText();
  return (
    <section className="rounded-xl border border-[var(--border)] bg-[var(--bg-elevated)] p-4">
      <div className="flex flex-col gap-3 xl:flex-row xl:items-center xl:justify-between">
        <div className="relative min-w-0 flex-1">
          <Search className="pointer-events-none absolute left-3 top-3 h-4 w-4 text-[var(--text-faint)]" />
          <Input
            aria-label={t("searchMenuBoards")}
            placeholder={t("searchBoards")}
            value={filters.search}
            onChange={(event) => onChange({ ...filters, search: event.target.value })}
            className="pl-9"
          />
        </div>
        <div className="grid gap-2 sm:grid-cols-3 xl:min-w-[560px]">
          <select
            aria-label={t("allStatuses")}
            className={selectClass}
            value={filters.status}
            onChange={(event) => onChange({ ...filters, status: event.target.value as Filters["status"] })}
          >
            <option value="ALL">{t("allStatuses")}</option>
            <option value="PUBLISHED">{t("published")}</option>
            <option value="DRAFT">{t("drafts")}</option>
            <option value="ARCHIVED">{t("archived")}</option>
          </select>
          <select
            aria-label={t("allTypes")}
            className={selectClass}
            value={filters.type}
            onChange={(event) => onChange({ ...filters, type: event.target.value as Filters["type"] })}
          >
            {(["ALL", "MANUAL", "SCHEDULED", "ANNOUNCEMENT"] as const).map((type) => (
              <option key={type} value={type}>
                {type === "ALL" ? t("allTypes") : type === "MANUAL" ? t("manual") : type === "SCHEDULED" ? t("scheduled") : t("announcement")}
              </option>
            ))}
          </select>
          <select
            aria-label={t("allOrientations")}
            className={selectClass}
            value={filters.orientation}
            onChange={(event) => onChange({ ...filters, orientation: event.target.value as Filters["orientation"] })}
          >
            <option value="ALL">{t("allOrientations")}</option>
            <option value="LANDSCAPE">{t("landscape")}</option>
            <option value="PORTRAIT">{t("portrait")}</option>
          </select>
        </div>
      </div>
      <div className="mt-3 flex items-center gap-2 text-xs text-[var(--text-faint)]">
        <Filter className="h-3.5 w-3.5" />
        <span>{t("boardMatches", { count: resultCount, suffix: resultCount === 1 ? "" : "s" })}</span>
      </div>
    </section>
  );
}