"use client";

import { useState } from "react";
import Link from "next/link";
import Image from "next/image";
import { Swords, TrendingDown, TrendingUp, Star, GitCompare, ChevronRight } from "lucide-react";
import type { RivalCar, CarRivals } from "@/lib/types";
import { cn } from "@/lib/utils";
import { resolveCarHeroImage } from "@/lib/carImage";
import CarFieldBadges from "@/components/cars/CarFieldBadges";

// ── helpers ───────────────────────────────────────────────────────────────────

function fmtPrice(n: number): string {
  if (!n) return "—";
  if (n >= 10_000_000) return `₹${(n / 10_000_000).toFixed(2)} Cr`;
  if (n >= 100_000)    return `₹${(n / 100_000).toFixed(1)} L`;
  return `₹${n.toLocaleString("en-IN")}`;
}

// ── Rival card ────────────────────────────────────────────────────────────────

function RivalCard({
  car,
  currentCarId,
  badge,
}: {
  car: RivalCar;
  currentCarId: string;
  badge?: { label: string; color: string };
}) {
  const href = car.slug ? `/cars/${car.slug}` : `/cars/${car.id}`;

  const heroSrc = resolveCarHeroImage(car);

  return (
    <div className="group rounded-2xl border border-gray-100 bg-white hover:border-blue-200 hover:shadow-lg transition-all duration-200 overflow-hidden">
      {/* Image */}
      <Link href={href} className="block relative h-36 bg-gradient-to-br from-gray-50 to-gray-100">
        {heroSrc ? (
          <Image
            src={heroSrc}
            alt={`${car.brand} ${car.name}`}
            fill
            className="object-contain p-3 group-hover:scale-105 transition-transform duration-300"
            sizes="(max-width: 640px) 50vw, 25vw"
          />
        ) : (
          <div className="absolute inset-0 flex items-center justify-center text-gray-300 text-4xl font-black select-none">
            {car.brand[0]}
          </div>
        )}
        {badge && (
          <span className={`absolute top-2 left-2 text-[10px] font-black px-2 py-0.5 rounded-lg ${badge.color}`}>
            {badge.label}
          </span>
        )}
      </Link>

      {/* Info */}
      <div className="p-3">
        <p className="text-[10px] text-gray-400 font-bold uppercase tracking-wide">{car.brand}</p>
        <Link href={href}>
          <h3 className="text-sm font-black text-gray-900 leading-tight hover:text-blue-600 transition-colors line-clamp-1">
            {car.name}
          </h3>
        </Link>

        <div className="flex items-center justify-between mt-2">
          <span className="text-sm font-black text-gray-900">{fmtPrice(car.priceMin)}</span>
          {car.rating > 0 && (
            <div className="flex items-center gap-1">
              <Star className="w-3 h-3 fill-amber-400 text-amber-400" />
              <span className="text-xs font-bold text-gray-600">{car.rating.toFixed(1)}</span>
            </div>
          )}
        </div>

        <div className="flex flex-wrap items-center gap-1.5 mt-2">
          <CarFieldBadges value={car.fuelType} kind="fuel" size="sm" />
          <CarFieldBadges value={car.bodyType} kind="body" size="sm" />
        </div>

        <Link
          href={`/compare?cars=${currentCarId},${car.id}`}
          className="mt-3 flex items-center justify-center gap-1 w-full py-1.5 rounded-xl border border-gray-200 text-xs font-bold text-gray-600 hover:border-blue-300 hover:text-blue-600 hover:bg-blue-50 transition-all"
        >
          <GitCompare className="w-3 h-3" />
          Compare
        </Link>
      </div>
    </div>
  );
}

// ── Tab config ────────────────────────────────────────────────────────────────

