/**
 * 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>
	);
}
