"use client";

import { useState, useEffect, useCallback } from "react";
import { useSearchParams } from "next/navigation";
import {
  ChevronDown,
  LayoutList,
  LayoutGrid,
  SlidersHorizontal,
  X,
  Sparkles,
  Search,
} from "lucide-react";
import { motion, AnimatePresence, useReducedMotion } from "framer-motion";

import FilterSidebar from "@/components/cars/FilterSidebar";
import CarListCard from "@/components/cars/CarListCard";
import CarGridCard from "@/components/cars/CarGridCard";
import AISearchBar from "@/components/cars/AISearchBar";
import { ListingSkeleton } from "@/components/ui/Skeletons";
import { fetchCars } from "@/lib/api";
import type { Car } from "@/lib/types";
import { SORT_OPTIONS, cn } from "@/lib/utils";

interface Filters {
  brand: string[];
  fuelType: string[];
  transmission: string[];
  bodyType: string[];
  priceMin: number;
  priceMax: number;
  seating?: number;
  hasADAS?: boolean;
  ncapRating?: string;
  isEV?: boolean;
}

const DEFAULT_FILTERS: Filters = {
  brand: [],
  fuelType: [],
  transmission: [],
  bodyType: [],
  priceMin: 0,
  priceMax: 200,
  seating: undefined,
  hasADAS: undefined,
  ncapRating: undefined,
  isEV: undefined,
};

