"use client";

import { useRouter, usePathname, useSearchParams } from "next/navigation";
import { Select } from "@/components/ui/Select";
import type { AnalyticsDateRange, AnalyticsStatusFilter } from "@/types/analytics";

const DATE_OPTIONS: { value: AnalyticsDateRange; label: string }[] = [
  { value: "7d", label: "Last 7 days" },
  { value: "30d", label: "Last 30 days" },
  { value: "90d", label: "Last 90 days" },
  { value: "all", label: "All time" },
];

const STATUS_OPTIONS: { value: AnalyticsStatusFilter; label: string }[] = [
  { value: "all", label: "All respondents" },
  { value: "completed", label: "Completed only" },
  { value: "in_progress", label: "In progress" },
  { value: "abandoned", label: "Abandoned" },
];

export function AnalyticsFilterBar() {
  const router = useRouter();
  const pathname = usePathname();
  const searchParams = useSearchParams();

  const range = (searchParams.get("range") ?? "all") as AnalyticsDateRange;
  const status = (searchParams.get("status") ?? "all") as AnalyticsStatusFilter;

  function update(key: string, value: string) {
    const params = new URLSearchParams(searchParams.toString());
    params.set(key, value);
    router.push(`${pathname}?${params.toString()}`);
  }

  return (
    <div className="mb-5 flex flex-col gap-3 rounded-lg border border-border bg-card p-3 shadow sm:flex-row sm:items-center sm:gap-4 sm:p-4">
      <Select
        value={range}
        onChange={(e) => update("range", e.target.value)}
        className="sm:max-w-[180px]"
        aria-label="Date range"
      >
        {DATE_OPTIONS.map((o) => (
          <option key={o.value} value={o.value}>
            {o.label}
          </option>
        ))}
      </Select>
      <Select
        value={status}
        onChange={(e) => update("status", e.target.value)}
        className="sm:max-w-[200px]"
        aria-label="Respondent status"
      >
        {STATUS_OPTIONS.map((o) => (
          <option key={o.value} value={o.value}>
            {o.label}
          </option>
        ))}
      </Select>
    </div>
  );
}