import { useState, useEffect } from 'react'
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
import { Input } from '@/components/ui/input'
import { Button } from '@/components/ui/button'
import { Label } from '@/components/ui/label'
import { toast } from 'sonner'
import { apiService } from '@/services/api'

interface AddUrlDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
}

export function AddUrlDialog({ open, onOpenChange }: AddUrlDialogProps) {
  const [url, setUrl] = useState('')
  const [loading, setLoading] = useState(false)

  // Reset form when dialog opens
  useEffect(() => {
    if (open) {
      setUrl('')
      setLoading(false)
    }
  }, [open])

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    
    if (!url.trim()) {
      toast.error('Please enter a URL')
      return
    }

    if (!isValidUrl(url.trim())) {
      toast.error('Please enter a valid URL')
      return
    }

    setLoading(true)

    try {
      const response = await apiService.post('/api/stream/add-url', { url: url.trim() })
      const data = await response.json()

      if (response.ok) {
        toast.success('URL added to processing queue!')
        onOpenChange(false)
      } else {
        if (response.status === 409) {
          toast.error('This URL is already in the system')
        } else {
          toast.error(data.error || 'Failed to add URL')
        }
      }
    } catch (error) {
      console.error('Error adding URL:', error)
      toast.error('Failed to add URL. Please try again.')
    } finally {
      setLoading(false)
    }
  }

  const handleKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === 'Enter' && !loading) {
      handleSubmit(e as any)
    }
    if (e.key === 'Escape') {
      onOpenChange(false)
    }
  }

  const isValidUrl = (string: string) => {
    try {
      const url = new URL(string)
      return url.protocol === 'http:' || url.protocol === 'https:'
    } catch {
      return false
    }
  }

  const getSupportedServices = () => {
    return [
      'YouTube',
      'SoundCloud', 
      'Dailymotion',
      'Spotify',
      'Vimeo',
      'Twitch',
      'and many more...'
    ]
  }

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-md">
        <DialogHeader>
          <DialogTitle>Add Media URL</DialogTitle>
        </DialogHeader>
        
        <form onSubmit={handleSubmit} className="space-y-4">
          <div className="space-y-2">
            <Label htmlFor="url">Media URL</Label>
            <Input
              id="url"
              type="url"
              placeholder="https://www.youtube.com/watch?v=..."
              value={url}
              onChange={(e) => setUrl(e.target.value)}
              onKeyDown={handleKeyDown}
              disabled={loading}
              autoFocus
            />
            <p className="text-sm text-muted-foreground">
              Supported services: {getSupportedServices().join(', ')}
            </p>
          </div>

          <div className="flex justify-end space-x-2">
            <Button
              type="button"
              variant="outline"
              onClick={() => onOpenChange(false)}
              disabled={loading}
            >
              Cancel
            </Button>
            <Button type="submit" disabled={loading || !url.trim()}>
              {loading ? 'Adding...' : 'Add to Queue'}
            </Button>
          </div>
        </form>

        <div className="text-xs text-muted-foreground mt-4 p-3 bg-muted rounded">
          <p className="font-medium mb-1">How it works:</p>
          <ul className="list-disc list-inside space-y-1">
            <li>Paste any supported media URL</li>
            <li>Audio will be extracted automatically</li>
            <li>New sound will be added to your soundboard</li>
            <li>Processing may take a few moments</li>
            <li>Check the streams page to monitor progress</li>
          </ul>
        </div>
      </DialogContent>
    </Dialog>
  )
}