import FourTwenty from "@components/FourTwenty/FourTwenty";
import { useEffect, useState } from "react";
import Amogus from "@/components/Amogus/Amogus";
import Card from "@/components/Card/Card";
import {
    CardColumn,
    CardRow,
} from "@/components/CardContainers/CardContainers";
import Datetime from "@/components/Datetime/Datetime";
import Flatastic from "@/components/Flatastic/Flatastic";
import Footer from "@/components/Footer/Footer";
import Terminal from "@/components/Terminal/Terminal";
import Timetable from "@/components/Timetable/Timetable";
import Weather from "@/components/Weather/Weather";

import style from "./style.module.css";

export default function Dashboard() {
    // '/git-hash.html' contains the current git commit hash, check it every 10 seconds and reload if it isn't the same
    const [gitHash, setGitHash] = useState("");

    useEffect(() => {
        const interval = setInterval(async () => {
            const response = await fetch("/git-hash.html");
            const text = await response.text();
            const newHash = text.trim();
            console.log("Fetched git hash:", newHash);

            if (gitHash === "") {
                setGitHash(newHash);
            }

            if (gitHash !== "" && newHash !== gitHash) {
                setGitHash(newHash);
                window.location.reload();
            }
        }, 10000);
        return () => clearInterval(interval);
    }, [gitHash]);

    const schemes = [style.day, style.evening, style.night];
    const [schemeIndex, setSchemeIndex] = useState(0);
    const scheme = schemes[schemeIndex];

    // change background color based on time of day
    useEffect(() => {
        const timer = setInterval(
            () => {
                const d = new Date();
                const hour = d.getHours();
                if (hour >= 7 && hour < 16) {
                    setSchemeIndex(0);
                } else if (hour >= 16 && hour < 23) {
                    setSchemeIndex(1);
                } else {
                    setSchemeIndex(2);
                }
            },
            20 * 60 * 1000,
        );
        return () => {
            clearInterval(timer);
        };
    }, []);

    return (
        <div className={`${style.dashboard} ${scheme}`}>
            <div className={style.body}>
                <CardColumn>
                    <Card icon="🚊" name="Timetable">
                        <Timetable />
                    </Card>

                    <CardRow>
                        <Card icon="🕐" name="Clock">
                            <Datetime />
                        </Card>

                        <Card icon="🌤" name="Weather">
                            <Weather />
                        </Card>

                        <Card icon="🍁" name="420">
                            <FourTwenty />
                        </Card>
                    </CardRow>

                    <Card icon="🔔" name="Terminal" active={true}>
                        <Terminal />
                    </Card>

                    <Card icon="🧹" name="Flatastic">
                        <Flatastic />
                    </Card>
                </CardColumn>
            </div>

            <Footer />
        </div>
    );
}