"use client";

import { useState, useEffect, useRef, useCallback } from "react";
import Image from "next/image";
import { PageHeader } from "@/components/admin/PageHeader";
import { FormSheet } from "@/components/admin/FormSheet";
import { ImageDropZone } from "@/components/admin/ImageDropZone";
import { SectorIconPicker } from "@/components/admin/SectorIconPicker";
import { SECTOR_ICONS } from "@/lib/sectorIconMap";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import {
  DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Skeleton } from "@/components/ui/skeleton";
import { Checkbox } from "@/components/ui/checkbox";
import { Plus, Trash2, Search, CheckCircle2, ChevronLeft, ChevronRight, FileText, X, GripVertical, MoreHorizontal, Pencil } from "lucide-react";
import { toast } from "sonner";
import { useImageUpload } from "@/hooks/use-image-upload";
import { useDragReorder } from "@/hooks/use-drag-reorder";
import { uploadToCloudinary } from "@/lib/cloudinary";
import {
  getProjects,
  createProject,
  updateProject,
  deleteProject,
  reorderProjects,
  type Project,
  type ProjectImage,
  type PaginationMeta,
  type PaginatedProjects,
} from "@/services/projects";
import { getRegions, type Region } from "@/services/regions";
import { useAdminLocale } from "@/hooks/use-admin-locale";

const API_URL = process.env.NEXT_PUBLIC_API_URL || "";

interface FormState {
  title: string;
  client: string;
  location: string;
  year: string;
  icon: string;
  summary: string;
  scope: string[];
  technologies: string[];
  outcome: string;
  regionIds: number[];
}

const emptyForm = (): FormState => ({
  title: "",
  client: "",
  location: "",
  year: "",
  icon: "",
  summary: "",
  scope: [""],
  technologies: [""],
  outcome: "",
  regionIds: [],
});

