"use client";

import { useEffect, useState } from "react";
import Link from "next/link";
import Image from "next/image";
import { motion } from "framer-motion";
import { Car, ChevronRight, Search, Star, Zap } from "lucide-react";
import { fetchBrandsList as fetchBrands } from "@/lib/api";
import { getBrandInitials, getBrandLogo } from "@/lib/brandLogos";
import type { BrandListItem } from "@/lib/types";
import { formatPrice } from "@/lib/utils";

function BrandLogoArea({ brand }: { brand: BrandListItem }) {
  const logoPath = getBrandLogo(brand.brandSlug);
  const initials = getBrandInitials(brand.brand);
  const [imgError, setImgError] = useState(false);

  const showInitials = !logoPath || imgError;

  return (
    <div className="flex h-24 items-center justify-center border-b border-gray-100 bg-gray-50/80 px-4">
      {showInitials ? (
        <span className="text-2xl font-black tracking-tight text-gray-400">
          {initials}
        </span>
      ) : (
        <Image
          src={logoPath}
          alt={brand.brand}
          width={100}
          height={60}
          className="h-[60px] w-[100px] object-contain"
          sizes="100px"
          loading="lazy"
          onError={() => setImgError(true)}
          unoptimized
        />
      )}
    </div>
  );
}

function BrandCard({ brand, index }: { brand: BrandListItem; index: number }) {
  const bodyTypes = brand.bodyTypes.filter(Boolean).slice(0, 2);
  const fuelTypes = brand.fuelTypes.filter(Boolean).slice(0, 3);

  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ delay: index * 0.04 }}
    >
      <Link href={`/brands/${brand.brandSlug}`} className="block h-full">
        <div className="group flex h-full cursor-pointer flex-col overflow-hidden rounded-2xl border border-gray-200 bg-white transition-all duration-300 hover:-translate-y-1 hover:border-gray-300 hover:shadow-lg">
          <BrandLogoArea brand={brand} />

          <div className="flex flex-1 flex-col p-4">
            <div className="mb-2 flex items-start justify-between gap-2">
              <h3 className="text-lg font-bold leading-tight text-gray-900 transition-colors group-hover:text-blue-600">
                {brand.brand}
              </h3>
              {brand.avgRating > 0 && (
                <span className="flex shrink-0 items-center gap-1 rounded-full bg-amber-50 px-2 py-1 text-xs font-semibold text-amber-600">
                  <Star className="h-3 w-3 fill-current" />
                  {brand.avgRating.toFixed(1)}
                </span>
              )}
            </div>

            <p className="mb-3 text-sm text-gray-500">
              {brand.totalCars} {brand.totalCars === 1 ? "Car" : "Cars"} Available
            </p>

            {brand.priceFrom > 0 && (
              <p className="mb-3 text-sm font-semibold text-gray-800">
                {formatPrice(brand.priceFrom)} – {formatPrice(brand.priceTo)}
              </p>
            )}

            {fuelTypes.length > 0 && (
              <div className="mb-3 flex flex-wrap gap-1.5">
                {fuelTypes.map((ft) => (
                  <span
                    key={ft}
                    className={`rounded-full px-2 py-0.5 text-xs font-medium ${
                      ft.toLowerCase().includes("electric")
                        ? "bg-green-50 text-green-700"
                        : "bg-gray-100 text-gray-600"
                    }`}
                  >
                    {ft.toLowerCase().includes("electric") && "⚡ "}
                    {ft}
                  </span>
                ))}
              </div>
            )}

            {bodyTypes.length > 0 && (
              <p className="mb-4 text-xs text-gray-400">
                {bodyTypes.join(" • ")}
              </p>
            )}

            <div className="mt-auto flex items-center gap-1 pt-3 text-sm font-semibold text-blue-600">
              View Cars
              <ChevronRight className="h-4 w-4 transition-transform group-hover:translate-x-1" />
            </div>
          </div>
        </div>
      </Link>
    </motion.div>
  );
}

