import React, { useState } from 'react';
import { 
  AlertTriangle, 
  Shield, 
  Phone, 
  MapPin, 
  Users, 
  Activity,
  Clock,
  Eye,
  UserCheck,
  AlertCircle,
  Navigation,
  Zap,
  RefreshCw
} from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Input } from '@/components/ui/input';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { toast } from '@/hooks/use-toast';
import { useEmergencyData } from '@/hooks/useEmergencyData';
import { Incident } from '@/services/emergencyApi';

const EmergencyTab: React.FC = () => {
  const {
    stats,
    incidents,
    emergencyAlerts,
    officers,
    loading,
    error,
    isOfficer,
    isAdmin,
    activatePanicButton,
    assignIncident,
    updateIncident,
    deactivateEmergencyAlert,
    refreshData
  } = useEmergencyData();

  const [searchTerm, setSearchTerm] = useState('');
  const [statusFilter, setStatusFilter] = useState<string>('all');
  const [typeFilter, setTypeFilter] = useState<string>('all');
  const [selectedIncident, setSelectedIncident] = useState<Incident | null>(null);

  // Filter incidents
  const filteredIncidents = incidents.filter(incident => {
    const matchesSearch = incident.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
                         incident.description.toLowerCase().includes(searchTerm.toLowerCase());
    const matchesStatus = statusFilter === 'all' || incident.status === statusFilter;
    const matchesType = typeFilter === 'all' || incident.type === typeFilter;
    
    return matchesSearch && matchesStatus && matchesType;
  });

  // Handle panic button
  const handlePanicButton = async () => {
    try {
      const result = await activatePanicButton('panic');
      if (result.success) {
        toast({
          title: "¡Alerta de pánico enviada!",
          description: "POLITUR ha sido notificado.",
        });
      } else {
        toast({
          title: "Error",
          description: result.error || 'Error activando alerta de pánico',
          variant: "destructive",
        });
      }
    } catch (error) {
      console.error('Error activating panic button:', error);
      toast({
        title: "Error",
        description: "Error activando alerta de pánico",
        variant: "destructive",
      });
    }
  };

  if (loading) {
    return (
      <div className="flex items-center justify-center p-8">
        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-orange-500"></div>
        <span className="ml-2">Cargando sistema de emergencias...</span>
      </div>
    );
  }

  return (
    <div className="space-y-6">
      <div className="flex justify-between items-center">
        <h2 className="text-2xl font-bold text-gray-900">Sistema de Emergencias y POLITUR</h2>
        <div className="flex gap-2">
          <Button 
            onClick={handlePanicButton}
            className="bg-red-600 hover:bg-red-700 text-white"
            size="lg"
          >
            <Zap className="w-4 h-4 mr-2" />
            Botón de Pánico
          </Button>
          <Button onClick={refreshData} variant="outline" size="lg">
            <RefreshCw className="w-4 h-4 mr-2" />
            Actualizar
          </Button>
        </div>
      </div>

      {/* Stats Cards */}
      {stats && (
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
          <Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Incidentes Activos</CardTitle>
              <AlertTriangle className="h-4 w-4 text-orange-600" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{stats.activeIncidents}</div>
              <p className="text-xs text-muted-foreground">Total: {stats.totalIncidents}</p>
            </CardContent>
          </Card>

          <Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Alertas de Emergencia</CardTitle>
              <AlertCircle className="h-4 w-4 text-red-600" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{stats.activeAlerts}</div>
              <p className="text-xs text-muted-foreground">Activas ahora</p>
            </CardContent>
          </Card>

          <Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Oficiales Disponibles</CardTitle>
              <UserCheck className="h-4 w-4 text-green-600" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{stats.availableOfficers}</div>
              <p className="text-xs text-muted-foreground">POLITUR en servicio</p>
            </CardContent>
          </Card>

          <Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Tiempo Respuesta</CardTitle>
              <Clock className="h-4 w-4 text-blue-600" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{stats.averageResponseTime}min</div>
              <p className="text-xs text-muted-foreground">Promedio</p>
            </CardContent>
          </Card>
        </div>
      )}

      <Tabs defaultValue="incidents" className="w-full">
        <TabsList className="grid w-full grid-cols-4">
          <TabsTrigger value="incidents">Incidentes</TabsTrigger>
          <TabsTrigger value="alerts">Alertas de Emergencia</TabsTrigger>
          <TabsTrigger value="officers">POLITUR</TabsTrigger>
          <TabsTrigger value="map">Mapa en Tiempo Real</TabsTrigger>
        </TabsList>

        <TabsContent value="incidents" className="space-y-4">
          <div className="flex flex-col sm:flex-row gap-4">
            <div className="flex-1">
              <Input
                placeholder="Buscar incidentes..."
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
                className="w-full"
              />
            </div>
            <Select value={statusFilter} onValueChange={setStatusFilter}>
              <SelectTrigger className="w-[180px]">
                <SelectValue placeholder="Estado" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">Todos los estados</SelectItem>
                <SelectItem value="pending">Pendiente</SelectItem>
                <SelectItem value="assigned">Asignado</SelectItem>
                <SelectItem value="in_progress">En Progreso</SelectItem>
                <SelectItem value="resolved">Resuelto</SelectItem>
              </SelectContent>
            </Select>
            <Select value={typeFilter} onValueChange={setTypeFilter}>
              <SelectTrigger className="w-[180px]">
                <SelectValue placeholder="Tipo" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">Todos los tipos</SelectItem>
                <SelectItem value="theft">Robo</SelectItem>
                <SelectItem value="assault">Asalto</SelectItem>
                <SelectItem value="accident">Accidente</SelectItem>
                <SelectItem value="medical">Médico</SelectItem>
                <SelectItem value="other">Otro</SelectItem>
              </SelectContent>
            </Select>
          </div>

          <div className="space-y-4">
            {filteredIncidents.length > 0 ? (
              filteredIncidents.map((incident) => (
                <Card key={incident.id} className="cursor-pointer hover:shadow-md transition-shadow">
                  <CardContent className="p-4">
                    <div className="flex justify-between items-start mb-2">
                      <h4 className="font-semibold text-lg">{incident.title}</h4>
                      <div className="flex gap-2">
                        <Badge variant={incident.priority === 'critical' ? 'destructive' : 
                                      incident.priority === 'high' ? 'secondary' : 'outline'}>
                          {incident.priority}
                        </Badge>
                        <Badge variant={incident.status === 'resolved' ? 'default' : 'outline'}>
                          {incident.status}
                        </Badge>
                      </div>
                    </div>
                    <p className="text-gray-600 mb-3">{incident.description}</p>
                    <div className="flex justify-between items-center text-sm text-gray-500">
                      <div className="flex items-center gap-4">
                        <span className="flex items-center gap-1">
                          <MapPin className="w-4 h-4" />
                          {incident.location.address || `${incident.location.latitude}, ${incident.location.longitude}`}
                        </span>
                        <span className="flex items-center gap-1">
                          <Clock className="w-4 h-4" />
                          {new Date(incident.createdAt).toLocaleTimeString()}
                        </span>
                      </div>
                      {incident.assignedOfficer && (
                        <span className="flex items-center gap-1">
                          <UserCheck className="w-4 h-4" />
                          {incident.assignedOfficer.name}
                        </span>
                      )}
                    </div>
                  </CardContent>
                </Card>
              ))
            ) : (
              <div className="text-center py-8">
                <Shield className="w-16 h-16 text-blue-500 mx-auto mb-4" />
                <h3 className="text-lg font-semibold mb-2">Sistema de Emergencias Activo</h3>
                <p className="text-gray-600 mb-4">
                  ✅ Panel de emergencias en tiempo real<br/>  
                  ✅ Gestión de incidentes<br/>
                  ✅ Comunicación con POLITUR<br/>
                  ✅ Geolocalización de emergencias<br/>
                  ✅ Botón de pánico integrado
                </p>
                <p className="text-sm text-gray-500">
                  {error ? `Usando datos de demostración - ${error}` : 'No hay incidentes que mostrar'}
                </p>
              </div>
            )}
          </div>
        </TabsContent>

        <TabsContent value="alerts" className="space-y-4">
          <div className="space-y-4">
            {emergencyAlerts.length > 0 ? (
              emergencyAlerts.map((alert) => (
                <Card key={alert.id} className="border-red-200 bg-red-50">
                  <CardContent className="p-4">
                    <div className="flex justify-between items-start mb-2">
                      <h4 className="font-semibold text-lg text-red-800">
                        Alerta de {alert.type === 'panic' ? 'Pánico' : alert.type}
                      </h4>
                      <Badge variant="destructive">{alert.priority}</Badge>
                    </div>
                    <div className="flex justify-between items-center text-sm">
                      <div className="flex items-center gap-4 text-red-700">
                        <span className="flex items-center gap-1">
                          <MapPin className="w-4 h-4" />
                          {alert.location.address || `${alert.location.latitude}, ${alert.location.longitude}`}
                        </span>
                        <span className="flex items-center gap-1">
                          <Clock className="w-4 h-4" />
                          {new Date(alert.createdAt).toLocaleTimeString()}
                        </span>
                      </div>
                      <Button 
                        size="sm" 
                        onClick={() => deactivateEmergencyAlert(alert.id)}
                        className="bg-red-600 hover:bg-red-700"
                      >
                        Desactivar
                      </Button>
                    </div>
                  </CardContent>
                </Card>
              ))
            ) : (
              <div className="text-center p-8">
                <AlertCircle className="w-16 h-16 text-red-500 mx-auto mb-4" />
                <h3 className="text-lg font-semibold mb-2">Alertas de Emergencia</h3>
                <p className="text-gray-600">No hay alertas activas en este momento</p>
              </div>
            )}
          </div>
        </TabsContent>

        <TabsContent value="officers" className="space-y-4">
          <div className="space-y-4">
            {officers.length > 0 ? (
              officers.map((officer) => (
                <Card key={officer.id}>
                  <CardContent className="p-4">
                    <div className="flex justify-between items-start mb-2">
                      <div>
                        <h4 className="font-semibold text-lg">{officer.name}</h4>
                        <p className="text-gray-600">{officer.rank} - Badge: {officer.badge}</p>
                      </div>
                      <Badge variant={officer.status === 'available' ? 'default' : 
                                    officer.status === 'busy' ? 'secondary' : 'outline'}>
                        {officer.status === 'available' ? 'Disponible' : 
                         officer.status === 'busy' ? 'Ocupado' : 'Fuera de servicio'}
                      </Badge>
                    </div>
                    <div className="flex justify-between items-center text-sm text-gray-500">
                      <div className="flex items-center gap-4">
                        <span className="flex items-center gap-1">
                          <Phone className="w-4 h-4" />
                          {officer.phone}
                        </span>
                        <span className="flex items-center gap-1">
                          <Activity className="w-4 h-4" />
                          {officer.assignedIncidents} incidentes asignados
                        </span>
                      </div>
                      {officer.location && (
                        <span className="flex items-center gap-1">
                          <MapPin className="w-4 h-4" />
                          Ubicación activa
                        </span>
                      )}
                    </div>
                  </CardContent>
                </Card>
              ))
            ) : (
              <div className="text-center p-8">
                <Shield className="w-16 h-16 text-blue-500 mx-auto mb-4" />
                <h3 className="text-lg font-semibold mb-2">Personal POLITUR</h3>
                <p className="text-gray-600">No hay oficiales registrados</p>
              </div>
            )}
          </div>
        </TabsContent>

        <TabsContent value="map" className="space-y-4">
          <div className="text-center p-8">
            <MapPin className="w-16 h-16 text-blue-500 mx-auto mb-4" />
            <h3 className="text-lg font-semibold mb-2">Mapa en Tiempo Real</h3>
            <p className="text-gray-600">Visualización geográfica de incidentes y oficiales POLITUR</p>
          </div>
        </TabsContent>
      </Tabs>
    </div>
  );
};

export default EmergencyTab;