import { Button, Tooltip } from '@cherrystudio/ui'
import { CopyIcon, DeleteIcon } from '@renderer/components/Icons'
import { cn } from '@renderer/utils/style'
import { Save, X } from 'lucide-react'
import type { FC, HTMLAttributes } from 'react'
import { useTranslation } from 'react-i18next'

interface Props {
  selectedMessageIds: readonly string[]
  isMultiSelectMode: boolean
  onSave?: () => void
  onCopy?: () => void
  onDelete?: () => void
  onClose: () => void
}

const MultiSelectActionPopup: FC<Props> = ({
  selectedMessageIds,
  isMultiSelectMode,
  onSave,
  onCopy,
  onDelete,
  onClose
}) => {
  const { t } = useTranslation()

  if (!isMultiSelectMode) return null

  const isActionDisabled = selectedMessageIds.length === 0

  return (
    <Container>
      <ActionBar>
        <SelectionCount>{t('common.selectedMessages', { count: selectedMessageIds.length })}</SelectionCount>
        <ActionButtons>
          {onSave && (
            <Tooltip content={t('common.save')}>
              <Button className="rounded-full" variant="ghost" disabled={isActionDisabled} onClick={onSave} size="icon">
                <Save size={16} />
              </Button>
            </Tooltip>
          )}
          {onCopy && (
            <Tooltip content={t('common.copy')}>
              <Button className="rounded-full" variant="ghost" disabled={isActionDisabled} onClick={onCopy} size="icon">
                <CopyIcon size={16} />
              </Button>
            </Tooltip>
          )}
          {onDelete && (
            <Tooltip content={t('common.delete')}>
              <Button
                className="rounded-full"
                variant="ghost"
                disabled={isActionDisabled}
                onClick={onDelete}
                size="icon">
                <DeleteIcon size={16} className="lucide-custom" />
              </Button>
            </Tooltip>
          )}
        </ActionButtons>
        <Tooltip content={t('chat.navigation.close')}>
          <Button className="rounded-full" variant="ghost" onClick={onClose} size="icon">
            <X size={16} />
          </Button>
        </Tooltip>
      </ActionBar>
    </Container>
  )
}

const Container: FC<HTMLAttributes<HTMLDivElement>> = ({ className, ...props }) => (
  <div className={cn('fixed inset-x-0 bottom-0 z-300 flex items-center justify-center p-4', className)} {...props} />
)

const ActionBar: FC<HTMLAttributes<HTMLDivElement>> = ({ className, ...props }) => (
  <div
    className={cn(
      'flex items-center justify-between gap-4 rounded-[99px] border-[0.5px] border-border',
      'bg-background p-1 shadow-md',
      className
    )}
    {...props}
  />
)

const ActionButtons: FC<HTMLAttributes<HTMLDivElement>> = ({ className, ...props }) => (
  <div className={cn('flex items-center gap-2', className)} {...props} />
)

const SelectionCount: FC<HTMLAttributes<HTMLDivElement>> = ({ className, ...props }) => (
  <div className={cn('shrink-0 pl-2 text-[14px] text-foreground-secondary', className)} {...props} />
)

export default MultiSelectActionPopup
