"use client";

import { FormEvent, useCallback, useEffect, useMemo, useState } from "react";
import { usePathname } from "next/navigation";
import { AlertTriangle, Clock3, Edit3, Loader2, PackagePlus, Plus, Trash2, X } from "lucide-react";
import { Space_Grotesk } from "next/font/google";

import { AdminGuard } from "@/components/admin/AdminGuard";
import { AdminShell } from "@/components/admin/AdminShell";
import {
  adminRequest,
  type AdminServicePackage,
  type PackageType,
  type ServicePackageVehicleType,
  type ServicePackageVehicleTypes,
} from "@/lib/admin-api";

const spaceGrotesk = Space_Grotesk({
  subsets: ["latin"],
  weight: ["300", "400", "500", "600", "700"],
});

type PackageFormState = {
  id?: number;
  packageType: PackageType;
  vehicleType: ServicePackageVehicleTypes;
  name: string;
  displayOrder: string;
  estimatedDuration: string;
  featuresText: string;
  highlightedFeaturesText: string;
  isActive: boolean;
};

const standardVehicleOptions: Array<{
  type: ServicePackageVehicleType;
  label: string;
  note: string;
}> = [
  {
    type: "bike",
    label: "Bike",
    note: "Petrol scooters and motorcycles",
  },
  {
    type: "car",
    label: "Car",
    note: "Petrol, diesel, and CNG cars",
  },
  {
    type: "ev-bike",
    label: "EV Bike",
    note: "Electric scooters and motorcycles",
  },
  {
    type: "ev-car",
    label: "EV Car",
    note: "Electric cars and compact EVs",
  },
];

const carAcVehicleOptions: Array<{
  type: ServicePackageVehicleType;
  label: string;
  note: string;
}> = [
  {
    type: "car",
    label: "Car",
    note: "AC cooling and repair service packs for normal and EV cars",
  },
];

const engineRepairVehicleOptions: Array<{
  type: ServicePackageVehicleType;
  label: string;
  note: string;
}> = [
  {
    type: "car",
    label: "Car",
    note: "Engine diagnosis and repair packs for cars",
  },
  {
    type: "bike",
    label: "Bike",
    note: "Engine diagnosis and repair packs for bikes",
  },
];

const engineRepairVehicleTypes: ServicePackageVehicleType[] = ["car", "bike"];
const batteryServiceVehicleTypes: ServicePackageVehicleType[] = ["car", "bike"];
const tyreWheelServiceVehicleTypes: ServicePackageVehicleType[] = ["car", "bike"];

const allVehicleOptions = [
  ...standardVehicleOptions,
  ...carAcVehicleOptions,
  ...engineRepairVehicleOptions,
];

function createEmptyForm(
  packageType: PackageType,
  vehicleType: ServicePackageVehicleTypes,
  displayOrder: number,
): PackageFormState {
  return {
    packageType,
    vehicleType,
    name: "",
    displayOrder: String(displayOrder),
    estimatedDuration: "",
    featuresText: "",
    highlightedFeaturesText: "",
    isActive: true,
  };
}

function getVehicleTypeLabel(vehicleType: ServicePackageVehicleTypes) {
  if (Array.isArray(vehicleType)) {
    return vehicleType
      .map((type) => allVehicleOptions.find((option) => option.type === type)?.label ?? type)
      .join(" and ");
  }

  return allVehicleOptions.find((option) => option.type === vehicleType)?.label ?? vehicleType;
}

function getPackageTypeForPath(pathname: string): PackageType {
  if (pathname.includes("/admin/car-ac-service-packages")) {
    return "car_ac";
  }

  if (pathname.includes("/admin/engine-repair-packages")) {
    return "engine_repair";
  }

  if (pathname.includes("/admin/battery-service-packages")) {
    return "battery_service";
  }

  if (pathname.includes("/admin/tyre-wheel-service-packages")) {
    return "tyre_wheel_service";
  }

  return "service_package";
}

function getNextDisplayOrder(packages: AdminServicePackage[]) {
  const highestDisplayOrder = packages.reduce(
    (highest, servicePackage) => Math.max(highest, servicePackage.displayOrder ?? 0),
    0,
  );

  return highestDisplayOrder + 1;
}

