"use client";

import {
  SiAppstore,
  SiAppstoreHex,
  SiMatrix,
  SiLinkedin,
  SiLinkedinHex,
  SiGitea,
  SiGiteaHex,
  SiGithub,
  SiInstagram,
  SiInstagramHex,
} from "@icons-pack/react-simple-icons";
import {
  mdiMusic,
  mdiCog,
  mdiImageOutline,
  mdiCloud,
  mdiPhone,
  mdiMessage,
  mdiWeb,
  mdiCamera,
  mdiContacts,
  mdiCalculator,
  mdiNetworkStrength3,
  mdiWifi,
  mdiBattery80,
  mdiHelp,
} from "@mdi/js";
import Icon from "@mdi/react";
import { useRef, useState } from "react";
import { Time } from "../util/Time";
import { useConfig } from "../hooks/useConfig";

export const CellphoneUI = () => {
  const config = useConfig();
  const [hovered, setHovered] = useState<boolean>(false);

  const debounceTimeout = useRef<NodeJS.Timeout | undefined>(undefined);

  const handleEnter = () => {
    clearTimeout(debounceTimeout.current);
    setHovered(true);
  };

  const handleLeave = () => {
    debounceTimeout.current = setTimeout(() => {
      setHovered(false);
    }, 150);
  };

  const appClass =
    "size-40 rounded-[2.5rem] bg-[#1e1e1e] p-6 transform transition-all duration-300 hover:scale-110";
  const fillerClass = `opacity-${hovered ? 50 : 100}`;

  return (
    <div className="flex flex-col size-full">
      <div className="flex text-white text-3xl justify-between py-2 px-4">
        <Time />
        <div className="flex space-x-2 items-center">
          <Icon path={mdiNetworkStrength3} color="white" className="size-8" />
          <Icon path={mdiWifi} color="white" className="size-8" />
          <Icon path={mdiBattery80} color="white" className="size-8" />
          <p>75%</p>
        </div>
      </div>
      <div className="p-8 pt-0 flex flex-col size-full space-y-8">
        <div className="h-full text-white p-10 mb-4 rounded-[5rem] grid grid-cols-4 auto-rows-min gap-20">
          <div className={`${appClass} ${fillerClass}`}>
            <SiAppstore color={SiAppstoreHex} className="size-full p-2" />
          </div>
          <div className={`${appClass} ${fillerClass}`}>
            <Icon path={mdiMusic} color="#f74258" />
          </div>
          <div className={`${appClass} ${fillerClass}`}>
            <Icon path={mdiCog} className="text-neutral-300" />
          </div>
          <div className={`${appClass} ${fillerClass}`}>
            <Icon path={mdiImageOutline} className="text-neutral-300" />
          </div>
          <div className={`${appClass} ${fillerClass}`.replace("p-6", "p-8")}>
            <Icon path={mdiContacts} className="text-neutral-300" />
          </div>
          <div className={`${appClass} ${fillerClass}`}>
            <Icon path={mdiCloud} className="text-neutral-300" />
          </div>
          <div className={`${appClass} ${fillerClass}`}>
            <Icon path={mdiCalculator} className="text-neutral-300" />
          </div>
          {config.socials?.matrix && (
            <a
              href={`https://matrix.to/#/${config.socials.matrix}`}
              target="_blank"
              className={appClass}
              onMouseOver={handleEnter}
              onMouseOut={handleLeave}
            >
              <SiMatrix color="white" className="size-full p-2" />
            </a>
          )}
          {config.socials?.linkedin && (
            <a
              href={`https://linkedin.com/in/${config.socials.linkedin}`}
              target="_blank"
              className={appClass}
              onMouseOver={handleEnter}
              onMouseOut={handleLeave}
            >
              <SiLinkedin color={SiLinkedinHex} className="size-full p-2" />
            </a>
          )}
          {config.socials?.gitea && (
            <a
              href={config.socials.gitea}
              target="_blank"
              className={appClass}
              onMouseOver={handleEnter}
              onMouseOut={handleLeave}
            >
              <SiGitea color={SiGiteaHex} className="size-full p-2" />
            </a>
          )}
          {config.socials?.github && (
            <a
              href={`https://github.com/${config.socials.github}`}
              target="_blank"
              className={appClass}
              onMouseOver={handleEnter}
              onMouseOut={handleLeave}
            >
              <SiGithub color="white" className="size-full p-2" />
            </a>
          )}
          {config.socials?.instagram && (
            <a
              href={`https://instagram.com/${config.socials.instagram}`}
              target="_blank"
              className={appClass}
              onMouseOver={handleEnter}
              onMouseOut={handleLeave}
            >
              <SiInstagram color={SiInstagramHex} className="size-full p-2" />
            </a>
          )}
        </div>
        <div className="h-16 rounded-[5rem] flex justify-end">
          <button
            className="bg-neutral-800/75 rounded-[5rem] text-white h-full aspect-square p-2"
            onClick={() =>
              alert(
                "Each app represents a link! Hover over a valid link to see all links."
              )
            }
          >
            <Icon path={mdiHelp} className="h-full" />
          </button>
        </div>
        <div className="h-64 bg-neutral-800/75 backdrop-blur-lg rounded-[5rem] text-black p-10 -mt-4">
          <div className="flex h-full rounded-[2.5rem] gap-20 my-auto">
            <a
              href={config.phoneNumber ? `tel:${config.phoneNumber}` : ""}
              target="_blank"
              className={`${appClass} ${
                !config.phoneNumber ? fillerClass : ""
              }`}
              onMouseOver={config.phoneNumber ? handleEnter : undefined}
              onMouseOut={config.phoneNumber ? handleLeave : undefined}
            >
              <Icon path={mdiPhone} color="#23de20" />
            </a>
            <div className={`${appClass} ${fillerClass}`}>
              <Icon path={mdiMessage} color="#23de20" />
            </div>
            <a
              href={config.socials?.custom ? config.socials.custom : ""}
              target="_blank"
              className={`${appClass} ${
                !config.socials?.custom ? fillerClass : ""
              }`}
              onMouseOver={config.socials?.custom ? handleEnter : undefined}
              onMouseOut={config.socials?.custom ? handleLeave : undefined}
            >
              <Icon path={mdiWeb} color="#1e93f7" />
            </a>
            <div className={`${appClass} ${fillerClass}`}>
              <Icon path={mdiCamera} className="text-neutral-300" />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};
