// PromptBar.jsx — the §8.1 prompt-bar at the bottom of the center column.
//
// In discuss mode the contributor types to talk; in contribute mode the
// model is told to lean toward concrete edits. A passage highlighted in
// the editor surfaces here as a "scoped to selection" badge and travels
// to the backend with the message.

import { useState } from 'react'
import ModelPicker from './ModelPicker.jsx'

export default function PromptBar({
  selection,
  onSubmit,
  disabled,
  models,
  selectedModel,
  onModelChange,
  discussMode = false,
  placeholder,
}) {
  const [prompt, setPrompt] = useState('')

  const handleSubmit = () => {
    if (!prompt.trim() || disabled) return
    onSubmit(prompt.trim(), selection)
    setPrompt('')
  }

  return (
    <div className="prompt-bar">
      {selection && (
        <div className="selection-badge">
          <span className="selection-icon">✦</span>
          Scoped to selection — "{selection.slice(0, 80)}{selection.length > 80 ? '…' : ''}"
        </div>
      )}
      <div className="prompt-row">
        {models?.length > 1 && (
          <ModelPicker models={models} selected={selectedModel} onChange={onModelChange} />
        )}
        <textarea
          className="prompt-input"
          value={prompt}
          onChange={e => setPrompt(e.target.value)}
          onKeyDown={e => {
            if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); handleSubmit() }
          }}
          placeholder={
            placeholder ?? (
              selection ? 'Ask anything about the selected text…'
                : discussMode ? 'Ask anything about this RFC…'
                : 'Ask anything or propose changes…'
            )
          }
          disabled={disabled}
          rows={1}
        />
        <button className="prompt-submit" onClick={handleSubmit} disabled={!prompt.trim() || disabled}>
          Ask
        </button>
      </div>
    </div>
  )
}