import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { 
  Search, 
  MapPin, 
  User, 
  Truck, 
  Stethoscope, 
  ChevronRight,
  ExternalLink,
  ShieldAlert,
  History,
  HeartPulse,
  Plus,
  RefreshCw,
  Clock,
  ClipboardList,
  Edit,
  X,
  Activity,
  AlertCircle
} from 'lucide-react';
import { Card } from '../components/Common';
import { incidentsApi } from '../api/incidents';
import type { Incident, Patient } from '../api/types';
import { motion, AnimatePresence, LayoutGroup } from 'framer-motion';
import L from 'leaflet';

// Fix Leaflet icon issue
// @ts-ignore
delete L.Icon.Default.prototype._getIconUrl;
L.Icon.Default.mergeOptions({
  iconRetinaUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon-2x.png',
  iconUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon.png',
  shadowUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png',
});

const LeafletMapPicker: React.FC<{ 
  lat: number, 
  lon: number, 
  onSelect: (lat: number, lon: number) => void,
  onClose: () => void
}> = ({ lat, lon, onSelect, onClose }) => {
  const mapRef = React.useRef<HTMLDivElement>(null);
  const mapInstanceRef = React.useRef<L.Map | null>(null);
  const markerRef = React.useRef<L.Marker | null>(null);

  useEffect(() => {
    if (!mapRef.current) return;

    const map = L.map(mapRef.current).setView([lat, lon], 13);
    mapInstanceRef.current = map;

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '&copy; OpenStreetMap contributors'
    }).addTo(map);

    const marker = L.marker([lat, lon], { draggable: true }).addTo(map);
    markerRef.current = marker;

    marker.on('dragend', () => {
      const pos = marker.getLatLng();
      onSelect(parseFloat(pos.lat.toFixed(6)), parseFloat(pos.lng.toFixed(6)));
    });

    map.on('click', (e) => {
      const pos = e.latlng;
      marker.setLatLng(pos);
      onSelect(parseFloat(pos.lat.toFixed(6)), parseFloat(pos.lng.toFixed(6)));
    });

    return () => {
      map.remove();
    };
  }, []);

  return (
    <div style={{ background: 'rgba(59, 130, 246, 0.05)', borderRadius: '15px', border: '1px solid var(--accent-cyan)', padding: '15px', marginBottom: '10px' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '10px', alignItems: 'center' }}>
        <span style={{ fontSize: '0.7rem', fontWeight: 800, color: 'var(--accent-cyan)' }}>PRECISION MAP PICKER (DRAG MARKER OR CLICK)</span>
        <button type="button" onClick={onClose} style={{ background: 'none', border: 'none', color: 'var(--text-secondary)', cursor: 'pointer' }}>
          <X size={14} />
        </button>
      </div>
      <div 
        ref={mapRef}
        style={{ 
          width: '100%', 
          height: '300px', 
          borderRadius: '10px', 
          overflow: 'hidden',
          border: '1px solid rgba(0,0,0,0.05)',
          zIndex: 5
        }}
      />
      <div style={{ marginTop: '10px', fontSize: '0.65rem', color: 'var(--text-secondary)', display: 'flex', justifyContent: 'space-between' }}>
        <span>LAT: {lat} | LON: {lon}</span>
        <span style={{ color: 'var(--accent-cyan)', fontWeight: 700 }}>MARKER IS DRAGGABLE</span>
      </div>
    </div>
  );
};

const getSeverityStyle = (severity: string) => {
  if (severity === 'CRITICAL') {
    return {
      background: 'linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(239, 68, 68, 0.02) 100%)',
      color: 'var(--alert-red)',
      border: '1px solid rgba(239, 68, 68, 0.3)',
      iconColor: 'var(--alert-red)',
      shadow: '0 4px 12px rgba(239, 68, 68, 0.1)'
    };
  }
  if (severity === 'HIGH') {
    return {
      background: 'linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(245, 158, 11, 0.02) 100%)',
      color: 'var(--warning-amber)',
      border: '1px solid rgba(245, 158, 11, 0.3)',
      iconColor: 'var(--warning-amber)',
      shadow: '0 4px 12px rgba(245, 158, 11, 0.1)'
    };
  }
  return {
    background: 'linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(59, 130, 246, 0.02) 100%)',
    color: 'var(--accent-cyan)',
    border: '1px solid rgba(59, 130, 246, 0.3)',
    iconColor: 'var(--accent-cyan)',
    shadow: '0 4px 12px rgba(59, 130, 246, 0.1)'
  };
};

