import { useQueryClient } from '@tanstack/react-query'
import { useParams } from '@tanstack/react-router'
import {
  Sparkles,
  Send,
  Target,
  UserCheck,
  Lightbulb,
  FileText,
  GraduationCap,
  BookOpen,
  Check,
  X,
  MessageSquarePlus,
  Archive,
  History,
  Edit2, // Agregado
} from 'lucide-react'
import { useState, useEffect, useRef, useMemo } from 'react'

import { ImprovementCard } from './SaveAsignatura/ImprovementCardProps'

import type { IASugerencia } from '@/types/asignatura'

import ReferenciasParaIA from '@/components/planes/wizard/PasoDetallesPanel/ReferenciasParaIA'
import { Avatar, AvatarFallback } from '@/components/ui/avatar'
import { Button } from '@/components/ui/button'
import { Drawer, DrawerContent } from '@/components/ui/drawer'
import { ScrollArea } from '@/components/ui/scroll-area'
import { Textarea } from '@/components/ui/textarea'
import {
  useAISubjectChat,
  useConversationBySubject,
  useMessagesBySubjectChat,
  useSubject,
  useUpdateSubjectConversationName,
  useUpdateSubjectConversationStatus,
} from '@/data'
import { cn } from '@/lib/utils'

interface SelectedField {
  key: string
  label: string
  value: string
}

interface IAAsignaturaTabProps {
  asignatura?: Record<string, any>
  onAcceptSuggestion: (sugerencia: IASugerencia) => void
  onRejectSuggestion: (messageId: string) => void
}

