'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, CardHeader, CardTitle } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from '@/components/ui/dialog';
import {
  AlertTriangle,
  Phone,
  Building2,
  Users,
  Plus,
  Search,
  Heart,
  AlertCircle,
  UserPlus,
  Trash2,
  Edit,
  ChevronDown,
  ChevronUp,
  ArrowLeft,
} from 'lucide-react';
import { toast } from 'sonner';

interface ContactoEmergencia {
  id: string;
  nombre: string;
  relacion: string;
  telefonoPrincipal: string;
  telefonoSecundario?: string;
  email?: string;
  esPrincipal: boolean;
}

interface AlumnoEmergencia {
  alumnoId: string;
  nombreCompleto: string;
  foto?: string;
  categoria: string;
  telefonosAlumno: string[];
  datosSalud: {
    centroSalud?: string;
    ubicacionCentro?: string;
    alergias?: string;
    condiciones?: string;
    lesiones?: string;
    seguroEscolar: boolean;
  };
  apoderado: {
    nombre: string;
    relacion: string;
    telefonos: string[];
    emails: string[];
    contactoAdicional?: {
      nombre: string;
      telefono?: string;
    };
  };
  contactosEmergencia: ContactoEmergencia[];
}

interface CentroSalud {
  id: string;
  nombre: string;
  direccion: string;
  telefono: string;
  telefonoUrgencia?: string;
  horarioAtencion?: string;
  tipoAtencion: string;
  activo: boolean;
}

