/* result-pane.jsx — assembled draft: lines + pricing + clarify + approve. */
const { useState: useStateR, useEffect: useEffectR, useRef: useRefR, useMemo: useMemoR } = React;

const QTY_BREAKS = [
  { q: 1, factor: 1.18 },
  { q: 10, factor: 1.04 },
  { q: 50, factor: 1.0 },
  { q: 100, factor: 0.94 }
];

function ResultDraft({ draft, rfq, live, tweaks, onApprove, approved, quoteRef }) {
  const pillStyle = tweaks.pillStyle || 'filled';
  const [margin, setMargin] = useState(tweaks.margin != null ? tweaks.margin : 30);
  const [qtyIdx, setQtyIdx] = useState(() => {
    const i = QTY_BREAKS.findIndex((b) => b.q === draft.base_qty);
    return i >= 0 ? i : 2;
  });
  // line state: each item gets { ...item, state, edited }
  const [lines, setLines] = useState(() => draft.line_items.map((l) => ({ ...l, state: 'pending', edited: false })));
  const [mat, setMat] = useState({ ...draft.material, op: 'Material — ' + draft.material.spec, qty: 1, unit_rate: draft.material.cost, state: 'pending', edited: false });
  const [answers, setAnswers] = useState({});
  const totalRef = useRef(null);
  const headlineRef = useRef(null);

  useEffect(() => { if (tweaks.margin != null) setMargin(tweaks.margin); }, [tweaks.margin]);

  const stepMs = tweaks.animSpeed === 'fast' ? 55 : tweaks.animSpeed === 'slow' ? 150 : 95;

  const qty = QTY_BREAKS[qtyIdx].q;
  const qtyFactor = QTY_BREAKS[qtyIdx].factor;

  // per-part cost = material + sum(active line unit_rate*qty) ; setup amortised over qty
  const calc = useMemoR(() => {
    const activeLines = lines.filter((l) => l.state !== 'rejected');
    const opCost = activeLines.reduce((s, l) => s + l.unit_rate * l.qty, 0);
    const matCost = mat.state === 'rejected' ? 0 : mat.unit_rate;
    const setupPerPart = draft.setup / qty;
    const rawPerPart = (matCost + opCost) * qtyFactor + setupPerPart;
    const sell = rawPerPart * (1 + margin / 100);
    return {
      cost: rawPerPart,
      sell,
      total: sell * qty,
      marginDollars: sell - rawPerPart,
      lineCount: activeLines.length + (mat.state === 'rejected' ? 0 : 1)
    };
  }, [lines, mat, margin, qty, qtyFactor, draft.setup]);
  const matCostNow = mat.state === 'rejected' ? 0 : mat.unit_rate;

  // animated totals
  const prev = useRef({ sell: 0, total: 0 });
  useEffect(() => {
    if (!headlineRef.current) return;
    const speed = tweaks.animSpeed === 'fast' ? 350 : tweaks.animSpeed === 'slow' ? 900 : 600;
    RMAI.countUp(prev.current.sell, calc.sell, speed, (v) => {
      if (headlineRef.current) headlineRef.current.textContent = RMAI.fmtAUD(v);
    });
    RMAI.countUp(prev.current.total, calc.total, speed, (v) => {
      if (totalRef.current) totalRef.current.textContent = '$' + RMAI.fmtAUD(v, 0);
    });
    prev.current = { sell: calc.sell, total: calc.total };
  }, [calc.sell, calc.total]);

  function setRate(idx, val) {
    const n = parseFloat(val);
    if (!Number.isFinite(n)) return;
    setLines((ls) => ls.map((l, i) => i === idx ? { ...l, unit_rate: n, edited: true, confidence: Math.min(100, l.confidence + 6) } : l));
  }
  function setQtyOf(idx, val) {
    const n = Math.max(1, Math.round(parseFloat(val) || 1));
    setLines((ls) => ls.map((l, i) => i === idx ? { ...l, qty: n, edited: true } : l));
  }
  function actLine(idx, state) {
    setLines((ls) => ls.map((l, i) => i === idx ? { ...l, state } : l));
  }

  const openQs = draft.clarifying_questions || [];
  const resolvedCount = Object.keys(answers).filter((k) => answers[k] && answers[k].trim()).length;
  const editedCount = lines.filter((l) => l.edited).length;
  const lowConfCount = lines.filter((l) => l.confidence < 78 && l.state !== 'rejected').length;

  return (
    <div className="result in">
      <div className="draft-toolbar">
        <div className="meta">
          <span className="badge badge--lavender">First-pass draft</span>
          <span className="rfq-chip">{draft.part}</span>
          {live
            ? <span className="badge badge--status badge--ready"><span className="d"></span>live · drafted by claude</span>
            : <span className="rfq-chip" title="Live call unavailable — showing the worked sample">sample draft</span>}
        </div>
        <span className="rfq-chip">{draft.lead_time_days} day lead</span>
      </div>

      <div className="lines">
        <div className="lines-hd">
          <span>Operation · citation</span>
          <span className="c">Qty</span>
          <span className="r">Rate</span>
          <span className="c">Conf.</span>
          <span className="r">Review</span>
        </div>
        <LineRow item={mat} idx={-1} state={mat.state} pillStyle={pillStyle} isMaterial delayMs={0}
                 onRate={(i, v) => { const n = parseFloat(v); if (Number.isFinite(n)) setMat((m) => ({ ...m, unit_rate: n, cost: n, edited: true, confidence: Math.min(100, m.confidence + 5) })); }}
                 onQty={() => {}}
                 onAct={(i, s) => setMat((m) => ({ ...m, state: s }))} />
        {lines.map((l, i) => (
          <LineRow key={i} item={l} idx={i} state={l.state} pillStyle={pillStyle} delayMs={(i + 1) * stepMs}
                   onRate={setRate} onQty={setQtyOf} onAct={actLine} />
        ))}
      </div>

      {/* qty/setup note */}
      <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11.5, color: 'var(--rmai-fg-mut)', margin: '9px 2px 0', fontFamily: 'var(--rmai-font-mono)' }}>
        <span>+ setup & first-article ${RMAI.fmtAUD(draft.setup)} (amortised over {qty})</span>
        <span>{calc.lineCount} active lines{editedCount ? ' · ' + editedCount + ' edited' : ''}</span>
      </div>

      {/* margin slider */}
      <div className="margin">
        <div className="margin-top">
          <span className="lbl">Commercial margin</span>
          <span className="val">{margin}%</span>
        </div>
        <input className="slider" type="range" min="0" max="60" step="1" value={margin}
               onChange={(e) => setMargin(parseInt(e.target.value, 10))} />
        <div className="margin-scale"><span>0%</span><span>15%</span><span>30%</span><span>45%</span><span>60%</span></div>
      </div>

      {/* headline price + qty breaks */}
      <div className="headline">
        <div>
          <div className="k">Unit price @ {qty} off · {margin}% margin</div>
          <div className="big"><span className="cur">$</span><span ref={headlineRef}>{RMAI.fmtAUD(calc.sell)}</span></div>
          <div className="unit">cost ${RMAI.fmtAUD(calc.cost)} · job total <span ref={totalRef}>${RMAI.fmtAUD(calc.total, 0)}</span></div>
        </div>
        <div className="headline-right">
          <div className="k" style={{ marginBottom: 7 }}>Quantity break</div>
          <div className="qtybreaks">
            {QTY_BREAKS.map((b, i) => (
              <button key={b.q} className={'qb' + (i === qtyIdx ? ' active' : '')} onClick={() => setQtyIdx(i)}>
                <div className="qn">{b.q} off</div>
                <div className="qp">${RMAI.fmtAUD((matCostNow + lines.filter(l=>l.state!=='rejected').reduce((s,l)=>s+l.unit_rate*l.qty,0)) * b.factor * (1 + margin/100) + draft.setup/b.q, 0)}</div>
              </button>
            ))}
          </div>
        </div>
      </div>

      {/* clarifying questions */}
      {openQs.length > 0 && (
        <div className="clarify">
          <div className="clarify-hd">
            <span className="t">Before this goes out</span>
            <span className="n">{openQs.length - resolvedCount} open</span>
          </div>
          {openQs.map((c, i) => {
            const resolved = answers[i] && answers[i].trim();
            return (
              <div key={i} className={'cq' + (resolved ? ' resolved' : '')}>
                <span className="qn">{resolved ? '✓' : i + 1}</span>
                <div className="cq-body">
                  <div className="cq-q">{c.q}</div>
                  {c.assumption && <div className="cq-assume">Drafted on assumption: <span className="mono">{c.assumption}</span></div>}
                  <input className="cq-answer" placeholder="Add the answer (or leave the assumption to stand)…"
                         value={answers[i] || ''} onChange={(e) => setAnswers((a) => ({ ...a, [i]: e.target.value }))} />
                </div>
              </div>
            );
          })}
        </div>
      )}

      {/* approved banner */}
      {approved && (
        <div className="approved-banner">
          <span className="ic">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
          </span>
          <div>
            <h3>Quote ready for review</h3>
            <p>Draft <span className="ref">{quoteRef}</span> for {rfq.co} is saved at <b>${RMAI.fmtAUD(calc.total, 0)}</b> ({qty} off @ {margin}%). It's queued for a final human sign-off before it's sent — nothing has gone to the customer yet.</p>
          </div>
        </div>
      )}

      {/* actions */}
      <div className="draft-actions">
        {!approved
          ? <>
              <button className="btn btn--cta" onClick={() => onApprove(calc, qty, margin)}>
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><path d="m9 15 2 2 4-4"/></svg>
                Approve & generate quote
              </button>
              <button className="btn btn--secondary">Save draft</button>
              <span className="spacer"></span>
              <span className="note">{lowConfCount > 0 ? `${lowConfCount} low-confidence line${lowConfCount>1?'s':''} flagged for your eye.` : 'All lines above confidence threshold.'}</span>
            </>
          : <>
              <button className="btn btn--primary">View quote PDF</button>
              <button className="btn btn--secondary">Send for sign-off</button>
              <span className="spacer"></span>
              <span className="note">Quote {quoteRef} · queued for human sign-off.</span>
            </>}
      </div>
    </div>
  );
}

Object.assign(window, { ResultDraft, QTY_BREAKS });