"use client";

import { useRouter, useSearchParams } from "next/navigation";
import { useState } from "react";

import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import type { CourseFormOptions } from "@/lib/courses/queries";

const ALL = "__all__";

export function FinderFilters({
  options,
  basePath = "/course-finder",
}: {
  options: CourseFormOptions;
  basePath?: string;
}) {
  const router = useRouter();
  const searchParams = useSearchParams();

  const [q, setQ] = useState(searchParams.get("q") ?? "");
  const [country, setCountry] = useState(searchParams.get("country") ?? ALL);
  const [state, setState] = useState(searchParams.get("state") ?? "");
  const [instituteId, setInstituteId] = useState(
    searchParams.get("instituteId") ?? ALL,
  );
  const [campusId, setCampusId] = useState(searchParams.get("campusId") ?? ALL);
  const [level, setLevel] = useState(searchParams.get("level") ?? ALL);

  function handleSearch() {
    const params = new URLSearchParams();
    if (q.trim()) params.set("q", q.trim());
    if (country !== ALL) params.set("country", country);
    if (state.trim()) params.set("state", state.trim());
    if (instituteId !== ALL) params.set("instituteId", instituteId);
    if (campusId !== ALL) params.set("campusId", campusId);
    if (level !== ALL) params.set("level", level);
    const qs = params.toString();
    router.push(qs ? `${basePath}?${qs}` : basePath);
  }

  function handleReset() {
    setQ("");
    setCountry(ALL);
    setState("");
    setInstituteId(ALL);
    setCampusId(ALL);
    setLevel(ALL);
    router.push(basePath);
  }

  return (
    <div className="mb-6 rounded-xl bg-card p-4 ring-1 ring-foreground/10">
      <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
        <Input
          placeholder="Search courses..."
          value={q}
          onChange={(e) => setQ(e.target.value)}
          onKeyDown={(e) => {
            if (e.key === "Enter") handleSearch();
          }}
        />

        <Select value={country} onValueChange={setCountry}>
          <SelectTrigger>
            <SelectValue placeholder="Country" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value={ALL}>All Countries</SelectItem>
            {options.countries.map((c) => (
              <SelectItem key={c.id} value={c.name}>
                {c.name}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>

        <Input
          placeholder="State"
          value={state}
          onChange={(e) => setState(e.target.value)}
          onKeyDown={(e) => {
            if (e.key === "Enter") handleSearch();
          }}
        />

        <Select value={instituteId} onValueChange={setInstituteId}>
          <SelectTrigger>
            <SelectValue placeholder="Institute" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value={ALL}>All Institutes</SelectItem>
            {options.institutes.map((i) => (
              <SelectItem key={i.id} value={i.id}>
                {i.name}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>

        <Select value={campusId} onValueChange={setCampusId}>
          <SelectTrigger>
            <SelectValue placeholder="Campus" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value={ALL}>All Campuses</SelectItem>
            {options.campuses.map((c) => (
              <SelectItem key={c.id} value={c.id}>
                {c.name}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>

        <Select value={level} onValueChange={setLevel}>
          <SelectTrigger>
            <SelectValue placeholder="Level (advance search)" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value={ALL}>All Levels</SelectItem>
            {options.programLevels.map((l) => (
              <SelectItem key={l.id} value={l.name}>
                {l.name}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
      </div>

      <div className="mt-4 flex gap-2">
        <Button onClick={handleSearch} className="bg-brand-blue text-white hover:bg-brand-blue/90">
          Search
        </Button>
        <Button variant="outline" onClick={handleReset}>
          Reset
        </Button>
      </div>
    </div>
  );
}