"use client";

import { useEffect, useState, useCallback } from "react";
import { useParams } from "next/navigation";
import Link from "next/link";
import Image from "next/image";
import { motion, AnimatePresence } from "framer-motion";
import {
  Car, ChevronRight, ChevronLeft, ChevronDown, AlertCircle,
  Star, Fuel, Settings2, ArrowRight,
} from "lucide-react";
import { fetchBestCarsPage } from "@/lib/api";
import { resolveCarHeroImage } from "@/lib/carImage";
import type { BestCarsPage, Car as CarType } from "@/lib/types";

// ── Car Card ──────────────────────────────────────────────────────────────────
function CarCard({ car, rank }: { car: CarType; rank: number }) {
  const heroSrc = resolveCarHeroImage(car);
  return (
    <Link href={`/cars/${car.slug || car.id}`}>
      <div className="group bg-white rounded-2xl border border-gray-100 hover:border-blue-200 hover:shadow-xl transition-all duration-300 overflow-hidden cursor-pointer relative">
        {/* Rank badge */}
        <div className={`absolute top-3 left-3 z-10 w-7 h-7 rounded-full flex items-center justify-center text-xs font-black text-white ${
          rank === 1 ? "bg-amber-400" : rank === 2 ? "bg-gray-400" : rank === 3 ? "bg-orange-500" : "bg-blue-500/70"
        }`}>
          #{rank}
        </div>

        <div className="relative h-48 bg-gradient-to-br from-gray-50 to-gray-100 overflow-hidden">
          {heroSrc ? (
            <Image
              src={heroSrc}
              alt={car.name}
              fill
              className="object-cover group-hover:scale-105 transition-transform duration-500"
              sizes="(max-width: 640px) 100vw, 33vw"
              unoptimized
            />
          ) : (
            <div className="absolute inset-0 flex items-center justify-center">
              <Car className="w-14 h-14 text-gray-300" />
            </div>
          )}
          {car.fuelType?.toLowerCase().includes("electric") && (
            <span className="absolute top-3 right-3 bg-green-500 text-white text-xs font-bold px-2 py-0.5 rounded-full">
              EV
            </span>
          )}
        </div>

        <div className="p-4">
          <h3 className="font-bold text-gray-900 text-sm line-clamp-1 group-hover:text-blue-600 transition-colors">
            {car.name}
          </h3>
          <p className="text-blue-600 font-bold text-base mt-1">
            ₹{car.priceMin ?? car.price}
            {car.priceMax && car.priceMax !== car.priceMin ? ` – ₹${car.priceMax}` : ""} L
          </p>

          {car.rating > 0 && (
            <div className="flex items-center gap-1 mt-1.5">
              {Array.from({ length: 5 }).map((_, i) => (
                <Star
                  key={i}
                  className={`w-3 h-3 ${i < Math.round(car.rating) ? "text-amber-400 fill-current" : "text-gray-200 fill-current"}`}
                />
              ))}
              <span className="text-xs text-gray-400 ml-0.5">{car.rating.toFixed(1)}</span>
            </div>
          )}

          <div className="flex items-center gap-2 mt-2.5 text-xs text-gray-500 border-t border-gray-100 pt-2.5">
            <span className="flex items-center gap-1">
              <Fuel className="w-3 h-3" /> {car.fuelType || "Petrol"}
            </span>
            {car.specs?.mileage && (
              <span>· {car.specs.mileage}</span>
            )}
          </div>
        </div>
      </div>
    </Link>
  );
}

