/* components.jsx — Inbox, SourcePane (RFQ + drawing), DrawingPane. */
const { useState, useRef, useEffect } = React;

/* ---------------- Inbox ---------------- */
function Inbox({ rfqs, onOpen }) {
  return (
    <div className="inbox-scroll">
      <div className="inbox">
        <div className="inbox-head">
          <h1>Requests for quote</h1>
          <p>Inbound RFQs from the estimating mailbox. Open one to draft a line-item quote — you review and own the number before it goes back out.</p>
        </div>
        <div className="inbox-meta">
          <span className="badge badge--status badge--new"><span className="d"></span>{rfqs.filter(r=>r.status==='new').length} new</span>
          <span className="inbox-meta seg" style={{margin:0}}>· estimating@realmindsai.com.au</span>
        </div>
        <div className="rfq-list">
          {rfqs.map((r) => (
            <button key={r.id} className="rfq-row" onClick={() => onOpen(r)}>
              <span className="rfq-ava">{r.initials}</span>
              <span className="rfq-main">
                <span className="rfq-from">
                  <span className="co">{r.co}</span>
                  <span className="who">{r.who}</span>
                </span>
                <span className="rfq-subj">{r.subject}</span>
                <span className="rfq-tags">
                  <span className="rfq-chip">qty {r.qty}</span>
                  <span className="rfq-chip">{r.material}</span>
                  <span className="rfq-chip">
                    <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5z"/><path d="M14 2v6h6"/></svg>
                    {r.drawings} drawings
                  </span>
                </span>
              </span>
              <span className="rfq-aside">
                {r.status === 'new'
                  ? <span className="badge badge--status badge--new"><span className="d"></span>New</span>
                  : <span className="badge badge--drafted"><span className="d"></span>Drafted</span>}
                <span className="rfq-time">{r.received}</span>
              </span>
            </button>
          ))}
        </div>
      </div>
    </div>
  );
}

/* ---------------- Drawing pane (with drop-in image) ---------------- */
function DrawingPane({ rfq, annotated, reading }) {
  const [img, setImg] = useState(null);
  const [drag, setDrag] = useState(false);
  const fileRef = useRef(null);
  const anchors = rfq.drawing === 'bracket' ? window.BRACKET_ANCHORS : window.GENERIC_ANCHORS;

  function handleFiles(files) {
    const f = files && files[0];
    if (!f || !f.type.startsWith('image/')) return;
    const url = URL.createObjectURL(f);
    setImg(url);
  }

  return (
    <div className="dwg-wrap">
      <div className="dwg-bar">
        <span className="lbl">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--rmai-purple)" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M9 21V9"/></svg>
          {rfq.drawing === 'bracket' ? 'DWG-2024-0847 Rev C' : 'Part drawing'}
        </span>
        <span className="rfq-chip">{reading ? 'reading…' : annotated ? `${anchors.length} features read` : 'sheet 1 / ' + rfq.drawings}</span>
      </div>
      <div
        className={'dwg' + (drag ? ' drag' : '')}
        onDragOver={(e) => { e.preventDefault(); setDrag(true); }}
        onDragLeave={() => setDrag(false)}
        onDrop={(e) => { e.preventDefault(); setDrag(false); handleFiles(e.dataTransfer.files); }}
      >
        {img
          ? <img src={img} className="dwg-photo" alt="dropped drawing" />
          : (rfq.drawing === 'bracket' ? <BracketDrawing /> : <GenericDrawing />)}

        {/* annotation overlay */}
        {anchors.map((a, i) => (
          <div key={i} className={'anno' + ((annotated || reading) ? ' show' : '')}
               style={{ left: a.x + '%', top: a.y + '%', transitionDelay: (i * 140) + 'ms' }}>
            <span className="anno-dot" style={a.warn ? { background: '#F59E0B', boxShadow: '0 0 0 4px rgba(245,158,11,0.20)' } : null}></span>
            <span className="anno-tag"
                  style={{
                    left: a.side === 'left' ? '-8px' : '14px',
                    top: a.side === 'down' ? '16px' : '0px',
                    transform: a.side === 'left' ? 'translate(-100%, -50%)' : (a.side === 'down' ? 'translateY(0)' : 'translateY(-50%)'),
                    background: a.warn ? '#B45309' : 'var(--rmai-purple)'
                  }}>{a.tag}</span>
          </div>
        ))}

        <button className="dwg-replace" onClick={() => fileRef.current && fileRef.current.click()}>
          {img ? 'Replace' : 'Drop / upload'}
        </button>
        <div className="dwg-drop">
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
          Drop your drawing
        </div>
        <input ref={fileRef} type="file" accept="image/*" style={{ display: 'none' }}
               onChange={(e) => handleFiles(e.target.files)} />
      </div>
      <div className="dwg-thumbs">
        <div className="dwg-thumb active">1</div>
        {Array.from({ length: Math.max(0, rfq.drawings - 1) }).map((_, i) => (
          <div key={i} className="dwg-thumb">{i + 2}</div>
        ))}
      </div>
    </div>
  );
}

/* ---------------- Source pane ---------------- */
function SourcePane({ rfq, body, setBody, annotated, reading, specOpen, toggleSpec }) {
  const specs = rfq.drawing === 'bracket'
    ? [
        { q: 'Material & finish', a: <span>6061-T6 aluminium · finish <b className="mono">not specified</b> → assumed Ra 3.2 as-machined.</span> },
        { q: 'Tolerances', a: <span>General <span className="mono">±0.1mm</span>. The <span className="mono">45.0</span> centre dim has no tolerance noted — flagged for review.</span> },
        { q: 'Features off drawing', a: <span>88×60 plate · 4× Ø6.0 tapped M6 · knurled boss · profiled outline.</span> }
      ]
    : [
        { q: 'Material & finish', a: <span>{rfq.material} · bead blast finish.</span> },
        { q: 'Tolerances', a: <span>Per RFQ — see body. Tight bores flagged where stated.</span> },
        { q: 'Features', a: <span>Cross-drilled ports · tapped holes · faced faces · profiled outer.</span> }
      ];

  return (
    <div className="pane pane--source">
      <div className="pane-inner">
        <div className="pane-head">
          <span className="eyebrow">Source · RFQ</span>
          <span className="rfq-chip">{rfq.received}</span>
        </div>

        <div className="mail">
          <div className="mail-hd">
            <div className="mail-from">
              <span className="mail-ava">{rfq.initials}</span>
              <div style={{ minWidth: 0 }}>
                <div className="nm">{rfq.co} · {rfq.who.split(' · ')[0]}</div>
                <div className="em">{rfq.email}</div>
              </div>
            </div>
            <div className="mail-subj">{rfq.subject}</div>
          </div>
          <textarea className="mail-body" value={body} onChange={(e) => setBody(e.target.value)} spellCheck={false} />
          <div className="mail-foot">
            <span className="hint">Edit the brief — the draft reads from exactly this text.</span>
            <span className="rfq-chip">{body.trim().split(/\s+/).length} words</span>
          </div>
        </div>

        <DrawingPane rfq={rfq} annotated={annotated} reading={reading} />

        <div className="dwg-bar" style={{ marginTop: 18 }}>
          <span className="lbl">Extracted spec</span>
        </div>
        <div className="spec">
          {specs.map((s, i) => (
            <div key={i} className={'spec-row' + (specOpen === i ? ' open' : '')}>
              <button className="spec-q" onClick={() => toggleSpec(i)}>
                {s.q}
                <svg className="chev" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
              </button>
              {specOpen === i && <div className="spec-a">{s.a}</div>}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Inbox, SourcePane, DrawingPane });