import { useEffect, useState } from "react";
import { MapPin } from "lucide-react";
import {
  ensureLoaded,
  subscribe,
  getGeo,
  getWeather,
  weatherIconFor,
} from "@/lib/geoWeather";

/**
 * BottomRightBar — Location (City, Country) + local weather (Temp + icon).
 *
 * Half of the split footer; the left half is BottomLeftBar with
 * Clock + Flag. Center stays empty for the AdMob banner.
 */
const BottomRightBar = () => {
  const [, force] = useState(0);

  useEffect(() => {
    void ensureLoaded();
    const off = subscribe(() => force((n) => n + 1));
    return off;
  }, []);

  const geo = getGeo();
  const weather = getWeather();
  const wx = weatherIconFor(weather?.weatherCode);

  const locText = geo?.city && geo?.country
    ? `${geo.city}, ${geo.country}`
    : geo?.country || "—";

  const tempText = weather?.tempC != null ? `${Math.round(weather.tempC)}°C` : "";

  return (
    <div
      data-testid="bottom-right-bar"
      className="fixed right-3 sm:right-4 z-40 pointer-events-none select-none"
      style={{
        bottom: "calc(env(safe-area-inset-bottom, 0px) + 8px + var(--ad-banner-bottom-h, 0px))",
      }}
    >
      <div
        className="pointer-events-auto flex items-center gap-2 sm:gap-3 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full"
        style={{
          background:
            "linear-gradient(135deg, hsla(200,30%,10%,0.78), hsla(200,30%,6%,0.85))",
          backdropFilter: "blur(14px)",
          WebkitBackdropFilter: "blur(14px)",
          border: "1px solid hsla(40,80%,55%,0.28)",
          boxShadow:
            "0 6px 24px hsla(0,0%,0%,0.45), 0 0 0 1px hsla(40,80%,55%,0.06) inset, 0 0 22px hsla(40,80%,55%,0.10)",
          fontFamily: "Cinzel, serif",
        }}
      >
        <div
          className="flex items-center gap-1.5 max-w-[42vw] sm:max-w-[260px]"
          data-testid="bottom-right-bar-location"
        >
          <MapPin className="w-3.5 h-3.5 sm:w-4 sm:h-4 text-primary/80" strokeWidth={1.6} />
          <span
            className="text-[10px] sm:text-xs tracking-[0.16em] truncate text-foreground/85"
            style={{ fontWeight: 400, letterSpacing: "0.12em" }}
          >
            {locText}
          </span>
        </div>

        {tempText && (
          <>
            <span
              aria-hidden
              className="hidden sm:block h-3.5 w-px"
              style={{
                background:
                  "linear-gradient(180deg, transparent, hsla(40,80%,55%,0.55), transparent)",
              }}
            />
            <div
              className="flex items-center gap-1"
              data-testid="bottom-right-bar-weather"
              aria-label={wx.label}
              title={wx.label}
            >
              <span className="text-[14px] sm:text-base leading-none">{wx.icon}</span>
              <span
                className="text-[11px] sm:text-xs tabular-nums tracking-[0.12em] gold-text"
                style={{ fontWeight: 500 }}
              >
                {tempText}
              </span>
            </div>
          </>
        )}
      </div>
    </div>
  );
};

export default BottomRightBar;
