import { useEffect, useState } from "react";
import { Clock } from "lucide-react";
import {
  ensureLoaded,
  subscribe,
  getGeo,
  flagEmoji,
} from "@/lib/geoWeather";

/**
 * BottomLeftBar — Real-time HH:MM clock + small country flag.
 *
 * Half of the split footer (the right half is BottomRightBar with
 * Location + Weather). Center is intentionally left empty for the
 * AdMob banner.
 */
const useLiveClock = () => {
  const [text, setText] = useState<string>(() =>
    new Date().toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }),
  );
  useEffect(() => {
    const tick = () =>
      setText(
        new Date().toLocaleTimeString([], {
          hour: "2-digit",
          minute: "2-digit",
        }),
      );
    const now = new Date();
    const ms = (60 - now.getSeconds()) * 1000 - now.getMilliseconds();
    let interval: number | undefined;
    const timeout = window.setTimeout(() => {
      tick();
      interval = window.setInterval(tick, 60_000);
    }, Math.max(250, ms));
    return () => {
      window.clearTimeout(timeout);
      if (interval !== undefined) window.clearInterval(interval);
    };
  }, []);
  return text;
};

const BottomLeftBar = () => {
  const time = useLiveClock();
  const [, force] = useState(0);

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

  const geo = getGeo();
  const flag = flagEmoji(geo?.countryCode);

  return (
    <div
      data-testid="bottom-left-bar"
      className="fixed left-3 sm:left-4 z-40 pointer-events-none select-none"
      style={{
        // FEATURE (2026-01): clear the global AdMob banner at the
        // bottom. --ad-banner-bottom-h is 0 when no banner is showing
        // (premium user, ads disabled, banner not loaded), 72px when
        // it is — set centrally by lib/admob.ts.
        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" data-testid="bottom-left-bar-clock">
          <Clock
            className="w-3.5 h-3.5 sm:w-4 sm:h-4 text-primary"
            strokeWidth={1.8}
          />
          <span
            className="tabular-nums text-[12px] sm:text-sm tracking-[0.18em] gold-text"
            style={{ fontWeight: 500 }}
          >
            {time}
          </span>
        </div>

        {flag && (
          <>
            <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)",
              }}
            />
            <span
              className="text-[14px] sm:text-base leading-none"
              data-testid="bottom-left-bar-flag"
              aria-label={geo?.countryCode || ""}
            >
              {flag}
            </span>
          </>
        )}
      </div>
    </div>
  );
};

export default BottomLeftBar;
