"use client";
import { useState, useEffect, useMemo } from "react";
import { Sun, Moon } from "lucide-react";

const Clock: React.FC = () => {
  const [time, setTime] = useState<Date | null>(null);
  const [isDarkMode, setIsDarkMode] = useState<boolean>(false);
  const [text, setText] = useState("");
  const [currentLineIndex, setCurrentLineIndex] = useState(0);
  const [currentCharacterIndex, setCurrentCharacterIndex] = useState(0);

  const lines = useMemo(() => [
    "We're glad to see you back! Check out the latest",
    " ",
    " updates and manage your settings.",
  ], []);

  useEffect(() => {
    if (currentLineIndex >= lines.length) return;

    const currentLine = lines[currentLineIndex];
    const typingSpeed = 100;
    const newCharacterIndex = currentCharacterIndex + 1;

    const interval = setInterval(() => {
      setText((prevText) => {
        const updatedText = prevText + currentLine[currentCharacterIndex];
        if (newCharacterIndex >= currentLine.length) {
          clearInterval(interval);
          setTimeout(() => {
            setCurrentCharacterIndex(0);
            setCurrentLineIndex((prevIndex) => prevIndex + 1);
          }, 500); // Pause before typing the next line
        } else {
          setCurrentCharacterIndex(newCharacterIndex);
        }
        return updatedText;
      });
    }, typingSpeed);

    return () => clearInterval(interval);
  }, [currentLineIndex, currentCharacterIndex, lines]);

  useEffect(() => {
    setTime(new Date());
    const timer = setInterval(() => setTime(new Date()), 1000);
    return () => clearInterval(timer);
  }, []);

  if (!time) {
    return null;
  }

  const hours: number = time.getHours();
  const minutes: number = time.getMinutes();
  const seconds: number = time.getSeconds();

  const hourDegrees: number = hours * 30 + minutes / 2;
  const minuteDegrees: number = minutes * 6;
  const secondDegrees: number = seconds * 6;

  const toggleDarkMode = (): void => {
    setIsDarkMode(!isDarkMode);
    document.documentElement.classList.toggle("dark");
  };
  const hourMarks = Array.from({ length: 12 }, (_, i) => i + 1);

  return (
    <div
      className={`grid grid-cols-2 max-sm:grid-cols-1 p-6 rounded-lg shadow-lg gap-10 
         bg-slate-400  dark:bg-slate-500
      }`}
    >
      <div className={`flex flex-col items-center`}>
        <div
          className={`relative w-64 h-64 max-sm:w-48 max-sm:h-48 max-md:w-54 max-md:h-54 rounded-full bg-gray-200 dark:bg-gray-800 shadow-xl flex items-center justify-center`}
        >
          {hourMarks.map((hour) => {
            const angle = (hour * 30 - 90) * (Math.PI / 180);
            const isMainMark = hour % 3 === 0;
            const length = isMainMark ? 4 : 2;
            const distance = isMainMark ? 45 : 46;
            const x = 50 + distance * Math.cos(angle);
            const y = 50 + distance * Math.sin(angle);
            return (
              <div
                key={hour}
                className={`absolute w-1 bg-gray-600 dark:bg-gray-400`}
                style={{
                  height: `${length}%`,
                  left: `${x}%`,
                  top: `${y}%`,
                  transform: `translate(-50%, -50%) rotate(${hour * 30}deg)`,
                }}
              ></div>
            );
          })}

          <div
            className="absolute w-1 h-10 bg-black dark:bg-white origin-bottom bottom-1/2 left-1/2 max-sm:h-8"
            style={{ transform: `rotate(${hourDegrees}deg)` }}
          ></div>

          <div
            className="absolute w-1 h-16 bg-black dark:bg-white origin-bottom bottom-1/2 left-1/2 max-sm:h-12"
            style={{ transform: `rotate(${minuteDegrees}deg)` }}
          ></div>

          <div
            className="absolute w-0.5 h-20 bg-secondery origin-bottom bottom-1/2 left-1/2 max-sm:h-16"
            style={{ transform: `rotate(${secondDegrees}deg)` }}
          ></div>

          <div className="absolute w-3 h-3 bg-black dark:bg-white rounded-full"></div>

          <button
            onClick={toggleDarkMode}
            className="absolute top-0 -right-2 text-white/80 dark:text-orange-400 bg-black/40 dark:bg-black/20 rounded-full shadow-xl p-2 max-sm:p-1"
          >
            {isDarkMode ? <Sun /> : <Moon />}
          </button>
        </div>

        <div className="mt-8 text-4xl font-bold text-gray-800 dark:text-secondery max-sm:text-2xl">
          {time.toLocaleTimeString()}
        </div>

        <div className="mt-2 text-xl text-gray-800 dark:text-gray-300 max-sm:text-sm">
          {time.toLocaleDateString("en-GB", {
            day: "numeric",
            month: "long",
            year: "numeric",
          })}
        </div>
      </div>
      <div className="flex flex-col max-sm: items-center justify-center w-full max-w-md">
        <p className="text-3xl font-bold text-gray-800 dark:text-gray-200 mb-4 max-sm:text-2xl lg:text-4xl">
          Welcome to the Admin Dashboard
        </p>
        <div className="w-full max-w-lg">
          <div className="text-blue-600 dark:text-secondery overflow-hidden max-lg:text-xl max-sm:text-[16px] lg:text-2xl">
            <div className="whitespace-pre-wrap">{text}</div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Clock;