import { Button, CssVarsProvider, Divider, IconButton } from "@mui/joy";
import { useEffect } from "react";
import { Toaster } from "react-hot-toast";
import CreateShortcutButton from "@/components/CreateShortcutButton";
import Icon from "@/components/Icon";
import Logo from "@/components/Logo";
import PullShortcutsButton from "@/components/PullShortcutsButton";
import ShortcutsContainer from "@/components/ShortcutsContainer";
import { useShortcutStore } from "@/stores";
import { StorageContextProvider, useStorageContext } from "./context";
import useColorTheme from "./hooks/useColorTheme";
import "./style.css";

const IndexPopup = () => {
  useColorTheme();
  const context = useStorageContext();
  const shortcutStore = useShortcutStore();
  const shortcuts = shortcutStore.getShortcutList();
  const isInitialized = context.instanceUrl && context.accessToken;

  useEffect(() => {
    if (!isInitialized) {
      return;
    }

    shortcutStore.fetchShortcutList(context.instanceUrl, context.accessToken);
  }, [isInitialized]);

  const handleSettingButtonClick = () => {
    chrome.runtime.openOptionsPage();
  };

  const handleRefreshButtonClick = () => {
    chrome.runtime.reload();
    chrome.browserAction.setPopup({ popup: "" });
  };

  return (
    <div className="w-full min-w-[512px] px-4 pt-4">
      <div className="w-full flex flex-row justify-between items-center">
        <div className="flex flex-row justify-start items-center dark:text-gray-400">
          <Logo className="w-6 h-auto mr-1" />
          <span className="">Slash</span>
          {isInitialized && (
            <>
              <span className="mx-1 text-gray-400">/</span>
              <span>Shortcuts</span>
              <span className="text-gray-500 mr-0.5">({shortcuts.length})</span>
              <PullShortcutsButton />
            </>
          )}
        </div>
        <div>{isInitialized && <CreateShortcutButton />}</div>
      </div>

      <div className="w-full mt-4">
        {isInitialized ? (
          <>
            {shortcuts.length !== 0 ? (
              <ShortcutsContainer />
            ) : (
              <div className="w-full flex flex-col justify-center items-center">
                <p>No shortcut found.</p>
              </div>
            )}

            <Divider className="!mt-4 !mb-2 opacity-40" />

            <div className="w-full flex flex-row justify-between items-center mb-2">
              <div className="flex flex-row justify-start items-center">
                <IconButton size="sm" variant="plain" color="neutral" onClick={handleSettingButtonClick}>
                  <Icon.Settings className="w-5 h-auto text-gray-500 dark:text-gray-400" />
                </IconButton>
                <IconButton
                  size="sm"
                  variant="plain"
                  color="neutral"
                  component="a"
                  href="https://github.com/yourselfhosted/slash"
                  target="_blank"
                >
                  <Icon.Github className="w-5 h-auto text-gray-500 dark:text-gray-400" />
                </IconButton>
              </div>
              <div className="flex flex-row justify-end items-center">
                <a
                  className="text-sm flex flex-row justify-start items-center underline text-blue-600 hover:opacity-80"
                  href={context.instanceUrl}
                  target="_blank"
                >
                  <span className="mr-1">Go to my Slash</span>
                  <Icon.ExternalLink className="w-4 h-auto" />
                </a>
              </div>
            </div>
          </>
        ) : (
          <div className="w-full flex flex-col justify-start items-center">
            <Icon.Cookie strokeWidth={1} className="w-20 h-auto mb-4 text-gray-400" />
            <p className="dark:text-gray-400">Please set your instance URL and access token first.</p>
            <div className="w-full flex flex-row justify-center items-center py-4">
              <Button size="sm" color="primary" onClick={handleSettingButtonClick}>
                <Icon.Settings className="w-5 h-auto mr-1" /> Go to Setting
              </Button>
              <span className="mx-2 dark:text-gray-400">Or</span>
              <Button size="sm" variant="outlined" color="neutral" onClick={handleRefreshButtonClick}>
                <Icon.RefreshCcw className="w-5 h-auto mr-1" /> Refresh
              </Button>
            </div>
          </div>
        )}
      </div>
    </div>
  );
};

const Popup = () => {
  return (
    <StorageContextProvider>
      <CssVarsProvider>
        <IndexPopup />
        <Toaster position="top-center" />
      </CssVarsProvider>
    </StorageContextProvider>
  );
};

export default Popup;