'use client';

import { useEffect, useRef, useState } from 'react';

interface Stop {
  name: string;
  lat: number;
  lng: number;
  status: 'passed' | 'current' | 'upcoming';
  time: string;
}

const stops: Stop[] = [
  { name: 'حي النزهة', lat: 24.7136, lng: 46.6753, status: 'passed', time: '7:10 ص' },
  { name: 'حي الروضة', lat: 24.7200, lng: 46.6820, status: 'passed', time: '7:18 ص' },
  { name: 'حي العليا', lat: 24.7280, lng: 46.6900, status: 'current', time: '7:26 ص' },
  { name: 'حي الملز', lat: 24.7350, lng: 46.6980, status: 'upcoming', time: '7:34 ص' },
  { name: 'جامعة الملك سعود', lat: 24.7410, lng: 46.7050, status: 'upcoming', time: '7:45 ص' },
];

export default function TrackBusMap() {
  const [busPosition, setBusPosition] = useState({ x: 42, y: 52 });
  const [pulse, setPulse] = useState(true);
  const animRef = useRef<NodeJS.Timeout | null>(null);

  useEffect(() => {
    let step = 0;
    const positions = [
      { x: 42, y: 52 },
      { x: 46, y: 50 },
      { x: 50, y: 48 },
      { x: 54, y: 46 },
      { x: 50, y: 48 },
      { x: 46, y: 50 },
    ];
    animRef.current = setInterval(() => {
      step = (step + 1) % positions.length;
      setBusPosition(positions[step]);
    }, 2000);
    return () => { if (animRef.current) clearInterval(animRef.current); };
  }, []);

  return (
    <div className="relative w-full rounded-3xl overflow-hidden shadow-lg" style={{ height: '220px' }}>
      <img
        src="https://readdy.ai/api/search-image?query=aerial%20top%20view%20satellite%20map%20of%20Riyadh%20Saudi%20Arabia%20city%20streets%20roads%20neighborhoods%20urban%20layout%20clean%20detailed%20cartographic%20style%20with%20green%20route%20path%20highlighted%20showing%20bus%20route%20from%20residential%20area%20to%20university&width=390&height=220&seq=trackmap01&orientation=landscape"
        alt="خريطة"
        className="w-full h-full object-cover object-top"
      />
      <div className="absolute inset-0" style={{ background: 'linear-gradient(180deg, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.18) 100%)' }}></div>

      {/* Route Line */}
      <svg className="absolute inset-0 w-full h-full" viewBox="0 0 390 220" preserveAspectRatio="none">
        <polyline
          points="60,180 110,155 160,130 210,108 270,88 330,70"
          fill="none"
          stroke="rgba(255,255,255,0.35)"
          strokeWidth="4"
          strokeDasharray="8 5"
        />
        <polyline
          points="60,180 110,155 160,130"
          fill="none"
          stroke="#10b981"
          strokeWidth="4"
          strokeLinecap="round"
        />
      </svg>

      {/* Stop Dots */}
      {[
        { x: 60, y: 180, status: 'passed' },
        { x: 110, y: 155, status: 'passed' },
        { x: 160, y: 130, status: 'current' },
        { x: 210, y: 108, status: 'upcoming' },
        { x: 330, y: 70, status: 'upcoming' },
      ].map((dot, i) => (
        <div
          key={i}
          className="absolute"
          style={{ left: `${(dot.x / 390) * 100}%`, top: `${(dot.y / 220) * 100}%`, transform: 'translate(-50%, -50%)' }}
        >
          <div
            className="w-3 h-3 rounded-full border-2 border-white shadow-md"
            style={{ background: dot.status === 'passed' ? '#10b981' : dot.status === 'current' ? '#f59e0b' : '#94a3b8' }}
          ></div>
        </div>
      ))}

      {/* Bus Icon */}
      <div
        className="absolute transition-all duration-[2000ms] ease-in-out"
        style={{ left: `${busPosition.x}%`, top: `${busPosition.y}%`, transform: 'translate(-50%, -50%)' }}
      >
        {pulse && (
          <div className="absolute inset-0 rounded-full animate-ping" style={{ background: 'rgba(16,185,129,0.4)', width: '36px', height: '36px', top: '-4px', left: '-4px' }}></div>
        )}
        <div className="w-7 h-7 rounded-full flex items-center justify-center shadow-xl border-2 border-white" style={{ background: 'linear-gradient(135deg, #059669, #10b981)' }}>
          <i className="ri-bus-2-fill text-white" style={{ fontSize: '14px' }}></i>
        </div>
      </div>

      {/* ETA Badge */}
      <div className="absolute top-3 left-3 bg-white/95 backdrop-blur-sm rounded-2xl px-3 py-2 shadow-lg flex items-center gap-2">
        <div className="w-6 h-6 bg-emerald-100 rounded-lg flex items-center justify-center">
          <i className="ri-time-fill text-emerald-600 text-xs"></i>
        </div>
        <div>
          <p className="text-[9px] text-slate-400">الوصول خلال</p>
          <p className="text-xs font-bold text-slate-900">19 دقيقة</p>
        </div>
      </div>

      {/* Live Badge */}
      <div className="absolute top-3 right-3 flex items-center gap-1.5 bg-emerald-600/90 backdrop-blur-sm rounded-full px-2.5 py-1.5 shadow-lg">
        <span className="w-1.5 h-1.5 bg-white rounded-full animate-pulse"></span>
        <span className="text-white text-[10px] font-bold">مباشر</span>
      </div>
    </div>
  );
}