'use client'

import { useEffect, useState } from 'react'
import { useParams } from 'next/navigation'
import Link from 'next/link'
import { MapPin, Phone, Clock, Navigation, CheckCircle, Package, Truck, Home } from 'lucide-react'
import Container from '@/components/frontend/Container'

interface TrackingData {
  orderId: string
  status: string
  rider: {
    name: string
    phone: string
    location: string
  }
  estimatedArrival: string
  steps: {
    label: string
    completed: boolean
    time?: string
  }[]
}

const getTrackingData = (id: string): TrackingData => ({
  orderId: id,
  status: 'out_for_delivery',
  rider: {
    name: 'Ahmed Khan',
    phone: '0312 3456789',
    location: 'Near Sabzazar Chowk, Lahore',
  },
  estimatedArrival: '15-20 minutes',
  steps: [
    { label: 'Order Placed', completed: true, time: 'Today, 9:30 AM' },
    { label: 'Order Confirmed', completed: true, time: 'Today, 9:35 AM' },
    { label: 'Preparing Your Order', completed: true, time: 'Today, 9:45 AM' },
    { label: 'Out for Delivery', completed: true, time: 'Today, 10:00 AM' },
    { label: 'Delivered', completed: false },
  ],
})

export default function TrackOrderPage() {
  const { id } = useParams()
  const [tracking, setTracking] = useState<TrackingData | null>(null)
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    // Simulate API call
    setTimeout(() => {
      setTracking(getTrackingData(id as string))
      setLoading(false)
    }, 1000)
  }, [id])

  if (loading) {
    return (
      <Container className="py-20 text-center">
        <div className="animate-spin w-12 h-12 border-4 border-primary border-t-transparent rounded-full mx-auto" />
        <p className="text-gray-custom mt-4">Loading tracking details...</p>
      </Container>
    )
  }

  if (!tracking) {
    return (
      <Container className="py-20 text-center">
        <Package size={48} className="mx-auto text-gray-custom mb-4" />
        <h2 className="text-xl font-semibold text-dark mb-2">Order not found</h2>
        <p className="text-gray-custom">Please check your order ID and try again.</p>
        <Link href="/account/orders" className="inline-block mt-4 text-primary hover:underline">
          View My Orders →
        </Link>
      </Container>
    )
  }

  return (
    <Container className="py-8">
      <div className="max-w-3xl mx-auto">
        {/* Header */}
        <div className="text-center mb-8">
          <h1 className="text-2xl font-bold text-dark">Track Your Order</h1>
          <p className="text-gray-custom mt-1">Order #{tracking.orderId}</p>
        </div>

        {/* Live Tracking Map Placeholder */}
        <div className="bg-gradient-to-br from-primary/10 to-secondary/10 rounded-xl p-4 mb-6">
          <div className="relative h-48 bg-gray-200 rounded-lg overflow-hidden">
            <div className="absolute inset-0 flex items-center justify-center">
              <div className="text-center">
                <Navigation size={32} className="text-primary mx-auto mb-2 animate-pulse" />
                <p className="text-sm text-gray-custom">Live Map View</p>
                <p className="text-xs text-gray-custom">Rider is on the way to your location</p>
              </div>
            </div>
            {/* You can integrate Google Maps here */}
          </div>
        </div>

        {/* Rider Info */}
        <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-4 mb-6">
          <div className="flex items-center gap-3">
            <div className="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center">
              <Truck size={24} className="text-primary" />
            </div>
            <div className="flex-1">
              <p className="font-semibold text-dark">Your Rider: {tracking.rider.name}</p>
              <div className="flex items-center gap-2 text-sm text-gray-custom">
                <MapPin size={14} />
                <span>{tracking.rider.location}</span>
              </div>
            </div>
            <a
              href={`tel:${tracking.rider.phone}`}
              className="flex items-center gap-2 px-4 py-2 bg-primary/10 text-primary rounded-lg text-sm font-medium hover:bg-primary hover:text-white transition"
            >
              <Phone size={16} />
              Call Rider
            </a>
          </div>
        </div>

        {/* Estimated Arrival */}
        <div className="bg-gradient-primary rounded-xl p-4 mb-6 text-white text-center">
          <Clock size={20} className="mx-auto mb-2" />
          <p className="text-sm opacity-90">Estimated Arrival</p>
          <p className="text-2xl font-bold">{tracking.estimatedArrival}</p>
        </div>

        {/* Order Timeline */}
        <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
          <h3 className="font-semibold text-dark mb-6">Delivery Progress</h3>
          <div className="relative">
            {/* Timeline Line */}
            <div className="absolute left-5 top-0 bottom-0 w-0.5 bg-gray-200" />
            
            <div className="space-y-6 relative">
              {tracking.steps.map((step, index) => (
                <div key={step.label} className="relative pl-12">
                  {/* Icon */}
                  <div
                    className={`absolute left-0 w-10 h-10 rounded-full flex items-center justify-center z-10 ${
                      step.completed
                        ? 'bg-green-500 text-white'
                        : 'bg-gray-100 text-gray-custom'
                    }`}
                  >
                    {step.completed ? (
                      <CheckCircle size={18} />
                    ) : index === tracking.steps.length - 1 ? (
                      <Home size={18} />
                    ) : (
                      <Package size={18} />
                    )}
                  </div>
                  
                  {/* Content */}
                  <div>
                    <h4 className={`font-semibold ${step.completed ? 'text-dark' : 'text-gray-custom'}`}>
                      {step.label}
                    </h4>
                    {step.time && (
                      <p className="text-xs text-gray-custom mt-0.5">{step.time}</p>
                    )}
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* Help Section */}
        <div className="text-center mt-8">
          <p className="text-gray-custom text-sm">
            Need help?{" "}
            <Link href="/contact" className="text-primary hover:underline">
              Contact Support
            </Link>
          </p>
          <Link
            href="/account/orders"
            className="inline-block mt-4 text-sm text-gray-custom hover:text-primary transition"
          >
            ← Back to My Orders
          </Link>
        </div>
      </div>
    </Container>
  )
}