'use client';

import { useState, useEffect } from 'react';
import { useSession } from 'next-auth/react';
import { useRouter } from 'next/navigation';
import { Button } from '@/components/ui/button';
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { ArrowLeft, Save } from 'lucide-react';
import { toast } from 'sonner';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';

export default function NuevoAlumnoPage() {
  const { data: session, status } = useSession();
  const router = useRouter();
  const [loading, setLoading] = useState(false);
  
  const [formData, setFormData] = useState({
    // Datos del Alumno
    rut: '',
    nombre: '',
    apellido: '',
    fechaNacimiento: '',
    direccion: '',
    telefono: '',
    email: '',
    categoria: '', // Año de nacimiento
    // Datos del Apoderado
    nombreApoderado: '',
    rutApoderado: '',
    telefonoApoderado: '',
    emailApoderado: '',
    relacionApoderado: 'Padre/Madre',
  });

  useEffect(() => {
    if (status === 'unauthenticated') {
      router.push('/auth/signin');
    }
  }, [status, router]);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);

    // Validaciones básicas
    if (!formData.rut || !formData.nombre || !formData.apellido || !formData.fechaNacimiento || !formData.categoria) {
      toast.error('Por favor completa todos los campos obligatorios del alumno');
      setLoading(false);
      return;
    }

    if (!formData.nombreApoderado || !formData.rutApoderado || !formData.telefonoApoderado) {
      toast.error('Por favor completa todos los campos obligatorios del apoderado');
      setLoading(false);
      return;
    }

    try {
      const response = await fetch('/api/alumnos', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          usuario: {
            rut: formData.rut,
            nombres: formData.nombre,
            apellidos: formData.apellido,
            fechaNacimiento: formData.fechaNacimiento,
            telefono: formData.telefono ? [formData.telefono] : [],
            email: formData.email || `${formData.rut.replace('-', '')}@temporal.com`,
            direccionCalle: formData.direccion || 'Calle Principal',
            direccionNumero: '123',
            direccionComuna: 'Comuna',
            direccionRegion: 'Región Metropolitana',
            clave: 'temporal123', // Contraseña temporal
          },
          alumno: {
            categoria: formData.categoria, // Año de nacimiento
          },
          apoderado: {
            nombres: formData.nombreApoderado.split(' ')[0] || formData.nombreApoderado,
            apellidos: formData.nombreApoderado.split(' ').slice(1).join(' ') || 'Apellido',
            rut: formData.rutApoderado,
            fechaNacimiento: new Date().toISOString().split('T')[0], // Fecha temporal
            direccionCalle: 'Calle Principal',
            direccionNumero: '123',
            direccionComuna: 'Comuna',
            direccionRegion: 'Región Metropolitana',
            telefono: formData.telefonoApoderado ? [formData.telefonoApoderado] : [],
            email: formData.emailApoderado ? [formData.emailApoderado] : [],
            relacionConAlumno: formData.relacionApoderado,
          },
        }),
      });

      if (response.ok) {
        toast.success('Alumno creado exitosamente');
        router.push('/dashboard/alumnos');
      } else {
        const error = await response.json();
        toast.error(error.error || error.message || 'Error al crear el alumno');
      }
    } catch (error) {
      toast.error('Error de conexión');
    } finally {
      setLoading(false);
    }
  };

  if (status === 'loading') {
    return (
      <div className="flex items-center justify-center min-h-screen">
        <div className="text-lg">Cargando...</div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-gray-50">
      {/* Header */}
      <header className="bg-white shadow-sm border-b">
        <div className="max-w-7xl mx-auto px-4 py-4">
          <div className="flex items-center gap-4">
            <Button
              variant="ghost"
              size="sm"
              onClick={() => router.push('/dashboard/alumnos')}
            >
              <ArrowLeft className="w-4 h-4 mr-2" />
              Volver a Alumnos
            </Button>
          </div>
        </div>
      </header>

      {/* Content */}
      <div className="max-w-4xl mx-auto px-4 py-8">
        <form onSubmit={handleSubmit}>
          <Card>
            <CardHeader>
              <CardTitle>Registrar Nuevo Alumno</CardTitle>
              <CardDescription>
                Completa la información del alumno y su apoderado
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-8">
              {/* Datos del Alumno */}
              <div>
                <h3 className="text-lg font-semibold mb-4">Datos del Alumno</h3>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <Label htmlFor="rut">RUT *</Label>
                    <Input
                      id="rut"
                      placeholder="12345678-9"
                      value={formData.rut}
                      onChange={(e) =>
                        setFormData({ ...formData, rut: e.target.value })
                      }
                      required
                    />
                  </div>

                  <div className="space-y-2">
                    <Label htmlFor="nombre">Nombre *</Label>
                    <Input
                      id="nombre"
                      placeholder="Juan"
                      value={formData.nombre}
                      onChange={(e) =>
                        setFormData({ ...formData, nombre: e.target.value })
                      }
                      required
                    />
                  </div>

                  <div className="space-y-2">
                    <Label htmlFor="apellido">Apellido *</Label>
                    <Input
                      id="apellido"
                      placeholder="Pérez"
                      value={formData.apellido}
                      onChange={(e) =>
                        setFormData({ ...formData, apellido: e.target.value })
                      }
                      required
                    />
                  </div>

                  <div className="space-y-2">
                    <Label htmlFor="fechaNacimiento">
                      Fecha de Nacimiento *
                    </Label>
                    <Input
                      id="fechaNacimiento"
                      type="date"
                      value={formData.fechaNacimiento}
                      onChange={(e) => {
                        const fecha = e.target.value;
                        // Extraer año directamente del formato YYYY-MM-DD
                        const año = fecha ? fecha.split('-')[0] : '';
                        setFormData({
                          ...formData,
                          fechaNacimiento: fecha,
                          categoria: año,
                        });
                      }}
                      required
                    />
                  </div>

                  <div className="space-y-2">
                    <Label htmlFor="categoria">Categoría (Año de Nacimiento)</Label>
                    <Input
                      id="categoria"
                      placeholder="2015"
                      value={formData.categoria}
                      readOnly
                      disabled
                      className="bg-gray-100"
                    />
                    <p className="text-xs text-gray-500">
                      Se calcula automáticamente desde la fecha de nacimiento
                    </p>
                  </div>

                  <div className="space-y-2">
                    <Label htmlFor="telefono">Teléfono</Label>
                    <Input
                      id="telefono"
                      placeholder="+56 9 1234 5678"
                      value={formData.telefono}
                      onChange={(e) =>
                        setFormData({ ...formData, telefono: e.target.value })
                      }
                    />
                  </div>

                  <div className="space-y-2 md:col-span-2">
                    <Label htmlFor="direccion">Dirección</Label>
                    <Input
                      id="direccion"
                      placeholder="Calle Principal 123, Comuna"
                      value={formData.direccion}
                      onChange={(e) =>
                        setFormData({ ...formData, direccion: e.target.value })
                      }
                    />
                  </div>

                  <div className="space-y-2 md:col-span-2">
                    <Label htmlFor="email">Email</Label>
                    <Input
                      id="email"
                      type="email"
                      placeholder="alumno@ejemplo.com"
                      value={formData.email}
                      onChange={(e) =>
                        setFormData({ ...formData, email: e.target.value })
                      }
                    />
                  </div>
                </div>
              </div>

              {/* Datos del Apoderado */}
              <div>
                <h3 className="text-lg font-semibold mb-4">
                  Datos del Apoderado
                </h3>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <Label htmlFor="nombreApoderado">Nombre Completo *</Label>
                    <Input
                      id="nombreApoderado"
                      placeholder="María López"
                      value={formData.nombreApoderado}
                      onChange={(e) =>
                        setFormData({
                          ...formData,
                          nombreApoderado: e.target.value,
                        })
                      }
                      required
                    />
                  </div>

                  <div className="space-y-2">
                    <Label htmlFor="rutApoderado">RUT *</Label>
                    <Input
                      id="rutApoderado"
                      placeholder="98765432-1"
                      value={formData.rutApoderado}
                      onChange={(e) =>
                        setFormData({
                          ...formData,
                          rutApoderado: e.target.value,
                        })
                      }
                      required
                    />
                  </div>

                  <div className="space-y-2">
                    <Label htmlFor="telefonoApoderado">Teléfono *</Label>
                    <Input
                      id="telefonoApoderado"
                      placeholder="+56 9 8765 4321"
                      value={formData.telefonoApoderado}
                      onChange={(e) =>
                        setFormData({
                          ...formData,
                          telefonoApoderado: e.target.value,
                        })
                      }
                      required
                    />
                  </div>

                  <div className="space-y-2">
                    <Label htmlFor="relacionApoderado">Relación</Label>
                    <Select
                      value={formData.relacionApoderado}
                      onValueChange={(value) =>
                        setFormData({
                          ...formData,
                          relacionApoderado: value,
                        })
                      }
                    >
                      <SelectTrigger>
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="Padre/Madre">Padre/Madre</SelectItem>
                        <SelectItem value="Abuelo/Abuela">Abuelo/Abuela</SelectItem>
                        <SelectItem value="Tío/Tía">Tío/Tía</SelectItem>
                        <SelectItem value="Tutor Legal">Tutor Legal</SelectItem>
                        <SelectItem value="Otro">Otro</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>

                  <div className="space-y-2 md:col-span-2">
                    <Label htmlFor="emailApoderado">Email</Label>
                    <Input
                      id="emailApoderado"
                      type="email"
                      placeholder="apoderado@ejemplo.com"
                      value={formData.emailApoderado}
                      onChange={(e) =>
                        setFormData({
                          ...formData,
                          emailApoderado: e.target.value,
                        })
                      }
                    />
                  </div>
                </div>
              </div>

              {/* Buttons */}
              <div className="flex items-center gap-4 pt-4">
                <Button type="submit" disabled={loading}>
                  <Save className="w-4 h-4 mr-2" />
                  {loading ? 'Guardando...' : 'Guardar Alumno'}
                </Button>
                <Button
                  type="button"
                  variant="outline"
                  onClick={() => router.push('/dashboard/alumnos')}
                  disabled={loading}
                >
                  Cancelar
                </Button>
              </div>
            </CardContent>
          </Card>
        </form>
      </div>
    </div>
  );
}