import { useState } from 'react'

interface EditorModalProps {
  open: boolean
  onClose: () => void
  onDone: (text: string) => void
  initialText: string
  title: string
  sessionId: string
  apiBase: string
}

export default function EditorModal({
  open,
  onClose,
  onDone,
  initialText,
  title,
  sessionId: _,
  apiBase: __
}: EditorModalProps) {
  const [text, setText] = useState(initialText)

  if (!open) return null

  return (
    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
      <div className="bg-white rounded-lg max-w-4xl w-full max-h-[90vh] flex flex-col">
        <div className="flex items-center justify-between p-4 border-b">
          <h2 className="text-lg font-semibold">{title}</h2>
          <button
            onClick={onClose}
            className="text-gray-500 hover:text-gray-700"
          >
            ✕
          </button>
        </div>
        
        <div className="flex-1 p-4 overflow-hidden">
          <textarea
            value={text}
            onChange={(e) => setText(e.target.value)}
            className="w-full h-full resize-none border rounded p-3 focus:outline-none focus:ring-2 focus:ring-blue-500"
            placeholder="Enter your text here..."
          />
        </div>
        
        <div className="flex justify-end gap-2 p-4 border-t">
          <button
            onClick={onClose}
            className="px-4 py-2 text-gray-600 border rounded hover:bg-gray-50"
          >
            Cancel
          </button>
          <button
            onClick={() => {
              onDone(text)
              onClose()
            }}
            className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
          >
            Save
          </button>
        </div>
      </div>
    </div>
  )
}