"use client";

import Image from "next/image";
import { useSearchParams } from "next/navigation";
import {
  FormEvent,
  MouseEvent,
  Suspense,
  useCallback,
  useEffect,
  useMemo,
  useRef,
  useState,
} from "react";
import {
  AlertTriangle,
  BatteryCharging,
  ChevronDown,
  Edit3,
  ImagePlus,
  IndianRupee,
  Loader2,
  Plus,
  Search,
  SlidersHorizontal,
  Trash2,
  X,
} from "lucide-react";
import { AdminGuard } from "@/components/admin/AdminGuard";
import { ModelImageUploadField } from "@/components/admin/ModelImageUploadField";
import { AdminShell } from "@/components/admin/AdminShell";
import {
  adminRequest,
  loadActiveAdminLocations,
  type AdminCarLogo,
  type AdminCarModel,
  type AdminLocation,
  type AdminModelPackagePrice,
  type AdminVehicleTier,
  type PackageType,
} from "@/lib/admin-api";
import { uploadCarModelImage } from "@/lib/storage";
import { toStorageUrl } from "@/lib/storage-url";

type ModelFormState = {
  id?: number;
  manufacturerId: number;
  tierId: string;
  name: string;
  fuelType: string;
  engineCc: string;
  isEv: boolean;
  status: string;
  image: string;
};

type CarModelFilters = {
  fuelTypes: string[];
  statuses: string[];
  engineCc: {
    min: number | null;
    max: number | null;
    ranges: Array<{
      label: string;
      min: number;
      max: number;
    }>;
  };
};

const carFuelTypeOptions = ["Petrol", "Diesel", "CNG", "Petrol Hybrid"];
const carStatusOptions = [
  { value: "current", label: "Current" },
  { value: "discontinued", label: "Discontinued" },
];

const emptyForm: ModelFormState = {
  manufacturerId: 0,
  tierId: "",
  name: "",
  fuelType: carFuelTypeOptions[0],
  engineCc: "",
  isEv: false,
  status: "current",
  image: "",
};

export default function AdminCarModelsPage() {
  return <AdminCarModelsScreen />;
}

export function AdminCarModelsScreen({ manufacturerSlug = "" }: { manufacturerSlug?: string }) {
  return (
    <Suspense fallback={null}>
      <AdminCarModelsContent routeManufacturerSlug={manufacturerSlug} />
    </Suspense>
  );
}

