import React, { useState, useEffect } from 'react';
import { Wind, MapPin, Search, AlertTriangle, CheckCircle, XCircle, Loader2, Clock, CalendarDays, Navigation, Crosshair, Info, ChevronDown, ChevronUp, RefreshCw, Sunrise, Sunset, Camera, ShieldAlert, ExternalLink, Activity, Compass } from 'lucide-react';

export default function App() {
  const [city, setCity] = useState('');
  const [searchQuery, setSearchQuery] = useState('');
  const [currentWeather, setCurrentWeather] = useState(null);
  const [hourlyForecast, setHourlyForecast] = useState([]);
  const [dailyForecast, setDailyForecast] = useState([]);
  const [sunData, setSunData] = useState(null); 
  const [kpIndex, setKpIndex] = useState(null);
  const [lastUpdated, setLastUpdated] = useState(null);
  
  const [loading, setLoading] = useState(false);
  const [gpsLoading, setGpsLoading] = useState(false);
  const [error, setError] = useState('');
  const [showLegend, setShowLegend] = useState(false);

  const [currentLocation, setCurrentLocation] = useState({ lat: null, lon: null, name: '' });

  const LIMIT_SAFE = 20;
  const LIMIT_WARNING = 35;

  const FAVORITES = [
    { name: 'Grömitz', lat: 54.1493, lon: 10.9572 },
    { name: 'St. Peter-Ording', lat: 54.3045, lon: 8.6366 },
    { name: 'Niederkassel', lat: 50.8258, lon: 7.0097 }
  ];

  const fetchAllData = async (lat, lon, locationName) => {
    setLoading(true);
    setError('');
    
    try {
      const weatherUrl = `https://api.open-meteo.com/v1/forecast?latitude=${lat}&longitude=${lon}&current=wind_speed_10m,wind_direction_10m,wind_gusts_10m&hourly=wind_speed_10m,wind_gusts_10m&daily=wind_speed_10m_max,wind_gusts_10m_max,sunrise,sunset&wind_speed_unit=kmh&timezone=Europe%2FBerlin&forecast_days=4`;
      const weatherResponse = await fetch(weatherUrl);
      const data = await weatherResponse.json();

      setCity(locationName);
      setCurrentWeather(data.current);
      setLastUpdated(new Date());
      setCurrentLocation({ lat, lon, name: locationName });

      const todaySunrise = new Date(data.daily.sunrise[0]);
      const todaySunset = new Date(data.daily.sunset[0]);

      const morningGoldenStart = todaySunrise;
      const morningGoldenEnd = new Date(todaySunrise.getTime() + 60 * 60 * 1000);
      const eveningGoldenStart = new Date(todaySunset.getTime() - 60 * 60 * 1000);
      const eveningGoldenEnd = todaySunset;

      setSunData({
        sunrise: todaySunrise,
        sunset: todaySunset,
        goldenMorning: { start: morningGoldenStart, end: morningGoldenEnd },
        goldenEvening: { start: eveningGoldenStart, end: eveningGoldenEnd }
      });

      const now = new Date();
      const currentHourIndex = data.hourly.time.findIndex(timeStr => new Date(timeStr) > now) - 1;
      const safeIndex = currentHourIndex >= 0 ? currentHourIndex : 0;
      
      const nextHours = [];
      for (let i = safeIndex + 1; i <= safeIndex + 5; i++) {
        if (data.hourly.time[i]) {
          nextHours.push({
            time: new Date(data.hourly.time[i]),
            wind: data.hourly.wind_speed_10m[i],
            gusts: data.hourly.wind_gusts_10m[i]
          });
        }
      }
      setHourlyForecast(nextHours);

      const nextDays = [];
      for (let i = 1; i <= 3; i++) {
        if (data.daily.time[i]) {
          nextDays.push({
            date: new Date(data.daily.time[i]),
            wind_max: data.daily.wind_speed_10m_max[i],
            gusts_max: data.daily.wind_gusts_10m_max[i]
          });
        }
      }
      setDailyForecast(nextDays);

      try {
        const kpResponse = await fetch('https://services.swpc.noaa.gov/products/noaa-planetary-k-index.json');
        if (kpResponse.ok) {
            const kpData = await kpResponse.json();
            const latestEntry = kpData[kpData.length - 1];
            if (latestEntry && latestEntry.length > 1) {
                const kpVal = parseFloat(latestEntry[1]);
                setKpIndex(kpVal);
            }
        }
      } catch (kpError) {
          setKpIndex(null);
      }

    } catch (err) {
      setError('Fehler beim Abrufen der Wetterdaten.');
    } finally {
      setLoading(false);
    }
  };

  const fetchWindDataByName = async (locationName) => {
    setLoading(true);
    setError('');
    try {
      const geoResponse = await fetch(`https://geocoding-api.open-meteo.com/v1/search?name=${encodeURIComponent(locationName)}&count=1&language=de&format=json`);
      const geoData = await geoResponse.json();

      if (!geoData.results || geoData.results.length === 0) {
        throw new Error('Ort nicht gefunden.');
      }
      const { latitude, longitude, name } = geoData.results[0];
      await fetchAllData(latitude, longitude, name);
    } catch (err) {
      setError(err.message || 'Fehler bei der Ortssuche.');
      setLoading(false);
    }
  };

  const handleGPSLocation = () => {
    setGpsLoading(true);
    setError('');

    if (!navigator.geolocation) {
      setError('Dein Browser unterstützt keine Standorterkennung.');
      setGpsLoading(false);
      return;
    }

    navigator.geolocation.getCurrentPosition(
      async (position) => {
        const { latitude, longitude } = position.coords;
        try {
           const geoResponse = await fetch(`https://api.bigdatacloud.net/data/reverse-geocode-client?latitude=${latitude}&longitude=${longitude}&localityLanguage=de`);
           const geoData = await geoResponse.json();
           const locationName = geoData.city || geoData.locality || "Mein Standort";
           await fetchAllData(latitude, longitude, locationName);
        } catch(e) {
           await fetchAllData(latitude, longitude, "Mein Standort");
        }
        setGpsLoading(false);
      },
      (geoError) => {
        let errorMsg = 'GPS Fehler.';
        if (geoError.code === 1) errorMsg = 'GPS Zugriff verweigert.';
        if (geoError.code === 2) errorMsg = 'GPS Position nicht verfügbar.';
        if (geoError.code === 3) errorMsg = 'GPS Zeitüberschreitung.';
        setError(errorMsg);
        setGpsLoading(false);
      },
      { enableHighAccuracy: true, timeout: 10000, maximumAge: 0 }
    );
  };

  const handleRefresh = () => {
      if (currentLocation.lat && currentLocation.lon) {
          fetchAllData(currentLocation.lat, currentLocation.lon, currentLocation.name);
      }
  };

  useEffect(() => {
    fetchAllData(FAVORITES[0].lat, FAVORITES[0].lon, FAVORITES[0].name);
  }, []);

  const handleSearch = (e) => {
    e.preventDefault();
    if (searchQuery.trim() !== '') {
      fetchWindDataByName(searchQuery);
    }
  };

  const evaluateFlightConditions = (windSpeed, gusts) => {
    const maxWind = Math.max(windSpeed || 0, gusts || 0);

    if (maxWind <= LIMIT_SAFE) {
      return { status: 'green', color: 'text-green-500', bg: 'bg-green-100', border: 'border-green-200', gradient: 'from-green-400 to-emerald-600', Icon: CheckCircle, label: 'Perfekt' };
    } else if (maxWind <= LIMIT_WARNING) {
      return { status: 'yellow', color: 'text-yellow-600', bg: 'bg-yellow-100', border: 'border-yellow-200', gradient: 'from-yellow-400 to-orange-500', Icon: AlertTriangle, label: 'Vorsicht' };
    } else {
      return { status: 'red', color: 'text-red-600', bg: 'bg-red-100', border: 'border-red-200', gradient: 'from-red-500 to-rose-700', Icon: XCircle, label: 'Gefahr' };
    }
  };

  const getKpStatus = (kp) => {
      if (kp === null) return null;
      if (kp < 4) return { color: 'text-green-300', text: 'Normal (GPS Gut)' };
      if (kp < 5) return { color: 'text-yellow-300', text: 'Erhöht (Vorsicht)' };
      return { color: 'text-red-300', text: 'Warnung (GPS Risiko)' };
  };

  // Hilfsfunktion für Windrichtungs-Text (z.B. N, NO, O...)
  const getWindDirectionText = (deg) => {
    const directions = ['N', 'NO', 'O', 'SO', 'S', 'SW', 'W', 'NW'];
    const val = Math.floor((deg / 45) + 0.5);
    return directions[(val % 8)];
  };

  const formatTime = (dateObj) => {
    return dateObj.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' });
  };

  return (
    <div className="min-h-screen bg-slate-50 flex flex-col items-center py-6 px-4 font-sans text-slate-800 pb-12">
      
      <div className="w-full max-w-md mb-4">
        <div className="flex justify-between items-center mb-4">
            <h1 className="text-2xl font-black text-slate-800 flex items-center gap-2">
            <Wind className="text-blue-600" />
            Drohnen Wetter
            </h1>
            
            <button 
                onClick={handleGPSLocation}
                disabled={gpsLoading || loading}
                className={`p-2.5 rounded-full shadow-sm transition-all flex items-center justify-center
                    ${gpsLoading ? 'bg-blue-100 text-blue-500 animate-pulse' : 'bg-white text-slate-700 hover:bg-blue-50 hover:text-blue-600 border border-slate-200'}`}
                title="Aktuellen Standort verwenden"
            >
                {gpsLoading ? <Loader2 size={20} className="animate-spin" /> : <Crosshair size={20} />}
            </button>
        </div>
        
        <form onSubmit={handleSearch} className="relative mb-3 flex gap-2">
          <div className="relative flex-grow">
            <input
                type="text"
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                placeholder="Ort suchen..."
                className="w-full px-4 py-3 pl-11 rounded-2xl border border-slate-200 shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white"
            />
            <MapPin className="absolute left-4 top-3.5 text-slate-400" size={18} />
          </div>
          <button 
            type="submit" 
            className="bg-slate-800 hover:bg-slate-700 text-white px-4 rounded-2xl transition-colors flex items-center justify-center"
            disabled={loading}
          >
            {loading ? <Loader2 className="animate-spin" size={20} /> : <Search size={20} />}
          </button>
        </form>

        <div className="flex flex-wrap gap-2 mb-2">
          {FAVORITES.map((fav, idx) => (
            <button
              key={idx}
              onClick={() => fetchAllData(fav.lat, fav.lon, fav.name)}
              className="flex items-center gap-1 text-xs font-semibold px-3 py-1.5 bg-white border border-slate-200 rounded-full shadow-sm hover:border-blue-300 hover:bg-blue-50 transition-all text-slate-600"
            >
              <Navigation size={12} className="text-blue-500" />
              {fav.name}
            </button>
          ))}
        </div>
      </div>

      {error && (
        <div className="w-full max-w-md bg-red-100 text-red-700 p-4 rounded-2xl mb-4 flex items-center gap-3">
          <AlertTriangle size={20} className="flex-shrink-0" />
          <p className="text-sm font-medium">{error}</p>
        </div>
      )}

      {currentWeather && !error && (() => {
        const liveStatus = evaluateFlightConditions(currentWeather.wind_speed_10m, currentWeather.wind_gusts_10m);
        const LiveIcon = liveStatus.Icon;
        const kpStatus = getKpStatus(kpIndex);

        return (
          <div className={`w-full max-w-md space-y-4 transition-opacity duration-300 ${loading ? 'opacity-50 pointer-events-none' : 'opacity-100'}`}>
            
            {/* 1. HAUPT-WIDGET (Inkl. KP-Index & Windrose) */}
            <div className={`rounded-3xl shadow-lg text-white p-6 bg-gradient-to-br ${liveStatus.gradient}`}>
              <div className="flex justify-between items-start mb-4">
                <div>
                  <div className="flex items-center gap-1.5 bg-black/10 w-fit px-2.5 py-1 rounded-full mb-2">
                    <MapPin size={12} />
                    <span className="text-xs font-bold tracking-wide uppercase truncate max-w-[200px]">{city}</span>
                  </div>
                  <p className="text-2xl font-bold">{liveStatus.label}</p>
                </div>
                <LiveIcon size={44} className="opacity-90 drop-shadow-md" />
              </div>

              {/* Wind & Böen Grid */}
              <div className="grid grid-cols-2 gap-3 bg-black/15 rounded-2xl p-4 mb-3 backdrop-blur-sm">
                <div className="flex flex-col">
                  <span className="text-[10px] opacity-80 uppercase tracking-wider mb-1">Wind</span>
                  <div className="flex items-baseline gap-1">
                    <span className="text-3xl font-bold">{currentWeather.wind_speed_10m}</span>
                    <span className="text-xs opacity-80">km/h</span>
                  </div>
                </div>
                <div className="flex flex-col border-l border-white/20 pl-3">
                  <span className="text-[10px] opacity-80 uppercase tracking-wider mb-1">Böen (Max)</span>
                  <div className="flex items-baseline gap-1">
                    <span className="text-3xl font-bold">{currentWeather.wind_gusts_10m || '--'}</span>
                    <span className="text-xs opacity-80">km/h</span>
                  </div>
                </div>
              </div>

              {/* Untere Leiste des Widgets: Windrose & KP-Index */}
              <div className="grid grid-cols-2 gap-3 pt-2 border-t border-white/15">
                
                {/* Visuelle Windrose */}
                <div className="flex items-center gap-3">
                  <div className="relative w-10 h-10 bg-black/20 rounded-full flex items-center justify-center flex-shrink-0 border border-white/20">
                    <span className="absolute text-[8px] top-0.5 text-white/70 font-bold">N</span>
                    <Compass 
                      size={22} 
                      style={{ transform: `rotate(${currentWeather.wind_direction_10m}deg)` }} 
                      className="transition-transform duration-700 text-white" 
                    />
                  </div>
                  <div className="flex flex-col">
                    <span className="text-[10px] opacity-80 uppercase tracking-wider">Windrichtung</span>
                    <span className="text-sm font-bold">
                      {getWindDirectionText(currentWeather.wind_direction_10m)} ({currentWeather.wind_direction_10m}°)
                    </span>
                  </div>
                </div>

                {/* KP-Index Integration */}
                <div className="flex items-center gap-2.5 justify-end border-l border-white/20 pl-3">
                  <div className="text-right">
                    <span className="text-[10px] opacity-80 uppercase tracking-wider block">KP-Index</span>
                    <span className={`text-xs font-bold ${kpStatus ? kpStatus.color : 'text-white'}`}>
                      {kpIndex !== null ? kpStatus.text : 'Lädt...'}
                    </span>
                  </div>
                  <div className="bg-black/20 p-2 rounded-xl border border-white/20 flex-shrink-0">
                    <Activity size={18} className={kpIndex !== null && kpIndex >= 5 ? 'text-red-400' : 'text-green-300'} />
                  </div>
                </div>

              </div>

            </div>

            {/* Aktualisieren Info */}
            <div className="flex items-center justify-between px-2 mb-2">
                <p className="text-xs text-slate-500 font-medium flex items-center gap-1.5">
                    <Clock size={12} />
                    Stand: {lastUpdated ? lastUpdated.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit', second: '2-digit' }) : '--:--'} Uhr
                </p>
                <button 
                    onClick={handleRefresh}
                    className="text-xs font-medium text-blue-600 hover:text-blue-800 flex items-center gap-1 transition-colors bg-blue-50 px-2 py-1 rounded-md"
                >
                    <RefreshCw size={12} className={loading ? "animate-spin" : ""} /> Aktualisieren
                </button>
            </div>

            {/* STÜNDLICHE VORHERSAGE */}
            <div className="bg-white rounded-3xl p-5 shadow-sm border border-slate-100">
              <h3 className="text-sm font-bold text-slate-800 flex items-center gap-2 mb-4">
                <Clock size={16} className="text-blue-500" /> Nächste Stunden
              </h3>
              <div className="flex gap-3 overflow-x-auto pb-2 scrollbar-hide">
                {hourlyForecast.map((hour, idx) => {
                  const status = evaluateFlightConditions(hour.wind, hour.gusts);
                  const Icon = status.Icon;
                  return (
                    <div key={idx} className={`flex-shrink-0 flex flex-col items-center p-3 rounded-2xl border ${status.bg} ${status.border} min-w-[70px]`}>
                      <span className="text-xs font-bold text-slate-600 mb-2">
                        {hour.time.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' })}
                      </span>
                      <Icon size={20} className={`${status.color} mb-2`} />
                      <div className="text-center">
                        <p className="text-sm font-black text-slate-800">{Math.max(hour.wind, hour.gusts || 0).toFixed(0)}</p>
                        <p className="text-[9px] text-slate-500 font-medium uppercase">km/h</p>
                      </div>
                    </div>
                  );
                })}
              </div>
            </div>

            {/* TAGES VORHERSAGE */}
            <div className="bg-white rounded-3xl p-5 shadow-sm border border-slate-100">
               <h3 className="text-sm font-bold text-slate-800 flex items-center gap-2 mb-4">
                <CalendarDays size={16} className="text-blue-500" /> Nächste 3 Tage (Böen-Max.)
              </h3>
              <div className="space-y-3">
                {dailyForecast.map((day, idx) => {
                  const status = evaluateFlightConditions(day.wind_max, day.gusts_max);
                  const Icon = status.Icon;
                  const dayName = idx === 0 ? "Morgen" : day.date.toLocaleDateString('de-DE', { weekday: 'long' });

                  return (
                    <div key={idx} className="flex items-center justify-between p-3 rounded-2xl bg-slate-50 border border-slate-100">
                      <div className="flex items-center gap-3">
                        <div className={`p-2 rounded-xl ${status.bg} ${status.color}`}>
                          <Icon size={18} />
                        </div>
                        <div>
                          <p className="font-bold text-sm text-slate-700">{dayName}</p>
                          <p className="text-xs text-slate-500">{day.date.toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit' })}</p>
                        </div>
                      </div>
                      <div className="text-right">
                        <p className="font-black text-slate-800">{Math.max(day.wind_max, day.gusts_max).toFixed(0)} <span className="text-xs font-normal text-slate-500">km/h</span></p>
                        <p className={`text-[10px] font-bold uppercase tracking-wide ${status.color}`}>{status.label}</p>
                      </div>
                    </div>
                  );
                })}
              </div>
            </div>

			{/* SONNE & GOLDEN HOUR */}
            {sunData && (
              <div className="bg-white rounded-3xl p-5 shadow-sm border border-slate-100">
                <h3 className="text-sm font-bold text-slate-800 flex items-center gap-2 mb-4">
                  <Camera size={16} className="text-orange-500" /> Sonne & Golden Hour (Heute)
                </h3>
                
                <div className="grid grid-cols-2 gap-3">
                  <div className="bg-orange-50/50 rounded-2xl p-4 border border-orange-100 flex flex-col justify-between">
                    <div className="flex items-center gap-2 mb-2 text-orange-600">
                      <Sunrise size={18} />
                      <span className="font-bold text-xs uppercase tracking-wider">Aufgang</span>
                    </div>
                    <p className="text-2xl font-black text-slate-800 mb-2">
                      {formatTime(sunData.sunrise)}
                    </p>
                    <div className="bg-white p-2 rounded-xl border border-orange-100/50 shadow-sm">
                      <span className="text-[10px] font-bold text-orange-500 block mb-0.5">Golden Hour</span>
                      <span className="text-xs font-medium text-slate-700">
                        {formatTime(sunData.goldenMorning.start)} - {formatTime(sunData.goldenMorning.end)}
                      </span>
                    </div>
                  </div>

                  <div className="bg-indigo-50/30 rounded-2xl p-4 border border-indigo-100 flex flex-col justify-between">
                    <div className="flex items-center gap-2 mb-2 text-indigo-600">
                      <Sunset size={18} />
                      <span className="font-bold text-xs uppercase tracking-wider">Untergang</span>
                    </div>
                    <p className="text-2xl font-black text-slate-800 mb-2">
                      {formatTime(sunData.sunset)}
                    </p>
                    <div className="bg-white p-2 rounded-xl border border-indigo-100/50 shadow-sm">
                      <span className="text-[10px] font-bold text-indigo-500 block mb-0.5">Golden Hour</span>
                      <span className="text-xs font-medium text-slate-700">
                        {formatTime(sunData.goldenEvening.start)} - {formatTime(sunData.goldenEvening.end)}
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            )}

            {/* DIPUL FLUGZONEN CHECK */}
            <div className="bg-slate-800 rounded-3xl p-4 shadow-sm flex items-center justify-between mt-4">
                <div className="flex items-start gap-3">
                    <div className="bg-blue-500/20 p-2 rounded-xl text-blue-400">
                        <ShieldAlert size={20} />
                    </div>
                    <div>
                        <h3 className="text-sm font-bold text-white mb-0.5">Darf ich hier fliegen?</h3>
                        <p className="text-xs text-slate-400">Prüfe offizielle Flugverbotszonen.</p>
                    </div>
                </div>
                <a 
                    href="https://map.dipul.de/" 
                    target="_blank" 
                    rel="noopener noreferrer"
                    className="bg-blue-500 hover:bg-blue-600 text-white text-xs font-bold px-4 py-2.5 rounded-xl transition-colors flex items-center gap-1.5 shadow-sm"
                >
                    dipul <ExternalLink size={14} />
                </a>
            </div>

            {/* LEGENDE */}
            <div className="bg-white rounded-2xl border border-slate-200 overflow-hidden shadow-sm mt-4">
                <button 
                    onClick={() => setShowLegend(!showLegend)}
                    className="w-full flex items-center justify-between p-4 bg-slate-50 hover:bg-slate-100 transition-colors"
                >
                    <span className="text-sm font-bold text-slate-700 flex items-center gap-2">
                        <Info size={18} className="text-blue-500" /> Wind-Legende & Grenzwerte
                    </span>
                    {showLegend ? <ChevronUp size={18} className="text-slate-500" /> : <ChevronDown size={18} className="text-slate-500" />}
                </button>
                
                {showLegend && (
                    <div className="p-4 bg-white border-t border-slate-100 space-y-3">
                        <div className="flex items-start gap-3">
                            <div className="bg-green-100 text-green-600 p-1.5 rounded-lg mt-0.5"><CheckCircle size={16} /></div>
                            <div>
                                <p className="text-sm font-bold text-slate-800">Grün: 0 - 20 km/h</p>
                                <p className="text-xs text-slate-600">Optimales Flugwetter. Sicher für alle gängigen Kameradrohnen (z.B. DJI Mini).</p>
                            </div>
                        </div>
                        <div className="flex items-start gap-3">
                            <div className="bg-yellow-100 text-yellow-600 p-1.5 rounded-lg mt-0.5"><AlertTriangle size={16} /></div>
                            <div>
                                <p className="text-sm font-bold text-slate-800">Gelb: 21 - 35 km/h</p>
                                <p className="text-xs text-slate-600">Flug möglich, aber erhöhter Akkuverbrauch. Gegenlenken erforderlich. Warnungen beachten.</p>
                            </div>
                        </div>
                        <div className="flex items-start gap-3">
                            <div className="bg-red-100 text-red-600 p-1.5 rounded-lg mt-0.5"><XCircle size={16} /></div>
                            <div>
                                <p className="text-sm font-bold text-slate-800">Rot: über 35 km/h</p>
                                <p className="text-xs text-slate-600">Nicht fliegen! Starke Abdriftgefahr bei Böen.</p>
                            </div>
                        </div>
                        <p className="text-[10px] text-slate-400 mt-2 italic text-center">Hinweis: Es wird immer der höhere Wert (Wind oder Böe) zur Bewertung herangezogen.</p>
                    </div>
                )}
            </div>

          </div>
        );
      })()}

    </div>
  );
}