"use client";

import { FormEvent, useState } from "react";
import Link from "next/link";
import { useSearchParams } from "next/navigation";
import Button from "@/components/ui/Button";

type Shop = { shopId: string; shopName: string | null; connected: boolean };

type Props = {
  basePath: "/finance" | "/reports" | "/optimizer";
  shops: Shop[];
  activeShopId: string | null;
  period: string;
  dateFrom: string;
  dateTo: string;
  defaultPeriod: string;
  q?: string | null;
  includeSearch?: boolean;
  months: Array<{ value: string; label: string }>;
};

export default function ReportFilters({ basePath, shops, activeShopId, period, dateFrom, dateTo, defaultPeriod, q = null, includeSearch = false, months }: Props) {
  const searchParams = useSearchParams();
  const [shopId, setShopId] = useState(activeShopId || "all");
  const [selectedPeriod, setSelectedPeriod] = useState(period);
  const [from, setFrom] = useState(dateFrom);
  const [to, setTo] = useState(dateTo);
  const [search, setSearch] = useState(q || "");
  const [error, setError] = useState<string | null>(null);

  function submit(event: FormEvent<HTMLFormElement>) {
    if (selectedPeriod === "custom" && (!from || !to || from > to)) {
      event.preventDefault();
      setError(!from || !to ? "Isi tanggal awal dan akhir." : "Tanggal awal tidak boleh melewati tanggal akhir.");
      return;
    }
    setError(null);
  }

  const controlledKeys = new Set(["shop_id", "period", "date_from", "date_to", "q", "page"]);
  const preservedParams = Array.from(searchParams.entries()).filter(([key]) => !controlledKeys.has(key));
  const resetParams = new URLSearchParams({ shop_id: activeShopId || "all", period: defaultPeriod });
  if (basePath === "/reports") resetParams.set("tab", searchParams.get("tab") || "summary");
  const resetHref = `${basePath}?${resetParams.toString()}`;

  return (
    <section className="rounded-xl border border-slate-200 bg-white p-3 shadow-sm dark:border-slate-800 dark:bg-slate-900">
      <form action={basePath} className={`grid gap-2 ${includeSearch ? "xl:grid-cols-[220px_180px_150px_150px_1fr_auto_auto]" : "lg:grid-cols-[220px_180px_150px_150px_auto_auto]"} items-end`} method="get" onSubmit={submit}>
        {preservedParams.map(([key, value], index) => <input key={`${key}:${index}`} name={key} type="hidden" value={value} />)}
        <label><span className="muted-label">Toko</span><select className="mt-1.5 w-full rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm dark:border-slate-700 dark:bg-slate-950" name="shop_id" value={shopId} onChange={(event) => setShopId(event.target.value)}><option value="all">Semua toko</option>{shops.map((shop) => <option key={shop.shopId} value={shop.shopId}>{shop.shopName || shop.shopId}{shop.connected ? "" : " · historis"}</option>)}</select></label>
        <label><span className="muted-label">Periode</span><select className="mt-1.5 w-full rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm dark:border-slate-700 dark:bg-slate-950" name="period" value={selectedPeriod} onChange={(event) => setSelectedPeriod(event.target.value)}><option value="today">Hari ini</option><option value="yesterday">Kemarin</option><option value="7d">7 hari</option><option value="30d">30 hari</option>{months.map((month) => <option key={month.value} value={month.value}>{month.label}</option>)}<option value="custom">Rentang tanggal</option></select></label>
        <label><span className="muted-label">Dari</span><input className="mt-1.5 w-full rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm disabled:bg-slate-100 disabled:text-slate-400 dark:border-slate-700 dark:bg-slate-950 dark:disabled:bg-slate-800" disabled={selectedPeriod !== "custom"} name="date_from" type="date" value={from} onChange={(event) => setFrom(event.target.value)} /></label>
        <label><span className="muted-label">Sampai</span><input className="mt-1.5 w-full rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm disabled:bg-slate-100 disabled:text-slate-400 dark:border-slate-700 dark:bg-slate-950 dark:disabled:bg-slate-800" disabled={selectedPeriod !== "custom"} name="date_to" type="date" value={to} onChange={(event) => setTo(event.target.value)} /></label>
        {includeSearch ? <label><span className="muted-label">Cari</span><input className="mt-1.5 w-full rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm dark:border-slate-700 dark:bg-slate-950" name="q" value={search} onChange={(event) => setSearch(event.target.value)} placeholder="Order, produk, atau SKU" /></label> : null}
        <Button variant="primary" type="submit">Terapkan</Button>
        <Link className="ui-button ui-button-secondary" href={resetHref}>Reset</Link>
      </form>
      {error ? <div className="mt-2 text-xs font-semibold text-rose-700">{error}</div> : null}
    </section>
  );
}