"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, ChevronDown, Star, Zap, Shield, DollarSign,
  MapPin, Fuel, Settings2, BarChart2, ChevronLeft, AlertCircle,
} from "lucide-react";
import { fetchBrandPage } from "@/lib/api";
import { resolveCarHeroImage } from "@/lib/carImage";
import type { BrandPage, Car as CarType } from "@/lib/types";
import BodyTypeSilhouette from "@/components/ui/BodyTypeSilhouette";
import BrandLogo from "@/components/brand/BrandLogo";

// ── Car Card (minimal) ────────────────────────────────────────────────────────
function CarCard({ car }: { car: CarType }) {
  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-lg transition-all duration-300 overflow-hidden cursor-pointer">
        <div className="relative h-44 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) 50vw, 25vw"
              unoptimized
            />
          ) : (
            <div className="absolute inset-0 flex items-center justify-center p-6">
              <BodyTypeSilhouette
                type={car.bodyType}
                className="w-full h-full text-gray-300 max-h-[80px]"
              />
            </div>
          )}
          {car.fuelType?.toLowerCase().includes("electric") && (
            <span className="absolute top-2 right-2 bg-green-500 text-white text-xs font-bold px-2 py-0.5 rounded-full">
              EV
            </span>
          )}
        </div>
        <div className="p-3 min-w-0">
          <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-semibold text-xs sm:text-sm mt-1 line-clamp-1">
            ₹{car.priceMin ?? car.price}
            {car.priceMax && car.priceMax !== car.priceMin ? ` – ₹${car.priceMax}` : ""} L
          </p>
          <div className="flex items-center gap-2 mt-2 text-xs text-gray-400 min-w-0">
            <span>{car.fuelType}</span>
            {car.transmission && (
              <>
                <span>·</span>
                <span>{car.transmission}</span>
              </>
            )}
          </div>
        </div>
      </div>
    </Link>
  );
}

// ── Car section ────────────────────────────────────────────────────────────────
function CarSection({
  title, cars, icon,
}: {
  title: string;
  cars: CarType[];
  icon: React.ReactNode;
}) {
  if (!cars || cars.length === 0) return null;
  return (
    <div className="mb-12">
      <div className="flex items-center gap-2 mb-5">
        <span className="text-blue-600">{icon}</span>
        <h2 className="text-xl font-bold text-gray-900">{title}</h2>
        <span className="text-sm text-gray-400 ml-auto">{cars.length} cars</span>
      </div>
      <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4">
        {cars.slice(0, 10).map((car) => (
          <CarCard key={car.id} car={car} />
        ))}
      </div>
    </div>
  );
}

