import { useState, useEffect, useCallback, useRef } from "react";
import CancellationPolicyBanner from "@/components/CancellationPolicyBanner";
import SuspendedAccountGate from "@/components/SuspendedAccountGate";
import { useOptimisticUpdate } from "@/hooks/useOptimisticUpdate";
import { useCurrentLocation } from "@/hooks/useCurrentLocation";
import { useAutoSave } from "@/hooks/useAutoSave";
import { useConnectionState } from "@/hooks/useConnectionState";
import { useBatteryStatus } from "@/hooks/useBatteryStatus";
import { base44 } from "@/api/base44Client";
import { generateIdempotencyKey, storeIdempotencyKey, getIdempotencyKey, clearIdempotencyKey } from "@/lib/idempotencyKeys";
import { captureError } from "@/lib/errorMonitoring";
import { withRetry } from "@/lib/retryFetch";
import { cacheInvalidatePattern } from "@/lib/cacheManager";
import { a11yAttrs, handleKeyboardNav, announce } from "@/lib/accessibilityHelpers";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import { Car, MapPin, ArrowRight, Loader2, Calculator, Route, Wallet, Map, ArrowRightLeft, ChevronLeft, Home, Package, Store, Utensils } from "lucide-react";
import ZipgyLogo from "@/components/ZipgyLogo";
import MapAddressPicker from "../components/MapAddressPicker";
import ErrorReporter from "@/components/ErrorReporter";
import WhatsAppNotice from "../components/WhatsAppNotice";
import SEOSchema from "@/components/SEOSchema";
import { motion } from "framer-motion";
import { useNavigate } from "react-router-dom";
import { toast } from "sonner";
import { geocodeAddress, haversineKm, calculateFare, getPeakHourMultiplier, isNightRate, isAirportLocation } from "@/utils/fareCalculator";
import { useLowDataMode } from "@/lib/LowDataContext";
import PostRideSharePrompt from "@/components/PostRideSharePrompt";
import RideStatusScreen from "@/components/taxi/RideStatusScreen";
import MMGPaymentGuide from "@/components/booking/MMGPaymentGuide";
import { getLanguage, t } from "@/lib/i18n";

const getRideTypes = (lang) => [
{ value: "standard", label: t('booking.standard', lang), description: t('booking.affordable_everyday', lang), icon: "🚗", badge: null },
{ value: "premium", label: t('booking.premium', lang), description: t('booking.comfortable_newer', lang), icon: "🚘", badge: t('booking.popular', lang) },
{ value: "shared", label: t('booking.shared', lang), description: t('booking.split_fare', lang), icon: "👥", badge: t('booking.save', lang) }];


export default function BookRide() {
  return <SuspendedAccountGate><BookRideInner /></SuspendedAccountGate>;
}

