// Review & Work Order screens — cabinet-based model

function ReviewStep({ data, estimate, onProceed }) {
  const cabinets = data.cabinets || [];
  const tk = data.toeKick || {};
  estimate = estimate || { lineItems: [], subtotal: 0, tax: 0, total: 0 };

  return (
    <>
      <div className="page-head">
        <span className="eyebrow">Step 03 · Review</span>
        <h1>Review the order</h1>
        <p>Confirm everything before generating the work order.</p>
      </div>

      <div className="card">
        <div className="card-head"><h3>Vendor, customer & site</h3></div>
        <div className="review-item">
          <span className="k">Vendor</span>
          <span className="v">{data.vendorName || '—'}{data.vendorContact ? ` · ${data.vendorContact}` : ''}</span>
        </div>
        {(data.vendorPhone || data.vendorEmail) && (
          <div className="review-item">
            <span className="k">Vendor contact</span>
            <span className="v mono">{data.vendorPhone}{data.vendorEmail ? ` · ${data.vendorEmail}` : ''}</span>
          </div>
        )}
        {data.vendorPO && (
          <div className="review-item"><span className="k">PO / job ref</span><span className="v mono">{data.vendorPO}</span></div>
        )}
        <div className="review-item">
          <span className="k">Customer</span>
          <span className="v">{data.clientName || '—'}</span>
        </div>
        <div className="review-item">
          <span className="k">Customer contact</span>
          <span className="v mono">{data.clientPhone || '—'}{data.clientEmail ? ` · ${data.clientEmail}` : ''}</span>
        </div>
        <div className="review-item"><span className="k">Address</span><span className="v">{data.address || '—'}</span></div>
        <div className="review-item"><span className="k">Date received</span><span className="v mono">{formatDate(data.dateReceived) || '—'}</span></div>
        <div className="review-item"><span className="k">Completion req.</span><span className="v mono">{formatDate(data.completionRequested) || '—'}</span></div>
        <div className="review-item"><span className="k">Priority</span><span className="v">{labelForTimeframe(data.timeframe)}</span></div>
        <div className="review-item"><span className="k">Install needed</span><span className="v">{data.installNeeded || '—'}</span></div>
        <div className="review-item"><span className="k">Home type</span><span className="v">{data.homeType || '—'}</span></div>
        {data.accessNotes && (<div className="review-item"><span className="k">Access notes</span><span className="v">{data.accessNotes}</span></div>)}
      </div>

      <div className="card">
        <div className="card-head"><h3>Cabinets</h3><span className="eyebrow">{cabinets.length} total</span></div>
        {cabinets.map((c, i) => (
          <div key={c.id} style={{ borderTop: i > 0 ? '1px solid var(--rule)' : 'none', paddingTop: i > 0 ? 18 : 0, paddingBottom: 18 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 10 }}>
              <h3 style={{ fontFamily: 'var(--serif)' }}>Cabinet {String(i + 1).padStart(2, '0')}{c.name ? ` · ${c.name}` : ''}</h3>
              <span className="eyebrow">{c.cabType}</span>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: c.photo ? '180px 1fr' : '1fr', gap: 16 }}>
              {c.photo && (
                <div style={{ aspectRatio: '4/3', borderRadius: 6, overflow: 'hidden', background: 'var(--ink)', position: 'relative' }}>
                  <img src={c.photo} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }}/>
                  {(c.annotations || []).filter(a => a.type === 'pin').map(a => {
                    const p = a.points[0];
                    return (
                      <div key={a.id} style={{
                        position: 'absolute', left: `${p.x * 100}%`, top: `${p.y * 100}%`,
                        transform: 'translate(-50%, -50%)', width: 18, height: 18, borderRadius: '50%',
                        background: a.color, border: '2px solid white', color: 'white',
                        display: 'grid', placeItems: 'center', fontFamily: 'var(--mono)', fontSize: 9, fontWeight: 600,
                      }}>{a.data.num}</div>
                    );
                  })}
                </div>
              )}
              <div>
                <div className="review-item"><span className="k">Dimensions</span><span className="v mono">{c.w || '?'}{c.wu} W × {c.h || '?'}{c.hu} H × {c.d || '?'}{c.du} D</span></div>
                <div className="review-item"><span className="k">Components</span><span className="v mono">{c.doors || 0} doors · {c.drawers || 0} drawers · {c.shelves || 0} shelves</span></div>
                {(c.shelfW || c.shelfD) && (<div className="review-item"><span className="k">Shelf size</span><span className="v mono">{c.shelfW || '?'} × {c.shelfD || '?'} {c.shelfU}</span></div>)}
                <div className="review-item"><span className="k">Finished side</span><span className="v">{c.finishedSide === 'Yes' ? `Yes — ${c.finishedWhich || '?'}` : 'No'}</span></div>
                <div className="review-item"><span className="k">Box material</span><span className="v">{c.boxMaterial === 'Other' ? c.boxMaterialOther : (c.boxMaterial || '—')}{c.boxThickness ? ` · ${c.boxThickness}` : ''}</span></div>
                {c.notes && (<div className="review-item"><span className="k">Notes</span><span className="v">{c.notes}</span></div>)}
              </div>
            </div>
          </div>
        ))}
      </div>

      <div className="card">
        <div className="card-head"><h3>Toe kick</h3></div>
        <div className="review-item"><span className="k">Height</span><span className="v mono">{tk.height ? `${tk.height} ${tk.heightU || 'in'}` : '—'}</span></div>
        <div className="review-item"><span className="k">Depth</span><span className="v mono">{tk.depth ? `${tk.depth} ${tk.depthU || 'in'}` : '—'}</span></div>
        <div className="review-item"><span className="k">Setback from face</span><span className="v mono">{tk.setback ? `${tk.setback} ${tk.setbackU || 'in'}` : '—'}</span></div>
        <div className="review-item"><span className="k">Thickness</span><span className="v mono">{tk.thickness || '—'}</span></div>
        <div className="review-item"><span className="k">Total length</span><span className="v mono">{tk.linearFt ? `${tk.linearFt} lin. ft` : '—'}</span></div>
      </div>

      {data.specialInstructions && (
        <div className="card">
          <div className="card-head"><h3>Special instructions</h3></div>
          <p style={{ margin: 0, fontSize: 14, lineHeight: 1.6 }}>{data.specialInstructions}</p>
        </div>
      )}

      {/* Estimate breakdown */}
      <div className="card estimate-card">
        <div className="card-head">
          <h3>Auto-calculated estimate</h3>
          <span className="eyebrow">Based on admin rates</span>
        </div>
        {estimate.lineItems.length === 0 ? (
          <p style={{ color: 'var(--ink-faint)', margin: 0 }}>Add at least one cabinet to see a price.</p>
        ) : (
          <>
            <table className="estimate-table">
              <thead>
                <tr><th>Item</th><th>Detail</th><th className="num">Amount</th></tr>
              </thead>
              <tbody>
                {estimate.lineItems.map((li, i) => (
                  <tr key={i} className={'li-' + li.type}>
                    <td>{li.label}</td>
                    <td className="detail">{li.detail}</td>
                    <td className="num mono">{fmtMoney(li.amount)}</td>
                  </tr>
                ))}
              </tbody>
              <tfoot>
                {estimate.tax > 0 && (
                  <>
                    <tr><td colSpan="2">Subtotal</td><td className="num mono">{fmtMoney(estimate.subtotal - estimate.tax)}</td></tr>
                    <tr><td colSpan="2">Tax</td><td className="num mono">{fmtMoney(estimate.tax)}</td></tr>
                  </>
                )}
                <tr className="total-row"><td colSpan="2"><strong>Order total</strong></td><td className="num mono"><strong>{fmtMoney(estimate.total)}</strong></td></tr>
              </tfoot>
            </table>
          </>
        )}
      </div>
    </>
  );
}

