"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 { FieldGroup, Field, FieldLabel } from "@/components/ui/field" import { Spinner } from "@/components/ui/spinner" import { NumericInput } from "@/components/ui/numeric-input" import { ImageIcon, X as XIcon } 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 ResourceFormWizardProps { resource?: Resource | null } const STEPS = [ { number: 1, title: "Aspectos generales", subItems: ["Detalles"], }, { number: 2, title: "Configuración", subItems: ["Detalles"], }, { number: 3, title: "Imagen y estado", subItems: ["Detalles"], }, ] export function ResourceFormWizard({ resource }: ResourceFormWizardProps) { const router = useRouter() const supabase = useMemo(() => createClient(), []) const isEditing = !!resource const [currentStep, setCurrentStep] = useState(0) const [loading, setLoading] = useState(false) const [resourceTypes, setResourceTypes] = useState([]) const [locations, setLocations] = useState([]) const [selectedLocationByDepth, setSelectedLocationByDepth] = useState([]) const [amenityInput, setAmenityInput] = useState("") const [formData, setFormData] = useState({ name: "", description: "", resource_type_id: "", capacity: 1, floor: "", amenities: [] as string[], is_active: true, image_url: "", }) const locationsById = useMemo( () => new Map(locations.map((l) => [l.id, l])), [locations], ) const locationChildrenMap = useMemo( () => buildLocationChildrenMap(locations), [locations], ) // 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) { const metadata = (resource.metadata ?? {}) as { locationPathIds?: string[] image_url?: string } setFormData({ name: resource.name, description: resource.description || "", resource_type_id: resource.resource_type_id, capacity: resource.capacity || 1, floor: resource.floor || "", amenities: (resource.amenities as string[]) || [], is_active: resource.is_active ?? true, image_url: metadata.image_url || "", }) setSelectedLocationByDepth( Array.isArray(metadata.locationPathIds) ? metadata.locationPathIds.filter((v) => typeof v === "string") : [], ) } }, [resource]) // Set default resource type once loaded useEffect(() => { if (!isEditing && resourceTypes.length > 0 && !formData.resource_type_id) { setFormData((prev) => ({ ...prev, resource_type_id: resourceTypes[0].id })) } }, [resourceTypes, isEditing, formData.resource_type_id]) 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]) const addAmenity = () => { if (amenityInput.trim() && !formData.amenities.includes(amenityInput.trim())) { setFormData((prev) => ({ ...prev, amenities: [...prev.amenities, amenityInput.trim()], })) setAmenityInput("") } } const removeAmenity = (amenity: string) => { setFormData((prev) => ({ ...prev, amenities: prev.amenities.filter((a) => a !== amenity), })) } const handleSubmit = async () => { setLoading(true) const locationPathIds = getLocationPathIds({ selectedByDepth: selectedLocationByDepth, childrenMap: locationChildrenMap, }) const selectedLocation = locationPathIds.length > 0 ? locationsById.get(locationPathIds[locationPathIds.length - 1]) : null const existingMetadata = (resource?.metadata ?? {}) as Record const payload: Record = { name: formData.name, description: formData.description || null, resource_type_id: formData.resource_type_id, capacity: formData.capacity, floor: formData.floor || null, amenities: formData.amenities, is_active: formData.is_active, metadata: { ...existingMetadata, locationPathIds, locationPathValues: selectedLocation?.path ?? [], image_url: formData.image_url || 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") } const goNext = () => { if (currentStep < STEPS.length - 1) setCurrentStep((s) => s + 1) else void handleSubmit() } const goBack = () => { if (currentStep > 0) setCurrentStep((s) => s - 1) else router.push("/admin/resources") } const isNextDisabled = () => { if (currentStep === 0) { return !formData.resource_type_id || !formData.name.trim() } return false } return (
{/* Top bar */}

{isEditing ? "Editar recurso" : "Crear nuevo recurso"}

{/* Body: sidebar + content */}
{/* Sidebar */} {/* Content area */}
{/* Step 1: Aspectos generales */} {currentStep === 0 && (

Aspectos generales

Tipo de recurso Nombre setFormData((prev) => ({ ...prev, name: e.target.value })) } placeholder="Ej: Sala Aconcagua" required className="rounded-[var(--ds-radius-m)] border-[var(--ds-neutral-300)] ds-type-global-xs" /> Descripcion