"use client";

import { useState, useEffect } from "react";
import { useTheme } from "next-themes";
import DateWeatherLinks from "./components/DateWeatherLinks";
import WhoisChart from "./components/WhoisChart";
import {
  Data,
  DataContext,
  fetchWeather,
  fetchWhois,
} from "@/lib/data-context";

export default function Home() {
  // god i hate next.
  const [mounted, setMounted] = useState<boolean>(false);
  const { theme, setTheme } = useTheme();
  const [data, setData] = useState<Data>({});

  useEffect(() => {
    setMounted(true);
  }, []);

  useEffect(() => {
    const update = () =>
      fetchWeather().then((weather) =>
        setData((data) => data && { ...data, weather })
      );
    update();
    const interval = setInterval(update, 5 * 60_000); // 5 mins
    return () => clearInterval(interval);
  }, []);

  useEffect(() => {
    const update = () =>
      fetchWhois().then((whois) =>
        setData((data) => data && { ...data, whois })
      );
    update();
    const interval = setInterval(update, 5 * 1_000); // 5 seconds
    return () => clearInterval(interval);
  }, []);

  if (!mounted) return null;

  return (
    <DataContext.Provider value={data}>
      <div className="min-h-screen p-8">
        <div className="max-w-4xl mx-auto">
          <header className="glass p-6 flex justify-between items-center mb-8">
            <h1 className="text-4xl font-bold text-gray-800 dark:text-gray-100">
              🐧 Penguin New Tab
            </h1>
            <button
              onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
              className="p-2 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200"
            >
              {theme === "dark" ? "🌙" : "☀️"}
            </button>
          </header>
          <main className="space-y-8">
            <DateWeatherLinks />
            <WhoisChart />
          </main>
          <footer className="mt-8 text-center">
            <p className="text-sm text-gray-600 dark:text-gray-400">
              Made with 💖 by Penguin Lovers
            </p>
          </footer>
        </div>
      </div>
    </DataContext.Provider>
  );
}