/**
 * Copyright (c) 2025 xwra
 * SPDX-License-Identifier: AGPL-3.0-or-later
 */

import { useEffect, useState } from "preact/hooks";
import Box from "../components/Box.tsx";

export default function Time() {
  const formatter = new Intl.DateTimeFormat("en-US", {
    hour: "numeric",
    minute: "numeric",
    hour12: true,
    timeZone: "America/Sao_Paulo",
  });

  const now = new Date();
  const time = formatter.format(now);
  const [offset, setOffset] = useState("");

  useEffect(() => {
    const br = new Date(
      now.toLocaleString("en-US", {
        timeZone: "America/Sao_Paulo",
      }),
    );
    const local = new Date(now.toLocaleString("en-US"));
    const diff = br.getTime() - local.getTime();
    const ms = Math.abs(diff);
    const hours = ~~(ms / 36e5);
    const minutes = ~~((ms / 6e4) % 60);

    let output = " · ";
    if (hours) output += `You're ${hours} hour${hours > 1 ? "s" : ""} `;
    if (hours && minutes) output += "and ";
    if (minutes) output += `${minutes} minute${minutes > 1 ? "s" : ""} `;
    if (hours || minutes) output += diff > 0 ? "behind" : "ahead";
    else output = " · Hey, we're in the same time zone!";

    setOffset(output);
  }, []);

  return (
    <Box>
      Brasília Time, {time}
      {offset}
    </Box>
  );
}