Geocoding voor e-commerce: betere checkout, minder retouren

import { useState, useCallback } from 'react';
import { debounce } from 'lodash';

const AddressInput = ({ onAddressSelect }) => {
  const [query, setQuery] = useState('');
  const [suggestions, setSuggestions] = useState([]);
  const [loading, setLoading] = useState(false);

  const fetchSuggestions = useCallback(
    debounce(async (input) => {
      if (input.length < 3) {
        setSuggestions([]);
        return;
      }

      setLoading(true);
      try {
        const response = await fetch(
          `/api/address/suggest?q=${encodeURIComponent(input)}`
        );
        const data = await response.json();
        setSuggestions(data.suggestions);
      } finally {
        setLoading(false);
      }
    }, 300),
    []
  );

  const handleSelect = (suggestion) => {
    setQuery(suggestion.formatted_address);
    setSuggestions([]);
    onAddressSelect({
      street: suggestion.street,
      houseNumber: suggestion.house_number,
      postcode: suggestion.postcode,
      city: suggestion.city,
      coordinates: {
        lat: suggestion.latitude,
        lng: suggestion.longitude
      }
    });
  };

  return (
    <div className="address-input">
      <input
        type="text"
        value={query}
        onChange={(e) => {
          setQuery(e.target.value);
          fetchSuggestions(e.target.value);
        }}
        placeholder="Vul je adres in..."
      />

      {loading && <span className="loading">Zoeken...</span>}

      {suggestions.length > 0 && (
        <ul className="suggestions">
          {suggestions.map((s, i) => (
            <li key={i} onClick={() => handleSelect(s)}>
              {s.formatted_address}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
};

const PostcodeCheckout = () => {
  const [postcode, setPostcode] = useState('');
  const [houseNumber, setHouseNumber] = useState('');
  const [address, setAddress] = useState(null);
  const [error, setError] = useState(null);

  const lookupAddress = async () => {
    if (!postcode || !houseNumber) return;

    try {
      const response = await fetch('/api/address/lookup', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          postcode: postcode.replace(/\s/g, '').toUpperCase(),
          house_number: houseNumber
        })
      });

      const data = await response.json();

      if (data.success) {
        setAddress(data.address);
        setError(null);
      } else {
        setError('Adres niet gevonden. Controleer postcode en huisnummer.');
        setAddress(null);
      }
    } catch {
      setError('Er ging iets mis. Probeer opnieuw.');
    }
  };

  return (
    <div className="checkout-address">
      <div className="row">
        <input
          placeholder="Postcode"
          value={postcode}
          onChange={(e) => setPostcode(e.target.value)}
          onBlur={lookupAddress}
        />
        <input
          placeholder="Huisnummer"
          value={houseNumber}
          onChange={(e) => setHouseNumber(e.target.value)}
          onBlur={lookupAddress}
        />
      </div>

      {error && <p className="error">{error}</p>}

      {address && (
        <div className="found-address">
          <p className="street">{address.street} {address.house_number}</p>
          <p className="city">{address.postcode} {address.city}</p>
          <span className="verified">✓ Geverifieerd adres</span>
        </div>
      )}
    </div>
  );
};

const deliveryZones = [
  { name: 'Amsterdam Centrum', radius: 5, cost: 2.95 },
  { name: 'Amsterdam', radius: 15, cost: 4.95 },
  { name: 'Randstad', radius: 50, cost: 6.95 },
  { name: 'Nederland', radius: 300, cost: 8.95 }
];

const warehouseLocation = { lat: 52.3676, lng: 4.9041 };

const calculateDeliveryCost = (customerCoords) => {
  const distance = getDistanceKm(warehouseLocation, customerCoords);

  for (const zone of deliveryZones) {
    if (distance <= zone.radius) {
      return {
        zone: zone.name,
        cost: zone.cost,
        distance: distance.toFixed(1)
      };
    }
  }

  return {
    zone: 'Buiten bezorggebied',
    cost: null,
    error: 'Bezorging niet mogelijk op dit adres'
  };
};

// Haversine formule voor afstand
const getDistanceKm = (point1, point2) => {
  const R = 6371; // Aarde radius in km
  const dLat = toRad(point2.lat - point1.lat);
  const dLon = toRad(point2.lng - point1.lng);
  const a =
    Math.sin(dLat/2) * Math.sin(dLat/2) +
    Math.cos(toRad(point1.lat)) * Math.cos(toRad(point2.lat)) *
    Math.sin(dLon/2) * Math.sin(dLon/2);
  const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
  return R * c;
};

const toRad = (deg) => deg * (Math.PI / 180);