const TABS = [
  {
    key:   "direct"  as const,
    label: "Direct Rivals",
    icon:  Swords,
    badge: { label: "Rival",  color: "bg-red-100 text-red-600" },
    empty: "No direct rivals found in the same segment and price range.",
    desc:  "Same segment, similar price",
  },
  {
    key:   "budget"  as const,
    label: "Budget Options",
    icon:  TrendingDown,
    badge: { label: "Cheaper", color: "bg-green-100 text-green-700" },
    empty: "No budget alternatives found.",
    desc:  "More affordable alternatives",
  },
  {
    key:   "premium" as const,
    label: "Premium Step-up",
    icon:  TrendingUp,
    badge: { label: "Premium", color: "bg-purple-100 text-purple-700" },
    empty: "No premium alternatives found.",
    desc:  "Upmarket options to consider",
  },
] as const;

// ── Main export ───────────────────────────────────────────────────────────────

export default function RivalsSection({
  rivals,
  currentCarId,
  currentCarName,
}: {
  rivals: CarRivals;
  currentCarId: string;
  currentCarName: string;
}) {
  const [activeTab, setActiveTab] = useState<"direct" | "budget" | "premium">("direct");

  const hasAny =
    rivals.direct.length > 0 || rivals.budget.length > 0 || rivals.premium.length > 0;

  if (!hasAny) return null;

  const activeConfig = TABS.find((t) => t.key === activeTab)!;
  const activeList   = rivals[activeTab];

  return (
    <div className="rounded-[32px] bg-white border border-gray-200/60 p-6 md:p-8 shadow-[0_10px_40px_rgba(0,0,0,0.05)] mb-6 mt-4">
      {/* Header */}
      <div className="flex items-center gap-4 mb-6">
        <div className="w-12 h-12 rounded-2xl bg-red-50 flex items-center justify-center shrink-0">
          <Swords className="w-6 h-6 text-red-500" />
        </div>
        <div>
          <p className="text-[10px] uppercase tracking-[0.2em] text-red-500 font-black">
            Market Rivals
          </p>
          <h2 className="text-xl font-black text-gray-900">Competitor Analysis</h2>
          <p className="text-xs text-gray-400 mt-0.5">
            How {currentCarName} stacks up against the competition
          </p>
        </div>
      </div>

      {/* Tab bar */}
      <div className="flex gap-2 mb-6 overflow-x-auto pb-1 scrollbar-hide">
        {TABS.map(({ key, label, icon: Icon }) => {
          const count = rivals[key].length;
          if (count === 0) return null;
          const isActive = activeTab === key;
          return (
            <button
              key={key}
              onClick={() => setActiveTab(key)}
              className={cn(
                "flex items-center gap-2 px-4 py-2 rounded-2xl text-sm font-bold whitespace-nowrap transition-all shrink-0",
                isActive
                  ? "bg-gray-900 text-white shadow-lg"
                  : "bg-gray-100 text-gray-600 hover:bg-gray-200"
              )}
            >
              <Icon className="w-4 h-4" />
              {label}
              <span className={cn(
                "text-[10px] font-black px-1.5 py-0.5 rounded-full",
                isActive ? "bg-white/20 text-white" : "bg-white text-gray-500"
              )}>
                {count}
              </span>
            </button>
          );
        })}
      </div>

      {/* Tab description */}
      <p className="text-xs text-gray-400 font-semibold mb-4">{activeConfig.desc}</p>

      {/* Grid */}
      {activeList.length === 0 ? (
        <p className="text-sm text-gray-400 text-center py-8">{activeConfig.empty}</p>
      ) : (
        <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-3">
          {activeList.map((car) => (
            <RivalCard
              key={car.id}
              car={car}
              currentCarId={currentCarId}
              badge={activeConfig.badge}
            />
          ))}
        </div>
      )}

      {/* Footer CTA */}
      <div className="mt-5 pt-4 border-t border-gray-100 flex items-center justify-between">
        <p className="text-xs text-gray-400">
          Rivals auto-identified · updated daily
        </p>
        <Link
          href={`/compare?cars=${currentCarId}`}
          className="flex items-center gap-1 text-xs font-bold text-blue-600 hover:underline"
        >
          Full comparison tool
          <ChevronRight className="w-3.5 h-3.5" />
        </Link>
      </div>
    </div>
  );
}