267 lines
9.8 KiB
TypeScript
267 lines
9.8 KiB
TypeScript
import { useNavigate } from '@tanstack/react-router'
|
|
import * as Icons from 'lucide-react'
|
|
|
|
import { useNuevoPlanWizard } from './hooks/useNuevoPlanWizard'
|
|
|
|
import type { NewPlanWizardState } from './types'
|
|
|
|
import { PasoBasicosForm } from '@/components/planes/wizard/PasoBasicosForm/PasoBasicosForm'
|
|
import { PasoDetallesPanel } from '@/components/planes/wizard/PasoDetallesPanel/PasoDetallesPanel'
|
|
import { PasoModoCardGroup } from '@/components/planes/wizard/PasoModoCardGroup'
|
|
import { PasoResumenCard } from '@/components/planes/wizard/PasoResumenCard'
|
|
import { WizardControls } from '@/components/planes/wizard/WizardControls'
|
|
import { WizardHeader } from '@/components/planes/wizard/WizardHeader'
|
|
import { defineStepper } from '@/components/stepper'
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from '@/components/ui/card'
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from '@/components/ui/dialog'
|
|
import { useGeneratePlanAI } from '@/data/hooks/usePlans'
|
|
|
|
// Mock de permisos/rol
|
|
const auth_get_current_user_role = () => 'JEFE_CARRERA' as const
|
|
|
|
const Wizard = defineStepper(
|
|
{
|
|
id: 'modo',
|
|
title: 'Método',
|
|
description: 'Selecciona cómo crearás el plan',
|
|
},
|
|
{
|
|
id: 'basicos',
|
|
title: 'Datos básicos',
|
|
description: 'Nombre, carrera, nivel y ciclos',
|
|
},
|
|
{ id: 'detalles', title: 'Detalles', description: 'IA, clonado o archivos' },
|
|
{ id: 'resumen', title: 'Resumen', description: 'Confirma y crea el plan' },
|
|
)
|
|
|
|
export default function NuevoPlanModalContainer() {
|
|
const navigate = useNavigate()
|
|
const role = auth_get_current_user_role()
|
|
const generatePlanAI = useGeneratePlanAI()
|
|
// const persistPlanFromAI = usePersistPlanFromAI()
|
|
|
|
const {
|
|
wizard,
|
|
setWizard,
|
|
canContinueDesdeModo,
|
|
canContinueDesdeBasicos,
|
|
canContinueDesdeDetalles,
|
|
} = useNuevoPlanWizard()
|
|
|
|
const handleClose = () => {
|
|
navigate({ to: '/planes', resetScroll: false })
|
|
}
|
|
|
|
const crearPlan = async () => {
|
|
setWizard(
|
|
(w: NewPlanWizardState): NewPlanWizardState => ({
|
|
...w,
|
|
isLoading: true,
|
|
errorMessage: null,
|
|
}),
|
|
)
|
|
|
|
try {
|
|
if (wizard.tipoOrigen === 'IA') {
|
|
const tipoCicloSafe = (wizard.datosBasicos.tipoCiclo ||
|
|
'Semestre') as any
|
|
const numCiclosSafe =
|
|
typeof wizard.datosBasicos.numCiclos === 'number'
|
|
? wizard.datosBasicos.numCiclos
|
|
: 1
|
|
|
|
const aiInput = {
|
|
datosBasicos: {
|
|
nombrePlan: wizard.datosBasicos.nombrePlan,
|
|
carreraId: wizard.datosBasicos.carreraId,
|
|
facultadId: wizard.datosBasicos.facultadId || undefined,
|
|
nivel: wizard.datosBasicos.nivel as string,
|
|
tipoCiclo: tipoCicloSafe,
|
|
numCiclos: numCiclosSafe,
|
|
estructuraPlanId: wizard.datosBasicos.estructuraPlanId as string,
|
|
},
|
|
iaConfig: {
|
|
descripcionEnfoque: wizard.iaConfig?.descripcionEnfoque || '',
|
|
notasAdicionales: wizard.iaConfig?.notasAdicionales || '',
|
|
archivosReferencia: wizard.iaConfig?.archivosReferencia || [],
|
|
repositoriosIds: wizard.iaConfig?.repositoriosReferencia || [],
|
|
archivosAdjuntos: wizard.iaConfig?.archivosAdjuntos || [],
|
|
},
|
|
}
|
|
|
|
const response = await generatePlanAI.mutateAsync(aiInput as any)
|
|
// const createdPlan = await persistPlanFromAI.mutateAsync({
|
|
// jsonPlan: generatedJson,
|
|
// })
|
|
// navigate({ to: `/planes/${createdPlan.id}` })
|
|
console.log('Plan generado por IA:', response)
|
|
return
|
|
}
|
|
|
|
// Fallback: comportamiento previo para otros modos (mock IDs)
|
|
await new Promise((r) => setTimeout(r, 900))
|
|
const nuevoId = (() => {
|
|
if (wizard.tipoOrigen === 'MANUAL') return 'plan_new_manual_001'
|
|
if (
|
|
wizard.tipoOrigen === 'CLONADO_INTERNO' ||
|
|
wizard.tipoOrigen === 'CLONADO_TRADICIONAL'
|
|
)
|
|
return 'plan_new_clone_001'
|
|
return 'plan_new_import_001'
|
|
})()
|
|
navigate({ to: `/planes/${nuevoId}` })
|
|
} catch (err: any) {
|
|
setWizard((w) => ({
|
|
...w,
|
|
isLoading: false,
|
|
errorMessage: err?.message ?? 'Error generando el plan con IA',
|
|
}))
|
|
} finally {
|
|
setWizard((w) => ({ ...w, isLoading: false }))
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Dialog open={true} onOpenChange={(open) => !open && handleClose()}>
|
|
<DialogContent
|
|
className="flex h-[90vh] w-[calc(100%-2rem)] flex-col gap-0 overflow-hidden p-0 sm:max-w-4xl"
|
|
onInteractOutside={(e) => {
|
|
e.preventDefault()
|
|
}}
|
|
>
|
|
{role !== 'JEFE_CARRERA' ? (
|
|
<>
|
|
<DialogHeader className="flex-none border-b p-6">
|
|
<DialogTitle>Nuevo plan de estudios</DialogTitle>
|
|
</DialogHeader>
|
|
<div className="flex-1 p-6">
|
|
<Card className="border-destructive/40">
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2">
|
|
<Icons.ShieldAlert className="text-destructive h-5 w-5" />
|
|
Sin permisos
|
|
</CardTitle>
|
|
<CardDescription>
|
|
No tienes permisos para crear planes de estudio.
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="flex justify-end">
|
|
<button
|
|
className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground rounded-md border px-3 py-2 text-sm opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-none"
|
|
onClick={handleClose}
|
|
>
|
|
Volver
|
|
</button>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</>
|
|
) : (
|
|
<Wizard.Stepper.Provider
|
|
initialStep={Wizard.utils.getFirst().id}
|
|
className="flex h-full flex-col"
|
|
>
|
|
{({ methods }) => {
|
|
const currentIndex = Wizard.utils.getIndex(methods.current.id) + 1
|
|
const totalSteps = Wizard.steps.length
|
|
const nextStep = Wizard.steps[currentIndex] ?? {
|
|
title: '',
|
|
description: '',
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<WizardHeader
|
|
currentIndex={currentIndex}
|
|
totalSteps={totalSteps}
|
|
currentTitle={methods.current.title}
|
|
currentDescription={methods.current.description}
|
|
nextTitle={nextStep.title}
|
|
onClose={handleClose}
|
|
Wizard={Wizard}
|
|
/>
|
|
|
|
<div className="flex-1 overflow-y-auto bg-gray-50/30 p-6">
|
|
<div className="mx-auto max-w-3xl">
|
|
{Wizard.utils.getIndex(methods.current.id) === 0 && (
|
|
<Wizard.Stepper.Panel>
|
|
<PasoModoCardGroup
|
|
wizard={wizard}
|
|
onChange={setWizard}
|
|
/>
|
|
</Wizard.Stepper.Panel>
|
|
)}
|
|
{Wizard.utils.getIndex(methods.current.id) === 1 && (
|
|
<Wizard.Stepper.Panel>
|
|
<PasoBasicosForm
|
|
wizard={wizard}
|
|
onChange={setWizard}
|
|
/>
|
|
</Wizard.Stepper.Panel>
|
|
)}
|
|
{Wizard.utils.getIndex(methods.current.id) === 2 && (
|
|
<Wizard.Stepper.Panel>
|
|
<PasoDetallesPanel
|
|
wizard={wizard}
|
|
onChange={setWizard}
|
|
isLoading={wizard.isLoading}
|
|
/>
|
|
</Wizard.Stepper.Panel>
|
|
)}
|
|
{Wizard.utils.getIndex(methods.current.id) === 3 && (
|
|
<Wizard.Stepper.Panel>
|
|
<PasoResumenCard wizard={wizard} />
|
|
</Wizard.Stepper.Panel>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex-none border-t bg-white p-6">
|
|
<Wizard.Stepper.Controls>
|
|
<WizardControls
|
|
errorMessage={wizard.errorMessage}
|
|
onPrev={() => methods.prev()}
|
|
onNext={() => methods.next()}
|
|
onCreate={crearPlan}
|
|
disablePrev={
|
|
Wizard.utils.getIndex(methods.current.id) === 0 ||
|
|
wizard.isLoading
|
|
}
|
|
disableNext={
|
|
wizard.isLoading ||
|
|
(Wizard.utils.getIndex(methods.current.id) === 0 &&
|
|
!canContinueDesdeModo) ||
|
|
(Wizard.utils.getIndex(methods.current.id) === 1 &&
|
|
!canContinueDesdeBasicos) ||
|
|
(Wizard.utils.getIndex(methods.current.id) === 2 &&
|
|
!canContinueDesdeDetalles)
|
|
}
|
|
disableCreate={wizard.isLoading}
|
|
isLastStep={
|
|
Wizard.utils.getIndex(methods.current.id) >=
|
|
Wizard.steps.length - 1
|
|
}
|
|
/>
|
|
</Wizard.Stepper.Controls>
|
|
</div>
|
|
</>
|
|
)
|
|
}}
|
|
</Wizard.Stepper.Provider>
|
|
)}
|
|
</DialogContent>
|
|
</Dialog>
|
|
)
|
|
}
|