import {
  SiArchlinux,
  SiArchlinuxHex,
  SiFirefoxbrowser,
  SiFirefoxbrowserHex,
  SiVscodium,
  SiVscodiumHex,
} from "@icons-pack/react-simple-icons";
import {
  mdiArrowLeft,
  mdiArrowRight,
  mdiArrowUp,
  mdiBackspace,
  mdiBattery80,
  mdiBell,
  mdiBluetooth,
  mdiBrightness5,
  mdiConsole,
  mdiFileCode,
  mdiFileImage,
  mdiFolder,
  mdiFolderDownload,
  mdiFolderHome,
  mdiFolderImage,
  mdiFolderNetwork,
  mdiFolderText,
  mdiHarddisk,
  mdiHelp,
  mdiMagnify,
  mdiMenu,
  mdiPin,
  mdiTrashCan,
  mdiVolumeHigh,
  mdiWifi,
  mdiWindowClose,
  mdiWindowMinimize,
  mdiWindowRestore,
} from "@mdi/js";
import Icon from "@mdi/react";
import { Time } from "../util/Time";
import { LiveDate } from "../util/Date";
import { useConfig } from "../hooks/useConfig";
import { type HTMLAttributes, type FC, useState, Fragment } from "react";
import Image from "next/image";

export const PCUI = () => {
  const config = useConfig();
  const [openFolders, setOpenFolders] = useState<Set<number>>(new Set());
  const [selectedFile, setSelectedFile] = useState<
    [number | null, number | null]
  >([null, null]);

  const toggleFolder = (idx: number) => {
    setOpenFolders((prev) => {
      const next = new Set(prev);
      next[next.has(idx) ? "delete" : "add"](idx);
      return next;
    });
  };

  return (
    <div className="flex flex-col size-full select-none">
      <div className="m-2 mb-0">
        <Window className="flex h-[39.5rem] justify-between">
          <div className="w-full overflow-y-auto max-h-full">
            <table className="w-full table-fixed">
              <thead className="sticky top-0 z-10 shadow-[0_1px_0_0_theme(colors.neutral.700)] bg-neutral-950">
                <tr className="py-2 text-sm font-semibold text-left">
                  <th className="size-8 px-4">&nbsp;</th>
                  <th className="px-1">Name</th>
                  <th className="px-1">Tags</th>
                  <th className="px-1 w-24">Date</th>
                  <th className="px-1 w-16">Owner</th>
                  <th className="px-1 w-24">Permissions</th>
                </tr>
              </thead>
              <tbody>
                {config.projects ? (
                  config.projects.map((p, i) => (
                    <Fragment key={i}>
                      <tr
                        onClick={() => {
                          if (selectedFile[0] !== i) toggleFolder(i);
                        }}
                        className="h-12 cursor-pointer transition-all duration-300 hover:bg-blue-950 border-b border-neutral-700"
                      >
                        <td>
                          <Icon
                            path={mdiFolder}
                            className="text-blue-500 m-1"
                          />
                        </td>
                        <td className="px-1 whitespace-nowrap overflow-x-clip">
                          {p.name}
                        </td>
                        <td className="px-1 whitespace-nowrap overflow-x-clip space-x-1">
                          {p.tags?.map((tag, j) => (
                            <span
                              key={j}
                              className="bg-neutral-800 text-neutral-400 rounded-lg px-1.5"
                            >
                              {tag}
                            </span>
                          ))}
                        </td>
                        <td className="px-1 whitespace-nowrap text-neutral-400">
                          {p.date}
                        </td>
                        <td className="px-1 whitespace-nowrap text-neutral-400">
                          ahmed
                        </td>
                        <td className="px-1 whitespace-nowrap text-neutral-400">
                          drwxr-xr-x
                        </td>
                      </tr>
                      <tr
                        className={`cursor-pointer transition-all duration-300 ${
                          selectedFile[0] === i && selectedFile![1] === 0
                            ? "bg-blue-900"
                            : "hover:bg-blue-950"
                        }`}
                        onClick={() =>
                          setSelectedFile(() =>
                            selectedFile[0] === i && selectedFile![1] === 0
                              ? [null, null]
                              : [i, 0]
                          )
                        }
                      >
                        <td colSpan={6}>
                          <div
                            className={`grid overflow-hidden transition-all duration-300 border-b border-neutral-700 ${
                              openFolders.has(i)
                                ? "h-12 opacity-100"
                                : "h-0 opacity-0"
                            }`}
                            style={{
                              gridTemplateColumns:
                                "2rem 1fr 1fr 6rem 4rem 6rem",
                            }}
                          >
                            <Icon
                              path={mdiFileCode}
                              className="text-orange-400 m-1 w-6 h-10 mx-auto"
                            />
                            <p className="text-neutral-200 whitespace-nowrap mx-1 my-auto">
                              project.html
                            </p>
                            <div />
                            <p className="text-neutral-400 whitespace-nowrap mx-1 my-auto">
                              {p.date}
                            </p>
                            <p className="text-neutral-400 whitespace-nowrap mx-1 my-auto">
                              ahmed
                            </p>
                            <p className="text-neutral-400 whitespace-nowrap mx-1 my-auto">
                              -rw-r--r--
                            </p>
                          </div>
                        </td>
                      </tr>
                      {p.images?.map((img, j) => (
                        <tr
                          key={j}
                          className={`cursor-pointer transition-all duration-300 ${
                            selectedFile[0] === i && selectedFile[1] === j + 1
                              ? "bg-blue-900"
                              : "hover:bg-blue-950"
                          }`}
                          onClick={() =>
                            setSelectedFile(() =>
                              selectedFile[0] === i && selectedFile[1] === j + 1
                                ? [null, null]
                                : [i, j + 1]
                            )
                          }
                        >
                          <td colSpan={6}>
                            <div
                              className={`grid overflow-hidden transition-all duration-300 border-b border-neutral-700 ${
                                openFolders.has(i)
                                  ? "h-12 opacity-100"
                                  : "h-0 opacity-0"
                              }`}
                              style={{
                                gridTemplateColumns:
                                  "2rem 1fr 1fr 6rem 4rem 6rem",
                              }}
                            >
                              <Icon
                                path={mdiFileImage}
                                className="text-purple-400 m-1 w-6 h-10 mx-auto"
                              />
                              <p className="text-neutral-200 whitespace-nowrap mx-1 my-auto">
                                {img}
                              </p>
                              <div />
                              <p className="text-neutral-400 whitespace-nowrap mx-1 my-auto">
                                {p.date}
                              </p>
                              <p className="text-neutral-400 whitespace-nowrap mx-1 my-auto">
                                ahmed
                              </p>
                              <p className="text-neutral-400 whitespace-nowrap mx-1 my-auto">
                                -rw-r--r--
                              </p>
                            </div>
                          </td>
                        </tr>
                      ))}
                    </Fragment>
                  ))
                ) : (
                  <tr />
                )}
              </tbody>
            </table>
          </div>
          {config.projects && (
            <div
              className={`relative h-full transition-all duration-300 ${
                selectedFile[0] !== null ? "w-[34rem]" : "w-0"
              } overflow-hidden`}
            >
              <div
                className={`absolute inset-y-0 right-0 bg-neutral-900 w-96 rounded-br-lg transform ${
                  selectedFile[0] !== null
                    ? "translate-x-0"
                    : "translate-x-full"
                } transition-transform duration-300 overflow-y-auto`}
              >
                {selectedFile[0] !== null && selectedFile[1] === 0 ? (
                  <div className="p-8">
                    <h1 className="text-center text-2xl font-semibold text-neutral-200 wrap-anywhere mb-8">
                      {config.projects[selectedFile[0]!].name}
                    </h1>
                    <div className="flex flex-wrap space-x-2 space-y-2 mb-8 justify-center">
                      {config.projects[selectedFile[0]!].tags?.map((tag, j) => (
                        <span
                          key={j}
                          className="bg-neutral-800 text-neutral-300 rounded-lg px-1.5 h-fit"
                        >
                          {tag}
                        </span>
                      ))}
                    </div>
                    <p className="text-neutral-300 wrap-anywhere pb-8">
                      {config.projects[selectedFile[0]!].description}
                    </p>
                    {config.projects[selectedFile[0]!].links !== undefined && (
                      <>
                        <h2 className="text-xl font-semibold text-neutral-200 mb-2">
                          Links
                        </h2>
                        <ul>
                          {config.projects[selectedFile[0]!].links?.map(
                            (link, j) => (
                              <li
                                key={j}
                                className="text-neutral-300 wrap-anywhere"
                              >
                                <a
                                  href={link}
                                  target="_blank"
                                  rel="noopener noreferrer"
                                  className="text-blue-500 hover:underline"
                                >
                                  {link}
                                </a>
                              </li>
                            )
                          )}
                        </ul>
                      </>
                    )}
                  </div>
                ) : selectedFile[0] !== null && selectedFile[1] !== 0 ? (
                  <div className="p-2">
                    <Image
                      src={`/images/${
                        config.projects[selectedFile[0]!]?.images?.[
                          selectedFile[1]! - 1
                        ]
                      }`}
                      className="rounded-lg"
                      width={376}
                      height={624}
                      alt={`Project ${selectedFile[0]} image ${selectedFile[1]}`}
                    />
                  </div>
                ) : (
                  <></>
                )}
              </div>
            </div>
          )}
        </Window>
      </div>
      <Taskbar />
    </div>
  );
};

