Mav-Mobile-UI/src/components/UI/Header.tsx

import { Link } from "react-router";
import Logo from "/MAV.svg";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
  faGear,
  faListCheck,
  faMaximize,
  faMinimize,
  faRotate,
} from "@fortawesome/free-solid-svg-icons";
import type { VersionFieldType } from "../../types/types";
import { useEffect, useState } from "react";
import SoundBtn from "./SoundBtn";

async function fetchVersions(
  signal?: AbortSignal
): Promise<VersionFieldType | undefined> {
  try {
    const res = await fetch("http://192.168.75.11/api/versions", { signal });
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    return res.json();
  } catch (error) {
    console.log(error);
    return undefined;
  }
}

const pad = (n: number) => String(n).padStart(2, "0");
const normalizeToMs = (ts: number) => (ts < 1e12 ? ts * 1000 : ts); // seconds → ms if needed

function formatFromMs(ms: number, tz: "local" | "utc" = "local") {
  const d = new Date(ms);
  const h = tz === "utc" ? d.getUTCHours() : d.getHours();
  const m = tz === "utc" ? d.getUTCMinutes() : d.getMinutes();
  const s = tz === "utc" ? d.getUTCSeconds() : d.getSeconds();
  const day = tz === "utc" ? d.getUTCDate() : d.getDate();
  const month = (tz === "utc" ? d.getUTCMonth() : d.getMonth()) + 1;
  const year = tz === "utc" ? d.getUTCFullYear() : d.getFullYear();
  return `${pad(h)}:${pad(m)}:${pad(s)} ${pad(day)}-${pad(month)}-${year}`;
}

export default function Header() {
  const [offsetMs, setOffsetMs] = useState<number | null>(null);
  const [nowMs, setNowMs] = useState<number>(Date.now());
  const [isFullscreen, setIsFullscreen] = useState(false);

  const toggleFullscreen = () => {
    if (!document.fullscreenElement) {
      // Enter fullscreen on the entire app
      document.documentElement.requestFullscreen();
      setIsFullscreen(true);
    } else {
      // Exit fullscreen
      document.exitFullscreen();
      setIsFullscreen(false);
    }
  };

  const refreshBrowser = () => {
    window.location.reload();
  };

  useEffect(() => {
    const ac = new AbortController();
    fetchVersions(ac.signal)
      .then((data) => {
        if (!data) throw new Error("No data");
        const serverMs = normalizeToMs(data?.timeStamp);
        setOffsetMs(serverMs - Date.now());
      })
      .catch((err) => {
        console.log(err);
      });
    return () => ac.abort("failed");
  }, []);

  useEffect(() => {
    let timer: number;
    const schedule = () => {
      const now = Date.now();
      setNowMs(now);
      const delay = 1000 - (now % 1000);
      timer = window.setTimeout(schedule, delay);
    };
    schedule();
    return () => clearTimeout(timer);
  }, []);

  const serverNowMs = offsetMs == null ? nowMs : nowMs + offsetMs;
  const localStr = formatFromMs(serverNowMs, "local");
  const utcStr = formatFromMs(serverNowMs, "utc");

  return (
    <div className="relative bg-[#253445] border-b border-gray-500 items-center mx-auto px-2 sm:px-6 lg:px-8 p-4 flex flex-col md:flex-row justify-between">
      <div className="w-30">
        <Link to={"/"}>
          <img src={Logo} alt="Logo" width={150} height={150} />
        </Link>
      </div>
      <div className="flex flex-col lg:flex-row items-center space-x-24 justify-items-center">
        <div className="flex flex-col leading-tight text-white tabular-nums text-xl text-right mx-auto md:mx-10 space-y-1 my-2">
          <h2>Local: {localStr}</h2>
          <h2>UTC: {utcStr}</h2>
        </div>
        <div className="flex flex-row space-x-8">
          <div onClick={toggleFullscreen} className="flex flex-col">
            {isFullscreen ? (
              <FontAwesomeIcon icon={faMinimize} size="2x" />
            ) : (
              <FontAwesomeIcon icon={faMaximize} size="2x" />
            )}
          </div>
          <div onClick={refreshBrowser}>
            <FontAwesomeIcon icon={faRotate} size="2x" />
          </div>
          <SoundBtn />
          <Link to={"/session-settings"}>
            <FontAwesomeIcon
              className="text-white"
              icon={faListCheck}
              size="2x"
            />
          </Link>

          <Link to={"/system-settings"}>
            <FontAwesomeIcon className="text-white" icon={faGear} size="2x" />
          </Link>
        </div>
      </div>
    </div>
  );
}