function AdminCarModelsContent({ routeManufacturerSlug = "" }: { routeManufacturerSlug?: string }) {
  const searchParams = useSearchParams();
  const fixedManufacturerId = searchParams.get("manufacturerId") ?? "";
  const fixedManufacturerSlug = routeManufacturerSlug || searchParams.get("manufacturerSlug") || "";
  const [models, setModels] = useState<AdminCarModel[]>([]);
  const [manufacturers, setManufacturers] = useState<AdminCarLogo[]>([]);
  const [tiers, setTiers] = useState<AdminVehicleTier[]>([]);
  const [search, setSearch] = useState("");
  const [manufacturerFilter, setManufacturerFilter] = useState(fixedManufacturerId);
  const [fuelTypeFilter, setFuelTypeFilter] = useState("");
  const [engineCcRange, setEngineCcRange] = useState("");
  const [tierFilter, setTierFilter] = useState("");
  const [statusFilter, setStatusFilter] = useState("");
  const [isFilterBarOpen, setIsFilterBarOpen] = useState(false);
  const [isEvMode, setIsEvMode] = useState(false);
  const [filterOptions, setFilterOptions] = useState<CarModelFilters>({
    fuelTypes: [],
    statuses: [],
    engineCc: {
      min: null,
      max: null,
      ranges: [],
    },
  });
  const [page, setPage] = useState(1);
  const [hasMore, setHasMore] = useState(false);
  const [total, setTotal] = useState(0);
  const [isLoading, setIsLoading] = useState(true);
  const [isLoadingMore, setIsLoadingMore] = useState(false);
  const [isSaving, setIsSaving] = useState(false);
  const [isUploadingImage, setIsUploadingImage] = useState(false);
  const [isDeletingId, setIsDeletingId] = useState<number | null>(null);
  const [errorMessage, setErrorMessage] = useState("");
  const [form, setForm] = useState<ModelFormState | null>(null);
  const [pricingModel, setPricingModel] = useState<AdminCarModel | null>(null);
  const [pendingDeleteModel, setPendingDeleteModel] = useState<AdminCarModel | null>(null);
  const loadMoreRef = useRef<HTMLDivElement | null>(null);

  const loadManufacturers = useCallback(async () => {
    const data = await adminRequest<{ logos: AdminCarLogo[] }>(
      "/api/admin/vehicle-logos?vehicleType=car&limit=60",
    );
    setManufacturers(data.logos);
  }, []);

  const loadTiers = useCallback(async () => {
    const data = await adminRequest<{ tiers: AdminVehicleTier[] }>("/api/admin/vehicle-tiers");
    setTiers(data.tiers.filter((tier) => tier.vehicleType === "car"));
  }, []);

  const loadFilterOptions = useCallback(async () => {
    const params = new URLSearchParams();

    if (fixedManufacturerSlug) {
      params.set("manufacturerSlug", fixedManufacturerSlug);
    } else if (manufacturerFilter) {
      params.set("manufacturerId", manufacturerFilter);
    }

    params.set("isEv", String(isEvMode));

    const data = await adminRequest<CarModelFilters>(
      `/api/admin/car-models/filters?${params.toString()}`,
    );
    setFilterOptions(data);
    setFuelTypeFilter((current) => (current && data.fuelTypes.includes(current) ? current : ""));
    setStatusFilter((current) => (current && data.statuses.includes(current) ? current : ""));
    setEngineCcRange((current) =>
      current && data.engineCc.ranges.some((range) => `${range.min}-${range.max}` === current)
        ? current
        : "",
    );
  }, [fixedManufacturerSlug, isEvMode, manufacturerFilter]);

  useEffect(() => {
    setManufacturerFilter(fixedManufacturerId);
  }, [fixedManufacturerId, fixedManufacturerSlug]);

  useEffect(() => {
    if (!isEvMode) {
      return;
    }

    setFuelTypeFilter("");
    setEngineCcRange("");
  }, [isEvMode]);

  const loadModels = useCallback(
    async (nextPage: number, mode: "replace" | "append") => {
      if (mode === "append") {
        setIsLoadingMore(true);
      } else {
        setIsLoading(true);
      }
      setErrorMessage("");

      try {
        const params = new URLSearchParams({
          page: String(nextPage),
          limit: "24",
        });

        if (search.trim()) {
          params.set("search", search.trim());
        }

        if (fixedManufacturerSlug) {
          params.set("manufacturerSlug", fixedManufacturerSlug);
        } else if (manufacturerFilter) {
          params.set("manufacturerId", manufacturerFilter);
        }

        params.set("isEv", String(isEvMode));

        if (!isEvMode && fuelTypeFilter) {
          params.set("fuelType", fuelTypeFilter);
        }

        if (tierFilter) {
          params.set("tierId", tierFilter);
        }

        if (statusFilter) {
          params.set("status", statusFilter);
        }

        if (!isEvMode && engineCcRange) {
          const [min, max] = engineCcRange.split("-");
          params.set("engineCcMin", min);
          params.set("engineCcMax", max);
        }

        const data = await adminRequest<{
          models: AdminCarModel[];
          page: number;
          total: number;
          hasMore: boolean;
        }>(`/api/admin/car-models?${params.toString()}`);

        setModels((current) =>
          getUniqueModelsById(mode === "append" ? [...current, ...data.models] : data.models),
        );
        setPage(data.page);
        setTotal(data.total);
        setHasMore(data.hasMore);
      } catch (error) {
        setErrorMessage(error instanceof Error ? error.message : "Could not load car models");
      } finally {
        setIsLoading(false);
        setIsLoadingMore(false);
      }
    },
    [
      engineCcRange,
      fixedManufacturerSlug,
      fuelTypeFilter,
      isEvMode,
      manufacturerFilter,
      search,
      statusFilter,
      tierFilter,
    ],
  );

  const selectedManufacturer = manufacturers.find((manufacturer) =>
    fixedManufacturerSlug
      ? manufacturer.slug === fixedManufacturerSlug
      : String(manufacturer.id) === manufacturerFilter,
  );
  const activeFilterCount = [
    isEvMode,
    manufacturerFilter && !fixedManufacturerId && !fixedManufacturerSlug,
    !isEvMode && fuelTypeFilter,
    !isEvMode && engineCcRange,
    tierFilter,
    statusFilter,
  ].filter(Boolean).length;

  function resetFilters() {
    if (!fixedManufacturerId && !fixedManufacturerSlug) {
      setManufacturerFilter("");
    }

    setFuelTypeFilter("");
    setEngineCcRange("");
    setTierFilter("");
    setStatusFilter("");
    setIsEvMode(false);
  }

  useEffect(() => {
    loadManufacturers().catch(() => setManufacturers([]));
    loadTiers().catch(() => setTiers([]));
  }, [loadManufacturers, loadTiers]);

  useEffect(() => {
    loadFilterOptions().catch(() =>
      setFilterOptions({
        fuelTypes: [],
        statuses: [],
        engineCc: {
          min: null,
          max: null,
          ranges: [],
        },
      }),
    );
  }, [loadFilterOptions]);

  useEffect(() => {
    const timer = window.setTimeout(() => {
      loadModels(1, "replace");
    }, 250);

    return () => window.clearTimeout(timer);
  }, [loadModels]);

  useEffect(() => {
    const target = loadMoreRef.current;

    if (!target || !hasMore || isLoading || isLoadingMore) {
      return;
    }

    const observer = new IntersectionObserver(
      (entries) => {
        if (entries[0]?.isIntersecting) {
          loadModels(page + 1, "append");
        }
      },
      { rootMargin: "500px 0px" },
    );

    observer.observe(target);
    return () => observer.disconnect();
  }, [hasMore, isLoading, isLoadingMore, loadModels, page]);

  useEffect(() => {
    if (!form && !pricingModel && !pendingDeleteModel) {
      return;
    }

    const previousOverflow = document.body.style.overflow;
    document.body.style.overflow = "hidden";

    return () => {
      document.body.style.overflow = previousOverflow;
    };
  }, [form, pendingDeleteModel, pricingModel]);

  function openAddForm() {
    setForm({
      ...emptyForm,
      manufacturerId:
        selectedManufacturer?.id || Number(manufacturerFilter) || manufacturers[0]?.id || 0,
    });
  }

  function openEditForm(model: AdminCarModel) {
    setForm({
      id: model.id,
      manufacturerId: model.manufacturerId,
      tierId: model.tierId ? String(model.tierId) : "",
      name: model.name,
      fuelType: model.isEv ? "" : normalizeCarFuelType(model.fuelType),
      engineCc: model.engineCc !== null ? String(model.engineCc) : "",
      isEv: model.isEv,
      status: normalizeCarStatus(model.status),
      image: model.image ?? "",
    });
  }

  async function uploadModelImage(file: Blob) {
    if (!form) {
      return;
    }

    if (!form.name.trim()) {
      setErrorMessage("Enter a model name before uploading the model image.");
      return;
    }

    setIsUploadingImage(true);
    setErrorMessage("");

    try {
      const imageUrl = await uploadCarModelImage(file, form.id ?? null, form.name.trim());
      setForm((current) => (current ? { ...current, image: imageUrl } : current));
    } catch (error) {
      setErrorMessage(error instanceof Error ? error.message : "Could not upload model image");
    } finally {
      setIsUploadingImage(false);
    }
  }

  async function saveModel(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();

    if (!form) {
      return;
    }

    setIsSaving(true);
    setErrorMessage("");

    try {
      if (!form.manufacturerId) {
        throw new Error("Choose a car company before saving.");
      }

      if (!form.tierId) {
        throw new Error("Choose a tier before saving.");
      }

      if (!form.isEv && !form.fuelType) {
        throw new Error("Choose a fuel type before saving.");
      }

      const payload = {
        manufacturerId: form.manufacturerId,
        tierId: Number(form.tierId),
        name: form.name.trim(),
        fuelType: form.isEv ? null : form.fuelType,
        engineCc: form.isEv ? null : form.engineCc ? Number(form.engineCc) : null,
        isEv: form.isEv,
        status: form.status,
        image: form.image.trim() || null,
      };

      if (form.id) {
        await adminRequest(`/api/admin/car-models/${form.id}`, {
          method: "PUT",
          body: JSON.stringify(payload),
        });
        const nextManufacturer = manufacturers.find(
          (manufacturer) => manufacturer.id === form.manufacturerId,
        );
        const nextTier = tiers.find((tier) => String(tier.id) === form.tierId);

        setModels((current) =>
          current.map((model) =>
            model.id === form.id
              ? {
                  ...model,
                  manufacturerId: form.manufacturerId,
                  tierId: Number(form.tierId),
                  name: payload.name,
                  fuelType: payload.fuelType,
                  engineCc: payload.engineCc,
                  isEv: payload.isEv,
                  status: payload.status,
                  image: toStorageUrl(payload.image),
                  manufacturerName: nextManufacturer?.name ?? model.manufacturerName,
                  manufacturerSlug: nextManufacturer?.slug ?? model.manufacturerSlug,
                  manufacturerLogo: nextManufacturer?.logo ?? model.manufacturerLogo,
                  tierName: nextTier?.name ?? model.tierName,
                  tierLevel: nextTier?.tierLevel ?? model.tierLevel,
                }
              : model,
          ),
        );
      } else {
        await adminRequest("/api/admin/car-models", {
          method: "POST",
          body: JSON.stringify(payload),
        });
        await loadModels(1, "replace");
      }

      setForm(null);
    } catch (error) {
      setErrorMessage(error instanceof Error ? error.message : "Could not save car model");
    } finally {
      setIsSaving(false);
    }
  }

  async function deleteModel(model: AdminCarModel) {
    setIsDeletingId(model.id);
    setErrorMessage("");

    try {
      await adminRequest(`/api/admin/car-models/${model.id}`, {
        method: "DELETE",
      });
      setPendingDeleteModel(null);
      setPricingModel((current) => (current?.id === model.id ? null : current));
      await loadModels(1, "replace");
    } catch (error) {
      setErrorMessage(error instanceof Error ? error.message : "Could not delete car model");
    } finally {
      setIsDeletingId(null);
    }
  }

  return (
    <AdminGuard>
      <AdminShell title="Car models" lead="Search, add, edit, and maintain car model details.">
        <section className="space-y-5">
          <div className="sticky top-16 z-20 space-y-3 rounded-lg border border-border bg-white/95 p-4 shadow-sm backdrop-blur">
            <div className="grid gap-3 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center">
              <div className="relative min-w-0">
                <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
                <input
                  value={search}
                  onChange={(event) => setSearch(event.target.value)}
                  placeholder="Search by model or company"
                  className="h-11 w-full rounded-md border border-border bg-white pl-10 pr-11 text-sm font-semibold outline-none transition focus:border-primary focus:ring-2 focus:ring-primary/15"
                />
                {search ? (
                  <button
                    type="button"
                    onClick={() => setSearch("")}
                    className="absolute right-2 top-1/2 grid h-7 w-7 -translate-y-1/2 place-items-center rounded-md text-muted-foreground transition hover:bg-slate-100 hover:text-foreground"
                    aria-label="Clear model search"
                  >
                    <X className="h-4 w-4" />
                  </button>
                ) : null}
              </div>
              <button
                type="button"
                onClick={openAddForm}
                className="inline-flex h-11 items-center justify-center gap-2 rounded-md bg-primary px-4 text-sm font-black text-primary-foreground transition hover:opacity-95"
              >
                <Plus className="h-4 w-4" />
                Add model
              </button>
            </div>

            <button
              type="button"
              onClick={() => setIsFilterBarOpen((current) => !current)}
              className="flex h-10 w-full items-center justify-between rounded-md border border-border bg-slate-50 px-3 text-sm font-black text-foreground transition hover:bg-slate-100 md:hidden"
              aria-expanded={isFilterBarOpen}
              aria-controls="car-model-filter-bar"
            >
              <span className="inline-flex items-center gap-2">
                <SlidersHorizontal className="h-4 w-4 text-primary" />
                Filters
                {activeFilterCount ? (
                  <span className="rounded-full bg-primary px-2 py-0.5 text-[10px] font-black text-primary-foreground">
                    {activeFilterCount}
                  </span>
                ) : null}
              </span>
              <ChevronDown
                className={`h-4 w-4 transition-transform ${isFilterBarOpen ? "rotate-180" : ""}`}
              />
            </button>

            <div
              id="car-model-filter-bar"
              className={`${isFilterBarOpen ? "grid" : "hidden"} gap-3 md:grid md:grid-cols-2 ${isEvMode ? "xl:grid-cols-5" : "xl:grid-cols-7"}`}
            >
              {fixedManufacturerId || fixedManufacturerSlug ? (
                <div className="flex h-11 items-center rounded-md border border-border bg-slate-50 px-3 text-sm font-black text-foreground">
                  {selectedManufacturer ? selectedManufacturer.name : "Selected company"}
                </div>
              ) : (
                <select
                  value={manufacturerFilter}
                  onChange={(event) => setManufacturerFilter(event.target.value)}
                  className="h-11 rounded-md border border-border bg-white px-3 text-sm font-semibold outline-none transition focus:border-primary focus:ring-2 focus:ring-primary/15"
                >
                  <option value="">All companies</option>
                  {manufacturers.map((manufacturer) => (
                    <option key={manufacturer.id} value={manufacturer.id}>
                      {manufacturer.name}
                    </option>
                  ))}
                </select>
              )}
              {!isEvMode ? (
                <>
                  <select
                    value={fuelTypeFilter}
                    onChange={(event) => setFuelTypeFilter(event.target.value)}
                    className="h-11 rounded-md border border-border bg-white px-3 text-sm font-semibold outline-none transition focus:border-primary focus:ring-2 focus:ring-primary/15"
                  >
                    <option value="">All fuel types</option>
                    {filterOptions.fuelTypes.map((fuelType) => (
                      <option key={fuelType} value={fuelType}>
                        {fuelType}
                      </option>
                    ))}
                  </select>
                  <select
                    value={engineCcRange}
                    onChange={(event) => setEngineCcRange(event.target.value)}
                    className="h-11 rounded-md border border-border bg-white px-3 text-sm font-semibold outline-none transition focus:border-primary focus:ring-2 focus:ring-primary/15"
                  >
                    <option value="">
                      {filterOptions.engineCc.min === null || filterOptions.engineCc.max === null
                        ? "All CC"
                        : `All CC (${filterOptions.engineCc.min}-${filterOptions.engineCc.max})`}
                    </option>
                    {filterOptions.engineCc.ranges.map((range) => (
                      <option key={`${range.min}-${range.max}`} value={`${range.min}-${range.max}`}>
                        {range.label}
                      </option>
                    ))}
                  </select>
                </>
              ) : null}
              <select
                value={tierFilter}
                onChange={(event) => setTierFilter(event.target.value)}
                className="h-11 rounded-md border border-border bg-white px-3 text-sm font-semibold outline-none transition focus:border-primary focus:ring-2 focus:ring-primary/15"
              >
                <option value="">All tiers</option>
                {tiers.map((tier) => (
                  <option key={tier.id} value={tier.id}>
                    Tier {tier.tierLevel} - {tier.name}
                  </option>
                ))}
              </select>
              <select
                value={statusFilter}
                onChange={(event) => setStatusFilter(event.target.value)}
                className="h-11 rounded-md border border-border bg-white px-3 text-sm font-semibold outline-none transition focus:border-primary focus:ring-2 focus:ring-primary/15"
              >
                <option value="">All status</option>
                {filterOptions.statuses.map((status) => (
                  <option key={status} value={status}>
                    {formatStatus(status)}
                  </option>
                ))}
              </select>
              <button
                type="button"
                onClick={resetFilters}
                disabled={activeFilterCount === 0}
                className="inline-flex h-11 items-center justify-center gap-2 rounded-md border border-primary/20 bg-primary/5 px-4 text-sm font-black text-primary transition hover:border-primary/40 hover:bg-primary/10 disabled:cursor-not-allowed disabled:border-border disabled:bg-slate-50 disabled:text-muted-foreground disabled:opacity-70"
              >
                <X className="h-4 w-4" />
                Reset filters
              </button>
            </div>
          </div>

          {errorMessage ? (
            <p className="rounded-md border border-destructive/30 bg-destructive/10 px-4 py-3 text-sm font-semibold text-destructive">
              {errorMessage}
            </p>
          ) : null}

          <div className="flex items-center justify-between gap-4 text-xs font-black uppercase tracking-[0.14em] text-muted-foreground">
            <span>{isLoading ? "Loading models" : `${total} ${isEvMode ? "EV " : ""}models`}</span>
          </div>

          {isLoading ? (
            <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
              {Array.from({ length: 12 }).map((_, index) => (
                <ModelCardSkeleton key={index} />
              ))}
            </div>
          ) : (
            <div className="relative grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
              {isLoadingMore || isDeletingId !== null ? (
                <ModelLoadingOverlay
                  label={isDeletingId !== null ? "Deleting model" : "Updating models"}
                />
              ) : null}
              {models.map((model) => (
                <article
                  key={model.id}
                  onClick={() => setPricingModel(model)}
                  className={`group cursor-pointer overflow-hidden rounded-lg border bg-white text-left shadow-sm transition hover:-translate-y-0.5 hover:shadow-md ${
                    isEvMode
                      ? "border-emerald-200 hover:border-emerald-500"
                      : "border-border hover:border-primary/40"
                  }`}
                >
                  <div className="relative aspect-[4/3] border-b border-border bg-slate-50">
                    {model.image ? (
                      <Image
                        src={model.image}
                        alt={`${model.name} model`}
                        fill
                        sizes="(min-width: 1536px) 220px, (min-width: 1280px) 260px, (min-width: 640px) 50vw, 100vw"
                        className="object-contain p-5 transition-transform duration-300 group-hover:scale-105"
                      />
                    ) : (
                      <div className="grid h-full place-items-center p-8 text-center">
                        <div>
                          <ImagePlus className="mx-auto h-8 w-8 text-muted-foreground" />
                          <p className="mt-2 text-xs font-black uppercase tracking-[0.14em] text-muted-foreground">
                            No model image
                          </p>
                        </div>
                      </div>
                    )}
                    <div className="absolute right-3 top-3 flex gap-2">
                      <button
                        type="button"
                        onClick={(event) => {
                          event.stopPropagation();
                          openEditForm(model);
                        }}
                        className="grid h-9 w-9 place-items-center rounded-md border border-border bg-white/95 text-muted-foreground shadow-sm backdrop-blur transition hover:bg-slate-100 hover:text-foreground"
                        aria-label={`Edit ${model.name}`}
                      >
                        <Edit3 className="h-4 w-4" />
                      </button>
                      <PricingProgressButton
                        prices={model.packagePrices}
                        isEv={model.isEv}
                        label={`Pricing for ${model.name}`}
                        onClick={(event) => {
                          event.stopPropagation();
                          setPricingModel(model);
                        }}
                      />
                      <button
                        type="button"
                        onClick={(event) => {
                          event.stopPropagation();
                          setPendingDeleteModel(model);
                        }}
                        disabled={isDeletingId === model.id}
                        className="grid h-9 w-9 place-items-center rounded-md border border-destructive/25 bg-white/95 text-destructive shadow-sm backdrop-blur transition hover:bg-destructive/10 disabled:opacity-60"
                        aria-label={`Delete ${model.name}`}
                      >
                        {isDeletingId === model.id ? (
                          <Loader2 className="h-4 w-4 animate-spin" />
                        ) : (
                          <Trash2 className="h-4 w-4" />
                        )}
                      </button>
                    </div>
                  </div>

                  <div className="space-y-4 p-4">
                    <div className="min-w-0">
                      <h2 className="truncate text-lg font-black tracking-tight text-foreground">
                        {model.name}
                      </h2>
                      <p className="mt-1 truncate text-sm font-bold text-muted-foreground">
                        {model.manufacturerName}
                      </p>
                    </div>

                    <div className="grid grid-cols-2 gap-2 text-xs font-bold text-muted-foreground">
                      <ModelStat label="Tier" value={model.tierName ?? "No tier"} />
                      <ModelStat label="Status" value={formatStatus(model.status)} />
                      {isEvMode ? (
                        <ModelStat label="Type" value="Electric" />
                      ) : (
                        <>
                          <ModelStat label="Fuel" value={formatStoredValue(model.fuelType)} />
                          <ModelStat label="CC" value={model.engineCc ?? "-"} />
                        </>
                      )}
                    </div>
                  </div>
                </article>
              ))}
            </div>
          )}

          {!isLoading && models.length === 0 ? (
            <p className="rounded-lg border border-border bg-white px-4 py-8 text-center text-sm font-semibold text-muted-foreground">
              No car models found.
            </p>
          ) : null}

          {hasMore ? (
            <div ref={loadMoreRef} className="py-2">
              {isLoadingMore ? (
                <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
                  {Array.from({ length: 4 }).map((_, index) => (
                    <ModelCardSkeleton key={index} />
                  ))}
                </div>
              ) : null}
            </div>
          ) : null}
        </section>

        <button
          type="button"
          onClick={() => setIsEvMode((current) => !current)}
          className={`fixed bottom-5 right-5 z-30 inline-flex h-12 items-center justify-center gap-2 rounded-full border px-5 text-sm font-black shadow-lg transition hover:-translate-y-0.5 ${
            isEvMode
              ? "border-emerald-600 bg-emerald-600 text-white hover:bg-emerald-700"
              : "border-emerald-300 bg-white text-emerald-700 hover:border-emerald-500 hover:bg-emerald-50"
          }`}
          aria-pressed={isEvMode}
        >
          <BatteryCharging className="h-4 w-4" />
          {isEvMode ? "Show normal cars" : "Switch to EV"}
        </button>

        {form ? (
          <div className="fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-slate-950/45 px-4 py-8">
            <form
              onSubmit={saveModel}
              className="max-h-full w-full max-w-2xl overflow-y-auto rounded-lg border border-border bg-white p-5 shadow-xl"
            >
              <div className="flex items-start justify-between gap-4">
                <div>
                  <h2 className="text-2xl font-black tracking-tight text-foreground">
                    {form.id ? "Edit model" : "Add model"}
                  </h2>
                  <p className="mt-1 text-sm font-semibold text-muted-foreground">
                    Model images are optional and can stay blank.
                  </p>
                </div>
                <button
                  type="button"
                  onClick={() => setForm(null)}
                  className="grid h-9 w-9 place-items-center rounded-md border border-border text-muted-foreground transition hover:bg-slate-100 hover:text-foreground"
                  aria-label="Close model form"
                >
                  <X className="h-4 w-4" />
                </button>
              </div>

              <div className="mt-5 grid gap-4 sm:grid-cols-2">
                {fixedManufacturerId || fixedManufacturerSlug ? (
                  <Field label="Company">
                    <div className="flex h-11 items-center rounded-md border border-border bg-slate-50 px-3 text-sm font-black text-foreground">
                      {selectedManufacturer ? selectedManufacturer.name : "Selected company"}
                    </div>
                  </Field>
                ) : (
                  <Field label="Company">
                    <select
                      required
                      value={form.manufacturerId || ""}
                      onChange={(event) =>
                        setForm((current) =>
                          current
                            ? { ...current, manufacturerId: Number(event.target.value) }
                            : current,
                        )
                      }
                      className="h-11 w-full rounded-md border border-border px-3 text-sm font-semibold outline-none focus:border-primary focus:ring-2 focus:ring-primary/15"
                    >
                      <option value="" disabled>
                        Choose company
                      </option>
                      {manufacturers.map((manufacturer) => (
                        <option key={manufacturer.id} value={manufacturer.id}>
                          {manufacturer.name}
                        </option>
                      ))}
                    </select>
                  </Field>
                )}
                <Field label="Model name">
                  <input
                    required
                    value={form.name}
                    onChange={(event) =>
                      setForm((current) =>
                        current ? { ...current, name: event.target.value } : current,
                      )
                    }
                    className="h-11 w-full rounded-md border border-border px-3 text-sm font-semibold outline-none focus:border-primary focus:ring-2 focus:ring-primary/15"
                  />
                </Field>
                <Field label="EV">
                  <label className="flex h-11 items-center gap-3 rounded-md border border-border px-3 text-sm font-black text-foreground">
                    <input
                      type="checkbox"
                      checked={form.isEv}
                      onChange={(event) =>
                        setForm((current) =>
                          current
                            ? {
                                ...current,
                                isEv: event.target.checked,
                                fuelType: event.target.checked ? "" : current.fuelType || "Petrol",
                                engineCc: event.target.checked ? "" : current.engineCc,
                              }
                            : current,
                        )
                      }
                      className="h-4 w-4 accent-primary"
                    />
                    Electric vehicle
                  </label>
                </Field>
                <Field label="Tier">
                  <select
                    required
                    value={form.tierId}
                    onChange={(event) =>
                      setForm((current) =>
                        current ? { ...current, tierId: event.target.value } : current,
                      )
                    }
                    className="h-11 w-full rounded-md border border-border px-3 text-sm font-semibold outline-none focus:border-primary focus:ring-2 focus:ring-primary/15"
                  >
                    <option value="" disabled>
                      Choose tier
                    </option>
                    {tiers.map((tier) => (
                      <option key={tier.id} value={tier.id}>
                        Tier {tier.tierLevel} - {tier.name}
                      </option>
                    ))}
                  </select>
                </Field>
                {!form.isEv ? (
                  <Field label="Fuel type">
                    <select
                      required
                      value={form.fuelType}
                      onChange={(event) =>
                        setForm((current) =>
                          current ? { ...current, fuelType: event.target.value } : current,
                        )
                      }
                      className="h-11 w-full rounded-md border border-border px-3 text-sm font-semibold outline-none focus:border-primary focus:ring-2 focus:ring-primary/15"
                    >
                      {carFuelTypeOptions.map((fuelType) => (
                        <option key={fuelType} value={fuelType}>
                          {fuelType}
                        </option>
                      ))}
                    </select>
                  </Field>
                ) : null}
                {!form.isEv ? (
                  <Field label="Engine CC">
                    <input
                      value={form.engineCc}
                      onChange={(event) =>
                        setForm((current) =>
                          current ? { ...current, engineCc: event.target.value } : current,
                        )
                      }
                      type="number"
                      step="0.01"
                      min="0"
                      className="h-11 w-full rounded-md border border-border px-3 text-sm font-semibold outline-none focus:border-primary focus:ring-2 focus:ring-primary/15"
                    />
                  </Field>
                ) : null}
                <Field label="Status">
                  <select
                    required
                    value={form.status}
                    onChange={(event) =>
                      setForm((current) =>
                        current ? { ...current, status: event.target.value } : current,
                      )
                    }
                    className="h-11 w-full rounded-md border border-border px-3 text-sm font-semibold outline-none focus:border-primary focus:ring-2 focus:ring-primary/15"
                  >
                    {carStatusOptions.map((status) => (
                      <option key={status.value} value={status.value}>
                        {status.label}
                      </option>
                    ))}
                  </select>
                </Field>
              </div>

              <div className="mt-4">
                <ModelImageUploadField
                  imageUrl={form.image}
                  isUploading={isUploadingImage}
                  onUpload={uploadModelImage}
                  onError={setErrorMessage}
                />
              </div>

              <div className="mt-6 flex flex-col-reverse gap-3 sm:flex-row sm:justify-end">
                <button
                  type="button"
                  onClick={() => setForm(null)}
                  className="h-10 rounded-md border border-border px-4 text-sm font-black text-muted-foreground transition hover:bg-slate-100 hover:text-foreground"
                >
                  Cancel
                </button>
                <button
                  type="submit"
                  disabled={isSaving || isUploadingImage}
                  className="inline-flex h-10 items-center justify-center gap-2 rounded-md bg-primary px-4 text-sm font-black text-primary-foreground transition hover:opacity-95 disabled:opacity-60"
                >
                  {isSaving ? <Loader2 className="h-4 w-4 animate-spin" /> : null}
                  {form.id ? "Save changes" : "Add model"}
                </button>
              </div>
            </form>
          </div>
        ) : null}

        {pricingModel ? (
          <ModelPricingDialog
            model={pricingModel}
            onClose={() => setPricingModel(null)}
            onSaved={(updatedPrices) => {
              setModels((current) =>
                current.map((model) =>
                  model.id === pricingModel.id
                    ? {
                        ...model,
                        packagePrices: model.packagePrices.map((price) => {
                          const updatedPrice = updatedPrices.find(
                            (item) => item.packageId === price.packageId,
                          );

                          return updatedPrice
                            ? {
                                ...price,
                                basePrice: updatedPrice.basePrice,
                                discountPercentage: updatedPrice.discountPercentage,
                              }
                            : price;
                        }),
                      }
                    : model,
                ),
              );
            }}
          />
        ) : null}

        {pendingDeleteModel ? (
          <DeleteConfirmDialog
            modelName={pendingDeleteModel.name}
            isDeleting={isDeletingId === pendingDeleteModel.id}
            onCancel={() => setPendingDeleteModel(null)}
            onConfirm={() => deleteModel(pendingDeleteModel)}
          />
        ) : null}
      </AdminShell>
    </AdminGuard>
  );
}

