import React, { useState, useEffect, useRef } from 'react';
import { 
  Search, 
  MapPin, 
  Package, 
  CheckCircle2, 
  Truck, 
  Bell, 
  ChevronRight, 
  Navigation,
  Info
} from 'lucide-react';

// --- MOCK DATA GENERATOR ---
// Simulates carrier APIs (UPS, FedEx, USPS)
const generateMockPackageData = (trackingNumber) => {
  let carrier = 'Unknown Carrier';
  if (trackingNumber.startsWith('1Z')) carrier = 'UPS';
  else if (trackingNumber.startsWith('9')) carrier = 'USPS';
  else if (trackingNumber.length === 12 || trackingNumber.startsWith('T')) carrier = 'FedEx';
  else carrier = 'Logistics Partner';

  // For demonstration, we'll place the final destination near Lone Tree, CO
  return {
    trackingNumber: trackingNumber.toUpperCase(),
    carrier,
    status: 'Out for Delivery',
    estimatedDelivery: 'Today, by 8:00 PM',
    currentLocation: { lat: 39.5323, lng: -104.8824, name: 'Lone Tree, CO' },
    timeline: [
      {
        id: 1,
        status: 'Out for Delivery',
        description: 'Package is on a vehicle out for delivery.',
        location: 'Lone Tree, CO',
        date: 'Today',
        time: '08:15 AM',
        completed: false,
        isCurrent: true
      },
      {
        id: 2,
        status: 'Arrived at Local Facility',
        description: 'Package arrived at the local distribution center.',
        location: 'Denver, CO',
        date: 'Yesterday',
        time: '11:42 PM',
        completed: true,
        isCurrent: false
      },
      {
        id: 3,
        status: 'In Transit',
        description: 'Package departed facility.',
        location: 'Chicago, IL',
        date: 'Aug 27',
        time: '04:30 PM',
        completed: true,
        isCurrent: false
      },
      {
        id: 4,
        status: 'Label Created',
        description: 'Shipping label created, USPS awaiting item.',
        location: 'New York, NY',
        date: 'Aug 26',
        time: '09:00 AM',
        completed: true,
        isCurrent: false
      }
    ]
  };
};