function SubmittedStep({ data, estimate, onReset }) {
  estimate = estimate || { lineItems: [], subtotal: 0, tax: 0, total: 0 };
  const jobNum = React.useMemo(() => 'WO-' + String(Date.now()).slice(-6), []);
  const date = new Date().toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' });
  const cabinets = data.cabinets || [];
  const tk = data.toeKick || {};

  return (
    <>
      <div className="page-head no-print" style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between' }}>
        <div>
          <span className="eyebrow">Step 04 · Work Order</span>
          <h1>Ready to send</h1>
          <p>Print, email, or save the work order.</p>
        </div>
        <div style={{ display: 'flex', gap: 10 }}>
          <button className="btn secondary" onClick={() => window.print()}><Icon.Printer/> Print</button>
          <button className="btn secondary"><Icon.Mail/> Email</button>
          <button className="btn primary" onClick={onReset}>New intake</button>
        </div>
      </div>

      <div className="workorder">
        <div className="wo-head">
          <div>
            <div className="eyebrow">Cabinet Repair Work Order</div>
            <h1 style={{ marginTop: 4 }}>Precision Cabinets LLC</h1>
          </div>
          <div style={{ textAlign: 'right' }}>
            <div className="wo-num">{jobNum}</div>
            <div className="wo-num" style={{ marginTop: 4 }}>{date}</div>
          </div>
        </div>

        <div className="wo-row">
          <div className="wo-block">
            <h4>Vendor</h4>
            <p>
              <strong>{data.vendorName || '—'}</strong><br/>
              {data.vendorContact && <>{data.vendorContact}<br/></>}
              {data.vendorPhone && <span className="mono">{data.vendorPhone}<br/></span>}
              {data.vendorEmail && <>{data.vendorEmail}<br/></>}
              {data.vendorPO && <span className="mono" style={{ fontSize: 12, color: 'var(--ink-soft)' }}>PO: {data.vendorPO}</span>}
            </p>
          </div>
          <div className="wo-block">
            <h4>Customer</h4>
            <p>
              <strong>{data.clientName || '—'}</strong><br/>
              {data.clientPhone && <span className="mono">{data.clientPhone}<br/></span>}
              {data.clientEmail && <>{data.clientEmail}<br/></>}
            </p>
          </div>
        </div>

        <div className="wo-row">
          <div className="wo-block">
            <h4>Project site</h4>
            <p>{data.address || '—'}<br/>{data.homeType && <>{data.homeType}<br/></>}{data.accessNotes && <span style={{ fontSize: 12, color: 'var(--ink-soft)' }}>{data.accessNotes}</span>}</p>
          </div>
          <div className="wo-block">
            <h4>Schedule</h4>
            <p>
              <span style={{ fontSize: 11, color: 'var(--ink-faint)', fontFamily: 'var(--mono)' }}>RECEIVED</span><br/>
              <span className="mono">{formatDate(data.dateReceived) || '—'}</span><br/>
              <span style={{ fontSize: 11, color: 'var(--ink-faint)', fontFamily: 'var(--mono)' }}>COMPLETION REQUESTED</span><br/>
              <span className="mono">{formatDate(data.completionRequested) || '—'}</span><br/>
              Priority: {labelForTimeframe(data.timeframe)}
            </p>
          </div>
        </div>

        <div className="tape-rule"/>

        <h3 style={{ fontFamily: 'var(--serif)', marginBottom: 12 }}>Cabinets ({cabinets.length})</h3>
        {cabinets.map((c, i) => (
          <div key={c.id} className="wo-area">
            <h4>Cab {String(i + 1).padStart(2, '0')}{c.name ? ` — ${c.name}` : ''} <span style={{ fontWeight: 'normal', color: 'var(--ink-faint)', fontSize: 13 }}>({c.cabType})</span></h4>
            <table className="wo-table">
              <tbody>
                <tr><td>Dimensions</td><td className="num">{c.w}{c.wu} W × {c.h}{c.hu} H × {c.d}{c.du} D</td></tr>
                <tr><td>Doors / drawers / shelves</td><td className="num">{c.doors || 0} / {c.drawers || 0} / {c.shelves || 0}</td></tr>
                {(c.shelfW || c.shelfD) && (<tr><td>Shelf size</td><td className="num">{c.shelfW} × {c.shelfD} {c.shelfU}</td></tr>)}
                <tr><td>Finished side</td><td className="num">{c.finishedSide === 'Yes' ? `Yes — ${c.finishedWhich}` : 'No'}</td></tr>
                <tr><td>Box material</td><td className="num">{c.boxMaterial === 'Other' ? c.boxMaterialOther : c.boxMaterial}{c.boxThickness ? ` · ${c.boxThickness}` : ''}</td></tr>
              </tbody>
            </table>
            {c.notes && (<div style={{ marginTop: 8, fontSize: 12, color: 'var(--ink-soft)' }}><strong>Notes: </strong>{c.notes}</div>)}
          </div>
        ))}

        <div className="tape-rule"/>

        <h3 style={{ fontFamily: 'var(--serif)', marginBottom: 12 }}>Toe kick</h3>
        <table className="wo-table">
          <tbody>
            <tr><td>Height</td><td className="num">{tk.height ? `${tk.height} ${tk.heightU || 'in'}` : '—'}</td></tr>
            <tr><td>Depth</td><td className="num">{tk.depth ? `${tk.depth} ${tk.depthU || 'in'}` : '—'}</td></tr>
            <tr><td>Setback from face edge</td><td className="num">{tk.setback ? `${tk.setback} ${tk.setbackU || 'in'}` : '—'}</td></tr>
            <tr><td>Thickness</td><td className="num">{tk.thickness || '—'}</td></tr>
            <tr><td>Total linear length</td><td className="num">{tk.linearFt ? `${tk.linearFt} lin. ft` : '—'}</td></tr>
          </tbody>
        </table>

        {data.specialInstructions && (<><div className="tape-rule"/><h3 style={{ fontFamily: 'var(--serif)', marginBottom: 8 }}>Special instructions</h3><p style={{ fontSize: 13, lineHeight: 1.6 }}>{data.specialInstructions}</p></>)}

        <div className="tape-rule"/>
        <div style={{ background: 'var(--accent-soft)', border: '1px solid var(--accent)', borderRadius: 6, padding: 14, fontSize: 12 }}>
          <strong>Materials sent with this order:</strong> All face frames, at least one side panel (preferably finished side for color match), all drawers and slides with hardware.
        </div>

        {estimate.lineItems.length > 0 && (
          <>
            <div className="tape-rule"/>
            <h3 style={{ fontFamily: 'var(--serif)', marginBottom: 12 }}>Estimate</h3>
            <table className="wo-table estimate">
              <thead>
                <tr><th>Item</th><th>Detail</th><th className="num">Amount</th></tr>
              </thead>
              <tbody>
                {estimate.lineItems.map((li, i) => (
                  <tr key={i}>
                    <td>{li.label}</td>
                    <td style={{ color: 'var(--ink-soft)', fontSize: 12 }}>{li.detail}</td>
                    <td className="num">{fmtMoney(li.amount)}</td>
                  </tr>
                ))}
              </tbody>
              <tfoot>
                {estimate.tax > 0 && (
                  <>
                    <tr><td colSpan="2">Subtotal</td><td className="num">{fmtMoney(estimate.subtotal - estimate.tax)}</td></tr>
                    <tr><td colSpan="2">Tax</td><td className="num">{fmtMoney(estimate.tax)}</td></tr>
                  </>
                )}
                <tr className="total"><td colSpan="2"><strong>Order total</strong></td><td className="num"><strong>{fmtMoney(estimate.total)}</strong></td></tr>
              </tfoot>
            </table>
          </>
        )}
      </div>
    </>
  );
}

function labelForTimeframe(tf) {
  const map = { asap: 'ASAP', '2wk': 'Within 2 weeks', '1mo': 'Within 1 month', '3mo': 'Within 3 months', flex: 'Flexible' };
  return map[tf] || '—';
}

function formatDate(d) {
  if (!d) return '';
  try { return new Date(d + 'T00:00').toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' }); }
  catch { return d; }
}

Object.assign(window, { ReviewStep, SubmittedStep, labelForTimeframe, formatDate });