"use client";

/**
 * /admin/cars/images — Car Image Management Dashboard
 *
 * Shows coverage stats, brand/status filters, a paginated car grid
 * and opens per-car image modal or the brand bulk-upload modal.
 */

import { useCallback, useEffect, useRef, useState } from "react";
import Image from "next/image";
import {
  Camera, Images, AlertTriangle, CheckCircle2, BarChart2,
  RefreshCw, Upload, Play, Search, Loader2, X, Car,
  ChevronLeft, ChevronRight, SlidersHorizontal,
} from "lucide-react";
import { cn } from "@/lib/utils";
import { resolveCarHeroImage } from "@/lib/carImage";
import { getAdminToken } from "@/lib/adminAuth";
import CarImageModal from "@/components/admin/CarImageModal";
import BrandBulkUpload from "@/components/admin/BrandBulkUpload";

const API = process.env.NEXT_PUBLIC_API_URL || "http://localhost:8000";

// ── Types ──────────────────────────────────────────────────────────────────────

interface CoverageStats {
  total:        number;
  uploaded:     number;
  partial:      number;
  pending:      number;
  byBrand:      Record<string, { total: number; uploaded: number; partial: number; pending: number }>;
}

interface CarRow {
  carId:        string;
  name:         string;
  brand:        string;
  primaryImage: string | null;
  imageStatus:  "uploaded" | "partial" | "pending_upload";
  imageCount:   number;
}

type StatusFilter = "all" | "uploaded" | "partial" | "pending_upload";

const STATUS_LABELS: Record<StatusFilter, string> = {
  all:             "All",
  uploaded:        "Uploaded",
  partial:         "Partial",
  pending_upload:  "Missing",
};

const STATUS_COLORS: Record<string, string> = {
  uploaded:        "bg-green-100 text-green-700 border-green-200",
  partial:         "bg-amber-100 text-amber-700 border-amber-200",
  pending_upload:  "bg-red-100 text-red-600 border-red-200",
};

const BRANDS = [
  "All", "Maruti Suzuki", "Hyundai", "Tata", "Mahindra", "Kia",
  "Toyota", "Honda", "MG", "Skoda", "Volkswagen",
  "BMW", "Mercedes-Benz", "Audi", "Lexus", "Volvo",
];

// ── API helpers ────────────────────────────────────────────────────────────────

async function apiFetch(path: string, opts: RequestInit = {}) {
  const token = getAdminToken();
  const res = await fetch(`${API}${path}`, {
    headers: {
      "Content-Type": "application/json",
      ...(token ? { Authorization: `Bearer ${token}` } : {}),
      ...((opts.headers as Record<string, string>) ?? {}),
    },
    ...opts,
  });
  if (!res.ok) { const d = await res.json().catch(() => ({})); throw new Error(d.detail ?? `HTTP ${res.status}`); }
  return res.json();
}

// ── Stat card ─────────────────────────────────────────────────────────────────

function StatCard({
  icon: Icon, label, value, sub, color, loading,
}: {
  icon: React.ComponentType<{ className?: string }>;
  label: string; value: string | number; sub?: string;
  color: string; loading?: boolean;
}) {
  return (
    <div className="bg-white rounded-2xl border border-gray-100 shadow-sm p-5 flex items-center gap-4">
      <div className={cn("w-12 h-12 rounded-2xl flex items-center justify-center shrink-0", color)}>
        <Icon className="w-6 h-6 text-white" />
      </div>
      <div className="min-w-0">
        <p className="text-xs font-bold text-gray-400 uppercase tracking-wider">{label}</p>
        {loading
          ? <div className="h-7 w-16 bg-gray-100 rounded-lg animate-pulse mt-1" />
          : <p className="text-2xl font-black text-gray-900 leading-tight">{value}</p>
        }
        {sub && <p className="text-xs text-gray-400 mt-0.5">{sub}</p>}
      </div>
    </div>
  );
}

// ── Car card ──────────────────────────────────────────────────────────────────