function Field({ label, children }: { label: string; children: React.ReactNode }) {
  return (
    <label className="block">
      <span className="mb-1.5 block text-xs font-black uppercase tracking-[0.14em] text-muted-foreground">
        {label}
      </span>
      {children}
    </label>
  );
}

function ModelStat({ label, value }: { label: string; value: string | number }) {
  return (
    <div className="min-w-0 rounded-md border border-border bg-slate-50 px-3 py-2">
      <p className="text-[10px] font-black uppercase tracking-[0.12em] text-muted-foreground">
        {label}
      </p>
      <p className="mt-1 truncate text-sm font-black text-foreground">{value}</p>
    </div>
  );
}

function PricingProgressButton({
  prices,
  isEv,
  label,
  onClick,
}: {
  prices: AdminCarModel["packagePrices"];
  isEv: boolean;
  label: string;
  onClick: (event: MouseEvent<HTMLButtonElement>) => void;
}) {
  const uniquePrices = getUniqueModelPackagePrices(prices).filter((price) =>
    shouldShowPackagePricing(price, isEv),
  );
  const totalPrices = uniquePrices.length;
  const completedPrices = uniquePrices.filter((price) => Number(price.basePrice) > 0).length;
  const completionPercent =
    totalPrices === 0 ? 0 : Math.round((completedPrices / totalPrices) * 100);
  const isComplete = totalPrices > 0 && completedPrices === totalPrices;

  return (
    <button
      type="button"
      onClick={onClick}
      className={`relative grid h-9 w-9 overflow-hidden rounded-md border bg-white/95 shadow-sm backdrop-blur transition hover:-translate-y-0.5 hover:shadow-md ${
        completionPercent > 0 ? "border-red-300" : "border-border"
      }`}
      aria-label={`${label}. ${completedPrices} of ${totalPrices} prices added.`}
      title={`${completedPrices}/${totalPrices} prices added`}
    >
      <span
        className="absolute inset-y-0 left-0 bg-red-600 transition-[width]"
        style={{ width: `${completionPercent}%` }}
      />
      <IndianRupee
        className={`relative z-10 m-auto h-4 w-4 ${isComplete ? "text-white" : "text-foreground"}`}
      />
    </button>
  );
}

