From 50c00293cd1b906290a2798a6052e297b781f94c Mon Sep 17 00:00:00 2001
From: "Roberto.silva" <Roberto.silva@lasalle.mx>
Date: Wed, 18 Feb 2026 15:39:24 -0600
Subject: [PATCH] Persistencia en columnas de plan fix #113

---
 .../planes/detalle/Ia/ImprovementCard.tsx     |  66 +++++++--
 src/data/api/ai.api.ts                        |  20 ++-
 src/data/hooks/useAI.ts                       |  22 ++-
 src/routes/planes/$planId/_detalle/iaplan.tsx | 134 +++++++++---------
 src/routes/planes/$planId/_detalle/index.tsx  |   1 +
 5 files changed, 157 insertions(+), 86 deletions(-)

diff --git a/src/components/planes/detalle/Ia/ImprovementCard.tsx b/src/components/planes/detalle/Ia/ImprovementCard.tsx
index a4219e0..67114b2 100644
--- a/src/components/planes/detalle/Ia/ImprovementCard.tsx
+++ b/src/components/planes/detalle/Ia/ImprovementCard.tsx
@@ -1,46 +1,92 @@
-import { Check } from 'lucide-react'
+import { Check, Loader2 } from 'lucide-react'
 import { useState } from 'react'
 
 import { Button } from '@/components/ui/button'