export default function AdminServicePackagesPage() {
  const pathname = usePathname();
  const isCarAcPackagesPage = pathname.includes("/admin/car-ac-service-packages");
  const isEngineRepairPackagesPage = pathname.includes("/admin/engine-repair-packages");
  const isBatteryServicePackagesPage = pathname.includes("/admin/battery-service-packages");
  const isTyreWheelServicePackagesPage = pathname.includes("/admin/tyre-wheel-service-packages");
  const packageType = getPackageTypeForPath(pathname);
  const usesCombinedVehicleTypes =
    isEngineRepairPackagesPage || isBatteryServicePackagesPage || isTyreWheelServicePackagesPage;
  const usesFixedVehicleType = isCarAcPackagesPage || usesCombinedVehicleTypes;
  const pageVehicleOptions = isCarAcPackagesPage
    ? carAcVehicleOptions
    : usesCombinedVehicleTypes
      ? engineRepairVehicleOptions
      : standardVehicleOptions;
  const [selectedVehicleType, setSelectedVehicleType] = useState<ServicePackageVehicleType>(
    usesFixedVehicleType ? "car" : "bike",
  );
  const [packages, setPackages] = useState<AdminServicePackage[]>([]);
  const [isLoading, setIsLoading] = useState(false);
  const [isSaving, setIsSaving] = useState(false);
  const [isDeletingId, setIsDeletingId] = useState<number | null>(null);
  const [errorMessage, setErrorMessage] = useState("");
  const [form, setForm] = useState<PackageFormState | null>(null);
  const [pendingDeletePackage, setPendingDeletePackage] = useState<AdminServicePackage | null>(
    null,
  );
  const [draggedPackageId, setDraggedPackageId] = useState<number | null>(null);
  const [dragOverPackageId, setDragOverPackageId] = useState<number | null>(null);

  const selectedOption = useMemo(
    () => allVehicleOptions.find((option) => option.type === selectedVehicleType),
    [selectedVehicleType],
  );

  const packageLabel = isCarAcPackagesPage
    ? "Car AC"
    : isEngineRepairPackagesPage
      ? "Engine Repair"
      : isBatteryServicePackagesPage
        ? "Battery Service"
        : isTyreWheelServicePackagesPage
          ? "Tyre & Wheel"
          : selectedOption?.label;

  const loadPackages = useCallback(
    async (currentPackageType: PackageType, vehicleType?: ServicePackageVehicleType) => {
      setIsLoading(true);
      setErrorMessage("");

      try {
        const vehicleTypeQuery = vehicleType ? `&vehicleType=${vehicleType}` : "";
        const data = await adminRequest<{ packages: AdminServicePackage[] }>(
          `/api/admin/service-packages?packageType=${currentPackageType}${vehicleTypeQuery}`,
        );
        setPackages(data.packages);
      } catch (error) {
        setErrorMessage(error instanceof Error ? error.message : "Could not load packages");
      } finally {
        setIsLoading(false);
      }
    },
    [],
  );

  useEffect(() => {
    loadPackages(
      packageType,
      usesCombinedVehicleTypes ? undefined : isCarAcPackagesPage ? "car" : selectedVehicleType,
    );
  }, [
    isCarAcPackagesPage,
    loadPackages,
    packageType,
    selectedVehicleType,
    usesCombinedVehicleTypes,
  ]);

  useEffect(() => {
    if (pageVehicleOptions.some((option) => option.type === selectedVehicleType)) {
      return;
    }

    setSelectedVehicleType(pageVehicleOptions[0].type);
    setForm(null);
  }, [pageVehicleOptions, selectedVehicleType]);

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

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

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

  function openEditForm(servicePackage: AdminServicePackage) {
    const highlightedFeatures = servicePackage.highlightedFeatures ?? [];

    setForm({
      id: servicePackage.id,
      packageType: servicePackage.packageType,
      vehicleType: servicePackage.vehicleType,
      name: servicePackage.name,
      displayOrder: String(servicePackage.displayOrder ?? 999),
      estimatedDuration: servicePackage.estimatedDuration,
      featuresText: servicePackage.features.join("\n"),
      highlightedFeaturesText: highlightedFeatures.join("\n"),
      isActive: servicePackage.isActive,
    });
  }

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

    if (!form) {
      return;
    }

    const features = form.featuresText
      .split("\n")
      .map((feature) => feature.trim())
      .filter(Boolean);
    const highlightedFeatures = form.highlightedFeaturesText
      .split("\n")
      .map((feature) => feature.trim())
      .filter(Boolean);

    if (features.length === 0) {
      setErrorMessage("Add at least one package feature");
      return;
    }

    setIsSaving(true);
    setErrorMessage("");

    const payload = {
      packageType: form.packageType,
      vehicleType: isCarAcPackagesPage
        ? "car"
        : isBatteryServicePackagesPage
        ? batteryServiceVehicleTypes
        : isTyreWheelServicePackagesPage
          ? tyreWheelServiceVehicleTypes
          : form.vehicleType,
      name: form.name.trim(),
      displayOrder: form.id ? Number(form.displayOrder || 1) : undefined,
      estimatedDuration: form.estimatedDuration.trim(),
      features,
      highlightedFeatures,
      isActive: form.isActive,
    };

    try {
      if (form.id) {
        await adminRequest(`/api/admin/service-packages/${form.id}`, {
          method: "PUT",
          body: JSON.stringify(payload),
        });
      } else {
        await adminRequest("/api/admin/service-packages", {
          method: "POST",
          body: JSON.stringify(payload),
        });
      }

      setForm(null);
      if (!isCarAcPackagesPage && !Array.isArray(form.vehicleType)) {
        setSelectedVehicleType(form.vehicleType);
      }
      await loadPackages(
        form.packageType,
        usesCombinedVehicleTypes || Array.isArray(form.vehicleType)
          ? undefined
          : isCarAcPackagesPage
            ? "car"
            : form.vehicleType,
      );
    } catch (error) {
      setErrorMessage(error instanceof Error ? error.message : "Could not save package");
    } finally {
      setIsSaving(false);
    }
  }

  async function deletePackage(servicePackage: AdminServicePackage) {
    setIsDeletingId(servicePackage.id);
    setErrorMessage("");

    try {
      await adminRequest(`/api/admin/service-packages/${servicePackage.id}`, {
        method: "DELETE",
      });
      setPendingDeletePackage(null);
      await loadPackages(
        servicePackage.packageType,
        usesCombinedVehicleTypes || Array.isArray(servicePackage.vehicleType)
          ? undefined
          : isCarAcPackagesPage
            ? "car"
            : servicePackage.vehicleType,
      );
    } catch (error) {
      setErrorMessage(error instanceof Error ? error.message : "Could not delete package");
    } finally {
      setIsDeletingId(null);
    }
  }

  async function swapPackagePositions(sourceId: number, targetId: number) {
    if (sourceId === targetId) {
      setDraggedPackageId(null);
      setDragOverPackageId(null);
      return;
    }

    const sourcePackage = packages.find((servicePackage) => servicePackage.id === sourceId);
    const targetPackage = packages.find((servicePackage) => servicePackage.id === targetId);

    if (!sourcePackage || !targetPackage) {
      setDraggedPackageId(null);
      setDragOverPackageId(null);
      return;
    }

    setErrorMessage("");
    setPackages((currentPackages) =>
      currentPackages
        .map((servicePackage) => {
          if (servicePackage.id === sourceId) {
            return { ...servicePackage, displayOrder: targetPackage.displayOrder };
          }

          if (servicePackage.id === targetId) {
            return { ...servicePackage, displayOrder: sourcePackage.displayOrder };
          }

          return servicePackage;
        })
        .sort((a, b) => (a.displayOrder ?? 999) - (b.displayOrder ?? 999)),
    );

    try {
      await adminRequest("/api/admin/service-packages/swap", {
        method: "PATCH",
        body: JSON.stringify({ sourceId, targetId }),
      });
      await loadPackages(
        packageType,
        usesCombinedVehicleTypes ? undefined : isCarAcPackagesPage ? "car" : selectedVehicleType,
      );
    } catch (error) {
      setErrorMessage(error instanceof Error ? error.message : "Could not swap packages");
      await loadPackages(
        packageType,
        usesCombinedVehicleTypes ? undefined : isCarAcPackagesPage ? "car" : selectedVehicleType,
      );
    } finally {
      setDraggedPackageId(null);
      setDragOverPackageId(null);
    }
  }

  return (
    <AdminGuard>
      <AdminShell
        title={
          isCarAcPackagesPage
            ? "Car AC Service Packages"
            : isEngineRepairPackagesPage
              ? "Engine Repair Packages"
              : isBatteryServicePackagesPage
                ? "Battery Service Packages"
                : isTyreWheelServicePackagesPage
                  ? "Tyre & Wheel Packages"
                  : "Service Packages"
        }
        lead={
          isCarAcPackagesPage
            ? "Manage AC package name, duration, and customer feature lists."
            : isEngineRepairPackagesPage
              ? "Manage engine diagnosis, repair, and full revive packages."
              : isBatteryServicePackagesPage
                ? "Manage battery check, care, and support packages."
                : isTyreWheelServicePackagesPage
                  ? "Manage tyre care, wheel support, and stability packages."
                  : "Manage package name, duration, and feature lists by vehicle type."
        }
      >
        <section className="space-y-5">
          {usesFixedVehicleType ? null : (
            <div className="flex gap-2 overflow-x-auto rounded-lg border border-border bg-slate-50 p-2">
              {pageVehicleOptions.map(({ type, label, note }) => {
                const isActive = selectedVehicleType === type;

                return (
                  <button
                    key={type}
                    type="button"
                    onClick={() => {
                      setSelectedVehicleType(type);
                      setForm(null);
                    }}
                    title={note}
                    className={`w-32 shrink-0 rounded-md border px-4 py-2 text-sm font-black transition ${
                      isActive
                        ? "border-primary bg-primary text-primary-foreground shadow-sm"
                        : "border-slate-300 bg-white text-muted-foreground hover:border-slate-400 hover:text-foreground"
                    }`}
                  >
                    {label}
                  </button>
                );
              })}
            </div>
          )}

          <div className="rounded-lg border border-border bg-white p-4 shadow-sm">
            <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
              <div>
                <p className="text-xs font-black uppercase tracking-[0.16em] text-muted-foreground">
                  Packages
                </p>
                <h2 className="mt-1 text-xl font-black tracking-tight text-foreground">
                  {packageLabel} packages
                </h2>
              </div>
              <button
                type="button"
                onClick={() =>
                  setForm(
                    createEmptyForm(
                      packageType,
                      isCarAcPackagesPage
                        ? "car"
                        : isEngineRepairPackagesPage
                        ? engineRepairVehicleTypes
                        : isBatteryServicePackagesPage
                          ? batteryServiceVehicleTypes
                          : isTyreWheelServicePackagesPage
                            ? tyreWheelServiceVehicleTypes
                            : selectedVehicleType,
                      getNextDisplayOrder(packages),
                    ),
                  )
                }
                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 package
              </button>
            </div>
          </div>

          {errorMessage ? (
            <div className="flex items-center gap-2 rounded-lg border border-red-200 bg-red-50 p-4 text-sm font-bold text-red-700">
              <AlertTriangle className="h-4 w-4 shrink-0" />
              {errorMessage}
            </div>
          ) : null}

          {isLoading ? (
            <div className="grid min-h-56 place-items-center rounded-lg border border-border bg-white">
              <Loader2 className="h-6 w-6 animate-spin text-primary" />
            </div>
          ) : packages.length === 0 ? (
            <div className="grid min-h-56 place-items-center rounded-lg border border-dashed border-border bg-white p-6 text-center">
              <div>
                <div className="mx-auto grid h-12 w-12 place-items-center rounded-md bg-primary/10 text-primary">
                  <PackagePlus className="h-6 w-6" />
                </div>
                <p className="mt-3 text-sm font-bold text-muted-foreground">
                  No packages added for {packageLabel} yet.
                </p>
              </div>
            </div>
          ) : (
            <div className="grid gap-4 lg:grid-cols-2">
              {packages.map((servicePackage) => {
                const highlightedFeatures = servicePackage.highlightedFeatures ?? [];
                const isDragging = draggedPackageId === servicePackage.id;
                const isDragTarget = dragOverPackageId === servicePackage.id && !isDragging;

                return (
                  <article
                    key={servicePackage.id}
                    draggable
                    onDragStart={(event) => {
                      setDraggedPackageId(servicePackage.id);
                      event.dataTransfer.effectAllowed = "move";
                      event.dataTransfer.setData("text/plain", String(servicePackage.id));
                    }}
                    onDragOver={(event) => {
                      event.preventDefault();
                      event.dataTransfer.dropEffect = "move";
                      setDragOverPackageId(servicePackage.id);
                    }}
                    onDrop={(event) => {
                      event.preventDefault();
                      const sourceId = Number(
                        event.dataTransfer.getData("text/plain") || draggedPackageId,
                      );

                      if (Number.isFinite(sourceId)) {
                        swapPackagePositions(sourceId, servicePackage.id);
                      }
                    }}
                    onDragEnd={() => {
                      setDraggedPackageId(null);
                      setDragOverPackageId(null);
                    }}
                    className={`cursor-grab rounded-lg border bg-white p-5 shadow-sm transition active:cursor-grabbing ${
                      isDragging
                        ? "border-primary/40 opacity-50"
                        : isDragTarget
                          ? "border-primary ring-2 ring-primary/20"
                          : "border-border"
                    }`}
                  >
                    <div className="flex items-start justify-between gap-3">
                      <div className="min-w-0">
                        <h3 className="truncate text-xl font-black tracking-tight text-foreground">
                          {servicePackage.name}
                        </h3>
                        <div className="mt-2 flex flex-wrap gap-2">
                          <span className="inline-flex items-center rounded-md bg-primary/10 px-3 py-2 text-sm font-black text-primary">
                            #{servicePackage.displayOrder ?? 999}
                          </span>
                          <span className="inline-flex items-center gap-2 rounded-md bg-slate-50 px-3 py-2 text-sm font-black text-foreground">
                            <Clock3 className="h-4 w-4 text-primary" />
                            {servicePackage.estimatedDuration}
                          </span>
                        </div>
                      </div>
                      <span
                        className={`shrink-0 rounded-full px-2.5 py-1 text-xs font-black ${
                          servicePackage.isActive
                            ? "bg-emerald-50 text-emerald-700"
                            : "bg-slate-100 text-muted-foreground"
                        }`}
                      >
                        {servicePackage.isActive ? "Active" : "Inactive"}
                      </span>
                    </div>

                    <ul className="mt-5 grid gap-2 sm:grid-cols-2">
                      {servicePackage.features.map((feature) => (
                        <li
                          key={feature}
                          className="rounded-md bg-slate-50 px-3 py-2 text-sm font-semibold text-foreground"
                        >
                          {feature}
                        </li>
                      ))}
                    </ul>

                    {highlightedFeatures.length > 0 ? (
                      <ul className="mt-4 grid gap-2">
                        {highlightedFeatures.map((feature) => (
                          <li
                            key={feature}
                            className="rounded-md bg-sky-100 px-3 py-2 text-sm font-black leading-6 text-sky-950 ring-1 ring-sky-200"
                          >
                            {feature}
                          </li>
                        ))}
                      </ul>
                    ) : null}

                    <div className="mt-5 flex justify-end gap-2">
                      <button
                        type="button"
                        onClick={() => openEditForm(servicePackage)}
                        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={`Edit ${servicePackage.name}`}
                      >
                        <Edit3 className="h-4 w-4" />
                      </button>
                      <button
                        type="button"
                        onClick={() => setPendingDeletePackage(servicePackage)}
                        disabled={isDeletingId === servicePackage.id}
                        className="grid h-9 w-9 place-items-center rounded-md border border-red-200 text-red-600 transition hover:bg-red-50 disabled:cursor-not-allowed disabled:opacity-60"
                        aria-label={`Delete ${servicePackage.name}`}
                      >
                        {isDeletingId === servicePackage.id ? (
                          <Loader2 className="h-4 w-4 animate-spin" />
                        ) : (
                          <Trash2 className="h-4 w-4" />
                        )}
                      </button>
                    </div>
                  </article>
                );
              })}
            </div>
          )}
        </section>
      </AdminShell>

      {form ? (
        <div
          className={`fixed inset-0 z-[60] grid place-items-center overflow-y-auto bg-slate-950/45 px-4 py-6 ${spaceGrotesk.className}`}
        >
          <form
            onSubmit={savePackage}
            className="w-full max-w-2xl rounded-lg border border-border bg-white p-5 shadow-2xl"
          >
            <div className="flex items-start justify-between gap-4">
              <div>
                <div className="grid h-11 w-11 place-items-center rounded-md bg-primary/10 text-primary">
                  <PackagePlus className="h-5 w-5" />
                </div>
                <h2 className="mt-4 text-xl font-black tracking-tight text-foreground">
                  {form.id ? "Edit package" : "Add package"}
                </h2>
              </div>
              <button
                type="button"
                onClick={() => setForm(null)}
                className="grid h-9 w-9 place-items-center rounded-md text-muted-foreground transition hover:bg-slate-100 hover:text-foreground"
                aria-label="Close package form"
              >
                <X className="h-5 w-5" />
              </button>
            </div>

            <div className="mt-5 grid gap-4">
              <label className="grid gap-2">
                <span className="text-xs font-black uppercase tracking-[0.14em] text-muted-foreground">
                  Duration
                </span>
                <input
                  value={form.estimatedDuration}
                  onChange={(event) => setForm({ ...form, estimatedDuration: event.target.value })}
                  className="h-11 rounded-md border border-border px-3 text-sm font-semibold outline-none transition focus:border-primary focus:ring-2 focus:ring-primary/15"
                  placeholder="2 HRS"
                  required
                />
              </label>

              <label className="grid gap-2">
                <span className="text-xs font-black uppercase tracking-[0.14em] text-muted-foreground">
                  Package name
                </span>
                <input
                  value={form.name}
                  onChange={(event) => setForm({ ...form, name: event.target.value })}
                  className="h-11 rounded-md border border-border px-3 text-sm font-semibold outline-none transition focus:border-primary focus:ring-2 focus:ring-primary/15"
                  placeholder="Example: RUN (BASIC)"
                  required
                />
              </label>

              <label className="grid gap-2">
                <span className="text-xs font-black uppercase tracking-[0.14em] text-muted-foreground">
                  Features
                </span>
                <textarea
                  value={form.featuresText}
                  onChange={(event) => setForm({ ...form, featuresText: event.target.value })}
                  className="min-h-48 rounded-md border border-border px-3 py-2 text-sm font-semibold outline-none transition focus:border-primary focus:ring-2 focus:ring-primary/15"
                  placeholder={"Engine oil check\nChain cleaning & lubrication\nBattery check"}
                  required
                />
              </label>

              <label className="grid gap-2">
                <span className="text-xs font-black uppercase tracking-[0.14em] text-muted-foreground">
                  Highlighted points
                </span>
                <textarea
                  value={form.highlightedFeaturesText}
                  onChange={(event) =>
                    setForm({ ...form, highlightedFeaturesText: event.target.value })
                  }
                  className="min-h-28 rounded-md border border-border px-3 py-2 text-sm font-semibold outline-none transition focus:border-primary focus:ring-2 focus:ring-primary/15"
                  placeholder={"20-25 point inspection report\n600 KM or 30 days warranty"}
                />
              </label>

              <label className="flex items-center gap-3 rounded-md border border-border bg-slate-50 p-3">
                <input
                  checked={form.isActive}
                  onChange={(event) => setForm({ ...form, isActive: event.target.checked })}
                  type="checkbox"
                  className="h-4 w-4 accent-primary"
                />
                <span className="text-sm font-bold text-foreground">Active for customers</span>
              </label>
            </div>

            <div className="mt-6 flex justify-end gap-2">
              <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}
                className="inline-flex h-10 items-center gap-2 rounded-md bg-primary px-4 text-sm font-black text-primary-foreground transition hover:opacity-95 disabled:cursor-not-allowed disabled:opacity-60"
              >
                {isSaving ? <Loader2 className="h-4 w-4 animate-spin" /> : null}
                Save package
              </button>
            </div>
          </form>
        </div>
      ) : null}

      {pendingDeletePackage ? (
        <div
          className={`fixed inset-0 z-[70] grid place-items-center bg-slate-950/45 px-4 ${spaceGrotesk.className}`}
        >
          <div className="w-full max-w-sm rounded-lg border border-border bg-white p-5 shadow-2xl">
            <div className="grid h-11 w-11 place-items-center rounded-md bg-red-50 text-red-600">
              <Trash2 className="h-5 w-5" />
            </div>
            <h2 className="mt-4 text-xl font-black tracking-tight text-foreground">
              Delete package?
            </h2>
            <p className="mt-2 text-sm leading-6 text-muted-foreground">
              This will remove {pendingDeletePackage.name} from{" "}
              {getVehicleTypeLabel(pendingDeletePackage.vehicleType)} service packages.
            </p>
            <div className="mt-5 flex justify-end gap-2">
              <button
                type="button"
                onClick={() => setPendingDeletePackage(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="button"
                onClick={() => deletePackage(pendingDeletePackage)}
                disabled={isDeletingId === pendingDeletePackage.id}
                className="inline-flex h-10 items-center gap-2 rounded-md bg-red-600 px-4 text-sm font-black text-white transition hover:bg-red-700 disabled:cursor-not-allowed disabled:opacity-60"
              >
                {isDeletingId === pendingDeletePackage.id ? (
                  <Loader2 className="h-4 w-4 animate-spin" />
                ) : null}
                Delete
              </button>
            </div>
          </div>
        </div>
      ) : null}
    </AdminGuard>
  );
}