Real Uber Interview Experience

import React, { useState } from 'react';

// Mock location database
const LOCATIONS = {
  'downtown sf': { lat: 37.7749, lng: -122.4194 },
  'airport terminal 2': { lat: 37.6213, lng: -122.3790 },
  'pier 39': { lat: 37.8087, lng: -122.4098 },
  'golden gate': { lat: 37.8199, lng: -122.4783 }
};

const RIDE_TYPES = {
  'UBER_X': { rate: 1.50, name: 'Uber X' },
  'UBER_PREMIER': { rate: 2.50, name: 'Uber Premier' }
};

const PROMO_CODES = {
  'UBER10': 0.10,
  'SAVE20': 0.20
};

const calculateDistance = (loc1, loc2) => {
  // Simplified: use Manhattan distance
  const dx = Math.abs(loc1.lat - loc2.lat);
  const dy = Math.abs(loc1.lng - loc2.lng);
  // 1 degree ≈ 111 km
  return Math.sqrt(dx * dx + dy * dy) * 111;
};

function RideBooking() {
  const [pickup, setPickup] = useState('Downtown SF');
  const [dropoff, setDropoff] = useState('Airport Terminal 2');
  const [rideType, setRideType] = useState('UBER_X');
  const [promoCode, setPromoCode] = useState('');
  const [fareData, setFareData] = useState(null);
  const [error, setError] = useState('');
  const [loading, setLoading] = useState(false);

  const handleEstimateFare = () => {
    // Validate inputs
    if (!pickup.trim() || !dropoff.trim()) {
      setError('Please enter both locations');
      return;
    }
    if (pickup.toLowerCase() === dropoff.toLowerCase()) {
      setError('Pickup and dropoff must be different');
      return;
    }

    setLoading(true);
    setError('');

    // Simulate API call
    setTimeout(() => {
      const pickupKey = pickup.toLowerCase();
      const dropoffKey = dropoff.toLowerCase();

      const loc1 = LOCATIONS[pickupKey] || {
        lat: 37.7749 + Math.random() * 0.5,
        lng: -122.4194 + Math.random() * 0.5
      };
      const loc2 = LOCATIONS[dropoffKey] || {
        lat: 37.7749 + Math.random() * 0.5,
        lng: -122.4194 + Math.random() * 0.5
      };

      const distance = calculateDistance(loc1, loc2).toFixed(1);
      const baseFare = 5;
      const rideRate = RIDE_TYPES[rideType].rate;
      const distanceCharge = (distance * rideRate).toFixed(2);
      const subtotal = (parseFloat(baseFare) + 
                       parseFloat(distanceCharge)).toFixed(2);

      let discount = 0;
      if (PROMO_CODES[promoCode.toUpperCase()]) {
        discount = (subtotal * 
                   PROMO_CODES[promoCode.toUpperCase()]).toFixed(2);
      }

      const finalPrice = 
        (parseFloat(subtotal) - parseFloat(discount)).toFixed(2);

      setFareData({
        distance,
        baseFare,
        distanceCharge,
        subtotal,
        discount,
        finalPrice,
        promoApplied: promoCode.toUpperCase()
      });

      setLoading(false);
    }, 800);
  };

  const handleBookRide = () => {
    if (!fareData) return;
    
    setLoading(true);
    // Simulate booking API
    setTimeout(() => {
      setError('');
      setFareData(null);
      setPickup('');
      setDropoff('');
      setPromoCode('');
      alert(`✓ Ride booked! Total: $${fareData.finalPrice}`);
      setLoading(false);
    }, 600);
  };

  return (
    <div>
      <input value={pickup} onChange={(e) => setPickup(e.target.value)} />
      <input value={dropoff} 
             onChange={(e) => setDropoff(e.target.value)} />
      <select value={rideType} 
              onChange={(e) => setRideType(e.target.value)}>
        {Object.entries(RIDE_TYPES).map(([key, val]) => (
          <option key={key} value={key}>
            {val.name} (${val.rate}/km)
          </option>
        ))}
      </select>
      <input value={promoCode} 
             onChange={(e) => setPromoCode(e.target.value)} 
             placeholder="Promo code" />
      <button onClick={handleEstimateFare} disabled={loading}>
        {loading ? 'Estimating...' : 'Get Estimate'}
      </button>

      {error && <div style={{color: 'red'}}>{error}</div>}
      
      {fareData && (
        <>
          <div>Distance: {fareData.distance} km</div>
          <div>Base: ${fareData.baseFare}</div>
          <div>Distance Charge: ${fareData.distanceCharge}</div>
          {fareData.discount > 0 && (
            <div>Discount: -${fareData.discount}</div>
          )}
          <div><strong>Total: ${fareData.finalPrice}</strong></div>
          <button onClick={handleBookRide} disabled={loading}>
            {loading ? 'Booking...' : 'Book Ride'}
          </button>
        </>
      )}
    </div>
  );
}

export default RideBooking;