+import { useUpdatePlanFields } from '@/data' // Tu hook existente
 
 export const ImprovementCard = ({
   suggestions,
   onApply,
+  planId, // Necesitamos el ID
+  currentDatos, // Necesitamos los datos actuales para no sobrescribir todo el JSON
 }: {
   suggestions: Array<any>
-  onApply: (key: string, value: string) => void
+  onApply?: (key: string, value: string) => void
+  planId: string
+  currentDatos: any
 }) => {
-  // Estado para rastrear qué campos han sido aplicados
   const [appliedFields, setAppliedFields] = useState<Array<string>>([])
+  const updatePlan = useUpdatePlanFields()
 
-  const handleApply = (key: string, value: string) => {
-    onApply(key, value)
-    setAppliedFields((prev) => [...prev, key])
+  const handleApply = (key: string, newValue: string) => {
+    if (!currentDatos) return
+
+    // 1. Lógica para preparar el valor (idéntica a tu handleSave original)
+    const currentValue = currentDatos[key]
+    let finalValue: any
+
+    if (
+      typeof currentValue === 'object' &&
+      currentValue !== null &&
+      'description' in currentValue
+    ) {
+      finalValue = { ...currentValue, description: newValue }
+    } else {
+      finalValue = newValue
+    }
+
+    // 2. Construir el nuevo objeto 'datos' manteniendo lo que ya existía
+    const datosActualizados = {
+      ...currentDatos,
+      [key]: finalValue,
+    }
+
+    // 3. Ejecutar la mutación directamente aquí
+    updatePlan.mutate(
+      {
+        planId: planId as any,
+        patch: { datos: datosActualizados },
+      },
+      {
+        onSuccess: () => {
+          setAppliedFields((prev) => [...prev, key])
+          if (onApply) onApply(key, newValue)
+          console.log(`Campo ${key} guardado exitosamente`)
+        },
+      },
+    )
   }
 
   return (
     <div className="mt-2 flex w-full flex-col gap-4">
       {suggestions.map((sug) => {
         const isApplied = appliedFields.includes(sug.key)
+        const isUpdating =
+          updatePlan.isPending &&
+          updatePlan.variables.patch.datos?.[sug.key] !== undefined
 
         return (
           <div
             key={sug.key}
-            className="rounded-2xl border border-slate-100 bg-white p-5 shadow-sm"
+            className={`rounded-2xl border bg-white p-5 shadow-sm transition-all ${
+              isApplied ? 'border-teal-200 bg-teal-50/20' : 'border-slate-100'
+            }`}
           >
             <div className="mb-4 flex items-center justify-between">
               <h3 className="text-sm font-bold text-slate-900">{sug.label}</h3>
               <Button
                 size="sm"
                 onClick={() => handleApply(sug.key, sug.newValue)}
-                disabled={isApplied}
+                disabled={isApplied || !!isUpdating}
                 className={`h-8 rounded-full px-4 text-xs transition-all ${
                   isApplied
                     ? 'cursor-not-allowed bg-slate-100 text-slate-400'
                     : 'bg-[#00a189] text-white hover:bg-[#008f7a]'
                 }`}
               >
-                {isApplied ? (
+                {isUpdating ? (
+                  <Loader2 size={12} className="animate-spin" />
+                ) : isApplied ? (
                   <span className="flex items-center gap-1">
                     <Check size={12} /> Aplicado
                   </span>
@@ -53,7 +99,7 @@ export const ImprovementCard = ({
             <div
               className={`rounded-xl border p-3 text-sm transition-colors duration-300 ${
                 isApplied
-                  ? 'border-[#ccfbf1] bg-[#f0fdfa] text-slate-700'
+                  ? 'border-teal-100 bg-teal-50/50 text-slate-700'
                   : 'border-slate-200 bg-slate-50 text-slate-500'
               }`}
             >
diff --git a/src/data/api/ai.api.ts b/src/data/api/ai.api.ts
index 6d112e5..ca0c080 100644
--- a/src/data/api/ai.api.ts
+++ b/src/data/api/ai.api.ts
@@ -130,12 +130,19 @@ export async function get_chat_history(conversacionId: string) {
   return data // Retorna Array de mensajes
 }
 
-export async function archive_conversation(conversacionId: string) {
+export async function update_conversation_status(
+  conversacionId: string,
+  nuevoEstado: 'ARCHIVADA' | 'ACTIVA',
+) {
   const supabase = supabaseBrowser()
-  const { data, error } = await supabase.functions.invoke(
-    `create-chat-conversation/conversations/${conversacionId}/archive`,
-    { method: 'DELETE' },
-  )
+
+  const { data, error } = await supabase
+    .from('conversaciones_plan') // Asegúrate que el nombre de la tabla sea exacto
+    .update({ estado: nuevoEstado })
+    .eq('id', conversacionId)
+    .select()
+    .single()
+
   if (error) throw error
   return data
 }
@@ -168,8 +175,9 @@ export async function getConversationByPlan(planId: string) {
     .from('conversaciones_plan')
     .select('*')
     .eq('plan_estudio_id', planId)
-    .order('creado_en', { ascending: true })
+    .order('creado_en', { ascending: false })
   if (error) throw error
 
+  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
   return data ?? []
 }
diff --git a/src/data/hooks/useAI.ts b/src/data/hooks/useAI.ts
index 057b500..5338a52 100644
--- a/src/data/hooks/useAI.ts
+++ b/src/data/hooks/useAI.ts
@@ -5,13 +5,16 @@ import {
   ai_plan_improve,
   ai_subject_chat,
   ai_subject_improve,
-  archive_conversation,
   create_conversation,
   get_chat_history,
   getConversationByPlan,
   library_search,
+  update_conversation_status,
 } from '../api/ai.api'
 
+// eslint-disable-next-line node/prefer-node-protocol
+import type { UUID } from 'crypto'
+
 export function useAIPlanImprove() {
   return useMutation({ mutationFn: ai_plan_improve })
 }
@@ -62,13 +65,20 @@ export function useChatHistory(conversacionId?: string) {
   })
 }
 
-export function useArchiveConversation() {
-  const queryClient = useQueryClient()
+export function useUpdateConversationStatus() {
+  const qc = useQueryClient()
+
   return useMutation({
-    mutationFn: (id: string) => archive_conversation(id),
+    mutationFn: ({
+      id,
+      estado,
+    }: {
+      id: string
+      estado: 'ARCHIVADA' | 'ACTIVA'
+    }) => update_conversation_status(id, estado),
     onSuccess: () => {
-      // Opcional: limpiar datos viejos de la caché
-      queryClient.invalidateQueries({ queryKey: ['chat-history'] })
+      // Esto refresca las listas automáticamente
+      qc.invalidateQueries({ queryKey: ['conversation-by-plan'] })
     },
   })
 }
diff --git a/src/routes/planes/$planId/_detalle/iaplan.tsx b/src/routes/planes/$planId/_detalle/iaplan.tsx
index c935768..a8d6049 100644
--- a/src/routes/planes/$planId/_detalle/iaplan.tsx
+++ b/src/routes/planes/$planId/_detalle/iaplan.tsx
@@ -27,9 +27,9 @@ import { ScrollArea } from '@/components/ui/scroll-area'
 import { Textarea } from '@/components/ui/textarea'
 import {
   useAIPlanChat,
-  useArchiveConversation,
   useChatHistory,
   useConversationByPlan,
+  useUpdateConversationStatus,
 } from '@/data'
 import { usePlan } from '@/data/hooks/usePlans'
 
@@ -73,13 +73,12 @@ export const Route = createFileRoute('/planes/$planId/_detalle/iaplan')({
 
 function RouteComponent() {
   const { planId } = Route.useParams()
-
   const { data } = usePlan(planId)
   const routerState = useRouterState()
   const [openIA, setOpenIA] = useState(false)
   const [conversacionId, setConversacionId] = useState<string | null>(null)
   const { mutateAsync: sendChat, isLoading } = useAIPlanChat()
-  const { mutate: archiveChatMutation } = useArchiveConversation()
+  const { mutate: updateStatusMutation } = useUpdateConversationStatus()
 
   const [activeChatId, setActiveChatId] = useState<string | undefined>(
     undefined,
@@ -102,27 +101,12 @@ function RouteComponent() {
   const [input, setInput] = useState('')
   const [selectedFields, setSelectedFields] = useState<Array<SelectedField>>([])
   const [showSuggestions, setShowSuggestions] = useState(false)
-  // const [isLoading, setIsLoading] = useState(false)
   const [pendingSuggestion, setPendingSuggestion] = useState<any>(null)
   const queryClient = useQueryClient()
   const scrollRef = useRef<HTMLDivElement>(null)
 
-  const chatHistory = useMemo(() => {
-    return lastConversation || []
-  }, [lastConversation])
   const [showArchived, setShowArchived] = useState(false)
-  const [archivedHistory, setArchivedHistory] = useState<Array<any>>([])
-  const [allMessages, setAllMessages] = useState<{ [key: string]: Array<any> }>(
-    {
-      '1': [
-        {
-          id: 'm1',
-          role: 'assistant',
-          content: '¡Hola! Soy tu asistente de IA en este chat inicial.',
-        },
-      ],
-    },
-  )
+
   useEffect(() => {
     // 1. Si no hay ID o está cargando el historial, no hacemos nada
     if (!activeChatId || isLoadingHistory) return
@@ -205,30 +189,39 @@ function RouteComponent() {
   }
 
   const archiveChat = (e: React.MouseEvent, id: string) => {
-    e.stopPropagation() // Evita que se seleccione el chat al intentar archivarlo
+    e.stopPropagation()
 
-    archiveChatMutation(id, {
-      onSuccess: () => {
-        // 1. Invalidamos las listas para que desaparezca de activos y aparezca en archivados
-        queryClient.invalidateQueries({
-          queryKey: ['conversation-by-plan', planId],
-        })
+    updateStatusMutation(
+      { id, estado: 'ARCHIVADA' },
+      {
+        onSuccess: () => {
+          queryClient.invalidateQueries({
+            queryKey: ['conversation-by-plan', planId],
+          })
 
-        // 2. Si el chat archivado era el que tenías abierto, limpia la pantalla
-        if (activeChatId === id) {
-          setActiveChatId(undefined)
-          setMessages([])
-        }
+          if (activeChatId === id) {
+            setActiveChatId(undefined)
+            setMessages([])
+          }
+        },
       },
-    })
+    )
   }
   const unarchiveChat = (e: React.MouseEvent, id: string) => {
     e.stopPropagation()
-    const chatToRestore = archivedHistory.find((chat) => chat.id === id)
-    if (chatToRestore) {
-      setChatHistory([chatToRestore, ...chatHistory])
-      setArchivedHistory(archivedHistory.filter((chat) => chat.id !== id))
-    }
+
+    updateStatusMutation(
+      { id, estado: 'ACTIVA' },
+      {
+        onSuccess: () => {
+          // Al invalidar la query, React Query traerá la lista fresca
+          // y el chat se moverá solo de "archivados" a "activos"
+          queryClient.invalidateQueries({
+            queryKey: ['conversation-by-plan', planId],
+          })
+        },
+      },
+    )
   }
 
   // 1. Transformar datos de la API para el menú de selección
@@ -296,22 +289,20 @@ function RouteComponent() {
       }
     })
 
-    if (isAdding) {
-      setInput((prev) => {
-        // 1. Eliminamos TODOS los ":" que existan en el texto actual
-        // 2. Quitamos espacios en blanco extra al final
-        const cleanPrev = prev.replace(/:/g, '').trim()
+    setInput((prev) => {
+      // 1. Eliminamos TODOS los ":" que existan en el texto actual
+      // 2. Quitamos espacios en blanco extra al final
+      const cleanPrev = prev.replace(/:/g, '').trim()
 
-        // 3. Si el input resultante está vacío, solo ponemos la frase
-        if (cleanPrev === '') {
-          return `${field.label} `
-        }
+      // 3. Si el input resultante está vacío, solo ponemos la frase
+      if (cleanPrev === '') {
+        return `${field.label} `
+      }
 
-        // 4. Si ya había algo, lo concatenamos con un espacio
-        // Usamos un espacio simple al final para que el usuario pueda seguir escribiendo
-        return `${cleanPrev} ${field.label} `
-      })
-    }
+      // 4. Si ya había algo, lo concatenamos con un espacio
+      // Usamos un espacio simple al final para que el usuario pueda seguir escribiendo
+      return `${cleanPrev} ${field.label} `
+    })
 
     setShowSuggestions(false)
   }
@@ -368,7 +359,6 @@ function RouteComponent() {
 
       if (response.raw) {
         try {
-          // Parseamos el string JSON que viene en 'raw'
           const rawData = JSON.parse(response.raw)
 
           // Extraemos el mensaje conversacional
@@ -419,6 +409,16 @@ function RouteComponent() {
     )
   }, [selectedArchivoIds, selectedRepositorioIds, uploadedFiles])
 
+  const { activeChats, archivedChats } = useMemo(() => {
+    const allChats = lastConversation || []
+    return {
+      activeChats: allChats.filter((chat: any) => chat.estado === 'ACTIVA'),
+      archivedChats: allChats.filter(
+        (chat: any) => chat.estado === 'ARCHIVADA',
+      ),
+    }
+  }, [lastConversation])
+
   return (
     <div className="flex h-[calc(100vh-160px)] max-h-[calc(100vh-160px)] w-full gap-6 overflow-hidden p-4">
       {/* --- PANEL IZQUIERDO: HISTORIAL --- */}
@@ -453,10 +453,9 @@ function RouteComponent() {
 
         <ScrollArea className="flex-1">
           <div className="space-y-1">
-            {/* Lógica de renderizado condicional */}
             {!showArchived ? (
-              // LISTA DE CHATS ACTIVOS
-              chatHistory.map((chat) => (
+              // --- LISTA DE CHATS ACTIVOS ---
+              activeChats.map((chat) => (
                 <div
                   key={chat.id}
                   onClick={() => setActiveChatId(chat.id)}
@@ -467,7 +466,10 @@ function RouteComponent() {
                   }`}
                 >
                   <FileText size={16} className="shrink-0 opacity-40" />
-                  <span className="truncate pr-8">{chat.title}</span>
+                  {/* Usamos el primer mensaje o un título por defecto */}
+                  <span className="truncate pr-8">
+                    {chat.title || `Chat ${chat.creado_en.split('T')[0]}`}
+                  </span>
                   <button
                     onClick={(e) => archiveChat(e, chat.id)}
                     className="absolute right-2 p-1 opacity-0 transition-opacity group-hover:opacity-100 hover:text-amber-600"
@@ -478,18 +480,21 @@ function RouteComponent() {
                 </div>
               ))
             ) : (
-              // LISTA DE CHATS ARCHIVADOS
+              // --- LISTA DE CHATS ARCHIVADOS ---
               <div className="animate-in fade-in slide-in-from-left-2">
                 <p className="mb-2 px-2 text-[10px] font-bold text-slate-400 uppercase">
                   Archivados
                 </p>
-                {archivedHistory.map((chat) => (
+                {archivedChats.map((chat) => (
                   <div
                     key={chat.id}
                     className="group relative mb-1 flex w-full items-center gap-3 rounded-lg bg-slate-50/50 px-3 py-2 text-sm text-slate-400"
                   >
                     <Archive size={14} className="shrink-0 opacity-30" />
-                    <span className="truncate pr-8">{chat.title}</span>
+                    <span className="truncate pr-8">
+                      {chat.title ||
+                        `Archivado ${chat.creado_en.split('T')[0]}`}
+                    </span>
                     <button
                       onClick={(e) => unarchiveChat(e, chat.id)}
                       className="absolute right-2 p-1 opacity-0 group-hover:opacity-100 hover:text-teal-600"
@@ -499,7 +504,7 @@ function RouteComponent() {
                     </button>
                   </div>
                 ))}
-                {archivedHistory.length === 0 && (
+                {archivedChats.length === 0 && (
                   <div className="px-2 py-4 text-center">
                     <p className="text-xs text-slate-400 italic">
                       No hay archivados
@@ -558,12 +563,13 @@ function RouteComponent() {
                       <div className="mt-4">
                         <ImprovementCard
                           suggestions={msg.suggestions}
+                          planId={planId} // Del useParams()
+                          currentDatos={data?.datos} // De tu query usePlan(planId)
                           onApply={(key, val) => {
-                            console.log(`Aplicando ${val} al campo ${key}`)
-                            setSelectedFields((prev) =>
-                              prev.filter((f) => f.key !== key),
+                            // Esto es opcional, si quieres hacer algo más en la UI del chat
+                            console.log(
+                              'Evento onApply disparado desde el chat',
                             )
-                            // Aquí llamarías a tu mutación de actualizar el plan
                           }}
                         />
                       </div>
diff --git a/src/routes/planes/$planId/_detalle/index.tsx b/src/routes/planes/$planId/_detalle/index.tsx
index 38e64d2..e9899a5 100644
--- a/src/routes/planes/$planId/_detalle/index.tsx
+++ b/src/routes/planes/$planId/_detalle/index.tsx
@@ -160,6 +160,7 @@ function DatosGeneralesPage() {
     if (!data?.datos) return
 
     const datosActualizados = prepararDatosActualizados(data, campo, valor)
+    console.log(datosActualizados)
 
     updatePlan.mutate({
       planId,
-- 
2.49.1