'use client';

import { CloudRain, Sun, Cloud, Thermometer } from 'lucide-react';
import { useState, useEffect } from 'react';

export function WeatherCard() {
    const [weather, setWeather] = useState<any>(null);
    const [loading, setLoading] = useState(true);
    const [locationName, setLocationName] = useState('Detecting Location...');

    useEffect(() => {
        async function fetchWeather(lat: number, lng: number) {
            try {
                // Fetch Weather
                const res = await fetch(
                    `https://api.open-meteo.com/v1/forecast?latitude=${lat}&longitude=${lng}&current=temperature_2m,relative_humidity_2m,weather_code&daily=temperature_2m_max,temperature_2m_min&temperature_unit=celsius&timezone=auto`
                );
                const data = await res.json();
                setWeather(data);

                // Simple Reverse Geocode (approximate or just use timezone)
                // Using a free reverse geocode API (limited, but fine for client side demo)
                try {
                    const geoRes = await fetch(`https://api.bigdatacloud.net/data/reverse-geocode-client?latitude=${lat}&longitude=${lng}&localityLanguage=en`);
                    const geoData = await geoRes.json();
                    if (geoData.city || geoData.locality) {
                        setLocationName(`${geoData.city || geoData.locality}, ${geoData.countryCode}`);
                    } else {
                        setLocationName('Local Weather');
                    }
                } catch (e) {
                    setLocationName('Local Weather');
                }

            } catch (e) {
                console.error(e);
            } finally {
                setLoading(false);
            }
        }

        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(
                (position) => {
                    fetchWeather(position.coords.latitude, position.coords.longitude);
                },
                (error) => {
                    console.error("Geolocation error:", error);
                    // Fallback to NY if denied
                    fetchWeather(40.7128, -74.0060);
                    setLocationName('New York, US (Default)');
                }
            );
        } else {
            fetchWeather(40.7128, -74.0060);
            setLocationName('New York, US (Default)');
        }
    }, []);

    if (loading) {
        return (
            <div className="col-span-1 md:col-span-2 lg:col-span-2 row-span-1 bg-neutral-900 border border-neutral-800 rounded-xl p-6 relative overflow-hidden animate-pulse">
                <div className="h-4 w-24 bg-neutral-800 rounded mb-4" />
                <div className="h-10 w-16 bg-neutral-800 rounded" />
            </div>
        );
    }

    if (!weather?.current) {
        // ... error state
        return (
            <div className="col-span-1 md:col-span-2 lg:col-span-2 row-span-1 bg-neutral-900 border border-neutral-800 rounded-xl p-6 flex items-center justify-center text-red-500">
                Failed to load weather
            </div>
        );
    }

    const current = weather.current;
    const today = weather.daily;

    return (
        <div className="col-span-1 md:col-span-2 lg:col-span-2 row-span-1 bg-neutral-900 border border-neutral-800 rounded-xl p-6 relative overflow-hidden group hover:border-neutral-700 transition-colors">
            <div className="flex justify-between items-start mb-2">
                <div className="flex items-center gap-2 text-neutral-400">
                    <Cloud size={18} />
                    <span className="text-sm font-medium">Local Weather</span>
                </div>
                <span className="text-xs text-neutral-500 font-mono">{locationName}</span>
            </div>

            <div className="flex items-end gap-4 mt-2">
                <div className="text-4xl font-bold text-white tracking-tighter">{Math.round(current.temperature_2m)}°C</div>
                <div className="pb-1 text-sm text-neutral-400 font-medium">{getWeatherDescription(current.weather_code)}</div>
            </div>

            <div className="mt-4 flex gap-4 text-xs font-mono text-neutral-500">
                <div>H: {Math.round(today.temperature_2m_max[0])}° L: {Math.round(today.temperature_2m_min[0])}°</div>
                <div>Humidity: {current.relative_humidity_2m}%</div>
            </div>
        </div>
    );
}

function getWeatherDescription(code: number) {
    if (code === 0) return 'Clear';
    if (code <= 3) return 'Partly Cloudy';
    if (code <= 48) return 'Foggy';
    if (code <= 67) return 'Rainy';
    if (code <= 77) return 'Snowy';
    return 'Cloudy';
}