export default function EmergenciasPage() {
  const { data: session, status } = useSession() || {};
  const router = useRouter();
  const [listaEmergencias, setListaEmergencias] = useState<AlumnoEmergencia[]>([]);
  const [centrosSalud, setCentrosSalud] = useState<CentroSalud[]>([]);
  const [categoriaFiltro, setCategoriaFiltro] = useState<string>('');
  const [busqueda, setBusqueda] = useState('');
  const [loading, setLoading] = useState(true);
  const [expandedAlumno, setExpandedAlumno] = useState<string | null>(null);
  const [showCentroDialog, setShowCentroDialog] = useState(false);
  const [showContactoDialog, setShowContactoDialog] = useState(false);
  const [selectedAlumnoId, setSelectedAlumnoId] = useState<string | null>(null);
  const [categorias, setCategorias] = useState<string[]>([]);

  // Form states
  const [nuevoCentro, setNuevoCentro] = useState({
    nombre: '',
    direccion: '',
    telefono: '',
    telefonoUrgencia: '',
    horarioAtencion: '',
    tipoAtencion: 'HOSPITAL',
  });

  const [nuevoContacto, setNuevoContacto] = useState({
    nombre: '',
    relacion: '',
    telefonoPrincipal: '',
    telefonoSecundario: '',
    email: '',
    esPrincipal: false,
  });

  useEffect(() => {
    if (status === 'loading') return;
    if (!session) {
      router.push('/login');
      return;
    }
    fetchDatos();
  }, [session, status, router, categoriaFiltro]);

  const fetchDatos = async () => {
    try {
      const url = categoriaFiltro
        ? `/api/emergencias/lista?categoria=${categoriaFiltro}`
        : '/api/emergencias/lista';
      const res = await fetch(url);
      const data = await res.json();
      setListaEmergencias(data.listaEmergencias || []);
      setCentrosSalud(data.centrosSalud || []);
      
      // Extraer categorías únicas
      const cats: string[] = [...new Set<string>(data.listaEmergencias?.map((a: AlumnoEmergencia) => a.categoria) || [])];
      setCategorias(cats.sort());
    } catch (error) {
      console.error('Error:', error);
      toast.error('Error al cargar datos de emergencia');
    } finally {
      setLoading(false);
    }
  };

  const handleCrearCentro = async () => {
    try {
      const res = await fetch('/api/emergencias/centros-salud', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(nuevoCentro),
      });
      if (!res.ok) throw new Error('Error al crear centro');
      toast.success('Centro de salud creado');
      setShowCentroDialog(false);
      setNuevoCentro({
        nombre: '',
        direccion: '',
        telefono: '',
        telefonoUrgencia: '',
        horarioAtencion: '',
        tipoAtencion: 'HOSPITAL',
      });
      fetchDatos();
    } catch (error) {
      console.error('Error:', error);
      toast.error('Error al crear centro de salud');
    }
  };

  const handleCrearContacto = async () => {
    if (!selectedAlumnoId) return;
    try {
      const res = await fetch('/api/emergencias/contactos', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ ...nuevoContacto, alumnoId: selectedAlumnoId }),
      });
      if (!res.ok) throw new Error('Error al crear contacto');
      toast.success('Contacto de emergencia creado');
      setShowContactoDialog(false);
      setNuevoContacto({
        nombre: '',
        relacion: '',
        telefonoPrincipal: '',
        telefonoSecundario: '',
        email: '',
        esPrincipal: false,
      });
      fetchDatos();
    } catch (error) {
      console.error('Error:', error);
      toast.error('Error al crear contacto');
    }
  };

  const handleEliminarContacto = async (contactoId: string) => {
    if (!confirm('¿Eliminar este contacto de emergencia?')) return;
    try {
      const res = await fetch(`/api/emergencias/contactos/${contactoId}`, {
        method: 'DELETE',
      });
      if (!res.ok) throw new Error('Error al eliminar');
      toast.success('Contacto eliminado');
      fetchDatos();
    } catch (error) {
      console.error('Error:', error);
      toast.error('Error al eliminar contacto');
    }
  };

  const filteredAlumnos = listaEmergencias.filter((alumno) =>
    alumno.nombreCompleto.toLowerCase().includes(busqueda.toLowerCase())
  );

  if (status === 'loading' || loading) {
    return (
      <div className="flex items-center justify-center min-h-screen">
        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-green-600"></div>
      </div>
    );
  }

  const isStaff = ['COORDINADOR', 'PROFESOR'].includes(session?.user?.rol || '');

  return (
    <div className="container mx-auto p-6 max-w-7xl">
      {/* Header */}
      <div className="flex items-center justify-between mb-6">
        <div className="flex items-center gap-4">
          <Button variant="ghost" size="icon" onClick={() => router.push('/dashboard')}>
            <ArrowLeft className="h-5 w-5" />
          </Button>
          <div>
            <h1 className="text-3xl font-bold text-red-600 flex items-center gap-2">
              <AlertTriangle className="h-8 w-8" />
              Emergencias
            </h1>
            <p className="text-muted-foreground">
              Contactos de emergencia y centros de salud
            </p>
          </div>
        </div>
        {session?.user?.rol === 'COORDINADOR' && (
          <Dialog open={showCentroDialog} onOpenChange={setShowCentroDialog}>
            <DialogTrigger asChild>
              <Button className="bg-red-600 hover:bg-red-700">
                <Plus className="mr-2 h-4 w-4" />
                Nuevo Centro de Salud
              </Button>
            </DialogTrigger>
            <DialogContent>
              <DialogHeader>
                <DialogTitle>Agregar Centro de Salud</DialogTitle>
              </DialogHeader>
              <div className="space-y-4">
                <div>
                  <Label>Nombre</Label>
                  <Input
                    value={nuevoCentro.nombre}
                    onChange={(e) => setNuevoCentro({ ...nuevoCentro, nombre: e.target.value })}
                    placeholder="Hospital Regional..."
                  />
                </div>
                <div>
                  <Label>Dirección</Label>
                  <Input
                    value={nuevoCentro.direccion}
                    onChange={(e) => setNuevoCentro({ ...nuevoCentro, direccion: e.target.value })}
                    placeholder="Av. Principal #123"
                  />
                </div>
                <div className="grid grid-cols-2 gap-4">
                  <div>
                    <Label>Teléfono</Label>
                    <Input
                      value={nuevoCentro.telefono}
                      onChange={(e) => setNuevoCentro({ ...nuevoCentro, telefono: e.target.value })}
                      placeholder="+56 9 1234 5678"
                    />
                  </div>
                  <div>
                    <Label>Tel. Urgencias</Label>
                    <Input
                      value={nuevoCentro.telefonoUrgencia}
                      onChange={(e) => setNuevoCentro({ ...nuevoCentro, telefonoUrgencia: e.target.value })}
                      placeholder="131"
                    />
                  </div>
                </div>
                <div>
                  <Label>Horario</Label>
                  <Input
                    value={nuevoCentro.horarioAtencion}
                    onChange={(e) => setNuevoCentro({ ...nuevoCentro, horarioAtencion: e.target.value })}
                    placeholder="24 horas"
                  />
                </div>
                <div>
                  <Label>Tipo</Label>
                  <Select
                    value={nuevoCentro.tipoAtencion}
                    onValueChange={(v) => setNuevoCentro({ ...nuevoCentro, tipoAtencion: v })}
                  >
                    <SelectTrigger>
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="HOSPITAL">Hospital</SelectItem>
                      <SelectItem value="CLINICA">Clínica</SelectItem>
                      <SelectItem value="CESFAM">CESFAM</SelectItem>
                      <SelectItem value="SAPU">SAPU</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
                <Button onClick={handleCrearCentro} className="w-full bg-red-600 hover:bg-red-700">
                  Guardar Centro
                </Button>
              </div>
            </DialogContent>
          </Dialog>
        )}
      </div>

      {/* Centros de Salud */}
      <Card className="mb-6 border-red-200">
        <CardHeader className="bg-red-50">
          <CardTitle className="flex items-center gap-2 text-red-700">
            <Building2 className="h-5 w-5" />
            Centros de Salud ({centrosSalud.length})
          </CardTitle>
        </CardHeader>
        <CardContent className="p-4">
          {centrosSalud.length === 0 ? (
            <p className="text-muted-foreground text-center py-4">No hay centros registrados</p>
          ) : (
            <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
              {centrosSalud.map((centro) => (
                <div
                  key={centro.id}
                  className="p-4 border rounded-lg bg-white hover:shadow-md transition-shadow"
                >
                  <div className="flex items-start justify-between">
                    <div>
                      <span className="text-xs px-2 py-1 rounded bg-red-100 text-red-700">
                        {centro.tipoAtencion}
                      </span>
                      <h3 className="font-semibold mt-2">{centro.nombre}</h3>
                      <p className="text-sm text-muted-foreground">{centro.direccion}</p>
                    </div>
                  </div>
                  <div className="mt-3 space-y-1">
                    <a
                      href={`tel:${centro.telefono}`}
                      className="flex items-center gap-2 text-sm text-green-600 hover:underline"
                    >
                      <Phone className="h-4 w-4" />
                      {centro.telefono}
                    </a>
                    {centro.telefonoUrgencia && (
                      <a
                        href={`tel:${centro.telefonoUrgencia}`}
                        className="flex items-center gap-2 text-sm text-red-600 font-semibold hover:underline"
                      >
                        <AlertCircle className="h-4 w-4" />
                        Urgencias: {centro.telefonoUrgencia}
                      </a>
                    )}
                    {centro.horarioAtencion && (
                      <p className="text-xs text-muted-foreground">
                        Horario: {centro.horarioAtencion}
                      </p>
                    )}
                  </div>
                </div>
              ))}
            </div>
          )}
        </CardContent>
      </Card>

      {/* Filtros */}
      <div className="flex flex-wrap gap-4 mb-6">
        <div className="flex-1 min-w-[200px]">
          <div className="relative">
            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
            <Input
              placeholder="Buscar alumno..."
              value={busqueda}
              onChange={(e) => setBusqueda(e.target.value)}
              className="pl-10"
            />
          </div>
        </div>
        <Select value={categoriaFiltro} onValueChange={setCategoriaFiltro}>
          <SelectTrigger className="w-[180px]">
            <SelectValue placeholder="Todas las categorías" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="">Todas las categorías</SelectItem>
            {categorias.map((cat) => (
              <SelectItem key={cat} value={cat}>
                Categoría {cat}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
      </div>

      {/* Lista de Alumnos */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Users className="h-5 w-5" />
            Contactos de Emergencia por Alumno ({filteredAlumnos.length})
          </CardTitle>
        </CardHeader>
        <CardContent>
          {filteredAlumnos.length === 0 ? (
            <p className="text-center text-muted-foreground py-8">No hay alumnos registrados</p>
          ) : (
            <div className="space-y-3">
              {filteredAlumnos.map((alumno) => (
                <div
                  key={alumno.alumnoId}
                  className="border rounded-lg overflow-hidden"
                >
                  {/* Header del alumno */}
                  <div
                    className="p-4 bg-gray-50 flex items-center justify-between cursor-pointer hover:bg-gray-100"
                    onClick={() =>
                      setExpandedAlumno(
                        expandedAlumno === alumno.alumnoId ? null : alumno.alumnoId
                      )
                    }
                  >
                    <div className="flex items-center gap-3">
                      <div className="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center">
                        <span className="text-green-700 font-semibold">
                          {alumno.nombreCompleto.charAt(0)}
                        </span>
                      </div>
                      <div>
                        <h3 className="font-semibold">{alumno.nombreCompleto}</h3>
                        <span className="text-sm text-muted-foreground">
                          Categoría {alumno.categoria}
                        </span>
                      </div>
                    </div>
                    <div className="flex items-center gap-4">
                      {alumno.datosSalud.alergias && (
                        <span className="text-xs px-2 py-1 rounded bg-orange-100 text-orange-700">
                          Alergias
                        </span>
                      )}
                      {alumno.datosSalud.condiciones && (
                        <span className="text-xs px-2 py-1 rounded bg-red-100 text-red-700">
                          Condición médica
                        </span>
                      )}
                      {expandedAlumno === alumno.alumnoId ? (
                        <ChevronUp className="h-5 w-5" />
                      ) : (
                        <ChevronDown className="h-5 w-5" />
                      )}
                    </div>
                  </div>

                  {/* Contenido expandido */}
                  {expandedAlumno === alumno.alumnoId && (
                    <div className="p-4 space-y-4">
                      {/* Datos de salud */}
                      <div className="p-3 bg-red-50 rounded-lg">
                        <h4 className="font-semibold text-red-700 flex items-center gap-2 mb-2">
                          <Heart className="h-4 w-4" />
                          Información de Salud
                        </h4>
                        <div className="grid gap-2 text-sm">
                          {alumno.datosSalud.centroSalud && (
                            <p>
                              <strong>Centro de salud:</strong> {alumno.datosSalud.centroSalud}
                              {alumno.datosSalud.ubicacionCentro && ` - ${alumno.datosSalud.ubicacionCentro}`}
                            </p>
                          )}
                          {alumno.datosSalud.alergias && (
                            <p className="text-orange-700">
                              <strong>Alergias:</strong> {alumno.datosSalud.alergias}
                            </p>
                          )}
                          {alumno.datosSalud.condiciones && (
                            <p className="text-red-700">
                              <strong>Condiciones:</strong> {alumno.datosSalud.condiciones}
                            </p>
                          )}
                          {alumno.datosSalud.lesiones && (
                            <p>
                              <strong>Lesiones previas:</strong> {alumno.datosSalud.lesiones}
                            </p>
                          )}
                          <p>
                            <strong>Seguro escolar:</strong>{' '}
                            {alumno.datosSalud.seguroEscolar ? (
                              <span className="text-green-600">Sí</span>
                            ) : (
                              <span className="text-red-600">No</span>
                            )}
                          </p>
                        </div>
                      </div>

                      {/* Apoderado */}
                      <div className="p-3 bg-blue-50 rounded-lg">
                        <h4 className="font-semibold text-blue-700 mb-2">Apoderado</h4>
                        <div className="text-sm">
                          <p>
                            <strong>{alumno.apoderado.nombre}</strong> ({alumno.apoderado.relacion})
                          </p>
                          <div className="flex flex-wrap gap-2 mt-2">
                            {alumno.apoderado.telefonos.map((tel, i) => (
                              <a
                                key={i}
                                href={`tel:${tel}`}
                                className="flex items-center gap-1 text-green-600 hover:underline"
                              >
                                <Phone className="h-3 w-3" />
                                {tel}
                              </a>
                            ))}
                          </div>
                          {alumno.apoderado.contactoAdicional && (
                            <p className="mt-2 text-muted-foreground">
                              Contacto adicional: {alumno.apoderado.contactoAdicional.nombre}
                              {alumno.apoderado.contactoAdicional.telefono && (
                                <a
                                  href={`tel:${alumno.apoderado.contactoAdicional.telefono}`}
                                  className="ml-2 text-green-600 hover:underline"
                                >
                                  {alumno.apoderado.contactoAdicional.telefono}
                                </a>
                              )}
                            </p>
                          )}
                        </div>
                      </div>

                      {/* Contactos de emergencia adicionales */}
                      <div className="p-3 bg-green-50 rounded-lg">
                        <div className="flex items-center justify-between mb-2">
                          <h4 className="font-semibold text-green-700">Contactos de Emergencia</h4>
                          {isStaff && (
                            <Button
                              size="sm"
                              variant="outline"
                              onClick={() => {
                                setSelectedAlumnoId(alumno.alumnoId);
                                setShowContactoDialog(true);
                              }}
                            >
                              <UserPlus className="h-4 w-4 mr-1" />
                              Agregar
                            </Button>
                          )}
                        </div>
                        {alumno.contactosEmergencia.length === 0 ? (
                          <p className="text-sm text-muted-foreground">
                            No hay contactos adicionales
                          </p>
                        ) : (
                          <div className="space-y-2">
                            {alumno.contactosEmergencia.map((contacto) => (
                              <div
                                key={contacto.id}
                                className="flex items-center justify-between p-2 bg-white rounded"
                              >
                                <div>
                                  <p className="font-medium">
                                    {contacto.nombre}
                                    {contacto.esPrincipal && (
                                      <span className="ml-2 text-xs px-2 py-0.5 rounded bg-green-100 text-green-700">
                                        Principal
                                      </span>
                                    )}
                                  </p>
                                  <p className="text-sm text-muted-foreground">
                                    {contacto.relacion}
                                  </p>
                                  <a
                                    href={`tel:${contacto.telefonoPrincipal}`}
                                    className="text-sm text-green-600 hover:underline"
                                  >
                                    {contacto.telefonoPrincipal}
                                  </a>
                                </div>
                                {isStaff && (
                                  <Button
                                    size="icon"
                                    variant="ghost"
                                    className="text-red-600"
                                    onClick={() => handleEliminarContacto(contacto.id)}
                                  >
                                    <Trash2 className="h-4 w-4" />
                                  </Button>
                                )}
                              </div>
                            ))}
                          </div>
                        )}
                      </div>
                    </div>
                  )}
                </div>
              ))}
            </div>
          )}
        </CardContent>
      </Card>

      {/* Dialog para agregar contacto */}
      <Dialog open={showContactoDialog} onOpenChange={setShowContactoDialog}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Agregar Contacto de Emergencia</DialogTitle>
          </DialogHeader>
          <div className="space-y-4">
            <div>
              <Label>Nombre completo</Label>
              <Input
                value={nuevoContacto.nombre}
                onChange={(e) => setNuevoContacto({ ...nuevoContacto, nombre: e.target.value })}
                placeholder="Juan Pérez"
              />
            </div>
            <div>
              <Label>Relación</Label>
              <Select
                value={nuevoContacto.relacion}
                onValueChange={(v) => setNuevoContacto({ ...nuevoContacto, relacion: v })}
              >
                <SelectTrigger>
                  <SelectValue placeholder="Seleccionar..." />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="Padre">Padre</SelectItem>
                  <SelectItem value="Madre">Madre</SelectItem>
                  <SelectItem value="Abuelo/a">Abuelo/a</SelectItem>
                  <SelectItem value="Tío/a">Tío/a</SelectItem>
                  <SelectItem value="Hermano/a">Hermano/a</SelectItem>
                  <SelectItem value="Tutor">Tutor</SelectItem>
                  <SelectItem value="Otro">Otro</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div className="grid grid-cols-2 gap-4">
              <div>
                <Label>Teléfono principal</Label>
                <Input
                  value={nuevoContacto.telefonoPrincipal}
                  onChange={(e) =>
                    setNuevoContacto({ ...nuevoContacto, telefonoPrincipal: e.target.value })
                  }
                  placeholder="+56 9 1234 5678"
                />
              </div>
              <div>
                <Label>Teléfono secundario</Label>
                <Input
                  value={nuevoContacto.telefonoSecundario}
                  onChange={(e) =>
                    setNuevoContacto({ ...nuevoContacto, telefonoSecundario: e.target.value })
                  }
                  placeholder="Opcional"
                />
              </div>
            </div>
            <div>
              <Label>Email</Label>
              <Input
                type="email"
                value={nuevoContacto.email}
                onChange={(e) => setNuevoContacto({ ...nuevoContacto, email: e.target.value })}
                placeholder="email@ejemplo.com"
              />
            </div>
            <div className="flex items-center gap-2">
              <input
                type="checkbox"
                id="esPrincipal"
                checked={nuevoContacto.esPrincipal}
                onChange={(e) =>
                  setNuevoContacto({ ...nuevoContacto, esPrincipal: e.target.checked })
                }
                className="rounded"
              />
              <Label htmlFor="esPrincipal">Contacto principal</Label>
            </div>
            <Button onClick={handleCrearContacto} className="w-full bg-green-600 hover:bg-green-700">
              Guardar Contacto
            </Button>
          </div>
        </DialogContent>
      </Dialog>
    </div>
  );
}