From c15e2f941dcda3c29e3bbf3ded66086b38f2e467 Mon Sep 17 00:00:00 2001
From: "Roberto.silva" <Roberto.silva@lasalle.mx>
Date: Mon, 26 Jan 2026 13:52:12 -0600
Subject: [PATCH] Se corrigen incidencias 35, 36, 33, 32

---
 .../asignaturas/detalle/MateriaDetailPage.tsx |  82 ++++++++++--
 src/data/api/plans.api.ts                     |   2 +-
 .../planes/$planId/_detalle/documento.tsx     | 121 +++++++++---------
 .../planes/$planId/_detalle/historial.tsx     |  13 +-
 src/routes/planes/$planId/_detalle/iaplan.tsx |  86 ++++++++-----
 5 files changed, 192 insertions(+), 112 deletions(-)

diff --git a/src/components/asignaturas/detalle/MateriaDetailPage.tsx b/src/components/asignaturas/detalle/MateriaDetailPage.tsx
index e0594dd..a3b3acc 100644
--- a/src/components/asignaturas/detalle/MateriaDetailPage.tsx
+++ b/src/components/asignaturas/detalle/MateriaDetailPage.tsx
@@ -1,6 +1,7 @@
 import {
   createFileRoute,
   Link,
+  useNavigate,
   useParams,
   useRouterState,
 } from '@tanstack/react-router'
@@ -59,13 +60,17 @@ function EditableHeaderField({
   onSave: (val: string) => void
   className?: string
 }) {
+  const textValue = String(value)
+
   return (
     <input
       type="text"
-      value={String(value)}
+      value={textValue}
+      // El truco es usar el atributo "size" o calcular el ancho dinámicamente
+      style={{ width: `${Math.max(textValue.length, 1)}ch` }}
       onChange={(e) => onSave(e.target.value)}
       onBlur={(e) => onSave(e.target.value)}
-      className={` w-[${String(value).length || 1}ch] max-w-[6ch] border-none bg-transparent text-center outline-none focus:ring-2 focus:ring-blue-400 ${className ?? ''} `}
+      className={`border-none bg-transparent outline-none focus:ring-2 focus:ring-blue-400 ${className ?? ''}`}
     />
   )
 }
