import { Button } from '@/components/ui/button'
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Loader2 } from 'lucide-react'

interface CreateExtractionDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  loading: boolean
  url: string
  onUrlChange: (url: string) => void
  onSubmit: () => void
  onCancel: () => void
}

export function CreateExtractionDialog({
  open,
  onOpenChange,
  loading,
  url,
  onUrlChange,
  onSubmit,
  onCancel,
}: CreateExtractionDialogProps) {
  const handleKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === 'Enter' && !loading) {
      onSubmit()
    }
  }

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-[425px]">
        <DialogHeader>
          <DialogTitle>Create New Extraction</DialogTitle>
          <DialogDescription>
            Extract audio from YouTube, SoundCloud, Vimeo, TikTok, Twitter, 
            Instagram, and many other platforms.
          </DialogDescription>
        </DialogHeader>
        <div className="space-y-4">
          <div>
            <Label htmlFor="url">URL</Label>
            <Input
              id="url"
              placeholder="https://www.youtube.com/watch?v=..."
              value={url}
              onChange={e => onUrlChange(e.target.value)}
              onKeyDown={handleKeyDown}
            />
            <p className="text-sm text-muted-foreground mt-1">
              Paste a link to extract audio from the media
            </p>
          </div>
        </div>
        <DialogFooter>
          <Button variant="outline" onClick={onCancel} disabled={loading}>
            Cancel
          </Button>
          <Button onClick={onSubmit} disabled={loading || !url.trim()}>
            {loading ? (
              <>
                <Loader2 className="h-4 w-4 mr-2 animate-spin" />
                Creating...
              </>
            ) : (
              'Create Extraction'
            )}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}