export default function App() {
  const [trackingNumber, setTrackingNumber] = useState('');
  const [packageData, setPackageData] = useState(null);
  const [isLoading, setIsLoading] = useState(false);
  const [notificationsEnabled, setNotificationsEnabled] = useState(false);
  const [deliveryTimer, setDeliveryTimer] = useState(null);

  // Check notification permission on load
  useEffect(() => {
    if ('Notification' in window && Notification.permission === 'granted') {
      setNotificationsEnabled(true);
    }
  }, []);

  const requestNotifications = async () => {
    if (!('Notification' in window)) {
      alert('This browser does not support desktop notification');
      return;
    }
    const permission = await Notification.requestPermission();
    if (permission === 'granted') {
      setNotificationsEnabled(true);
    }
  };

  const triggerPushNotification = (trackingNum) => {
    if ('Notification' in window && Notification.permission === 'granted') {
      new Notification('Package Delivered! 📦', {
        body: `Your package (${trackingNum}) has been successfully delivered.`,
        icon: 'https://cdn-icons-png.flaticon.com/512/751/751381.png'
      });
    }
  };

  const handleSearch = (e) => {
    e.preventDefault();
    if (!trackingNumber.trim()) return;

    setIsLoading(true);
    setPackageData(null);
    
    // Clear any existing demo timers
    if (deliveryTimer) clearTimeout(deliveryTimer);

    // Simulate API network request
    setTimeout(() => {
      const data = generateMockPackageData(trackingNumber);
      setPackageData(data);
      setIsLoading(false);

      // --- DEMO FEATURE: Simulate delivery after 5 seconds to trigger Push Notification ---
      const timer = setTimeout(() => {
        setPackageData(prev => {
          if (!prev) return prev;
          const updated = { ...prev, status: 'Delivered', estimatedDelivery: 'Delivered Today' };
          updated.timeline[0].status = 'Delivered';
          updated.timeline[0].description = 'Package was left at the front door.';
          updated.timeline[0].completed = true;
          
          triggerPushNotification(updated.trackingNumber);
          return updated;
        });
      }, 5000);
      setDeliveryTimer(timer);

    }, 1200);
  };

  // Apple-style UI elements
  return (
    <div className="min-h-screen bg-[#F5F5F7] font-sans text-[#1D1D1F] selection:bg-blue-200">
      
      {/* Glassmorphic Header */}
      <header className="sticky top-0 z-50 bg-white/70 backdrop-blur-xl border-b border-gray-200/50">
        <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
          <div className="flex items-center gap-2">
            <Package className="w-6 h-6 text-blue-500" />
            <span className="font-semibold text-lg tracking-tight">TrackR</span>
          </div>
        </div>
      </header>

      <main className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        
        {/* Hero Search Section */}
        <div className="max-w-2xl mx-auto text-center mb-12">
          <h1 className="text-4xl sm:text-5xl font-bold tracking-tight mb-4">
            Where is your package?
          </h1>
          <p className="text-lg text-gray-500 mb-8">
            Enter your UPS, FedEx, or USPS tracking number to get real-time updates.
          </p>
          
          <form onSubmit={handleSearch} className="relative max-w-xl mx-auto">
            <div className="relative flex items-center">
              <Search className="absolute left-4 w-6 h-6 text-gray-400" />
              <input
                type="text"
                value={trackingNumber}
                onChange={(e) => setTrackingNumber(e.target.value)}
                placeholder="Tracking Number (e.g., 1Z999999999)"
                className="w-full pl-12 pr-32 py-4 rounded-2xl bg-white border-0 shadow-[0_8px_30px_rgb(0,0,0,0.04)] focus:ring-2 focus:ring-blue-500 focus:outline-none text-lg transition-shadow"
              />
              <button 
                type="submit"
                disabled={isLoading}
                className="absolute right-2 px-6 py-2.5 bg-blue-500 hover:bg-blue-600 text-white font-medium rounded-xl transition-colors disabled:opacity-70"
              >
                {isLoading ? 'Searching...' : 'Track'}
              </button>
            </div>
            
            {/* Quick Demo Hint */}
            <p className="text-sm text-gray-400 mt-4 flex items-center justify-center gap-1">
              <Info className="w-4 h-4" /> Try tracking <span className="font-mono text-gray-600 bg-gray-100 px-2 py-0.5 rounded">1Z12345</span> for a live demo.
            </p>
          </form>
        </div>

        {/* Results Area */}
        {packageData && (
          <div className="animate-in fade-in slide-in-from-bottom-4 duration-500">
            
            {/* High-level Status Card */}
            <div className="bg-white rounded-[2rem] p-6 sm:p-8 shadow-[0_8px_30px_rgb(0,0,0,0.04)] mb-6 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-6">
              <div>
                <div className="flex items-center gap-3 mb-2">
                  <span className="bg-gray-100 text-gray-600 px-3 py-1 rounded-lg text-sm font-medium">
                    {packageData.carrier}
                  </span>
                  <span className="text-gray-400 text-sm font-mono">
                    {packageData.trackingNumber}
                  </span>
                </div>
                <h2 className="text-3xl font-bold flex items-center gap-3">
                  {packageData.status === 'Delivered' ? (
                    <CheckCircle2 className="w-8 h-8 text-green-500" />
                  ) : (
                    <Truck className="w-8 h-8 text-blue-500" />
                  )}
                  {packageData.status}
                </h2>
                <p className="text-gray-500 mt-1 text-lg">
                  {packageData.status === 'Delivered' ? 'Delivered on' : 'Estimated delivery:'} <strong className="text-gray-900">{packageData.estimatedDelivery}</strong>
                </p>
              </div>
              
              {/* Right Side: Progress Bar & Alerts */}
              <div className="w-full sm:w-64 flex flex-col gap-6">
                {/* Delivery Progress Bar */}
                <div>
                  <div className="flex justify-between text-xs font-medium text-gray-400 mb-2 px-1">
                    <span>Shipped</span>
                    <span>In Transit</span>
                    <span>Delivered</span>
                  </div>
                  <div className="h-3 w-full bg-gray-100 rounded-full overflow-hidden">
                    <div 
                      className={`h-full rounded-full transition-all duration-1000 ease-out ${
                        packageData.status === 'Delivered' ? 'bg-green-500 w-full' : 'bg-blue-500 w-2/3'
                      }`}
                    />
                  </div>
                </div>

                {/* Enable Alerts Button */}
                <button 
                  onClick={requestNotifications}
                  className={`flex items-center justify-center gap-2 px-4 py-2.5 rounded-xl text-sm font-medium transition-colors w-full ${
                    notificationsEnabled 
                      ? 'bg-blue-50 text-blue-600' 
                      : 'bg-gray-100 hover:bg-gray-200 text-gray-700'
                  }`}
                >
                  <Bell className="w-4 h-4" />
                  {notificationsEnabled ? 'Notifications On' : 'Enable Alerts'}
                </button>
              </div>
            </div>

            <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
              
              {/* Left Column: Map */}
              <div className="lg:col-span-2 bg-white rounded-[2rem] overflow-hidden shadow-[0_8px_30px_rgb(0,0,0,0.04)] flex flex-col h-[500px]">
                <div className="p-6 border-b border-gray-100 flex items-center gap-2">
                  <Navigation className="w-5 h-5 text-gray-400" />
                  <h3 className="font-semibold text-lg">Current Location</h3>
                </div>
                <div className="flex-grow relative bg-gray-100">
                  {/* Google Maps Embed - Keyless */}
                  <iframe
                    width="100%"
                    height="100%"
                    style={{ border: 0 }}
                    loading="lazy"
                    allowFullScreen
                    src={`https://maps.google.com/maps?q=${packageData.currentLocation.lat},${packageData.currentLocation.lng}&z=14&output=embed`}
                    title="Package Location"
                  ></iframe>
                  
                  {/* Floating Location Pill */}
                  <div className="absolute bottom-6 left-1/2 -translate-x-1/2 bg-white/90 backdrop-blur-md px-4 py-2 rounded-full shadow-lg flex items-center gap-2 text-sm font-medium border border-gray-100">
                    <MapPin className="w-4 h-4 text-blue-500" />
                    {packageData.currentLocation.name}
                  </div>
                </div>
              </div>

              {/* Right Column: Timeline */}
              <div className="bg-white rounded-[2rem] p-6 sm:p-8 shadow-[0_8px_30px_rgb(0,0,0,0.04)] h-[500px] flex flex-col">
                <h3 className="font-semibold text-lg mb-6">Tracking History</h3>
                
                <div className="flex-grow overflow-y-auto pr-2 custom-scrollbar">
                  <div className="relative border-l-2 border-gray-100 ml-3 md:ml-4 space-y-8 pb-4">
                    
                    {packageData.timeline.map((event, index) => {
                      const isLast = index === packageData.timeline.length - 1;
                      const isActive = event.isCurrent || event.status === 'Delivered';
                      
                      return (
                        <div key={event.id} className="relative pl-8">
                          {/* Timeline Dot */}
                          <div className={`absolute -left-[9px] top-1 h-4 w-4 rounded-full border-2 bg-white ${
                            isActive 
                              ? 'border-blue-500 shadow-[0_0_0_4px_rgba(59,130,246,0.2)]' 
                              : event.completed 
                                ? 'border-gray-800 bg-gray-800' 
                                : 'border-gray-300'
                          }`} />
                          
                          <div className="flex flex-col gap-1">
                            <div className="flex justify-between items-start gap-4">
                              <h4 className={`font-semibold ${isActive ? 'text-blue-600' : 'text-gray-900'}`}>
                                {event.status}
                              </h4>
                              <div className="text-right flex-shrink-0">
                                <p className="text-sm font-medium text-gray-900">{event.date}</p>
                                <p className="text-xs text-gray-500">{event.time}</p>
                              </div>
                            </div>
                            
                            <p className="text-sm text-gray-600 mt-1">{event.description}</p>
                            
                            <div className="flex items-center gap-1 mt-2 text-xs font-medium text-gray-400">
                              <MapPin className="w-3 h-3" />
                              {event.location}
                            </div>
                          </div>
                        </div>
                      )
                    })}
                    
                  </div>
                </div>
              </div>

            </div>
          </div>
        )}
      </main>

      {/* Tailwind specific custom styles for scrollbar mimicking Apple's hidden/sleek scrollbars */}
      <style dangerouslySetInnerHTML={{__html: `
        .custom-scrollbar::-webkit-scrollbar {
          width: 6px;
        }
        .custom-scrollbar::-webkit-scrollbar-track {
          background: transparent;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb {
          background-color: #E5E7EB;
          border-radius: 20px;
        }
      `}} />
    </div>
  );
}