"use client";

import { usePathname } from "next/navigation";
import { useEffect, useState } from "react";

import { Fade, Flex, Line, Row, ToggleButton } from "@once-ui-system/core";

import { donate, display, downloads, home } from "@/resources";
import { ThemeToggle } from "./ThemeToggle";
import styles from "./Header.module.scss";
import Consts from "@/utils";

type TimeDisplayProps = {
  timeZone: string;
  locale?: string; // Optionally allow locale, defaulting to 'en-GB'
};

const TimeDisplay: React.FC<TimeDisplayProps> = ({ timeZone, locale = "en-GB" }) => {
  const [currentTime, setCurrentTime] = useState("");

  useEffect(() => {
    const updateTime = () => {
      const now = new Date();
      const options: Intl.DateTimeFormatOptions = {
        timeZone,
        hour: "2-digit",
        minute: "2-digit",
        second: "2-digit",
        hour12: false,
      };
      const timeString = new Intl.DateTimeFormat(locale, options).format(now);
      setCurrentTime(timeString);
    };

    updateTime();
    const intervalId = setInterval(updateTime, 1000);

    return () => clearInterval(intervalId);
  }, [timeZone, locale]);

  return <>{currentTime}</>;
};

export default TimeDisplay;

export const Header = () => {
  const pathname = usePathname() ?? "";

  return (
    <>
      <Fade s={{ hide: true }} fillWidth position="fixed" height="80" zIndex={9} />
      <Fade
        hide
        s={{ hide: false }}
        fillWidth
        position="fixed"
        bottom="0"
        to="top"
        height="80"
        zIndex={9}
      />
      <Row
        fitHeight
        className={styles.position}
        position="sticky"
        as="header"
        zIndex={9}
        fillWidth
        padding="8"
        horizontal="center"
        data-border="rounded"
        s={{
          position: "fixed",
        }}
      >
        <Row paddingLeft="12" fillWidth vertical="center" textVariant="body-default-s">
          {display.location && <Row s={{ hide: true }}/>}
        </Row>
        <Row fillWidth horizontal="center">
          <Row
            background="page"
            border="neutral-alpha-weak"
            radius="m-4"
            shadow="l"
            padding="4"
            horizontal="center"
            zIndex={1}
          >
            <Row gap="4" vertical="center" textVariant="body-default-s" suppressHydrationWarning>
              <ToggleButton prefixIcon="home" href={home.path} selected={pathname === home.path} />
              <Line background="neutral-alpha-medium" vert maxHeight="24" />
              <Row s={{ hide: true }}>
                <ToggleButton
                  prefixIcon="download"
                  href={downloads.path}
                  label={downloads.label}
                  selected={pathname === downloads.path}
                  />
              </Row>
              {/*
              uncomment to show download page in header on mobile
              <Row hide s={{ hide: false }}>
                <ToggleButton
                  prefixIcon="download"
                  href={downloads.path}
                  selected={pathname === downloads.path}
                  />
              </Row>*/}
              <Row s={{ hide: true }}>
                <ToggleButton
                  prefixIcon="heart"
                  href={donate.path}
                  label={donate.label}
                  selected={pathname === donate.path}
                />
              </Row>
              <Row hide s={{ hide: false }}>
                <ToggleButton
                  prefixIcon="heart"
                  href={donate.path}
                  selected={pathname === donate.path}
                />
              </Row>
              <Line background="neutral-alpha-medium" vert maxHeight="24" />
              <Row s={{ hide: true }}>
                <ToggleButton
                  prefixIcon="code"
                  href={Consts.SourceCode}
                  label="Code"
                  />
              </Row>
              <Row hide s={{ hide: false }}>
                <ToggleButton
                  prefixIcon="code"
                  href={Consts.SourceCode}
                  />
              </Row>
              <Row s={{ hide: true }}>
                <ToggleButton
                  prefixIcon="book"
                  href="https://docs.ryujinx.app"
                  label="Docs"
                />
              </Row>
              <Row hide s={{ hide: false }}>
                <ToggleButton
                  prefixIcon="book"
                  href="https://docs.ryujinx.app"
                />
              </Row>
              <Row s={{ hide: true }}>
                <ToggleButton
                  prefixIcon="ghost"
                  href="https://blog.ryujinx.app"
                  label="Blog"
                />
              </Row>
              <Row hide s={{ hide: false }}>
                <ToggleButton
                  prefixIcon="ghost"
                  href="https://blog.ryujinx.app"
                />
              </Row>
              <Row s={{ hide: true }}>
                <ToggleButton
                  prefixIcon="server"
                  href="https://ldn.ryujinx.app"
                  label="LDN"
                  />
              </Row>
              <Row hide s={{ hide: false }}>
                <ToggleButton
                  prefixIcon="server"
                  href="https://ldn.ryujinx.app"
                  />
              </Row>
              {display.themeSwitcher && (
                <>
                  <Line background="neutral-alpha-medium" vert maxHeight="24" />
                  <ThemeToggle />
                </>
              )}
            </Row>
          </Row>
        </Row>
        <Flex fillWidth horizontal="end" vertical="center">
          <Flex
            paddingRight="12"
            horizontal="end"
            vertical="center"
            textVariant="body-default-s"
            gap="20"
          >
            <Flex s={{ hide: true }}>
              {display.time && <TimeDisplay timeZone={Intl.DateTimeFormat().resolvedOptions().timeZone} />}
            </Flex>
          </Flex>
        </Flex>
      </Row>
    </>
  );
};
