import { KEYBOARD_SHORTCUTS } from '@learnitive/constants';
import { useCoreServices } from '@learnitive/context';
import {
  DropdownMenu,
  KbdShortcut,
  Sidebar,
} from '@learnitive/ui-components';
import { useSetAtom } from 'jotai';
import {
  Command,
  Crown,
  Folder,
  PlusIcon,
  Search,
  Settings2,
} from 'lucide-react';
import React from 'react';

/**
 * The dropdown content for the sidebar footer: creation shortcuts, app
 * actions, and external links. Extracted from AppSidebar so the sidebar
 * component stays a thin composition layer.
 */
export function SidebarFooterMenu({
  canCreateFiles,
  isPro,
  onOpenPro,
  newFileName,
}: {
  canCreateFiles: boolean;
  isPro: boolean;
  newFileName: string;
  onOpenPro: () => void;
}) {
  const { commandDispatcher, workbenchState } = useCoreServices();
  const setOpenOmniSearch = useSetAtom(workbenchState.$openOmniSearch);

  return (
    <>
      <DropdownMenu.DropdownMenuLabel className="text-muted-foreground text-xs">
        {t.app.sidebar.newLabel}
      </DropdownMenu.DropdownMenuLabel>
      <DropdownMenu.DropdownMenuItem
        disabled={!canCreateFiles}
        onClick={() => {
          if (!canCreateFiles) {
            return;
          }
          commandDispatcher.dispatch(
            'command::ui:create-file-dialog',
            {
              prefillName: newFileName,
              pathPrefix: undefined,
            },
            'ui',
          );
        }}
      >
        <PlusIcon className="mr-2 h-4 w-4" />
        <span>{t.app.common.newNote}</span>
      </DropdownMenu.DropdownMenuItem>
      <DropdownMenu.DropdownMenuItem
        onClick={() =>
          commandDispatcher.dispatch(
            'command::ui:create-workspace-dialog',
            null,
            'ui',
          )
        }
      >
        <Folder className="mr-2 h-4 w-4" />
        <span>{t.app.common.newWorkspace}</span>
      </DropdownMenu.DropdownMenuItem>

      <DropdownMenu.DropdownMenuSeparator />
      <DropdownMenu.DropdownMenuLabel className="text-muted-foreground text-xs">
        {t.app.sidebar.appActionsLabel}
      </DropdownMenu.DropdownMenuLabel>
      <DropdownMenu.DropdownMenuItem onClick={() => setOpenOmniSearch(true)}>
        <Search className="mr-2 h-4 w-4" />
        <span>{t.app.sidebar.omniSearch}</span>
        <KbdShortcut
          className="ml-auto"
          keys={KEYBOARD_SHORTCUTS.toggleOmniSearch.keys}
        />
      </DropdownMenu.DropdownMenuItem>
      <DropdownMenu.DropdownMenuItem
        onClick={() => workbenchState.goToCommandRoute()}
      >
        <Command className="mr-2 h-4 w-4" />
        <span>{t.app.sidebar.allCommands}</span>
      </DropdownMenu.DropdownMenuItem>
      <SettingsMenuItem
        onOpenSettings={() =>
          commandDispatcher.dispatch('command::ui:open-settings', null, 'ui')
        }
      />
      <DropdownMenu.DropdownMenuItem onClick={onOpenPro}>
        <Crown className="mr-2 h-4 w-4" />
        <span>{t.app.pro.manage}</span>
        <span className="ml-auto text-xs text-muted-foreground">
          {isPro ? 'Pro' : 'Free'}
        </span>
      </DropdownMenu.DropdownMenuItem>

      <DropdownMenu.DropdownMenuSeparator />
      <DropdownMenu.DropdownMenuLabel className="text-muted-foreground text-xs">
        {t.app.sidebar.linksLabel}
      </DropdownMenu.DropdownMenuLabel>
      <DropdownMenu.DropdownMenuItem
        onClick={() => window.open('https://www.learnitive.com', '_blank', 'noopener,noreferrer')}
      >
        <span>{t.app.sidebar.homepage}</span>
      </DropdownMenu.DropdownMenuItem>
    </>
  );
}

function SettingsMenuItem({ onOpenSettings }: { onOpenSettings: () => void }) {
  const { isMobile, setOpenMobile } = Sidebar.useSidebar();

  return (
    <DropdownMenu.DropdownMenuItem
      onClick={() => {
        if (isMobile) {
          setOpenMobile(false);
        }
        onOpenSettings();
      }}
    >
      <Settings2 className="mr-2 h-4 w-4" />
      <span>{t.app.sidebar.settings}</span>
    </DropdownMenu.DropdownMenuItem>
  );
}