@@ -91,6 +96,7 @@ export default function MateriaDetailPage() {
   const [messages, setMessages] = useState<Array<IAMessage>>([])
   const [datosGenerales, setDatosGenerales] = useState({})
   const [campos, setCampos] = useState<Array<CampoEstructura>>([])
+  const [activeTab, setActiveTab] = useState('datos')
 
   // Dentro de MateriaDetailPage
   const [headerData, setHeaderData] = useState({
@@ -100,6 +106,13 @@ export default function MateriaDetailPage() {
     ciclo: 0,
   })
 
+  useEffect(() => {
+    // Si en el state de la ruta viene una pestaña específica, cámbiate a ella
+    if (state?.activeTab) {
+      setActiveTab(state.activeTab)
+    }
+  }, [state])
+
   // Sincronizar cuando llegue la API
   useEffect(() => {
     if (asignaturasApi) {
@@ -208,11 +221,23 @@ export default function MateriaDetailPage() {
 
               <div className="flex flex-wrap gap-4 text-sm text-blue-200">
                 <span className="flex items-center gap-1">
-                  <GraduationCap className="h-4 w-4" />
-                  {asignaturasApi?.planes_estudio?.datos?.nombre}
+                  <GraduationCap className="h-4 w-4 shrink-0" />
+                  {/* Eliminamos el max-w y dejamos que el flex-wrap haga su trabajo */}
+                  <EditableHeaderField
+                    value={asignaturasApi?.planes_estudio?.datos?.nombre || ''}
+                    onSave={(val) => handleUpdateHeader('plan_nombre', val)}
+                    className="min-w-[10ch] text-blue-100" // min-w para que sea clickeable si está vacío
+                  />
                 </span>
-                <span>
-                  {asignaturasApi?.planes_estudio?.carreras?.facultades?.nombre}
+                <span className="flex items-center gap-1">
+                  <EditableHeaderField
+                    value={
+                      asignaturasApi?.planes_estudio?.carreras?.facultades
+                        ?.nombre || ''
+                    }
+                    onSave={(val) => handleUpdateHeader('facultad_nombre', val)}
+                    className="min-w-[10ch] text-blue-100"
+                  />
                 </span>
               </div>
 
@@ -258,7 +283,11 @@ export default function MateriaDetailPage() {
       {/* ================= TABS ================= */}
       <section className="border-b bg-white">
         <div className="mx-auto max-w-7xl px-6">
-          <Tabs defaultValue="datos">
+          <Tabs
+            value={activeTab}
+            onValueChange={setActiveTab}
+            className="w-full"
+          >
             <TabsList className="h-auto gap-6 bg-transparent p-0">
               <TabsTrigger value="datos">Datos generales</TabsTrigger>
               <TabsTrigger value="contenido">Contenido temático</TabsTrigger>
@@ -272,7 +301,11 @@ export default function MateriaDetailPage() {
 
             {/* ================= TAB: DATOS GENERALES ================= */}
             <TabsContent value="datos">
-              <DatosGenerales data={datosGenerales} isLoading={loadingAsig} />
+              <DatosGenerales
+                data={datosGenerales}
+                isLoading={loadingAsig}
+                asignaturaId={asignaturaId}
+              />
             </TabsContent>
 
             <TabsContent value="contenido">
@@ -330,10 +363,15 @@ export default function MateriaDetailPage() {
 
 /* ================= TAB CONTENT ================= */
 interface DatosGeneralesProps {
+  asignaturaId: string
   data: AsignaturaDatos
   isLoading: boolean
 }
-function DatosGenerales({ data, isLoading }: DatosGeneralesProps) {
+function DatosGenerales({
+  data,
+  isLoading,
+  asignaturaId,
+}: DatosGeneralesProps) {
   const formatTitle = (key: string): string =>
     key.replace(/_/g, ' ').replace(/\b\w/g, (l: string) => l.toUpperCase())
 
@@ -360,7 +398,9 @@ function DatosGenerales({ data, isLoading }: DatosGeneralesProps) {
           {!isLoading &&
             Object.entries(data).map(([key, value]) => (
               <InfoCard
+                asignaturaId={asignaturaId}
                 key={key}
+                clave={key}
                 title={formatTitle(key)}
                 initialContent={value}
                 onEnhanceAI={(contenido) => {
@@ -411,6 +451,8 @@ function DatosGenerales({ data, isLoading }: DatosGeneralesProps) {
 }
 
 interface InfoCardProps {
+  asignaturaId?: string
+  clave: string
   title: string
   initialContent: any
   type?: 'text' | 'requirements' | 'evaluation'
@@ -418,6 +460,8 @@ interface InfoCardProps {
 }
 
 function InfoCard({
+  asignaturaId,
+  clave,
   title,
   initialContent,
   type = 'text',
@@ -428,11 +472,27 @@ function InfoCard({
   const [tempText, setTempText] = useState(
     type === 'text' ? initialContent : JSON.stringify(initialContent, null, 2),
   )
-
+  const navigate = useNavigate()
   const handleSave = () => {
     setData(tempText)
     setIsEditing(false)
   }
+  const handleIARequest = (data) => {
+    console.log(data)
+    console.log(asignaturaId)
+
+    navigate({
+      to: '/planes/$planId/asignaturas/$asignaturaId',
+      params: {
+        asignaturaId: asignaturaId,
+      },
+      state: {
+        activeTab: 'ia',
+        prefillCampo: data,
+        prefillContenido: data, // el contenido actual del card
+      } as any,
+    })
+  }
 
   return (
     <Card className="transition-all hover:border-slate-300">
@@ -448,7 +508,7 @@ function InfoCard({
               variant="ghost"
               size="icon"
               className="h-8 w-8 text-blue-500 hover:bg-blue-50 hover:text-blue-600"
-              onClick={() => onEnhanceAI?.(data)} // Enviamos la data actual a la IA
+              onClick={() => handleIARequest(clave)} // Enviamos la data actual a la IA
               title="Mejorar con IA"
             >
               <Sparkles className="h-4 w-4" />
diff --git a/src/data/api/plans.api.ts b/src/data/api/plans.api.ts
index a05c309..a6821b0 100644
--- a/src/data/api/plans.api.ts
+++ b/src/data/api/plans.api.ts
@@ -178,7 +178,7 @@ export async function plans_history(planId: UUID): Promise<Array<CambioPlan>> {
   const { data, error } = await supabase
     .from('cambios_plan')
     .select(
-      'id,plan_estudio_id,cambiado_por,cambiado_en,tipo,campo,valor_anterior,valor_nuevo,interaccion_ia_id',
+      'id,plan_estudio_id,cambiado_por,cambiado_en,tipo,campo,valor_anterior,valor_nuevo',
     )
     .eq('plan_estudio_id', planId)
     .order('cambiado_en', { ascending: false })
diff --git a/src/routes/planes/$planId/_detalle/documento.tsx b/src/routes/planes/$planId/_detalle/documento.tsx
index dba0d3d..782beff 100644
--- a/src/routes/planes/$planId/_detalle/documento.tsx
+++ b/src/routes/planes/$planId/_detalle/documento.tsx
@@ -8,6 +8,7 @@ import {
   Clock,
   FileJson,
 } from 'lucide-react'
+import { useCallback, useEffect, useState } from 'react'
 
 import { Button } from '@/components/ui/button'
 import { Card, CardContent } from '@/components/ui/card'
@@ -19,9 +20,34 @@ export const Route = createFileRoute('/planes/$planId/_detalle/documento')({
 
 function RouteComponent() {
   const { planId } = useParams({ from: '/planes/$planId/_detalle/documento' })
-  const handleDownloadPdf = async () => {
-    console.log('entre aqui ')
+  const [pdfUrl, setPdfUrl] = useState<string | null>(null)
+  const [isLoading, setIsLoading] = useState(true)
 
+  const loadPdfPreview = useCallback(async () => {
+    try {
+      setIsLoading(true)
+      const pdfBlob = await fetchPlanPdf({ plan_estudio_id: planId })
+      const url = window.URL.createObjectURL(pdfBlob)
+
+      // Limpiar URL anterior si existe para evitar fugas de memoria
+      if (pdfUrl) window.URL.revokeObjectURL(pdfUrl)
+
+      setPdfUrl(url)
+    } catch (error) {
+      console.error('Error cargando preview:', error)
+    } finally {
+      setIsLoading(false)
+    }
+  }, [planId])
+
+  useEffect(() => {
+    loadPdfPreview()
+    return () => {
+      if (pdfUrl) window.URL.revokeObjectURL(pdfUrl)
+    }
+  }, [loadPdfPreview])
+
+  const handleDownloadPdf = async () => {
     try {
       const pdfBlob = await fetchPlanPdf({
         plan_estudio_id: planId,
@@ -54,7 +80,12 @@ function RouteComponent() {
           </p>
         </div>
         <div className="flex gap-2">
-          <Button variant="outline" size="sm" className="gap-2">
+          <Button
+            variant="outline"
+            size="sm"
+            className="gap-2"
+            onClick={loadPdfPreview}
+          >
             <RefreshCcw size={16} /> Regenerar
           </Button>
           <Button variant="outline" size="sm" className="gap-2">
@@ -90,70 +121,42 @@ function RouteComponent() {
       </div>
 
       {/* CONTENEDOR DEL DOCUMENTO (Visor) */}
+      {/* CONTENEDOR DEL VISOR REAL */}
       <Card className="overflow-hidden border-slate-200 shadow-sm">
         <div className="flex items-center justify-between border-b bg-slate-100/50 p-2 px-4">
           <div className="flex items-center gap-2 text-xs font-medium text-slate-500">
-            <FileText size={14} />
-            Plan_Estudios_ISC_2024.pdf
+            <FileText size={14} /> Preview_Documento.pdf
           </div>
-          <Button variant="ghost" size="sm" className="h-7 gap-1 text-xs">
-            Abrir en nueva pestaña <ExternalLink size={12} />
-          </Button>
+          {pdfUrl && (
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-7 gap-1 text-xs"
+              onClick={() => window.open(pdfUrl, '_blank')}
+            >
+              Abrir en nueva pestaña <ExternalLink size={12} />
+            </Button>
+          )}
         </div>
 
-        <CardContent className="flex min-h-[800px] justify-center bg-slate-200/50 p-0 py-8">
-          {/* SIMULACIÓN DE HOJA DE PAPEL */}
-          <div className="relative min-h-[1000px] w-full max-w-[800px] border bg-white p-12 shadow-2xl md:p-16">
-            {/* Contenido del Plan */}
-            <div className="mb-12 text-center">
-              <p className="mb-1 text-xs font-bold tracking-widest text-slate-400 uppercase">
-                Universidad Tecnológica
-              </p>
-              <h2 className="text-2xl font-bold text-slate-800">
-                Plan de Estudios 2024
-              </h2>
-              <h3 className="text-lg font-semibold text-teal-700">
-                Ingeniería en Sistemas Computacionales
-              </h3>
-              <p className="mt-1 text-xs text-slate-500">
-                Facultad de Ingeniería
-              </p>
+        <CardContent className="flex min-h-[800px] justify-center bg-slate-500 p-0">
+          {isLoading ? (
+            <div className="flex flex-col items-center justify-center gap-4 text-white">
+              <RefreshCcw size={40} className="animate-spin opacity-50" />
+              <p className="animate-pulse">Generando vista previa del PDF...</p>
             </div>
-
-            <div className="space-y-8 text-slate-700">
-              <section>
-                <h4 className="mb-2 text-sm font-bold">1. Objetivo General</h4>
-                <p className="text-justify text-sm leading-relaxed">
-                  Formar profesionales altamente capacitados en el desarrollo de
-                  soluciones tecnológicas innovadoras, con sólidos conocimientos
-                  en programación, bases de datos, redes y seguridad
-                  informática.
-                </p>
-              </section>
-
-              <section>
-                <h4 className="mb-2 text-sm font-bold">2. Perfil de Ingreso</h4>
-                <p className="text-justify text-sm leading-relaxed">
-                  Egresados de educación media superior con conocimientos
-                  básicos de matemáticas, razonamiento lógico y habilidades de
-                  comunicación. Interés por la tecnología y la resolución de
-                  problemas.
-                </p>
-              </section>
-
-              <section>
-                <h4 className="mb-2 text-sm font-bold">3. Perfil de Egreso</h4>
-                <p className="text-justify text-sm leading-relaxed">
-                  Profesional capaz de diseñar, desarrollar e implementar
-                  sistemas de software de calidad, administrar infraestructuras
-                  de red y liderar proyectos tecnológicos multidisciplinarios.
-                </p>
-              </section>
+          ) : pdfUrl ? (
+            /* 3. VISOR DE PDF REAL */
+            <iframe
+              src={`${pdfUrl}#toolbar=0&navpanes=0`}
+              className="h-[1000px] w-full max-w-[1000px] border-none shadow-2xl"
+              title="PDF Preview"
+            />
+          ) : (
+            <div className="flex items-center justify-center p-20 text-slate-400">
+              No se pudo cargar la vista previa.
             </div>
-
-            {/* Marca de agua o decoración lateral (opcional) */}
-            <div className="absolute top-0 left-0 h-full w-1 bg-slate-100" />
-          </div>
+          )}
         </CardContent>
       </Card>
     </div>
diff --git a/src/routes/planes/$planId/_detalle/historial.tsx b/src/routes/planes/$planId/_detalle/historial.tsx
index b29004d..f3d7ce2 100644
--- a/src/routes/planes/$planId/_detalle/historial.tsx
+++ b/src/routes/planes/$planId/_detalle/historial.tsx
@@ -1,5 +1,6 @@
-import { useMemo, useState } from 'react'
 import { createFileRoute } from '@tanstack/react-router'
+import { format, formatDistanceToNow, parseISO } from 'date-fns'
+import { es } from 'date-fns/locale'
 import {
   GitBranch,
   Edit3,
@@ -12,19 +13,17 @@ import {
   History,
   Calendar,
 } from 'lucide-react'
+import { useMemo, useState } from 'react'
+
 import { Badge } from '@/components/ui/badge'
 import { Card, CardContent } from '@/components/ui/card'
-import { Avatar, AvatarFallback } from '@/components/ui/avatar'
 import {
   Dialog,
   DialogContent,
   DialogHeader,
   DialogTitle,
 } from '@/components/ui/dialog'
-import { Button } from '@/components/ui/button'
 import { usePlanHistorial } from '@/data/hooks/usePlans'
-import { format, formatDistanceToNow, parseISO } from 'date-fns'
-import { es } from 'date-fns/locale'
 
 export const Route = createFileRoute('/planes/$planId/_detalle/historial')({
   component: RouteComponent,
@@ -58,9 +57,7 @@ const getEventConfig = (tipo: string, campo: string) => {
 
 function RouteComponent() {
   const { planId } = Route.useParams()
-  const { data: rawData, isLoading } = usePlanHistorial(
-    '0e0aea4d-b8b4-4e75-8279-6224c3ac769f',
-  )
+  const { data: rawData, isLoading } = usePlanHistorial(planId)
 
   // ESTADOS PARA EL MODAL
   const [selectedEvent, setSelectedEvent] = useState<any>(null)
diff --git a/src/routes/planes/$planId/_detalle/iaplan.tsx b/src/routes/planes/$planId/_detalle/iaplan.tsx
index dea5a3d..255efb4 100644
--- a/src/routes/planes/$planId/_detalle/iaplan.tsx
+++ b/src/routes/planes/$planId/_detalle/iaplan.tsx
@@ -106,7 +106,7 @@ function RouteComponent() {
       if (field && !selectedFields.find((sf) => sf.key === field.key)) {
         setSelectedFields([field])
       }
-      setInput(`Mejora este campo: `)
+      setInput(`Mejora este campo: [${field?.label}] `)
     }
   }, [availableFields])
 
@@ -121,46 +121,85 @@ function RouteComponent() {
     }
   }
 
+  const injectFieldsIntoInput = (
+    input: string,
+    fields: Array<SelectedField>,
+  ) => {
+    const baseText = input.replace(/\[[^\]]+]/g, '').trim()
+
+    const tags = fields.map((f) => `[${f.label}]`).join(' ')
+
+    return `${baseText} ${tags}`.trim()
+  }
   const toggleField = (field: SelectedField) => {
-    setSelectedFields((prev) =>
-      prev.find((f) => f.key === field.key)
-        ? prev.filter((f) => f.key !== field.key)
-        : [...prev, field],
-    )
-    if (input.endsWith(':')) setInput(input.slice(0, -1))
+    setSelectedFields((prev) => {
+      let nextFields
+
+      if (prev.find((f) => f.key === field.key)) {
+        nextFields = prev.filter((f) => f.key !== field.key)
+      } else {
+        nextFields = [...prev, field]
+      }
+
+      setInput((prevInput) =>
+        injectFieldsIntoInput(prevInput || 'Mejora este campo:', nextFields),
+      )
+
+      return nextFields
+    })
+
     setShowSuggestions(false)
   }
+  const buildPrompt = (userInput: string) => {
+    if (selectedFields.length === 0) return userInput
+
+    const fieldsText = selectedFields
+      .map((f) => `- ${f.label}: ${f.value || '(sin contenido)'}`)
+      .join('\n')
+
+    return `
+${userInput || 'Mejora los siguientes campos:'}
+
+Campos a analizar:
+${fieldsText}
+`.trim()
+  }
 
   const handleSend = async (promptOverride?: string) => {
-    const textToSend = promptOverride || input
-    if (!textToSend.trim() && selectedFields.length === 0) return
+    const rawText = promptOverride || input
+    if (!rawText.trim() && selectedFields.length === 0) return
+
+    const finalPrompt = buildPrompt(rawText)
 
     const userMsg = {
       id: Date.now().toString(),
       role: 'user',
-      content: textToSend,
+      content: finalPrompt,
     }
+
     setMessages((prev) => [...prev, userMsg])
     setInput('')
     setIsLoading(true)
 
-    // Aquí simularías la llamada a la API enviando 'selectedFields' como contexto
     setTimeout(() => {
       const mockText =
         'Sugerencia generada basada en los campos seleccionados...'
+
       setMessages((prev) => [
         ...prev,
         {
           id: Date.now().toString(),
           role: 'assistant',
-          content: `He analizado ${selectedFields.length > 0 ? selectedFields.map((f) => f.label).join(', ') : 'tu solicitud'}. Aquí tienes una propuesta:\n\n${mockText}`,
+          content: `He analizado ${selectedFields
+            .map((f) => f.label)
+            .join(', ')}. Aquí tienes una propuesta:\n\n${mockText}`,
         },
       ])
+
       setPendingSuggestion({ text: mockText })
       setIsLoading(false)
     }, 1200)
   }
-
   return (
     <div className="flex h-[calc(100vh-160px)] max-h-[calc(100vh-160px)] w-full gap-6 overflow-hidden p-4">
       {/* PANEL DE CHAT PRINCIPAL */}
@@ -169,27 +208,8 @@ function RouteComponent() {
         <div className="shrink-0 border-b bg-white p-3">
           <div className="flex flex-wrap items-center gap-2">
             <span className="text-[10px] font-bold text-slate-400 uppercase">
-              Campos a mejorar:
+              Mejorar con IA
             </span>
-            {selectedFields.map((field) => (
-              <div
-                key={field.key}
-                className="animate-in zoom-in-95 flex items-center gap-1.5 rounded-lg border border-teal-100 bg-teal-50 px-2 py-1 text-xs font-medium text-teal-700"
-              >
-                {field.label}
-                <button
-                  onClick={() => toggleField(field)}
-                  className="hover:text-red-500"
-                >
-                  <X size={12} />
-                </button>
-              </div>
-            ))}
-            {selectedFields.length === 0 && (
-              <span className="text-xs text-slate-400 italic">
-                Escribe ":" para añadir campos
-              </span>
-            )}
           </div>
         </div>