'use client';

import { MapPin } from 'lucide-react';
import { useEffect, useRef } from 'react';

export default function GasStationMap() {
  const mapRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    // This is a placeholder for a real map implementation
    // In a real application, you would use a mapping library like Mapbox, Google Maps, or Leaflet
    if (mapRef.current) {
      const canvas = document.createElement('canvas');
      canvas.width = mapRef.current.clientWidth;
      canvas.height = mapRef.current.clientHeight;
      mapRef.current.appendChild(canvas);

      const ctx = canvas.getContext('2d');
      if (ctx) {
        // Draw a simple map placeholder
        ctx.fillStyle = '#f3f4f6';
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        // Draw some roads
        ctx.strokeStyle = '#d1d5db';
        ctx.lineWidth = 5;

        // Horizontal roads
        for (let i = 1; i < 5; i++) {
          ctx.beginPath();
          ctx.moveTo(0, canvas.height * (i / 5));
          ctx.lineTo(canvas.width, canvas.height * (i / 5));
          ctx.stroke();
        }

        // Vertical roads
        for (let i = 1; i < 8; i++) {
          ctx.beginPath();
          ctx.moveTo(canvas.width * (i / 8), 0);
          ctx.lineTo(canvas.width * (i / 8), canvas.height);
          ctx.stroke();
        }

        // Draw gas station markers
        const stations = [
          { x: 0.2, y: 0.3 },
          { x: 0.5, y: 0.2 },
          { x: 0.7, y: 0.4 },
          { x: 0.3, y: 0.6 },
          { x: 0.6, y: 0.7 },
          { x: 0.8, y: 0.8 },
          { x: 0.1, y: 0.9 },
        ];

        stations.forEach((station) => {
          // Draw marker
          ctx.fillStyle = '#ef4444';
          ctx.beginPath();
          ctx.arc(
            station.x * canvas.width,
            station.y * canvas.height,
            10,
            0,
            2 * Math.PI,
          );
          ctx.fill();

          // Draw white border
          ctx.strokeStyle = 'white';
          ctx.lineWidth = 2;
          ctx.beginPath();
          ctx.arc(
            station.x * canvas.width,
            station.y * canvas.height,
            10,
            0,
            2 * Math.PI,
          );
          ctx.stroke();
        });

        // Add city names
        ctx.fillStyle = '#1f2937';
        ctx.font = 'bold 16px Arial';
        ctx.fillText('Душанбе', canvas.width * 0.45, canvas.height * 0.15);
        ctx.fillText('Худжанд', canvas.width * 0.2, canvas.height * 0.25);
        ctx.fillText('Куляб', canvas.width * 0.7, canvas.height * 0.35);
        ctx.fillText('Бохтар', canvas.width * 0.3, canvas.height * 0.55);
        ctx.fillText('Хорог', canvas.width * 0.6, canvas.height * 0.65);
        ctx.fillText('Истаравшан', canvas.width * 0.8, canvas.height * 0.75);
        ctx.fillText('Пенджикент', canvas.width * 0.1, canvas.height * 0.85);
      }
    }

    return () => {
      if (mapRef.current) {
        while (mapRef.current.firstChild) {
          mapRef.current.removeChild(mapRef.current.firstChild);
        }
      }
    };
  }, []);

  return (
    <div className='relative h-full w-full'>
      <div ref={mapRef} className='h-full w-full'></div>
      <div className='absolute right-4 bottom-4 rounded-lg bg-white p-3 shadow-lg'>
        <div className='flex items-center gap-2 text-sm font-medium'>
          <MapPin className='h-5 w-5 text-red-600' />
          <span>Наши заправки</span>
        </div>
        <p className='mt-1 text-xs text-gray-500'>Всего станций: 25</p>
      </div>
    </div>
  );
}