'use client'
import React from 'react'

interface Props {
  isOpen: boolean
  onClose: () => void
  onCreate: (data: { name: string; description: string }) => void | Promise<void>
  creating: boolean
  error?: string
  success?: string
  clearMessages: () => void
}

export default function CreateNewPoolModal({
  isOpen,
  onClose,
  onCreate,
  creating,
  error,
  success,
  clearMessages
}: Props) {
  const [name, setName] = React.useState('')
  const [description, setDescription] = React.useState('')

  React.useEffect(() => {
    if (!isOpen) {
      setName('')
      setDescription('')
    }
  }, [isOpen])

  if (!isOpen) return null

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center">
      {/* Overlay */}
      <div
        className="absolute inset-0 bg-black/40 backdrop-blur-sm"
        onClick={onClose}
      />
      {/* Modal */}
      <div className="relative w-full max-w-lg mx-4 rounded-2xl bg-white shadow-xl border border-blue-100 p-6">
        <div className="flex items-center justify-between mb-4">
          <h2 className="text-xl font-semibold text-blue-900">Create New Pool</h2>
          <button
            onClick={() => { clearMessages(); onClose(); }}
            className="text-gray-500 hover:text-gray-700 transition text-sm"
            aria-label="Close"
          >
            ✕
          </button>
        </div>

        {success && (
          <div className="mb-4 rounded-md border border-green-200 bg-green-50 px-3 py-2 text-sm text-green-700">
            {success}
          </div>
        )}
        {error && (
            <div className="mb-4 rounded-md border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">
              {error}
            </div>
        )}

        <form
          onSubmit={e => {
            e.preventDefault()
            clearMessages()
            onCreate({ name, description })
          }}
          className="space-y-4"
        >
          <div>
            <label className="block text-sm font-medium text-blue-900 mb-1">Pool Name</label>
            <input
              className="w-full rounded-lg border border-gray-300 px-4 py-3 text-sm bg-gray-50 text-gray-900 focus:ring-2 focus:ring-blue-900 focus:border-transparent"
              placeholder="e.g., VIP Members"
              value={name}
              onChange={e => setName(e.target.value)}
              disabled={creating}
            />
          </div>
            <div>
              <label className="block text-sm font-medium text-blue-900 mb-1">Description</label>
              <textarea
                className="w-full rounded-lg border border-gray-300 px-4 py-3 text-sm bg-gray-50 text-gray-900 focus:ring-2 focus:ring-blue-900 focus:border-transparent"
                rows={3}
                placeholder="Short description of the pool"
                value={description}
                onChange={e => setDescription(e.target.value)}
                disabled={creating}
              />
            </div>
          <div className="flex gap-2">
            <button
              type="submit"
              disabled={creating}
              className="px-5 py-3 text-sm font-semibold text-blue-50 rounded-lg bg-blue-900 hover:bg-blue-800 shadow inline-flex items-center gap-2 disabled:opacity-60"
            >
              {creating && <span className="h-4 w-4 rounded-full border-2 border-white/30 border-t-white animate-spin" />}
              {creating ? 'Creating...' : 'Create Pool'}
            </button>
            <button
              type="button"
              className="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-200 rounded-lg hover:bg-gray-300 transition"
              onClick={() => { setName(''); setDescription(''); clearMessages(); }}
              disabled={creating}
            >
              Reset
            </button>
            <button
              type="button"
              className="ml-auto px-4 py-2 text-sm font-medium text-gray-600 hover:text-gray-800 transition"
              onClick={() => { clearMessages(); onClose(); }}
              disabled={creating}
            >
              Close
            </button>
          </div>
        </form>
      </div>
    </div>
  )
}