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

import { useState } from 'react'
import { X, FolderPlus, AlertCircle } from 'lucide-react'
import clsx from 'clsx'

interface AddSourceFolderDialogProps {
  isOpen: boolean
  onClose: () => void
  onAdd: (path: string, recursive: boolean) => Promise<void>
}

export function AddSourceFolderDialog({ isOpen, onClose, onAdd }: AddSourceFolderDialogProps) {
  const [folderPath, setFolderPath] = useState('')
  const [recursive, setRecursive] = useState(true)
  const [isLoading, setIsLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    
    if (!folderPath.trim()) {
      setError('Please enter a folder path')
      return
    }

    setIsLoading(true)
    setError(null)

    try {
      await onAdd(folderPath.trim(), recursive)
      setFolderPath('')
      setRecursive(true)
      onClose()
    } catch (err: any) {
      setError(err.message || 'Failed to add source folder')
    } finally {
      setIsLoading(false)
    }
  }

  const handleClose = () => {
    if (!isLoading) {
      setFolderPath('')
      setError(null)
      onClose()
    }
  }

  if (!isOpen) return null

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center">
      {/* Backdrop */}
      <div 
        className="absolute inset-0 bg-black/60 backdrop-blur-sm"
        onClick={handleClose}
      />
      
      {/* Dialog */}
      <div className="relative z-10 w-full max-w-md rounded-lg bg-surface border border-border p-6 shadow-xl">
        {/* Header */}
        <div className="mb-4 flex items-center justify-between">
          <div className="flex items-center gap-2">
            <FolderPlus className="h-5 w-5 text-primary" />
            <h2 className="text-lg font-semibold text-text">Add Source Folder</h2>
          </div>
          <button
            onClick={handleClose}
            disabled={isLoading}
            className="rounded p-1 text-text-muted hover:bg-surface-2 hover:text-text disabled:opacity-50"
          >
            <X className="h-5 w-5" />
          </button>
        </div>

        {/* Form */}
        <form onSubmit={handleSubmit} className="space-y-4">
          {/* Path Input */}
          <div>
            <label htmlFor="folderPath" className="mb-1 block text-sm text-text-muted">
              Folder Path
            </label>
            <input
              id="folderPath"
              type="text"
              value={folderPath}
              onChange={(e) => setFolderPath(e.target.value)}
              placeholder="/host/Pictures/your-folder"
              disabled={isLoading}
              className={clsx(
                'w-full rounded border bg-bg px-3 py-2 text-sm text-text placeholder-text-faint',
                'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary',
                'disabled:opacity-50',
                error ? 'border-reject' : 'border-border'
              )}
            />
            <div className="mt-1 space-y-1">
              <p className="text-xs text-text-muted">
                Use container paths. Your Pictures folder is available at:
              </p>
              <code className="block text-xs bg-surface-2 px-2 py-1 rounded text-primary">
                /host/Pictures/
              </code>
              <p className="text-xs text-text-faint">
                Example: /host/Pictures/MulitaTest
              </p>
            </div>
          </div>

          {/* Recursive Checkbox */}
          <div className="flex items-center gap-2">
            <input
              id="recursive"
              type="checkbox"
              checked={recursive}
              onChange={(e) => setRecursive(e.target.checked)}
              disabled={isLoading}
              className="h-4 w-4 rounded border-border bg-bg text-primary focus:ring-2 focus:ring-primary focus:ring-offset-0"
            />
            <label htmlFor="recursive" className="text-sm text-text">
              Include subfolders
            </label>
          </div>

          {/* Error Message */}
          {error && (
            <div className="flex items-center gap-2 rounded bg-reject/10 p-3 text-sm text-reject">
              <AlertCircle className="h-4 w-4 flex-shrink-0" />
              <span>{error}</span>
            </div>
          )}

          {/* Actions */}
          <div className="flex justify-end gap-2">
            <button
              type="button"
              onClick={handleClose}
              disabled={isLoading}
              className="rounded bg-surface-2 px-4 py-2 text-sm text-text hover:bg-surface-offset disabled:opacity-50"
            >
              Cancel
            </button>
            <button
              type="submit"
              disabled={isLoading || !folderPath.trim()}
              className="rounded bg-primary px-4 py-2 text-sm text-white hover:bg-primary/90 disabled:opacity-50"
            >
              {isLoading ? 'Adding...' : 'Add Folder'}
            </button>
          </div>
        </form>
      </div>
    </div>
  )
}