"use client";

import { ChangeEvent, FormEvent, useCallback, useEffect, useMemo, useState } from "react";
import {
  AlertTriangle,
  CheckCircle2,
  Edit3,
  Gift,
  ImageIcon,
  ImagePlus,
  Loader2,
  Plus,
  Search,
  Trash2,
  Upload,
  X,
} from "lucide-react";

import { AdminGuard } from "@/components/admin/AdminGuard";
import { AdminShell } from "@/components/admin/AdminShell";
import { adminRequest, type AdminAddOnItem } from "@/lib/admin-api";
import { uploadAddOnItemImage } from "@/lib/storage";

type FilterState = {
  search: string;
  vehicleType: "all" | "car" | "bike";
  labour: "all" | "included" | "not_included";
  status: "all" | "active" | "inactive";
  discount: "all" | "with_discount" | "without_discount";
  minPrice: string;
  maxPrice: string;
};

type AddOnFormState = {
  id?: number;
  vehicleType: "car" | "bike";
  name: string;
  price: string;
  discount: string;
  descriptionText: string;
  image: string;
  isLabourIncluded: boolean;
  isActive: boolean;
};

const emptyFilters: FilterState = {
  search: "",
  vehicleType: "all",
  labour: "all",
  status: "all",
  discount: "all",
  minPrice: "",
  maxPrice: "",
};

const emptyForm: AddOnFormState = {
  vehicleType: "car",
  name: "",
  price: "",
  discount: "0",
  descriptionText: "",
  image: "",
  isLabourIncluded: false,
  isActive: true,
};

function formatCurrency(value: number) {
  return `Rs. ${value.toLocaleString("en-IN", {
    minimumFractionDigits: 2,
    maximumFractionDigits: 2,
  })}`;
}

function getDiscountedPrice(item: AdminAddOnItem) {
  return Math.max(item.price - (item.price * item.discount) / 100, 0);
}

function createImage(url: string) {
  return new Promise<HTMLImageElement>((resolve, reject) => {
    const image = new Image();
    image.addEventListener("load", () => resolve(image));
    image.addEventListener("error", reject);
    image.src = url;
  });
}

async function convertImageToWebp(file: File) {
  const imageUrl = URL.createObjectURL(file);

  try {
    const image = await createImage(imageUrl);
    const canvas = document.createElement("canvas");
    const ctx = canvas.getContext("2d");

    if (!ctx) {
      throw new Error("Image converter is not available");
    }

    const maxSize = 1200;
    const scale = Math.min(maxSize / image.width, maxSize / image.height, 1);
    canvas.width = Math.max(Math.round(image.width * scale), 1);
    canvas.height = Math.max(Math.round(image.height * scale), 1);
    ctx.drawImage(image, 0, 0, canvas.width, canvas.height);

    return await new Promise<Blob>((resolve, reject) => {
      canvas.toBlob(
        (blob) => {
          if (!blob) {
            reject(new Error("Could not convert image to WEBP"));
            return;
          }

          resolve(blob);
        },
        "image/webp",
        0.9,
      );
    });
  } finally {
    URL.revokeObjectURL(imageUrl);
  }
}

function buildQuery(filters: FilterState) {
  const params = new URLSearchParams();

  Object.entries(filters).forEach(([key, value]) => {
    if (value && value !== "all") {
      params.set(key, value);
    }
  });

  return params.toString();
}

