# GenExámenes IA — Frontend

Interfaz web en **React + Vite** para el generador de exámenes con IA. Consume
la API del backend (FastAPI) y cubre todo el flujo: autenticación, plantillas,
material de contexto, imágenes, generación con IA, gestión de preguntas y
exportación a Moodle.

## Stack

- **React 18** + **React Router 6**
- **Vite 5** (build y dev server)
- **Axios** con interceptores para el token JWT y el manejo unificado de errores HTTP

## Estructura

```
src/
  api/         Cliente axios y un módulo por recurso (auth, templates, materials, images, ...)
  components/  Componentes reutilizables (UI, layout, AuthImage, QuestionCard, ...)
  context/     AuthContext (sesión) y ToastContext (notificaciones)
  hooks/       useGoogleSignIn (login con Google opcional)
  pages/       Páginas y pestañas del detalle de plantilla
  utils/       Constantes y formateadores
```

## Desarrollo local

Requisitos: Node 20+ y el backend corriendo en `http://sinbad2.ujaen.es:8074`.

```bash
cd frontend
cp .env.example .env      # ajusta VITE_API_URL si es necesario
npm install
npm run dev               # http://sinbad2.ujaen.es:8075
```

## Variables de entorno

| Variable                | Descripción                                              |
| ----------------------- | -------------------------------------------------------- |
| `VITE_APP_BASE_PATH`    | Base pública de la SPA (debe terminar en `/`). En producción UJA: `/deckofcars/generadorexamenesllm/`. |
| `VITE_API_URL`          | URL base de la API. Si se deja vacía, usa la misma base pública de la app. |
| `VITE_GOOGLE_CLIENT_ID` | (Opcional) Client ID de Google. Si está vacío, se oculta el botón de Google. |

> Las variables `VITE_*` se incrustan en el build, por lo que apuntan al backend
> tal y como lo verá el navegador del usuario.

## Build de producción

```bash
npm run build     # genera dist/
npm run preview   # sirve el build localmente
```

## Docker

El `docker-compose.yml` de la raíz construye el frontend con un build multi-stage
(Node → Nginx) y lo publica en `http://sinbad2.ujaen.es:8075`:

```bash
docker compose up --build
```

Las variables `VITE_APP_BASE_PATH`, `VITE_API_URL` y `VITE_GOOGLE_CLIENT_ID` pueden pasarse como
variables de entorno al ejecutar `docker compose`.

## Despliegue HTTPS en subruta (Sinbad2)

Para ejecutarlo detrás de Apache en `https://sinbad2.ujaen.es/deckofcars` con:

```apache
ProxyPass        /deckofcars/generadorexamenesllm  http://host.docker.internal:8075/
ProxyPassReverse /deckofcars/generadorexamenesllm  http://host.docker.internal:8075/
```

usa estos valores de build:

```env
VITE_APP_BASE_PATH=/deckofcars/generadorexamenesllm/
VITE_API_URL=
```

Con esto, el frontend sirve assets/rutas bajo `/deckofcars/generadorexamenesllm` y consume la API por HTTPS en la misma base (sin mixed content).

## Manejo de errores

Todas las respuestas de error del backend siguen el formato
`{ "error": { "code", "message", "details" } }`. El interceptor de Axios las
normaliza a una `ApiError` y la UI las muestra mediante *toasts*. Un `401`
global cierra la sesión automáticamente.