export const LiveIncidents: React.FC = () => {
  const navigate = useNavigate();
  const [incidents, setIncidents] = useState<Incident[]>([]);
  const [selectedIncident, setSelectedIncident] = useState<Incident | null>(null);
  const [isLoading, setIsLoading] = useState(true);
  const [isLoadingDetails, setIsLoadingDetails] = useState(false);
  const [activeTab, setActiveTab] = useState<'details' | 'timeline' | 'audit'>('details');
  const [timelineData, setTimelineData] = useState<any[]>([]);
  const [auditData, setAuditData] = useState<any[]>([]);
  const [searchQuery, setSearchQuery] = useState('');
  const [recommendedVehicles, setRecommendedVehicles] = useState<any[]>([]);
  const [isDispatchLoading, setIsDispatchLoading] = useState(false);
  const [isDispatchModalOpen, setIsDispatchModalOpen] = useState(false);
  
  // Patient Modal states
  const [isAddPatientsModalOpen, setIsAddPatientsModalOpen] = useState(false);
  const [bulkPatients, setBulkPatients] = useState<any[]>([
    { gender: 'Male', triage_code: 'RED', symptoms: [] }
  ]);
  const [isMapPickerOpen, setIsMapPickerOpen] = useState(false);
  
  // Modal states
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [modalType, setModalType] = useState<'create' | 'edit'>('create');
  const [formData, setFormData] = useState<Partial<Incident>>({
    category: 'MEDICAL',
    severity: 'HIGH',
    gps_lat: 12.9716,
    gps_lon: 77.5946,
    address: '',
    notes: '',
    patients: [
      {
        name: '',
        age: 0,
        gender: 'Male',
        symptoms: [],
        triage_code: 'GREEN'
      }
    ],
    caller_id: JSON.parse(localStorage.getItem('teleems_user') || '{}').id || '',
    organisationId: null
  });

  const getAuthToken = () => localStorage.getItem('teleems_token') || '';

  const fetchIncidents = async () => {
    const token = getAuthToken();
    if (!token) {
      navigate('/login');
      return;
    }
    setIsLoading(true);
    try {
      const response = await incidentsApi.getIncidents({ 
        status: 'PENDING', 
        limit: 10,
        date_from: '2026-04-01'
      }, token);
      
      if (response && response.status === 401) {
        navigate('/login');
        return;
      }
      
      if (response && response.status === 200 && Array.isArray(response.data)) {
        // Ensure coordinates are numbers for all incidents
        const processedIncidents = response.data.map((inc: any) => ({
          ...inc,
          gps_lat: Number(inc.gps_lat),
          gps_lon: Number(inc.gps_lon)
        }));
        
        setIncidents(processedIncidents);
        if (processedIncidents.length > 0 && !selectedIncident) {
          fetchIncidentDetails(processedIncidents[0].id);
        }
      }
    } catch (error) {
      console.error('Failed to fetch incidents:', error);
    } finally {
      setIsLoading(false);
    }
  };

  const fetchIncidentDetails = async (id: string) => {
    const token = getAuthToken();
    setIsLoadingDetails(true);
    try {
      const response = await incidentsApi.getIncidentById(id, token);
      if (response && response.status === 401) {
        navigate('/login');
        return;
      }
      if (response && response.status === 200) {
        const incident = (response.data as any).data || response.data;
        
        if (incident) {
          incident.gps_lat = Number(incident.gps_lat);
          incident.gps_lon = Number(incident.gps_lon);
        }
        
        setSelectedIncident(incident);
        
        const [timelineResp, auditResp] = await Promise.all([
          incidentsApi.getIncidentTimeline(id, token),
          incidentsApi.getIncidentAudit(id, token)
        ]);
        
        if (timelineResp.status === 200) {
          const rawTimeline = timelineResp.data as any;
          setTimelineData(Array.isArray(rawTimeline) ? rawTimeline : (rawTimeline?.data || []));
        }
        if (auditResp.status === 200) {
          const rawAudit = auditResp.data as any;
          setAuditData(Array.isArray(rawAudit) ? rawAudit : (rawAudit?.data || []));
        }
      }
    } catch (error) {
      console.error('Failed to fetch incident details:', error);
    } finally {
      setIsLoadingDetails(false);
    }
  };

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

  const handleCreateOrUpdate = async (e: React.FormEvent) => {
    const token = getAuthToken();
    e.preventDefault();
    try {
      if (modalType === 'create') {
        const payload = {
          category: formData.category,
          severity: formData.severity,
          gps_lat: Number(formData.gps_lat),
          gps_lon: Number(formData.gps_lon),
          address: formData.address,
          notes: formData.notes,
          patients: formData.patients?.map(p => ({
            ...p,
            triage_code: p.triage_code || 'GREEN'
          }))
        };
        const response = await incidentsApi.createIncident(payload, token);
        if (response.status === 201 || response.status === 200) {
          setIsModalOpen(false);
          fetchIncidents();
        }
      } else if (selectedIncident) {
        // PATCH Mission Update
        const patchPayload = {
          category: formData.category,
          severity: formData.severity,
          notes: formData.notes,
          address: formData.address,
          gps_lat: Number(formData.gps_lat),
          gps_lon: Number(formData.gps_lon),
          patients: formData.patients
        };
        const response = await incidentsApi.updateIncident(selectedIncident.id, patchPayload, token);
        if (response.status === 200) {
          setIsModalOpen(false);
          fetchIncidentDetails(selectedIncident.id);
          fetchIncidents();
        }
      }
    } catch (error) {
      console.error('Operation failed:', error);
    }
  };

  const openCreateModal = () => {
    setModalType('create');
    setFormData({
      category: 'MEDICAL',
      severity: 'HIGH',
      gps_lat: 12.9716,
      gps_lon: 77.5946,
      address: '',
      notes: '',
      patients: [{ 
        name: '', 
        age: 0, 
        gender: 'Male', 
        symptoms: [],
        triage_code: 'GREEN'
      }],
      caller_id: JSON.parse(localStorage.getItem('teleems_user') || '{}').id || '',
      organisationId: null
    });
    setIsModalOpen(true);
  };

  const openEditModal = () => {
    if (!selectedIncident) return;
    setModalType('edit');
    setFormData({
      category: selectedIncident.category,
      severity: selectedIncident.severity,
      notes: selectedIncident.notes,
      address: selectedIncident.address,
      gps_lat: selectedIncident.gps_lat,
      gps_lon: selectedIncident.gps_lon,
      patients: selectedIncident.patients
    });
    setIsModalOpen(true);
  };

  const handleRecommend = async () => {
    if (!selectedIncident) return;
    const token = getAuthToken();
    setIsDispatchLoading(true);
    try {
      const response = await incidentsApi.recommendDispatch({
        gps_lat: selectedIncident.gps_lat,
        gps_lon: selectedIncident.gps_lon,
        vehicle_type_required: selectedIncident.category === 'CARDIAC' ? 'ALS' : 'BLS'
      }, token);
      
      if (response.status === 200 || response.status === 201) {
        const vehicles = (response.data as any).data || response.data;
        setRecommendedVehicles(Array.isArray(vehicles) ? vehicles : []);
        setIsDispatchModalOpen(true);
      }
    } catch (error) {
      console.error('Failed to get recommendations:', error);
    } finally {
      setIsDispatchLoading(false);
    }
  };

  const handleDispatch = async (vehicleId: string) => {
    if (!selectedIncident) return;
    const token = getAuthToken();
    try {
      const response = await incidentsApi.dispatchVehicle(selectedIncident.id, vehicleId, token);
      if (response.status === 200 || response.status === 201) {
        setIsDispatchModalOpen(false);
        fetchIncidentDetails(selectedIncident.id);
        fetchIncidents();
      }
    } catch (error) {
      console.error('Dispatch failed:', error);
    }
  };

  const handleBulkAddPatients = async () => {
    if (!selectedIncident) return;
    const token = getAuthToken();
    try {
      const response = await incidentsApi.addPatientsToIncident(selectedIncident.id, bulkPatients, token);
      if (response.status === 200 || response.status === 201) {
        setIsAddPatientsModalOpen(false);
        fetchIncidentDetails(selectedIncident.id);
        setBulkPatients([{ gender: 'Male', triage_code: 'RED', symptoms: [] }]);
      }
    } catch (error) {
      console.error('Bulk add patients failed:', error);
    }
  };

  const handleMapClick = (e: React.MouseEvent<HTMLDivElement>) => {
    const rect = e.currentTarget.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;
    
    // Map relative click to Bangalore coordinates (approximate scaling)
    // Bangalore is roughly 12.85 to 13.10 Lat, 77.45 to 77.75 Lon
    const lat = 13.10 - (y / rect.height) * (13.10 - 12.85);
    const lon = 77.45 + (x / rect.width) * (77.75 - 77.45);
    
    setFormData(prev => ({
      ...prev,
      gps_lat: parseFloat(lat.toFixed(6)),
      gps_lon: parseFloat(lon.toFixed(6))
    }));
    setIsMapPickerOpen(false);
  };

  const filteredIncidents = incidents.filter(inc => 
    inc.address.toLowerCase().includes(searchQuery.toLowerCase()) ||
    inc.id.toLowerCase().includes(searchQuery.toLowerCase()) ||
    inc.category.toLowerCase().includes(searchQuery.toLowerCase())
  );

  const incidentSeverityStyles = selectedIncident ? getSeverityStyle(selectedIncident.severity) : getSeverityStyle('LOW');
  
  const selectedMapUrl = selectedIncident 
    ? `https://www.openstreetmap.org/export/embed.html?bbox=${selectedIncident.gps_lon - 0.05}%2C${selectedIncident.gps_lat - 0.05}%2C${selectedIncident.gps_lon + 0.05}%2C${selectedIncident.gps_lat + 0.05}&layer=mapnik&marker=${selectedIncident.gps_lat}%2C${selectedIncident.gps_lon}`
    : `https://www.openstreetmap.org/export/embed.html?bbox=77.5%2C12.9%2C78.5%2C13.9&layer=mapnik`;

  return (
    <div className="page-container" style={{ display: 'flex', flexDirection: 'column', gap: '20px', paddingBottom: '40px' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: '20px', flexWrap: 'wrap' }}>
        <div>
          <div style={{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '8px' }}>
            <div className="pulse-dot-red"></div>
            <span style={{ fontSize: '0.75rem', fontWeight: 700, color: 'var(--alert-red)', letterSpacing: '0.1em' }}>LIVE COMMAND OPERATIONS</span>
          </div>
          <h1 style={{ fontSize: '2rem', fontWeight: 800, margin: 0, background: 'linear-gradient(to right, var(--text-primary), var(--text-secondary))', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent' }}>
            Incident Queue
          </h1>
        </div>

        <div style={{ display: 'flex', gap: '12px', alignItems: 'center' }}>
          <div style={{ position: 'relative', minWidth: '240px' }}>
            <Search size={16} style={{ position: 'absolute', left: '12px', top: '50%', transform: 'translateY(-50%)', color: 'var(--text-secondary)' }} />
            <input
              type="text"
              placeholder="Search Mission ID, Location..."
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              className="glass"
              style={{
                width: '100%',
                padding: '12px 12px 12px 40px',
                border: '1px solid var(--card-border)',
                borderRadius: '10px',
                color: 'var(--text-primary)',
                fontSize: '0.8rem',
              }}
            />
          </div>
          <div className="glass" style={{ padding: '12px 20px', display: 'flex', flexDirection: 'column', minWidth: '140px' }}>
            <span style={{ fontSize: '0.7rem', color: 'var(--text-secondary)', fontWeight: 600 }}>TOTAL PENDING</span>
            <span className="mono" style={{ fontSize: '1.5rem', fontWeight: 700, color: 'var(--accent-cyan)' }}>{incidents.length}</span>
          </div>
          <div className="glass" style={{ padding: '12px 20px', display: 'flex', flexDirection: 'column', minWidth: '140px' }}>
            <span style={{ fontSize: '0.7rem', color: 'var(--text-secondary)', fontWeight: 600 }}>CRITICAL STATUS</span>
            <span className="mono" style={{ fontSize: '1.5rem', fontWeight: 700, color: 'var(--alert-red)' }}>
              {incidents.filter(i => i.severity === 'CRITICAL').length}
            </span>
          </div>
          <button 
            onClick={openCreateModal}
            className="glow-cyan hover-glow"
            style={{ 
              padding: '0 24px', 
              borderRadius: '12px', 
              background: 'var(--accent-cyan)', 
              color: '#fff', 
              border: 'none', 
              fontWeight: 800, 
              display: 'flex', 
              alignItems: 'center', 
              gap: '10px',
              cursor: 'pointer',
              height: '54px',
              whiteSpace: 'nowrap'
            }}
          >
            <Plus size={20} strokeWidth={3} /> ADD NEW INCIDENT
          </button>
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) 400px', gap: '24px', height: 'calc(100vh - 200px)' }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: '24px', overflow: 'hidden' }}>
          <div className="glass glow-cyan" style={{ height: '50%', flexShrink: 0, position: 'relative', overflow: 'hidden', border: '1px solid var(--card-border)' }}>
            <div style={{ position: 'absolute', top: '15px', left: '15px', zIndex: 10, display: 'flex', gap: '10px' }}>
              <div className="glass" style={{ padding: '8px 12px', fontSize: '0.75rem', fontWeight: 700, display: 'flex', alignItems: 'center', gap: '8px', background: 'rgba(255,255,255,0.8)' }}>
                <MapPin size={14} color="var(--accent-cyan)" />
                GEO-SPATIAL OPS CENTRE
              </div>
            </div>
            
            <iframe
              title="live-incident-map"
              src={selectedMapUrl}
              width="100%"
              height="100%"
              style={{ border: 0 }}
              loading="lazy"
            />
            
            <div style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, pointerEvents: 'none', background: 'radial-gradient(circle, transparent 70%, rgba(255, 255, 255, 0.4) 100%)' }}></div>
          </div>

          <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: '12px', overflow: 'hidden' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <h3 style={{ fontSize: '1rem', fontWeight: 700, margin: 0, display: 'flex', alignItems: 'center', gap: '8px' }}>
                <ClipboardList size={18} color="var(--accent-cyan)" />
                OPERATIONAL QUEUE
              </h3>
              <div style={{ display: 'flex', gap: '8px' }}>
                <button onClick={fetchIncidents} className="glass" style={{ padding: '6px', borderRadius: '6px', cursor: 'pointer' }}>
                  <RefreshCw size={14} className={isLoading ? 'spin' : ''} />
                </button>
              </div>
            </div>

            <div style={{ flex: 1, overflowY: 'auto', paddingRight: '4px', display: 'flex', flexDirection: 'column', gap: '10px' }}>
              {isLoading ? (
                <div style={{ height: '200px', display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column', gap: '12px' }}>
                  <RefreshCw size={32} className="spin" color="var(--accent-cyan)" />
                  <span style={{ color: 'var(--text-secondary)', fontSize: '0.9rem' }}>Synchronizing field data...</span>
                </div>
              ) : filteredIncidents.length === 0 ? (
                <div style={{ height: '300px', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', color: 'var(--text-secondary)', border: '1px dashed var(--card-border)', borderRadius: '12px', gap: '16px' }}>
                  <AlertCircle size={32} opacity={0.5} />
                  <span>No active incidents match the current filter.</span>
                  <button 
                    onClick={openCreateModal}
                    className="glass hover-glow"
                    style={{ padding: '10px 20px', borderRadius: '8px', border: '1px solid var(--accent-cyan)', color: 'var(--accent-cyan)', cursor: 'pointer', fontWeight: 700, fontSize: '0.8rem' }}
                  >
                    ADD INCIDENT
                  </button>
                </div>
              ) : filteredIncidents.map((inc) => (
                <motion.div
                  key={inc.id}
                  whileHover={{ x: 4 }}
                  onClick={() => fetchIncidentDetails(inc.id)}
                  className={`glass hover-glow ${selectedIncident?.id === inc.id ? 'glow-cyan' : ''}`}
                  style={{ 
                    padding: '16px', 
                    cursor: 'pointer',
                    borderLeft: `4px solid ${inc.severity === 'CRITICAL' ? 'var(--alert-red)' : inc.severity === 'HIGH' ? 'var(--warning-amber)' : 'var(--accent-cyan)'}`,
                    background: selectedIncident?.id === inc.id ? 'rgba(59, 130, 246, 0.1)' : 'var(--glass-bg)',
                    display: 'grid',
                    gridTemplateColumns: '1fr auto auto',
                    alignItems: 'center',
                    gap: '20px'
                  }}
                >
                  <div>
                    <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
                      <span className="mono" style={{ fontWeight: 800, fontSize: '0.9rem', color: inc.severity === 'CRITICAL' ? 'var(--alert-red)' : 'var(--text-primary)' }}>
                        {inc.id.split('-').pop()?.toUpperCase()}
                      </span>
                      <span style={{ fontSize: '0.7rem', padding: '2px 8px', borderRadius: '4px', background: 'rgba(0,0,0,0.03)', color: 'var(--text-secondary)' }}>
                        {inc.category}
                      </span>
                    </div>
                    <div style={{ fontSize: '0.8rem', color: 'var(--text-secondary)', marginTop: '6px', display: 'flex', alignItems: 'center', gap: '6px' }}>
                      <MapPin size={12} /> {inc.address}
                    </div>
                  </div>

                  <div style={{ textAlign: 'center' }}>
                    <div style={{ fontSize: '0.65rem', color: 'var(--text-secondary)', marginBottom: '4px' }}>SEVERITY</div>
                    <div style={{ 
                      fontSize: '0.75rem', 
                      fontWeight: 800, 
                      color: inc.severity === 'CRITICAL' ? 'var(--alert-red)' : inc.severity === 'HIGH' ? 'var(--warning-amber)' : 'var(--accent-cyan)'
                    }}>
                      {inc.severity}
                    </div>
                  </div>

                  <div style={{ textAlign: 'right' }}>
                    <div style={{ fontSize: '0.65rem', color: 'var(--text-secondary)', marginBottom: '4px' }}>LOGGED</div>
                    <div className="mono" style={{ fontSize: '0.8rem' }}>
                      {new Date(inc.createdAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
                    </div>
                  </div>
                </motion.div>
              ))}
            </div>
          </div>
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: '20px', overflow: 'hidden' }}>
          <Card 
            title={
              <div style={{ display: 'flex', alignItems: 'center', gap: '12px', width: '100%' }}>
                <div style={{ display: 'flex', flexDirection: 'column' }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '4px' }}>
                    <div className={selectedIncident?.severity === 'CRITICAL' ? 'pulse-dot-red' : 'pulse-dot-cyan'} style={{ width: '8px', height: '8px' }}></div>
                    <span style={{ fontSize: '0.65rem', fontWeight: 800, color: selectedIncident?.severity === 'CRITICAL' ? 'var(--alert-red)' : 'var(--accent-cyan)', letterSpacing: '0.1em' }}>
                      {selectedIncident?.severity === 'CRITICAL' ? 'CRITICAL OPERATIONS' : 'MISSION REPORT'}
                    </span>
                  </div>
                  <span style={{ fontSize: '1.2rem', fontWeight: 800, letterSpacing: '-0.02em', color: 'var(--text-primary)' }}>SITUATION REPORT</span>
                </div>
                {selectedIncident && (
                  <div style={{ marginLeft: 'auto', display: 'flex', gap: '8px' }}>
                    <div className="glass" style={{ padding: '6px 12px', borderRadius: '20px', fontSize: '0.65rem', fontWeight: 800, background: 'rgba(0,0,0,0.03)', color: 'var(--text-secondary)', border: '1px solid var(--card-border)' }}>
                      ID: {selectedIncident.id.split('-').pop()?.toUpperCase()}
                    </div>
                  </div>
                )}
              </div>
            } 
            className={selectedIncident?.severity === 'CRITICAL' ? 'glow-red' : 'glow-cyan'}
            style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}
          >
            {!selectedIncident ? (
              <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', color: 'var(--text-secondary)', gap: '16px', textAlign: 'center' }}>
                <div style={{ width: '60px', height: '60px', borderRadius: '50%', border: '1px dashed var(--card-border)', display: 'flex', alignItems: 'center', justifyContent: 'center', opacity: 0.5 }}>
                  <AlertCircle size={30} />
                </div>
                <div>
                  <p style={{ fontWeight: 700, margin: 0 }}>STANDBY MODE</p>
                  <p style={{ fontSize: '0.75rem', marginTop: '4px' }}>Select an active incident from the queue<br/>to begin field operations.</p>
                </div>
              </div>
            ) : (
              <div style={{ display: 'flex', flexDirection: 'column', flex: 1, minHeight: 0, gap: '0px' }}>
                <div style={{ display: 'flex', flexDirection: 'column', gap: '16px', marginBottom: '20px' }}>
                  <div className="glass" style={{ 
                    padding: '20px', 
                    background: incidentSeverityStyles.background, 
                    borderColor: incidentSeverityStyles.border, 
                    borderRadius: '16px', 
                    border: '1px solid',
                    boxShadow: incidentSeverityStyles.shadow,
                    position: 'relative',
                    overflow: 'hidden'
                  }}>
                    <div style={{ position: 'absolute', top: 0, right: 0, width: '100px', height: '100px', background: `radial-gradient(circle, ${incidentSeverityStyles.iconColor}10 0%, transparent 70%)`, pointerEvents: 'none' }}></div>
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', position: 'relative', zIndex: 1 }}>
                      <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
                        <div style={{ 
                          width: '48px', 
                          height: '48px', 
                          borderRadius: '12px', 
                          background: 'white', 
                          display: 'flex', 
                          alignItems: 'center', 
                          justifyContent: 'center',
                          boxShadow: '0 4px 12px rgba(0,0,0,0.05)',
                          color: incidentSeverityStyles.iconColor
                        }}>
                          <ShieldAlert size={24} />
                        </div>
                        <div>
                          <div className="mono" style={{ fontSize: '0.65rem', fontWeight: 800, color: incidentSeverityStyles.color, marginBottom: '4px', textTransform: 'uppercase', letterSpacing: '0.1em' }}>
                            {selectedIncident.severity} PROTOCOL ACTIVE
                          </div>
                          <h4 style={{ fontSize: '1.25rem', fontWeight: 900, margin: 0, color: 'var(--text-primary)', letterSpacing: '-0.02em' }}>
                            {selectedIncident.category} EMERGENCY
                          </h4>
                        </div>
                      </div>
                      <button onClick={openEditModal} className="glass hover-glow" style={{ padding: '10px', borderRadius: '12px', cursor: 'pointer', background: 'white', border: '1px solid var(--card-border)', color: 'var(--text-secondary)' }}>
                        <Edit size={18} />
                      </button>
                    </div>
                  </div>

                  <div className="glass" style={{ display: 'flex', gap: '4px', padding: '4px', borderRadius: '12px', background: 'rgba(0,0,0,0.03)' }}>
                    <LayoutGroup id="incident-tabs">
                      {(['details', 'timeline', 'audit'] as const).map(tab => (
                        <button
                          key={tab}
                          onClick={() => setActiveTab(tab)}
                          style={{
                            flex: 1,
                            padding: '8px 12px',
                            background: 'none',
                            border: 'none',
                            color: activeTab === tab ? 'var(--text-primary)' : 'var(--text-secondary)',
                            cursor: 'pointer',
                            fontSize: '0.7rem',
                            fontWeight: 700,
                            textTransform: 'uppercase',
                            letterSpacing: '0.05em',
                            position: 'relative',
                            zIndex: 1,
                            display: 'flex',
                            alignItems: 'center',
                            justifyContent: 'center',
                            gap: '6px'
                          }}
                        >
                          {tab === 'details' && <ClipboardList size={14} />}
                          {tab === 'timeline' && <History size={14} />}
                          {tab === 'audit' && <ShieldAlert size={14} />}
                          {tab}
                          {activeTab === tab && (
                            <motion.div
                              layoutId="active-tab"
                              className={selectedIncident.severity === 'CRITICAL' ? 'glow-red' : 'glow-cyan'}
                              style={{
                                position: 'absolute',
                                inset: 0,
                                background: selectedIncident.severity === 'CRITICAL' ? 'rgba(239, 68, 68, 0.1)' : 'rgba(59, 130, 246, 0.1)',
                                borderRadius: '8px',
                                border: '1px solid',
                                borderColor: selectedIncident.severity === 'CRITICAL' ? 'var(--alert-red)' : 'var(--accent-cyan)',
                                zIndex: -1
                              }}
                              transition={{ type: 'spring', bounce: 0.2, duration: 0.6 }}
                            />
                          )}
                        </button>
                      ))}
                    </LayoutGroup>
                  </div>
                </div>

                <div style={{ flex: 1, overflowY: 'auto', paddingRight: '4px', minHeight: 0 }}>
                  <AnimatePresence mode="wait">
                    {activeTab === 'details' && (
                      <motion.div key="details" initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -10 }} style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
                        <div className="glass" style={{ padding: '16px', background: 'rgba(0,0,0,0.02)', borderRadius: '12px' }}>
                          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '12px' }}>
                            <div style={{ fontSize: '0.65rem', color: 'var(--text-secondary)', fontWeight: 800, textTransform: 'uppercase', letterSpacing: '0.05em' }}>Field Coordinates & Location</div>
                            <div className="mono" style={{ fontSize: '0.6rem', color: 'var(--accent-cyan)' }}>
                              {selectedIncident.gps_lat.toFixed(4)}, {selectedIncident.gps_lon.toFixed(4)}
                            </div>
                          </div>
                          <div style={{ display: 'flex', alignItems: 'flex-start', gap: '12px' }}>
                            <div style={{ padding: '8px', background: 'rgba(59, 130, 246, 0.1)', borderRadius: '8px', color: 'var(--accent-cyan)' }}>
                              <MapPin size={18} />
                            </div>
                            <div>
                              <div style={{ fontSize: '0.9rem', fontWeight: 600, color: 'var(--text-primary)', lineHeight: 1.4 }}>{selectedIncident.address}</div>
                              <p style={{ marginTop: '8px', fontSize: '0.8rem', color: 'var(--text-secondary)', fontStyle: 'italic', borderLeft: '2px solid var(--accent-cyan)', paddingLeft: '10px' }}>
                                "{selectedIncident.notes}"
                              </p>
                            </div>
                          </div>
                        </div>

                        <div>
                          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '12px' }}>
                            <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                              <Stethoscope size={16} color="var(--accent-cyan)" />
                              <div style={{ fontSize: '0.7rem', color: 'var(--text-secondary)', fontWeight: 800, textTransform: 'uppercase', letterSpacing: '0.05em' }}>Clinical Assessment</div>
                            </div>
                            <button 
                              onClick={() => setIsAddPatientsModalOpen(true)}
                              className="glass hover-glow"
                              style={{ padding: '6px 12px', fontSize: '0.65rem', fontWeight: 800, color: 'var(--accent-cyan)', border: '1px solid var(--accent-cyan)', borderRadius: '8px', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: '6px' }}
                            >
                              <Plus size={14} /> ADD SUBJECT
                            </button>
                          </div>
                          
                          <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
                            {selectedIncident.patients.map((p, idx) => (
                              <div key={idx} className="glass" style={{ padding: '16px', background: 'rgba(0,0,0,0.03)', border: '1px solid var(--card-border)', borderRadius: '12px', position: 'relative', overflow: 'hidden' }}>
                                <div style={{ position: 'absolute', top: 0, left: 0, bottom: 0, width: '4px', background: (p.triage_level || p.triage_code) === 'RED' ? 'var(--alert-red)' : (p.triage_level || p.triage_code) === 'YELLOW' ? 'var(--warning-amber)' : 'var(--accent-green)' }}></div>
                                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '10px' }}>
                                    <div style={{ minWidth: 0 }}>
                                      <div style={{ fontWeight: 800, fontSize: '0.9rem', color: 'var(--text-primary)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{p.name || 'ANONYMOUS-SUBJECT'}</div>
                                      <div style={{ fontSize: '0.65rem', color: 'var(--text-secondary)', marginTop: '2px', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{p.age || '?'}Y · {p.gender} · TRIAGE: {(p.triage_level || p.triage_code)?.toUpperCase()}</div>
                                    </div>
                                  <div style={{ 
                                    padding: '4px 8px', 
                                    borderRadius: '6px', 
                                    fontSize: '0.6rem', 
                                    fontWeight: 900, 
                                    background: (p.triage_level || p.triage_code) === 'RED' ? 'rgba(239, 68, 68, 0.1)' : 'rgba(0,0,0,0.02)',
                                    color: (p.triage_level || p.triage_code) === 'RED' ? 'var(--alert-red)' : 'var(--text-primary)',
                                    border: '1px solid',
                                    borderColor: (p.triage_level || p.triage_code) === 'RED' ? 'rgba(239, 68, 68, 0.2)' : 'var(--card-border)'
                                  }}>
                                    CODE {(p.triage_level || p.triage_code) || 'PENDING'}
                                  </div>
                                </div>
                                <div style={{ display: 'flex', flexWrap: 'wrap', gap: '6px' }}>
                                  {p.symptoms && Array.isArray(p.symptoms) ? p.symptoms.map((s: any, sIdx: number) => {
                                    const sName = typeof s === 'string' ? s : s?.name || 'Unknown';
                                    return (
                                      <span key={sIdx} className="mono" style={{ fontSize: '0.65rem', padding: '4px 8px', borderRadius: '6px', background: 'rgba(0,0,0,0.03)', color: 'var(--accent-cyan)', border: '1px solid rgba(59, 130, 246, 0.1)' }}>
                                        {String(sName).toUpperCase()}
                                      </span>
                                    );
                                  }) : <span style={{ fontSize: '0.7rem', color: 'var(--text-secondary)' }}>No symptoms recorded</span>}
                                </div>
                              </div>
                            ))}
                          </div>
                        </div>

                        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '16px' }}>
                          <div className="glass" style={{ padding: '16px', borderRadius: '12px', background: 'rgba(0,0,0,0.03)' }}>
                            <div style={{ fontSize: '0.6rem', color: 'var(--text-secondary)', fontWeight: 800, marginBottom: '10px', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Assigned Unit</div>
                            <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
                              <div style={{ padding: '8px', background: 'rgba(59, 130, 246, 0.1)', borderRadius: '8px', color: 'var(--accent-cyan)' }}>
                                <Truck size={16} />
                              </div>
                              <div>
                                <div className="mono" style={{ fontWeight: 800, fontSize: '0.9rem', color: 'var(--text-primary)' }}>{selectedIncident.assigned_vehicle || 'DISPATCHING...'}</div>
                                <div style={{ fontSize: '0.6rem', color: 'var(--text-secondary)', marginTop: '2px' }}>ALS UNIT EN-ROUTE</div>
                              </div>
                            </div>
                          </div>
                          <div className="glass" style={{ padding: '16px', borderRadius: '12px', background: 'rgba(0,0,0,0.03)' }}>
                            <div style={{ fontSize: '0.6rem', color: 'var(--text-secondary)', fontWeight: 800, marginBottom: '10px', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Estimated ETA</div>
                            <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
                              <div style={{ padding: '8px', background: 'rgba(245, 158, 11, 0.1)', borderRadius: '8px', color: 'var(--warning-amber)' }}>
                                <Clock size={16} />
                              </div>
                              <div>
                                <div className="mono" style={{ fontWeight: 800, fontSize: '0.9rem', color: 'var(--text-primary)' }}>{selectedIncident.eta_seconds ? `${Math.ceil(selectedIncident.eta_seconds/60)} MIN` : 'CALCULATING...'}</div>
                                <div style={{ fontSize: '0.6rem', color: 'var(--text-secondary)', marginTop: '2px' }}>REAL-TIME TRAFFIC</div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </motion.div>
                    )}

                    {activeTab === 'timeline' && (
                      <motion.div key="timeline" initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -10 }} style={{ padding: '10px' }}>
                        <div style={{ position: 'relative', paddingLeft: '24px' }}>
                          <div style={{ position: 'absolute', left: '7px', top: '0', bottom: '0', width: '2px', background: 'rgba(0,0,0,0.03)' }}></div>
                          {Array.isArray(timelineData) && timelineData.length > 0 ? timelineData.map((step, i) => (
                            <div key={i} style={{ marginBottom: '24px', position: 'relative' }}>
                              <div style={{ position: 'absolute', left: '-22px', top: '4px', width: '10px', height: '10px', borderRadius: '50%', background: 'var(--accent-cyan)', border: '2px solid var(--base-bg)', boxShadow: '0 0 10px var(--accent-cyan)' }}></div>
                              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '4px' }}>
                                <span style={{ fontSize: '0.8rem', fontWeight: 700, color: 'var(--text-primary)' }}>{step.event || step.step}</span>
                                <span className="mono" style={{ fontSize: '0.7rem', color: 'var(--text-secondary)' }}>
                                  {new Date(step.timestamp || 0).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
                                </span>
                              </div>
                              {step.notes && <p style={{ fontSize: '0.75rem', color: 'var(--text-secondary)', margin: 0, lineHeight: 1.4 }}>{step.notes}</p>}
                            </div>
                          )) : (
                            <div style={{ padding: '40px 0', textAlign: 'center', color: 'var(--text-secondary)', fontSize: '0.8rem' }}>No timeline events recorded yet.</div>
                          )}
                        </div>
                      </motion.div>
                    )}

                    {activeTab === 'audit' && (
                      <motion.div key="audit" initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -10 }} style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
                        {Array.isArray(auditData) && auditData.length > 0 ? auditData.map((log, i) => (
                          <div key={i} className="glass" style={{ padding: '14px', background: 'rgba(0,0,0,0.02)', borderRadius: '10px' }}>
                            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '8px' }}>
                              <span className="mono" style={{ fontWeight: 800, fontSize: '0.75rem', color: 'var(--warning-amber)' }}>{log.action.replace(/_/g, ' ')}</span>
                              <span className="mono" style={{ fontSize: '0.65rem', color: 'var(--text-secondary)' }}>{new Date(log.timestamp).toLocaleString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' })}</span>
                            </div>
                            <div style={{ fontSize: '0.7rem', color: 'var(--text-secondary)', display: 'flex', justifyContent: 'space-between' }}>
                              <span>ACTOR: {log.user_id?.split('-').pop() || 'SYSTEM'}</span>
                              <span style={{ color: 'var(--accent-cyan)', opacity: 0.5 }}>#{i+1}</span>
                            </div>
                          </div>
                        )) : (
                          <div style={{ padding: '40px 0', textAlign: 'center', color: 'var(--text-secondary)', fontSize: '0.8rem' }}>No audit logs found.</div>
                        )}
                      </motion.div>
                    )}
                  </AnimatePresence>
                </div>

                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '16px', paddingTop: '24px', marginTop: 'auto', borderTop: '1px solid var(--card-border)' }}>
                  <button 
                    onClick={handleRecommend}
                    className={selectedIncident.assigned_vehicle ? 'glass' : 'glow-cyan hover-glow'} 
                    disabled={isDispatchLoading || !!selectedIncident.assigned_vehicle}
                    style={{ 
                      padding: '18px', 
                      borderRadius: '14px', 
                      background: selectedIncident.assigned_vehicle ? 'rgba(0,0,0,0.03)' : 'linear-gradient(135deg, var(--accent-cyan), #2563eb)', 
                      color: selectedIncident.assigned_vehicle ? 'var(--text-secondary)' : '#fff', 
                      border: 'none', 
                      fontWeight: 900, 
                      fontSize: '0.85rem', 
                      cursor: selectedIncident.assigned_vehicle ? 'default' : 'pointer', 
                      display: 'flex', 
                      alignItems: 'center', 
                      justifyContent: 'center', 
                      gap: '12px',
                      textTransform: 'uppercase',
                      letterSpacing: '0.08em',
                      boxShadow: selectedIncident.assigned_vehicle ? 'none' : '0 8px 20px rgba(59, 130, 246, 0.3)',
                      transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)'
                    }}
                  >
                    {isDispatchLoading ? <RefreshCw size={20} className="spin" /> : <Truck size={20} />} 
                    <span>{selectedIncident.assigned_vehicle ? 'MISSION ASSIGNED' : 'DISPATCH UNIT'}</span>
                  </button>
                  <button className="hover-glow" style={{ 
                    padding: '18px', 
                    borderRadius: '14px', 
                    background: 'white', 
                    color: 'var(--alert-red)', 
                    border: '2px solid var(--alert-red)', 
                    fontWeight: 900, 
                    fontSize: '0.85rem', 
                    cursor: 'pointer', 
                    display: 'flex', 
                    alignItems: 'center', 
                    justifyContent: 'center', 
                    gap: '12px', 
                    textTransform: 'uppercase', 
                    letterSpacing: '0.08em',
                    transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)'
                  }}>
                    <ShieldAlert size={20} /> <span>ESCALATE OPS</span>
                  </button>
                </div>
              </div>
            )}
          </Card>

          <Card 
            title={
              <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                <Activity size={16} color="var(--accent-green)" />
                <span>AMBIENT INTELLIGENCE</span>
                <div style={{ marginLeft: 'auto', display: 'flex', gap: '4px' }}>
                  <div style={{ width: '4px', height: '4px', borderRadius: '50%', background: 'var(--accent-green)' }}></div>
                  <div style={{ width: '4px', height: '4px', borderRadius: '50%', background: 'var(--accent-green)', opacity: 0.5 }}></div>
                  <div style={{ width: '4px', height: '4px', borderRadius: '50%', background: 'var(--accent-green)', opacity: 0.2 }}></div>
                </div>
              </div>
            }
            subtitle="Real-time Field Intelligence & Transcription" 
            style={{ maxHeight: '240px' }}
          >
            <div className="glass" style={{ background: 'rgba(0,0,0,0.03)', padding: '16px', borderRadius: '12px', border: '1px solid rgba(0, 255, 157, 0.1)', height: '120px', overflowY: 'auto', position: 'relative' }}>
              <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: '100%', background: 'repeating-linear-gradient(0deg, rgba(0,0,0,0.02) 0px, rgba(0,0,0,0.02) 1px, transparent 1px, transparent 2px)', pointerEvents: 'none', opacity: 0.3 }}></div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: '12px', position: 'relative' }}>
                <div style={{ display: 'flex', gap: '12px', fontSize: '0.75rem', lineHeight: 1.5 }}>
                  <span className="mono" style={{ color: 'var(--accent-cyan)', fontWeight: 800, whiteSpace: 'nowrap' }}>[EMT-742]</span>
                  <span style={{ color: 'var(--text-primary)', opacity: 0.9 }}>"Awaiting medical direction. Patient HR 112, BP 140/90. Triage code verified as RED."</span>
                </div>
                <div style={{ display: 'flex', gap: '12px', fontSize: '0.75rem', lineHeight: 1.5 }}>
                  <span className="mono" style={{ color: 'var(--accent-green)', fontWeight: 800, whiteSpace: 'nowrap' }}>[SYS-AI]</span>
                  <span style={{ color: 'var(--accent-green)', fontWeight: 600 }}>HEMODYNAMIC DATA PARSED. UPDATING CLINICAL RECORD #INC-092.</span>
                </div>
                <div style={{ display: 'flex', gap: '12px', fontSize: '0.75rem', lineHeight: 1.5 }}>
                  <span className="mono" style={{ color: 'var(--text-secondary)', fontWeight: 800, whiteSpace: 'nowrap' }}>[PILOT]</span>
                  <span style={{ color: 'var(--text-secondary)' }}>"Traffic delay on Richmond Rd. ETA +2 mins."</span>
                </div>
              </div>
            </div>
          </Card>
        </div>
      </div>

      <AnimatePresence>
        {isModalOpen && (
          <div style={{ position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, background: 'rgba(255,255,255,0.85)', backdropFilter: 'blur(10px)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 1000, padding: '20px' }}>
            <motion.div initial={{ opacity: 0, scale: 0.95, y: 20 }} animate={{ opacity: 1, scale: 1, y: 0 }} exit={{ opacity: 0, scale: 0.95, y: 20 }} className="glass glow-cyan" style={{ width: '100%', maxWidth: '640px', background: 'var(--card-bg)', border: '1px solid var(--card-border)', borderRadius: '20px', overflow: 'hidden', display: 'flex', flexDirection: 'column', maxHeight: '90vh' }}>
              <div style={{ padding: '24px', borderBottom: '1px solid var(--card-border)', display: 'flex', justifyContent: 'space-between', alignItems: 'center', background: 'rgba(59, 130, 246, 0.05)' }}>
                <div>
                  <h3 style={{ fontSize: '1.25rem', fontWeight: 800, margin: 0, color: 'var(--accent-cyan)', letterSpacing: '-0.02em' }}>
                    {modalType === 'create' ? 'EMERGENCY DISPATCH PROTOCOL' : 'MODIFY MISSION PARAMETERS'}
                  </h3>
                  <p style={{ fontSize: '0.7rem', color: 'var(--text-secondary)', margin: '4px 0 0 0' }}>All entries are logged for clinical compliance.</p>
                </div>
                <button onClick={() => setIsModalOpen(false)} style={{ background: 'rgba(0,0,0,0.03)', border: 'none', color: 'var(--text-secondary)', cursor: 'pointer', width: '36px', height: '36px', borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <X size={20} />
                </button>
              </div>

              <div style={{ padding: '30px', overflowY: 'auto', flex: 1 }}>
                <form onSubmit={handleCreateOrUpdate} style={{ display: 'flex', flexDirection: 'column', gap: '24px' }}>
                  <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '20px' }}>
                    <div className="input-group">
                      <label style={{ fontSize: '0.7rem', fontWeight: 800, color: 'var(--text-secondary)', display: 'block', marginBottom: '10px', letterSpacing: '0.1em' }}>DISPATCH NATURE</label>
                      <select 
                        value={formData.category}
                        onChange={(e) => setFormData({...formData, category: e.target.value})}
                        style={{ width: '100%', padding: '12px', background: 'rgba(0,0,0,0.02)', border: '1px solid var(--card-border)', borderRadius: '10px', color: 'var(--text-primary)', fontSize: '0.85rem' }}
                      >
                        <option value="MEDICAL">MEDICAL EMERGENCY</option>
                        <option value="TRAUMA">TRAUMA / INJURY</option>
                        <option value="CARDIAC">CARDIAC ARREST / CHEST PAIN</option>
                        <option value="RESPIRATORY">RESPIRATORY DISTRESS</option>
                        <option value="ACCIDENT">RTA / ROAD ACCIDENT</option>
                      </select>
                    </div>
                    <div className="input-group">
                      <label style={{ fontSize: '0.7rem', fontWeight: 800, color: 'var(--text-secondary)', display: 'block', marginBottom: '10px', letterSpacing: '0.1em' }}>RESPONSE PRIORITY</label>
                      <select 
                        value={formData.severity}
                        onChange={(e) => setFormData({...formData, severity: e.target.value})}
                        style={{ width: '100%', padding: '12px', background: 'rgba(0,0,0,0.02)', border: '1px solid var(--card-border)', borderRadius: '10px', color: 'var(--text-primary)', fontSize: '0.85rem' }}
                      >
                        <option value="LOW">LEVEL 4 - ROUTINE</option>
                        <option value="MEDIUM">LEVEL 3 - URGENT</option>
                        <option value="HIGH">LEVEL 2 - EMERGENCY</option>
                        <option value="CRITICAL">LEVEL 1 - CRITICAL / LIFE-THREATENING</option>
                      </select>
                    </div>
                  </div>

                  <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '20px' }}>
                    <div className="input-group">
                      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '10px' }}>
                        <label style={{ fontSize: '0.7rem', fontWeight: 800, color: 'var(--text-secondary)', letterSpacing: '0.1em', margin: 0 }}>LATITUDE (WGS84)</label>
                        <button 
                          type="button" 
                          onClick={() => setIsMapPickerOpen(true)}
                          style={{ background: 'none', border: 'none', color: 'var(--accent-cyan)', fontSize: '0.65rem', fontWeight: 800, cursor: 'pointer', display: 'flex', alignItems: 'center', gap: '4px' }}
                        >
                          <MapPin size={10} /> SELECT ON MAP
                        </button>
                      </div>
                      <input 
                        type="number" 
                        step="0.0001"
                        value={formData.gps_lat}
                        onChange={(e) => setFormData({...formData, gps_lat: parseFloat(e.target.value) || 0})}
                        style={{ width: '100%', padding: '12px', background: 'rgba(0,0,0,0.02)', border: '1px solid var(--card-border)', borderRadius: '10px', color: 'var(--text-primary)', fontSize: '0.85rem' }}
                      />
                    </div>
                    <div className="input-group">
                      <label style={{ fontSize: '0.7rem', fontWeight: 800, color: 'var(--text-secondary)', display: 'block', marginBottom: '10px', letterSpacing: '0.1em' }}>LONGITUDE (WGS84)</label>
                      <input 
                        type="number" 
                        step="0.0001"
                        value={formData.gps_lon}
                        onChange={(e) => setFormData({...formData, gps_lon: parseFloat(e.target.value) || 0})}
                        style={{ width: '100%', padding: '12px', background: 'rgba(0,0,0,0.02)', border: '1px solid var(--card-border)', borderRadius: '10px', color: 'var(--text-primary)', fontSize: '0.85rem' }}
                      />
                    </div>
                  </div>

                  {isMapPickerOpen && (
                    <LeafletMapPicker 
                      lat={formData.gps_lat || 12.9716} 
                      lon={formData.gps_lon || 77.5946} 
                      onSelect={async (lat, lon) => {
                        setFormData(prev => ({ ...prev, gps_lat: lat, gps_lon: lon }));
                        
                        // Automatically fetch address via Reverse Geocoding
                        try {
                          const response = await fetch(`https://nominatim.openstreetmap.org/reverse?format=json&lat=${lat}&lon=${lon}`);
                          const data = await response.json();
                          if (data && data.display_name) {
                            setFormData(prev => ({ ...prev, address: data.display_name }));
                          }
                        } catch (error) {
                          console.error('Geocoding failed:', error);
                        }
                      }} 
                      onClose={() => setIsMapPickerOpen(false)} 
                    />
                  )}

                  <div className="input-group">
                    <label style={{ fontSize: '0.7rem', fontWeight: 800, color: 'var(--text-secondary)', display: 'block', marginBottom: '10px', letterSpacing: '0.1em' }}>INCIDENT VENUE / ADDRESS</label>
                    <div style={{ position: 'relative' }}>
                      <MapPin size={16} style={{ position: 'absolute', left: '12px', top: '14px', color: 'var(--accent-cyan)' }} />
                      <input 
                        type="text" 
                        placeholder="Verified street address or landmark..."
                        value={formData.address}
                        onChange={(e) => setFormData({...formData, address: e.target.value})}
                        style={{ width: '100%', padding: '12px 12px 12px 40px', background: 'rgba(0,0,0,0.02)', border: '1px solid var(--card-border)', borderRadius: '10px', color: 'var(--text-primary)', fontSize: '0.85rem' }}
                        required
                      />
                    </div>
                  </div>

                  <div className="input-group">
                    <label style={{ fontSize: '0.7rem', fontWeight: 800, color: 'var(--text-secondary)', display: 'block', marginBottom: '10px', letterSpacing: '0.1em' }}>CHIEF COMPLAINT / FIELD NOTES</label>
                    <textarea 
                      rows={3}
                      value={formData.notes}
                      onChange={(e) => setFormData({...formData, notes: e.target.value})}
                      placeholder="Enter specific caller details, hazards, or primary complaints..."
                      style={{ width: '100%', padding: '15px', background: 'rgba(0,0,0,0.02)', border: '1px solid var(--card-border)', borderRadius: '10px', color: 'var(--text-primary)', fontSize: '0.85rem', resize: 'none' }}
                    />
                  </div>

                  <div style={{ background: 'rgba(59, 130, 246, 0.03)', padding: '20px', borderRadius: '15px', border: '1px solid rgba(59, 130, 246, 0.1)' }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '16px' }}>
                      <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                        <User size={16} color="var(--accent-cyan)" />
                        <span style={{ fontWeight: 800, fontSize: '0.8rem', letterSpacing: '0.05em' }}>CLINICAL SUBJECTS / PATIENTS</span>
                      </div>
                      <button 
                        type="button"
                        onClick={() => {
                          const newPatients = [...(formData.patients || [])];
                          newPatients.push({ name: '', age: 0, gender: 'Male', symptoms: [], triage_code: 'GREEN' });
                          setFormData({ ...formData, patients: newPatients });
                        }}
                        style={{ background: 'rgba(59, 130, 246, 0.1)', border: '1px solid var(--accent-cyan)', color: 'var(--accent-cyan)', padding: '4px 10px', borderRadius: '6px', fontSize: '0.65rem', fontWeight: 800, cursor: 'pointer' }}
                      >
                        + ADD SUBJECT
                      </button>
                    </div>

                    <div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
                      {(formData.patients || []).map((patient, index) => (
                        <div key={index} style={{ padding: '15px', background: 'rgba(0,0,0,0.03)', borderRadius: '12px', border: '1px solid var(--card-border)', position: 'relative' }}>
                          <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '12px' }}>
                            <span style={{ fontSize: '0.7rem', fontWeight: 800, color: 'var(--text-secondary)' }}>SUBJECT #{index + 1}</span>
                            {formData.patients!.length > 1 && (
                              <button 
                                type="button"
                                onClick={() => {
                                  const newPatients = formData.patients!.filter((_, i) => i !== index);
                                  setFormData({ ...formData, patients: newPatients });
                                }}
                                style={{ background: 'none', border: 'none', color: 'var(--alert-red)', fontSize: '0.65rem', fontWeight: 800, cursor: 'pointer' }}
                              >
                                REMOVE
                              </button>
                            )}
                          </div>
                          
                          <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr', gap: '12px', marginBottom: '12px' }}>
                            <input 
                              type="text" 
                              placeholder="Full Name / Identification"
                              value={patient.name}
                              onChange={(e) => {
                                const newPatients = [...(formData.patients || [])];
                                newPatients[index] = { ...newPatients[index], name: e.target.value };
                                setFormData({ ...formData, patients: newPatients });
                              }}
                              style={{ padding: '10px', background: 'rgba(0,0,0,0.02)', border: '1px solid var(--card-border)', borderRadius: '8px', color: 'var(--text-primary)', fontSize: '0.8rem' }}
                            />
                            <input 
                              type="number" 
                              placeholder="Age"
                              value={patient.age || ''}
                              onChange={(e) => {
                                const newPatients = [...(formData.patients || [])];
                                newPatients[index] = { ...newPatients[index], age: parseInt(e.target.value) || 0 };
                                setFormData({ ...formData, patients: newPatients });
                              }}
                              style={{ padding: '10px', background: 'rgba(0,0,0,0.02)', border: '1px solid var(--card-border)', borderRadius: '8px', color: 'var(--text-primary)', fontSize: '0.8rem' }}
                            />
                            <select 
                              value={patient.gender}
                              onChange={(e) => {
                                const newPatients = [...(formData.patients || [])];
                                newPatients[index] = { ...newPatients[index], gender: e.target.value };
                                setFormData({ ...formData, patients: newPatients });
                              }}
                              style={{ padding: '10px', background: 'rgba(0,0,0,0.02)', border: '1px solid var(--card-border)', borderRadius: '8px', color: 'var(--text-primary)', fontSize: '0.8rem' }}
                            >
                              <option value="Male">MALE</option>
                              <option value="Female">FEMALE</option>
                              <option value="Other">OTHER</option>
                            </select>
                          </div>

                          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '12px' }}>
                            <div>
                              <label style={{ fontSize: '0.65rem', color: 'var(--text-secondary)', display: 'block', marginBottom: '6px', fontWeight: 700 }}>TRIAGE</label>
                              <select 
                                value={patient.triage_code}
                                onChange={(e) => {
                                  const newPatients = [...(formData.patients || [])];
                                  newPatients[index] = { ...newPatients[index], triage_code: e.target.value };
                                  setFormData({ ...formData, patients: newPatients });
                                }}
                                style={{ width: '100%', padding: '10px', background: 'rgba(0,0,0,0.02)', border: '1px solid var(--card-border)', borderRadius: '8px', color: 'var(--text-primary)', fontSize: '0.8rem' }}
                              >
                                <option value="GREEN">GREEN</option>
                                <option value="YELLOW">YELLOW</option>
                                <option value="RED">RED</option>
                                <option value="BLACK">BLACK</option>
                              </select>
                            </div>
                            <div>
                              <label style={{ fontSize: '0.65rem', color: 'var(--text-secondary)', display: 'block', marginBottom: '6px', fontWeight: 700 }}>SYMPTOMS</label>
                              <input 
                                type="text" 
                                placeholder="e.g. pain, bleeding"
                                value={patient.symptoms?.map((s: any) => typeof s === 'string' ? s : s?.name || '').join(', ')}
                                onChange={(e) => {
                                  const newPatients = [...(formData.patients || [])];
                                  newPatients[index] = { ...newPatients[index], symptoms: e.target.value.split(',').map(s => s.trim()).filter(s => s !== '') };
                                  setFormData({ ...formData, patients: newPatients });
                                }}
                                style={{ width: '100%', padding: '10px', background: 'rgba(0,0,0,0.02)', border: '1px solid var(--card-border)', borderRadius: '8px', color: 'var(--text-primary)', fontSize: '0.8rem' }}
                              />
                            </div>
                          </div>
                        </div>
                      ))}
                    </div>
                  </div>

                  <div style={{ display: 'flex', gap: '12px', marginTop: '10px' }}>
                    <button 
                      type="submit" 
                      className="glow-cyan"
                      style={{ flex: 1, padding: '16px', borderRadius: '12px', background: 'var(--accent-cyan)', color: '#fff', border: 'none', fontWeight: 800, cursor: 'pointer' }}
                    >
                      {modalType === 'create' ? 'CONFIRM & DISPATCH UNIT' : 'SAVE UPDATED PARAMETERS'}
                    </button>
                    <button 
                      type="button" 
                      onClick={() => setIsModalOpen(false)}
                      style={{ padding: '16px 24px', borderRadius: '12px', background: 'rgba(0,0,0,0.02)', color: 'var(--text-primary)', border: '1px solid var(--card-border)', fontWeight: 700, cursor: 'pointer' }}
                    >
                      ABORT
                    </button>
                  </div>
                </form>
              </div>
            </motion.div>
          </div>
        )}
      </AnimatePresence>

      {/* Dispatch Recommendation Modal */}
      <AnimatePresence>
        {isDispatchModalOpen && (
          <div style={{ position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, background: 'rgba(255,255,255,0.85)', backdropFilter: 'blur(10px)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 1100, padding: '20px' }}>
            <motion.div initial={{ opacity: 0, scale: 0.95 }} animate={{ opacity: 1, scale: 1 }} exit={{ opacity: 0, scale: 0.95 }} className="glass glow-cyan" style={{ width: '100%', maxWidth: '500px', background: 'var(--card-bg)', border: '1px solid var(--card-border)', borderRadius: '20px', overflow: 'hidden', display: 'flex', flexDirection: 'column', maxHeight: '80vh' }}>
              <div style={{ padding: '20px', borderBottom: '1px solid var(--card-border)', display: 'flex', justifyContent: 'space-between', alignItems: 'center', background: 'rgba(59, 130, 246, 0.05)' }}>
                <h3 style={{ fontSize: '1.1rem', fontWeight: 800, margin: 0, color: 'var(--accent-cyan)' }}>RECOMMENDED UNITS</h3>
                <button onClick={() => setIsDispatchModalOpen(false)} style={{ background: 'none', border: 'none', color: 'var(--text-secondary)', cursor: 'pointer' }}>
                  <X size={20} />
                </button>
              </div>
              <div style={{ padding: '20px', overflowY: 'auto' }}>
                {recommendedVehicles.length === 0 ? (
                  <div style={{ padding: '40px', textAlign: 'center', color: 'var(--text-secondary)' }}>
                    <AlertCircle size={32} style={{ marginBottom: '12px', opacity: 0.5 }} />
                    <p>No suitable vehicles available in range.</p>
                  </div>
                ) : (
                  <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
                    {recommendedVehicles.map((v) => (
                      <div key={v.id} className="glass" style={{ padding: '16px', display: 'grid', gridTemplateColumns: 'auto 1fr auto', alignItems: 'center', gap: '16px' }}>
                        <div style={{ padding: '10px', background: 'rgba(0,212,255,0.1)', borderRadius: '10px', color: 'var(--accent-cyan)' }}>
                          <Truck size={20} />
                        </div>
                        <div>
                          <div style={{ fontWeight: 800, fontSize: '0.9rem' }}>{v.id.split('-').pop().toUpperCase()}</div>
                          <div style={{ fontSize: '0.7rem', color: 'var(--text-secondary)' }}>{v.type} · {v.status}</div>
                        </div>
                        <button 
                          onClick={() => handleDispatch(v.id)}
                          className="glow-cyan"
                          style={{ padding: '8px 16px', borderRadius: '8px', background: 'var(--accent-cyan)', color: '#fff', border: 'none', fontWeight: 800, fontSize: '0.75rem', cursor: 'pointer' }}
                        >
                          DISPATCH
                        </button>
                      </div>
                    ))}
                  </div>
                )}
              </div>
            </motion.div>
          </div>
        )}
      </AnimatePresence>

      {/* Bulk Add Patients Modal */}
      <AnimatePresence>
        {isAddPatientsModalOpen && (
          <div style={{ position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, background: 'rgba(255,255,255,0.85)', backdropFilter: 'blur(10px)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 1200, padding: '20px' }}>
            <motion.div initial={{ opacity: 0, scale: 0.95 }} animate={{ opacity: 1, scale: 1 }} exit={{ opacity: 0, scale: 0.95 }} className="glass glow-cyan" style={{ width: '100%', maxWidth: '600px', background: 'var(--card-bg)', border: '1px solid var(--card-border)', borderRadius: '20px', overflow: 'hidden', display: 'flex', flexDirection: 'column', maxHeight: '90vh' }}>
              <div style={{ padding: '20px', borderBottom: '1px solid var(--card-border)', display: 'flex', justifyContent: 'space-between', alignItems: 'center', background: 'rgba(59, 130, 246, 0.05)' }}>
                <div>
                  <h3 style={{ fontSize: '1.1rem', fontWeight: 800, margin: 0, color: 'var(--accent-cyan)' }}>BULK PATIENT ADMISSION</h3>
                  <p style={{ fontSize: '0.65rem', color: 'var(--text-secondary)', margin: '4px 0 0 0' }}>Incident ID: {selectedIncident?.id.split('-').pop()?.toUpperCase()}</p>
                </div>
                <button onClick={() => setIsAddPatientsModalOpen(false)} style={{ background: 'none', border: 'none', color: 'var(--text-secondary)', cursor: 'pointer' }}>
                  <X size={20} />
                </button>
              </div>
              
              <div style={{ padding: '24px', overflowY: 'auto', flex: 1, display: 'flex', flexDirection: 'column', gap: '20px' }}>
                {bulkPatients.map((patient, index) => (
                  <div key={index} style={{ padding: '15px', background: 'rgba(0,0,0,0.02)', borderRadius: '12px', border: '1px solid var(--card-border)', position: 'relative' }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '15px' }}>
                      <span style={{ fontSize: '0.7rem', fontWeight: 800, color: 'var(--text-secondary)' }}>PATIENT #{index + 1}</span>
                      {bulkPatients.length > 1 && (
                        <button 
                          onClick={() => setBulkPatients(bulkPatients.filter((_, i) => i !== index))}
                          style={{ background: 'none', border: 'none', color: 'var(--alert-red)', fontSize: '0.65rem', fontWeight: 700, cursor: 'pointer' }}
                        >
                          REMOVE
                        </button>
                      )}
                    </div>
                    
                    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '15px', marginBottom: '15px' }}>
                      <div>
                        <label style={{ fontSize: '0.6rem', color: 'var(--text-secondary)', display: 'block', marginBottom: '6px' }}>GENDER</label>
                        <select 
                          value={patient.gender}
                          onChange={(e) => {
                            const newPatients = [...bulkPatients];
                            newPatients[index].gender = e.target.value;
                            setBulkPatients(newPatients);
                          }}
                          style={{ width: '100%', padding: '10px', background: 'rgba(0,0,0,0.02)', border: '1px solid var(--card-border)', borderRadius: '8px', color: 'var(--text-primary)', fontSize: '0.8rem' }}
                        >
                          <option value="Male">MALE</option>
                          <option value="Female">FEMALE</option>
                          <option value="Other">OTHER</option>
                        </select>
                      </div>
                      <div>
                        <label style={{ fontSize: '0.6rem', color: 'var(--text-secondary)', display: 'block', marginBottom: '6px' }}>TRIAGE CODE</label>
                        <select 
                          value={patient.triage_code}
                          onChange={(e) => {
                            const newPatients = [...bulkPatients];
                            newPatients[index].triage_code = e.target.value;
                            setBulkPatients(newPatients);
                          }}
                          style={{ width: '100%', padding: '10px', background: 'rgba(0,0,0,0.02)', border: '1px solid var(--card-border)', borderRadius: '8px', color: 'var(--text-primary)', fontSize: '0.8rem' }}
                        >
                          <option value="GREEN">GREEN - STABLE</option>
                          <option value="YELLOW">YELLOW - SERIOUS</option>
                          <option value="RED">RED - CRITICAL</option>
                          <option value="BLACK">BLACK - DECEASED</option>
                        </select>
                      </div>
                    </div>
                    
                    <div>
                      <label style={{ fontSize: '0.6rem', color: 'var(--text-secondary)', display: 'block', marginBottom: '6px' }}>SYMPTOMS (COMMA SEPARATED)</label>
                      <input 
                        type="text"
                        placeholder="e.g. Chest pain, Shortness of breath"
                        value={(patient.symptoms || []).map((s: any) => typeof s === 'string' ? s : s?.name || '').join(', ')}
                        onChange={(e) => {
                          const newPatients = [...bulkPatients];
                          newPatients[index].symptoms = e.target.value.split(',').map(s => s.trim()).filter(s => s !== '');
                          setBulkPatients(newPatients);
                        }}
                        style={{ width: '100%', padding: '10px', background: 'rgba(0,0,0,0.02)', border: '1px solid var(--card-border)', borderRadius: '8px', color: 'var(--text-primary)', fontSize: '0.8rem' }}
                      />
                    </div>
                  </div>
                ))}
                
                <button 
                  onClick={() => setBulkPatients([...bulkPatients, { gender: 'Male', triage_code: 'GREEN', symptoms: [] }])}
                  style={{ padding: '12px', background: 'rgba(0,0,0,0.02)', border: '1px dashed var(--card-border)', borderRadius: '12px', color: 'var(--text-secondary)', fontSize: '0.8rem', fontWeight: 700, cursor: 'pointer' }}
                >
                  + ADD ANOTHER SUBJECT
                </button>
              </div>
              
              <div style={{ padding: '20px', borderTop: '1px solid var(--card-border)', display: 'flex', gap: '12px' }}>
                <button 
                  onClick={handleBulkAddPatients}
                  className="glow-cyan"
                  style={{ flex: 1, padding: '14px', borderRadius: '10px', background: 'var(--accent-cyan)', color: '#fff', border: 'none', fontWeight: 800, cursor: 'pointer' }}
                >
                  AUTHENTICATE & LOG PATIENTS
                </button>
                <button 
                  onClick={() => setIsAddPatientsModalOpen(false)}
                  style={{ padding: '14px 20px', borderRadius: '10px', background: 'rgba(0,0,0,0.03)', color: 'var(--text-primary)', border: '1px solid var(--card-border)', fontWeight: 700, cursor: 'pointer' }}
                >
                  CANCEL
                </button>
              </div>
            </motion.div>
          </div>
        )}
      </AnimatePresence>
    </div>
  );
};