export default function AdminAddOnItemsPage() {
  const [items, setItems] = useState<AdminAddOnItem[]>([]);
  const [filters, setFilters] = useState<FilterState>(emptyFilters);
  const [form, setForm] = useState<AddOnFormState | null>(null);
  const [pendingDeleteItem, setPendingDeleteItem] = useState<AdminAddOnItem | null>(null);
  const [isLoading, setIsLoading] = useState(true);
  const [isSaving, setIsSaving] = useState(false);
  const [isUploadingImage, setIsUploadingImage] = useState(false);
  const [deletingId, setDeletingId] = useState<number | null>(null);
  const [errorMessage, setErrorMessage] = useState("");
  const [selectedImageFile, setSelectedImageFile] = useState<File | null>(null);
  const [selectedImagePreview, setSelectedImagePreview] = useState("");
  const [imageUploadMessage, setImageUploadMessage] = useState("");

  const hasActiveFilters = useMemo(
    () => JSON.stringify(filters) !== JSON.stringify(emptyFilters),
    [filters],
  );

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

    try {
      const query = buildQuery(filters);
      const data = await adminRequest<{ items: AdminAddOnItem[] }>(
        `/api/admin/add-on-items${query ? `?${query}` : ""}`,
      );
      setItems(data.items);
    } catch (error) {
      setErrorMessage(error instanceof Error ? error.message : "Could not load add-on items");
    } finally {
      setIsLoading(false);
    }
  }, [filters]);

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

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

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

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

  function openCreateForm() {
    setForm(emptyForm);
    resetImageUploadState();
    setErrorMessage("");
  }

  function openEditForm(item: AdminAddOnItem) {
    setForm({
      id: item.id,
      vehicleType: item.vehicleType ?? "car",
      name: item.name,
      price: String(item.price),
      discount: String(item.discount),
      descriptionText: item.descriptionPoints.join("\n"),
      image: item.image ?? "",
      isLabourIncluded: item.isLabourIncluded,
      isActive: item.isActive,
    });
    resetImageUploadState();
    setErrorMessage("");
  }

  function closeForm() {
    setForm(null);
    resetImageUploadState();
  }

  function resetImageUploadState() {
    if (selectedImagePreview) {
      URL.revokeObjectURL(selectedImagePreview);
    }

    setSelectedImageFile(null);
    setSelectedImagePreview("");
    setImageUploadMessage("");
    setIsUploadingImage(false);
  }

  function selectImage(event: ChangeEvent<HTMLInputElement>) {
    const file = event.target.files?.[0];

    if (!file) {
      return;
    }

    if (selectedImagePreview) {
      URL.revokeObjectURL(selectedImagePreview);
    }

    setSelectedImageFile(file);
    setSelectedImagePreview(URL.createObjectURL(file));
    setImageUploadMessage("Selected image is ready to convert and upload.");
  }

  async function uploadSelectedImage() {
    if (!form || !selectedImageFile) {
      setImageUploadMessage("Select an image before uploading.");
      return;
    }

    const imageName = form.name.trim();

    if (!imageName) {
      setImageUploadMessage("Add the item name before uploading the image.");
      return;
    }

    setIsUploadingImage(true);
    setImageUploadMessage("");

    try {
      const webpImage = await convertImageToWebp(selectedImageFile);
      const imageUrl = await uploadAddOnItemImage(webpImage, imageName);

      setForm({ ...form, image: imageUrl });
      setImageUploadMessage("Image converted to WEBP and uploaded.");
      if (selectedImagePreview) {
        URL.revokeObjectURL(selectedImagePreview);
      }
      setSelectedImageFile(null);
      setSelectedImagePreview("");
    } catch (error) {
      setImageUploadMessage(error instanceof Error ? error.message : "Could not upload image");
    } finally {
      setIsUploadingImage(false);
    }
  }

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

    if (!form) {
      return;
    }

    const descriptionPoints = form.descriptionText
      .split("\n")
      .map((point) => point.trim())
      .filter(Boolean);

    if (descriptionPoints.length === 0) {
      setErrorMessage("Add at least one description point");
      return;
    }

    setIsSaving(true);
    setErrorMessage("");

    const payload = {
      name: form.name.trim(),
      vehicleType: form.vehicleType,
      price: Number(form.price || 0),
      discount: Number(form.discount || 0),
      descriptionPoints,
      image: form.image.trim() || null,
      isLabourIncluded: form.isLabourIncluded,
      isActive: form.isActive,
    };

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

      closeForm();
      await loadItems();
    } catch (error) {
      setErrorMessage(error instanceof Error ? error.message : "Could not save add-on item");
    } finally {
      setIsSaving(false);
    }
  }

  async function deleteItem(item: AdminAddOnItem) {
    setDeletingId(item.id);
    setErrorMessage("");

    try {
      await adminRequest(`/api/admin/add-on-items/${item.id}`, {
        method: "DELETE",
      });
      setPendingDeleteItem(null);
      await loadItems();
    } catch (error) {
      setErrorMessage(error instanceof Error ? error.message : "Could not delete add-on item");
    } finally {
      setDeletingId(null);
    }
  }

  return (
    <AdminGuard>
      <AdminShell
        title="Add-on Items"
        lead="Manage extra service items with pricing, discount, images, labour inclusion, and point-wise descriptions."
      >
        <section className="space-y-5">
          <div className="flex flex-col gap-4 rounded-lg border border-border bg-white p-5 shadow-sm lg:flex-row lg:items-center lg:justify-between">
            <div className="flex items-center gap-3">
              <div className="grid h-11 w-11 place-items-center rounded-md bg-primary/10 text-primary">
                <Gift className="h-5 w-5" />
              </div>
              <div>
                <p className="text-xs font-black uppercase tracking-[0.16em] text-muted-foreground">
                  Add-on catalogue
                </p>
                <h2 className="mt-1 text-xl font-black tracking-tight text-foreground">
                  Add On Items
                </h2>
              </div>
            </div>
            <button
              type="button"
              onClick={openCreateForm}
              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:bg-primary/90"
            >
              <Plus className="h-4 w-4" />
              Add item
            </button>
          </div>

          <div className="rounded-lg border border-border bg-white p-4 shadow-sm">
            <div className="grid gap-3 lg:grid-cols-[minmax(220px,1fr)_repeat(6,minmax(130px,160px))_auto]">
              <label className="relative">
                <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
                <input
                  value={filters.search}
                  onChange={(event) => setFilters({ ...filters, search: event.target.value })}
                  className="h-11 w-full rounded-md border border-input bg-white pl-9 pr-3 text-sm font-bold outline-none transition focus:border-primary focus:ring-4 focus:ring-primary/10"
                  placeholder="Search item or point"
                />
              </label>
              <select
                value={filters.vehicleType}
                onChange={(event) =>
                  setFilters({
                    ...filters,
                    vehicleType: event.target.value as FilterState["vehicleType"],
                  })
                }
                className="h-11 rounded-md border border-input bg-white px-3 text-sm font-bold outline-none transition focus:border-primary focus:ring-4 focus:ring-primary/10"
              >
                <option value="all">All vehicles</option>
                <option value="car">Car</option>
                <option value="bike">Bike</option>
              </select>
              <select
                value={filters.labour}
                onChange={(event) =>
                  setFilters({ ...filters, labour: event.target.value as FilterState["labour"] })
                }
                className="h-11 rounded-md border border-input bg-white px-3 text-sm font-bold outline-none transition focus:border-primary focus:ring-4 focus:ring-primary/10"
              >
                <option value="all">All labour</option>
                <option value="included">Labour included</option>
                <option value="not_included">No labour</option>
              </select>
              <select
                value={filters.status}
                onChange={(event) =>
                  setFilters({ ...filters, status: event.target.value as FilterState["status"] })
                }
                className="h-11 rounded-md border border-input bg-white px-3 text-sm font-bold outline-none transition focus:border-primary focus:ring-4 focus:ring-primary/10"
              >
                <option value="all">All status</option>
                <option value="active">Active</option>
                <option value="inactive">Inactive</option>
              </select>
              <select
                value={filters.discount}
                onChange={(event) =>
                  setFilters({
                    ...filters,
                    discount: event.target.value as FilterState["discount"],
                  })
                }
                className="h-11 rounded-md border border-input bg-white px-3 text-sm font-bold outline-none transition focus:border-primary focus:ring-4 focus:ring-primary/10"
              >
                <option value="all">All discounts</option>
                <option value="with_discount">With discount</option>
                <option value="without_discount">No discount</option>
              </select>
              <input
                value={filters.minPrice}
                onChange={(event) => setFilters({ ...filters, minPrice: event.target.value })}
                type="number"
                min="0"
                className="h-11 rounded-md border border-input bg-white px-3 text-sm font-bold outline-none transition focus:border-primary focus:ring-4 focus:ring-primary/10"
                placeholder="Min price"
              />
              <input
                value={filters.maxPrice}
                onChange={(event) => setFilters({ ...filters, maxPrice: event.target.value })}
                type="number"
                min="0"
                className="h-11 rounded-md border border-input bg-white px-3 text-sm font-bold outline-none transition focus:border-primary focus:ring-4 focus:ring-primary/10"
                placeholder="Max price"
              />
              <button
                type="button"
                onClick={() => setFilters(emptyFilters)}
                disabled={!hasActiveFilters}
                className="inline-flex h-11 items-center justify-center gap-2 rounded-md border border-border bg-slate-50 px-4 text-sm font-black text-foreground transition hover:border-primary/30 hover:bg-primary/5 hover:text-primary disabled:cursor-not-allowed disabled:opacity-50"
              >
                Reset
              </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>
          ) : items.length === 0 ? (
            <div className="rounded-lg border border-dashed border-border bg-white p-10 text-center">
              <div className="mx-auto grid h-12 w-12 place-items-center rounded-md bg-primary/10 text-primary">
                <Gift className="h-6 w-6" />
              </div>
              <p className="mt-3 text-lg font-black text-foreground">No add-on items found</p>
              <p className="mt-2 text-sm font-semibold text-muted-foreground">
                Add your first item or reset filters to see more results.
              </p>
            </div>
          ) : (
            <div className="grid gap-4 xl:grid-cols-2">
              {items.map((item) => {
                const discountedPrice = getDiscountedPrice(item);

                return (
                  <article
                    key={item.id}
                    className="grid overflow-hidden rounded-lg border border-border bg-white shadow-sm transition hover:border-primary/25 hover:shadow-md md:grid-cols-[180px_1fr]"
                  >
                    <div className="relative min-h-48 bg-slate-100 md:min-h-full">
                      {item.image ? (
                        <img
                          src={item.image}
                          alt={item.name}
                          className="h-full min-h-48 w-full object-cover"
                        />
                      ) : (
                        <div className="grid h-full min-h-48 place-items-center text-muted-foreground">
                          <ImageIcon className="h-8 w-8" />
                        </div>
                      )}
                    </div>
                    <div className="p-5">
                      <div className="flex items-start justify-between gap-3">
                        <div className="min-w-0">
                          <h3 className="text-xl font-black tracking-tight text-foreground">
                            {item.name}
                          </h3>
                          <div className="mt-2 flex flex-wrap items-center gap-2">
                            <span className="rounded-full bg-slate-950 px-2.5 py-1 text-xs font-black uppercase text-white">
                              {(item.vehicleType ?? "car") === "bike" ? "Bike" : "Car"}
                            </span>
                            <span className="rounded-md bg-primary/10 px-3 py-1.5 text-sm font-black text-primary">
                              {formatCurrency(discountedPrice)}
                            </span>
                            {item.discount > 0 ? (
                              <span className="rounded-md bg-slate-100 px-3 py-1.5 text-xs font-black text-muted-foreground line-through">
                                {formatCurrency(item.price)}
                              </span>
                            ) : null}
                            {item.discount > 0 ? (
                              <span className="rounded-full bg-emerald-50 px-2.5 py-1 text-xs font-black text-emerald-700">
                                {item.discount}% off
                              </span>
                            ) : null}
                          </div>
                        </div>
                        <span
                          className={`shrink-0 rounded-full px-2.5 py-1 text-xs font-black ${
                            item.isActive
                              ? "bg-emerald-50 text-emerald-700"
                              : "bg-slate-100 text-muted-foreground"
                          }`}
                        >
                          {item.isActive ? "Active" : "Inactive"}
                        </span>
                      </div>

                      <div className="mt-4 flex flex-wrap gap-2">
                        <span
                          className={`inline-flex items-center gap-1.5 rounded-md px-3 py-2 text-sm font-black ${
                            item.isLabourIncluded
                              ? "bg-primary/10 text-primary"
                              : "bg-slate-100 text-muted-foreground"
                          }`}
                        >
                          <CheckCircle2 className="h-4 w-4" />
                          {item.isLabourIncluded ? "Labour included" : "Labour extra"}
                        </span>
                      </div>

                      <ul className="mt-4 grid gap-2">
                        {item.descriptionPoints.map((point) => (
                          <li
                            key={point}
                            className="rounded-md bg-slate-50 px-3 py-2 text-sm font-semibold leading-6 text-foreground"
                          >
                            {point}
                          </li>
                        ))}
                      </ul>

                      <div className="mt-5 flex justify-end gap-2">
                        <button
                          type="button"
                          onClick={() => openEditForm(item)}
                          className="inline-flex h-9 items-center gap-2 rounded-md border border-border px-3 text-sm font-black text-foreground transition hover:border-primary/30 hover:text-primary"
                        >
                          <Edit3 className="h-4 w-4" />
                          Edit
                        </button>
                        <button
                          type="button"
                          onClick={() => setPendingDeleteItem(item)}
                          disabled={deletingId === item.id}
                          className="inline-flex h-9 items-center gap-2 rounded-md border border-primary/20 px-3 text-sm font-black text-primary transition hover:bg-primary/5 disabled:cursor-not-allowed disabled:opacity-60"
                        >
                          {deletingId === item.id ? (
                            <Loader2 className="h-4 w-4 animate-spin" />
                          ) : (
                            <Trash2 className="h-4 w-4" />
                          )}
                          Delete
                        </button>
                      </div>
                    </div>
                  </article>
                );
              })}
            </div>
          )}
        </section>

        {form ? (
          <div className="fixed inset-0 z-[70] grid place-items-center overflow-y-auto bg-slate-950/45 px-4 py-6">
            <div className="max-h-[92vh] w-full max-w-2xl overflow-y-auto rounded-lg border border-border bg-white p-5 shadow-2xl">
              <div className="flex items-start justify-between gap-4">
                <div>
                  <p className="text-xs font-black uppercase tracking-[0.16em] text-primary">
                    {form.id ? "Edit add-on" : "Add add-on"}
                  </p>
                  <h2 className="mt-1 text-xl font-black tracking-tight text-foreground">
                    {form.id ? "Update add-on item" : "Create a new add-on item"}
                  </h2>
                </div>
                <button
                  type="button"
                  onClick={closeForm}
                  className="grid h-9 w-9 place-items-center rounded-md text-muted-foreground hover:bg-slate-100"
                  aria-label="Close add-on item form"
                >
                  <X className="h-5 w-5" />
                </button>
              </div>

              <form onSubmit={saveItem} className="mt-5 space-y-4">
                <label className="block">
                  <span className="text-xs font-black uppercase tracking-[0.14em] text-muted-foreground">
                    Name
                  </span>
                  <input
                    required
                    value={form.name}
                    onChange={(event) => setForm({ ...form, name: event.target.value })}
                    className="mt-2 h-11 w-full rounded-md border border-input bg-white px-3 text-sm font-bold outline-none transition focus:border-primary focus:ring-4 focus:ring-primary/10"
                    placeholder="Engine oil add-on"
                  />
                </label>

                <label className="block">
                  <span className="text-xs font-black uppercase tracking-[0.14em] text-muted-foreground">
                    Vehicle type
                  </span>
                  <select
                    value={form.vehicleType}
                    onChange={(event) =>
                      setForm({
                        ...form,
                        vehicleType: event.target.value as AddOnFormState["vehicleType"],
                      })
                    }
                    className="mt-2 h-11 w-full rounded-md border border-input bg-white px-3 text-sm font-bold outline-none transition focus:border-primary focus:ring-4 focus:ring-primary/10"
                  >
                    <option value="car">Car</option>
                    <option value="bike">Bike</option>
                  </select>
                </label>

                <div className="grid gap-4 sm:grid-cols-2">
                  <label className="block">
                    <span className="text-xs font-black uppercase tracking-[0.14em] text-muted-foreground">
                      Pricing
                    </span>
                    <input
                      required
                      value={form.price}
                      onChange={(event) => setForm({ ...form, price: event.target.value })}
                      type="number"
                      min="0"
                      className="mt-2 h-11 w-full rounded-md border border-input bg-white px-3 text-sm font-bold outline-none transition focus:border-primary focus:ring-4 focus:ring-primary/10"
                      placeholder="999"
                    />
                  </label>
                  <label className="block">
                    <span className="text-xs font-black uppercase tracking-[0.14em] text-muted-foreground">
                      Discount %
                    </span>
                    <input
                      required
                      value={form.discount}
                      onChange={(event) => setForm({ ...form, discount: event.target.value })}
                      type="number"
                      min="0"
                      max="100"
                      className="mt-2 h-11 w-full rounded-md border border-input bg-white px-3 text-sm font-bold outline-none transition focus:border-primary focus:ring-4 focus:ring-primary/10"
                      placeholder="10"
                    />
                  </label>
                </div>

                <label className="block">
                  <span className="text-xs font-black uppercase tracking-[0.14em] text-muted-foreground">
                    Description points
                  </span>
                  <textarea
                    required
                    value={form.descriptionText}
                    onChange={(event) => setForm({ ...form, descriptionText: event.target.value })}
                    className="mt-2 min-h-40 w-full rounded-md border border-input bg-white px-3 py-3 text-sm font-bold leading-relaxed outline-none transition focus:border-primary focus:ring-4 focus:ring-primary/10"
                    placeholder={
                      "Premium quality part\nRecommended during regular service\nIncludes inspection after fitment"
                    }
                  />
                  <p className="mt-1 text-xs font-semibold text-muted-foreground">
                    Add each new point on a new line.
                  </p>
                </label>

                <div className="rounded-lg border border-border bg-slate-50 p-4">
                  <div className="flex items-center gap-2 text-sm font-black text-foreground">
                    <ImagePlus className="h-4 w-4 text-primary" />
                    Add-on image uploader
                  </div>

                  <div className="mt-4 grid gap-4 sm:grid-cols-[180px_1fr]">
                    <div className="overflow-hidden rounded-md border border-border bg-white">
                      {selectedImagePreview || form.image ? (
                        <img
                          src={selectedImagePreview || form.image}
                          alt={`${form.name || "Add-on item"} preview`}
                          className="aspect-square w-full object-cover"
                        />
                      ) : (
                        <div className="grid aspect-square place-items-center text-muted-foreground">
                          <ImageIcon className="h-8 w-8" />
                        </div>
                      )}
                      <p className="border-t border-border px-3 py-2 text-xs font-semibold text-muted-foreground">
                        {selectedImagePreview
                          ? "Selected preview"
                          : form.image
                            ? "Current image"
                            : "No image"}
                      </p>
                    </div>

                    <div className="space-y-3">
                      <input
                        type="file"
                        accept="image/*"
                        onChange={selectImage}
                        className="block w-full text-sm font-semibold text-muted-foreground file:mr-3 file:rounded-md file:border-0 file:bg-primary file:px-3 file:py-2 file:text-sm file:font-black file:text-primary-foreground"
                      />
                      <p className="text-xs font-semibold leading-5 text-muted-foreground">
                        Selected image will be resized if needed, converted to WEBP, uploaded to
                        Firebase Storage, and saved as this item image.
                      </p>
                      <button
                        type="button"
                        onClick={uploadSelectedImage}
                        disabled={!selectedImageFile || isUploadingImage}
                        className="inline-flex h-10 w-full items-center justify-center gap-2 rounded-md bg-primary px-4 text-sm font-black text-primary-foreground transition hover:bg-primary/90 disabled:cursor-not-allowed disabled:opacity-60"
                      >
                        {isUploadingImage ? (
                          <Loader2 className="h-4 w-4 animate-spin" />
                        ) : (
                          <Upload className="h-4 w-4" />
                        )}
                        {isUploadingImage ? "Uploading..." : "Convert & upload WEBP"}
                      </button>
                      {imageUploadMessage ? (
                        <p className="text-xs font-bold text-muted-foreground">
                          {imageUploadMessage}
                        </p>
                      ) : null}
                    </div>
                  </div>
                </div>

                <div className="grid gap-3 sm:grid-cols-2">
                  <label className="flex h-12 items-center gap-3 rounded-md border border-border bg-slate-50 px-3">
                    <input
                      type="checkbox"
                      checked={form.isLabourIncluded}
                      onChange={(event) =>
                        setForm({ ...form, isLabourIncluded: event.target.checked })
                      }
                      className="h-4 w-4 accent-primary"
                    />
                    <span className="text-sm font-black text-foreground">Labour included</span>
                  </label>
                  <label className="flex h-12 items-center gap-3 rounded-md border border-border bg-slate-50 px-3">
                    <input
                      type="checkbox"
                      checked={form.isActive}
                      onChange={(event) => setForm({ ...form, isActive: event.target.checked })}
                      className="h-4 w-4 accent-primary"
                    />
                    <span className="text-sm font-black text-foreground">Active</span>
                  </label>
                </div>

                <div className="flex justify-end gap-3 pt-2">
                  <button
                    type="button"
                    onClick={closeForm}
                    className="rounded-md border border-border px-4 py-2.5 text-sm font-black text-foreground transition hover:bg-slate-100"
                  >
                    Cancel
                  </button>
                  <button
                    type="submit"
                    disabled={isSaving}
                    className="inline-flex items-center gap-2 rounded-md bg-primary px-4 py-2.5 text-sm font-black text-primary-foreground transition hover:bg-primary/90 disabled:cursor-not-allowed disabled:opacity-70"
                  >
                    {isSaving ? <Loader2 className="h-4 w-4 animate-spin" /> : null}
                    Save item
                  </button>
                </div>
              </form>
            </div>
          </div>
        ) : null}

        {pendingDeleteItem ? (
          <div className="fixed inset-0 z-[80] grid place-items-center bg-slate-950/45 px-4">
            <div className="w-full max-w-md rounded-lg border border-border bg-white p-5 shadow-2xl">
              <div className="grid h-11 w-11 place-items-center rounded-md bg-primary/10 text-primary">
                <Trash2 className="h-5 w-5" />
              </div>
              <h2 className="mt-4 text-xl font-black tracking-tight text-foreground">
                Delete add-on item?
              </h2>
              <p className="mt-2 text-sm font-semibold leading-6 text-muted-foreground">
                This will remove {pendingDeleteItem.name} from the admin add-on catalogue.
              </p>
              <div className="mt-5 flex justify-end gap-3">
                <button
                  type="button"
                  onClick={() => setPendingDeleteItem(null)}
                  className="rounded-md border border-border px-4 py-2.5 text-sm font-black text-foreground transition hover:bg-slate-100"
                >
                  Cancel
                </button>
                <button
                  type="button"
                  onClick={() => deleteItem(pendingDeleteItem)}
                  disabled={deletingId === pendingDeleteItem.id}
                  className="inline-flex items-center gap-2 rounded-md bg-primary px-4 py-2.5 text-sm font-black text-primary-foreground transition hover:bg-primary/90 disabled:cursor-not-allowed disabled:opacity-70"
                >
                  {deletingId === pendingDeleteItem.id ? (
                    <Loader2 className="h-4 w-4 animate-spin" />
                  ) : (
                    <Trash2 className="h-4 w-4" />
                  )}
                  Delete
                </button>
              </div>
            </div>
          </div>
        ) : null}
      </AdminShell>
    </AdminGuard>
  );
}