import { X, Navigation, Battery, Compass, Clock } from 'lucide-react';
import { MapContainer, TileLayer, Marker } from 'react-leaflet';
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';
import { formatDistanceToNow } from 'date-fns';
import type { DriverLocation } from '@/types/gps';

interface DriverLocationModalProps {
  driverLocation: DriverLocation | null;
  isOpen: boolean;
  onClose: () => void;
}

// Custom driver marker icon (same as GpsTracking page)
const createDriverIcon = () => {
  return L.divIcon({
    className: 'custom-driver-marker',
    html: `
      <div style="
        background-color: #22c55e;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        border: 3px solid white;
        box-shadow: 0 2px 4px rgba(0,0,0,0.3);
        display: flex;
        align-items: center;
        justify-content: center;
      ">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="white">
          <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>
        </svg>
      </div>
    `,
    iconSize: [32, 32],
    iconAnchor: [16, 32],
    popupAnchor: [0, -32],
  });
};

function getCourseDirection(course: number | null): string {
  if (course === null || course === undefined) return 'N/A';
  const directions = ['N', 'NE', 'E', 'SE', 'S', 'SW', 'W', 'NW'];
  const index = Math.round(course / 45) % 8;
  return `${directions[index]} (${Math.round(course)}°)`;
}

export function DriverLocationModal({ driverLocation, isOpen, onClose }: DriverLocationModalProps) {
  if (!isOpen || !driverLocation) return null;

  const hasLocation = driverLocation.location !== null;

  return (
    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
      <div className="bg-card border border-border rounded-lg shadow-lg w-full max-w-lg overflow-hidden">
        {/* Header */}
        <div className="flex justify-between items-center p-4 border-b border-border">
          <div>
            <h3 className="text-lg font-semibold text-foreground">{driverLocation.driverName}</h3>
            {driverLocation.driverPhone && (
              <p className="text-sm text-muted-foreground">{driverLocation.driverPhone}</p>
            )}
          </div>
          <button
            onClick={onClose}
            className="text-muted-foreground hover:text-foreground transition-colors p-1 rounded hover:bg-accent"
          >
            <X className="h-5 w-5" />
          </button>
        </div>

        {/* Map */}
        {hasLocation ? (
          <>
            <div className="h-[300px]">
              <MapContainer
                key={driverLocation.driverId}
                center={[driverLocation.location!.latitude, driverLocation.location!.longitude]}
                zoom={16}
                style={{ height: '100%', width: '100%' }}
                zoomControl={true}
              >
                <TileLayer
                  attribution='Tiles &copy; Esri'
                  url="https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}"
                  maxZoom={19}
                />
                <Marker
                  position={[driverLocation.location!.latitude, driverLocation.location!.longitude]}
                  icon={createDriverIcon()}
                />
              </MapContainer>
            </div>

            {/* Info Grid */}
            <div className="p-4 grid grid-cols-2 gap-3">
              <div className="flex items-center gap-2">
                <Navigation className="h-4 w-4 text-blue-500 flex-shrink-0" />
                <div>
                  <p className="text-xs text-muted-foreground">Speed</p>
                  <p className="text-sm font-medium text-foreground">
                    {driverLocation.location!.speed?.toFixed(1) || '0'} mph
                  </p>
                </div>
              </div>
              <div className="flex items-center gap-2">
                <Compass className="h-4 w-4 text-indigo-500 flex-shrink-0" />
                <div>
                  <p className="text-xs text-muted-foreground">Heading</p>
                  <p className="text-sm font-medium text-foreground">
                    {getCourseDirection(driverLocation.location!.course)}
                  </p>
                </div>
              </div>
              <div className="flex items-center gap-2">
                <Battery className="h-4 w-4 text-green-500 flex-shrink-0" />
                <div>
                  <p className="text-xs text-muted-foreground">Battery</p>
                  <p className="text-sm font-medium text-foreground">
                    {driverLocation.location!.battery !== null
                      ? `${Math.round(driverLocation.location!.battery)}%`
                      : 'N/A'}
                  </p>
                </div>
              </div>
              <div className="flex items-center gap-2">
                <Clock className="h-4 w-4 text-gray-500 flex-shrink-0" />
                <div>
                  <p className="text-xs text-muted-foreground">Last Seen</p>
                  <p className="text-sm font-medium text-foreground">
                    {formatDistanceToNow(new Date(driverLocation.location!.timestamp), { addSuffix: true })}
                  </p>
                </div>
              </div>
            </div>
          </>
        ) : (
          <div className="p-8 text-center text-muted-foreground">
            <Navigation className="h-10 w-10 mx-auto mb-3 opacity-30" />
            <p className="text-sm">No location data available for this driver.</p>
            <p className="text-xs mt-1">The driver may not have reported their position yet.</p>
          </div>
        )}
      </div>
    </div>
  );
}
