"use client";

import { useState, useEffect, useRef, useCallback } from "react";
import Image from "next/image";
import { PageHeader } from "@/components/admin/PageHeader";
import { DataTable, type Column } from "@/components/admin/DataTable";
import { FormSheet } from "@/components/admin/FormSheet";
import { ImageDropZone } from "@/components/admin/ImageDropZone";
import { SectorIconPicker } from "@/components/admin/SectorIconPicker";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Switch } from "@/components/ui/switch";
import { Separator } from "@/components/ui/separator";
import { Skeleton } from "@/components/ui/skeleton";
import { Checkbox } from "@/components/ui/checkbox";
import { Plus, Trash2, X, Search, CheckCircle2, Upload, GripVertical, ChevronLeft, ChevronRight } from "lucide-react";
import { toast } from "sonner";
import { useImageUpload } from "@/hooks/use-image-upload";
import { uploadToCloudinary } from "@/lib/cloudinary";
import { SECTOR_ICONS } from "@/lib/sectorIconMap";
import {
  getServices,
  createService,
  updateService,
  deleteService,
  type Service,
  type ServiceImage,
  type PaginationMeta,
} from "@/services/services";
import {
  getTechnologies,
  type Technology,
} from "@/services/technologies";
import { getRegions, type Region } from "@/services/regions";
import { useAdminLocale } from "@/hooks/use-admin-locale";

interface FormRigSpec {
  component: string;
  spec: string;
}

interface FormSubService {
  heading: string;
  items: string[];
}

interface FormState {
  title: string;
  shortDesc: string;
  overview: string;
  icon: string;
  hasRigSpecs: boolean;
  hasTechLinks: boolean;
  subServices: FormSubService[];
  rigSpecs: FormRigSpec[];
  technologyIds: number[];
  regionIds: number[];
}

const emptyForm = (): FormState => ({
  title: "",
  shortDesc: "",
  overview: "",
  icon: "",
  hasRigSpecs: false,
  hasTechLinks: false,
  subServices: [{ heading: "", items: [""] }],
  rigSpecs: [{ component: "", spec: "" }],
  technologyIds: [],
  regionIds: [],
});

