"use client";

import { useState, useEffect, useCallback } from "react";
import dynamic from "next/dynamic";
import { MapPin, Crosshair, X, Check } from "@phosphor-icons/react";

export interface PickedLocation {
  lat:     number;
  lng:     number;
  address: string;
}

async function reverseGeocode(lat: number, lng: number): Promise<string> {
  try {
    const res  = await fetch(
      `https://nominatim.openstreetmap.org/reverse?lat=${lat}&lon=${lng}&format=json`,
      { headers: { "Accept-Language": "fr" } }
    );
    const data = await res.json();
    return data.display_name ?? `${lat.toFixed(5)}, ${lng.toFixed(5)}`;
  } catch {
    return `${lat.toFixed(5)}, ${lng.toFixed(5)}`;
  }
}

/* ── Map modal (dynamically imported to avoid SSR) ── */
const MapModal = dynamic(() => import("./LocationMapModal"), { ssr: false });

/* ── Main component ── */
export default function LocationPicker({
  value,
  onChange,
}: {
  value:    PickedLocation | null;
  onChange: (loc: PickedLocation) => void;
}) {
  const [gpsLoading, setGpsLoading] = useState(false);
  const [gpsError,   setGpsError]   = useState("");
  const [showMap,    setShowMap]    = useState(false);

  const getCurrentLocation = useCallback(() => {
    if (!navigator.geolocation) {
      setGpsError("Géolocalisation non disponible sur cet appareil.");
      return;
    }
    if (location.protocol !== "https:") {
      setGpsError("La géolocalisation nécessite HTTPS. Utilisez la version en ligne du site.");
      return;
    }
    setGpsLoading(true);
    setGpsError("");

    const ua = navigator.userAgent;
    const browserName = /CriOS/.test(ua) ? "Chrome"
      : /FxiOS/.test(ua) ? "Firefox"
      : /EdgiOS/.test(ua) ? "Edge"
      : /Safari/.test(ua) ? "Safari"
      : "votre navigateur";

    navigator.geolocation.getCurrentPosition(
      async ({ coords }) => {
        const address = await reverseGeocode(coords.latitude, coords.longitude);
        onChange({ lat: coords.latitude, lng: coords.longitude, address });
        setGpsLoading(false);
      },
      (err) => {
        if (err.code === 1) {
          const isIOS = /iphone|ipad|ipod/i.test(ua);
          if (isIOS) {
            setGpsError(`Appuyez sur ⋯ › Réglages du site › Position → Autoriser. Ou : Réglages iPhone › ${browserName} › Localisation → Lors de l'utilisation.`);
          } else {
            setGpsError(`Cliquez sur 🔒 dans la barre d'adresse et autorisez la localisation.`);
          }
        } else if (err.code === 2) {
          setGpsError("Position introuvable. Assurez-vous que le GPS est activé.");
        } else {
          setGpsError("Délai dépassé. Réessayez dans un endroit plus dégagé.");
        }
        setGpsLoading(false);
      },
      { timeout: 15000, enableHighAccuracy: true }
    );
  }, [onChange]);

  return (
    <div className="space-y-2">

      {/* Buttons */}
      <div className="grid grid-cols-2 gap-2">
        <button
          type="button"
          onClick={getCurrentLocation}
          disabled={gpsLoading}
          className="flex items-center justify-center gap-2 bg-brand-sand-light border border-brand-dark/20 rounded-xl px-4 py-3 text-brand-dark text-sm font-semibold hover:border-brand-dark/40 hover:bg-white transition-all disabled:opacity-50"
        >
          {gpsLoading ? (
            <span className="w-4 h-4 border-2 border-brand-dark/20 border-t-brand-dark rounded-full animate-spin" />
          ) : (
            <Crosshair size={15} weight="bold" className="text-brand-dark/60" />
          )}
          {gpsLoading ? "Localisation…" : "Ma position"}
        </button>

        <button
          type="button"
          onClick={() => setShowMap(true)}
          className="flex items-center justify-center gap-2 bg-brand-sand-light border border-brand-dark/20 rounded-xl px-4 py-3 text-brand-dark text-sm font-semibold hover:border-brand-dark/40 hover:bg-white transition-all"
        >
          <MapPin size={15} weight="bold" className="text-brand-dark/60" />
          Choisir sur la carte
        </button>
      </div>

      {/* GPS error */}
      {gpsError && (
        <div className="bg-red-50 border border-red-200 rounded-xl px-3 py-2.5">
          <p className="text-red-600 text-xs leading-relaxed whitespace-pre-line">{gpsError}</p>
        </div>
      )}

      {/* Selected location display */}
      {value && (
        <div className="flex items-start gap-2 bg-white border border-brand-dark/15 rounded-xl px-3 py-2.5">
          <Check size={14} weight="bold" className="text-green-600 flex-shrink-0 mt-0.5" />
          <p className="text-brand-dark text-xs leading-relaxed flex-1">{value.address}</p>
          <button
            type="button"
            onClick={() => onChange({ lat: 0, lng: 0, address: "" })}
            className="text-brand-dark/30 hover:text-brand-dark transition-colors flex-shrink-0"
          >
            <X size={13} />
          </button>
        </div>
      )}

      {/* Map modal */}
      {showMap && (
        <MapModal
          initial={value}
          onConfirm={async (lat, lng) => {
            const address = await reverseGeocode(lat, lng);
            onChange({ lat, lng, address });
            setShowMap(false);
          }}
          onClose={() => setShowMap(false)}
        />
      )}
    </div>
  );
}