'use client';

import { useEffect, useState } 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 {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table';
import { ArrowLeft, Plus } from 'lucide-react';
import { toast } from 'sonner';

interface Profesor {
  id: string;
  usuario: {
    rut: string;
    nombre: string;
    apellido: string;
    email: string | null;
    telefono: string | null;
  };
  titulo: string | null;
  categoriasACargo: any[];
}

export default function ProfesoresPage() {
  const { data: session, status } = useSession();
  const router = useRouter();
  const [profesores, setProfesores] = useState<Profesor[]>([]);
  const [loading, setLoading] = useState(true);

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

  useEffect(() => {
    fetchProfesores();
  }, []);

  const fetchProfesores = async () => {
    try {
      const response = await fetch('/api/profesores');
      if (response.ok) {
        const data = await response.json();
        setProfesores(data.profesores || []);
      } else {
        toast.error('Error al cargar los profesores');
      }
    } catch (error) {
      toast.error('Error de conexión');
    } finally {
      setLoading(false);
    }
  };

  if (status === 'loading' || 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')}
            >
              <ArrowLeft className="w-4 h-4 mr-2" />
              Volver al Dashboard
            </Button>
          </div>
        </div>
      </header>

      {/* Content */}
      <div className="max-w-7xl mx-auto px-4 py-8">
        <Card>
          <CardHeader>
            <div className="flex items-center justify-between">
              <div>
                <CardTitle className="text-2xl">Gestión de Profesores</CardTitle>
                <CardDescription>
                  Administra los profesores de la escuela
                </CardDescription>
              </div>
              <Button
                onClick={() =>
                  toast.info('Crear profesor en desarrollo')
                }
              >
                <Plus className="w-4 h-4 mr-2" />
                Nuevo Profesor
              </Button>
            </div>
          </CardHeader>
          <CardContent>
            <div className="border rounded-lg">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>RUT</TableHead>
                    <TableHead>Nombre</TableHead>
                    <TableHead>Apellido</TableHead>
                    <TableHead>Título</TableHead>
                    <TableHead>Email</TableHead>
                    <TableHead>Teléfono</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {profesores.length === 0 ? (
                    <TableRow>
                      <TableCell colSpan={6} className="text-center py-8">
                        No hay profesores registrados
                      </TableCell>
                    </TableRow>
                  ) : (
                    profesores.map((profesor) => (
                      <TableRow key={profesor.id}>
                        <TableCell className="font-medium">
                          {profesor.usuario.rut}
                        </TableCell>
                        <TableCell>{profesor.usuario.nombre}</TableCell>
                        <TableCell>{profesor.usuario.apellido}</TableCell>
                        <TableCell>{profesor.titulo || 'N/A'}</TableCell>
                        <TableCell>{profesor.usuario.email || 'N/A'}</TableCell>
                        <TableCell>
                          {profesor.usuario.telefono || 'N/A'}
                        </TableCell>
                      </TableRow>
                    ))
                  )}
                </TableBody>
              </Table>
            </div>

            <div className="mt-4 text-sm text-gray-600">
              Total: {profesores.length} profesores
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  );
}