rfc-app/frontend/src/components/ContributeRequestForm.jsx

// ContributeRequestForm.jsx — roadmap #28 Part 3.
//
// The "ask to contribute" popover, opened from an `rfc-pending` affordance
// in LinkedText (App reads `?contribute=<slug>&term=<term>`). It loads the
// contribution target (RFC title + owner display + the viewer's
// eligibility), shows the framing line "<owner> is working on an RFC for
// '<term>'", and collects the three #15/#26-vocabulary fields:
//
//   * Who I am          (required, free-text)
//   * Why I'm asking    (required, free-text)
//   * What I'd use it for (optional, mirrors #26)
//
// Submitting POSTs the request, which lands in each owner's §15 inbox.
// When the viewer isn't eligible (anonymous, already a collaborator, or
// has a pending ask) the form shows the backend's reason instead.

import { useEffect, useState } from 'react'
import { contributionTarget, requestContribution } from '../api'

export default function ContributeRequestForm({ slug, term, onClose }) {
  const [target, setTarget] = useState(null)
  const [loadError, setLoadError] = useState(null)
  const [whoIAm, setWhoIAm] = useState('')
  const [why, setWhy] = useState('')
  const [useCase, setUseCase] = useState('')
  const [submitting, setSubmitting] = useState(false)
  const [error, setError] = useState(null)
  const [done, setDone] = useState(false)

  useEffect(() => {
    let live = true
    contributionTarget(slug)
      .then(t => { if (live) setTarget(t) })
      .catch(err => { if (live) setLoadError(err.message || 'Could not load this RFC.') })
    return () => { live = false }
  }, [slug])

  async function handleSubmit(e) {
    e.preventDefault()
    if (!whoIAm.trim() || !why.trim()) return
    setSubmitting(true)
    setError(null)
    try {
      await requestContribution(slug, {
        matchedTerm: term || target?.title || slug,
        whoIAm: whoIAm.trim(),
        why: why.trim(),
        useCase: useCase.trim() || null,
      })
      setDone(true)
    } catch (err) {
      setError(err.message || 'Could not send your request.')
    } finally {
      setSubmitting(false)
    }
  }

  const owner = target?.owner || 'The owner'
  const label = term || target?.title || slug

  return (
    <div className="modal-overlay" onClick={e => { if (e.target === e.currentTarget) onClose() }}>
      <div className="modal">
        <div className="modal-header">
          <h2>Ask to contribute</h2>
          <button className="modal-close" onClick={onClose}>×</button>
        </div>

        {loadError && (
          <div className="modal-body"><p className="field-error">{loadError}</p></div>
        )}

        {!loadError && done && (
          <>
            <div className="modal-body">
              <p>
                Your request has been sent to <strong>{owner}</strong>. You'll hear back
                in your inbox; if it's accepted you'll get an invitation by email to
                join the RFC.
              </p>
            </div>
            <div className="modal-actions">
              <button type="button" className="btn-primary" onClick={onClose}>Done</button>
            </div>
          </>
        )}

        {!loadError && !done && target && !target.eligible && (
          <>
            <div className="modal-body">
              <p className="field-help" style={{ marginTop: 0 }}>
                {owner} is working on an RFC for <strong>'{label}'</strong>.
              </p>
              <p>{target.already_requested
                ? "You've already asked to contribute to this RFC — the owner has your request."
                : (target.reason || 'You cannot ask to contribute to this RFC right now.')}</p>
            </div>
            <div className="modal-actions">
              <button type="button" className="btn-secondary" onClick={onClose}>Close</button>
            </div>
          </>
        )}

        {!loadError && !done && target && target.eligible && (
          <form onSubmit={handleSubmit}>
            <div className="modal-body">
              <p className="field-help" style={{ marginTop: 0 }}>
                <strong>{owner}</strong> is working on an RFC for <strong>'{label}'</strong>.
                Tell them a little about why you'd like to contribute.
              </p>

              <label htmlFor="contribute-who">Who I am</label>
              <textarea
                id="contribute-who"
                value={whoIAm}
                onChange={e => setWhoIAm(e.target.value)}
                placeholder="Your name and a sentence of context."
                rows={2}
                autoFocus
                required
              />

              <label htmlFor="contribute-why">Why I'm asking to contribute</label>
              <textarea
                id="contribute-why"
                value={why}
                onChange={e => setWhy(e.target.value)}
                placeholder="What you'd bring, or what draws you to this RFC."
                rows={3}
                required
              />

              <label htmlFor="contribute-use-case">What I'd use the RFC for (optional)</label>
              <textarea
                id="contribute-use-case"
                value={useCase}
                onChange={e => setUseCase(e.target.value)}
                placeholder="The concrete thing you intend to build or do with it. Optional."
                rows={2}
              />

              {error && <p className="field-error">{error}</p>}
            </div>
            <div className="modal-actions">
              <button type="button" className="btn-secondary" onClick={onClose}>Cancel</button>
              <button
                type="submit"
                className="btn-primary"
                disabled={!whoIAm.trim() || !why.trim() || submitting}
              >
                {submitting ? 'Sending…' : 'Send request'}
              </button>
            </div>
          </form>
        )}

        {!loadError && !done && !target && (
          <div className="modal-body"><p className="field-help">Loading…</p></div>
        )}
      </div>
    </div>
  )
}