export default function ProjectsAdmin() {
  const locale = useAdminLocale();
  const [projects, setProjects] = useState<Project[]>([]);
  const [loading, setLoading] = useState(true);
  const [search, setSearch] = useState("");
  const [editing, setEditing] = useState<Project | 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);
  const [allRegions, setAllRegions] = useState<Region[]>([]);
  const regionsFetched = useRef(false);
  // Gallery images
  const [galleryFiles, setGalleryFiles] = useState<File[]>([]);
  const [galleryPreviews, setGalleryPreviews] = useState<string[]>([]);
  const [existingImages, setExistingImages] = useState<ProjectImage[]>([]);
  const [galleryProgress, setGalleryProgress] = useState<number | null>(null);
  const galleryInputRef = useRef<HTMLInputElement>(null);

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

  const { onDragStart, onDragEnter, onDragEnd } = useDragReorder(
    projects,
    setProjects,
    (reordered) => {
      const positions = reordered.map((p, i) => ({ id: p.id, sort_order: i }));
      reorderProjects(positions)
        .then(() => toast.success("Order saved."))
        .catch(() => {});
    },
  );
  const [page, setPage] = useState(1);
  const [meta, setMeta] = useState<PaginationMeta | null>(null);

  const docInputRef = useRef<HTMLInputElement>(null);
  const [docFile, setDocFile] = useState<File | null>(null);
  const [docProgress, setDocProgress] = useState<number | null>(null);
  const [docUploadDone, setDocUploadDone] = useState(false);
  const [docRemoved, setDocRemoved] = useState(false);

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

  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 fetchProjects = (opts?: { search?: string; page?: number }) => {
    setLoading(true);
    getProjects(opts)
      .then((res) => { setProjects(res.data); setMeta(res.meta); })
      .finally(() => setLoading(false));
  };

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

  // Lazy-load regions 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(() => fetchProjects({ search: value, page: 1 }), 400);
  };

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

  const openEdit = (p: Project) => {
    resetUpload();
    setImageProgress(null);
    setImageUploadDone(false);
    setDocFile(null);
    setDocProgress(null);
    setDocUploadDone(false);
    setDocRemoved(false);
    setGalleryFiles([]);
    setGalleryPreviews([]);
    setGalleryProgress(null);
    setExistingImages(p.images ?? []);
    setForm({
      title: p.title,
      client: p.client ?? "",
      location: p.location ?? "",
      year: p.year ?? "",
      icon: p.icon ?? "",
      summary: p.summary ?? "",
      scope: p.scope?.length ? p.scope : [""],
      technologies: p.technologies?.length ? p.technologies : [""],
      outcome: p.outcome ?? "",
      regionIds: p.regions?.length ? p.regions.map((r: any) => r.id) : (p.region_ids?.length ? p.region_ids : []),
    });
    setEditing(p);
  };

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

  const updateListItem = (field: "scope" | "technologies", i: number, value: string) =>
    setForm((prev) => ({
      ...prev,
      [field]: prev[field].map((item, idx) => (idx === i ? value : item)),
    }));

  const addListItem = (field: "scope" | "technologies") =>
    setForm((prev) => ({ ...prev, [field]: [...prev[field], ""] }));

  const removeListItem = (field: "scope" | "technologies", i: number) =>
    setForm((prev) => ({ ...prev, [field]: prev[field].filter((_, idx) => idx !== i) }));

  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: ProjectImage[] = [];

    if (imageFile) {
      try {
        setImageProgress(0);
        imageResult = await uploadToCloudinary(
          imageFile,
          "image",
          setImageProgress,
          `${API_URL}/api/projects/upload-signature`,
        );
        setImageProgress(null);
        setImageUploadDone(true);
      } catch (err) {
        toast.error(err instanceof Error ? err.message : "Image upload failed.");
        setImageProgress(null);
        setIsSaving(false);
        return;
      }
    }

    if (galleryFiles.length) {
      try {
        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));
            },
            `${API_URL}/api/projects/upload-signature`,
          );
          uploadedGallery.push({ url: result.secure_url, public_id: result.public_id });
        }
        setGalleryProgress(null);
      } catch (err) {
        toast.error(err instanceof Error ? err.message : "Gallery upload failed.");
        setGalleryProgress(null);
        setIsSaving(false);
        return;
      }
    }

    let docResult: { secure_url: string; public_id: string } | undefined;
    if (docFile) {
      try {
        setDocProgress(0);
        docResult = await uploadToCloudinary(
          docFile,
          "raw",
          setDocProgress,
          `${API_URL}/api/projects/upload-signature`,
        );
        setDocProgress(null);
        setDocUploadDone(true);
      } catch (err) {
        toast.error(err instanceof Error ? err.message : "Document upload failed.");
        setDocProgress(null);
        setIsSaving(false);
        return;
      }
    }

    const allImages = [...existingImages, ...uploadedGallery];
    const scope = form.scope.filter((s) => s.trim());
    const technologies = form.technologies.filter((t) => t.trim());

    try {
      if (isAdding) {
        const created = await createProject({
          title: form.title.trim(),
          client: form.client.trim() || undefined,
          location: form.location.trim() || undefined,
          year: form.year.trim() || undefined,
          icon: form.icon || undefined,
          summary: form.summary.trim() || undefined,
          scope,
          technologies,
          outcome: form.outcome.trim() || undefined,
          image_url: imageResult?.secure_url,
          image_public_id: imageResult?.public_id,
          images: allImages,
          document_url: docResult?.secure_url,
          document_public_id: docResult?.public_id,
          region_ids: form.regionIds,
          sort_order: projects.length,
        });
        setProjects((prev) => [...prev, created]);
        toast.success("Project added.");
      } else {
        const payload: Parameters<typeof updateProject>[1] = {
          title: { [locale]: form.title.trim() },
          client: form.client.trim() || undefined,
          location: form.location.trim() || undefined,
          year: form.year.trim() || undefined,
          icon: form.icon || null,
          summary: form.summary.trim() ? { [locale]: form.summary.trim() } : undefined,
          scope,
          technologies,
          outcome: form.outcome.trim() ? { [locale]: form.outcome.trim() } : undefined,
          images: allImages,
          region_ids: form.regionIds,
        };
        if (imageResult) {
          payload.image_url = imageResult.secure_url;
          payload.image_public_id = imageResult.public_id;
        }
        payload.document_url = docResult ? docResult.secure_url : docRemoved ? null : undefined;
        payload.document_public_id = docResult ? docResult.public_id : docRemoved ? null : undefined;
        const updated = await updateProject(editing!.id, payload);
        setProjects((prev) => prev.map((p) => (p.id === updated.id ? updated : p)));
        toast.success("Project updated.");
      }
      resetSheet();
    } catch {
      // interceptor shows error toast
    } finally {
      setIsSaving(false);
    }
  };

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

  const sheetOpen = isAdding || !!editing;

  return (
    <div className="p-6 lg:p-8 max-w-7xl mx-auto">
      <PageHeader
        title="Projects"
        description="Manage project case studies and their details."
        onAdd={() => {
          setForm(emptyForm());
          setIsAdding(true);
        }}
        addLabel="Add Project"
      />

      <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 projects"
          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>
      ) : projects.length === 0 ? (
        <div className="text-center py-12 text-sm text-muted-foreground bg-card rounded-lg border">
          No projects yet. Click &quot;Add Project&quot; to get started.
        </div>
      ) : (
        <div className="bg-card rounded-lg border overflow-hidden">
          <Table>
            <TableHeader>
              <TableRow className="bg-muted/50">
                <TableHead className="w-8" />
                <TableHead className="text-xs font-semibold uppercase tracking-wider">Project</TableHead>
                <TableHead className="text-xs font-semibold uppercase tracking-wider">Location / Year</TableHead>
                <TableHead className="w-24 text-xs font-semibold uppercase tracking-wider">Scope</TableHead>
                <TableHead className="w-28 text-xs font-semibold uppercase tracking-wider">Technologies</TableHead>
                <TableHead className="w-12" />
              </TableRow>
            </TableHeader>
            <TableBody>
              {projects.map((p, index) => (
                <TableRow
                  key={p.id}
                  draggable
                  onDragStart={() => onDragStart(index)}
                  onDragEnter={() => onDragEnter(index)}
                  onDragOver={(e) => e.preventDefault()}
                  onDragEnd={onDragEnd}
                  className="group cursor-default"
                >
                  <TableCell className="w-8 pr-0">
                    <GripVertical className="h-4 w-4 text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity cursor-grab" />
                  </TableCell>
                  <TableCell>
                    <div className="flex items-center gap-3">
                      {p.image_url ? (
                        <Image src={p.image_url} alt={p.title} width={56} height={40} className="h-10 w-14 object-cover rounded shrink-0" />
                      ) : (
                        <div className="h-10 w-14 rounded bg-muted shrink-0" />
                      )}
                      <div className="min-w-0">
                        <div className="font-medium text-sm truncate">{p.title}</div>
                        <div className="text-xs text-muted-foreground truncate">{p.client}</div>
                      </div>
                    </div>
                  </TableCell>
                  <TableCell>
                    <div className="text-sm">{p.location}</div>
                    <div className="text-xs text-muted-foreground">{p.year}</div>
                  </TableCell>
                  <TableCell className="w-24">
                    <Badge variant="secondary">{p.scope?.length ?? 0} items</Badge>
                  </TableCell>
                  <TableCell className="w-28">
                    <Badge variant="outline">{p.technologies?.length ?? 0} items</Badge>
                  </TableCell>
                  <TableCell className="w-12">
                    <DropdownMenu>
                      <DropdownMenuTrigger className="inline-flex h-8 w-8 items-center justify-center rounded-md opacity-0 transition-opacity group-hover:opacity-100 hover:bg-accent hover:text-accent-foreground focus-visible:outline-none">
                        <MoreHorizontal className="h-4 w-4" />
                      </DropdownMenuTrigger>
                      <DropdownMenuContent align="end">
                        <DropdownMenuItem onClick={() => openEdit(p)}>
                          <Pencil className="mr-2 h-3.5 w-3.5" /> Edit
                        </DropdownMenuItem>
                        <DropdownMenuItem
                          className="text-destructive"
                          onClick={() => handleDelete(p)}
                          disabled={deletingId === p.id}
                        >
                          <Trash2 className="mr-2 h-3.5 w-3.5" /> Delete
                        </DropdownMenuItem>
                      </DropdownMenuContent>
                    </DropdownMenu>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </div>
      )}

      {meta && meta.last_page > 1 && (
        <div className="flex items-center justify-between mt-4">
          <p className="text-sm text-muted-foreground">
            Page {meta.current_page} of {meta.last_page} &middot; {meta.total} total
          </p>
          <div className="flex items-center gap-2">
            <Button
              variant="outline"
              size="icon"
              className="h-8 w-8"
              disabled={meta.current_page <= 1}
              onClick={() => {
                const newPage = page - 1;
                setPage(newPage);
                fetchProjects({ search, page: newPage });
              }}
            >
              <ChevronLeft className="h-4 w-4" />
            </Button>
            <Button
              variant="outline"
              size="icon"
              className="h-8 w-8"
              disabled={meta.current_page >= meta.last_page}
              onClick={() => {
                const newPage = page + 1;
                setPage(newPage);
                fetchProjects({ search, page: newPage });
              }}
            >
              <ChevronRight className="h-4 w-4" />
            </Button>
          </div>
        </div>
      )}

      <FormSheet
        open={sheetOpen}
        onOpenChange={(open) => !open && resetSheet()}
        title={isAdding ? "Add Project" : `Edit: ${editing?.title}`}
        onSave={handleSave}
        loading={isSaving}
      >
        {/* Basic Info */}
        <div className="space-y-2">
          <Label>Title *</Label>
          <Input
            value={form.title}
            onChange={(e) => set("title", e.target.value)}
            placeholder="e.g. Windmill Offshore Platform Integrity"
          />
        </div>
        <div className="space-y-2">
          <Label>Client</Label>
          <Input
            value={form.client}
            onChange={(e) => set("client", e.target.value)}
            placeholder="e.g. ExxonMobil"
          />
        </div>
        <div className="grid grid-cols-2 gap-3">
          <div className="space-y-2">
            <Label>Location</Label>
            <Input
              value={form.location}
              onChange={(e) => set("location", e.target.value)}
              placeholder="e.g. Offshore Nigeria"
            />
          </div>
          <div className="space-y-2">
            <Label>Year</Label>
            <Input
              value={form.year}
              onChange={(e) => set("year", e.target.value)}
              placeholder="e.g. 2019 - 2021"
            />
          </div>
        </div>

            {/* Icon */}
        <div className="space-y-2">
          <Label>Icon</Label>
          {form.icon && SECTOR_ICONS[form.icon] && (() => {
            const Entry = SECTOR_ICONS[form.icon];
            const IconComp = Entry.component;
            return (
              <div className="flex items-center gap-2 mb-2">
                <div className="flex items-center gap-2 px-3 py-1.5 bg-accent/10 rounded-md">
                  <IconComp className="h-4 w-4 text-accent" />
                  <span className="text-sm font-medium">{Entry.label}</span>
                </div>
                <Button
                  type="button" variant="ghost" size="sm"
                  className="h-7 text-xs text-muted-foreground"
                  onClick={() => set("icon", "")}
                >
                  Clear
                </Button>
              </div>
            );
          })()}
          <SectorIconPicker value={form.icon} onChange={(key) => set("icon", key)} />
        </div>

        {/* Image */}
        <div className="space-y-2">
          <Label>Image</Label>
          <input
            ref={inputRef}
            type="file"
            accept="image/*"
            className="hidden"
            onChange={(e) => e.target.files?.[0] && handleFile(e.target.files[0])}
          />
          <input
            ref={galleryInputRef}
            type="file"
            accept="image/*"
            multiple
            className="hidden"
            onChange={(e) => { if (e.target.files?.length) handleGalleryFiles(e.target.files); }}
          />
          <ImageDropZone
            preview={preview}
            fallback={editing?.image_url ?? undefined}
            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>

        {/* Document */}
        <div className="space-y-2">
          <Label>
            Case Study Document{" "}
            <span className="text-xs text-muted-foreground">(PDF, Word, PPT — optional)</span>
          </Label>
          <input
            ref={docInputRef}
            type="file"
            accept=".pdf,.doc,.docx,.ppt,.pptx"
            className="hidden"
            onChange={(e) => {
              const f = e.target.files?.[0];
              if (f) { setDocFile(f); setDocRemoved(false); }
            }}
          />
          {docFile || (editing?.document_url && !docRemoved) ? (
            <div className="border rounded-lg p-4 flex items-center justify-between gap-3 bg-muted/30">
              <div className="flex items-center gap-2 min-w-0">
                <FileText className="h-5 w-5 text-primary/60 shrink-0" />
                <span className="text-sm font-medium truncate">
                  {docFile?.name ?? "Current document"}
                </span>
              </div>
              <Button
                type="button"
                variant="ghost"
                size="icon"
                className="h-7 w-7 shrink-0 text-destructive hover:text-destructive"
                onClick={() => { setDocFile(null); setDocRemoved(true); }}
              >
                <X className="h-3.5 w-3.5" />
              </Button>
            </div>
          ) : (
            <button
              type="button"
              className="w-full border-2 border-dashed rounded-lg p-5 text-center text-sm text-muted-foreground cursor-pointer hover:border-primary/50 hover:bg-muted/50 transition-colors"
              onClick={() => docInputRef.current?.click()}
            >
              <FileText className="h-6 w-6 mx-auto mb-2 opacity-40" />
              Click to upload a document
            </button>
          )}
          {docProgress !== null && (
            <div className="space-y-1">
              <div className="flex justify-between text-xs text-muted-foreground">
                <span>Uploading document…</span>
                <span>{docProgress}%</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: `${docProgress}%` }}
                />
              </div>
            </div>
          )}
          {docUploadDone && docProgress === null && (
            <div className="flex items-center gap-1.5 text-xs text-emerald-600">
              <CheckCircle2 className="h-3.5 w-3.5" />
              <span>Document 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>

        {/* Summary */}
        <div className="space-y-2">
          <Label>Summary</Label>
          <Textarea
            value={form.summary}
            onChange={(e) => set("summary", e.target.value)}
            placeholder="Brief overview of the project…"
            rows={3}
          />
        </div>

        {/* Scope */}
        <div className="space-y-2">
          <div className="flex items-center justify-between">
            <Label>Scope of Work</Label>
            <Button
              type="button"
              variant="ghost"
              size="sm"
              className="h-7 gap-1 text-xs"
              onClick={() => addListItem("scope")}
            >
              <Plus className="h-3 w-3" /> Add item
            </Button>
          </div>
          <div className="space-y-2">
            {form.scope.map((item, i) => (
              <div key={i} className="flex items-center gap-2">
                <Input
                  value={item}
                  onChange={(e) => updateListItem("scope", i, e.target.value)}
                  placeholder={`Scope item ${i + 1}`}
                  className="h-8 text-sm"
                />
                {form.scope.length > 1 && (
                  <Button
                    type="button"
                    variant="ghost"
                    size="icon"
                    className="h-8 w-8 shrink-0 text-destructive hover:text-destructive"
                    onClick={() => removeListItem("scope", i)}
                  >
                    <Trash2 className="h-3.5 w-3.5" />
                  </Button>
                )}
              </div>
            ))}
          </div>
        </div>

        {/* Technologies */}
        <div className="space-y-2">
          <div className="flex items-center justify-between">
            <Label>Technologies Used</Label>
            <Button
              type="button"
              variant="ghost"
              size="sm"
              className="h-7 gap-1 text-xs"
              onClick={() => addListItem("technologies")}
            >
              <Plus className="h-3 w-3" /> Add item
            </Button>
          </div>
          <div className="space-y-2">
            {form.technologies.map((item, i) => (
              <div key={i} className="flex items-center gap-2">
                <Input
                  value={item}
                  onChange={(e) => updateListItem("technologies", i, e.target.value)}
                  placeholder={`Technology ${i + 1}`}
                  className="h-8 text-sm"
                />
                {form.technologies.length > 1 && (
                  <Button
                    type="button"
                    variant="ghost"
                    size="icon"
                    className="h-8 w-8 shrink-0 text-destructive hover:text-destructive"
                    onClick={() => removeListItem("technologies", i)}
                  >
                    <Trash2 className="h-3.5 w-3.5" />
                  </Button>
                )}
              </div>
            ))}
          </div>
        </div>

        {/* Outcome */}
        <div className="space-y-2">
          <Label>Key Outcome</Label>
          <Textarea
            value={form.outcome}
            onChange={(e) => set("outcome", e.target.value)}
            placeholder="Describe the measurable result or impact…"
            rows={3}
          />
        </div>

        {/* Regions */}
        <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>
  );
}