function BookRideInner() {
  const navigate = useNavigate();
  const [deferredPrompt, setDeferredPrompt] = useState(null);
  const [appInstalled, setAppInstalled] = useState(false);
  const isIos = /iphone|ipad|ipod/i.test(navigator.userAgent);
  const isStandalone = typeof window !== "undefined" && window.matchMedia("(display-mode: standalone)").matches;

  // Phase 2: Connection monitoring, battery optimization, accessibility
  const { isOnline } = useConnectionState();
  const { isLowPowerMode } = useBatteryStatus();
  const lowBattery = isLowPowerMode;

  useEffect(() => {
    const handleInstallPrompt = (e) => {e.preventDefault();setDeferredPrompt(e);};
    const handleAppInstalled = () => setAppInstalled(true);
    window.addEventListener("beforeinstallprompt", handleInstallPrompt);
    window.addEventListener("appinstalled", handleAppInstalled);

    return () => {
      window.removeEventListener("beforeinstallprompt", handleInstallPrompt);
      window.removeEventListener("appinstalled", handleAppInstalled);
    };
  }, []);

  const handleInstall = useCallback(() => {
    if (deferredPrompt) {
      deferredPrompt.prompt().then(() => {
        deferredPrompt.userChoice.then(() => {
          if (isMountedRef.current) setDeferredPrompt(null);
        }).catch(() => {});
      }).catch(() => {});
    }
  }, [deferredPrompt]);

  const isMountedRef = useRef(true);
  const { address: currentAddress } = useCurrentLocation();
  const [loading, setLoading] = useState(false);
  const { optimisticState: bookedRide, runOptimistic } = useOptimisticUpdate(null);
  const [selectedType, setSelectedType] = useState("standard");
  const [recentAddresses, setRecentAddresses] = useState(() => {
    try {return JSON.parse(localStorage.getItem('zipgy_recent_addresses') || '[]');} catch {return [];}
  });
  const [form, setForm] = useState({ pickup_location: "", dropoff_location: "", passenger_name: "", passenger_phone: "", passenger_email: "", notes: "" });
  const [userProfile, setUserProfile] = useState(null);
  const { isSaving, clearDraft } = useAutoSave(form, "Ride", "draft_ride_id");

  // CRITICAL: Instant user load - cached, non-blocking, fails silently
  useEffect(() => {
    let isMounted = true;

    // Try cache first, then network (don't wait)
    const loadUser = async () => {
      try {
        // 50ms timeout - if cache miss, continue without user data
        const userPromise = base44.auth.me();
        const timeout = new Promise((resolve) => setTimeout(() => resolve(null), 50));
        const u = await Promise.race([userPromise, timeout]);

        if (isMounted && u) {
          setUserProfile(u);
          setForm((prev) => ({
            ...prev,
            passenger_name: prev.passenger_name || u.full_name || "",
            passenger_phone: prev.passenger_phone || u.phone || "",
            pickup_location: prev.pickup_location || u.default_pickup_address || ""
          }));
        }
      } catch {



        // Silent fail - user can still book as guest
      }};loadUser();
    return () => {isMounted = false;};
  }, []);
  const [fareInfo, setFareInfo] = useState(null);
  const [calcLoading, setCalcLoading] = useState(false);
  const [promoCode, setPromoCode] = useState("");
  const [promoResult, setPromoResult] = useState(null); // { discount, code } or { error }
  const [promoChecking, setPromoChecking] = useState(false);
  const [error, setError] = useState(null);
  const [scheduledAt, setScheduledAt] = useState("");
  const [paymentMethod, setPaymentMethod] = useState("cash");
  const [mapPicker, setMapPicker] = useState(null); // 'pickup' | 'dropoff'
  const [gpsLoading, setGpsLoading] = useState(false);
  const [showPostRideShare, setShowPostRideShare] = useState(false);
  const [validationMessage, setValidationMessage] = useState("");
  const [makeOffer, setMakeOffer] = useState(false);
  const [passengerOffer, setPassengerOffer] = useState("");
  const { lowDataMode } = useLowDataMode();
  const [userCoords, setUserCoords] = useState(null);
  const [lang, setLang] = useState(getLanguage());
  const [selectedBusiness, setSelectedBusiness] = useState(null);

  // Fetch active taxi business for rate calculation
  useEffect(() => {
    const loadBusiness = async () => {
      try {
        const businesses = await base44.entities.Business.filter({ business_type: "taxi", status: "active" });
        if (businesses.length > 0) {
          setSelectedBusiness(businesses[0]);
        }
      } catch (err) {
        console.error('Failed to load business rates:', err);
      }
    };
    loadBusiness();
  }, []);

  // Listen for language changes
  useEffect(() => {
    const handleLanguageChange = (e) => setLang(e.detail.lang);
    window.addEventListener('languagechange', handleLanguageChange);
    return () => window.removeEventListener('languagechange', handleLanguageChange);
  }, []);

  // Instant geolocation with 3s timeout (fail silently, non-blocking)
  useEffect(() => {
    let cancelled = false;
    const geoTimeout = new Promise((_, reject) => setTimeout(() => reject(new Error('Geo timeout')), 3000));
    const geoPromise = new Promise((resolve) =>
    navigator.geolocation?.getCurrentPosition(resolve, () => {}, { enableHighAccuracy: false, timeout: 3000, maximumAge: 120000 })
    );
    Promise.race([geoPromise, geoTimeout]).then(({ coords }) => {
      if (!cancelled && isMountedRef.current) {
        setUserCoords({ latitude: coords.latitude, longitude: coords.longitude });
      }
    }).catch(() => {});
    return () => {cancelled = true;};
  }, []);

  useEffect(() => {
    if (userProfile?.payment_method) setPaymentMethod(userProfile.payment_method);
  }, [userProfile]);

  // Auto-prefill pickup location with current GPS address
  useEffect(() => {
    if (currentAddress) {
      setForm((prev) => ({ ...prev, pickup_location: prev.pickup_location || currentAddress }));
    }
  }, [currentAddress]);

  // Flush offline queue when back online
  useEffect(() => {
    const handleOnline = () => {
      (() => {
        const pending = JSON.parse(localStorage.getItem('zipgy_pending_rides') || '[]');
        if (!pending.length) return;
        localStorage.removeItem('zipgy_pending_rides');
        Promise.all(pending.map((item) => {
          const baseFare = item.fareInfo?.fare || calculateFare(0, item.selectedType, item.selectedBiz);
          const discount = item.promoResult?.discount || 0;
          const fare = Math.round(baseFare * (1 - discount / 100));
          return base44.entities.Ride.create({
            ...item.form, ride_type: item.selectedType,
            estimated_fare: baseFare, final_fare: fare,
            promo_code: item.promoResult?.code || "",
            discount_percent: discount || undefined,
            payment_method: item.paymentMethod,
            status: 'pending',
            business_id: item.selectedBiz?.id || '',
            business_name: item.selectedBiz?.business_name || ''
          });
        })).then(() => {
          toast.success(`${pending.length} offline ride${pending.length > 1 ? 's' : ''} submitted!`);
        }).catch(() => {});
      })();
    };
    window.addEventListener('online', handleOnline);
    return () => {window.removeEventListener('online', handleOnline);};
  }, []);



  // Recalculate fare whenever pickup, dropoff, or type changes (instant, no delay)
  useEffect(() => {
    if (!form.pickup_location || !form.dropoff_location) {setFareInfo(null);return;}
    estimateFare();
  }, [form.pickup_location, form.dropoff_location, selectedType]);

  const estimateFare = async () => {
    setCalcLoading(true);
    setFareInfo(null);
    try {
      const [pickup, dropoff] = await Promise.all([
      geocodeAddress(form.pickup_location),
      geocodeAddress(form.dropoff_location)]
      );
      if (!pickup || !dropoff) {
        setFareInfo({ error: "Could not locate one or both addresses. Try being more specific." });
        setCalcLoading(false);
        return;
      }
      const distanceKm = haversineKm(pickup.lat, pickup.lon, dropoff.lat, dropoff.lon);

      // Fetch taxi business rates (use first active taxi business)
      const businesses = await base44.entities.Business.filter({ business_type: "taxi", status: "active" }).catch(() => []);
      const business = businesses.length > 0 ? businesses[0] : null;

      // Check if night rate applies (10pm-6am)
      const isNight = isNightRate();
      // Check if airport pickup
      const isAirport = isAirportLocation(form.pickup_location);

      const fare = calculateFare(distanceKm, selectedType, business, isNight, isAirport);
      const etaMinutes = Math.round(distanceKm / 1.5);

      setFareInfo({
        fare,
        distanceKm: distanceKm.toFixed(1),
        eta_minutes: etaMinutes,
        isNight,
        isAirport
      });
    } catch (err) {
      setFareInfo({ error: "Could not calculate fare. Please check addresses." });
    } finally {
      setCalcLoading(false);
    }
  };

  const updateField = (field, value) => setForm((prev) => ({ ...prev, [field]: value }));

  const useMyLocation = () => {
    if (!navigator.geolocation) return toast.error("Geolocation not supported on this device.");
    setGpsLoading(true);
    navigator.geolocation.getCurrentPosition((pos) => {
      const { latitude, longitude } = pos.coords;
      fetch(`https://nominatim.openstreetmap.org/reverse?lat=${latitude}&lon=${longitude}&format=json`).
      then((res) => res.json()).
      then((data) => {
        const address = data.display_name?.split(",").slice(0, 3).join(", ") || `${latitude.toFixed(5)}, ${longitude.toFixed(5)}`;
        updateField("pickup_location", address);
        setGpsLoading(false);
      }).
      catch(() => {toast.error("Could not get your location.");setGpsLoading(false);});
    }, () => {toast.error("Could not get your location.");setGpsLoading(false);});
  };

  const applyPromo = async () => {
    if (!promoCode.trim()) return;
    setPromoChecking(true);
    setPromoResult(null);
    try {
      const results = await base44.entities.PromoCode.filter({ code: promoCode.trim().toUpperCase(), is_active: true });
      if (!results.length) {setPromoResult({ error: "Invalid or expired promo code." });setPromoChecking(false);return;}
      const promo = results[0];
      if (promo.max_uses && promo.uses_count >= promo.max_uses) {setPromoResult({ error: "This promo code has reached its limit." });setPromoChecking(false);return;}
      if (promo.expires_at && new Date(promo.expires_at) < new Date()) {setPromoResult({ error: "This promo code has expired." });setPromoChecking(false);return;}
      // Rate limit: check if user already used this promo
      const usedRides = await base44.entities.Ride.filter({ promo_code: promo.code }).catch(() => []);
      const userEmail = userProfile?.email;
      if (userEmail && usedRides.some((r) => r.created_by === userEmail || r.passenger_email === userEmail)) {
        setPromoResult({ error: "You've already used this promo code." });setPromoChecking(false);return;
      }
      setPromoResult({ discount: promo.discount_percent, code: promo.code, id: promo.id });
      setPromoChecking(false);
      toast.success(`Promo applied! ${promo.discount_percent}% off 🎉`);
    } catch (err) {
      setPromoResult({ error: "Could not validate promo code." });
      setPromoChecking(false);
    }
  };



  // Live tracking on success screen
  const [liveRide, setLiveRide] = useState(null);
  useEffect(() => {
    if (!bookedRide?.id) return;
    let isMounted = true;
    let unsubscribe = undefined;

    // Try to subscribe for real-time updates
    try {
      unsubscribe = base44.entities.Ride.subscribe((ev) => {
        if (isMounted && ev.type === "update" && ev.id === bookedRide.id) setLiveRide(ev.data);
      });
    } catch (err) {



      // Subscription failed — will fall back to polling only
    } // Poll for updates every 3 seconds as fallback
    const interval = setInterval(() => {if (isMounted) {
          base44.entities.Ride.filter({ id: bookedRide.id }).
          then((results) => {if (results[0]) setLiveRide(results[0]);}).
          catch(() => {});
        }
      }, 3000);

    return () => {
      isMounted = false;
      clearInterval(interval);
      if (typeof unsubscribe === 'function') unsubscribe();
    };
  }, [bookedRide?.id]);
  const displayRide = liveRide || bookedRide;

  if (bookedRide) {
    return (
      <RideStatusScreen
        bookedRide={bookedRide}
        userProfile={userProfile}
        form={form}
        onBookAnother={() => {
          setLiveRide(null);
          setForm({ pickup_location: "", dropoff_location: "", passenger_name: form.passenger_name, passenger_phone: form.passenger_phone, notes: "" });
          setFareInfo(null);
          setPromoCode("");
          setPromoResult(null);
        }} />);


  }

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!form.passenger_name?.trim() || !form.passenger_email?.trim() || !form.passenger_phone?.trim() || !form.pickup_location?.trim() || !form.dropoff_location?.trim()) {
      setValidationMessage("⚠️ Please fill out all required fields to continue.");
      announce("Please fill out all required fields to continue.", "alert");
      return;
    }

    const idempotencyKey = generateIdempotencyKey();
    const existing = getIdempotencyKey(idempotencyKey);
    if (existing) {
      toast.error("Ride already submitted. Check your dashboard.");
      return;
    }

    await handleBookingRequest(idempotencyKey);
  };

  const handleBookingRequest = async (idempotencyKey) => {
    setValidationMessage("");
    setError(null);
    setLoading(true);
    storeIdempotencyKey(idempotencyKey, { type: 'ride', timestamp: Date.now() });

    const optimisticRide = {
      id: "pending-" + Date.now(),
      pickup_location: form.pickup_location,
      dropoff_location: form.dropoff_location,
      passenger_name: form.passenger_name,
      status: "pending"
    };

    try {
      runOptimistic(optimisticRide, async () => {
        // Offline queue: save to localStorage if no network
        if (!navigator.onLine) {
          const pending = JSON.parse(localStorage.getItem('zipgy_pending_rides') || '[]');
          pending.push({ form, selectedType, paymentMethod, scheduledAt, promoResult, fareInfo, timestamp: Date.now() });
          localStorage.setItem('zipgy_pending_rides', JSON.stringify(pending));
          setLoading(false);
          toast.error('You are offline! Your ride request has been saved and will be submitted automatically when you reconnect.');
          return;
        }
        const baseFare = fareInfo?.fare || calculateFare(0, selectedType, null);
        const discount = promoResult?.discount || 0;
        const fare = Math.round(baseFare * (1 - discount / 100));
        const distanceKm = fareInfo?.distanceKm || 0;

        const offerFare = makeOffer && passengerOffer ? parseFloat(passengerOffer) : null;

        // Geocode pickup so passengers can see the pin on the tracking map
        const pickupCoords = await geocodeAddress(form.pickup_location).catch(() => null);

        // Wrap ride creation with automatic retry (exponential backoff)
        const ride = await withRetry(
          () => base44.entities.Ride.create({
            ...form,
            ride_type: selectedType,
            estimated_fare: baseFare,
            final_fare: offerFare || fare,
            promo_code: promoResult?.code || "",
            discount_percent: discount || undefined,
            distance_km: parseFloat(distanceKm) || undefined,
            scheduled_at: scheduledAt || undefined,
            payment_method: paymentMethod,
            status: "pending",
            passenger_offer: offerFare || undefined,
            negotiation_status: offerFare ? "open" : undefined,
            pickup_lat: pickupCoords?.lat || undefined,
            pickup_lng: pickupCoords?.lon || undefined
          }),
          { maxRetries: 3, baseDelay: 1000 }
        );

        // Send email confirmation
        if (form.passenger_email || userProfile?.email) {
          base44.functions.invoke('sendBookingEmail', {
            email: form.passenger_email || userProfile?.email,
            name: form.passenger_name,
            type: 'ride',
            orderId: ride.id,
            from: form.pickup_location,
            to: form.dropoff_location,
            fare
          }).catch(() => {});
        }

        // increment promo uses (with retry)
        if (promoResult?.id) {
          withRetry(async () => {
            const promos = await base44.entities.PromoCode.filter({ code: promoResult.code });
            if (promos.length) await base44.entities.PromoCode.update(promos[0].id, { uses_count: (promos[0].uses_count || 0) + 1 });
          }, { maxRetries: 2 }).catch(() => {});

          // Invalidate promo cache on success
          cacheInvalidatePattern(/^promo:/);
        }

        // Notify available taxi services
        base44.functions.invoke('notifyAvailableTaxis', {
          ride_id: ride.id,
          pickup_location: form.pickup_location,
          dropoff_location: form.dropoff_location,
          passenger_name: form.passenger_name,
          passenger_phone: form.passenger_phone,
          estimated_fare: fare,
          ride_type: selectedType
        }).catch((err) => {
          console.error('Taxi notification failed:', err);
        });

        // Trigger automatic geo-targeted assignment
        base44.functions.invoke('assignClosestTaxi', {
          ride_id: ride.id,
          pickup_lat: pickupCoords?.lat,
          pickup_lng: pickupCoords?.lon
        }).catch((err) => {
          console.error('Auto-assignment failed:', err);
          // Ride still exists, assignment will happen via fallback or manual review
        });

        // Send WhatsApp receipt to passenger via UltraMsg
        if (form.passenger_phone) {
          const payLabel = paymentMethod === 'mmg' ? 'MMG Mobile Money' : paymentMethod === 'card' ? 'Card' : 'Cash';
          const trackingUrl = `${window.location.origin}/track-ride?id=${ride.id}`;
          const receiptMsg = `🧾 ZIP.GY Ride Receipt\n\n✅ Ride Booked!\n\n👤 Name: ${form.passenger_name}\n📍 From: ${form.pickup_location}\n🏁 To: ${form.dropoff_location}\n💰 Fare: GYD ${fare}\n💳 Payment: ${payLabel}\n🆔 Ride ID: ${ride.id}\n\n📍 Track your ride:\n${trackingUrl}\n\n⚡ Thank you for using ZIP.GY!`;
          base44.functions.invoke('sendWhatsApp', { to: form.passenger_phone, message: receiptMsg }).catch(() => {});
        }

        // Save addresses to recent
        const addrs = [form.pickup_location, form.dropoff_location].filter(Boolean);
        const updated = [...new Set([...addrs, ...recentAddresses])].slice(0, 8);
        setRecentAddresses(updated);
        localStorage.setItem('zipgy_recent_addresses', JSON.stringify(updated));

        clearDraft();
        setShowPostRideShare(true);
        window.scrollTo(0, 0);

        // For guest users, invite them silently — they'll see the "Sign Up" prompt on the confirmation screen
        if (!userProfile && form.passenger_email) {
          base44.users.inviteUser(form.passenger_email, "user").catch(() => {});
        }
        return ride;
      });
    } catch (err) {
      clearIdempotencyKey(idempotencyKey);
      captureError(err, 'BookRide', form.pickup_location);
      setError(err);
    } finally {
      setLoading(false);
    }
  };

  return (
    <>
    <SEOSchema page="booking" />
    <div className="min-h-screen bg-background pb-12 overflow-y-auto" style={{ WebkitOverflowScrolling: "touch" }}>

      {/* Enhanced Taxi Header Banner - ZIP.GY Branding */}
      <div 
        className="sticky top-0 z-50 flex-shrink-0 md:hidden shadow-xl"
        style={{ paddingTop: 'max(12px, env(safe-area-inset-top, 12px))' }}
      >
        {/* Main Banner */}
        <div className="bg-gradient-to-r from-emerald-600 via-teal-600 to-emerald-700 px-4 pt-4 pb-3 relative overflow-hidden">
          <div className="absolute inset-0 opacity-10">
            <div className="absolute top-0 right-0 w-32 h-32 bg-white rounded-full -translate-y-1/2 translate-x-1/2" />
            <div className="absolute bottom-0 left-0 w-24 h-24 bg-white rounded-full translate-y-1/2 -translate-x-1/2" />
          </div>
          <div className="relative z-10 flex items-center gap-3">
            <button onClick={() => window.history.back()} className="p-2.5 hover:bg-white/20 active:bg-white/30 rounded-full transition-all flex-shrink-0 shadow-lg" aria-label="Go back">
              <ChevronLeft className="w-5 h-5 text-white" />
            </button>
            <div className="flex-1 flex items-center gap-3">
              <div className="bg-white/20 backdrop-blur-sm rounded-xl p-2 shadow-lg">
                <ZipgyLogo className="h-6 w-auto" />
              </div>
              <div className="flex-1">
                <p className="text-lg font-extrabold text-white leading-tight">Book a Ride</p>
                <p className="text-xs text-white/90 font-medium mt-0.5">Fast & reliable taxi service</p>
              </div>
            </div>
            <div className="text-3xl">🚕</div>
          </div>
        </div>
        <div className="bg-white border-b border-gray-100 px-4 py-2.5">
          <div className="flex items-center gap-2 overflow-x-auto pb-0.5 scrollbar-hide">
            <button onClick={(e) => { e.preventDefault(); e.stopPropagation(); navigate("/home-new-mobile"); }} className="flex items-center gap-1.5 px-3 py-1.5 bg-emerald-50 hover:bg-emerald-100 active:bg-emerald-150 rounded-full text-xs font-semibold text-emerald-700 whitespace-nowrap transition-all shadow-sm">
              <Home className="w-3.5 h-3.5" /> Home
            </button>
            <button onClick={(e) => { e.preventDefault(); e.stopPropagation(); navigate("/order-food"); }} className="flex items-center gap-1.5 px-3 py-1.5 bg-orange-50 hover:bg-orange-100 active:bg-orange-150 rounded-full text-xs font-semibold text-orange-700 whitespace-nowrap transition-all shadow-sm">
              <Utensils className="w-3.5 h-3.5" /> Food
            </button>
            <button onClick={(e) => { e.preventDefault(); e.stopPropagation(); navigate("/order-groceries"); }} className="flex items-center gap-1.5 px-3 py-1.5 bg-blue-50 hover:bg-blue-100 active:bg-blue-150 rounded-full text-xs font-semibold text-blue-700 whitespace-nowrap transition-all shadow-sm">
              <Store className="w-3.5 h-3.5" /> Grocery
            </button>
            <button onClick={(e) => { e.preventDefault(); e.stopPropagation(); navigate("/request-delivery"); }} className="flex items-center gap-1.5 px-3 py-1.5 bg-purple-50 hover:bg-purple-100 active:bg-purple-150 rounded-full text-xs font-semibold text-purple-700 whitespace-nowrap transition-all shadow-sm">
              <Package className="w-3.5 h-3.5" /> Delivery
            </button>
          </div>
        </div>
      </div>






















<div className="max-w-2xl mx-auto px-4 py-6">
        <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }}>
          <WhatsAppNotice variant="user" />

          {/* SOS Safety Banner */}
          <a href="/safety" className="flex items-center gap-3 bg-red-50 border border-red-200 rounded-2xl px-4 py-3 mb-2 hover:bg-red-100 transition-colors group">
            <span className="text-2xl flex-shrink-0">🆘</span>
            <div className="flex-1 min-w-0">
              <p className="font-heading font-bold text-red-800 text-sm">In-App SOS Emergency Button</p>
              <p className="text-xs text-red-600 mt-0.5">During your ride, press SOS to instantly alert your emergency contacts with your GPS location.</p>
            </div>
            <span className="text-red-400 group-hover:text-red-600 text-xs font-semibold flex-shrink-0">Learn more →</span>
          </a>

          <form onSubmit={handleSubmit} className="space-y-6">
            {/* Ride Type */}
            <div>
              <p className="font-heading font-bold text-base mb-3 text-foreground">{t('booking.select_ride_type', lang)}</p>
              <div className="grid grid-cols-3 gap-2.5">
                {getRideTypes(lang).map((type) => {
                    const bizPreview = calculateFare(0, type.value, null);
                    const isSelected = selectedType === type.value;
                    return (
                      <button
                        key={type.value}
                        type="button"
                        onClick={() => setSelectedType(type.value)}
                        className={`relative p-3 rounded-2xl border-2 text-left transition-all duration-200 active:scale-95 ${
                        isSelected ? "border-primary bg-primary/5 shadow-md" : "border-border bg-card hover:border-primary/40"}`
                        }>
                        
                      {type.badge &&
                        <span className={`absolute -top-2 -right-1 text-[10px] font-bold px-1.5 py-0.5 rounded-full ${isSelected ? 'bg-primary text-white' : 'bg-muted text-muted-foreground'}`}>
                          {type.badge}
                        </span>
                        }
                      <div className="text-xl mb-1">{type.icon}</div>
                      <div className="font-heading font-bold text-sm text-foreground leading-tight">{type.label}</div>
                      <p className="text-[11px] text-muted-foreground leading-tight mt-0.5 mb-1.5">{type.description}</p>
                      <p className="text-xs font-bold text-primary">GYD {bizPreview}+</p>
                    </button>);

                  })}
              </div>
            </div>

            {/* Locations */}
            <div className="relative grid sm:grid-cols-2 gap-4">
              <div className="space-y-2">
                <div className="flex items-center justify-between">
                  <Label htmlFor="pickup" className="font-medium">{t('booking.pickup_location', lang)}</Label>
                  <button type="button" onClick={useMyLocation} disabled={gpsLoading}
                    className="flex items-center gap-1 text-xs text-primary hover:underline disabled:opacity-50">
                    {gpsLoading ? <Loader2 className="w-3 h-3 animate-spin" /> : <MapPin className="w-3 h-3" />}
                    {t('booking.use_my_location', lang)}
                  </button>
                </div>
                <div className="relative w-full">
                  <MapPin className="absolute left-3 top-3 w-4 h-4 text-primary" />
                  <Input
                      id="pickup"
                      placeholder={lang === 'es' ? 'ej. Mercado Stabroek, Georgetown' : 'e.g. Stabroek Market, Georgetown'}
                      className="pl-10 pr-10 h-14 rounded-xl text-base w-full"
                      style={{ fontSize: '16px', maxWidth: '100%' }}
                      value={form.pickup_location}
                      onChange={(e) => updateField("pickup_location", e.target.value)}
                      onKeyDown={(e) => handleKeyboardNav(e, {
                        onEnter: handleSubmit,
                        onEscape: () => setForm((prev) => ({ ...prev, pickup_location: '' }))
                      })}
                      {...a11yAttrs.pickupInput}
                      required />
                    
                  <button type="button" onClick={() => setMapPicker('pickup')} className="absolute right-3 top-3 text-muted-foreground hover:text-primary transition-colors" title={t('booking.pick_on_map', lang)}>
                    <Map className="w-4 h-4" />
                  </button>
                </div>
              </div>
              {/* Swap button */}
              <button
                  type="button"
                  onClick={() => setForm((prev) => ({ ...prev, pickup_location: prev.dropoff_location, dropoff_location: prev.pickup_location }))}
                  className="hidden sm:flex absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-10 w-8 h-8 rounded-full bg-card border border-border shadow hover:bg-muted transition-colors items-center justify-center"
                  title={t('booking.swap', lang)}>
                  
                <ArrowRightLeft className="w-3.5 h-3.5 text-muted-foreground" />
              </button>

              <div className="space-y-2 w-full">
                <Label htmlFor="dropoff" className="font-medium">{t('booking.dropoff_location', lang)}</Label>
                <div className="relative w-full">
                  <MapPin className="absolute left-3 top-3 w-4 h-4 text-destructive" />
                  <Input
                      id="dropoff"
                      placeholder={lang === 'es' ? 'ej. Estadio Providence' : 'e.g. Providence Stadium'}
                      className="pl-10 pr-10 h-14 rounded-xl text-base w-full"
                      style={{ fontSize: '16px', maxWidth: '100%' }}
                      value={form.dropoff_location}
                      onChange={(e) => updateField("dropoff_location", e.target.value)}
                      onKeyDown={(e) => handleKeyboardNav(e, { onEnter: handleSubmit })}
                      {...a11yAttrs.dropoffInput}
                      required />
                    
                  <button type="button" onClick={() => setMapPicker('dropoff')} className="absolute right-3 top-3 text-muted-foreground hover:text-primary transition-colors" title={t('booking.pick_on_map', lang)}>
                    <Map className="w-4 h-4" />
                  </button>
                </div>
              </div>
            </div>
            {/* Recent Addresses */}
            {recentAddresses.length > 0 && !form.pickup_location && !form.dropoff_location &&
              <div className="space-y-2">
                <Label className="text-xs text-muted-foreground">{t('booking.recent_addresses', lang)}</Label>
                <div className="flex flex-wrap gap-2">
                  {recentAddresses.slice(0, 5).map((addr, i) =>
                  <button
                    key={i}
                    type="button"
                    onClick={() => !form.pickup_location ? updateField("pickup_location", addr) : updateField("dropoff_location", addr)}
                    className="flex items-center gap-1.5 px-3 py-1.5 rounded-full border border-border text-xs text-muted-foreground hover:border-primary/40 hover:text-foreground transition-all bg-card">
                    
                      <MapPin className="w-3 h-3 flex-shrink-0" /> <span className="truncate max-w-[180px]">{addr}</span>
                    </button>
                  )}
                </div>
              </div>
              }

            {mapPicker &&
              <MapAddressPicker
                label={mapPicker === 'pickup' ? 'Pickup' : 'Dropoff'}
                onSelect={(addr) => updateField(mapPicker === 'pickup' ? 'pickup_location' : 'dropoff_location', addr)}
                onClose={() => setMapPicker(null)} />

              }

            {/* Personal Info */}
            <div className="grid sm:grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label htmlFor="name" className="font-medium">{t('booking.your_name', lang)}</Label>
                <Input
                    id="name"
                    placeholder={t('booking.full_name', lang)}
                    className="h-14 rounded-xl"
                    value={form.passenger_name}
                    onChange={(e) => updateField("passenger_name", e.target.value)}
                    required />
                  
              </div>
              <div className="space-y-2">
                <Label htmlFor="phone" className="font-medium">{t('booking.phone_number', lang)}</Label>
                <Input
                    id="phone"
                    placeholder={lang === 'es' ? '+592-000-0000' : '+592-000-0000'}
                    className="h-14 rounded-xl"
                    value={form.passenger_phone}
                    onChange={(e) => updateField("passenger_phone", e.target.value)}
                    required />
                  
              </div>
              <div className="space-y-2">
                <Label htmlFor="email" className="font-medium">{t('booking.email_address', lang)}</Label>
                <Input
                    id="email"
                    type="email"
                    placeholder={lang === 'es' ? 'tu@correo.com' : 'your@email.com'}
                    className="h-14 rounded-xl"
                    value={form.passenger_email}
                    onChange={(e) => updateField("passenger_email", e.target.value)}
                    required />
                  
              </div>
            </div>

            {/* Scheduled Ride */}
            <div className="space-y-2">
              <Label htmlFor="scheduled" className="font-medium">{t('booking.schedule_pickup', lang)}</Label>
              <Input
                  id="scheduled"
                  type="datetime-local"
                  className="h-14 rounded-xl"
                  value={scheduledAt}
                  min={new Date().toISOString().slice(0, 16)}
                  onChange={(e) => setScheduledAt(e.target.value)} />
                
              <p className="text-xs text-muted-foreground">{t('booking.book_now_desc', lang)}</p>
            </div>

            {/* Promo Code */}
            <div className="space-y-2">
              <Label className="font-medium">{t('booking.promo_code', lang)}</Label>
              <div className="flex gap-2">
                <Input
                    placeholder={t('booking.enter_promo', lang)}
                    className="h-14 rounded-xl flex-1 uppercase"
                    value={promoCode}
                    onChange={(e) => {setPromoCode(e.target.value.toUpperCase());setPromoResult(null);}} />
                  
                <Button type="button" variant="outline" className="h-14 rounded-xl px-5 font-heading font-semibold" onClick={applyPromo} disabled={promoChecking || !promoCode.trim()}>
                  {promoChecking ? <Loader2 className="w-4 h-4 animate-spin" /> : t('booking.apply', lang)}
                </Button>
              </div>
              {promoResult?.error && <p className="text-xs text-destructive">{promoResult.error}</p>}
              {promoResult?.discount && <p className="text-xs text-green-600 font-medium">{t('booking.promo_applied', lang).replace('{}', promoResult.discount)}</p>}
            </div>

            {/* Live Fare Estimate */}
            {(calcLoading || fareInfo) &&
              <motion.div
                initial={{ opacity: 0, y: -6 }}
                animate={{ opacity: 1, y: 0 }}
                transition={lowBattery ? { duration: 0 } : { duration: 0.2 }}
                className={`rounded-2xl border p-4 flex items-center gap-4 ${
                fareInfo?.error ? "bg-destructive/5 border-destructive/20" : "bg-primary/5 border-primary/20"}`
                }
                {...a11yAttrs.fareDisplay}>
                <div className="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center flex-shrink-0">
                  {calcLoading ? <Loader2 className="w-5 h-5 text-primary animate-spin" /> : <Calculator className="w-5 h-5 text-primary" />}
                </div>
                <div>
                  {calcLoading && <p className="text-sm text-muted-foreground">{t('booking.calculating_fare', lang)}</p>}
                  {fareInfo?.error && <p className="text-sm text-destructive">{fareInfo.error}</p>}
                  {fareInfo?.fare &&
                  <>
                      {promoResult?.discount ?
                    <div className="flex items-center gap-2">
                          <p className="font-heading font-bold text-xl text-foreground line-through text-muted-foreground">GYD {fareInfo.fare}</p>
                          <p className="font-heading font-bold text-xl text-green-600">GYD {Math.round(fareInfo.fare * (1 - promoResult.discount / 100))}</p>
                        </div> :

                    <p className="font-heading font-bold text-xl text-foreground">GYD {fareInfo.fare}</p>
                    }
                      <div className="flex flex-wrap gap-2 mt-1">
                        {getPeakHourMultiplier() > 1 &&
                      <p className="text-xs text-accent font-semibold">⚡ {t('booking.peak_hours', lang)}</p>
                      }
                        {fareInfo?.isNight &&
                      <p className="text-xs text-amber-600 font-semibold">🌙 Night rate (+20%)</p>
                      }
                        {fareInfo?.isAirport &&
                      <p className="text-xs text-blue-600 font-semibold">✈️ Airport fee (GYD 500)</p>
                      }
                      </div>
                      <div className="flex items-center gap-1 text-xs text-muted-foreground mt-1">
                        <Route className="w-3 h-3" /> {fareInfo.distanceKm} km
                        {fareInfo.eta_minutes && <span>· {t('booking.eta_minutes', lang).replace('{}', fareInfo.eta_minutes)}</span>}
                      </div>
                    </>
                  }
                </div>
              </motion.div>
              }

            {/* Fare Negotiation */}
            <div className="space-y-3">
              <button
                  type="button"
                  onClick={() => {setMakeOffer(!makeOffer);setPassengerOffer("");}}
                  className={`flex items-center gap-2 px-4 py-2.5 rounded-xl border-2 text-sm font-heading font-semibold transition-all w-full ${
                  makeOffer ? "border-accent bg-accent/10 text-foreground" : "border-border text-muted-foreground hover:border-primary/30"}`
                  }>
                  
                <ArrowRightLeft className="w-4 h-4 text-primary" />
                {makeOffer ? t('booking.negotiating', lang) : t('booking.make_offer', lang)}
              </button>
              {makeOffer &&
                <div className="space-y-1">
                  <Label className="font-medium text-sm">{t('booking.your_offer', lang)}</Label>
                  <Input
                    type="number"
                    placeholder={fareInfo?.fare ? `${t('booking.suggested', lang)}: ${fareInfo.fare}` : lang === 'es' ? 'ej. 1200' : 'e.g. 1200'}
                    className="h-12 rounded-xl"
                    value={passengerOffer}
                    onChange={(e) => setPassengerOffer(e.target.value)}
                    min="100" />
                  
                  <p className="text-xs text-muted-foreground">{t('booking.drivers_will_see', lang)}</p>
                </div>
                }
            </div>

            {/* Payment Method */}
            <div className="space-y-3">
              <Label className="font-medium flex items-center gap-2"><Wallet className="w-4 h-4" /> {t('booking.payment_method', lang)}</Label>
              <div className="grid grid-cols-3 gap-3">
                {[
                  { value: "cash", label: t('booking.cash', lang) },
                  { value: "mmg", label: t('booking.mmg_mobile', lang) },
                  { value: "card", label: t('booking.card', lang) }].
                  map((opt) =>
                  <button
                    key={opt.value}
                    type="button"
                    onClick={() => setPaymentMethod(opt.value)}
                    className={`p-3 rounded-xl border-2 text-sm font-heading font-medium transition-all ${
                    paymentMethod === opt.value ?
                    "border-primary bg-primary/5 text-foreground" :
                    "border-border text-muted-foreground hover:border-primary/30"}`
                    }>
                    
                    {opt.label}
                  </button>
                  )}
              </div>
              
              {/* MMG Payment Guide - shown when MMG is selected */}
              {paymentMethod === "mmg" &&
                <div className="mt-2">
                  <MMGPaymentGuide />
                </div>
                }
            </div>

            {/* Notes */}
            <div className="space-y-2">
              <Label htmlFor="notes" className="font-medium">{t('booking.notes', lang)}</Label>
              <Textarea
                  id="notes"
                  placeholder={t('booking.special_requests', lang)}
                  className="rounded-xl resize-none"
                  rows={3}
                  value={form.notes}
                  onChange={(e) => updateField("notes", e.target.value)} />
                
            </div>

            {/* Book a Taxi Button */}
            {validationMessage &&
              <p className="text-center text-sm font-medium text-destructive bg-destructive/10 border border-destructive/20 rounded-xl px-4 py-3">
                {validationMessage}
              </p>
              }
            <button
                type="submit"
                disabled={loading || lowBattery && !fareInfo}
                className="w-full flex items-center justify-center gap-2.5 bg-primary text-primary-foreground font-heading font-bold text-base py-4 rounded-2xl shadow-lg active:scale-[0.98] transition-all disabled:opacity-50 disabled:cursor-not-allowed"
                {...a11yAttrs.bookButton}>
                
              {loading ? <Loader2 className="w-5 h-5 animate-spin" /> : <Car className="w-5 h-5" />}
              {loading ? t('booking.booking_taxi', lang) : lowBattery ? t('booking.low_battery', lang) : t('booking.book_taxi', lang)}
              {!loading && <ArrowRight className="w-4 h-4" />}
            </button>
          </form>
        </motion.div>
      </div>
    </div>
      <ErrorReporter error={error} page="booking" orderId={bookedRide?.id} onClose={() => setError(null)} />
      <PostRideSharePrompt
        open={showPostRideShare}
        onOpenChange={setShowPostRideShare}
        rideData={bookedRide ? { fare: { total: bookedRide.final_fare }, distance: bookedRide.distance_km } : null} />
      
    </>);

}