function CarCard({
  car,
  onManage,
}: {
  car: CarRow;
  onManage: (car: CarRow) => void;
}) {
  const heroSrc = resolveCarHeroImage({ primaryImage: car.primaryImage });

  return (
    <div className="group bg-white rounded-2xl border border-gray-100 shadow-sm overflow-hidden hover:shadow-md hover:border-blue-100 transition-all duration-200">
      {/* Thumbnail */}
      <div className="relative aspect-[16/10] bg-gradient-to-br from-slate-50 to-blue-50/30 overflow-hidden">
        {heroSrc ? (
          <Image
            src={heroSrc}
            alt={car.name}
            fill
            className="object-cover group-hover:scale-105 transition-transform duration-300"
            sizes="(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 20vw"
            unoptimized
          />
        ) : (
          <div className="absolute inset-0 flex items-center justify-center">
            <Car className="w-12 h-12 text-blue-100" />
          </div>
        )}

        {/* Status badge */}
        <div className="absolute top-2 right-2">
          <span className={cn(
            "text-[10px] font-black px-2 py-0.5 rounded-full border",
            STATUS_COLORS[car.imageStatus]
          )}>
            {car.imageStatus === "pending_upload" ? "No Images"
             : car.imageStatus === "partial" ? "Partial"
             : "Uploaded"}
          </span>
        </div>

        {car.imageCount > 0 && (
          <div className="absolute bottom-2 left-2 flex items-center gap-1 bg-black/50 backdrop-blur-sm text-white text-[10px] font-bold px-2 py-0.5 rounded-full">
            <Images className="w-2.5 h-2.5" />
            {car.imageCount}
          </div>
        )}
      </div>

      {/* Info */}
      <div className="p-3">
        <p className="text-xs font-semibold text-gray-400">{car.brand}</p>
        <p className="text-sm font-black text-gray-900 truncate leading-snug">{car.name}</p>
        <button
          onClick={() => onManage(car)}
          className="mt-2.5 w-full flex items-center justify-center gap-1.5 py-2 text-xs font-black rounded-xl bg-blue-600 hover:bg-blue-700 text-white transition-colors shadow-sm"
        >
          <Camera className="w-3.5 h-3.5" />
          Manage Images
        </button>
      </div>
    </div>
  );
}

// ── Main page ─────────────────────────────────────────────────────────────────