// ── FAQ Item ──────────────────────────────────────────────────────────────────
function FAQItem({ faq, index }: { faq: { question: string; answer: string }; index: number }) {
  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 min-w-0 break-words">{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 BrandPage() {
  const { brand } = useParams<{ brand: string }>();
  const [data, setData] = useState<BrandPage | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [activeTab, setActiveTab] = useState("popular");

  useEffect(() => {
    if (!brand) return;
    setLoading(true);
    fetchBrandPage(brand)
      .then(setData)
      .catch((e) => setError(e?.response?.data?.detail ?? "Failed to load brand page"))
      .finally(() => setLoading(false));
  }, [brand]);

  if (loading) {
    return (
      <div className="min-h-screen bg-gray-50 pt-24">
        <div className="max-w-7xl mx-auto px-4 py-20 animate-pulse space-y-6">
          <div className="h-10 bg-gray-200 rounded-xl w-1/3" />
          <div className="h-6 bg-gray-100 rounded-xl w-2/3" />
          <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4">
            {Array.from({ length: 8 }).map((_, i) => (
              <div key={i} className="bg-white rounded-2xl border border-gray-100 overflow-hidden">
                <div className="h-44 bg-gray-200" />
                <div className="p-3 space-y-2">
                  <div className="h-4 bg-gray-200 rounded w-3/4" />
                  <div className="h-3 bg-gray-100 rounded w-1/2" />
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    );
  }

  if (error || !data) {
    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">Brand not found</h2>
          <p className="text-gray-500 mb-6">{error}</p>
          <Link href="/brands" className="text-blue-600 font-semibold hover:underline flex items-center gap-1 justify-center">
            <ChevronLeft className="w-4 h-4" /> Back to all brands
          </Link>
        </div>
      </div>
    );
  }

  const { stats, cars } = data;

  const TABS = [
    { id: "popular", label: "Popular", cars: cars.popular },
    { id: "latest", label: "Latest", cars: cars.latest },
    { id: "suv", label: "SUVs", cars: cars.suv },
    { id: "sedan", label: "Sedans", cars: cars.sedan },
    { id: "hatchback", label: "Hatchbacks", cars: cars.hatchback },
    { id: "ev", label: "⚡ EV", cars: cars.ev },
    ...(cars.upcoming.length > 0 ? [{ id: "upcoming", label: "Upcoming", cars: cars.upcoming }] : []),
  ].filter((t) => t.cars.length > 0);

  const resolvedActiveTab = TABS.some((t) => t.id === activeTab)
    ? activeTab
    : (TABS[0]?.id ?? activeTab);
  const activeTabCars = TABS.find((t) => t.id === resolvedActiveTab)?.cars ?? [];

  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="/brands" 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" /> All Brands
          </Link>

          <div className="flex flex-col md:flex-row md:items-end gap-6">
            <div className="flex flex-1 min-w-0 items-start gap-4">
              <BrandLogo brand={data.brand} size={48} className="shrink-0 sm:hidden" />
              <BrandLogo brand={data.brand} size={56} className="shrink-0 hidden sm:block" />
              <div className="min-w-0 flex-1">
                <h1 className="text-2xl sm:text-4xl md:text-5xl font-black mb-3 break-words leading-tight">
                  {data.brand} Cars in India
                </h1>
                <p className="text-blue-200 text-base sm:text-lg max-w-2xl break-words">
                  {data.metaDescription || `Explore all ${data.brand} cars in India. Check prices, specs, mileage and more.`}
                </p>
              </div>
            </div>

            {/* Stats badges */}
            <div className="flex flex-wrap gap-3">
              {[
                { label: "Cars", value: stats.totalCars, icon: <Car className="w-4 h-4" /> },
                { label: "From", value: `₹${stats.priceFrom}L`, icon: <DollarSign className="w-4 h-4" /> },
                ...(stats.hasEV ? [{ label: "EV Models", value: cars.ev.length, icon: <Zap className="w-4 h-4" /> }] : []),
              ].map((s) => (
                <div key={s.label} className="bg-white/10 backdrop-blur-sm rounded-xl px-4 py-2 text-center">
                  <div className="flex items-center gap-1.5 text-sm text-blue-200 mb-0.5">{s.icon}{s.label}</div>
                  <div className="text-white font-bold">{s.value}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
        {/* Overview (AI content) */}
        {data.overview && (
          <section className="mb-12 bg-white rounded-3xl p-6 md:p-8 shadow-sm border border-gray-100">
            <h2 className="text-2xl font-bold text-gray-900 mb-4">About {data.brand}</h2>
            <div
              className="prose prose-gray max-w-none text-gray-700 leading-relaxed break-words [&_p]:mb-4 [&_*]:break-words"
              dangerouslySetInnerHTML={{ __html: data.overview }}
            />
          </section>
        )}

        {/* Car tabs */}
        <section className="mb-12">
          <div className="flex gap-2 overflow-x-auto pb-2 mb-6 scrollbar-hide">
            {TABS.map((tab) => (
              <button
                key={tab.id}
                onClick={() => setActiveTab(tab.id)}
                className={`flex-shrink-0 px-4 py-2 rounded-full text-sm font-semibold transition-all ${
                  resolvedActiveTab === tab.id
                    ? "bg-blue-600 text-white shadow-sm"
                    : "bg-white text-gray-600 border border-gray-200 hover:border-blue-300"
                }`}
              >
                {tab.label}
                <span className={`ml-1.5 text-xs ${resolvedActiveTab === tab.id ? "text-blue-200" : "text-gray-400"}`}>
                  {tab.cars.length}
                </span>
              </button>
            ))}
          </div>

          <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4">
            {activeTabCars.map((car) => (
              <CarCard key={car.id} car={car} />
            ))}
          </div>
        </section>

        {/* By Budget */}
        <section className="mb-12 bg-white rounded-3xl p-6 md:p-8 shadow-sm border border-gray-100">
          <h2 className="text-xl sm:text-2xl font-bold text-gray-900 mb-6 flex items-center gap-2 break-words">
            <DollarSign className="w-6 h-6 text-blue-600 shrink-0" /> {data.brand} Cars by Budget
          </h2>
          <div className="grid grid-cols-1 sm:grid-cols-3 gap-6">
            {[
              { label: "Under ₹5 Lakh", cars: cars.byBudget.under5, color: "bg-green-50 border-green-200" },
              { label: "₹5L – ₹15L", cars: cars.byBudget.fiveTo15, color: "bg-blue-50 border-blue-200" },
              { label: "Above ₹15L", cars: cars.byBudget.above15, color: "bg-purple-50 border-purple-200" },
            ].map((tier) => (
              <div key={tier.label} className={`${tier.color} border rounded-2xl p-4`}>
                <h3 className="font-bold text-gray-800 mb-3">{tier.label}</h3>
                {tier.cars.length === 0 ? (
                  <p className="text-sm text-gray-400">No cars in this range</p>
                ) : (
                  <div className="space-y-2">
                    {tier.cars.slice(0, 4).map((car) => (
                      <Link key={car.id} href={`/cars/${car.slug || car.id}`}>
                        <div className="flex items-center gap-2 hover:text-blue-600 transition-colors min-w-0">
                          <ChevronRight className="w-3 h-3 text-gray-400 flex-shrink-0" />
                          <span className="text-sm text-gray-700 line-clamp-1">{car.name}</span>
                          <span className="text-xs text-gray-500 ml-auto flex-shrink-0">
                            ₹{car.priceMin ?? car.price}L
                          </span>
                        </div>
                      </Link>
                    ))}
                  </div>
                )}
              </div>
            ))}
          </div>
        </section>

        {/* Fuel Type summary */}
        {stats.fuelTypes.length > 0 && (
          <section className="mb-12 bg-white rounded-3xl p-6 md:p-8 shadow-sm border border-gray-100">
            <h2 className="text-xl sm:text-2xl font-bold text-gray-900 mb-5 flex items-center gap-2 break-words">
              <Fuel className="w-6 h-6 text-blue-600 shrink-0" /> {data.brand} Cars by Fuel Type
            </h2>
            <div className="flex flex-wrap gap-3">
              {stats.fuelTypes.filter(Boolean).map((ft) => (
                <Link
                  key={ft}
                  href={`/cars?brand=${encodeURIComponent(data.brand)}&fuelType=${encodeURIComponent(ft)}`}
                  className={`flex items-center gap-2 px-4 py-2 rounded-xl font-semibold text-sm border transition-all hover:shadow-md ${
                    ft.toLowerCase().includes("electric")
                      ? "bg-green-50 border-green-200 text-green-700 hover:bg-green-100"
                      : "bg-gray-50 border-gray-200 text-gray-700 hover:bg-gray-100"
                  }`}
                >
                  {ft.toLowerCase().includes("electric") && <Zap className="w-4 h-4" />}
                  {ft}
                </Link>
              ))}
            </div>
          </section>
        )}

        {/* Brand History (AI) */}
        {data.history && (
          <section className="mb-12 bg-white rounded-3xl p-6 md:p-8 shadow-sm border border-gray-100">
            <h2 className="text-2xl font-bold text-gray-900 mb-4">{data.brand} — Brand History</h2>
            <div
              className="prose prose-gray max-w-none text-gray-700 leading-relaxed break-words [&_p]:mb-4 [&_*]:break-words"
              dangerouslySetInnerHTML={{ __html: data.history }}
            />
          </section>
        )}

        {/* Buying Guide + Ownership (AI) */}
        {(data.buyingGuide || data.ownershipInfo) && (
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-12">
            {data.buyingGuide && (
              <div className="bg-white rounded-3xl p-6 shadow-sm border border-gray-100">
                <h2 className="text-xl font-bold text-gray-900 mb-4 flex items-center gap-2">
                  <Shield className="w-5 h-5 text-blue-600" /> Buying Guide
                </h2>
                <div
                  className="prose prose-gray max-w-none text-gray-700 text-sm leading-relaxed break-words [&_p]:mb-3 [&_*]:break-words"
                  dangerouslySetInnerHTML={{ __html: data.buyingGuide }}
                />
              </div>
            )}
            {data.ownershipInfo && (
              <div className="bg-white rounded-3xl p-6 shadow-sm border border-gray-100">
                <h2 className="text-xl font-bold text-gray-900 mb-4 flex items-center gap-2">
                  <Settings2 className="w-5 h-5 text-blue-600" /> Ownership Cost
                </h2>
                <div
                  className="prose prose-gray max-w-none text-gray-700 text-sm leading-relaxed break-words [&_p]:mb-3 [&_*]:break-words"
                  dangerouslySetInnerHTML={{ __html: data.ownershipInfo }}
                />
              </div>
            )}
          </div>
        )}

        {/* FAQs (AI) */}
        {data.faqs?.length > 0 && (
          <section className="mb-12">
            <h2 className="text-xl sm:text-2xl font-bold text-gray-900 mb-6 flex items-center gap-2 break-words">
              <BarChart2 className="w-6 h-6 text-blue-600 shrink-0" /> {data.brand} — Frequently Asked Questions
            </h2>
            <div className="space-y-3 bg-white rounded-3xl p-6 shadow-sm border border-gray-100">
              {data.faqs.map((faq, i) => (
                <FAQItem key={i} faq={faq} index={i} />
              ))}
            </div>
          </section>
        )}

        {/* CTA */}
        <div className="bg-gradient-to-r from-blue-600 to-indigo-600 rounded-3xl p-8 text-white text-center">
          <h2 className="text-xl sm:text-2xl font-bold mb-2 break-words">Compare {data.brand} with other brands</h2>
          <p className="text-blue-100 mb-6">Use our comparison tool to find the best car for your needs</p>
          <div className="flex flex-col sm:flex-row gap-3 justify-center">
            <Link href="/cars" className="inline-flex items-center gap-2 bg-white text-blue-600 font-bold px-6 py-3 rounded-xl hover:bg-blue-50 transition-colors">
              All Cars <ChevronRight className="w-4 h-4" />
            </Link>
            <Link href="/brands" className="inline-flex items-center gap-2 bg-white/10 text-white font-semibold px-6 py-3 rounded-xl hover:bg-white/20 transition-colors">
              All Brands
            </Link>
          </div>
        </div>
      </div>
    </div>
  );
}