function formatCurrency(value: number) {
  return new Intl.NumberFormat("en-IN", {
    style: "currency",
    currency: "INR",
    minimumFractionDigits: 2,
    maximumFractionDigits: 2,
  }).format(value);
}

function getAdjustedPrice(
  basePrice: number,
  discountPercentage: number,
  location: Pick<AdminLocation, "additionalCostPercentage" | "discountPercentage">,
) {
  return Math.max(
    0,
    basePrice *
      (1 - Number(discountPercentage || 0) / 100) *
      (1 + Number(location.additionalCostPercentage || 0) / 100) *
      (1 - Number(location.discountPercentage || 0) / 100),
  );
}

const carPricingPackageTabs: Array<{ type: PackageType; label: string }> = [
  { type: "service_package", label: "Car service" },
  { type: "car_ac", label: "Car AC services" },
  { type: "battery_service", label: "Battery service" },
  { type: "tyre_wheel_service", label: "Tyre & wheel" },
  { type: "engine_repair", label: "Engine repair" },
];

function getAvailablePricingTabs(prices: AdminModelPackagePrice[], tabs = carPricingPackageTabs) {
  const packageTypes = new Set(prices.map((price) => price.packageType));

  return tabs.filter((tab) => packageTypes.has(tab.type));
}

function getUniqueModelsById(models: AdminCarModel[]) {
  return Array.from(new Map(models.map((model) => [model.id, model])).values());
}

