"use client" import { useState, useEffect, useMemo } from "react" import { useRouter } from "next/navigation" import { createClient } from "@/lib/supabase/client" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Textarea } from "@/components/ui/textarea" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select" import { Switch } from "@/components/ui/switch" import { NumericInput } from "@/components/ui/numeric-input" import { Spinner } from "@/components/ui/spinner" import { X, ImageIcon } from "lucide-react" import { toast } from "sonner" import type { Database } from "@/lib/supabase/database.types" import type { LocationRow } from "@/lib/locations/tree" import { buildLocationChildrenMap, getLocationPathIds } from "@/lib/locations/tree" type Resource = Database["public"]["Tables"]["resources"]["Row"] type ResourceType = Database["public"]["Tables"]["resource_types"]["Row"] interface ResourceFormProps { resource?: Resource | null } export function ResourceForm({ resource }: ResourceFormProps) { const router = useRouter() const supabase = useMemo(() => createClient(), []) const isEditing = !!resource const [loading, setLoading] = useState(false) const [initialLoading, setInitialLoading] = useState(isEditing) const [resourceTypes, setResourceTypes] = useState([]) const [locations, setLocations] = useState([]) const [selectedLocationByDepth, setSelectedLocationByDepth] = useState([]) const [amenityInput, setAmenityInput] = useState("") const [name, setName] = useState("") const [description, setDescription] = useState("") const [resourceTypeId, setResourceTypeId] = useState("") const [capacity, setCapacity] = useState(1) const [floor, setFloor] = useState("") const [amenities, setAmenities] = useState([]) const [isActive, setIsActive] = useState(true) const [imageUrl, setImageUrl] = useState("") const locationsById = useMemo( () => new Map(locations.map((l) => [l.id, l])), [locations], ) const locationChildrenMap = useMemo( () => buildLocationChildrenMap(locations), [locations], ) const locationLevelOptions = useMemo(() => { const levels: Array<{ depth: number; options: LocationRow[] }> = [] let parentId: string | null = null for (let depth = 0; depth < 20; depth += 1) { const options = locationChildrenMap.get(parentId) ?? [] if (options.length === 0) break levels.push({ depth, options }) const selectedAtDepth = selectedLocationByDepth[depth] if (!selectedAtDepth) break parentId = selectedAtDepth } return levels }, [locationChildrenMap, selectedLocationByDepth]) // Load resource types useEffect(() => { const load = async () => { const { data } = await supabase .from("resource_types") .select("*") .eq("is_active", true) .order("name") if (data) setResourceTypes(data) } void load() }, [supabase]) // Load locations useEffect(() => { let cancelled = false const loadLocations = async () => { const res = await fetch("/api/locations") const payload = (await res.json().catch(() => null)) as | { locations?: LocationRow[]; error?: string } | null if (!res.ok) { if (!cancelled) toast.error(payload?.error ?? "No se pudo cargar ubicaciones") return } if (!cancelled) setLocations(payload?.locations ?? []) } void loadLocations() return () => { cancelled = true } }, []) // Hydrate form when editing useEffect(() => { if (!resource) return const metadata = (resource.metadata ?? {}) as { locationPathIds?: string[] image_url?: string } setName(resource.name) setDescription(resource.description || "") setResourceTypeId(resource.resource_type_id) setCapacity(resource.capacity ?? 1) setFloor(resource.floor || "") setAmenities((resource.amenities as string[]) || []) setIsActive(resource.is_active ?? true) setImageUrl(metadata.image_url || "") setSelectedLocationByDepth( Array.isArray(metadata.locationPathIds) ? metadata.locationPathIds.filter((v) => typeof v === "string") : [], ) setInitialLoading(false) }, [resource]) // Set default resource type once loaded (create mode) useEffect(() => { if (!isEditing && resourceTypes.length > 0 && !resourceTypeId) { setResourceTypeId(resourceTypes[0].id) } }, [resourceTypes, isEditing, resourceTypeId]) const addAmenity = () => { if (amenityInput.trim() && !amenities.includes(amenityInput.trim())) { setAmenities((prev) => [...prev, amenityInput.trim()]) setAmenityInput("") } } const removeAmenity = (amenity: string) => { setAmenities((prev) => prev.filter((a) => a !== amenity)) } const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setLoading(true) const locationPathIds = getLocationPathIds({ selectedByDepth: selectedLocationByDepth, childrenMap: locationChildrenMap, }) const selectedLocation = locationPathIds.length > 0 ? locationsById.get(locationPathIds[locationPathIds.length - 1]) : null const pathValues = locationPathIds .map((id) => locationsById.get(id)?.value) .filter(Boolean) as string[] const existingMetadata = (resource?.metadata ?? {}) as Record const payload: Record = { name: name.trim(), description: description.trim() || null, resource_type_id: resourceTypeId, capacity, floor: floor.trim() || null, amenities, is_active: isActive, metadata: { ...existingMetadata, locationPathIds, locationPathValues: pathValues, image_url: imageUrl.trim() || null, }, } if (isEditing && resource) { const { error } = await (supabase.from("resources") as any) .update(payload) .eq("id", resource.id) if (error) { toast.error( `Error al actualizar: [${error.code}] ${error.message}${error.details ? ` — ${error.details}` : ""}`, ) setLoading(false) return } toast.success("Recurso actualizado") } else { const { error } = await (supabase.from("resources") as any).insert(payload) if (error) { toast.error( `Error al crear: [${error.code}] ${error.message}${error.details ? ` — ${error.details}` : ""}`, ) setLoading(false) return } toast.success("Recurso creado") } setLoading(false) router.push("/admin/resources") } if (isEditing && initialLoading) { return (
) } return (
{/* Header */}

{isEditing ? "Editar recurso" : "Nuevo recurso"}

{/* Subtitle */}

Recurso

Creá o editá un recurso reservable: nombre, tipo, ubicación y amenidades.

{/* Section: Información general */}

Información general

setName(e.target.value)} placeholder="Ej: Sala Aconcagua" required className="mt-[var(--ds-space-1x)] h-10 rounded-[var(--ds-radius-m)] border-[var(--ds-neutral-300)] bg-white px-[var(--ds-space-2x)] ds-type-global-s text-[var(--ds-text-neutral-default)] placeholder:text-[var(--ds-text-neutral-lighter)]" maxLength={255} /> Nombre con el que se mostrará el recurso al reservar.