import React from 'react';
import { X, Phone, Video, Navigation, MapPin, Clock, User, FileText } from 'lucide-react';
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Emergency } from '@/types/politur';

interface IncidentDetailsProps {
  emergency: Emergency;
  onClose: () => void;
  onAssign: () => void;
  onResolve: () => void;
}

const IncidentDetails: React.FC<IncidentDetailsProps> = ({
  emergency,
  onClose,
  onAssign,
  onResolve
}) => {
  const openNavigation = () => {
    const url = `https://www.google.com/maps/dir/?api=1&destination=${emergency.location.lat},${emergency.location.lng}`;
    window.open(url, '_blank');
  };

  return (
    <Dialog open={true} onOpenChange={onClose}>
      <DialogContent className="max-w-2xl">
        <DialogHeader>
          <DialogTitle className="flex items-center justify-between">
            <span>Detalles de la Emergencia</span>
            <Badge variant={emergency.priority === 'critical' ? 'destructive' : 'default'}>
              {emergency.priority.toUpperCase()}
            </Badge>
          </DialogTitle>
        </DialogHeader>

        <div className="space-y-4">
          {/* Tourist Info */}
          <div className="bg-gray-50 p-4 rounded-lg">
            <div className="flex items-center gap-2 mb-2">
              <User className="w-5 h-5 text-gray-600" />
              <h3 className="font-semibold">Información del Turista</h3>
            </div>
            <div className="space-y-1 text-sm">
              <p><strong>Nombre:</strong> {emergency.touristName}</p>
              <p><strong>Teléfono:</strong> {emergency.phone}</p>
            </div>
          </div>

          {/* Location Info */}
          <div className="bg-gray-50 p-4 rounded-lg">
            <div className="flex items-center gap-2 mb-2">
              <MapPin className="w-5 h-5 text-gray-600" />
              <h3 className="font-semibold">Ubicación</h3>
            </div>
            <p className="text-sm mb-2">{emergency.address}</p>
            <Button 
              size="sm" 
              variant="outline" 
              className="w-full"
              onClick={openNavigation}
            >
              <Navigation className="w-4 h-4 mr-2" />
              Navegar hacia la ubicación
            </Button>
          </div>

          {/* Incident Info */}
          <div className="bg-gray-50 p-4 rounded-lg">
            <div className="flex items-center gap-2 mb-2">
              <FileText className="w-5 h-5 text-gray-600" />
              <h3 className="font-semibold">Descripción del Incidente</h3>
            </div>
            <p className="text-sm mb-2">{emergency.description}</p>
            <div className="flex items-center gap-2 text-sm text-gray-600">
              <Clock className="w-4 h-4" />
              <span>Reportado: {new Date(emergency.timestamp).toLocaleString('es-ES')}</span>
            </div>
          </div>

          {/* Status */}
          {emergency.assignedOfficer && (
            <div className="bg-blue-50 p-4 rounded-lg">
              <p className="text-sm">
                <strong>Oficial asignado:</strong> {emergency.assignedOfficer}
              </p>
            </div>
          )}

          {/* Actions */}
          <div className="flex gap-2">
            <Button 
              className="flex-1"
              onClick={() => window.location.href = `tel:${emergency.phone}`}
            >
              <Phone className="w-4 h-4 mr-2" />
              Llamar
            </Button>
            
            <Button 
              variant="outline" 
              className="flex-1"
              onClick={() => {/* Video call implementation */}}
            >
              <Video className="w-4 h-4 mr-2" />
              Videollamada
            </Button>
          </div>

          {emergency.status === 'pending' && (
            <Button 
              className="w-full"
              onClick={() => {
                onAssign();
                onClose();
              }}
            >
              Asignarme esta emergencia
            </Button>
          )}

          {emergency.status === 'assigned' && (
            <Button 
              className="w-full"
              onClick={() => {
                onResolve();
                onClose();
              }}
            >
              Marcar como Resuelta
            </Button>
          )}
        </div>
      </DialogContent>
    </Dialog>
  );
};

export default IncidentDetails;
