/* Custex editor — tech pack modal. */
const { useState: uS, useRef: uR, useEffect: uE, useMemo: uM } = React;
const { NODE_W, PORT_FIRST, PORT_STRIDE } = window.CxGeom;

function nearestShop(craftId) {
  return ({ embroidery:'Hackney Stitch House · 9.1km', printing:'Hackney Stitch House · 9.1km',
           weaving:'Camden Loom Co. · 4.2km', knitting:'Camden Loom Co. · 4.2km',
           tufting:'Bankside Tuft Studio · 6.8km' })[craftId] || 'Camden Loom Co. · 4.2km';
}
function CxTechpackModal({ onClose, graph, product, craft, material, yarns, motif, totalPrice, priceQuote, validation, theme }) {
  const CxPB = typeof window !== 'undefined' ? window.CxPriceBreakdown : null;
  const params = graph.nodes.craft.data.params || {};
  const blocked = validation.some((v) => v.level === 'error');
  const motifIds = graph.nodes.motif?.data?.motifIds && graph.nodes.motif.data.motifIds.length
    ? graph.nodes.motif.data.motifIds
    : [graph.nodes.motif?.data?.motifId].filter(Boolean);
  const motifLabel = motifIds
    .map((id) => window.CxSchema.MOTIFS.find((m) => m.id === id)?.name)
    .filter(Boolean)
    .join(' + ');
  const customSize = graph.nodes.product?.data?.customSize;
  const sizeText = customSize
    ? `${customSize.w} × ${customSize.h} ${customSize.unit}`
    : (product?.sizeNote || '—');
  return (
    <div className="cx-modal" onClick={onClose}>
      <div className="cx-modal-card" onClick={e => e.stopPropagation()}>
        <button className="cx-modal-x" onClick={onClose}>✕</button>
        <div className="cx-tp-head">
          <span className="cx-tp-eyebrow">Tech-pack · TP-2026-0427</span>
          <h2 className="cx-tp-title">{product?.name} <i>in</i> {material?.name || (yarns[0]?.name || '—')}</h2>
          <div className="cx-tp-sub">{blocked ? 'Resolve issues before sending to factory' : `Ready for factory pick-up — ${nearestShop(craft?.id)} · est. 7 days`}</div>
        </div>
        <div className="cx-tp-grid">
          <section>
            <div className="cx-tp-k">PRODUCT</div>
            <div className="cx-tp-v">{product?.name}</div>
            <div className="cx-tp-m">{sizeText}</div>
          </section>
          {material && (
            <section>
              <div className="cx-tp-k">MATERIAL</div>
              <div className="cx-tp-v">{material.name}</div>
              <div className="cx-tp-m">{material.gsm}gsm · {material.hand}</div>
            </section>
          )}
          {yarns.length > 0 && (
            <section>
              <div className="cx-tp-k">YARN</div>
              <div className="cx-tp-v">{yarns.map(y => y.name).join(' + ')}</div>
              <div className="cx-tp-m">{yarns.map(y => y.spin).join(' · ')}</div>
            </section>
          )}
          <section>
            <div className="cx-tp-k">CRAFT</div>
            <div className="cx-tp-v">{craft?.label}</div>
            <div className="cx-tp-m">{Object.entries(params).map(([k,v]) => `${k}: ${v}`).join(' · ')}</div>
          </section>
          <section>
            <div className="cx-tp-k">MOTIF</div>
            <div className="cx-tp-v">{motifLabel || motif?.name}</div>
            <div className="cx-tp-m">{graph.nodes.motif?.data.prompt}</div>
          </section>
          {graph.nodes.airender && !graph.nodes.airender.hidden && (
            <section>
              <div className="cx-tp-k">AI RENDER</div>
              <div className="cx-tp-v">{(graph.nodes.airender.data?.renderPrompt || '').trim() || '—'}</div>
              <div className="cx-tp-m">
                {graph.nodes.airender.data?.refImageName
                  ? `Ref: ${graph.nodes.airender.data.refImageName}`
                  : 'Photoreal mockup from layout + brief'}
              </div>
            </section>
          )}
        </div>
        {validation.some((v) => v.level === 'error') && (
          <div className="cx-tp-issues">
            <div className="cx-tp-k">RESOLVE</div>
            {validation.filter((v) => v.level === 'error').map((v, i) => (
              <div key={i} className="cx-tp-issue">! {v.msg}</div>
            ))}
          </div>
        )}
        <div className="cx-tp-files">
          <div className="cx-tp-k">EXPORT BUNDLE</div>
          <ul>
            <li><span>tech-pack.pdf</span><em>312 KB</em></li>
            <li><span>artwork.svg</span><em>54 KB</em></li>
            <li><span>colorway.ase</span><em>2 KB</em></li>
            <li><span>{craft?.id === 'embroidery' ? 'stitch.dst' : craft?.id === 'tufting' ? 'tuft.path' : craft?.inputKind === 'yarn' ? 'jacquard.wif' : 'machine.cnc.json'}</span><em>18 KB</em></li>
            <li><span>cut-pattern.dxf</span><em>96 KB</em></li>
            {graph.nodes.airender && !graph.nodes.airender.hidden && (
              <li><span>ai-mockup.png</span><em>on render</em></li>
            )}
          </ul>
        </div>
        <div className="cx-tp-foot">
          {priceQuote && CxPB ? (
            <div className="cx-tp-breakdown">
              <CxPB quote={priceQuote} validation={validation} />
            </div>
          ) : null}
          <div className="cx-tp-price">
            <span>Estimated total</span>
            <strong>£{totalPrice.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</strong>
          </div>
          <div className="cx-tp-actions">
            <button className="cx-btn-ghost" onClick={onClose}>Back to graph</button>
            <button className="cx-btn-primary" disabled={blocked}>{blocked ? 'Blocked' : 'Confirm · Send to factory →'}</button>
          </div>
        </div>
      </div>
    </div>
  );
}

window.CxTechpackPanel = { CxTechpackModal };

/** Must run after all editor JSX modules (Babel); do not use a sync .js registry earlier in HTML. */
window.CxComponents = {
  CxTopbar: window.CxChrome?.CxTopbar,
  CxSidebar: window.CxChrome?.CxSidebar,
  CxNode: window.CxNodeUi?.CxNode,
  CxPreview: window.CxPreviewPanel?.CxPreview,
  CxTechpackModal: window.CxTechpackPanel?.CxTechpackModal,
  CxHint: window.CxChrome?.CxHint,
  CxWireTools: window.CxChrome?.CxWireTools,
  CxMinimap: window.CxChrome?.CxMinimap,
  CxZoomCtrl: window.CxChrome?.CxZoomCtrl,
  CxStudioAiChat: window.CxStudioAiChatPanel?.CxStudioAiChat,
  CxCanvasGrid: window.CxChrome?.CxCanvasGrid,
  CxFabricTag: window.CxChrome?.CxFabricTag,
  CxMoodboard: window.CxChrome?.CxMoodboard,
  CxValidation: window.CxChrome?.CxValidation,
};