function getUniqueModelPackagePrices(prices: AdminCarModel["packagePrices"]) {
  return Array.from(new Map(prices.map((price) => [price.packageId, price])).values());
}

function getUniqueAdminPackagePrices(prices: AdminModelPackagePrice[]) {
  return Array.from(new Map(prices.map((price) => [price.packageId, price])).values());
}

function shouldShowPackagePricing(
  price: Pick<AdminModelPackagePrice, "packageType" | "vehicleType">,
  isEv: boolean,
) {
  return !(isEv && price.packageType === "engine_repair");
}

function ModelPricingDialog({
  model,
  onClose,
  onSaved,
}: {
  model: AdminCarModel;
  onClose: () => void;
  onSaved: (prices: AdminModelPackagePrice[]) => void;
}) {
  const [prices, setPrices] = useState<AdminModelPackagePrice[]>([]);
  const [locations, setLocations] = useState<AdminLocation[]>([]);
  const [priceDrafts, setPriceDrafts] = useState<Record<number, string>>({});
  const [discountDrafts, setDiscountDrafts] = useState<Record<number, string>>({});
  const [activePackageType, setActivePackageType] = useState<PackageType>("service_package");
  const [isLoading, setIsLoading] = useState(true);
  const [isSaving, setIsSaving] = useState(false);
  const [errorMessage, setErrorMessage] = useState("");
  const [locationMessage, setLocationMessage] = useState("");

  const loadPricing = useCallback(async () => {
    setIsLoading(true);
    setErrorMessage("");
    setLocationMessage("");

    try {
      let nextLocationMessage = "";
      const [priceData, activeLocations] = await Promise.all([
        adminRequest<{ prices: AdminModelPackagePrice[] }>(
          `/api/admin/car-models/${model.id}/package-prices`,
        ),
        loadActiveAdminLocations().catch((error) => {
          nextLocationMessage =
            error instanceof Error
              ? `Location prices could not be loaded: ${error.message}`
              : "Location prices could not be loaded.";
          return [];
        }),
      ]);

      const uniquePrices = getUniqueAdminPackagePrices(priceData.prices).filter((price) =>
        shouldShowPackagePricing(price, model.isEv),
      );

      setPrices(uniquePrices);
      setPriceDrafts(
        Object.fromEntries(uniquePrices.map((price) => [price.packageId, String(price.basePrice)])),
      );
      setDiscountDrafts(
        Object.fromEntries(
          uniquePrices.map((price) => [price.packageId, String(price.discountPercentage ?? 0)]),
        ),
      );
      setLocations(activeLocations);
      setLocationMessage(
        nextLocationMessage ||
          (activeLocations.length === 0
            ? "No active locations found. Add or activate locations to preview location prices."
            : ""),
      );
    } catch (error) {
      setErrorMessage(error instanceof Error ? error.message : "Could not load pricing");
    } finally {
      setIsLoading(false);
    }
  }, [model.id, model.isEv]);

  useEffect(() => {
    loadPricing();
  }, [loadPricing]);

  const pricingTabs = useMemo(() => getAvailablePricingTabs(prices), [prices]);
  const activeTab = pricingTabs.some((tab) => tab.type === activePackageType)
    ? activePackageType
    : pricingTabs[0]?.type;
  const activePrices = activeTab ? prices.filter((price) => price.packageType === activeTab) : [];

  useEffect(() => {
    if (activeTab && activeTab !== activePackageType) {
      setActivePackageType(activeTab);
    }
  }, [activePackageType, activeTab]);

  async function savePrices() {
    setIsSaving(true);
    setErrorMessage("");

    try {
      await adminRequest(`/api/admin/car-models/${model.id}/package-prices`, {
        method: "PUT",
        body: JSON.stringify({
          prices: prices.map((price) => ({
            packageId: price.packageId,
            basePrice: Number(priceDrafts[price.packageId] || 0),
            discountPercentage: Number(discountDrafts[price.packageId] || 0),
          })),
        }),
      });
      await loadPricing();
      onSaved(
        prices.map((price) => ({
          ...price,
          basePrice: Number(priceDrafts[price.packageId] || 0),
          discountPercentage: Number(discountDrafts[price.packageId] || 0),
        })),
      );
    } catch (error) {
      setErrorMessage(error instanceof Error ? error.message : "Could not save pricing");
    } finally {
      setIsSaving(false);
    }
  }

  return (
    <div className="fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-slate-950/45 px-4 py-8">
      <div className="max-h-full w-full max-w-6xl overflow-hidden rounded-lg border border-border bg-white shadow-xl">
        <div className="flex items-start justify-between gap-4 border-b border-border p-5">
          <div>
            <p className="text-xs font-black uppercase tracking-[0.14em] text-primary">Pricing</p>
            <h2 className="mt-1 text-2xl font-black tracking-tight text-foreground">
              {model.name}
            </h2>
            <p className="mt-1 text-sm font-semibold text-muted-foreground">
              {model.manufacturerName}
            </p>
          </div>
          <button
            type="button"
            onClick={onClose}
            className="grid h-9 w-9 place-items-center rounded-md border border-border text-muted-foreground transition hover:bg-slate-100 hover:text-foreground"
            aria-label="Close pricing"
          >
            <X className="h-4 w-4" />
          </button>
        </div>

        <div className="max-h-[calc(100vh-180px)] space-y-5 overflow-y-auto p-5">
          {errorMessage ? (
            <p className="rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm font-bold text-destructive">
              {errorMessage}
            </p>
          ) : null}

          {isLoading ? (
            <p className="text-sm font-bold text-muted-foreground">Loading pricing...</p>
          ) : prices.length === 0 ? (
            <p className="rounded-md border border-dashed border-border px-4 py-8 text-center text-sm font-bold text-muted-foreground">
              No packages available for this model type.
            </p>
          ) : (
            <>
              <div className="flex flex-wrap gap-2">
                {pricingTabs.map((tab) => {
                  const isActive = activeTab === tab.type;

                  return (
                    <button
                      key={tab.type}
                      type="button"
                      onClick={() => setActivePackageType(tab.type)}
                      className={`rounded-md border px-4 py-2 text-sm font-black transition ${
                        isActive
                          ? "border-primary bg-primary text-primary-foreground"
                          : "border-border bg-white text-muted-foreground hover:border-primary/40 hover:text-foreground"
                      }`}
                    >
                      {tab.label}
                    </button>
                  );
                })}
              </div>

              <section className="rounded-lg border border-border bg-slate-50 p-4">
                <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
                  <div>
                    <h3 className="text-sm font-black uppercase tracking-[0.14em] text-foreground">
                      Base {pricingTabs.find((tab) => tab.type === activeTab)?.label ?? "package"}{" "}
                      prices
                    </h3>
                    <p className="mt-1 text-xs font-semibold text-muted-foreground">
                      These values are unique to this model. New packages start at zero.
                    </p>
                  </div>
                  <button
                    type="button"
                    onClick={savePrices}
                    disabled={isSaving}
                    className="inline-flex h-10 items-center justify-center gap-2 rounded-md bg-primary px-4 text-sm font-black text-primary-foreground disabled:opacity-60"
                  >
                    {isSaving ? <Loader2 className="h-4 w-4 animate-spin" /> : null}
                    Save base prices
                  </button>
                </div>

                <div className="mt-4 grid gap-3 md:grid-cols-2 xl:grid-cols-3">
                  {activePrices.map((price) => (
                    <div
                      key={price.packageId}
                      className="rounded-md border border-border bg-white p-3"
                    >
                      <span className="block text-xs font-black uppercase tracking-[0.12em] text-muted-foreground">
                        {price.name}
                      </span>
                      <div className="mt-2 grid grid-cols-2 gap-2">
                        <label>
                          <span className="text-[10px] font-black uppercase tracking-[0.1em] text-muted-foreground">
                            Base price
                          </span>
                          <input
                            type="number"
                            min="0"
                            step="1"
                            value={priceDrafts[price.packageId] ?? "0"}
                            onChange={(event) =>
                              setPriceDrafts((current) => ({
                                ...current,
                                [price.packageId]: event.target.value,
                              }))
                            }
                            className="mt-1 h-10 w-full rounded-md border border-border px-3 text-sm font-black outline-none focus:border-primary focus:ring-2 focus:ring-primary/15"
                          />
                        </label>
                        <label>
                          <span className="text-[10px] font-black uppercase tracking-[0.1em] text-muted-foreground">
                            Discount %
                          </span>
                          <input
                            type="number"
                            min="0"
                            max="100"
                            step="0.01"
                            value={discountDrafts[price.packageId] ?? "0"}
                            onChange={(event) =>
                              setDiscountDrafts((current) => ({
                                ...current,
                                [price.packageId]: event.target.value,
                              }))
                            }
                            className="mt-1 h-10 w-full rounded-md border border-border px-3 text-sm font-black outline-none focus:border-primary focus:ring-2 focus:ring-primary/15"
                          />
                        </label>
                      </div>
                    </div>
                  ))}
                </div>
              </section>

              <section>
                <h3 className="text-sm font-black uppercase tracking-[0.14em] text-foreground">
                  Location calculated prices
                </h3>
                {locationMessage ? (
                  <p className="mt-2 rounded-md border border-amber-200 bg-amber-50 px-3 py-2 text-xs font-bold text-amber-800">
                    {locationMessage}
                  </p>
                ) : null}
                <div className="mt-3 max-h-[420px] overflow-auto rounded-lg border border-border bg-white">
                  <table className="w-full min-w-[900px] text-left text-sm">
                    <thead className="sticky top-0 z-10 bg-slate-100 text-xs font-black uppercase tracking-[0.12em] text-muted-foreground">
                      <tr>
                        <th className="sticky left-0 z-20 bg-slate-100 px-3 py-3">Location</th>
                        {activePrices.map((price) => (
                          <th key={price.packageId} className="px-3 py-3">
                            {price.name}
                          </th>
                        ))}
                      </tr>
                    </thead>
                    <tbody className="divide-y divide-border">
                      {locations.length === 0 ? (
                        <tr>
                          <td
                            colSpan={activePrices.length + 1}
                            className="px-3 py-6 text-center text-sm font-bold text-muted-foreground"
                          >
                            Location price preview is unavailable until active locations are loaded.
                          </td>
                        </tr>
                      ) : (
                        locations.map((location) => (
                          <tr key={location.id}>
                            <td className="sticky left-0 bg-white px-3 py-3 font-black text-foreground">
                              {location.name}
                            </td>
                            {activePrices.map((price) => (
                              <td key={price.packageId} className="px-3 py-3 font-black">
                                {formatCurrency(
                                  getAdjustedPrice(
                                    Number(priceDrafts[price.packageId] || 0),
                                    Number(discountDrafts[price.packageId] || 0),
                                    location,
                                  ),
                                )}
                              </td>
                            ))}
                          </tr>
                        ))
                      )}
                    </tbody>
                  </table>
                </div>
              </section>
            </>
          )}
        </div>
      </div>
    </div>
  );
}