const Window: FC<HTMLAttributes<HTMLDivElement>> = ({ children, ...props }) => {
  return (
    <div className="bg-neutral-950 size-full rounded-xl flex flex-col relative">
      <div className="relative flex items-center h-8 shrink-0">
        <div className="flex h-full space-x-1">
          <Icon
            path={mdiFolder}
            className="text-neutral-400 h-full w-fit rounded-tl-lg rounded-br-lg transition-all hover:bg-blue-800 hover:ring-blue-500 hover:ring-1 p-1.5"
          />
          <Icon
            path={mdiPin}
            className="text-neutral-400 h-full w-fit rounded-b-lg transition-all hover:bg-blue-800 hover:ring-blue-500 hover:ring-1 p-1.5"
          />
        </div>
        <p className="absolute left-1/2 transform -translate-x-1/2 text-white">
          projects — Dolphin
        </p>
        <div className="flex h-full space-x-1 ml-auto justify-end">
          <Icon
            path={mdiWindowMinimize}
            className="text-neutral-100 h-full w-fit rounded-b-lg transition-all hover:bg-amber-800 hover:ring-amber-500 hover:ring-1 p-1.5"
          />
          <Icon
            path={mdiWindowRestore}
            className="text-neutral-100 h-full w-fit rounded-b-lg transition-all hover:bg-green-800 hover:ring-green-500 hover:ring-1 p-1.5"
          />
          <Icon
            path={mdiWindowClose}
            className="text-neutral-100 h-full w-fit rounded-tr-lg rounded-bl-lg transition-all hover:bg-red-800 hover:ring-red-500 hover:ring-1 p-1.5"
          />
        </div>
      </div>
      <div className="flex bg-neutral-950 size-full rounded-b-lg text-white">
        <div className="h-full w-fit bg-neutral-950 flex flex-col rounded-bl-lg">
          <div className="h-14 p-2 pr-1 flex justify-center w-fit space-x-1">
            <Icon
              path={mdiArrowLeft}
              className="text-neutral-100 h-full w-fit rounded-md transition-all hover:ring-neutral-500 hover:ring-1 p-2"
            />
            <Icon
              path={mdiArrowRight}
              className="text-neutral-100 h-full w-fit rounded-md transition-all hover:ring-neutral-500 hover:ring-1 p-2"
            />
            <Icon
              path={mdiArrowUp}
              className="text-neutral-100 h-full w-fit rounded-md transition-all hover:ring-neutral-500 hover:ring-1 p-2"
            />
          </div>
          <div className="flex flex-col space-y-1">
            <p className="text-neutral-400 px-2">Places</p>
            <div className="flex px-2 h-6 space-x-2 transition-all hover:bg-blue-950">
              <Icon path={mdiFolderHome} className="h-full text-blue-500" />
              <p>Home</p>
            </div>
            <div className="flex px-2 h-6 space-x-2 transition-all hover:bg-blue-950">
              <Icon path={mdiFolder} className="h-full text-blue-500" />
              <p>Desktop</p>
            </div>
            <div className="flex px-2 h-6 space-x-2 transition-all hover:bg-blue-950">
              <Icon path={mdiFolderText} className="h-full text-blue-500" />
              <p>Documents</p>
            </div>
            <div className="flex px-2 h-6 space-x-2 transition-all hover:bg-blue-950">
              <Icon path={mdiFolderDownload} className="h-full text-blue-500" />
              <p>Downloads</p>
            </div>
            <div className="flex px-2 h-6 space-x-2 transition-all hover:bg-blue-950">
              <Icon path={mdiFolderImage} className="h-full text-blue-500" />
              <p>Pictures</p>
            </div>
            <div className="flex px-2 h-6 space-x-2 transition-all hover:bg-blue-950">
              <Icon path={mdiFolder} className="h-full text-blue-500" />
              <p>Videos</p>
            </div>
            <div className="flex px-2 h-6 space-x-2 transition-all hover:bg-blue-950">
              <Icon path={mdiTrashCan} className="h-full text-neutral-400" />
              <p>Trash</p>
            </div>
            <div className="h-8" />
            <p className="text-neutral-400 px-2">Remote</p>
            <div className="flex px-2 h-6 space-x-2 transition-all hover:bg-blue-950">
              <Icon path={mdiFolderNetwork} className="h-full text-blue-500" />
              <p>Network</p>
            </div>
            <div className="h-8" />
            <p className="text-neutral-400 px-2">Devices</p>
            <div className="flex px-2 h-6 space-x-2 transition-all hover:bg-blue-950">
              <Icon path={mdiHarddisk} className="h-full text-neutral-400" />
              <p>nvme0n1p2</p>
            </div>
            <div className="h-56 p-2">
              <button
                className="h-12 absolute bottom-2"
                onClick={() =>
                  alert(
                    'Each folder represents a project! The folder\'s tags and date are connected to the project. Click on a folder to expand it, revealing a "project.html" file and any associated images that you can open.'
                  )
                }
              >
                <Icon
                  path={mdiHelp}
                  className="text-neutral-100 h-full w-fit rounded-md transition-all hover:ring-neutral-500 hover:ring-1 p-2"
                />
              </button>
            </div>
          </div>
        </div>
        <div className="w-full">
          <div className="bg-neutral-950 flex items-center h-14 space-x-2 p-2 pl-1">
            <div className="rounded-md ring-1 ring-neutral-600 size-full">
              <input
                type="text"
                className="size-full text-white px-2"
                defaultValue="/home/ahmed/Desktop/projects"
              />
            </div>
            <div className="flex justify-center h-full w-fit space-x-1">
              <Icon
                path={mdiBackspace}
                className="text-neutral-100 h-full w-fit rounded-md transition-all hover:ring-neutral-500 hover:ring-1 p-2"
              />
              <Icon
                path={mdiMagnify}
                className="text-neutral-100 h-full w-fit rounded-md transition-all hover:ring-neutral-500 hover:ring-1 p-2"
              />
              <Icon
                path={mdiMenu}
                className="text-neutral-100 h-full w-fit rounded-md transition-all hover:ring-neutral-500 hover:ring-1 p-2"
              />
            </div>
          </div>
          <div {...props}>{children}</div>
        </div>
      </div>
    </div>
  );
};