export default function CarsClient() {
  const sp = useSearchParams();
  const prefersReducedMotion = useReducedMotion();

  const [filters, setFilters] = useState<Filters>({
    brand: sp.getAll("brand"),
    fuelType: sp.getAll("fuelType"),
    transmission: sp.getAll("transmission"),
    bodyType: sp.getAll("bodyType"),
    priceMin: +(sp.get("priceMin") ?? 0),
    priceMax: +(sp.get("priceMax") ?? 200),
  });

  const [search, setSearch] = useState(sp.get("search") ?? "");
  const [sortBy, setSortBy] = useState(sp.get("sortBy") ?? "price");
  const [sortOrder, setSortOrder] = useState(+(sp.get("sortOrder") ?? 1));
  const [page, setPage] = useState(1);
  const limit = 12;

  const [cars, setCars] = useState<Car[]>([]);
  const [total, setTotal] = useState(0);
  const [totalPages, setTotalPages] = useState(1);
  const [loading, setLoading] = useState(true);
  const [loadingMore, setLoadingMore] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [view, setView] = useState<"list" | "grid">("list");
  const [mobileSidebar, setMobileSidebar] = useState(false);

  // AI search mode
  const [aiMode, setAiMode] = useState(false);
  const [aiQuery, setAiQuery] = useState("");

  const buildParams = useCallback(
    (pg: number) => ({
      brand: filters.brand,
      fuelType: filters.fuelType,
      transmission: filters.transmission,
      bodyType: filters.bodyType,
      priceMin: filters.priceMin > 0 ? filters.priceMin : undefined,
      priceMax: filters.priceMax < 200 ? filters.priceMax : undefined,
      seating: filters.seating,
      hasADAS: filters.hasADAS,
      ncapRating: filters.ncapRating,
      isEV: filters.isEV,
      search: search || undefined,
      sortBy,
      sortOrder,
      page: pg,
      limit,
    }),
    [filters, search, sortBy, sortOrder]
  );

  useEffect(() => {
    if (aiMode) return; // AI mode drives its own results
    let cancelled = false;
    setLoading(true);
    setError(null);
    setPage(1);

    fetchCars(buildParams(1))
      .then((res) => {
        if (cancelled) return;
        setCars(res.cars);
        setTotal(res.total);
        setTotalPages(res.totalPages);
      })
      .catch(() => !cancelled && setError("Failed to load cars. Please try again."))
      .finally(() => !cancelled && setLoading(false));

    return () => { cancelled = true; };
  }, [buildParams, aiMode]);

  async function loadMoreCars() {
    if (loadingMore || page >= totalPages) return;
    const nextPage = page + 1;
    setLoadingMore(true);
    try {
      const res = await fetchCars(buildParams(nextPage));
      setCars((prev) => [...prev, ...res.cars]);
      setPage(nextPage);
    } finally {
      setLoadingMore(false);
    }
  }

  function updateFilter(patch: Partial<Filters>) {
    setFilters((f) => ({ ...f, ...patch }));
  }

  function resetFilters() {
    setFilters(DEFAULT_FILTERS);
    setSearch("");
  }

  function handleAIResults(results: Car[], query: string) {
    setCars(results);
    setTotal(results.length);
    setTotalPages(1);
    setAiQuery(query);
    setLoading(false);
  }

  function handleAIClear() {
    setAiMode(false);
    setAiQuery("");
    // Re-trigger standard fetch
    setFilters({ ...DEFAULT_FILTERS });
  }

  // Active filter chips
  const activeChips: { label: string; onRemove: () => void }[] = [
    ...filters.brand.map((b) => ({
      label: b,
      onRemove: () => updateFilter({ brand: filters.brand.filter((x) => x !== b) }),
    })),
    ...filters.fuelType.map((f) => ({
      label: f,
      onRemove: () => updateFilter({ fuelType: filters.fuelType.filter((x) => x !== f) }),
    })),
    ...filters.transmission.map((t) => ({
      label: t,
      onRemove: () => updateFilter({ transmission: filters.transmission.filter((x) => x !== t) }),
    })),
    ...filters.bodyType.map((b) => ({
      label: b,
      onRemove: () => updateFilter({ bodyType: filters.bodyType.filter((x) => x !== b) }),
    })),
    ...(filters.priceMin > 0 || filters.priceMax < 200
      ? [{
          label: `₹${filters.priceMin}L – ₹${filters.priceMax}L`,
          onRemove: () => updateFilter({ priceMin: 0, priceMax: 200 }),
        }]
      : []),
    ...(filters.seating
      ? [{ label: `${filters.seating}+ Seats`, onRemove: () => updateFilter({ seating: undefined }) }]
      : []),
    ...(filters.hasADAS
      ? [{ label: "ADAS", onRemove: () => updateFilter({ hasADAS: undefined }) }]
      : []),
    ...(filters.ncapRating
      ? [{ label: `${filters.ncapRating} NCAP`, onRemove: () => updateFilter({ ncapRating: undefined }) }]
      : []),
    ...(filters.isEV
      ? [{ label: "Electric Only", onRemove: () => updateFilter({ isEV: undefined }) }]
      : []),
  ];

  // Respect reduced motion for card animations
  const cardVariants = prefersReducedMotion
    ? {}
    : { initial: { opacity: 0, y: 10 }, animate: { opacity: 1, y: 0 } };

  return (
    <div className="max-w-[1280px] mx-auto px-4 py-6 pb-24">
      {/* HEADER */}
      <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4 mb-6">
        <div>
          <p className="text-[11px] uppercase tracking-[0.2em] text-blue-600 font-black mb-1">
            Premium Marketplace
          </p>
          <h1 className="text-3xl font-black text-gray-900">New Cars in India</h1>
          <p className="text-sm text-gray-500 mt-1">
            {loading ? "Loading…" : `${total.toLocaleString()} cars found`}
            {aiQuery && ` for "${aiQuery}"`}
            {!aiQuery && search && ` for "${search}"`}
          </p>
        </div>

        <div className="flex items-center gap-3">
          {/* Smart Search Toggle */}
          <button
            type="button"
            onClick={() => {
              setAiMode((v) => !v);
              if (aiMode) handleAIClear();
            }}
            aria-pressed={aiMode}
            className={cn(
              "inline-flex items-center gap-2 rounded-2xl px-4 py-3 text-sm font-bold border transition-all",
              aiMode
                ? "bg-gradient-to-r from-blue-600 to-indigo-600 text-white border-transparent shadow-lg"
                : "bg-white border-gray-200 text-gray-700 hover:border-blue-200"
            )}
          >
            <Sparkles className="w-4 h-4" aria-hidden="true" />
            Smart Search
            {aiMode && <span className="text-blue-200 text-xs">ON</span>}
          </button>

          <div className="inline-flex items-center gap-2 rounded-2xl bg-white border border-gray-200 px-4 py-3 shadow-sm">
            <Sparkles className="w-4 h-4 text-blue-500" aria-hidden="true" />
            <span className="text-sm font-semibold text-gray-700" aria-live="polite" aria-atomic="true">
              {total.toLocaleString()} Results
            </span>
          </div>
        </div>
      </div>

      {/* AI SEARCH BAR */}
      <AnimatePresence>
        {aiMode && (
          <motion.div
            initial={prefersReducedMotion ? {} : { opacity: 0, y: -10 }}
            animate={prefersReducedMotion ? {} : { opacity: 1, y: 0 }}
            exit={prefersReducedMotion ? {} : { opacity: 0, y: -10 }}
          >
            <AISearchBar onResults={handleAIResults} onClear={handleAIClear} />
          </motion.div>
        )}
      </AnimatePresence>

      {/* FILTER CHIPS */}
      {!aiMode && activeChips.length > 0 && (
        <div className="flex flex-wrap gap-2 mb-5" role="list" aria-label="Active filters">
          {activeChips.map(({ label, onRemove }) => (
            <motion.span
              key={label}
              role="listitem"
              {...(prefersReducedMotion ? {} : { initial: { opacity: 0, scale: 0.9 }, animate: { opacity: 1, scale: 1 } })}
              className="inline-flex items-center gap-2 rounded-2xl border border-blue-100 bg-blue-50 px-4 py-2 text-xs font-bold text-blue-700"
            >
              {label}
              <button
                type="button"
                onClick={onRemove}
                aria-label={`Remove ${label} filter`}
                className="focus:outline-none focus:ring-1 focus:ring-blue-400 rounded"
              >
                <X className="w-3.5 h-3.5" aria-hidden="true" />
              </button>
            </motion.span>
          ))}
          <button
            type="button"
            onClick={resetFilters}
            aria-label="Clear all active filters"
            className="text-xs font-bold text-gray-500 hover:text-blue-600 underline px-2"
          >
            Clear all
          </button>
        </div>
      )}

      {/* MAIN */}
      <div className="flex gap-6">
        {/* SIDEBAR */}
        {!aiMode && (
          <aside className="hidden lg:block w-[300px] shrink-0 sticky top-[95px] self-start">
            <div className="rounded-[30px] border border-gray-200/70 bg-white shadow-[0_10px_40px_rgba(0,0,0,0.04)] overflow-hidden">
              <div className="max-h-[calc(100vh-120px)] overflow-y-auto px-0 scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-transparent hover:scrollbar-thumb-gray-400">
                <FilterSidebar
                  filters={filters}
                  onChange={updateFilter}
                  onReset={resetFilters}
                  totalCount={total}
                />
              </div>
            </div>
          </aside>
        )}

        {/* MOBILE FILTER — BOTTOM SHEET */}
        <AnimatePresence>
          {mobileSidebar && !aiMode && (
            <motion.div
              initial={prefersReducedMotion ? {} : { opacity: 0 }}
              animate={prefersReducedMotion ? {} : { opacity: 1 }}
              exit={prefersReducedMotion ? {} : { opacity: 0 }}
              className="fixed inset-0 z-50 lg:hidden flex flex-col justify-end"
              role="dialog"
              aria-modal="true"
              aria-label="Filter cars"
            >
              {/* Backdrop */}
              <div
                className="absolute inset-0 bg-black/50 backdrop-blur-sm"
                onClick={() => setMobileSidebar(false)}
              />

              {/* Bottom sheet panel */}
              <motion.div
                initial={prefersReducedMotion ? {} : { y: "100%" }}
                animate={prefersReducedMotion ? {} : { y: 0 }}
                exit={prefersReducedMotion ? {} : { y: "100%" }}
                transition={{ type: "spring", damping: 30, stiffness: 280 }}
                className="relative w-full bg-white rounded-t-[28px] shadow-2xl flex flex-col max-h-[85vh]"
              >
                {/* Handle bar */}
                <div className="flex justify-center pt-3 pb-1 shrink-0">
                  <div className="w-10 h-1 rounded-full bg-gray-300" />
                </div>

                {/* Header */}
                <div className="flex items-center justify-between px-5 py-3 border-b border-gray-100 shrink-0">
                  <div>
                    <h3 className="text-base font-black text-gray-900">Filters</h3>
                    {activeChips.length > 0 && (
                      <p className="text-xs text-blue-600 font-semibold mt-0.5">
                        {activeChips.length} active
                      </p>
                    )}
                  </div>
                  <div className="flex items-center gap-2">
                    {activeChips.length > 0 && (
                      <button
                        type="button"
                        onClick={resetFilters}
                        className="text-xs font-bold text-red-500 hover:text-red-600 px-3 py-1.5 rounded-xl hover:bg-red-50 transition-colors"
                      >
                        Reset
                      </button>
                    )}
                    <button
                      type="button"
                      onClick={() => setMobileSidebar(false)}
                      aria-label="Close filters"
                      className="w-9 h-9 rounded-2xl bg-gray-100 flex items-center justify-center focus:outline-none focus:ring-2 focus:ring-blue-500"
                    >
                      <X className="w-4 h-4 text-gray-600" aria-hidden="true" />
                    </button>
                  </div>
                </div>

                {/* Scrollable filter content */}
                <div className="flex-1 overflow-y-auto overscroll-contain px-4 py-4">
                  <FilterSidebar
                    filters={filters}
                    onChange={updateFilter}
                    onReset={resetFilters}
                    totalCount={total}
                  />
                </div>

                {/* Apply button */}
                <div className="px-5 py-4 border-t border-gray-100 shrink-0 bg-white">
                  <button
                    type="button"
                    onClick={() => setMobileSidebar(false)}
                    className="w-full py-3.5 bg-gradient-to-r from-blue-600 to-cyan-500 text-white font-black text-sm rounded-2xl shadow-lg shadow-blue-200 hover:opacity-90 transition-opacity active:scale-95"
                  >
                    Show {total.toLocaleString()} Cars
                  </button>
                </div>
              </motion.div>
            </motion.div>
          )}
        </AnimatePresence>

        {/* CONTENT */}
        <div className="flex-1 min-w-0">
          {/* TOOLBAR */}
          {!aiMode && (
            <div className="sticky top-[80px] z-20 mb-5 rounded-[26px] border border-gray-200/70 bg-white/90 backdrop-blur-xl shadow-sm px-4 py-3">
              <div className="flex flex-wrap items-center gap-3">
                <button
                  type="button"
                  onClick={() => setMobileSidebar(true)}
                  aria-label="Open filters"
                  aria-expanded={mobileSidebar}
                  className="lg:hidden inline-flex items-center gap-2 rounded-2xl border border-gray-200 bg-gray-50 px-4 py-2 text-sm font-bold text-gray-700"
                >
                  <SlidersHorizontal className="w-4 h-4" aria-hidden="true" />
                  Filters
                </button>

                <span className="text-sm text-gray-500 hidden sm:block" aria-live="polite">
                  {loading ? "…" : `${total.toLocaleString()} results`}
                </span>

                <div className="flex-1" />

                {/* SORT */}
                <div className="relative">
                  <label htmlFor="sort-select" className="sr-only">Sort cars by</label>
                  <select
                    id="sort-select"
                    value={`${sortBy}-${sortOrder}`}
                    onChange={(e) => {
                      const opt = SORT_OPTIONS.find(
                        (o) => `${o.sortBy}-${o.sortOrder}` === e.target.value
                      );
                      if (opt) { setSortBy(opt.sortBy); setSortOrder(opt.sortOrder); }
                    }}
                    className="appearance-none rounded-2xl border border-gray-200 bg-white px-4 py-2 pr-10 text-sm font-semibold text-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500"
                  >
                    {SORT_OPTIONS.map((o) => (
                      <option key={`${o.sortBy}-${o.sortOrder}`} value={`${o.sortBy}-${o.sortOrder}`}>
                        {o.label}
                      </option>
                    ))}
                  </select>
                  <ChevronDown className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400 pointer-events-none" aria-hidden="true" />
                </div>

                {/* VIEW */}
                <div role="group" aria-label="View mode" className="flex items-center rounded-2xl border border-gray-200 overflow-hidden">
                  <button
                    type="button"
                    onClick={() => setView("list")}
                    aria-label="List view"
                    aria-pressed={view === "list"}
                    className={cn("p-2.5 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500", view === "list" ? "bg-blue-600 text-white" : "bg-white text-gray-400")}
                  >
                    <LayoutList className="w-4 h-4" aria-hidden="true" />
                  </button>
                  <button
                    type="button"
                    onClick={() => setView("grid")}
                    aria-label="Grid view"
                    aria-pressed={view === "grid"}
                    className={cn("p-2.5 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500", view === "grid" ? "bg-blue-600 text-white" : "bg-white text-gray-400")}
                  >
                    <LayoutGrid className="w-4 h-4" aria-hidden="true" />
                  </button>
                </div>
              </div>
            </div>
          )}

          {/* ERROR */}
          {error && (
            <div role="alert" className="mb-5 rounded-[24px] border border-red-200 bg-red-50 px-5 py-4 text-sm font-medium text-red-700">
              {error}
            </div>
          )}

          {/* LOADING */}
          {loading && <ListingSkeleton count={8} />}

          {/* DATA */}
          {!loading && cars.length > 0 && (
            <>
              {view === "list" ? (
                <div className="space-y-4">
                  {cars.map((car, index) => (
                    <motion.div
                      key={car.id}
                      {...cardVariants}
                      transition={prefersReducedMotion ? undefined : { delay: index * 0.03 }}
                    >
                      <CarListCard car={car} />
                    </motion.div>
                  ))}
                </div>
              ) : (
                <div className="grid grid-cols-1 sm:grid-cols-2 2xl:grid-cols-3 gap-5">
                  {cars.map((car, index) => (
                    <motion.div
                      key={car.id}
                      {...cardVariants}
                      transition={prefersReducedMotion ? undefined : { delay: index * 0.03 }}
                    >
                      <CarGridCard car={car} />
                    </motion.div>
                  ))}
                </div>
              )}

              {/* LOAD MORE (standard mode only) */}
              {!aiMode && page < totalPages && (
                <div className="flex justify-center mt-8">
                  <button
                    type="button"
                    onClick={loadMoreCars}
                    disabled={loadingMore}
                    aria-label="Load more cars"
                    className="px-8 py-4 rounded-2xl bg-gradient-to-r from-blue-600 to-cyan-500 text-white font-bold shadow-xl shadow-blue-100 hover:scale-105 transition-all duration-300 disabled:opacity-60"
                  >
                    {loadingMore ? "Loading…" : "Load More Cars"}
                  </button>
                </div>
              )}
            </>
          )}

          {/* EMPTY */}
          {!loading && cars.length === 0 && !error && (
            <div className="rounded-[36px] border border-gray-200/70 bg-white py-20 px-6 text-center">
              <div className="w-20 h-20 mx-auto mb-5 rounded-full bg-gray-100 flex items-center justify-center" aria-hidden="true">
                <Search className="w-10 h-10 text-gray-400" />
              </div>
              <h3 className="text-3xl font-black text-gray-900 mb-3">No Cars Found</h3>
              <p className="text-gray-500 mb-8">
                {aiMode ? "Try rephrasing your search query." : "Try changing your filters."}
              </p>
              <button
                type="button"
                onClick={aiMode ? handleAIClear : resetFilters}
                className="inline-flex items-center gap-2 rounded-2xl bg-gradient-to-r from-blue-600 to-cyan-500 px-7 py-4 text-white font-black shadow-xl shadow-blue-100"
              >
                {aiMode ? "Switch to standard search" : "Clear Filters"}
              </button>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}