"use client";

import * as React from "react";
import { useRouter, usePathname } from "next/navigation";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/primitives";
import { Input } from "@/components/ui/input";
import { FilterSelect } from "@/components/ui/data-table";

const RANGES = [
  ["today", "Today"],
  ["yesterday", "Yesterday"],
  ["week", "Week"],
  ["month", "Month"],
  ["lastMonth", "Last month"],
  ["quarter", "Quarter"],
  ["year", "Year"],
  ["lastYear", "Last year"],
  ["custom", "Custom"],
] as const;

export function RangePicker({ range, from, to, apartment, apartments, extra }: { range: string; from?: string; to?: string; apartment?: string; apartments?: { id: string; code: string; name: string }[]; extra?: Record<string, string | undefined> }) {
  const router = useRouter();
  const pathname = usePathname();
  const [f, setF] = React.useState(from ?? "");
  const [t, setT] = React.useState(to ?? "");
  const push = (next: Record<string, string | undefined>) => {
    const sp = new URLSearchParams();
    const all = { range, from, to, apartment, ...extra, ...next };
    for (const [k, v] of Object.entries(all)) if (v) sp.set(k, v);
    router.replace(`${pathname}?${sp.toString()}`);
  };
  return (
    <div className="flex flex-wrap items-center gap-2">
      {apartments ? <FilterSelect value={apartment ?? ""} onChange={(v) => push({ apartment: v || undefined })} placeholder="All apartments" options={apartments.map((a) => ({ value: a.id, label: `${a.code} · ${a.name}` }))} /> : null}
      <Tabs value={range} onValueChange={(v) => push({ range: v })}>
        <TabsList variant="pill" className="h-9">
          {RANGES.map(([k, l]) => (
            <TabsTrigger key={k} value={k} className="py-1.5 text-xs">
              {l}
            </TabsTrigger>
          ))}
        </TabsList>
      </Tabs>
      {range === "custom" ? (
        <div className="flex items-center gap-1">
          <Input type="date" value={f} onChange={(e) => setF(e.target.value)} onBlur={() => f && t && push({ from: f, to: t })} className="h-9 w-[140px] text-xs" aria-label="From" />
          <span className="text-xs text-fg-subtle">→</span>
          <Input type="date" value={t} min={f} onChange={(e) => setT(e.target.value)} onBlur={() => f && t && push({ from: f, to: t })} className="h-9 w-[140px] text-xs" aria-label="To" />
        </div>
      ) : null}
    </div>
  );
}