function DeleteConfirmDialog({
  modelName,
  isDeleting,
  onCancel,
  onConfirm,
}: {
  modelName: string;
  isDeleting: boolean;
  onCancel: () => void;
  onConfirm: () => void;
}) {
  return (
    <div className="fixed inset-0 z-[60] grid place-items-center bg-slate-950/50 px-4 py-8 backdrop-blur-sm">
      <div className="w-full max-w-md rounded-lg border border-border bg-white p-5 shadow-xl">
        <div className="flex items-start gap-4">
          <div className="grid h-11 w-11 shrink-0 place-items-center rounded-full bg-destructive/10 text-destructive">
            <AlertTriangle className="h-5 w-5" />
          </div>
          <div className="min-w-0">
            <h2 className="text-xl font-black tracking-tight text-foreground">Delete model?</h2>
            <p className="mt-2 text-sm font-semibold leading-6 text-muted-foreground">
              This will permanently delete{" "}
              <span className="font-black text-foreground">{modelName}</span>. This action cannot be
              undone.
            </p>
          </div>
        </div>
        <div className="mt-6 flex flex-col-reverse gap-3 sm:flex-row sm:justify-end">
          <button
            type="button"
            onClick={onCancel}
            disabled={isDeleting}
            className="h-10 rounded-md border border-border px-4 text-sm font-black text-muted-foreground transition hover:bg-slate-100 hover:text-foreground disabled:opacity-60"
          >
            Cancel
          </button>
          <button
            type="button"
            onClick={onConfirm}
            disabled={isDeleting}
            className="inline-flex h-10 items-center justify-center gap-2 rounded-md bg-destructive px-4 text-sm font-black text-destructive-foreground transition hover:opacity-95 disabled:opacity-60"
          >
            {isDeleting ? (
              <Loader2 className="h-4 w-4 animate-spin" />
            ) : (
              <Trash2 className="h-4 w-4" />
            )}
            Delete model
          </button>
        </div>
      </div>
    </div>
  );
}

