import { h, ref, onMounted, defineComponent } from 'vue';
import { UIcon } from '#components';
import type { DashboardModule } from '../types/module';

// Map WMO weather codes to simple descriptions and Lucide icons
const getWeatherInfo = (code: number) => {
  if (code === 0) return { label: 'Clear', icon: 'i-wi-day-sunny', color: 'text-yellow-400' };
  if (code >= 1 && code < 4) return { label: 'Partly Cloudy', icon: 'i-wi-day-cloudy', color: 'text-gray-300' };
  if (code >= 4 && code < 45) return { label: 'Cloudy', icon: 'i-wi-cloud', color: 'text-gray-300' };
  if (code === 45 || code === 48) return { label: 'Fog', icon: 'i-wi-fog', color: 'text-gray-400' };
  if (code >= 51 && code <= 55) return { label: 'Drizzle', icon: 'i-wi-rain-mix', color: 'text-blue-300' };
  if (code >= 61 && code <= 65) return { label: 'Rain', icon: 'i-wi-rain', color: 'text-blue-400' };
  if (code >= 71 && code <= 75) return { label: 'Snow', icon: 'i-wi-snow', color: 'text-white' };
  if (code >= 80 && code <= 82) return { label: 'Showers', icon: 'i-wi-rain-wind', color: 'text-blue-500' };
  if (code >= 95) return { label: 'Storm', icon: 'i-wi-storm-showers', color: 'text-purple-400' };
  return { label: 'Unknown', icon: 'i-wi-na', color: 'text-gray-400' };
};

export const WeatherModule: DashboardModule = {
  name: 'weather',
  width: 2,
  height: 1,
  render(params) {
    const locationName = params?.location || (params?.lat && params?.lng ? `${params.lat}, ${params.lng}` : 'London');
    const inputLat = params?.lat;
    const inputLng = params?.lng;

    return h(defineComponent({
      setup() {
        const temp = ref<number | null>(null);
        const condition = ref<{label: string, icon: string, color: string} | null>(null);
        const loading = ref(true);
        const error = ref(false);

        onMounted(async () => {
          try {
            let latitude = inputLat;
            let longitude = inputLng;

            // 1. Get coordinates for location if lat/lng are not provided
            if (latitude === undefined || longitude === undefined) {
              const geoRes = await $fetch<any>(`https://geocoding-api.open-meteo.com/v1/search?name=${encodeURIComponent(locationName)}&count=1`);
              
              if (!geoRes.results || geoRes.results.length === 0) {
                throw new Error('Location not found');
              }
              
              latitude = geoRes.results[0].latitude;
              longitude = geoRes.results[0].longitude;
            }
            
            // 2. Fetch current weather
            const weatherRes = await $fetch<any>(`https://api.open-meteo.com/v1/forecast?latitude=${latitude}&longitude=${longitude}&current_weather=true`);
            
            temp.value = Math.round(weatherRes.current_weather.temperature);
            condition.value = getWeatherInfo(weatherRes.current_weather.weathercode);
          } catch (err) {
            console.error(err);
            error.value = true;
          } finally {
            loading.value = false;
          }
        });
        
        return () => {
          let content;
          
          if (loading.value) {
            content = h('div', { class: 'text-white/50 text-sm animate-pulse' }, 'Loading weather...');
          } else if (error.value || !condition.value) {
            content = h('div', { class: 'text-red-400/80 text-sm' }, 'Failed to load weather');
          } else {
            // The resolved weather info
            content = h('div', { class: 'flex items-center gap-4 w-full justify-center' }, [
              h(UIcon, { name: condition.value.icon, class: `${condition.value.color} w-20 h-20 drop-shadow-lg` }),
              h('div', { class: 'flex flex-col' }, [
                h('span', { class: 'text-3xl font-light tracking-tight text-shadow text-white' }, `${temp.value}°C`),
                h('span', { class: 'text-sm text-white/50 font-medium tracking-wide' }, condition.value.label)
              ])
            ]);
          }

          return h(
            'div',
            { class: 'w-full h-full flex flex-col items-center justify-center p-5 rounded-2xl bg-white/10 backdrop-blur-md border border-white/10 shadow-lg group transition-all relative overflow-hidden' },
            [
              h('div', { class: 'absolute top-3 left-4 text-[10px] text-white/40 uppercase tracking-widest font-bold' }, locationName),
              content
            ]
          );
        };
      }
    }));
  }
};