"use client";

import { useState } from "react";
import { useRouter, useSearchParams } from "next/navigation";
import { Button } from "@/components/ui/button";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";

const ALL = "__all__";

const TABLE_OPTIONS = [
  "leads",
  "student_applications",
  "coaching_applications",
  "fee_payments",
  "university_commissions",
  "branches",
  "users",
  "roles",
  "role_permissions",
  "courses",
  "institutes",
  "visa_tracking",
];

const ACTION_OPTIONS = ["insert", "update", "delete"];

export function AuditFilters() {
  const router = useRouter();
  const searchParams = useSearchParams();

  const [table, setTable] = useState(searchParams.get("table") || ALL);
  const [action, setAction] = useState(searchParams.get("action") || ALL);

  function apply() {
    const params = new URLSearchParams();
    if (table !== ALL) params.set("table", table);
    if (action !== ALL) params.set("action", action);
    // Reset to first page whenever filters change.
    const qs = params.toString();
    router.push(qs ? `?${qs}` : "?");
  }

  function reset() {
    setTable(ALL);
    setAction(ALL);
    router.push("?");
  }

  return (
    <div className="mb-4 flex flex-wrap items-center gap-3">
      <Select value={table} onValueChange={setTable}>
        <SelectTrigger className="h-9 w-56">
          <SelectValue placeholder="All tables" />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value={ALL}>All tables</SelectItem>
          {TABLE_OPTIONS.map((t) => (
            <SelectItem key={t} value={t}>
              {t}
            </SelectItem>
          ))}
        </SelectContent>
      </Select>

      <Select value={action} onValueChange={setAction}>
        <SelectTrigger className="h-9 w-40">
          <SelectValue placeholder="All actions" />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value={ALL}>All actions</SelectItem>
          {ACTION_OPTIONS.map((a) => (
            <SelectItem key={a} value={a}>
              {a}
            </SelectItem>
          ))}
        </SelectContent>
      </Select>

      <Button onClick={apply} size="lg">
        Apply
      </Button>
      <Button onClick={reset} variant="outline" size="lg">
        Reset
      </Button>
    </div>
  );
}