'use client';

import clsx from 'clsx';
import React from 'react';

import Button, {
  ButtonShape,
  ButtonSize,
  ButtonVariant,
} from '@/components/button/Button';
import {
  HookActionHandler,
  HookStaffReviewStatus,
} from '@/components/hooksPlayer/constants';
import { CheckIcon, EditUndoIcon, FlagIcon, GearIcon } from '@/icons';

type HooksAdminOverlayProps = {
  hookId: string;
  prevHookId: string | undefined;
  hookReportCount: number;
  handleClick: HookActionHandler<{ status: HookStaffReviewStatus }>;
  enableAdminKeybinds: boolean;
  setEnableAdminKeybinds: React.Dispatch<React.SetStateAction<boolean>>;
};

const HooksAdminOverlay: React.FC<HooksAdminOverlayProps> = (
  props: HooksAdminOverlayProps
) => {
  const {
    hookId,
    prevHookId,
    hookReportCount,
    handleClick,
    enableAdminKeybinds,
    setEnableAdminKeybinds,
  } = props;

  if (!hookId) return null;

  return (
    <section className='absolute left-1/2 z-10 hidden w-full max-w-sm -translate-x-1/2 flex-col items-center gap-4 rounded-2xl bg-background-fog-thick p-2 shadow-lg backdrop-blur-md backdrop-brightness-50 lg:top-8 lg:flex xl:top-4'>
      <div className='flex w-full items-center justify-between text-sm xl:text-base'>
        <Button
          onClick={() =>
            setEnableAdminKeybinds((prevAdminKeybinds) => !prevAdminKeybinds)
          }
          variant={ButtonVariant.Standard}
          size={ButtonSize.Mini}
          shape={ButtonShape.Pill}
          icon={GearIcon}
        >
          {enableAdminKeybinds ? 'Disable Keybinds' : 'Enable Keybinds'}
        </Button>
        <Button
          onClick={(e) =>
            prevHookId &&
            handleClick(
              { hookId: prevHookId, status: HookStaffReviewStatus.Unreviewed },
              e
            )
          }
          disabled={prevHookId === undefined}
          size={ButtonSize.Mini}
          shape={ButtonShape.Pill}
          className={clsx('flex items-center gap-1', {
            'opacity-50': prevHookId === undefined,
            'cursor-not-allowed': prevHookId === undefined,
            'cursor-pointer': prevHookId !== undefined,
          })}
          icon={EditUndoIcon}
        >
          Unflag previous {enableAdminKeybinds && ' (U)'}
        </Button>
      </div>
      <div className='flex w-full items-center justify-between gap-2 text-xs font-black text-white xl:text-base'>
        <Button
          onClick={(e) =>
            handleClick({ hookId, status: HookStaffReviewStatus.Approved }, e)
          }
          className='bg-accent-success text-accent-success-contrast'
          variant={ButtonVariant.Standard}
          size={ButtonSize.Mini}
          shape={ButtonShape.Pill}
          icon={CheckIcon}
        >
          Approve
          {enableAdminKeybinds && ' (A)'}
        </Button>
        <div className='text-center text-sm'>
          Report Count: {hookReportCount}
        </div>
        <Button
          onClick={(e) =>
            handleClick({ hookId, status: HookStaffReviewStatus.Flagged }, e)
          }
          className='bg-accent-error text-accent-error-contrast'
          variant={ButtonVariant.Standard}
          size={ButtonSize.Mini}
          shape={ButtonShape.Pill}
          icon={FlagIcon}
        >
          Flag
          {enableAdminKeybinds && ' (F)'}
        </Button>
      </div>
    </section>
  );
};

export default HooksAdminOverlay;