"use client";

import Link from "next/link";
import { useSearchParams, usePathname, useRouter } from "next/navigation";
import { useQuery } from "@tanstack/react-query";
import { api } from "@/lib/api";
import ProductCard from "@/components/ProductCard";
import { Input } from "@/components/ui/input";
import {
  BadgeCheck,
  ChevronRight,
  Grid2X2,
  List,
  Search,
  SlidersHorizontal,
  Sparkles,
  Tag,
  X,
} from "lucide-react";
import { useMemo, useState } from "react";
import Navbar from "@/components/Navbar";

interface SearchResult {
  hits: any[];
  estimatedTotalHits: number;
}
interface Category {
  id: string;
  name: string;
  slug: string;
  children?: Category[];
  _count?: { products?: number };
  productCount?: number;
}

const money = (value: number) => new Intl.NumberFormat("vi-VN").format(value);

export default function SearchPage() {
  const searchParams = useSearchParams();
  const pathname = usePathname();
  const router = useRouter();
  const locale = pathname.startsWith("/en") ? "en" : "vi";
  const [query, setQuery] = useState(searchParams.get("q") || "");
  const [minPrice, setMinPrice] = useState(searchParams.get("minPrice") || "");
  const [maxPrice, setMaxPrice] = useState(searchParams.get("maxPrice") || "");
  const [gridMode, setGridMode] = useState<"grid" | "compact">("grid");
  const sort = searchParams.get("sort") || "featured";
  const categoryId = searchParams.get("categoryId") || "";

  const params = useMemo(() => {
    const next = new URLSearchParams();
    for (const key of ["q", "categoryId", "minPrice", "maxPrice", "sort"]) {
      const value = searchParams.get(key);
      if (value) next.set(key, value);
    }
    return next;
  }, [searchParams]);

  const { data, isLoading } = useQuery<SearchResult>({
    queryKey: ["marketplace-search", params.toString()],
    queryFn: async () => (await api.get(`/search?${params.toString()}`)).data,
    staleTime: 30_000,
  });
  const { data: categories = [] } = useQuery<Category[]>({
    queryKey: ["categories"],
    queryFn: async () => (await api.get("/categories")).data,
    staleTime: 5 * 60_000,
  });
  const { data: settings = {} } = useQuery<Record<string, string>>({
    queryKey: ["marketplace-promo", locale],
    queryFn: async () =>
      (await api.get("/admin/settings/public", { params: { locale } })).data ||
      {},
    staleTime: 60_000,
  });

  const updateParams = (updates: Record<string, string | null>) => {
    const next = new URLSearchParams(searchParams.toString());
    Object.entries(updates).forEach(([key, value]) =>
      value ? next.set(key, value) : next.delete(key),
    );
    router.push(`${pathname}?${next.toString()}`, { scroll: false });
  };
  const applyFilter = () =>
    updateParams({
      q: query || null,
      minPrice: minPrice || null,
      maxPrice: maxPrice || null,
    });
  const clearFilter = () => {
    setQuery("");
    setMinPrice("");
    setMaxPrice("");
    router.push(pathname, { scroll: false });
  };
  const promoEnabled = settings["marketplace.weeklyPromo.enabled"] !== "false";
  const promoTitle =
    settings["marketplace.weeklyPromo.title"] || "Ưu đãi nổi bật trong tuần";
  const promoSubtitle =
    settings["marketplace.weeklyPromo.subtitle"] ||
    "Khám phá sản phẩm số chất lượng với mức giá tốt nhất tuần này.";
  const promoUrl =
    settings["marketplace.weeklyPromo.buttonUrl"] || "/search?sort=featured";
  const promoImage = settings["marketplace.weeklyPromo.imageUrl"];
  const sortOptions = [
    { value: "featured", label: "Nổi bật" },
    { value: "sold:desc", label: "Bán chạy" },
    { value: "", label: "Mới nhất" },
    { value: "price:asc", label: "Giá thấp" },
    { value: "price:desc", label: "Giá cao" },
  ];

  return (
    <div className="min-h-screen bg-background text-foreground">
      <Navbar />
      <div className="mx-auto max-w-[1440px] px-4 py-6 lg:px-6">
        <div className="mb-5 flex flex-wrap items-center gap-2 text-xs text-gray-500">
          <Link href={`/${locale}`} className="hover:text-white">
            Trang chủ
          </Link>
          <ChevronRight className="h-3 w-3" />
          <span className="text-gray-200">Mua bán sản phẩm số</span>
          {categoryId && (
            <>
              <ChevronRight className="h-3 w-3" />
              <span className="text-violet-300">Đang lọc danh mục</span>
            </>
          )}
        </div>
        <div className="flex gap-5">
          <aside className="hidden w-64 shrink-0 lg:block">
            <div className="sticky top-24 rounded-2xl border border-white/10 bg-[#141519] p-3 shadow-xl">
              <div className="flex items-center gap-2 border-b border-white/10 px-2 pb-3">
                <SlidersHorizontal className="h-4 w-4 text-violet-300" />
                <b className="text-sm">Bộ lọc</b>
              </div>
              <label className="mt-4 block text-[11px] font-bold uppercase tracking-wide text-gray-500">
                Tìm kiếm
              </label>
              <div className="relative mt-2">
                <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-500" />
                <Input
                  value={query}
                  onChange={(event) => setQuery(event.target.value)}
                  onKeyDown={(event) => event.key === "Enter" && applyFilter()}
                  placeholder="Tên sản phẩm, game..."
                  className="h-10 border-white/10 bg-black/30 pl-9 text-sm"
                />
              </div>
              <label className="mt-5 block text-[11px] font-bold uppercase tracking-wide text-gray-500">
                Danh mục
              </label>
              <div className="mt-2 space-y-1">
                <button
                  onClick={() => updateParams({ categoryId: null })}
                  className={`flex w-full items-center justify-between rounded-lg px-3 py-2 text-left text-sm ${!categoryId ? "bg-red-500/15 text-red-300" : "text-gray-300 hover:bg-white/5"}`}
                >
                  <span>Tất cả danh mục</span>
                  <span className="text-xs text-gray-500">
                    {data?.estimatedTotalHits || 0}
                  </span>
                </button>
                {categories.slice(0, 9).map((category) => (
                  <button
                    key={category.id}
                    onClick={() => updateParams({ categoryId: category.id })}
                    className={`flex w-full items-center justify-between rounded-lg px-3 py-2 text-left text-sm ${categoryId === category.id ? "bg-violet-500/15 text-violet-200" : "text-gray-400 hover:bg-white/5 hover:text-white"}`}
                  >
                    <span className="truncate">{category.name}</span>
                    <span className="text-[10px] text-gray-600">
                      {Number(
                        category.productCount ?? category._count?.products ?? 0,
                      ).toLocaleString("vi-VN")}
                    </span>
                  </button>
                ))}
              </div>
              <label className="mt-5 block text-[11px] font-bold uppercase tracking-wide text-gray-500">
                Khoảng giá
              </label>
              <div className="mt-2 grid grid-cols-2 gap-2">
                <Input
                  value={minPrice}
                  onChange={(event) => setMinPrice(event.target.value)}
                  placeholder="Từ"
                  inputMode="numeric"
                  className="h-9 border-white/10 bg-black/30 text-xs"
                />
                <Input
                  value={maxPrice}
                  onChange={(event) => setMaxPrice(event.target.value)}
                  placeholder="Đến"
                  inputMode="numeric"
                  className="h-9 border-white/10 bg-black/30 text-xs"
                />
              </div>
              <button
                onClick={applyFilter}
                className="mt-3 flex w-full items-center justify-center gap-2 rounded-xl bg-gradient-to-r from-red-500 to-rose-500 py-2.5 text-sm font-bold shadow-lg shadow-red-500/15"
              >
                <SlidersHorizontal className="h-4 w-4" />
                Áp dụng bộ lọc
              </button>
              <button
                onClick={clearFilter}
                className="mt-2 flex w-full items-center justify-center gap-2 rounded-xl py-2 text-xs font-bold text-gray-500 hover:bg-white/5 hover:text-white"
              >
                <X className="h-3.5 w-3.5" />
                Đặt lại bộ lọc
              </button>
            </div>
          </aside>
          <main className="min-w-0 flex-1">
            <div className="flex flex-wrap items-center justify-between gap-3 rounded-2xl border border-white/10 bg-[#141519] p-3">
              <div className="flex items-center gap-2">
                <span className="hidden text-sm text-gray-500 sm:inline">
                  Sắp xếp
                </span>
                {sortOptions.map((option) => (
                  <button
                    key={option.value}
                    onClick={() => updateParams({ sort: option.value || null })}
                    className={`rounded-lg px-3 py-2 text-xs font-bold transition ${sort === option.value ? "bg-red-500/15 text-red-300 ring-1 ring-red-500/30" : "bg-black/20 text-gray-400 hover:bg-white/5 hover:text-white"}`}
                  >
                    {option.label}
                  </button>
                ))}
              </div>
              <div className="flex rounded-lg border border-white/10 bg-black/20 p-1">
                <button
                  onClick={() => setGridMode("grid")}
                  className={`rounded p-1.5 ${gridMode === "grid" ? "bg-red-500/20 text-red-300" : "text-gray-500"}`}
                >
                  <Grid2X2 className="h-4 w-4" />
                </button>
                <button
                  onClick={() => setGridMode("compact")}
                  className={`rounded p-1.5 ${gridMode === "compact" ? "bg-red-500/20 text-red-300" : "text-gray-500"}`}
                >
                  <List className="h-4 w-4" />
                </button>
              </div>
            </div>
            {promoEnabled && (
              <section className="relative mt-4 overflow-hidden rounded-2xl border border-violet-400/20 bg-gradient-to-r from-[#13152e] via-[#151b43] to-[#26152b] p-6 shadow-xl">
                <div
                  className="absolute inset-y-0 right-0 w-1/2 bg-cover bg-center opacity-40"
                  style={
                    promoImage
                      ? { backgroundImage: `url(${promoImage})` }
                      : undefined
                  }
                />
                <div className="absolute -right-12 -top-16 h-56 w-56 rounded-full bg-cyan-400/20 blur-3xl" />
                <div className="absolute bottom-0 right-1/3 h-32 w-32 rounded-full bg-rose-500/20 blur-3xl" />
                <div className="relative max-w-xl">
                  <div className="flex items-center gap-2 text-xs font-bold uppercase tracking-wider text-cyan-200">
                    <Sparkles className="h-4 w-4" />
                    Deal tuần này
                  </div>
                  <h1 className="mt-2 text-2xl font-black tracking-tight sm:text-3xl">
                    {promoTitle}
                  </h1>
                  <p className="mt-2 max-w-lg text-sm leading-6 text-gray-300">
                    {promoSubtitle}
                  </p>
                  <Link
                    href={
                      promoUrl.startsWith("/")
                        ? `/${locale}${promoUrl}`
                        : promoUrl
                    }
                    className="mt-4 inline-flex items-center gap-2 rounded-xl bg-gradient-to-r from-red-500 to-rose-500 px-4 py-2.5 text-sm font-bold shadow-lg shadow-red-500/25"
                  >
                    Xem ưu đãi ngay <ChevronRight className="h-4 w-4" />
                  </Link>
                </div>
              </section>
            )}
            <div className="mt-5 flex items-center justify-between">
              <div>
                <h2 className="text-lg font-black">Khám phá sản phẩm</h2>
                <p className="mt-1 text-xs text-gray-500">
                  {isLoading
                    ? "Đang tìm sản phẩm..."
                    : `${money(data?.estimatedTotalHits || 0)} sản phẩm đang bán`}
                </p>
              </div>
              <span className="hidden items-center gap-1 text-xs text-emerald-300 sm:flex">
                <BadgeCheck className="h-4 w-4" />
                Giao dịch có Escrow
              </span>
            </div>
            {isLoading ? (
              <div className="mt-4 grid grid-cols-2 gap-3 sm:grid-cols-3 xl:grid-cols-4">
                {Array.from({ length: 8 }).map((_, index) => (
                  <div
                    key={index}
                    className="h-72 animate-pulse rounded-2xl bg-white/5"
                  />
                ))}
              </div>
            ) : data?.hits?.length ? (
              <div
                className={`mt-4 grid gap-3 ${gridMode === "grid" ? "grid-cols-2 sm:grid-cols-3 xl:grid-cols-4" : "grid-cols-1 sm:grid-cols-2"}`}
              >
                {data.hits.map((product: any) => (
                  <ProductCard
                    key={product.id}
                    product={product}
                    locale={locale}
                  />
                ))}
              </div>
            ) : (
              <div className="mt-4 grid min-h-64 place-items-center rounded-2xl border border-dashed border-white/10 bg-white/[.02] text-center">
                <div>
                  <Tag className="mx-auto h-8 w-8 text-gray-600" />
                  <p className="mt-3 font-bold text-gray-300">
                    Chưa tìm thấy sản phẩm phù hợp
                  </p>
                  <button
                    onClick={clearFilter}
                    className="mt-3 text-sm font-bold text-red-300 hover:text-red-200"
                  >
                    Xóa bộ lọc để xem toàn bộ
                  </button>
                </div>
              </div>
            )}
          </main>
        </div>
      </div>
    </div>
  );
}