import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
import { useGateValue } from '@statsig/react-bindings';
import { observer } from 'mobx-react-lite';
import { useRouter } from 'next/navigation';
import React, { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { twMerge } from 'tailwind-merge';

import { useStores } from '@/app/(root)/AppProviders';
import Button, {
  ButtonShape,
  ButtonSize,
  ButtonVariant,
} from '@/components/button/Button';
import { useThemeClassName } from '@/context/ThemeContext';
import {
  BugIcon,
  CheckIcon,
  ClockIcon,
  DownloadIcon,
  EditUndoIcon,
  FlagIcon,
  MinusIcon,
  MoreHorizontalIcon,
  RepeatIcon,
  ThumbsDownIcon,
} from '@/icons';

import { QualityLabels, getCurrentQualityLabel } from './qualityLabels';

interface HookMoreActionsMenuProps {
  hookId: string;
  isTestHook?: boolean;
  humanRating?: string | null;
  buttonClassName?: string;
  buttonIconClassName?: string;
  buttonVariant?: ButtonVariant;
  buttonSize?: ButtonSize;
  buttonShape?: ButtonShape;
  onHideCreatorClick?: (e: Event) => void;
  onReportClick?: (e: Event) => void;
  onDownloadClick?: (e: Event) => void;
  onNotInterestedClick?: (e: Event) => void;
  onFlagClick?: (e: Event) => void;
  onToggleTestClick?: (e: Event) => void;
  onQualityLabelClick?: (newLabel: string | null, e: Event) => void;
  onResetModerationClick?: (e: Event) => void;
  onReprocessClick?: (e: Event) => void;
}

const HookMoreActionsMenu: React.FC<HookMoreActionsMenuProps> = observer(
  ({
    hookId,
    isTestHook = false,
    humanRating,
    buttonClassName,
    buttonIconClassName = 'w-6 h-6 m-0',
    buttonVariant = ButtonVariant.LightGlass,
    buttonSize = ButtonSize.Medium,
    buttonShape = ButtonShape.Pill,
    onHideCreatorClick,
    onReportClick,
    onDownloadClick,
    onNotInterestedClick,
    onFlagClick,
    onToggleTestClick,
    onQualityLabelClick,
    onResetModerationClick,
    onReprocessClick,
  }) => {
    const { session } = useStores();
    const router = useRouter();
    const [dropdownMenuOpen, setDropdownMenuOpen] = useState(false);
    const canSeeAdminFeed = useGateValue('hook-admin-feed');
    const canAddQualityLabels = useGateValue(
      'enable-adding-quality-label-to-hook'
    );
    const hideCreatorEnabled = useGateValue('enable-hide-creator-web');

    const { t } = useTranslation();

    // Helper to render quality label submenu
    const renderQualityLabelSubmenu = () => {
      if (
        !(session.isStaff || canSeeAdminFeed) ||
        !canAddQualityLabels ||
        !onQualityLabelClick
      ) {
        return null;
      }

      const currentLabel = getCurrentQualityLabel(humanRating);
      const displayText = currentLabel
        ? `Quality: ${currentLabel} (staff only)`
        : 'Quality label (staff only)';

      // Quality label options with icons
      const labelOptions = [
        { value: null, label: 'No Label' },
        { value: QualityLabels.CHAMPION, label: 'Champion' },
        { value: QualityLabels.PROMOTE, label: 'Promote' },
        { value: QualityLabels.APPROVED, label: 'Approved' },
        {
          value: QualityLabels.CONDITIONAL,
          label: 'Conditional',
        },
        { value: QualityLabels.SUPPRESS, label: 'Suppress' },
      ];

      return (
        <DropdownMenu.Sub>
          <DropdownMenu.SubTrigger className='flex cursor-pointer flex-row items-center gap-2 px-3 py-2 text-sm text-accent-pink-on-primary outline-none hover:bg-background-tertiary-glass'>
            <FlagIcon className='size-4' />
            {displayText}
          </DropdownMenu.SubTrigger>
          <DropdownMenu.Portal>
            <DropdownMenu.SubContent className='z-50 min-w-[200px] overflow-hidden rounded-lg border border-border-primary bg-background-secondary shadow-lg'>
              {labelOptions.map((option) => {
                const isSelected = currentLabel === option.value;

                return (
                  <DropdownMenu.Item
                    key={option.value || 'none'}
                    onSelect={(e) => onQualityLabelClick(option.value, e)}
                    className='flex cursor-pointer flex-row items-center gap-2 px-3 py-2 text-sm text-foreground-primary outline-none hover:bg-background-tertiary-glass'
                  >
                    <span className={isSelected ? 'font-semibold' : ''}>
                      {option.label}
                    </span>
                    {isSelected && <CheckIcon className='ml-auto size-4' />}
                  </DropdownMenu.Item>
                );
              })}
            </DropdownMenu.SubContent>
          </DropdownMenu.Portal>
        </DropdownMenu.Sub>
      );
    };

    useEffect(() => {
      if (!dropdownMenuOpen) return;

      const handleKeyDown = (event: KeyboardEvent) => {
        // close the menu when navigating with arrow keys -> otherwise weird ui behavior
        if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
          setDropdownMenuOpen(false);
        }
      };

      document.addEventListener('keydown', handleKeyDown);
      return () => document.removeEventListener('keydown', handleKeyDown);
    }, [dropdownMenuOpen]);

    const themeClassName = useThemeClassName();

    return (
      <DropdownMenu.Root
        open={dropdownMenuOpen}
        onOpenChange={setDropdownMenuOpen}
      >
        <DropdownMenu.Trigger asChild>
          <Button
            className={twMerge('cursor-pointer', buttonClassName)}
            iconClassName={buttonIconClassName}
            icon={MoreHorizontalIcon}
            variant={buttonVariant}
            size={buttonSize}
            shape={buttonShape}
            disabled={!hookId}
            enableHoverState
          />
        </DropdownMenu.Trigger>
        <DropdownMenu.Portal>
          <DropdownMenu.Content
            align='end'
            side='left'
            sideOffset={8}
            className={twMerge(
              themeClassName,
              'z-50 w-48 overflow-hidden rounded-lg border border-border-primary bg-background-secondary shadow-lg'
            )}
          >
            {onHideCreatorClick && hideCreatorEnabled && (
              <DropdownMenu.Item
                onSelect={onHideCreatorClick}
                className='flex cursor-pointer flex-row items-center gap-2 px-3 py-2 text-sm text-foreground-primary outline-none hover:bg-background-tertiary-glass'
              >
                <MinusIcon className='size-4' />
                {t('songActions.hideCreator')}
              </DropdownMenu.Item>
            )}
            {onReportClick && (
              <DropdownMenu.Item
                onSelect={onReportClick}
                className='flex cursor-pointer flex-row items-center gap-2 px-3 py-2 text-sm text-foreground-primary outline-none hover:bg-background-tertiary-glass'
              >
                <FlagIcon className='size-4' />
                {t('songActions.reportInappropriate')}
              </DropdownMenu.Item>
            )}
            {onDownloadClick && (
              <DropdownMenu.Item
                onSelect={onDownloadClick}
                className='flex cursor-pointer flex-row items-center gap-2 px-3 py-2 text-sm text-foreground-primary outline-none hover:bg-background-tertiary-glass'
              >
                <DownloadIcon className='size-4' />
                {t('songActions.downloadHook')}
              </DropdownMenu.Item>
            )}
            {onNotInterestedClick && (
              <DropdownMenu.Item
                onSelect={onNotInterestedClick}
                className='flex cursor-pointer flex-row items-center gap-2 px-3 py-2 text-sm text-foreground-primary outline-none hover:bg-background-tertiary-glass'
              >
                <ThumbsDownIcon className='size-4' />
                {t('songActions.notInterested')}
              </DropdownMenu.Item>
            )}
            {(session.isStaff || canSeeAdminFeed) && onFlagClick && (
              <DropdownMenu.Item
                onSelect={onFlagClick}
                className='flex cursor-pointer flex-row items-center gap-2 px-3 py-2 text-sm text-accent-pink-on-primary outline-none hover:bg-background-tertiary-glass'
              >
                <FlagIcon className='size-4' />
                Flag hook (staff only)
              </DropdownMenu.Item>
            )}
            {session.isStaff && onToggleTestClick && (
              <DropdownMenu.Item
                onSelect={onToggleTestClick}
                className='flex cursor-pointer flex-row items-center gap-2 px-3 py-2 text-sm text-accent-pink-on-primary outline-none hover:bg-background-tertiary-glass'
              >
                <BugIcon className='size-4' />
                {isTestHook
                  ? 'Unmark test (staff only)'
                  : 'Mark test (staff only)'}
              </DropdownMenu.Item>
            )}
            {session.isStaff && onResetModerationClick && (
              <DropdownMenu.Item
                onSelect={onResetModerationClick}
                className='flex cursor-pointer flex-row items-center gap-2 px-3 py-2 text-sm text-accent-pink-on-primary outline-none hover:bg-background-tertiary-glass'
              >
                <EditUndoIcon className='size-4' />
                Reset moderation (staff only)
              </DropdownMenu.Item>
            )}
            {session.isStaff && onReprocessClick && (
              <DropdownMenu.Item
                onSelect={onReprocessClick}
                className='flex cursor-pointer flex-row items-center gap-2 px-3 py-2 text-sm text-accent-pink-on-primary outline-none hover:bg-background-tertiary-glass'
              >
                <RepeatIcon className='size-4' />
                Reprocess hook (staff only)
              </DropdownMenu.Item>
            )}
            {session.isStaff && (
              <DropdownMenu.Item
                onSelect={() => router.push('/hooks/admin/watch-history')}
                className='flex cursor-pointer flex-row items-center gap-2 px-3 py-2 text-sm text-accent-pink-on-primary outline-none hover:bg-background-tertiary-glass'
              >
                <ClockIcon className='size-4' />
                Manage watch history (staff only)
              </DropdownMenu.Item>
            )}
            {renderQualityLabelSubmenu()}
          </DropdownMenu.Content>
        </DropdownMenu.Portal>
      </DropdownMenu.Root>
    );
  }
);

export default HookMoreActionsMenu;