import React from "react";
import sunriseIcon from "../assets/icons/sunrise-fill.svg";
import sunsetIcon from "../assets/icons/sunset-fill.svg";

const WeatherData: React.FC = () => {
  const weatherRaw = localStorage.getItem("weather");
  const weatherData = JSON.parse(weatherRaw || "{}");

  // OpenWeatherMap Icon-URL
  const iconCode = weatherData?.weather?.[0]?.icon;
  const iconUrl = iconCode
    ? `https://openweathermap.org/img/wn/${iconCode}@4x.png`
    : "";

  return (
    <div className="flex justify-center items-center min-h-[60vh]">
      <div className="bg-white/90 p-10 rounded-2xl shadow-2xl min-w-[320px] text-center border-2 border-blue-200">
        <h2 className="text-3xl font-bold mb-2 text-blue-700 flex items-center justify-center gap-2">
          {weatherData?.name}
        </h2>
        <p className="text-5xl font-extrabold mb-2 text-blue-900">
          {weatherData?.main?.temp}{" "}
          {localStorage.getItem("unit") === "metric"
            ? "°C"
            : localStorage.getItem("unit") === "imperial"
            ? "°F"
            : localStorage.getItem("unit") === "standard"
            ? "K"
            : "°C"}
        </p>
        <p className="flex items-center justify-center gap-2">
          {weatherData?.sys?.country && (
            <>
              <img
                src={`https://flagcdn.com/${weatherData.sys.country.toLowerCase()}.svg`}
                alt={weatherData.sys.country}
                width={24}
                height={18}
              />
              <span>{weatherData.sys.country}</span>
            </>
          )}
        </p>
        <p className="text-lg mb-4 capitalize text-blue-600">
          {weatherData?.weather?.[0]?.description}
        </p>
        {iconUrl && (
          <img
            src={iconUrl}
            alt={weatherData?.weather?.[0]?.description}
            className="mx-auto mb-4 w-32 h-32 drop-shadow-lg"
          />
        )}
        <div className="flex flex-col items-center gap-4 mb-2">
          <div className="flex items-center gap-3">
            <img src={sunriseIcon} alt="Sunrise Icon" className="w-7 h-7" />
            <span className="text-base text-blue-700 font-semibold">
              Sunrise:{" "}
              {weatherData?.sys?.sunrise
                ? new Date(weatherData.sys.sunrise * 1000).toLocaleTimeString(
                    "de-DE",
                    { hour: "2-digit", minute: "2-digit" }
                  )
                : "--:--"}
            </span>
          </div>
          <div className="flex items-center gap-3">
            <img src={sunsetIcon} alt="Sunset Icon" className="w-7 h-7" />
            <span className="text-base text-blue-700 font-semibold">
              Sunset:{" "}
              {weatherData?.sys?.sunset
                ? new Date(weatherData.sys.sunset * 1000).toLocaleTimeString(
                    "de-DE",
                    { hour: "2-digit", minute: "2-digit" }
                  )
                : "--:--"}
            </span>
          </div>
        </div>
      </div>
    </div>
  );
};

export default WeatherData;