"use client"

import { Badge } from "@/components/ui/badge"
import { PackageCheck, Clock, Truck, CheckCircle, MapPin, AlertTriangle } from "lucide-react"

interface TrackingEvent {
  status: string
  timestamp: string
  note?: string
}

interface OrderTrackingTimelineProps {
  trackingStatus: string | null
  trackingNumber: string | null
  courierName: string | null
  events: TrackingEvent[] | null
  estimatedDelivery: string | null
  isSeller?: boolean
}

const statusConfig: Record<string, { label: string; icon: any; color: string }> = {
  confirmed: { label: "Order Confirmed", icon: PackageCheck, color: "bg-blue-500" },
  picked_up: { label: "Picked Up", icon: Truck, color: "bg-indigo-500" },
  in_transit: { label: "In Transit", icon: Truck, color: "bg-purple-500" },
  out_for_delivery: { label: "Out for Delivery", icon: MapPin, color: "bg-orange-500" },
  delivered: { label: "Delivered", icon: CheckCircle, color: "bg-green-500" },
  failed_attempt: { label: "Delivery Attempt Failed", icon: AlertTriangle, color: "bg-red-500" },
}

export function OrderTrackingTimeline({
  trackingStatus,
  trackingNumber,
  courierName,
  events,
  estimatedDelivery,
  isSeller,
}: OrderTrackingTimelineProps) {
  const trackingEvents = events || []

  if (trackingEvents.length === 0 && !trackingStatus) {
    return (
      <div className="bg-gray-50 rounded-lg p-4 text-center">
        <PackageCheck className="h-8 w-8 mx-auto text-gray-300 mb-2" />
        <p className="text-sm text-gray-500">
          {isSeller ? "No tracking updates yet. Update the order status to keep your buyer informed." : "Waiting for seller to provide tracking information."}
        </p>
      </div>
    )
  }

  return (
    <div className="space-y-3">
      {/* Current Status Badge */}
      {trackingStatus && statusConfig[trackingStatus] && (
        <div className="flex items-center gap-2">
          <Badge className={`${statusConfig[trackingStatus].color} text-white border-0 gap-1`}>
            {(() => { const Icon = statusConfig[trackingStatus].icon; return <Icon className="h-3 w-3" /> })()}
            {statusConfig[trackingStatus].label}
          </Badge>
        </div>
      )}

      {/* Courier & Tracking Info */}
      {(courierName || trackingNumber) && (
        <div className="bg-blue-50 rounded-lg p-3 text-sm">
          {courierName && <p><strong>Courier:</strong> {courierName}</p>}
          {trackingNumber && <p><strong>Tracking #:</strong> <span className="font-mono text-blue-700">{trackingNumber}</span></p>}
          {estimatedDelivery && (
            <p><strong>Est. Delivery:</strong> {new Date(estimatedDelivery).toLocaleDateString('en-GB', { day: 'numeric', month: 'long', year: 'numeric' })}</p>
          )}
        </div>
      )}

      {/* Timeline */}
      {trackingEvents.length > 0 && (
        <div className="relative pl-6">
          {trackingEvents.map((event, i) => {
            const config = statusConfig[event.status]
            const isLast = i === trackingEvents.length - 1
            return (
              <div key={i} className={`relative pb-4 ${isLast ? '' : ''}`}>
                {/* Line */}
                {!isLast && (
                  <div className="absolute left-[-15px] top-4 bottom-0 w-0.5 bg-gray-200" />
                )}
                {/* Dot */}
                <div className={`absolute left-[-19px] top-1.5 h-3 w-3 rounded-full border-2 border-white ${config?.color || 'bg-gray-400'}`} />
                {/* Content */}
                <div>
                  <p className="text-sm font-medium text-gray-900">
                    {config?.label || event.status.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase())}
                  </p>
                  <p className="text-xs text-gray-500">
                    {new Date(event.timestamp).toLocaleString('en-GB', {
                      day: 'numeric', month: 'short', hour: '2-digit', minute: '2-digit',
                    })}
                  </p>
                  {event.note && <p className="text-xs text-gray-600 mt-1">{event.note}</p>}
                </div>
              </div>
            )
          })}
        </div>
      )}

      {/* Instructions for buyer */}
      {!isSeller && trackingStatus === 'delivered' && (
        <div className="bg-green-50 border border-green-200 rounded-lg p-3 text-sm text-green-800">
          <p className="font-medium flex items-center gap-1">
            <CheckCircle className="h-4 w-4" /> Your order has been delivered!
          </p>
          <p className="mt-1">Please inspect your item and confirm receipt to release payment to the seller.</p>
        </div>
      )}
    </div>
  )
}