import { useState } from 'react'
import { cn } from '@/lib/utils'

interface VariablePromptModalProps {
  /** The prompt text from [USER_INPUT:prompt] */
  prompt: string
  /** Called with the user's input value */
  onSubmit: (value: string) => void
  /** Called when user cancels */
  onCancel: () => void
}

export function VariablePromptModal({ prompt, onSubmit, onCancel }: VariablePromptModalProps) {
  const [value, setValue] = useState('')

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    if (value.trim()) {
      onSubmit(value.trim())
    }
  }

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm">
      <div className="bg-card border border-border w-full max-w-md rounded-2xl p-6 shadow-lg">
        <h2 className="mb-1 text-lg font-semibold text-foreground">Input Required</h2>
        <p className="mb-4 text-sm text-muted-foreground">
          This step requires you to provide a value.
        </p>

        <form onSubmit={handleSubmit}>
          <label className="mb-2 block text-sm font-medium text-muted-foreground">
            {prompt}
          </label>
          <input
            type="text"
            value={value}
            onChange={(e) => setValue(e.target.value)}
            placeholder="Enter value..."
            autoFocus
            className={cn(
              'w-full rounded-lg border border-border bg-card px-3 py-2 text-sm text-foreground',
              'placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
            )}
          />

          <div className="mt-4 flex gap-2">
            <button
              type="submit"
              disabled={!value.trim()}
              className={cn(
                'flex-1 rounded-lg bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20',
                'hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed'
              )}
            >
              Continue
            </button>
            <button
              type="button"
              onClick={onCancel}
              className={cn(
                'rounded-lg border border-border px-4 py-2 text-sm font-medium text-muted-foreground',
                'hover:bg-accent hover:text-foreground'
              )}
            >
              Skip
            </button>
          </div>
        </form>
      </div>
    </div>
  )
}