export default function CarImagesPage() {
  const [stats,          setStats]          = useState<CoverageStats | null>(null);
  const [cars,           setCars]           = useState<CarRow[]>([]);
  const [total,          setTotal]          = useState(0);
  const [page,           setPage]           = useState(1);
  const [loading,        setLoading]        = useState(false);
  const [statsLoading,   setStatsLoading]   = useState(true);
  const [brand,          setBrand]          = useState("All");
  const [statusFilter,   setStatusFilter]   = useState<StatusFilter>("all");
  const [search,         setSearch]         = useState("");
  const [searchInput,    setSearchInput]    = useState("");

  const [selectedCar,    setSelectedCar]    = useState<CarRow | null>(null);
  const [imageModalOpen, setImageModalOpen] = useState(false);
  const [bulkOpen,       setBulkOpen]       = useState(false);
  const [migrateLoading, setMigrateLoading] = useState(false);
  const [toast,          setToast]          = useState<{ msg: string; ok: boolean } | null>(null);

  const LIMIT = 24;
  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);

  const showToast = (msg: string, ok = true) => {
    setToast({ msg, ok });
    setTimeout(() => setToast(null), 3500);
  };

  // ── Load stats ──────────────────────────────────────────────────────────────
  const loadStats = useCallback(async () => {
    setStatsLoading(true);
    try {
      const d = await apiFetch("/api/car-images/coverage");
      setStats(d);
    } catch { /* ignore */ }
    finally { setStatsLoading(false); }
  }, []);

  // ── Load car list ───────────────────────────────────────────────────────────
  const loadCars = useCallback(async (p: number) => {
    setLoading(true);
    try {
      const params = new URLSearchParams({
        page:  String(p),
        limit: String(LIMIT),
      });
      if (brand !== "All") params.set("brand", brand);
      if (statusFilter !== "all") params.set("status", statusFilter);
      if (search) params.set("search", search);

      const d = await apiFetch(`/api/car-images/cars?${params}`);
      setCars(d.cars ?? []);
      setTotal(d.total ?? 0);
    } catch { setCars([]); }
    finally { setLoading(false); }
  }, [brand, statusFilter, search]);

  // ── Effects ─────────────────────────────────────────────────────────────────
  useEffect(() => { loadStats(); }, [loadStats]);
  useEffect(() => { setPage(1); loadCars(1); }, [brand, statusFilter, search, loadCars]);

  function handleSearchChange(v: string) {
    setSearchInput(v);
    if (debounceRef.current) clearTimeout(debounceRef.current);
    debounceRef.current = setTimeout(() => setSearch(v), 350);
  }

  function handlePageChange(p: number) {
    setPage(p);
    loadCars(p);
    window.scrollTo({ top: 0, behavior: "smooth" });
  }

  // ── Run migration ────────────────────────────────────────────────────────────
  async function runMigration() {
    if (!confirm("This will mark ALL cars without images as 'pending_upload'. Continue?")) return;
    setMigrateLoading(true);
    try {
      const d = await apiFetch("/api/car-images/migrate", { method: "POST" });
      showToast(`Migration complete — ${d.updated} cars updated`);
      loadStats();
      loadCars(page);
    } catch (e: any) {
      showToast(e.message, false);
    } finally {
      setMigrateLoading(false);
    }
  }

  function handleManage(car: CarRow) {
    setSelectedCar(car);
    setImageModalOpen(true);
  }

  function handleModalSaved() {
    loadStats();
    loadCars(page);
  }

  const totalPages = Math.max(1, Math.ceil(total / LIMIT));

  const coveragePct = stats && stats.total > 0
    ? Math.round((stats.uploaded / stats.total) * 100)
    : 0;

  return (
    <div className="p-4 sm:p-6 max-w-[1400px] mx-auto space-y-6 min-w-0">

      {/* ── Header ── */}
      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
        <div>
          <h1 className="text-2xl font-black text-gray-900 flex items-center gap-2">
            <Camera className="w-6 h-6 text-blue-500" />
            Car Image Management
          </h1>
          <p className="text-sm text-gray-400 mt-0.5">
            Upload, assign and manage images for every car in the catalogue
          </p>
        </div>
        <div className="flex items-center gap-2 flex-wrap">
          <button
            onClick={() => { loadStats(); loadCars(page); }}
            className="flex items-center gap-1.5 px-3 py-2 text-xs font-bold text-gray-600 bg-white border border-gray-200 rounded-xl hover:bg-gray-50 transition-colors shadow-sm"
          >
            <RefreshCw className="w-3.5 h-3.5" />
            Refresh
          </button>
          <button
            onClick={runMigration}
            disabled={migrateLoading}
            className="flex items-center gap-1.5 px-3 py-2 text-xs font-bold text-amber-700 bg-amber-50 border border-amber-200 rounded-xl hover:bg-amber-100 transition-colors shadow-sm disabled:opacity-50"
          >
            {migrateLoading
              ? <Loader2 className="w-3.5 h-3.5 animate-spin" />
              : <Play className="w-3.5 h-3.5" />
            }
            Run Migration
          </button>
          <button
            onClick={() => setBulkOpen(true)}
            className="flex items-center gap-1.5 px-4 py-2 text-xs font-black text-white bg-gradient-to-r from-orange-500 to-amber-400 rounded-xl hover:opacity-90 transition-all shadow-md"
          >
            <Upload className="w-3.5 h-3.5" />
            Bulk Upload
          </button>
        </div>
      </div>

      {/* ── Toast ── */}
      {toast && (
        <div className={cn(
          "flex items-center gap-2 px-4 py-3 rounded-xl text-sm font-semibold border",
          toast.ok ? "bg-green-50 text-green-700 border-green-200"
                   : "bg-red-50 text-red-700 border-red-200"
        )}>
          {toast.ok ? <CheckCircle2 className="w-4 h-4 shrink-0" /> : <AlertTriangle className="w-4 h-4 shrink-0" />}
          <p className="flex-1 min-w-0 break-words">{toast.msg}</p>
          <button onClick={() => setToast(null)} className="ml-auto p-1.5 rounded-lg hover:opacity-70 shrink-0" aria-label="Dismiss">
            <X className="w-4 h-4" />
          </button>
        </div>
      )}

      {/* ── Stats grid ── */}
      <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
        <StatCard
          icon={Car}
          label="Total Cars"
          value={stats?.total ?? "—"}
          color="bg-blue-500"
          loading={statsLoading}
        />
        <StatCard
          icon={CheckCircle2}
          label="With Images"
          value={stats?.uploaded ?? "—"}
          sub={`${coveragePct}% coverage`}
          color="bg-green-500"
          loading={statsLoading}
        />
        <StatCard
          icon={AlertTriangle}
          label="Missing Images"
          value={stats ? stats.pending + stats.partial : "—"}
          sub={stats ? `${stats.partial} partial` : undefined}
          color="bg-red-500"
          loading={statsLoading}
        />
        <StatCard
          icon={BarChart2}
          label="Coverage"
          value={`${coveragePct}%`}
          color="bg-violet-500"
          loading={statsLoading}
        />
      </div>

      {/* ── Coverage bar ── */}
      {stats && stats.total > 0 && (
        <div className="bg-white rounded-2xl border border-gray-100 shadow-sm p-5">
          <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-1 mb-3 min-w-0">
            <p className="text-sm font-black text-gray-700 shrink-0">Image Coverage</p>
            <p className="text-xs text-gray-400 break-words">
              {stats.uploaded} uploaded · {stats.partial} partial · {stats.pending} missing
            </p>
          </div>
          <div className="h-3 bg-gray-100 rounded-full overflow-hidden flex">
            <div
              className="h-full bg-green-500 transition-all duration-700"
              style={{ width: `${(stats.uploaded / stats.total) * 100}%` }}
            />
            <div
              className="h-full bg-amber-400 transition-all duration-700"
              style={{ width: `${(stats.partial / stats.total) * 100}%` }}
            />
          </div>
          <div className="flex gap-4 mt-2">
            <div className="flex items-center gap-1.5"><span className="w-2.5 h-2.5 rounded-full bg-green-500 shrink-0" /><span className="text-xs text-gray-500">Uploaded</span></div>
            <div className="flex items-center gap-1.5"><span className="w-2.5 h-2.5 rounded-full bg-amber-400 shrink-0" /><span className="text-xs text-gray-500">Partial</span></div>
            <div className="flex items-center gap-1.5"><span className="w-2.5 h-2.5 rounded-full bg-gray-200 shrink-0" /><span className="text-xs text-gray-500">Missing</span></div>
          </div>
        </div>
      )}

      {/* ── Filters ── */}
      <div className="bg-white rounded-2xl border border-gray-100 shadow-sm p-4 space-y-3">
        {/* Search */}
        <div className="relative">
          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-300" />
          <input
            type="text"
            value={searchInput}
            onChange={(e) => handleSearchChange(e.target.value)}
            placeholder="Search cars by name…"
            className="w-full pl-9 pr-4 py-2.5 text-sm border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-400 bg-gray-50 font-semibold text-gray-700 placeholder-gray-300"
          />
          {searchInput && (
            <button
              onClick={() => { setSearchInput(""); setSearch(""); }}
              className="absolute right-3 top-1/2 -translate-y-1/2 p-0.5 rounded hover:bg-gray-200 transition-colors"
            >
              <X className="w-3.5 h-3.5 text-gray-400" />
            </button>
          )}
        </div>

        {/* Status filter */}
        <div className="flex items-center gap-1.5 flex-wrap">
          <SlidersHorizontal className="w-3.5 h-3.5 text-gray-300 shrink-0" />
          {(Object.keys(STATUS_LABELS) as StatusFilter[]).map((s) => (
            <button
              key={s}
              onClick={() => setStatusFilter(s)}
              className={cn(
                "text-xs font-bold px-3 py-1 rounded-full border transition-colors",
                statusFilter === s
                  ? "bg-gray-900 text-white border-gray-900"
                  : "bg-gray-50 text-gray-500 border-gray-200 hover:border-gray-300 hover:bg-gray-100"
              )}
            >
              {STATUS_LABELS[s]}
              {s !== "all" && stats && (
                <span className="ml-1 opacity-60">
                  ({s === "uploaded" ? stats.uploaded
                  : s === "partial" ? stats.partial
                  : stats.pending})
                </span>
              )}
            </button>
          ))}
        </div>

        {/* Brand chips */}
        <div className="flex gap-1.5 flex-wrap">
          {BRANDS.map((b) => {
            const brandStats = b === "All" ? null : stats?.byBrand?.[b];
            return (
              <button
                key={b}
                onClick={() => setBrand(b)}
                className={cn(
                  "text-xs font-bold px-3 py-1 rounded-full border transition-colors",
                  brand === b
                    ? "bg-blue-600 text-white border-blue-600"
                    : "bg-white text-gray-600 border-gray-200 hover:border-blue-300 hover:bg-blue-50"
                )}
              >
                {b}
                {brandStats && (
                  <span className={cn("ml-1", brand === b ? "opacity-70" : "opacity-40")}>
                    {brandStats.uploaded}/{brandStats.total}
                  </span>
                )}
              </button>
            );
          })}
        </div>
      </div>

      {/* ── Cars grid ── */}
      <div>
        <div className="flex items-center justify-between mb-3">
          <p className="text-sm font-bold text-gray-500">
            {loading ? "Loading…" : `${total} cars`}
            {(brand !== "All" || statusFilter !== "all" || search) && " (filtered)"}
          </p>
          <p className="text-xs text-gray-400">Page {page} of {totalPages}</p>
        </div>

        {loading ? (
          <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 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="aspect-[16/10] bg-gray-100" />
                <div className="p-3 space-y-2">
                  <div className="h-2.5 bg-gray-100 rounded w-2/3" />
                  <div className="h-3.5 bg-gray-100 rounded" />
                  <div className="h-7 bg-gray-100 rounded-xl" />
                </div>
              </div>
            ))}
          </div>
        ) : cars.length === 0 ? (
          <div className="bg-white rounded-2xl border border-gray-100 shadow-sm py-20 flex flex-col items-center gap-3">
            <Camera className="w-12 h-12 text-gray-200" />
            <p className="text-sm font-black text-gray-400">No cars found</p>
            <p className="text-xs text-gray-300">Try changing your filters</p>
          </div>
        ) : (
          <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-4">
            {cars.map((car) => (
              <CarCard key={car.carId} car={car} onManage={handleManage} />
            ))}
          </div>
        )}

        {/* Pagination */}
        {totalPages > 1 && (
          <div className="flex items-center justify-center gap-2 mt-6">
            {/* Compact pagination — avoids 7-button overflow at 320–414px */}
            <div className="flex sm:hidden items-center gap-2">
              <button
                onClick={() => handlePageChange(page - 1)}
                disabled={page <= 1}
                className="p-2 rounded-xl border border-gray-200 bg-white hover:bg-gray-50 disabled:opacity-40 disabled:cursor-not-allowed transition-colors shadow-sm"
                aria-label="Previous page"
              >
                <ChevronLeft className="w-4 h-4 text-gray-600" />
              </button>
              <span className="text-sm font-bold text-gray-700 px-2 tabular-nums">
                {page} / {totalPages}
              </span>
              <button
                onClick={() => handlePageChange(page + 1)}
                disabled={page >= totalPages}
                className="p-2 rounded-xl border border-gray-200 bg-white hover:bg-gray-50 disabled:opacity-40 disabled:cursor-not-allowed transition-colors shadow-sm"
                aria-label="Next page"
              >
                <ChevronRight className="w-4 h-4 text-gray-600" />
              </button>
            </div>

            <div className="hidden sm:flex items-center gap-2">
              <button
                onClick={() => handlePageChange(page - 1)}
                disabled={page <= 1}
                className="p-2 rounded-xl border border-gray-200 bg-white hover:bg-gray-50 disabled:opacity-40 disabled:cursor-not-allowed transition-colors shadow-sm"
                aria-label="Previous page"
              >
                <ChevronLeft className="w-4 h-4 text-gray-600" />
              </button>

              {Array.from({ length: Math.min(7, totalPages) }, (_, i) => {
                let p: number;
                if (totalPages <= 7) { p = i + 1; }
                else if (page <= 4) { p = i + 1; }
                else if (page >= totalPages - 3) { p = totalPages - 6 + i; }
                else { p = page - 3 + i; }
                return (
                  <button
                    key={p}
                    onClick={() => handlePageChange(p)}
                    className={cn(
                      "w-9 h-9 rounded-xl text-sm font-bold border transition-colors shadow-sm",
                      page === p
                        ? "bg-blue-600 text-white border-blue-600"
                        : "bg-white text-gray-600 border-gray-200 hover:bg-gray-50"
                    )}
                  >
                    {p}
                  </button>
                );
              })}

              <button
                onClick={() => handlePageChange(page + 1)}
                disabled={page >= totalPages}
                className="p-2 rounded-xl border border-gray-200 bg-white hover:bg-gray-50 disabled:opacity-40 disabled:cursor-not-allowed transition-colors shadow-sm"
                aria-label="Next page"
              >
                <ChevronRight className="w-4 h-4 text-gray-600" />
              </button>
            </div>
          </div>
        )}
      </div>

      {/* ── Modals ── */}
      {selectedCar && (
        <CarImageModal
          carId={selectedCar.carId}
          carName={selectedCar.name}
          brand={selectedCar.brand}
          open={imageModalOpen}
          onClose={() => { setImageModalOpen(false); setSelectedCar(null); }}
          onSaved={handleModalSaved}
        />
      )}

      <BrandBulkUpload
        open={bulkOpen}
        onClose={() => setBulkOpen(false)}
        onDone={() => { loadStats(); loadCars(page); }}
      />
    </div>
  );
}