"use client";

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

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

export default function OrderFilters({ shops, activeShopId, defaultValue, defaultDateFrom, defaultDateTo }: {
  shops: ShopOption[];
  activeShopId: string | null;
  defaultValue: string;
  defaultDateFrom?: string;
  defaultDateTo?: string;
}) {
  const searchParams = useSearchParams();
  const [q, setQ] = useState(defaultValue);
  const [dateFrom, setDateFrom] = useState(defaultDateFrom || "");
  const [dateTo, setDateTo] = useState(defaultDateTo || "");

  function dateValue(offsetDays: number) {
    const date = new Date();
    date.setDate(date.getDate() + offsetDays);
    const local = new Date(date.getTime() - date.getTimezoneOffset() * 60_000);
    return local.toISOString().slice(0, 10);
  }

  function queryHref(next: Record<string, string | number | null | undefined>) {
    const params = new URLSearchParams(searchParams.toString());
    for (const [key, value] of Object.entries(next)) {
      if (value === null || value === undefined || value === "") params.delete(key);
      else params.set(key, String(value));
    }
    params.delete("page");
    return `/orders?${params.toString()}`;
  }

  const preservedKeys = new Set(["q", "date_from", "date_to", "page"]);
  const preservedParams = Array.from(searchParams.entries()).filter(([key]) => !preservedKeys.has(key));

  return (
    <form action="/orders" className="border-t border-slate-200 bg-white dark:border-slate-800 dark:bg-slate-900" method="get">
      {preservedParams.map(([key, value], index) => <input key={`${key}:${index}`} name={key} type="hidden" value={value} />)}
      <div className="grid gap-x-4 gap-y-3 px-4 py-4 text-[12px] lg:grid-cols-[72px_minmax(0,1fr)]">
        <div className="pt-1 font-bold text-slate-400">Platform</div>
        <div className="flex flex-wrap items-center gap-2">
          <span className="rounded-md bg-orange-50 px-2.5 py-1 font-semibold text-orange-600 ring-1 ring-orange-100">Shopee</span>
          <span className="text-slate-400">Sellfin saat ini khusus operasional Shopee.</span>
        </div>

        <div className="pt-1 font-bold text-slate-400">Toko</div>
        <div className="flex flex-wrap items-center gap-1.5">
          <Link aria-current={!activeShopId ? "page" : undefined} className={`rounded-md px-2.5 py-1 font-bold ${!activeShopId ? "bg-emerald-700 text-white" : "text-slate-600 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-800"}`} href={queryHref({ shop_id: "all" })}>Semua</Link>
          {shops.map((shop) => (
            <Link aria-current={activeShopId === shop.shopId ? "page" : undefined} className={`rounded-md px-2.5 py-1 font-bold ${activeShopId === shop.shopId ? "bg-emerald-700 text-white" : "text-slate-600 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-800"}`} href={queryHref({ shop_id: shop.shopId })} key={shop.shopId}>
              {shop.shopName || shop.shopId}{shop.connected ? "" : " · terputus"}
            </Link>
          ))}
        </div>

        <div className="pt-2 font-bold text-slate-400">Waktu</div>
        <div className="flex flex-wrap items-center gap-2">
          <span className="h-9 rounded-lg border border-slate-200 bg-slate-50 px-3 py-2 font-bold text-slate-600 dark:border-slate-700 dark:bg-slate-950 dark:text-slate-300">Tanggal pesanan</span>
          <Link className="rounded-md px-2 py-1.5 font-bold text-slate-600 hover:bg-slate-100 dark:text-slate-300" href={queryHref({ q: q.trim() || null, date_from: dateValue(0), date_to: dateValue(0) })}>Hari Ini</Link>
          <Link className="rounded-md px-2 py-1.5 font-bold text-slate-600 hover:bg-slate-100 dark:text-slate-300" href={queryHref({ q: q.trim() || null, date_from: dateValue(-6), date_to: dateValue(0) })}>7 Hari</Link>
          <Link className="rounded-md px-2 py-1.5 font-bold text-slate-600 hover:bg-slate-100 dark:text-slate-300" href={queryHref({ q: q.trim() || null, date_from: dateValue(-29), date_to: dateValue(0) })}>30 Hari</Link>
          <label className="flex h-9 items-center gap-2 rounded-lg border border-slate-200 px-3 dark:border-slate-700"><span className="text-slate-400">Mulai</span><input className="bg-transparent font-semibold text-slate-700 outline-none dark:text-slate-200" aria-label="Waktu mulai" name="date_from" type="date" value={dateFrom} onChange={(event) => setDateFrom(event.target.value)} /></label>
          <span className="text-slate-300">—</span>
          <label className="flex h-9 items-center gap-2 rounded-lg border border-slate-200 px-3 dark:border-slate-700"><span className="text-slate-400">Akhir</span><input className="bg-transparent font-semibold text-slate-700 outline-none dark:text-slate-200" aria-label="Waktu akhir" name="date_to" type="date" value={dateTo} onChange={(event) => setDateTo(event.target.value)} /></label>
        </div>
      </div>

      <div className="flex flex-wrap items-center gap-2 border-t border-slate-100 bg-slate-50/70 px-4 py-3 dark:border-slate-800 dark:bg-slate-950/30">
        <label className="flex min-w-[280px] flex-1 items-center overflow-hidden rounded-lg border border-slate-200 bg-white dark:border-slate-700 dark:bg-slate-900">
          <span className="shrink-0 border-r border-slate-200 px-3 text-[11px] font-black text-slate-400 dark:border-slate-700">Cari semua</span>
          <input className="min-w-0 flex-1 bg-transparent px-3 py-2.5 text-[12px] font-semibold text-slate-800 outline-none placeholder:font-normal placeholder:text-slate-400 dark:text-slate-100" name="q" placeholder="Nomor paket, nomor pesanan, resi, penerima, atau produk" value={q} onChange={(event) => setQ(event.target.value)} />
        </label>
        <Button type="submit" variant="primary">Terapkan</Button>
        <Link className="ui-button ui-button-secondary" href={queryHref({ q: null, date_from: null, date_to: null })}>Reset</Link>
      </div>
    </form>
  );
}