mule-image/frontend/src/components/dialogs/DeleteFolderDialog.tsx

import { useEffect, useState } from 'react'
import clsx from 'clsx'
import { Trash2, Archive } from 'lucide-react'

interface DeleteFolderDialogProps {
  isOpen: boolean
  folderName: string
  /** Number of photos under this folder, including descendants. Surfaced
   *  in the dialog copy so the user understands the blast radius. */
  photoCount?: number
  onClose: () => void
  /** Called with the chosen mode when the user confirms. */
  onConfirm: (mode: 'discard' | 'permanent') => void
}

/**
 * Two-mode folder delete dialog:
 *
 *  - Move to discard pile  (default, soft, recoverable)
 *  - Permanently delete    (destructive, irreversible)
 *
 * The user picks a mode via the radio cards then clicks Delete. Esc /
 * backdrop click cancels.
 */
export function DeleteFolderDialog({
  isOpen,
  folderName,
  photoCount,
  onClose,
  onConfirm,
}: DeleteFolderDialogProps) {
  const [mode, setMode] = useState<'discard' | 'permanent'>('discard')

  // Reset mode when re-opening so the safe option is always the default.
  useEffect(() => {
    if (isOpen) setMode('discard')
  }, [isOpen])

  // Esc to close.
  useEffect(() => {
    if (!isOpen) return
    const handler = (e: KeyboardEvent) => {
      if (e.key === 'Escape') onClose()
    }
    window.addEventListener('keydown', handler)
    return () => window.removeEventListener('keydown', handler)
  }, [isOpen, onClose])

  if (!isOpen) return null

  const photoBlurb =
    photoCount === undefined
      ? 'photos in this folder'
      : photoCount === 0
      ? 'this empty folder'
      : `${photoCount} photo${photoCount === 1 ? '' : 's'} in this folder`

  return (
    <div className="fixed inset-0 z-50">
      <div
        className="absolute inset-0 bg-black/60 backdrop-blur-sm"
        onClick={onClose}
      />
      <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
        <div className="relative z-10 w-[420px] rounded-lg border border-border bg-surface p-5 shadow-2xl">
          <h2 className="mb-1 text-base font-semibold text-text">
            Delete folder "{folderName}"?
          </h2>
          <p className="mb-4 text-sm text-text-muted">
            What should happen to {photoBlurb}?
          </p>

          <div className="space-y-2">
            <ModeCard
              icon={<Archive className="h-4 w-4" />}
              title="Move photos to discard pile"
              description="Photos can be restored later from Discarded. The folder and files stay on disk."
              selected={mode === 'discard'}
              onClick={() => setMode('discard')}
            />
            <ModeCard
              icon={<Trash2 className="h-4 w-4" />}
              title="Permanently delete folder and photos"
              description="Removes the folder, every photo inside it, and the directory from disk. This cannot be undone."
              selected={mode === 'permanent'}
              destructive
              onClick={() => setMode('permanent')}
            />
          </div>

          <div className="mt-5 flex justify-end gap-2">
            <button
              onClick={onClose}
              className="rounded border border-border px-3 py-1.5 text-sm text-text hover:bg-surface-2"
            >
              Cancel
            </button>
            <button
              onClick={() => onConfirm(mode)}
              className={clsx(
                'rounded px-3 py-1.5 text-sm font-medium text-white',
                mode === 'permanent'
                  ? 'bg-reject hover:bg-reject/80'
                  : 'bg-primary hover:bg-primary/80'
              )}
            >
              {mode === 'permanent' ? 'Delete forever' : 'Move to discard pile'}
            </button>
          </div>
        </div>
      </div>
    </div>
  )
}

function ModeCard({
  icon,
  title,
  description,
  selected,
  destructive = false,
  onClick,
}: {
  icon: React.ReactNode
  title: string
  description: string
  selected: boolean
  destructive?: boolean
  onClick: () => void
}) {
  return (
    <button
      onClick={onClick}
      className={clsx(
        'flex w-full gap-3 rounded-lg border p-3 text-left transition-colors',
        selected
          ? destructive
            ? 'border-reject/60 bg-reject/10'
            : 'border-primary/60 bg-primary/10'
          : 'border-border bg-surface-2 hover:bg-surface-offset'
      )}
    >
      <div
        className={clsx(
          'mt-0.5 flex-shrink-0',
          selected ? (destructive ? 'text-reject' : 'text-primary') : 'text-text-muted'
        )}
      >
        {icon}
      </div>
      <div className="flex-1">
        <div
          className={clsx(
            'text-sm font-medium',
            selected ? (destructive ? 'text-reject' : 'text-primary') : 'text-text'
          )}
        >
          {title}
        </div>
        <div className="mt-0.5 text-xs text-text-muted">{description}</div>
      </div>
    </button>
  )
}