import { useState, useEffect, useRef } from 'react'
import { IoCloseOutline, IoLinkOutline, IoTrashOutline } from 'react-icons/io5'

interface LinkDialogProps {
  isOpen: boolean
  onClose: () => void
  onConfirm: (url: string) => void
  onRemove?: () => void
  initialUrl?: string
}

export default function LinkDialog({ isOpen, onClose, onConfirm, onRemove, initialUrl = '' }: LinkDialogProps) {
  const [url, setUrl] = useState(initialUrl)
  const inputRef = useRef<HTMLInputElement>(null)

  useEffect(() => {
    if (isOpen) {
      setUrl(initialUrl)
      // Focus input after dialog opens
      setTimeout(() => inputRef.current?.focus(), 100)
    }
  }, [isOpen, initialUrl])

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    if (url.trim()) {
      // Add https:// if no protocol is specified
      let finalUrl = url.trim()
      if (!finalUrl.match(/^https?:\/\//i)) {
        finalUrl = 'https://' + finalUrl
      }
      onConfirm(finalUrl)
      onClose()
    }
  }

  const handleRemove = () => {
    onRemove?.()
    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/50 backdrop-blur-sm"
        onClick={onClose}
      />

      {/* Dialog */}
      <div className="relative bg-slate-800 border border-slate-700/50 rounded-lg shadow-xl w-full max-w-md mx-4">
        <div className="flex items-center justify-between p-4 border-b border-slate-700/50">
          <div className="flex items-center gap-2 text-slate-200">
            <IoLinkOutline className="w-5 h-5" />
            <h3 className="font-medium">{initialUrl ? 'Edit Link' : 'Add Link'}</h3>
          </div>
          <button
            onClick={onClose}
            className="p-1 rounded-md hover:bg-slate-700/50 transition-colors text-slate-400 hover:text-slate-300"
          >
            <IoCloseOutline className="w-5 h-5" />
          </button>
        </div>

        <form onSubmit={handleSubmit} className="p-4">
          <div className="space-y-4">
            <div>
              <label htmlFor="url" className="block text-sm font-medium text-slate-300 mb-1">
                URL
              </label>
              <input
                ref={inputRef}
                type="text"
                id="url"
                value={url}
                onChange={(e) => setUrl(e.target.value)}
                placeholder="example.com or https://example.com"
                className="w-full px-3 py-2 bg-slate-900 border border-slate-700 rounded-md text-slate-200 placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-teal-500/50 focus:border-teal-500/50"
              />
            </div>
          </div>

          <div className="mt-6 flex justify-between items-center">
            {initialUrl && onRemove && (
              <button
                type="button"
                onClick={handleRemove}
                className="flex items-center gap-1.5 px-3 py-2 text-sm font-medium text-red-400 hover:text-red-300 transition-colors"
              >
                <IoTrashOutline className="w-4 h-4" />
                Remove Link
              </button>
            )}
            <div className="flex gap-3 ml-auto">
              <button
                type="button"
                onClick={onClose}
                className="px-4 py-2 text-sm font-medium text-slate-300 hover:text-slate-200 transition-colors"
              >
                Cancel
              </button>
              <button
                type="submit"
                disabled={!url.trim()}
                className="px-4 py-2 text-sm font-medium bg-teal-500/20 text-teal-300 rounded-md hover:bg-teal-500/30 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
              >
                {initialUrl ? 'Update' : 'Add'} Link
              </button>
            </div>
          </div>
        </form>
      </div>
    </div>
  )
}