export function IAAsignaturaTab({
  onAcceptSuggestion,
  onRejectSuggestion,
}: IAAsignaturaTabProps) {
  const queryClient = useQueryClient()
  const { asignaturaId } = useParams({
    from: '/planes/$planId/asignaturas/$asignaturaId',
  })

  // --- ESTADOS ---
  const [activeChatId, setActiveChatId] = useState<string | undefined>(
    undefined,
  )
  const [showArchived, setShowArchived] = useState(false)
  const [input, setInput] = useState('')
  const [selectedFields, setSelectedFields] = useState<Array<SelectedField>>([])
  const [showSuggestions, setShowSuggestions] = useState(false)
  const [isSending, setIsSending] = useState(false)
  const scrollRef = useRef<HTMLDivElement>(null)

  // --- DATA QUERIES ---
  const { data: datosGenerales } = useSubject(asignaturaId)
  const { data: todasConversaciones, isLoading: loadingConv } =
    useConversationBySubject(asignaturaId)
  const { data: rawMessages } = useMessagesBySubjectChat(activeChatId, {
    enabled: !!activeChatId,
  })
  const { mutateAsync: sendMessage } = useAISubjectChat()
  const { mutate: updateStatus } = useUpdateSubjectConversationStatus()
  const [isCreatingNewChat, setIsCreatingNewChat] = useState(false)
  const hasInitialSelected = useRef(false)
  const { mutate: updateName } = useUpdateSubjectConversationName()
  const [editingId, setEditingId] = useState<string | null>(null)
  const [tempName, setTempName] = useState('')
  const [openIA, setOpenIA] = useState(false)

  const [selectedArchivoIds, setSelectedArchivoIds] = useState<Array<string>>(
    [],
  )
  const [selectedRepositorioIds, setSelectedRepositorioIds] = useState<
    Array<string>
  >([])
  const [uploadedFiles, setUploadedFiles] = useState<Array<File>>([])

  // Cálculo del total para el Badge del botón
  const totalReferencias =
    selectedArchivoIds.length +
    selectedRepositorioIds.length +
    uploadedFiles.length

  const isAiThinking = useMemo(() => {
    if (isSending) return true
    if (!rawMessages || rawMessages.length === 0) return false

    // Verificamos si el último mensaje está en estado de procesamiento
    const lastMessage = rawMessages[rawMessages.length - 1]
    return (
      lastMessage.estado === 'PROCESANDO' || lastMessage.estado === 'PENDIENTE'
    )
  }, [isSending, rawMessages])

  // --- AUTO-SCROLL ---
  useEffect(() => {
    const viewport = scrollRef.current?.querySelector(
      '[data-radix-scroll-area-viewport]',
    )
    if (viewport) {
      viewport.scrollTop = viewport.scrollHeight
    }
  }, [rawMessages, isSending])

  // --- FILTRADO DE CHATS ---
  const { activeChats, archivedChats } = useMemo(() => {
    const chats = todasConversaciones || []
    return {
      activeChats: chats.filter((c: any) => c.estado === 'ACTIVA'),
      archivedChats: chats.filter((c: any) => c.estado === 'ARCHIVADA'),
    }
  }, [todasConversaciones])

  const availableFields = useMemo(() => {
    if (!datosGenerales?.datos) return []
    const estructuraProps =
      datosGenerales?.estructuras_asignatura?.definicion?.properties || {}
    return Object.keys(datosGenerales.datos).map((key) => ({
      key,
      label:
        estructuraProps[key]?.title || key.replace(/_/g, ' ').toUpperCase(),
      value: String(datosGenerales.datos[key] || ''),
    }))
  }, [datosGenerales])

  // --- PROCESAMIENTO DE MENSAJES ---
  // --- PROCESAMIENTO DE MENSAJES ---
  const messages = useMemo(() => {
    const msgs: Array<any> = []

    // 1. Mensajes existentes de la DB
    if (rawMessages) {
      rawMessages.forEach((m) => {
        // Mensaje del usuario
        msgs.push({ id: `${m.id}-user`, role: 'user', content: m.mensaje })

        // Respuesta de la IA (si existe)
        if (m.respuesta) {
          const sugerencias =
            m.propuesta?.recommendations?.map((rec: any, index: number) => ({
              id: `${m.id}-sug-${index}`,
              messageId: m.id,
              campoKey: rec.campo_afectado,
              campoNombre: rec.campo_afectado.replace(/_/g, ' '),
              valorSugerido: rec.texto_mejora,
              aceptada: rec.aplicada,
            })) || []

          msgs.push({
            id: `${m.id}-ai`,
            role: 'assistant',
            content: m.respuesta,
            sugerencias: sugerencias,
          })
        }
      })
    }

    // 2. INYECCIÓN OPTIMISTA: Si estamos enviando, mostramos el texto actual del input como mensaje de usuario
    if (isSending && input.trim()) {
      msgs.push({
        id: 'optimistic-user-msg',
        role: 'user',
        content: input,
      })
    }

    return msgs
  }, [rawMessages, isSending, input])

  // Auto-selección inicial
  useEffect(() => {
    // Si ya hay un chat, o si el usuario ya interactuó (hasInitialSelected), abortamos.
    if (activeChatId || hasInitialSelected.current) return

    if (activeChats.length > 0 && !loadingConv) {
      setActiveChatId(activeChats[0].id)
      hasInitialSelected.current = true
    }
  }, [activeChats, loadingConv])

  const filteredFields = useMemo(() => {
    if (!showSuggestions) return availableFields

    // Extraemos lo que hay después del último ':' para filtrar
    const lastColonIndex = input.lastIndexOf(':')
    const query = input.slice(lastColonIndex + 1).toLowerCase()

    return availableFields.filter(
      (f) =>
        f.label.toLowerCase().includes(query) ||
        f.key.toLowerCase().includes(query),
    )
  }, [availableFields, input, showSuggestions])

  // 2. Efecto para cerrar con ESC
  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      if (e.key === 'Escape') setShowSuggestions(false)
    }
    window.addEventListener('keydown', handleKeyDown)
    return () => window.removeEventListener('keydown', handleKeyDown)
  }, [])

  // 3. Función para insertar el campo y limpiar el prompt
  const handleSelectField = (field: SelectedField) => {
    // 1. Agregamos al array de objetos (para tu lógica de API)
    if (!selectedFields.find((f) => f.key === field.key)) {
      setSelectedFields((prev) => [...prev, field])
    }

    // 2. Lógica de autocompletado en el texto
    const lastColonIndex = input.lastIndexOf(':')
    if (lastColonIndex !== -1) {
      // Tomamos lo que había antes del ":" + el Nombre del Campo + un espacio
      const nuevoTexto = input.slice(0, lastColonIndex) + `${field.label} `
      setInput(nuevoTexto)
    }

    // 3. Cerramos el buscador y devolvemos el foco al textarea
    setShowSuggestions(false)

    // Opcional: Si tienes una ref del textarea, puedes hacer:
    // textareaRef.current?.focus()
  }

  const handleSaveName = (id: string) => {
    if (tempName.trim()) {
      updateName({ id, nombre: tempName })
    }
    setEditingId(null)
  }

  const handleSend = async (promptOverride?: string) => {
    const text = promptOverride || input
    if (!text.trim() && selectedFields.length === 0) return

    setIsSending(true)
    try {
      const response = await sendMessage({
        subjectId: asignaturaId as any, // Importante: se usa para crear la conv si activeChatId es undefined
        content: text,
        campos: selectedFields.map((f) => f.key),
        conversacionId: activeChatId, // Si es undefined, la mutación crea el chat automáticamente
      })

      // IMPORTANTE: Después de la respuesta, actualizamos el ID activo con el que creó el backend
      if (response.conversacionId) {
        setActiveChatId(response.conversacionId)
      }

      setInput('')
      setSelectedFields([])

      // Invalidamos la lista de conversaciones para que el nuevo chat aparezca en el historial (panel izquierdo)
      queryClient.invalidateQueries({
        queryKey: ['conversation-by-subject', asignaturaId],
      })
    } catch (error) {
      console.error('Error al enviar mensaje:', error)
    } finally {
      setIsSending(false)
    }
  }

  const toggleField = (field: SelectedField) => {
    setSelectedFields((prev) =>
      prev.find((f) => f.key === field.key)
        ? prev.filter((f) => f.key !== field.key)
        : [...prev, field],
    )
  }

  const createNewChat = () => {
    setActiveChatId(undefined) // Al ser undefined, el próximo mensaje creará la charla en el backend
    setInput('')
    setSelectedFields([])
    // Opcional: podrías forzar el foco al textarea aquí con una ref
  }

  const PRESETS = [
    {
      id: 'mejorar-obj',
      label: 'Mejorar objetivo',
      icon: Target,
      prompt: 'Mejora la redacción del objetivo...',
    },
    {
      id: 'sugerir-cont',
      label: 'Sugerir contenido',
      icon: BookOpen,
      prompt: 'Genera un desglose de temas...',
    },
    {
      id: 'actividades',
      label: 'Actividades',
      icon: GraduationCap,
      prompt: 'Sugiere actividades prácticas...',
    },
  ]

  return (
    <div className="flex h-[calc(100vh-160px)] w-full gap-6 overflow-hidden p-4">
      {/* PANEL IZQUIERDO */}
      <div className="flex w-64 flex-col border-r pr-4">
        <div className="mb-4 flex items-center justify-between px-2">
          <h2 className="flex items-center gap-2 text-xs font-bold text-slate-500 uppercase">
            <History size={14} /> Historial
          </h2>
          <Button
            variant="ghost"
            size="icon"
            className={cn(
              'h-8 w-8',
              showArchived && 'bg-teal-50 text-teal-600',
            )}
            onClick={() => setShowArchived(!showArchived)}
          >
            <Archive size={16} />
          </Button>
        </div>

        <Button
          onClick={() => {
            // 1. Limpiamos el ID
            setActiveChatId(undefined)
            // 2. Marcamos que ya hubo una "interacción inicial" para que el useEffect no actúe
            hasInitialSelected.current = true
            // 3. Limpiamos estados visuales
            setIsCreatingNewChat(true)
            setInput('')
            setSelectedFields([])

            // 4. Opcional: Limpiar el caché de mensajes actual para que la pantalla se vea vacía al instante
            queryClient.setQueryData(['subject-messages', undefined], [])
          }}
          variant="outline"
          className="mb-4 w-full justify-start gap-2 border-dashed border-slate-300 hover:border-teal-500"
        >
          <MessageSquarePlus size={18} /> Nuevo Chat
        </Button>

        <ScrollArea className="flex-1">
          <div className="space-y-1 pr-3">
            {/* CORRECCIÓN: Mapear ambos casos */}
            {(showArchived ? archivedChats : activeChats).map((chat: any) => (
              <div
                key={chat.id}
                className={cn(
                  'group relative flex items-center gap-2 rounded-lg px-3 py-2 text-sm transition-all',
                  activeChatId === chat.id
                    ? 'bg-teal-50 text-teal-900'
                    : 'text-slate-600 hover:bg-slate-100',
                )}
              >
                <FileText size={14} className="shrink-0 opacity-50" />

                {editingId === chat.id ? (
                  <div className="flex flex-1 items-center gap-1">
                    <input
                      autoFocus
                      className="w-full rounded bg-white px-1 text-xs ring-1 ring-teal-400 outline-none"
                      value={tempName}
                      onChange={(e) => setTempName(e.target.value)}
                      onBlur={() => handleSaveName(chat.id)} // Guardar al hacer clic fuera
                      onKeyDown={(e) => {
                        if (e.key === 'Enter') handleSaveName(chat.id)
                        if (e.key === 'Escape') setEditingId(null)
                      }}
                    />
                  </div>
                ) : (
                  <>
                    <span
                      onClick={() => setActiveChatId(chat.id)}
                      className="flex-1 cursor-pointer truncate"
                    >
                      {/* CORRECCIÓN: Usar 'nombre' si así se llama en tu DB */}
                      {chat.nombre || chat.titulo || 'Conversación'}
                    </span>

                    <div className="flex opacity-0 transition-opacity group-hover:opacity-100">
                      <button
                        onClick={(e) => {
                          e.stopPropagation()
                          setEditingId(chat.id)
                          setTempName(chat.nombre || chat.titulo || '')
                        }}
                        className="p-1 hover:text-teal-600"
                      >
                        <Edit2 size={12} />
                      </button>

                      {/* Botón para Archivar/Desarchivar dinámico */}
                      <button
                        onClick={(e) => {
                          e.stopPropagation()
                          // Si el estado actual es ACTIVA, mandamos ARCHIVADA. Si no, viceversa.
                          const nuevoEstado =
                            chat.estado === 'ACTIVA' ? 'ARCHIVADA' : 'ACTIVA'
                          updateStatus({ id: chat.id, estado: nuevoEstado })
                        }}
                        className={cn(
                          'p-1 transition-colors',
                          chat.estado === 'ACTIVA'
                            ? 'hover:text-red-500'
                            : 'hover:text-teal-600',
                        )}
                        title={
                          chat.estado === 'ACTIVA'
                            ? 'Archivar chat'
                            : 'Desarchivar chat'
                        }
                      >
                        {chat.estado === 'ACTIVA' ? (
                          <Archive size={12} />
                        ) : (
                          /* Icono de Desarchivar */
                          <History size={12} className="scale-x-[-1]" />
                        )}
                      </button>
                    </div>
                  </>
                )}
              </div>
            ))}
          </div>
        </ScrollArea>
      </div>

      {/* PANEL CENTRAL */}
      <div className="relative flex min-w-0 flex-[3] flex-col overflow-hidden rounded-xl border border-slate-200 bg-slate-50/50 shadow-sm">
        <div className="flex shrink-0 items-center justify-between border-b bg-white p-3">
          <span className="text-[10px] font-bold tracking-wider text-slate-400 uppercase">
            Asistente IA
          </span>
          <button
            onClick={() => setOpenIA(true)}
            className="flex items-center gap-2 rounded-md bg-slate-100 px-3 py-1.5 text-xs font-medium transition hover:bg-slate-200"
          >
            <FileText size={14} className="text-slate-500" />
            Referencias
            {totalReferencias > 0 && (
              <span className="animate-in zoom-in flex h-4 min-w-[16px] items-center justify-center rounded-full bg-teal-600 px-1 text-[10px] text-white">
                {totalReferencias}
              </span>
            )}
          </button>
        </div>

        <div className="relative min-h-0 flex-1">
          <ScrollArea ref={scrollRef} className="h-full w-full">
            <div className="mx-auto max-w-3xl space-y-8 p-6">
              {messages.map((msg) => (
                <div
                  key={msg.id}
                  className={cn(
                    'flex gap-4',
                    msg.role === 'user' ? 'flex-row-reverse' : 'flex-row',
                  )}
                >
                  <Avatar
                    className={cn(
                      'h-9 w-9 shrink-0 border shadow-sm',
                      msg.role === 'assistant'
                        ? 'bg-teal-600 text-white'
                        : 'bg-slate-100',
                    )}
                  >
                    <AvatarFallback>
                      {msg.role === 'assistant' ? (
                        <Sparkles size={16} />
                      ) : (
                        <UserCheck size={16} />
                      )}
                    </AvatarFallback>
                  </Avatar>

                  <div
                    className={cn(
                      'flex max-w-[85%] flex-col gap-3',
                      msg.role === 'user' ? 'items-end' : 'items-start',
                    )}
                  >
                    <div
                      className={cn(
                        'relative overflow-hidden rounded-2xl border shadow-sm',
                        msg.role === 'user'
                          ? 'rounded-tr-none border-teal-700 bg-teal-600 px-4 py-3 text-white'
                          : 'w-full rounded-tl-none border-slate-200 bg-white text-slate-800',
                      )}
                    >
                      {/* Texto del mensaje principal */}
                      <div
                        className={cn(
                          'text-sm leading-relaxed',
                          msg.role === 'assistant' && 'p-4',
                        )}
                      >
                        {msg.content}
                      </div>

                      {/* CONTENEDOR DE SUGERENCIAS INTEGRADO */}
                      {msg.role === 'assistant' &&
                        msg.sugerencias &&
                        msg.sugerencias.length > 0 && (
                          <div className="space-y-3 border-t bg-slate-50/50 p-3">
                            <p className="mb-1 text-[10px] font-bold text-slate-400 uppercase">
                              Mejoras disponibles:
                            </p>
                            {msg.sugerencias.map((sug: any) => (
                              <ImprovementCard
                                key={sug.id}
                                sug={sug}
                                asignaturaId={asignaturaId}
                              />
                            ))}
                          </div>
                        )}
                    </div>
                  </div>
                </div>
              ))}
              {isAiThinking && (
                <div className="animate-in fade-in slide-in-from-bottom-2 flex gap-4">
                  <Avatar className="h-9 w-9 shrink-0 border bg-teal-600 text-white shadow-sm">
                    <AvatarFallback>
                      <Sparkles size={16} className="animate-pulse" />
                    </AvatarFallback>
                  </Avatar>
                  <div className="flex flex-col items-start gap-2">
                    <div className="rounded-2xl rounded-tl-none border border-slate-200 bg-white p-4 shadow-sm">
                      <div className="flex gap-1">
                        <span className="h-1.5 w-1.5 animate-bounce rounded-full bg-slate-400 [animation-delay:-0.3s]"></span>
                        <span className="h-1.5 w-1.5 animate-bounce rounded-full bg-slate-400 [animation-delay:-0.15s]"></span>
                        <span className="h-1.5 w-1.5 animate-bounce rounded-full bg-slate-400"></span>
                      </div>
                    </div>
                    <span className="text-[10px] font-medium text-slate-400 italic">
                      La IA está analizando tu solicitud...
                    </span>
                  </div>
                </div>
              )}
              {/* Espacio extra al final para que el scroll no tape el último mensaje */}
              <div className="h-4" />
            </div>
          </ScrollArea>
        </div>

        {/* INPUT */}
        <div className="shrink-0 border-t bg-white p-4">
          <div className="relative mx-auto max-w-4xl">
            {showSuggestions && (
              <div className="animate-in fade-in slide-in-from-bottom-2 absolute bottom-full left-0 z-50 mb-2 w-72 overflow-hidden rounded-xl border bg-white shadow-2xl">
                <div className="flex justify-between border-b bg-slate-50 px-3 py-2 text-[10px] font-bold text-slate-500 uppercase">
                  <span>Filtrando campos...</span>
                  <span className="rounded bg-slate-200 px-1 text-[9px] text-slate-400">
                    ESC para cerrar
                  </span>
                </div>
                <div className="max-h-60 overflow-y-auto p-1">
                  {filteredFields.length > 0 ? (
                    filteredFields.map((field) => (
                      <button
                        key={field.key}
                        onClick={() => handleSelectField(field)}
                        className="flex w-full items-center justify-between rounded-lg px-3 py-2 text-left text-sm transition-colors hover:bg-teal-50"
                      >
                        <div className="flex flex-col">
                          <span className="font-medium text-slate-700">
                            {field.label}
                          </span>
                        </div>
                        {selectedFields.find((f) => f.key === field.key) && (
                          <Check size={14} className="text-teal-600" />
                        )}
                      </button>
                    ))
                  ) : (
                    <div className="p-4 text-center text-xs text-slate-400 italic">
                      No se encontraron coincidencias
                    </div>
                  )}
                </div>
              </div>
            )}

            <div className="flex flex-col gap-2 rounded-xl border bg-slate-50 p-2 transition-all focus-within:bg-white focus-within:ring-1 focus-within:ring-teal-500">
              {selectedFields.length > 0 && (
                <div className="flex flex-wrap gap-1.5 px-2 pt-1">
                  {selectedFields.map((field) => (
                    <div
                      key={field.key}
                      className="animate-in zoom-in-95 flex items-center gap-1 rounded-md border border-teal-200 bg-teal-50 px-2 py-0.5 text-[11px] font-bold text-teal-700 shadow-sm"
                    >
                      <Target size={10} />
                      {field.label}
                      <button
                        onClick={() => toggleField(field)}
                        className="ml-1 rounded-full p-0.5 transition-colors hover:bg-teal-200/50"
                      >
                        <X size={10} />
                      </button>
                    </div>
                  ))}
                </div>
              )}

              <div className="flex items-end gap-2">
                <Textarea
                  value={input}
                  onChange={(e) => {
                    setInput(e.target.value)
                    if (e.target.value.endsWith(':')) setShowSuggestions(true)
                    else if (showSuggestions && !e.target.value.includes(':'))
                      setShowSuggestions(false)
                  }}
                  onKeyDown={(e) => {
                    if (e.key === 'Enter' && !e.shiftKey) {
                      e.preventDefault()
                      handleSend()
                    }
                  }}
                  placeholder='Escribe ":" para referenciar un campo...'
                  className="max-h-[120px] min-h-[40px] flex-1 resize-none border-none bg-transparent text-sm shadow-none focus-visible:ring-0"
                />
                <Button
                  onClick={() => handleSend()}
                  disabled={
                    (!input.trim() && selectedFields.length === 0) || isSending
                  }
                  size="icon"
                  className="h-9 w-9 bg-teal-600 hover:bg-teal-700"
                >
                  <Send size={16} className="text-white" />
                </Button>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* PANEL DERECHO ACCIONES */}
      <div className="flex flex-[1] flex-col gap-4 overflow-y-auto pr-2">
        <h4 className="flex items-center gap-2 text-sm font-bold text-slate-800">
          <Lightbulb size={18} className="text-orange-500" /> Atajos
        </h4>
        <div className="space-y-2">
          {PRESETS.map((preset) => (
            <button
              key={preset.id}
              onClick={() => handleSend(preset.prompt)}
              className="group flex w-full items-center gap-3 rounded-xl border bg-white p-3 text-left text-sm transition-all hover:border-teal-500 hover:bg-teal-50"
            >
              <div className="rounded-lg bg-slate-100 p-2 group-hover:bg-teal-100 group-hover:text-teal-600">
                <preset.icon size={16} />
              </div>
              <span className="font-medium text-slate-700">{preset.label}</span>
            </button>
          ))}
        </div>
      </div>
      {/* --- DRAWER DE REFERENCIAS --- */}
      <Drawer open={openIA} onOpenChange={setOpenIA}>
        <DrawerContent className="fixed inset-x-0 bottom-0 mx-auto mb-4 flex h-[80vh] w-full max-w-2xl flex-col overflow-hidden rounded-2xl border bg-white shadow-2xl">
          <div className="flex items-center justify-between border-b bg-slate-50/50 px-4 py-3">
            <h2 className="text-xs font-bold tracking-wider text-slate-500 uppercase">
              Referencias para la IA
            </h2>
            <button
              onClick={() => setOpenIA(false)}
              className="text-slate-400 hover:text-slate-600"
            >
              <X size={18} />
            </button>
          </div>

          <div className="flex-1 overflow-y-auto p-4">
            <ReferenciasParaIA
              selectedArchivoIds={selectedArchivoIds}
              selectedRepositorioIds={selectedRepositorioIds}
              uploadedFiles={uploadedFiles}
              onToggleArchivo={(id, checked) => {
                setSelectedArchivoIds((prev) =>
                  checked ? [...prev, id] : prev.filter((a) => a !== id),
                )
              }}
              onToggleRepositorio={(id, checked) => {
                setSelectedRepositorioIds((prev) =>
                  checked ? [...prev, id] : prev.filter((r) => r !== id),
                )
              }}
              onFilesChange={(files) => setUploadedFiles(files)}
            />
          </div>
        </DrawerContent>
      </Drawer>
    </div>
  )
}