export default function BrandsPage() {
  const [brands, setBrands] = useState<BrandListItem[]>([]);
  const [filtered, setFiltered] = useState<BrandListItem[]>([]);
  const [search, setSearch] = useState("");
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetchBrands()
      .then((res) => {
        setBrands(res.brands);
        setFiltered(res.brands);
      })
      .catch(console.error)
      .finally(() => setLoading(false));
  }, []);

  useEffect(() => {
    if (!search.trim()) {
      setFiltered(brands);
    } else {
      const q = search.toLowerCase();
      setFiltered(brands.filter((b) => b.brand.toLowerCase().includes(q)));
    }
  }, [search, brands]);

  const totalCars = brands.reduce((s, b) => s + b.totalCars, 0);
  const evBrands = brands.filter((b) =>
    b.fuelTypes.some((f) => f.toLowerCase().includes("electric"))
  ).length;

  return (
    <div className="min-h-screen bg-gray-50">
      {/* Compact hero */}
      <div className="bg-gradient-to-br from-blue-900 via-blue-800 to-indigo-900 text-white pt-20 pb-8">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <motion.div
            initial={{ opacity: 0, y: -12 }}
            animate={{ opacity: 1, y: 0 }}
            className="flex flex-col items-center gap-5 text-center md:flex-row md:justify-between md:text-left"
          >
            <div className="max-w-xl">
              <span className="mb-3 inline-flex items-center gap-2 rounded-full bg-white/10 px-3 py-1.5 text-xs font-medium backdrop-blur">
                <Car className="h-3.5 w-3.5" />
                Car Brands in India
              </span>
              <h1 className="text-2xl font-black leading-tight md:text-3xl">
                All Car Brands in India 2026
              </h1>
              <p className="mt-2 text-sm text-blue-100 md:text-base">
                Compare prices, models, and specs across every brand.
              </p>
            </div>

            <div className="flex shrink-0 gap-6 sm:gap-8">
              {[
                { label: "Brands", value: brands.length },
                { label: "Cars", value: totalCars },
                { label: "EV Brands", value: evBrands },
              ].map((s) => (
                <div key={s.label} className="text-center">
                  <div className="text-2xl font-black text-white sm:text-3xl">
                    {s.value}
                  </div>
                  <div className="text-xs text-blue-200 sm:text-sm">{s.label}</div>
                </div>
              ))}
            </div>
          </motion.div>
        </div>
      </div>

      {/* Sticky search */}
      <div className="sticky top-16 z-30 border-b border-gray-200/80 bg-gray-50/95 px-4 py-4 backdrop-blur-sm sm:px-6 lg:px-8">
        <div className="mx-auto max-w-3xl">
          <div className="relative">
            <Search className="absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 text-gray-400" />
            <input
              value={search}
              onChange={(e) => setSearch(e.target.value)}
              placeholder="Search car brand..."
              className="w-full rounded-xl border border-gray-200 bg-white py-3 pl-12 pr-4 text-gray-900 shadow-sm transition-shadow focus:outline-none focus:ring-2 focus:ring-blue-500"
            />
          </div>
        </div>
      </div>

      {/* Brands grid */}
      <div className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
        {loading ? (
          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6">
            {Array.from({ length: 18 }).map((_, i) => (
              <div
                key={i}
                className="animate-pulse overflow-hidden rounded-2xl border border-gray-200 bg-white"
              >
                <div className="h-24 bg-gray-200" />
                <div className="space-y-2 p-4">
                  <div className="h-4 w-3/4 rounded bg-gray-200" />
                  <div className="h-3 w-1/2 rounded bg-gray-100" />
                </div>
              </div>
            ))}
          </div>
        ) : filtered.length === 0 ? (
          <div className="py-20 text-center text-gray-500">
            <Car className="mx-auto mb-4 h-12 w-12 opacity-30" />
            <p className="text-lg font-medium">No brands match your search</p>
          </div>
        ) : (
          <>
            <p className="mb-6 text-sm text-gray-500">
              Showing {filtered.length} of {brands.length} brands
            </p>
            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6">
              {filtered.map((brand, i) => (
                <BrandCard key={brand.brandSlug} brand={brand} index={i} />
              ))}
            </div>
          </>
        )}
      </div>

      {/* CTA */}
      <div className="mx-auto max-w-7xl px-4 pb-16 sm:px-6 lg:px-8">
        <div className="rounded-3xl bg-gradient-to-r from-blue-600 to-indigo-600 p-8 text-center text-white">
          <Zap className="mx-auto mb-3 h-8 w-8" />
          <h2 className="mb-2 text-2xl font-bold">Not sure which brand to choose?</h2>
          <p className="mb-6 text-blue-100">
            Use our smart car advisor to find the perfect match
          </p>
          <Link
            href="/cars"
            className="inline-flex items-center gap-2 rounded-xl bg-white px-6 py-3 font-bold text-blue-600 transition-colors hover:bg-blue-50"
          >
            Explore All Cars <ChevronRight className="h-4 w-4" />
          </Link>
        </div>
      </div>
    </div>
  );
}