/* draft-pane.jsx — the right pane: ready → processing → result → approved. */
const { useState: useStateD, useEffect: useEffectD, useRef: useRefD } = React;

function ConfBadge({ value, pillStyle }) {
  const cls = value >= 90 ? 'good' : value >= 78 ? 'mid' : value >= 65 ? 'low' : 'vlow';
  if (pillStyle === 'bar') {
    return (
      <div style={{ justifySelf: 'center' }}>
        <div className={'conf-bar ' + cls}><span className="fill" style={{ width: value + '%' }}></span></div>
        <div className="conf-bar-num">{value}</div>
      </div>
    );
  }
  return (
    <span className={'conf-pill ' + (pillStyle === 'outline' ? 'outline ' : 'filled ') + cls}>
      <span className="d"></span>{value}%
    </span>
  );
}

function LineRow({ item, idx, state, pillStyle, onRate, onQty, onAct, isMaterial, delayMs }) {
  const [editing, setEditing] = useState(false);
  const low = item.confidence < 78;
  return (
    <div className={'line stagger' +
      (isMaterial ? ' material' : '') +
      (low ? ' lowconf' : '') +
      (state === 'rejected' ? ' rejected' : '') +
      (state === 'approved' ? ' approved' : '')}
      data-row={idx} style={{ animationDelay: (delayMs || 0) + 'ms' }}>
      <div className="op">
        <div className="op-name">
          {item.op}
          {item.edited && <span className="edited-dot">edited</span>}
        </div>
        <div className="op-src" title={'cited from: ' + item.source_ref}>
          <svg className="ic" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M10 13a5 5 0 0 0 7.5.5l3-3a5 5 0 0 0-7-7l-1.5 1.5"/><path d="M14 11a5 5 0 0 0-7.5-.5l-3 3a5 5 0 0 0 7 7L12 19"/></svg>
          {item.source_ref}
        </div>
      </div>
      <div className="qty">
        {editing
          ? <input className="qty-input" defaultValue={item.qty} onBlur={(e) => { onQty(idx, e.target.value); }} />
          : item.qty}
      </div>
      <div className="rate">
        {editing
          ? <input className="rate-input" defaultValue={item.unit_rate.toFixed(2)}
                   onBlur={(e) => { onRate(idx, e.target.value); setEditing(false); }}
                   onKeyDown={(e) => { if (e.key === 'Enter') e.target.blur(); }} autoFocus />
          : <span>${RMAI.fmtAUD(item.unit_rate)}</span>}
      </div>
      <ConfBadge value={item.confidence} pillStyle={pillStyle} />
      <div className="line-acts">
        <button className={'iact' + (state === 'approved' ? ' on-approve' : '')} title="Accept line"
                onClick={() => onAct(idx, 'approved')}>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
        </button>
        <button className={'iact' + (editing ? ' on-edit' : '')} title="Edit rate"
                onClick={() => setEditing((v) => !v)}>
          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 20h9"/><path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z"/></svg>
        </button>
        <button className={'iact' + (state === 'rejected' ? ' on-reject' : '')} title="Remove line"
                onClick={() => onAct(idx, state === 'rejected' ? 'pending' : 'rejected')}>
          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
        </button>
      </div>
    </div>
  );
}

function ReadyState({ rfq, onDraft }) {
  return (
    <div className="draft-ready">
      <span className="badge badge--lavender">Draft · not started</span>
      <div className="lede">
        Draft a line-item quote for <b>{rfq.co}</b> from the RFQ and drawing on the left.
        Every line cites where it came from and carries a confidence score — <b>you review and own the number</b> before it goes out.
      </div>
      <div className="ready-points">
        <div className="ready-point"><span className="n">1</span><span>Reads the RFQ email + drawing features against your rate card.</span></div>
        <div className="ready-point"><span className="n">2</span><span>Builds operations, quantities and rates — flags every assumption.</span></div>
        <div className="ready-point"><span className="n">3</span><span>You set margin, edit any line, resolve open questions, then approve.</span></div>
      </div>
      <button className="btn btn--cta" onClick={onDraft}>
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 3v4M3 5h4M6 17v4M4 19h4M13 3l2.5 6.5L22 12l-6.5 2.5L13 21l-2.5-6.5L4 12l6.5-2.5z"/></svg>
        Draft quote
      </button>
      <p className="note" style={{ fontSize: 11.5, color: 'var(--rmai-fg-mut)', maxWidth: '46ch', margin: 0 }}>
        First pass takes a few seconds. Nothing is sent to the customer — this produces an internal draft for your review.
      </p>
    </div>
  );
}

function Processing({ phase }) {
  const steps = ['Reading RFQ + drawing…', 'Matching features to rate card…', 'Building line items…', 'Pricing & confidence…'];
  return (
    <div className="shimmer-wrap">
      <div className="shim-status"><span className="spin"></span>{steps[Math.min(phase, steps.length - 1)]}</div>
      <div className="shimline" style={{ width: '40%' }}></div>
      <div className="shimblock"></div>
      {Array.from({ length: 5 }).map((_, i) => (
        <div key={i} className="shimline" style={{ width: (88 - i * 9) + '%' }}></div>
      ))}
      <div className="shimblock"></div>
    </div>
  );
}

Object.assign(window, { ConfBadge, LineRow, ReadyState, Processing });