'use client'

import type { AdminMedia } from '@admin/types'
import { MediaGalleryDialog } from '@admin/components/shared/media/media-gallery-dialog'
import { Button } from '@admin/components/ui/button'
import { Card, CardContent } from '@admin/components/ui/card'
import { cn } from '@admin/utils/shared/cn'
import { ImageIcon } from 'lucide-react'

interface MediaFieldEmptyStateProps {
  accept?: string
  addButtonLabel?: string
  className?: string
  disabled?: boolean
  isRemovable?: boolean
  mode?: 'single' | 'multi'
  open: boolean
  onOpenChange: (open: boolean) => void
  onSelect: (selected: AdminMedia | AdminMedia[]) => void
  showAddButton?: boolean
}

export function MediaFieldEmptyState({
  accept,
  addButtonLabel = 'Add Image',
  className,
  disabled,
  mode = 'single',
  open,
  onOpenChange,
  onSelect,
  showAddButton = true
}: MediaFieldEmptyStateProps) {
  function handleAddImage(e: React.MouseEvent<HTMLButtonElement>) {
    e.preventDefault()
    e.stopPropagation()
    onOpenChange(true)
  }

  return (
    <div className={className}>
      <Card
        className={cn('group gap-0 p-0', {
          'pointer-events-none cursor-not-allowed opacity-50': disabled
        })}
        onClick={() => !disabled && onOpenChange(true)}
      >
        <CardContent className="relative flex h-40 flex-col items-center justify-center p-0 transition-colors duration-200 hover:bg-muted/50">
          <ImageIcon
            className="text-muted-foreground transition-opacity group-focus-within:opacity-0 group-hover:opacity-0"
            strokeWidth={1}
          />
          {showAddButton ? (
            <div className="absolute inset-0 flex items-center justify-center gap-1 opacity-0 transition-opacity duration-200 ease-out group-focus-within:opacity-100 group-hover:opacity-100">
              <Button
                type="button"
                data-media-field-action="true"
                variant="outline"
                onClick={handleAddImage}
                className="border-primary/10"
              >
                {addButtonLabel}
              </Button>
            </div>
          ) : null}
        </CardContent>
      </Card>

      <MediaGalleryDialog
        open={open}
        onOpenChange={onOpenChange}
        onSelect={onSelect}
        mode={mode}
        accept={accept}
      />
    </div>
  )
}