export default function ServicesAdmin() {
  const locale = useAdminLocale();
  const [services, setServices] = useState<Service[]>([]);
  const [loading, setLoading] = useState(true);
  const [search, setSearch] = useState("");
  const [page, setPage] = useState(1);
  const [meta, setMeta] = useState<PaginationMeta | null>(null);
  const [editing, setEditing] = useState<Service | null>(null);
  const [isAdding, setIsAdding] = useState(false);
  const [form, setForm] = useState<FormState>(emptyForm());
  const [isSaving, setIsSaving] = useState(false);
  const [deletingId, setDeletingId] = useState<number | null>(null);

  // Main image
  const { preview, file: imageFile, isDragging, setIsDragging, inputRef, handleFile, onDrop, reset: resetUpload } = useImageUpload();
  const [imageProgress, setImageProgress] = useState<number | null>(null);
  const [imageUploadDone, setImageUploadDone] = useState(false);

  // Gallery images
  const [galleryFiles, setGalleryFiles] = useState<File[]>([]);
  const [galleryPreviews, setGalleryPreviews] = useState<string[]>([]);
  const [existingImages, setExistingImages] = useState<ServiceImage[]>([]);
  const [galleryProgress, setGalleryProgress] = useState<number | null>(null);
  const galleryInputRef = useRef<HTMLInputElement>(null);

  // Technologies list for tech_links
  const [allTechs, setAllTechs] = useState<Technology[]>([]);
  const techsFetched = useRef(false);

  // Regions list
  const [allRegions, setAllRegions] = useState<Region[]>([]);
  const regionsFetched = useRef(false);

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

  const fetchServices = (query?: string, p = 1) => {
    setLoading(true);
    getServices({ search: query, page: p })
      .then((res) => { setServices(res.data); setMeta(res.meta); })
      .finally(() => setLoading(false));
  };

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

  // Lazy-load technologies list when sheet opens
  useEffect(() => {
    if ((isAdding || editing) && !techsFetched.current) {
      techsFetched.current = true;
      getTechnologies().then(setAllTechs).catch(() => {});
    }
  }, [isAdding, editing]);

  // Lazy-load regions list when sheet opens
  useEffect(() => {
    if ((isAdding || editing) && !regionsFetched.current) {
      regionsFetched.current = true;
      getRegions().then(setAllRegions).catch(() => {});
    }
  }, [isAdding, editing]);

  const handleSearchChange = (value: string) => {
    setSearch(value);
    setPage(1);
    if (debounceRef.current) clearTimeout(debounceRef.current);
    debounceRef.current = setTimeout(() => fetchServices(value, 1), 400);
  };

  const goToPage = (p: number) => {
    setPage(p);
    fetchServices(search, p);
  };

  const handleGalleryFiles = useCallback((files: FileList) => {
    const newFiles: File[] = [];
    const newPreviews: string[] = [];
    Array.from(files).forEach((f) => {
      if (!f.type.startsWith("image/")) return;
      if (f.size > 5 * 1024 * 1024) return;
      newFiles.push(f);
      newPreviews.push(URL.createObjectURL(f));
    });
    setGalleryFiles((prev) => [...prev, ...newFiles]);
    setGalleryPreviews((prev) => [...prev, ...newPreviews]);
  }, []);

  const removeGalleryFile = (idx: number) => {
    setGalleryPreviews((prev) => {
      URL.revokeObjectURL(prev[idx]);
      return prev.filter((_, i) => i !== idx);
    });
    setGalleryFiles((prev) => prev.filter((_, i) => i !== idx));
  };

  const removeExistingImage = (idx: number) => {
    setExistingImages((prev) => prev.filter((_, i) => i !== idx));
  };

  const resetSheet = () => {
    setEditing(null);
    setIsAdding(false);
    setForm(emptyForm());
    resetUpload();
    setImageProgress(null);
    setImageUploadDone(false);
    setGalleryFiles([]);
    setGalleryPreviews((prev) => { prev.forEach(URL.revokeObjectURL); return []; });
    setExistingImages([]);
    setGalleryProgress(null);
  };

  const openEdit = (s: Service) => {
    resetUpload();
    setImageUploadDone(false);
    setGalleryFiles([]);
    setGalleryPreviews([]);
    setGalleryProgress(null);
    setExistingImages(s.images ?? []);
    setForm({
      title: s.title,
      shortDesc: s.short_desc ?? "",
      overview: s.overview ?? "",
      icon: s.icon ?? "",
      hasRigSpecs: s.has_rig_specs,
      hasTechLinks: s.has_tech_links,
      subServices: s.sub_services.length
        ? s.sub_services.map((g) => ({ heading: g.heading, items: g.items.length ? [...g.items] : [""] }))
        : [{ heading: "", items: [""] }],
      rigSpecs: s.rig_specs.length
        ? s.rig_specs.map((r) => ({ component: r.component, spec: r.spec }))
        : [{ component: "", spec: "" }],
      technologyIds: s.tech_links.length
        ? allTechs.filter((t) => s.tech_links.some((tl) => tl.id === t.slug)).map((t) => t.id)
        : [],
      regionIds: s.regions?.length ? s.regions.map((r: any) => r.id) : (s.region_ids?.length ? s.region_ids : []),
    });
    setEditing(s);
  };

  const set = <K extends keyof FormState>(key: K, value: FormState[K]) =>
    setForm((prev) => ({ ...prev, [key]: value }));

  // Sub-service helpers
  const updateSubServiceHeading = (i: number, heading: string) =>
    setForm((prev) => ({
      ...prev,
      subServices: prev.subServices.map((g, idx) => idx === i ? { ...g, heading } : g),
    }));

  const updateSubServiceItem = (groupIdx: number, itemIdx: number, value: string) =>
    setForm((prev) => ({
      ...prev,
      subServices: prev.subServices.map((g, gi) =>
        gi === groupIdx ? { ...g, items: g.items.map((item, ii) => ii === itemIdx ? value : item) } : g
      ),
    }));

  const addSubServiceItem = (groupIdx: number) =>
    setForm((prev) => ({
      ...prev,
      subServices: prev.subServices.map((g, gi) =>
        gi === groupIdx ? { ...g, items: [...g.items, ""] } : g
      ),
    }));

  const removeSubServiceItem = (groupIdx: number, itemIdx: number) =>
    setForm((prev) => ({
      ...prev,
      subServices: prev.subServices.map((g, gi) =>
        gi === groupIdx ? { ...g, items: g.items.filter((_, ii) => ii !== itemIdx) } : g
      ),
    }));

  const addSubServiceGroup = () =>
    setForm((prev) => ({
      ...prev,
      subServices: [...prev.subServices, { heading: "", items: [""] }],
    }));

  const removeSubServiceGroup = (i: number) =>
    setForm((prev) => ({
      ...prev,
      subServices: prev.subServices.filter((_, idx) => idx !== i),
    }));

  // Rig spec helpers
  const updateRigSpec = (i: number, field: keyof FormRigSpec, value: string) =>
    setForm((prev) => ({
      ...prev,
      rigSpecs: prev.rigSpecs.map((r, idx) => idx === i ? { ...r, [field]: value } : r),
    }));

  const addRigSpec = () =>
    setForm((prev) => ({ ...prev, rigSpecs: [...prev.rigSpecs, { component: "", spec: "" }] }));

  const removeRigSpec = (i: number) =>
    setForm((prev) => ({ ...prev, rigSpecs: prev.rigSpecs.filter((_, idx) => idx !== i) }));

  // Technology toggle
  const toggleTechnology = (techId: number) =>
    setForm((prev) => ({
      ...prev,
      technologyIds: prev.technologyIds.includes(techId)
        ? prev.technologyIds.filter((id) => id !== techId)
        : [...prev.technologyIds, techId],
    }));

  // Region toggle
  const toggleRegion = (regionId: number) =>
    setForm((prev) => ({
      ...prev,
      regionIds: prev.regionIds.includes(regionId)
        ? prev.regionIds.filter((id) => id !== regionId)
        : [...prev.regionIds, regionId],
    }));

  const handleSave = async () => {
    if (!form.title.trim()) { toast.error("Title is required."); return; }
    setIsSaving(true);

    let imageResult: { secure_url: string; public_id: string } | undefined;
    const uploadedGallery: ServiceImage[] = [];

    try {
      if (imageFile) {
        setImageProgress(0);
        imageResult = await uploadToCloudinary(imageFile, "image", setImageProgress);
        setImageProgress(null);
        setImageUploadDone(true);
      }
      if (galleryFiles.length) {
        setGalleryProgress(0);
        for (let i = 0; i < galleryFiles.length; i++) {
          const result = await uploadToCloudinary(galleryFiles[i], "image", (pct) => {
            setGalleryProgress(Math.round(((i + pct / 100) / galleryFiles.length) * 100));
          });
          uploadedGallery.push({ url: result.secure_url, public_id: result.public_id });
        }
        setGalleryProgress(null);
      }
    } catch (err) {
      toast.error(err instanceof Error ? err.message : "Image upload failed.");
      setImageProgress(null);
      setGalleryProgress(null);
      setIsSaving(false);
      return;
    }

    const allImages = [...existingImages, ...uploadedGallery];
    const subServices = form.subServices
      .filter((g) => g.heading.trim())
      .map((g) => ({ heading: g.heading, items: g.items.filter((item) => item.trim()) }));
    const rigSpecs = form.rigSpecs.filter((r) => r.component.trim());

    try {
      if (isAdding) {
        const created = await createService({
          title: form.title,
          short_desc: form.shortDesc,
          overview: form.overview,
          icon: form.icon || undefined,
          has_rig_specs: form.hasRigSpecs,
          has_tech_links: form.hasTechLinks,
          image_url: imageResult?.secure_url,
          image_public_id: imageResult?.public_id,
          images: allImages,
          sub_services: subServices,
          rig_specs: rigSpecs,
          technology_ids: form.technologyIds,
          region_ids: form.regionIds,
        });
        setServices((prev) => [...prev, created]);
        toast.success("Service added.");
      } else {
        const updated = await updateService(editing!.id, {
          title: { [locale]: form.title },
          short_desc: { [locale]: form.shortDesc },
          overview: { [locale]: form.overview },
          icon: form.icon || undefined,
          has_rig_specs: form.hasRigSpecs,
          has_tech_links: form.hasTechLinks,
          image_url: imageResult?.secure_url,
          image_public_id: imageResult?.public_id,
          images: allImages,
          sub_services: subServices.map((g) => ({
            heading: { [locale]: g.heading },
            items: { [locale]: g.items },
          })),
          rig_specs: rigSpecs.map((r) => ({
            component: { [locale]: r.component },
            spec: { [locale]: r.spec },
          })),
          technology_ids: form.technologyIds,
          region_ids: form.regionIds,
        });
        setServices((prev) => prev.map((s) => (s.id === updated.id ? updated : s)));
        toast.success("Service updated.");
      }
      resetSheet();
    } catch {
      // interceptor shows error toast
    } finally {
      setIsSaving(false);
    }
  };

  const handleDelete = async (s: Service) => {
    if (deletingId) return;
    setDeletingId(s.id);
    try {
      await deleteService(s.id, s.image_public_id);
      setServices((prev) => prev.filter((x) => x.id !== s.id));
      toast.success("Service removed.");
    } catch {
      // interceptor shows error toast
    } finally {
      setDeletingId(null);
    }
  };

  const columns: Column<Service>[] = [
    {
      key: "title",
      label: "Service",
      render: (s) => {
        const IconComp = s.icon && SECTOR_ICONS[s.icon]?.component;
        return (
          <div className="flex items-center gap-3">
            {s.image_url ? (
              <Image src={s.image_url} alt={s.title} width={56} height={40} className="h-10 w-14 object-cover rounded" />
            ) : (
              <div className="h-10 w-14 rounded bg-muted flex items-center justify-center">
                {IconComp ? <IconComp className="h-5 w-5 text-muted-foreground" /> : null}
              </div>
            )}
            <div className="min-w-0">
              <div className="font-medium text-sm truncate max-w-[280px]">{s.title}</div>
              <div className="text-xs text-muted-foreground">{s.slug}</div>
            </div>
          </div>
        );
      },
    },
    {
      key: "sub_services",
      label: "Sub-services",
      render: (s) => <Badge variant="secondary">{s.sub_services.length} groups</Badge>,
      className: "w-32",
    },
    {
      key: "items",
      label: "Total Items",
      render: (s) => (
        <span className="text-sm text-muted-foreground">
          {s.sub_services.reduce((sum, g) => sum + g.items.length, 0)}
        </span>
      ),
      className: "w-28",
    },
    {
      key: "flags",
      label: "Features",
      render: (s) => (
        <div className="flex gap-1.5">
          {s.has_rig_specs && <Badge className="text-[10px]">Rig Specs</Badge>}
          {s.has_tech_links && <Badge className="text-[10px]">Tech Links</Badge>}
          {!s.has_rig_specs && !s.has_tech_links && <span className="text-xs text-muted-foreground">—</span>}
        </div>
      ),
      className: "w-32",
    },
  ];

  const sheetOpen = isAdding || !!editing;

  return (
    <div className="p-6 lg:p-8 max-w-7xl mx-auto">
      <PageHeader
        title="Services"
        description="Manage service categories and their sub-service groups."
        onAdd={() => { setForm(emptyForm()); setIsAdding(true); }}
        addLabel="Add Service"
      />

      <div className="relative max-w-sm mb-4">
        <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
        <Input
          placeholder="Search services…"
          value={search}
          onChange={(e) => handleSearchChange(e.target.value)}
          className="pl-9 h-9"
        />
      </div>

      {loading ? (
        <div className="space-y-2">
          {Array.from({ length: 5 }).map((_, i) => <Skeleton key={i} className="h-14 w-full rounded-md" />)}
        </div>
      ) : (
        <DataTable
          data={services}
          columns={columns}
          onEdit={openEdit}
          onDelete={handleDelete}
        />
      )}

      {/* Pagination */}
      {meta && meta.last_page > 1 && (
        <div className="flex items-center justify-between pt-4">
          <span className="text-xs text-muted-foreground">
            Showing {(meta.current_page - 1) * meta.per_page + 1}–{Math.min(meta.current_page * meta.per_page, meta.total)} of {meta.total}
          </span>
          <div className="flex items-center gap-1">
            <Button
              variant="outline"
              size="icon"
              className="h-8 w-8"
              disabled={meta.current_page <= 1}
              onClick={() => goToPage(meta.current_page - 1)}
            >
              <ChevronLeft className="h-4 w-4" />
            </Button>
            {Array.from({ length: meta.last_page }, (_, i) => i + 1)
              .filter((p) => p === 1 || p === meta.last_page || Math.abs(p - meta.current_page) <= 1)
              .reduce<(number | "ellipsis")[]>((acc, p, i, arr) => {
                if (i > 0 && p - (arr[i - 1]) > 1) acc.push("ellipsis");
                acc.push(p);
                return acc;
              }, [])
              .map((item, i) =>
                item === "ellipsis" ? (
                  <span key={`e-${i}`} className="px-1 text-xs text-muted-foreground">…</span>
                ) : (
                  <Button
                    key={item}
                    variant={item === meta.current_page ? "default" : "outline"}
                    size="icon"
                    className="h-8 w-8 text-xs"
                    onClick={() => goToPage(item)}
                  >
                    {item}
                  </Button>
                )
              )}
            <Button
              variant="outline"
              size="icon"
              className="h-8 w-8"
              disabled={meta.current_page >= meta.last_page}
              onClick={() => goToPage(meta.current_page + 1)}
            >
              <ChevronRight className="h-4 w-4" />
            </Button>
          </div>
        </div>
      )}

      <FormSheet
        open={sheetOpen}
        onOpenChange={(open) => !open && resetSheet()}
        title={isAdding ? "Add Service" : `Edit: ${editing?.title}`}
        onSave={handleSave}
        loading={isSaving}
      >
        <input ref={inputRef} type="file" accept="image/*" className="hidden" onChange={(e) => { const f = e.target.files?.[0]; if (f) handleFile(f); }} />
        <input ref={galleryInputRef} type="file" accept="image/*" multiple className="hidden" onChange={(e) => { if (e.target.files?.length) handleGalleryFiles(e.target.files); }} />

        {/* Basic Info */}
        <div className="space-y-2">
          <Label>Title</Label>
          <Input value={form.title} onChange={(e) => set("title", e.target.value)} placeholder="e.g. Drilling Services" />
        </div>
        <div className="space-y-2">
          <Label>Short Description</Label>
          <Textarea value={form.shortDesc} onChange={(e) => set("shortDesc", e.target.value)} rows={2} placeholder="Brief summary of this service" />
        </div>
        <div className="space-y-2">
          <Label>Overview</Label>
          <Textarea value={form.overview} onChange={(e) => set("overview", e.target.value)} rows={4} placeholder="Full description…" />
        </div>

        {/* Icon */}
        <div className="space-y-2">
          <Label>Icon</Label>
          <SectorIconPicker value={form.icon} onChange={(key) => set("icon", key)} />
        </div>

        {/* Main Image */}
        <div className="space-y-2">
          <Label>Main Image</Label>
          <ImageDropZone
            preview={preview}
            fallback={editing?.image_url}
            isDragging={isDragging}
            onDragOver={(e) => { e.preventDefault(); setIsDragging(true); }}
            onDragLeave={() => setIsDragging(false)}
            onDrop={onDrop}
            onClick={() => inputRef.current?.click()}
          />
          {imageProgress !== null && (
            <div className="space-y-1">
              <div className="flex justify-between text-xs text-muted-foreground">
                <span>Uploading image…</span>
                <span>{imageProgress}%</span>
              </div>
              <div className="h-1.5 w-full rounded-full bg-muted overflow-hidden">
                <div className="h-full bg-primary rounded-full transition-all duration-150" style={{ width: `${imageProgress}%` }} />
              </div>
            </div>
          )}
          {imageUploadDone && imageProgress === null && (
            <div className="flex items-center gap-1.5 text-xs text-emerald-600">
              <CheckCircle2 className="h-3.5 w-3.5" />
              <span>Image uploaded</span>
            </div>
          )}
        </div>

        {/* Gallery Images */}
        <div className="space-y-2">
          <Label>Gallery Images</Label>
          <div className="flex flex-wrap gap-2">
            {existingImages.map((img, i) => (
              <div key={`existing-${i}`} className="relative group">
                <Image src={img.url} alt="" width={80} height={60} className="h-14 w-20 object-cover rounded border" />
                <button
                  type="button"
                  className="absolute -top-1.5 -right-1.5 h-5 w-5 bg-destructive text-destructive-foreground rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity"
                  onClick={() => removeExistingImage(i)}
                >
                  <X className="h-3 w-3" />
                </button>
              </div>
            ))}
            {galleryPreviews.map((src, i) => (
              <div key={`new-${i}`} className="relative group">
                <Image src={src} alt="" width={80} height={60} className="h-14 w-20 object-cover rounded border ring-2 ring-primary/30" />
                <button
                  type="button"
                  className="absolute -top-1.5 -right-1.5 h-5 w-5 bg-destructive text-destructive-foreground rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity"
                  onClick={() => removeGalleryFile(i)}
                >
                  <X className="h-3 w-3" />
                </button>
              </div>
            ))}
            <button
              type="button"
              className="h-14 w-20 rounded border-2 border-dashed border-muted-foreground/25 hover:border-primary/50 flex items-center justify-center text-muted-foreground hover:text-primary transition-colors"
              onClick={() => galleryInputRef.current?.click()}
            >
              <Plus className="h-5 w-5" />
            </button>
          </div>
          {galleryProgress !== null && (
            <div className="space-y-1">
              <div className="flex justify-between text-xs text-muted-foreground">
                <span>Uploading gallery…</span>
                <span>{galleryProgress}%</span>
              </div>
              <div className="h-1.5 w-full rounded-full bg-muted overflow-hidden">
                <div className="h-full bg-primary rounded-full transition-all duration-150" style={{ width: `${galleryProgress}%` }} />
              </div>
            </div>
          )}
        </div>

        {/* Feature Toggles */}
        <div className="flex items-center gap-6 pt-2">
          <div className="flex items-center gap-2">
            <Switch checked={form.hasRigSpecs} onCheckedChange={(v) => set("hasRigSpecs", v)} id="rig-specs" />
            <Label htmlFor="rig-specs" className="text-sm">Rig Specs</Label>
          </div>
          <div className="flex items-center gap-2">
            <Switch checked={form.hasTechLinks} onCheckedChange={(v) => set("hasTechLinks", v)} id="tech-links" />
            <Label htmlFor="tech-links" className="text-sm">Tech Links</Label>
          </div>
        </div>

        <Separator />

        {/* Sub-service Groups */}
        <div className="space-y-3">
          <div className="flex items-center justify-between">
            <Label>Sub-service Groups ({form.subServices.length})</Label>
            <Button type="button" variant="outline" size="sm" onClick={addSubServiceGroup} className="h-7 text-xs gap-1">
              <Plus className="h-3 w-3" /> Add Group
            </Button>
          </div>

          {form.subServices.map((group, gi) => (
            <div key={gi} className="bg-muted/50 rounded-lg p-3 space-y-2">
              <div className="flex items-center gap-2">
                <Input
                  value={group.heading}
                  onChange={(e) => updateSubServiceHeading(gi, e.target.value)}
                  placeholder="Group heading"
                  className="text-sm font-medium"
                />
                <Button type="button" variant="ghost" size="icon" className="h-8 w-8 shrink-0" onClick={() => removeSubServiceGroup(gi)}>
                  <Trash2 className="h-3.5 w-3.5 text-destructive" />
                </Button>
              </div>
              {group.items.map((item, ii) => (
                <div key={ii} className="flex items-center gap-1.5 pl-2">
                  <Input
                    value={item}
                    onChange={(e) => updateSubServiceItem(gi, ii, e.target.value)}
                    placeholder="Service item"
                    className="text-xs h-8"
                  />
                  <Button type="button" variant="ghost" size="icon" className="h-7 w-7 shrink-0" onClick={() => removeSubServiceItem(gi, ii)}>
                    <X className="h-3 w-3" />
                  </Button>
                </div>
              ))}
              <Button type="button" variant="ghost" size="sm" className="text-xs h-7" onClick={() => addSubServiceItem(gi)}>
                <Plus className="h-3 w-3 mr-1" /> Add Item
              </Button>
            </div>
          ))}
        </div>

        {/* Rig Specs (conditional) */}
        {form.hasRigSpecs && (
          <>
            <Separator />
            <div className="space-y-3">
              <div className="flex items-center justify-between">
                <Label>Rig Specifications</Label>
                <Button type="button" variant="outline" size="sm" onClick={addRigSpec} className="h-7 text-xs gap-1">
                  <Plus className="h-3 w-3" /> Add Spec
                </Button>
              </div>
              {form.rigSpecs.map((spec, i) => (
                <div key={i} className="flex gap-2 items-start">
                  <Input value={spec.component} onChange={(e) => updateRigSpec(i, "component", e.target.value)} placeholder="Component" className="text-sm" />
                  <Input value={spec.spec} onChange={(e) => updateRigSpec(i, "spec", e.target.value)} placeholder="Specification" className="text-sm" />
                  <Button type="button" variant="ghost" size="icon" className="h-9 w-9 shrink-0 text-muted-foreground hover:text-destructive" onClick={() => removeRigSpec(i)}>
                    <Trash2 className="h-4 w-4" />
                  </Button>
                </div>
              ))}
            </div>
          </>
        )}

        {/* Technology Links (conditional) */}
        {form.hasTechLinks && (
          <>
            <Separator />
            <div className="space-y-3">
              <Label>Linked Technologies</Label>
              {allTechs.length === 0 ? (
                <p className="text-xs text-muted-foreground">No technologies available. Add them in the Technologies section first.</p>
              ) : (
                <div className="max-h-48 overflow-y-auto rounded-md border bg-muted/20 p-2 space-y-1">
                  {allTechs.map((tech) => (
                    <label
                      key={tech.id}
                      className="flex items-center gap-2.5 px-2 py-1.5 rounded hover:bg-muted cursor-pointer text-sm"
                    >
                      <Checkbox
                        checked={form.technologyIds.includes(tech.id)}
                        onCheckedChange={() => toggleTechnology(tech.id)}
                      />
                      <span className="truncate">{tech.name}</span>
                      <span className="text-xs text-muted-foreground ml-auto shrink-0">{tech.subtitle}</span>
                    </label>
                  ))}
                </div>
              )}
            </div>
          </>
        )}

        {/* Regions */}
        <Separator />
        <div className="space-y-2">
          <Label>Regions</Label>
          {allRegions.length === 0 ? (
            <p className="text-xs text-muted-foreground">No regions available. Add them in the Regions section first.</p>
          ) : (
            <div className="max-h-48 overflow-y-auto rounded-md border bg-muted/20 p-2 space-y-1">
              {allRegions.map((region) => (
                <label
                  key={region.id}
                  className="flex items-center gap-2.5 px-2 py-1.5 rounded hover:bg-muted cursor-pointer text-sm"
                >
                  <Checkbox
                    checked={form.regionIds.includes(region.id)}
                    onCheckedChange={() => toggleRegion(region.id)}
                  />
                  <span className="truncate">{region.name}</span>
                </label>
              ))}
            </div>
          )}
        </div>
      </FormSheet>
    </div>
  );
}