// ── FAQ Item ──────────────────────────────────────────────────────────────────
function FAQItem({ faq }: { faq: { question: string; answer: string } }) {
  const [open, setOpen] = useState(false);
  return (
    <div className="border border-gray-100 rounded-xl overflow-hidden">
      <button
        onClick={() => setOpen(!open)}
        className="w-full flex items-center justify-between p-4 text-left hover:bg-gray-50 transition-colors"
      >
        <span className="font-semibold text-gray-900 pr-4">{faq.question}</span>
        <ChevronDown className={`w-5 h-5 text-gray-400 flex-shrink-0 transition-transform ${open ? "rotate-180" : ""}`} />
      </button>
      <AnimatePresence>
        {open && (
          <motion.div initial={{ height: 0 }} animate={{ height: "auto" }} exit={{ height: 0 }} className="overflow-hidden">
            <p className="px-4 pb-4 text-gray-600 leading-relaxed">{faq.answer}</p>
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
}

// ── Main page ─────────────────────────────────────────────────────────────────
export default function BestCarsCategory() {
  const { category } = useParams<{ category: string }>();
  const [data, setData] = useState<BestCarsPage | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [page, setPage] = useState(1);

  const loadPage = useCallback((p: number) => {
    if (!category) return;
    setLoading(true);
    fetchBestCarsPage(category, { page: p, limit: 12 })
      .then((d) => { setData(d); setPage(p); window.scrollTo({ top: 0, behavior: "smooth" }); })
      .catch((e) => setError(e?.response?.data?.detail ?? "Failed to load category"))
      .finally(() => setLoading(false));
  }, [category]);

  useEffect(() => { loadPage(1); }, [loadPage]);

  if (error) {
    return (
      <div className="min-h-screen bg-gray-50 pt-24 flex items-center justify-center">
        <div className="text-center">
          <AlertCircle className="w-12 h-12 text-red-400 mx-auto mb-4" />
          <h2 className="text-xl font-bold text-gray-900 mb-2">Category not found</h2>
          <p className="text-gray-500 mb-6">{error}</p>
          <Link href="/best-cars" className="text-blue-600 font-semibold hover:underline flex items-center gap-1 justify-center">
            <ChevronLeft className="w-4 h-4" /> Back to all categories
          </Link>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-gray-50">
      {/* Hero */}
      <div className="bg-gradient-to-br from-slate-900 via-blue-900 to-indigo-900 text-white pt-24 pb-12">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <Link href="/best-cars" className="inline-flex items-center gap-1 text-blue-300 hover:text-white text-sm mb-6 transition-colors">
            <ChevronLeft className="w-4 h-4" /> Best Cars
          </Link>

          {loading && !data ? (
            <div className="animate-pulse space-y-3">
              <div className="h-10 bg-white/10 rounded-xl w-2/3" />
              <div className="h-6 bg-white/5 rounded-xl w-full max-w-2xl" />
            </div>
          ) : (
            <>
              <h1 className="text-4xl md:text-5xl font-black mb-3">
                {data?.icon} {data?.h1 ?? data?.title}
              </h1>
              <p className="text-blue-200 text-lg max-w-2xl">
                {data?.metaDescription || data?.description}
              </p>
              {data && (
                <div className="flex items-center gap-4 mt-4 text-sm text-blue-300">
                  <span>{data.total} cars found</span>
                  {data.pageUpdatedAt && (
                    <span>Last updated: {new Date(data.pageUpdatedAt).toLocaleDateString("en-IN")}</span>
                  )}
                </div>
              )}
            </>
          )}
        </div>
      </div>

      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
        {/* AI Content */}
        {data?.content && (
          <section className="mb-10 bg-white rounded-3xl p-6 md:p-8 shadow-sm border border-gray-100">
            <div
              className="prose prose-gray max-w-none text-gray-700 leading-relaxed
                [&_h2]:text-xl [&_h2]:font-bold [&_h2]:text-gray-900 [&_h2]:mt-6 [&_h2]:mb-3
                [&_h3]:text-base [&_h3]:font-semibold [&_h3]:text-gray-800 [&_h3]:mt-4 [&_h3]:mb-2
                [&_p]:mb-4 [&_ul]:mb-4 [&_ul]:pl-5 [&_li]:mb-1.5 [&_li]:marker:text-blue-500"
              dangerouslySetInnerHTML={{ __html: data.content }}
            />
          </section>
        )}

        {/* Car grid */}
        <section className="mb-10">
          <div className="flex items-center justify-between mb-5">
            <h2 className="text-xl font-bold text-gray-900">
              {data?.h1} ({data?.total ?? "..."})
            </h2>
            <span className="text-sm text-gray-400">
              Page {page} of {data?.totalPages ?? 1}
            </span>
          </div>

          {loading ? (
            <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4">
              {Array.from({ length: 12 }).map((_, i) => (
                <div key={i} className="bg-white rounded-2xl border border-gray-100 overflow-hidden animate-pulse">
                  <div className="h-48 bg-gray-200" />
                  <div className="p-4 space-y-2">
                    <div className="h-4 bg-gray-200 rounded w-3/4" />
                    <div className="h-4 bg-gray-100 rounded w-1/2" />
                  </div>
                </div>
              ))}
            </div>
          ) : (
            <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4">
              {(data?.cars ?? []).map((car, i) => (
                <CarCard key={car.id} car={car} rank={(page - 1) * 12 + i + 1} />
              ))}
            </div>
          )}

          {/* Pagination */}
          {data && data.totalPages > 1 && (
            <div className="flex items-center justify-center gap-2 mt-8">
              <button
                onClick={() => loadPage(page - 1)}
                disabled={page === 1 || loading}
                className="px-4 py-2 rounded-xl border border-gray-200 text-sm font-semibold disabled:opacity-40 hover:bg-gray-50 transition-colors"
              >
                ← Prev
              </button>
              {Array.from({ length: Math.min(data.totalPages, 7) }, (_, i) => i + 1).map((p) => (
                <button
                  key={p}
                  onClick={() => loadPage(p)}
                  className={`w-9 h-9 rounded-xl text-sm font-semibold transition-colors ${
                    p === page ? "bg-blue-600 text-white" : "border border-gray-200 hover:bg-gray-50"
                  }`}
                >
                  {p}
                </button>
              ))}
              <button
                onClick={() => loadPage(page + 1)}
                disabled={page === data.totalPages || loading}
                className="px-4 py-2 rounded-xl border border-gray-200 text-sm font-semibold disabled:opacity-40 hover:bg-gray-50 transition-colors"
              >
                Next →
              </button>
            </div>
          )}
        </section>

        {/* FAQs */}
        {(data?.faqs?.length ?? 0) > 0 && (
          <section className="mb-10">
            <h2 className="text-2xl font-bold text-gray-900 mb-5">Frequently Asked Questions</h2>
            <div className="bg-white rounded-3xl p-6 shadow-sm border border-gray-100 space-y-3">
              {data?.faqs?.map((faq, i) => <FAQItem key={i} faq={faq} />)}
            </div>
          </section>
        )}

        {/* Internal links to related categories */}
        <section className="bg-white rounded-3xl p-6 md:p-8 shadow-sm border border-gray-100">
          <h2 className="text-xl font-bold text-gray-900 mb-5">Explore More</h2>
          <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
            {[
              { href: "/best-cars", label: "All Best Car Lists", icon: "📋" },
              { href: "/brands", label: "Car Brands in India", icon: "🏷️" },
              { href: "/cars", label: "Browse All Cars", icon: "🚗" },
            ].map((link) => (
              <Link key={link.href} href={link.href}>
                <div className="flex items-center gap-3 p-4 rounded-xl border border-gray-100 hover:border-blue-200 hover:bg-blue-50 transition-all group">
                  <span className="text-xl">{link.icon}</span>
                  <span className="font-semibold text-gray-700 group-hover:text-blue-600 transition-colors text-sm">
                    {link.label}
                  </span>
                  <ArrowRight className="w-4 h-4 text-gray-300 group-hover:text-blue-400 ml-auto transition-colors" />
                </div>
              </Link>
            ))}
          </div>
        </section>
      </div>
    </div>
  );
}