"use client";

import { CloudSun, Droplets, Gauge, Navigation, Thermometer, Umbrella, Wind } from "lucide-react";
import {
  calculateFeelsLike,
  formatHumidity,
  formatPressure,
  formatRainfall,
  formatTemperature,
  formatWind,
  getWindDirection,
} from "@/lib/weather-utils";
import type { SynopStation } from "@/types/imgw";
import { MetricCard } from "@/components/weather/metric-card";
import { useI18n } from "@/lib/i18n";
import { useWeatherStore } from "@/lib/store";

export function CurrentConditionsCard({ station }: { station: SynopStation }) {
  const { language, t } = useI18n();
  const temperatureUnit = useWeatherStore((state) => state.temperatureUnit);
  const windSpeedUnit = useWeatherStore((state) => state.windSpeedUnit);
  const precipitationUnit = useWeatherStore((state) => state.precipitationUnit);
  const pressureUnit = useWeatherStore((state) => state.pressureUnit);
  const feelsLike = calculateFeelsLike(station.temperature, station.humidity, station.windSpeed);
  const metrics = [
    {
      icon: Thermometer,
      label: t("weather.feelsLike"),
      value: formatTemperature(feelsLike, language, temperatureUnit),
      detail: t("weather.feelsLikeDetail"),
    },
    {
      icon: Droplets,
      label: t("weather.humidity"),
      value: formatHumidity(station.humidity, language),
      detail: t("weather.humidityDetail"),
    },
    {
      icon: Gauge,
      label: t("weather.pressure"),
      value: formatPressure(station.pressure, language, pressureUnit),
      detail: t("weather.pressureDetail"),
    },
    {
      icon: Wind,
      label: t("weather.windSpeed"),
      value: formatWind(station.windSpeed, null, language, windSpeedUnit),
      detail: t("weather.windSpeedDetail"),
    },
    {
      icon: Navigation,
      label: t("weather.windDirection"),
      value:
        station.windDirection === null
          ? t("common.noData")
          : `${station.windDirection}° ${getWindDirection(station.windDirection)}`,
      detail: t("weather.windDirectionDetail"),
    },
    {
      icon: Umbrella,
      label: t("weather.rainfallTotal"),
      value: formatRainfall(station.rainfall, language, precipitationUnit),
      detail: t("weather.rainfallDetail"),
    },
    {
      icon: CloudSun,
      label: t("weather.airTemperature"),
      value: formatTemperature(station.temperature, language, temperatureUnit),
      detail: t("weather.temperatureDetail"),
    },
  ];
  return (
    <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
      {metrics.map((metric, index) => (
        <MetricCard {...metric} index={index} key={metric.label} />
      ))}
    </div>
  );
}

export const WeatherDetailsGrid = CurrentConditionsCard;