function ModelLoadingOverlay({ label }: { label: string }) {
  return (
    <div className="absolute inset-0 z-10 grid place-items-center rounded-lg bg-white/70 backdrop-blur-sm">
      <div className="inline-flex items-center gap-2 rounded-full border border-border bg-white px-4 py-2 text-sm font-black text-foreground shadow-sm">
        <Loader2 className="h-4 w-4 animate-spin text-primary" />
        {label}
      </div>
    </div>
  );
}

function formatDetail(value: string | number | null | undefined) {
  if (value === null || value === undefined || value === "") {
    return "-";
  }

  if (typeof value === "number") {
    return value;
  }

  return value
    .split(/([\s/-]+)/)
    .map((part) =>
      /^[a-z]/i.test(part) ? `${part.charAt(0).toUpperCase()}${part.slice(1).toLowerCase()}` : part,
    )
    .join("");
}

function formatStoredValue(value: string | number | null | undefined) {
  if (value === null || value === undefined || value === "") {
    return "-";
  }

  return value;
}

function formatStatus(value: string | null | undefined) {
  const storedValue = formatStoredValue(value);

  if (typeof storedValue !== "string" || storedValue === "-") {
    return storedValue;
  }

  return storedValue
    .split(/([\s_-]+)/)
    .map((part) =>
      /^[a-z]/i.test(part) ? `${part.charAt(0).toUpperCase()}${part.slice(1).toLowerCase()}` : part,
    )
    .join("");
}

function normalizeCarFuelType(value: string | null | undefined) {
  const normalizedValue = value?.trim().toLowerCase();

  return (
    carFuelTypeOptions.find((fuelType) => fuelType.toLowerCase() === normalizedValue) ??
    carFuelTypeOptions[0]
  );
}

function normalizeCarStatus(value: string | null | undefined) {
  const normalizedValue = value?.trim().toLowerCase();

  return (
    carStatusOptions.find((status) => status.value === normalizedValue)?.value ??
    carStatusOptions[0].value
  );
}

function ModelCardSkeleton() {
  return (
    <div className="overflow-hidden rounded-lg border border-border bg-white shadow-sm">
      <div className="relative aspect-[4/3] overflow-hidden border-b border-border bg-slate-100">
        <div className="absolute inset-0 -translate-x-full animate-[shimmer_1.35s_infinite] bg-gradient-to-r from-transparent via-white/70 to-transparent" />
        <div className="absolute inset-7 rounded-md bg-slate-200/80" />
      </div>
      <div className="space-y-3 p-4">
        <div className="relative h-5 overflow-hidden rounded bg-slate-200" />
        <div className="relative h-4 w-2/3 overflow-hidden rounded bg-slate-200" />
      </div>
    </div>
  );
}