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

import * as React from "react";
import { Link } from "react-router";
import Logo from "/MAV.svg";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faGear, faListCheck } from "@fortawesome/free-solid-svg-icons";
import type { VersionFieldType } from "../../types/types";

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] = React.useState<number | null>(null);
  const [nowMs, setNowMs] = React.useState<number>(Date.now());

  React.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");
  }, []);

  React.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-row justify-between">
      {/* Left: Logo */}
      <div className="w-30">
        <Link to={"/"}>
          <img src={Logo} alt="Logo" width={150} height={150} />
        </Link>
      </div>
      {/* Right: Texts stacked + icons */}
      <div className="flex items-center space-x-24">
        <div className="flex flex-col leading-tight text-white text-sm tabular-nums">
          <h2>Local: {localStr}</h2>
          <h2>UTC: {utcStr}</h2>
        </div>
        <div className="flex flex-row space-x-8">
          <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>
  );
}