// ─── Feedback.jsx ─────────────────────────────────────────────
// Answer-rating bar. Maps to POST /v1/feedback {vote, reasons, free_text}.
// Quiet by default; on 👎 it reveals reason chips. On submit → thank-you.

function Feedback() {
  const [vote, setVote] = React.useState(null);       // 'up' | 'down' | null
  const [reasons, setReasons] = React.useState([]);
  const [sent, setSent] = React.useState(false);

  const REASONS = ['ציטוט שגוי', 'חסר מקור', 'לא רלוונטי', 'ניתוח שטחי', 'אחר'];

  function pick(v) {
    setVote(v);
    if (v === 'up') { setSent(true); }
  }
  function toggleReason(r) {
    setReasons(rs => rs.includes(r) ? rs.filter(x => x !== r) : [...rs, r]);
  }

  if (sent) {
    return (
      <div className="le-fb le-fb--sent">
        <span className="le-fb-tick">✓</span>
        <span>תודה — המשוב נרשם. הוא עוזר לנו לכייל את הציטוטים.</span>
      </div>
    );
  }

  return (
    <div className="le-fb">
      <div className="le-fb-row">
        <span className="le-fb-q">האם הניתוח עזר?</span>
        <button
          className={`le-fb-btn ${vote === 'up' ? 'is-on up' : ''}`}
          onClick={() => pick('up')}
          title="כן, עזר"
        >👍</button>
        <button
          className={`le-fb-btn ${vote === 'down' ? 'is-on down' : ''}`}
          onClick={() => pick('down')}
          title="לא עזר"
        >👎</button>
      </div>

      {vote === 'down' && (
        <div className="le-fb-reasons">
          <div className="le-fb-reasons-label">מה היה חסר? (אופציונלי)</div>
          <div className="le-fb-chips">
            {REASONS.map(r => (
              <button
                key={r}
                className={`le-fb-chip ${reasons.includes(r) ? 'is-on' : ''}`}
                onClick={() => toggleReason(r)}
              >{r}</button>
            ))}
          </div>
          <button className="le-fb-send" onClick={() => setSent(true)}>שלח משוב</button>
        </div>
      )}
    </div>
  );
}

window.Feedback = Feedback;