Generación de sugerencias y persistencia en BDD funcional. Falta afinar detalles

src/components/asignaturas/detalle/BibliographyItem.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable jsx-a11y/click-events-have-key-events */
-/* eslint-disable jsx-a11y/label-has-associated-control */
+
 /* eslint-disable jsx-a11y/no-static-element-interactions */
-import { useParams } from '@tanstack/react-router'
+import { useNavigate, useParams } from '@tanstack/react-router'
 import { Plus, Search, BookOpen, Trash2, Library, Edit3 } from 'lucide-react'
 import { useState } from 'react'
 
@@ -54,7 +54,8 @@ export interface BibliografiaEntry {
 }
 
 export function BibliographyItem() {
-  const { asignaturaId } = useParams({
+  const navigate = useNavigate()
+  const { planId, asignaturaId } = useParams({
     from: '/planes/$planId/asignaturas/$asignaturaId',
   })
 
@@ -68,13 +69,9 @@ export function BibliographyItem() {
   const { mutate: eliminarBibliografia } = useDeleteBibliografia(asignaturaId)
 
   // --- 3. Estados de UI (Solo para diálogos y edición) ---
-  const [isAddDialogOpen, setIsAddDialogOpen] = useState(false)
   const [isLibraryDialogOpen, setIsLibraryDialogOpen] = useState(false)
   const [deleteId, setDeleteId] = useState<string | null>(null)
   const [editingId, setEditingId] = useState<string | null>(null)
-  const [newEntryType, setNewEntryType] = useState<'BASICA' | 'COMPLEMENTARIA'>(
-    'BASICA',
-  )
 
   console.log('Datos actuales en el front:', bibliografia)
   // --- 4. Derivación de datos (Se calculan en cada render) ---
@@ -85,20 +82,6 @@ export function BibliographyItem() {
 
   // --- Handlers Conectados a la Base de Datos ---
 
-  const handleAddManual = (cita: string) => {
-    crearBibliografia(
-      {
-        asignatura_id: asignaturaId,
-        tipo: newEntryType,
-        cita,
-        tipo_fuente: 'MANUAL',
-      },
-      {
-        onSuccess: () => setIsAddDialogOpen(false),
-      },
-    )
-  }
-
   const handleAddFromLibrary = (
     resource: any,
     tipo: 'BASICA' | 'COMPLEMENTARIA',
@@ -179,20 +162,17 @@ export function BibliographyItem() {
             </DialogContent>
           </Dialog>
 
-          <Dialog open={isAddDialogOpen} onOpenChange={setIsAddDialogOpen}>
-            <DialogTrigger asChild>
-              <Button variant="outline">
-                <Plus className="mr-2 h-4 w-4" /> Añadir manual
-              </Button>
-            </DialogTrigger>
-            <DialogContent>
-              <AddManualDialog
-                tipo={newEntryType}
-                onTypeChange={setNewEntryType}
-                onAdd={handleAddManual}
-              />
-            </DialogContent>
-          </Dialog>
+          <Button
+            onClick={() =>
+              navigate({
+                to: `/planes/${planId}/asignaturas/${asignaturaId}/bibliografia/nueva`,
+                resetScroll: false,
+              })
+            }
+            className="ring-offset-background bg-primary text-primary-foreground hover:bg-primary/90 inline-flex h-11 items-center justify-center gap-2 rounded-md px-8 text-sm font-medium shadow-md transition-colors"
+          >
+            <Plus className="mr-2 h-4 w-4" /> Agregar Bibliografía
+          </Button>
         </div>
       </div>
 
@@ -364,49 +344,6 @@ function BibliografiaCard({
   )
 }
 
-function AddManualDialog({ tipo, onTypeChange, onAdd }: any) {
-  const [cita, setCita] = useState('')
-  return (
-    <div className="space-y-4 py-4">
-      <DialogHeader>
-        <DialogTitle>Referencia Manual</DialogTitle>
-      </DialogHeader>
-      <div className="space-y-2">
-        <label className="text-xs font-bold text-slate-500 uppercase">
-          Tipo
-        </label>
-        <Select value={tipo} onValueChange={onTypeChange}>
-          <SelectTrigger>
-            <SelectValue />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="BASICA">Básica</SelectItem>
-            <SelectItem value="COMPLEMENTARIA">Complementaria</SelectItem>
-          </SelectContent>
-        </Select>
-      </div>
-      <div className="space-y-2">
-        <label className="text-xs font-bold text-slate-500 uppercase">
-          Cita APA
-        </label>
-        <Textarea
-          value={cita}
-          onChange={(e) => setCita(e.target.value)}
-          placeholder="Autor, A. (Año). Título..."
-          className="min-h-[120px]"
-        />
-      </div>
-      <Button
-        onClick={() => onAdd(cita)}
-        disabled={!cita.trim()}
-        className="w-full bg-blue-600"
-      >
-        Añadir a la lista
-      </Button>
-    </div>
-  )
-}
-
 function LibrarySearchDialog({ resources, onSelect, existingIds }: any) {
   const [search, setSearch] = useState('')
   const [tipo, setTipo] = useState<'BASICA' | 'COMPLEMENTARIA'>('BASICA')

src/data/api/subjects.api.ts

@@ -29,6 +29,9 @@ const EDGE = {
   subjects_clone_from_existing: 'subjects_clone_from_existing',
   subjects_import_from_file: 'subjects_import_from_file',
 
+  // Bibliografía
+  buscar_bibliografia: 'buscar-bibliografia',
+
   subjects_update_fields: 'subjects_update_fields',
   subjects_update_bibliografia: 'subjects_update_bibliografia',
 
@@ -36,6 +39,69 @@ const EDGE = {
   subjects_get_document: 'subjects_get_document',
 } as const
 
+export type BuscarBibliografiaRequest = {
+  searchTerms: {
+    q: string
+    maxResults: number
+    orderBy?: 'newest' | 'relevance'
+    [k: string]: unknown
+  }
+}
+
+export type GoogleBooksVolume = {
+  kind?: 'books#volume'
+  id: string
+  etag?: string
+  selfLink?: string
+  volumeInfo?: {
+    title?: string
+    subtitle?: string
+    authors?: Array<string>
+    publisher?: string
+    publishedDate?: string
+    description?: string
+    industryIdentifiers?: Array<{ type?: string; identifier?: string }>
+    pageCount?: number
+    categories?: Array<string>
+    language?: string
+    previewLink?: string
+    infoLink?: string
+    canonicalVolumeLink?: string
+    imageLinks?: {
+      smallThumbnail?: string
+      thumbnail?: string
+      small?: string
+      medium?: string
+      large?: string
+      extraLarge?: string
+    }
+  }
+  searchInfo?: {
+    textSnippet?: string
+  }
+  [k: string]: unknown
+}
+
+export async function buscar_bibliografia(
+  input: BuscarBibliografiaRequest,
+): Promise<Array<GoogleBooksVolume>> {
+  const q = input?.searchTerms?.q
+  const maxResults = input?.searchTerms?.maxResults
+
+  if (typeof q !== 'string' || q.trim().length < 1) {
+    throw new Error('q es requerido')
+  }
+  if (!Number.isInteger(maxResults) || maxResults < 0 || maxResults > 40) {
+    throw new Error('maxResults debe ser entero entre 0 y 40')
+  }
+
+  return await invokeEdge<Array<GoogleBooksVolume>>(
+    EDGE.buscar_bibliografia,
+    input,
+    { headers: { 'Content-Type': 'application/json' } },
+  )
+}
+
 export type ContenidoTemaApi =
   | string
   | {

src/routes/planes/$planId/asignaturas/$asignaturaId/bibliografia.tsx

@@ -1,6 +1,4 @@
-import { createFileRoute } from '@tanstack/react-router'
-
-import { BibliographyItem } from '@/components/asignaturas/detalle/BibliographyItem'
+import { createFileRoute, Outlet } from '@tanstack/react-router'
 
 export const Route = createFileRoute(
   '/planes/$planId/asignaturas/$asignaturaId/bibliografia',
@@ -9,5 +7,5 @@ export const Route = createFileRoute(
 })
 
 function RouteComponent() {
-  return <BibliographyItem />
+  return <Outlet />
 }

src/routes/planes/$planId/asignaturas/$asignaturaId/bibliografia/index.tsx

@@ -0,0 +1,13 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+import { BibliographyItem } from '@/components/asignaturas/detalle/BibliographyItem'
+
+export const Route = createFileRoute(
+  '/planes/$planId/asignaturas/$asignaturaId/bibliografia/',
+)({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  return <BibliographyItem />
+}

src/routes/planes/$planId/asignaturas/$asignaturaId/bibliografia/nueva.tsx

@@ -0,0 +1,19 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+import { NuevaBibliografiaModalContainer } from '@/features/bibliografia/nueva/NuevaBibliografiaModalContainer'
+
+export const Route = createFileRoute(
+  '/planes/$planId/asignaturas/$asignaturaId/bibliografia/nueva',
+)({
+  component: NuevaBibliografiaModal,
+})
+
+function NuevaBibliografiaModal() {
+  const { planId, asignaturaId } = Route.useParams()
+  return (
+    <NuevaBibliografiaModalContainer
+      planId={planId}
+      asignaturaId={asignaturaId}
+    />
+  )
+}

src/types/citeproc.d.ts

@@ -0,0 +1,12 @@
+declare module 'citeproc' {
+  const CSL: {
+    Engine: new (
+      sys: any,
+      style: string,
+      lang?: string,
+      forceLang?: boolean,
+    ) => any
+  }
+
+  export default CSL
+}