import { useState, useMemo } from 'react';
import { useQuery } from '@tanstack/react-query';
import { Container, Grid, Card, Stack, Group, Select, Text, Badge, Button, Box, Table, ThemeIcon, SimpleGrid } from '@mantine/core';
import { MapPin, Navigation, Radio, Activity } from 'lucide-react';
import Breadcrumbs from '@/components/ui/Breadcrumbs';
import { QUERY_KEYS } from '@/constants/QUERY_KEYS';
import { vehiclesService } from '@/services/vehicles.service';
import { freightBrand } from '@/theme/freight-brand';

interface Vehicle {
  id: string;
  registrationNumber: string;
  plateNumber: string;
  manufacturer: string;
  model: string;
  status?: string;
}

interface GPSLocation {
  lat: number;
  lng: number;
  speed?: number;
  heading?: number;
  lastUpdate?: string;
}

// Mock GPS data for demo
const generateMockGPS = (index: number): GPSLocation => ({
  lat: 9.0 + Math.random() * 0.5,
  lng: 38.7 + Math.random() * 0.5,
  speed: Math.floor(Math.random() * 120),
  heading: Math.floor(Math.random() * 360),
  lastUpdate: new Date(Date.now() - Math.random() * 300000).toLocaleTimeString(),
});

export function TrackingPage() {
  const [selectedVehicleId, setSelectedVehicleId] = useState<string | null>(null);
  const [mapCenter] = useState({ lat: 9.0, lng: 38.8 });
  const mapZoom = 10;

  const { data: vehicles = [] } = useQuery({
    queryKey: QUERY_KEYS.VEHICLES.list(),
    queryFn: async () => {
      const res = await vehiclesService.getAll({ limit: 1000 });
      return res.data || [];
    },
  });

  // Generate mock GPS data for each vehicle
  const vehiclesWithGPS = useMemo(() => {
    return (vehicles as Vehicle[]).map((v, idx) => ({
      ...v,
      gps: generateMockGPS(idx),
    }));
  }, [vehicles]);

  // For demo: show all vehicles as trackable (or filter by ACTIVE if status data available)
  const trackableVehicles = useMemo(
    () => vehiclesWithGPS.slice(0, 10), // Limit to first 10 for demo
    [vehiclesWithGPS]
  );

  const selectedVehicle = trackableVehicles.find(v => v.id === selectedVehicleId);
  const vehicleOptions = useMemo(
    () => trackableVehicles.map(v => ({ label: v.registrationNumber, value: v.id })),
    [trackableVehicles]
  );

  // Map dimensions
  const mapWidth = 800;
  const mapHeight = 500;
  const pixelsPerLat = mapHeight / 0.6;
  const pixelsPerLng = mapWidth / 0.6;

  const getMapCoords = (lat: number, lng: number) => ({
    x: ((lng - (mapCenter.lng - 0.3)) * pixelsPerLng),
    y: ((mapCenter.lat + 0.3 - lat) * pixelsPerLat),
  });

  return (
    <Container size="xl" py="xl" px="lg">
      <Breadcrumbs items={[{ label: 'Fleet' }, { label: 'Vehicle Tracking' }]} />

      <Stack gap="xl">
        <Group justify="space-between">
          <div>
            <Text fw={700} size="xl">
              Real-Time Vehicle Tracking
            </Text>
            <Text c="dimmed" size="sm">
              Monitor vehicle locations, speed, and status
            </Text>
          </div>
        </Group>

        <Grid>
          {/* Map Section */}
          <Grid.Col span={{ base: 12, lg: 8 }}>
            <Card withBorder p="lg">
              <Card.Section p="md" withBorder>
                <Group justify="space-between">
                  <Text fw={500}>Map View</Text>
                  <Group gap="xs">
                    <Badge color="edr-green" leftSection={<Radio size={12} />}>
                      {trackableVehicles.length} Tracked
                    </Badge>
                  </Group>
                </Group>
              </Card.Section>

              <Card.Section p="md">
                <Box
                  pos="relative"
                  style={{
                    width: mapWidth,
                    height: mapHeight,
                    backgroundColor: '#f0f8f7',
                    border: `2px solid ${freightBrand.primary}`,
                    borderRadius: '8px',
                    overflow: 'hidden',
                  }}
                >
                  {/* Grid background */}
                  <svg
                    width={mapWidth}
                    height={mapHeight}
                    style={{ position: 'absolute', top: 0, left: 0 }}
                  >
                    {/* Latitude lines */}
                    {[0, 1, 2, 3, 4, 5, 6].map(i => (
                      <line
                        key={`lat-${i}`}
                        x1={0}
                        y1={(i / 6) * mapHeight}
                        x2={mapWidth}
                        y2={(i / 6) * mapHeight}
                        stroke="#e0e0e0"
                        strokeWidth={1}
                      />
                    ))}
                    {/* Longitude lines */}
                    {[0, 1, 2, 3, 4, 5, 6].map(i => (
                      <line
                        key={`lng-${i}`}
                        x1={(i / 6) * mapWidth}
                        y1={0}
                        x2={(i / 6) * mapWidth}
                        y2={mapHeight}
                        stroke="#e0e0e0"
                        strokeWidth={1}
                      />
                    ))}
                  </svg>

                  {/* Vehicle markers */}
                  {trackableVehicles.map((vehicle) => {
                    const coords = getMapCoords(vehicle.gps.lat, vehicle.gps.lng);
                    const isSelected = vehicle.id === selectedVehicleId;

                    return (
                      <Box
                        key={vehicle.id}
                        pos="absolute"
                        style={{
                          left: coords.x - 15,
                          top: coords.y - 15,
                          width: 30,
                          height: 30,
                          cursor: 'pointer',
                          zIndex: isSelected ? 100 : 10,
                        }}
                        onClick={() => setSelectedVehicleId(vehicle.id)}
                        title={vehicle.registrationNumber}
                      >
                        <Box
                          pos="absolute"
                          inset={0}
                          style={{
                            backgroundColor: isSelected ? freightBrand.primary : '#3498db',
                            borderRadius: '50%',
                            border: isSelected ? `3px solid ${freightBrand.primaryDark}` : 'none',
                            display: 'flex',
                            alignItems: 'center',
                            justifyContent: 'center',
                            color: 'white',
                            fontSize: '16px',
                            boxShadow: isSelected ? `0 0 0 8px ${freightBrand.ring}` : 'none',
                          }}
                        >
                          <Navigation size={16} />
                        </Box>
                      </Box>
                    );
                  })}

                  {/* Map labels */}
                  <Box pos="absolute" bottom={8} left={8} style={{ zIndex: 50 }}>
                    <Text size="xs" c="dimmed">
                      📍 Addis Ababa, Ethiopia
                    </Text>
                  </Box>
                </Box>
              </Card.Section>
            </Card>
          </Grid.Col>

          {/* Sidebar */}
          <Grid.Col span={{ base: 12, lg: 4 }}>
            <Stack gap="md">
              {/* Vehicle Selector */}
              <Card withBorder p="lg">
                <Stack gap="md">
                  <Select
                    label="Track Vehicle"
                    placeholder="Select a vehicle to track"
                    data={vehicleOptions}
                    value={selectedVehicleId}
                    onChange={setSelectedVehicleId}
                    searchable
                  />
                  {selectedVehicle && (
                    <Box p="md" style={{ backgroundColor: freightBrand.mutedBg, borderRadius: '8px' }}>
                      <Stack gap="sm">
                        <div>
                          <Text size="sm" c="dimmed">
                            Registration
                          </Text>
                          <Text fw={600}>{selectedVehicle.registrationNumber}</Text>
                        </div>
                        <div>
                          <Text size="sm" c="dimmed">
                            Vehicle
                          </Text>
                          <Text fw={600}>
                            {selectedVehicle.manufacturer} {selectedVehicle.model}
                          </Text>
                        </div>
                        <div>
                          <Text size="sm" c="dimmed">
                            Status
                          </Text>
                          <Badge color={selectedVehicle.status === 'ACTIVE' ? 'edr-green' : 'gray'}>
                            {selectedVehicle.status || 'Unknown'}
                          </Badge>
                        </div>
                      </Stack>
                    </Box>
                  )}
                </Stack>
              </Card>

              {/* GPS Details */}
              {selectedVehicle && (
                <Card withBorder p="lg">
                  <Stack gap="md">
                    <Group justify="space-between">
                      <Text fw={500}>GPS Location</Text>
                      <Badge color="edr-green" leftSection={<Activity size={12} />}>
                        Live
                      </Badge>
                    </Group>

                    <SimpleGrid cols={2} spacing="sm">
                      <Box p="sm" style={{ backgroundColor: '#f8f9fa', borderRadius: '8px' }}>
                        <Text size="xs" c="dimmed">
                          Latitude
                        </Text>
                        <Text fw={600} size="sm">
                          {selectedVehicle.gps.lat.toFixed(4)}°
                        </Text>
                      </Box>
                      <Box p="sm" style={{ backgroundColor: '#f8f9fa', borderRadius: '8px' }}>
                        <Text size="xs" c="dimmed">
                          Longitude
                        </Text>
                        <Text fw={600} size="sm">
                          {selectedVehicle.gps.lng.toFixed(4)}°
                        </Text>
                      </Box>
                      <Box p="sm" style={{ backgroundColor: '#f8f9fa', borderRadius: '8px' }}>
                        <Text size="xs" c="dimmed">
                          Speed
                        </Text>
                        <Text fw={600} size="sm">
                          {selectedVehicle.gps.speed} km/h
                        </Text>
                      </Box>
                      <Box p="sm" style={{ backgroundColor: '#f8f9fa', borderRadius: '8px' }}>
                        <Text size="xs" c="dimmed">
                          Heading
                        </Text>
                        <Text fw={600} size="sm">
                          {selectedVehicle.gps.heading}°
                        </Text>
                      </Box>
                    </SimpleGrid>

                    <div>
                      <Text size="xs" c="dimmed">
                        Last Update
                      </Text>
                      <Text fw={500}>{selectedVehicle.gps.lastUpdate}</Text>
                    </div>

                    <Button color="edr-green" fullWidth leftSection={<MapPin size={16} />}>
                      View Full History
                    </Button>
                  </Stack>
                </Card>
              )}

              {/* Tracked Vehicles List */}
              <Card withBorder p="lg">
                <Stack gap="md">
                  <Text fw={500}>Tracked Vehicles ({trackableVehicles.length})</Text>
                  <div style={{ maxHeight: '300px', overflowY: 'auto' }}>
                    <Table size="sm">
                      <Table.Tbody>
                        {trackableVehicles.map(v => (
                          <Table.Tr
                            key={v.id}
                            style={{
                              cursor: 'pointer',
                              backgroundColor: v.id === selectedVehicleId ? freightBrand.mutedBg : 'transparent',
                            }}
                            onClick={() => setSelectedVehicleId(v.id)}
                          >
                            <Table.Td>
                              <Stack gap={0}>
                                <Text size="sm" fw={600}>
                                  {v.registrationNumber}
                                </Text>
                                <Text size="xs" c="dimmed">
                                  {v.gps.speed} km/h
                                </Text>
                              </Stack>
                            </Table.Td>
                            <Table.Td align="right">
                              <Badge
                                color={v.status === 'ACTIVE' ? 'edr-green' : 'gray'}
                                size="sm"
                              >
                                {v.status || 'N/A'}
                              </Badge>
                            </Table.Td>
                          </Table.Tr>
                        ))}
                      </Table.Tbody>
                    </Table>
                  </div>
                </Stack>
              </Card>
            </Stack>
          </Grid.Col>
        </Grid>
      </Stack>
    </Container>
  );
}