const Taskbar = () => {
  return (
    <div className="h-20 p-2">
      <div className="bg-neutral-950 size-full rounded-xl flex justify-between space-x-3 p-3">
        <div className="flex space-x-4 h-full w-fit items-center">
          <SiArchlinux
            color={SiArchlinuxHex}
            className="h-full w-fit transition-transform hover:scale-110"
          />
          <div className="w-8 h-full">
            <div className="w-full h-1/2 bg-blue-900 outline-1 outline-blue-600 transition-all hover:bg-blue-700 hover:outline-blue-400" />
            <div className="bg-neutral-800 w-full h-1/2 outline-1 outline-neutral-600 transition-all hover:bg-neutral-700 hover:outline-neutral-400" />
          </div>
          <Icon
            path={mdiFolder}
            className="text-blue-500 h-full w-fit transition-transform hover:scale-110 border-b-2"
          />
          <SiVscodium
            color={SiVscodiumHex}
            className="h-full w-fit transition-transform hover:scale-110"
          />
          <Icon
            path={mdiConsole}
            className="text-neutral-400 h-full w-fit transition-transform hover:scale-110"
          />
          <SiFirefoxbrowser
            color={SiFirefoxbrowserHex}
            className="h-full w-fit transition-transform hover:scale-110"
          />
        </div>
        <div className="flex space-x-2 h-full w-fit items-center">
          <Icon path={mdiBell} className="text-white h-1/2" />
          <Icon path={mdiBrightness5} className="text-white h-1/2" />
          <Icon path={mdiVolumeHigh} className="text-white h-1/2" />
          <Icon path={mdiBluetooth} className="text-white h-1/2" />
          <Icon path={mdiWifi} className="text-white h-1/2" />
          <Icon path={mdiBattery80} className="text-white h-1/2" />
          <div className="flex flex-col items-center">
            <Time showAMPM className="text-white text-xl" />
            <LiveDate className="text-white" />
          </div>
        </div>
      </div>
    </div>
  );
};
