/* global React, ReactDOM, window */
const { useState: ehS, useRef: ehR, useEffect: ehE } = React;
const EHD = window.EH;

function EHComposer({ text, onText, onSend, onIntake, onBuildManual }) {
  const [files, setFiles] = ehS([]);
  const [drag, setDrag] = ehS(false);
  const [lib, setLib] = ehS(null); // null = closed, else initial tag filter
  const inputRef = ehR(null);
  const folderRef = ehR(null);
  function addFiles(list) {
    const imgs = Array.from(list || []).filter(f => f.type.startsWith("image/"));
    if (!imgs.length) return;
    setFiles(prev => [...prev, ...imgs.map((f, i) => ({ id: "f" + Date.now() + "-" + i, url: URL.createObjectURL(f), name: f.name }))]);
  }
  function addLib(items) {
    setFiles(prev => [...prev, ...items.filter(it => !prev.some(p => p.id === it.id))]);
    setLib(null);
  }
  function addSet(set) {
    const LIB = window.PRODUCT_LIBRARY;
    addLib(LIB.match(set.filter).map(p => ({ id: "lib-" + p.id, pid: p.id, url: LIB.url(p.id), name: p.name, price: p.price, tags: p.tags, source: "library" })));
  }
  const libCount = files.filter(f => f.source === "library").length;
  return (
    <div className={"eh-comp" + (drag ? " is-drag" : "")}
      onDragOver={e => { e.preventDefault(); if (!drag) setDrag(true); }}
      onDragLeave={e => { if (e.currentTarget === e.target) setDrag(false); }}
      onDrop={e => { e.preventDefault(); setDrag(false); addFiles(e.dataTransfer.files); }}>
      <input ref={inputRef} type="file" accept="image/*" multiple style={{ display: "none" }}
        onChange={e => { addFiles(e.target.files); e.target.value = ""; }} />
      <input ref={folderRef} type="file" webkitdirectory="" directory="" multiple style={{ display: "none" }}
        onChange={e => { addFiles(e.target.files); e.target.value = ""; }} />
      {lib && <window.ProductLibraryPanel initialFilter={lib.filter} attached={files.filter(f => f.pid).map(f => f.pid)} onClose={() => setLib(null)} onAdd={addLib} />}
      <textarea value={text} onChange={e => onText(e.target.value)} rows={3}
        placeholder="Describe the decision in front of you — e.g. which styles to take into a key account for next season…" />
      {libCount > 0 && (
        <div className="eh-comp__attn"><i className="ti ti-shirt"></i>{libCount} {libCount === 1 ? "product" : "products"} from your library</div>
      )}
      {files.length > 0 && (
        <div className="eh-comp__files">
          {files.map(f => (
            <div className={"eh-comp__file" + (f.source === "library" ? " is-lib" : "")} key={f.id} title={f.source === "library" ? f.name + " · " + f.tags.join(" · ") : f.name}>
              <img src={f.url} alt={f.name} />
              {f.source === "library" && <span className="plp-chipbadge"><i className="ti ti-tag"></i></span>}
              <button onClick={() => setFiles(prev => prev.filter(x => x.id !== f.id))} title="Remove"><i className="ti ti-x"></i></button>
            </div>
          ))}
        </div>
      )}
      {drag && <div className="eh-comp__dragmsg"><i className="ti ti-upload"></i>Drop product images to attach</div>}
      <div className="eh-comp__ft">
        <window.AttachMenu
          onUpload={() => inputRef.current && inputRef.current.click()}
          onFolder={() => folderRef.current && folderRef.current.click()}
          onLibrary={() => setLib({ filter: {} })}
          onSet={addSet} />
        {/* Submit Intake / Build manually sit here now, as siblings of the +
            button — same square icon-button shape (.eh-iconb), so all three
            read as one family of composer actions. Icon-only; data-tip draws
            the hover label (see .eh-comp__ft [data-tip] below). */}
        {onIntake && (
          <button className="eh-iconb" onClick={onIntake} data-tip="Submit Intake" aria-label="Submit Intake">
            <i className="ti ti-clipboard-text"></i>
          </button>
        )}
        <button className="eh-iconb" onClick={onBuildManual || (() => window.__goIntake && window.__goIntake())}
          data-tip="Build manually" aria-label="Build manually">
          <i className="ti ti-pencil"></i>
        </button>
        {/* The "Decision support · 2–3 days" pill used to sit here. It bundled a
            user constraint (when do I need this) with a system decision (twins,
            twins + shoppers, or a full panel), so choosing it meant choosing the
            answer before stating the question. Timeline, certainty and audience
            are now asked in MakerChat once the study exists — see
            explore-loading/il2-app.jsx. */}
        <button className="eh-send" disabled={!text} title="Start" onClick={() => onSend ? onSend(files) : (window.__goIntake && window.__goIntake())}><i className="ti ti-arrow-up"></i></button>
      </div>
    </div>
  );
}

function EHShell({ children, extra }) {
  return (
    <div className="eh-frame">
      <div className="eh-top">
        <span className="eh-top__logo"><img className="brand-mark" src="brand/tecovas-mark.png" alt="Tecovas" /></span>
        <span className="eh-top__brand">Platform</span>
        <span className="eh-top__sp"></span>
        <span className="eh-top__user">DL</span>
      </div>
      <div className="eh-body">
        <div className="eh-nav">
          {["home", "clipboard-list", "shirt", "books"].map((ic, i) => (
            <button key={ic} className={"eh-nav__b" + (i === 0 ? " on" : "")}><i className={"ti ti-" + ic}></i></button>
          ))}
        </div>
        <div className="eh-main"><div className="eh-col">{children}</div>{extra}</div>
      </div>
    </div>
  );
}

/* ---------- output-shape charts: form only, no values ---------- */
const EH_W = [92, 76, 63, 48, 34];
function EHViz({ kind }) {
  if (kind === "rank") return (
    <div className="v-rank">{EH_W.map((w, i) => (
      <div className="v-rank__r" key={i}><span className="v-rank__l"></span><span className="v-rank__tr"><i style={{ width: w + "%" }}></i></span></div>
    ))}</div>
  );
  if (kind === "heat") return (
    <div className="v-heat">{[.9,.55,.3,.7,.35,.8,.45,.2,.6,.9,.25,.5,.7,.3,.85,.4].map((o, i) => (
      <span key={i} style={{ opacity: o }}></span>
    ))}</div>
  );
  if (kind === "donut") return (
    <div className="v-donut"><span className="v-donut__r"></span><span className="v-donut__k"><i></i><i></i></span></div>
  );
  if (kind === "dumbbell") return (
    <div className="v-db">{[[14,62],[26,80],[8,44],[38,72]].map(([x1, x2], i) => (
      <div className="v-db__r" key={i}>
        <span className="v-db__ln" style={{ left: x1 + "%", right: (100 - x2) + "%" }}></span>
        <span className="v-db__d v-db__d--a" style={{ left: x1 + "%" }}></span>
        <span className="v-db__d v-db__d--b" style={{ left: x2 + "%" }}></span>
      </div>
    ))}</div>
  );
  if (kind === "stack") return (
    <div className="v-stack">{[[52,30,18],[41,24,35],[64,22,14],[30,26,44]].map((s, i) => (
      <div className="v-stack__r" key={i}>{s.map((w, j) => <span key={j} className={"v-stack__s s" + j} style={{ width: w + "%" }}></span>)}</div>
    ))}</div>
  );
  if (kind === "dots") return (
    <div className="v-dots">
      <span className="v-dots__ax"></span><span className="v-dots__ay"></span>
      {[[72,22,7],[58,34,5],[40,52,6],[30,70,4],[62,60,5],[18,44,4],[80,44,6]].map(([l, t, s], i) => (
        <span key={i} className={"v-dots__d" + (i === 0 ? " on" : "")} style={{ left: l + "%", top: t + "%", width: s, height: s }}></span>
      ))}
    </div>
  );
  if (kind === "line") return (
    <svg className="v-line" viewBox="0 0 120 46" preserveAspectRatio="none">
      <polyline points="4,38 26,30 48,24 70,14 92,11 114,8" fill="none" stroke="var(--chart-purple)" strokeWidth="2" strokeLinejoin="round" />
      <polyline points="4,42 26,38 48,33 70,30 92,26 114,25" fill="none" stroke="#a5cf8e" strokeWidth="2" strokeLinejoin="round" />
      {[[4,38],[26,30],[48,24],[70,14],[92,11],[114,8]].map(([x, y], i) => <circle key={i} cx={x} cy={y} r="2.2" fill="var(--chart-purple)" />)}
    </svg>
  );
  if (kind === "range") return (
    <div className="v-range">{[[0,26,58,58],[0,20,50,50],[0,42,66,80],[0,10,34,44]].map(([lead0,barS,barE,trailE], i) => (
      <div className="v-range__r" key={i}>
        {barS > lead0 && <span className="v-range__ln" style={{ left: lead0 + "%", width: (barS - lead0) + "%" }}></span>}
        <span className="v-range__b" style={{ left: barS + "%", width: (barE - barS) + "%" }}></span>
        {trailE > barE && <span className="v-range__ln" style={{ left: barE + "%", width: (trailE - barE) + "%" }}></span>}
      </div>
    ))}</div>
  );
  if (kind === "segbar") return (
    <div className="v-segbar">{[[76,94,"a"],[58,84,"b"],[26,42,"c"]].map(([w,trail,c], i) => (
      <div className="v-segbar__r" key={i}>
        <span className={"v-segbar__b v-segbar__b--" + c} style={{ width: w + "%" }}></span>
        {trail > w && <span className={"v-segbar__ln v-segbar__ln--" + c} style={{ left: w + "%", width: (trail - w) + "%" }}></span>}
      </div>
    ))}</div>
  );
  if (kind === "choice") return (
    <div className="v-choice">{[0,1].map(i => (
      <div className="v-choice__row" key={i}>
        <span className="v-choice__img"></span>
        <span className="v-choice__lines"><span className="v-choice__l1"></span><span className="v-choice__l2"></span></span>
        <span className="v-choice__cta"></span>
      </div>
    ))}</div>
  );
  if (kind === "venn") return (
    <div className="v-venn"><span className="v-venn__c a"></span><span className="v-venn__c b"></span></div>
  );
  if (kind === "reach") return (
    <div className="v-reach">
      <div className="v-reach__plot">{[[39,39],[57,18],[64,7],[69,5],[74,4],[77,3]].map(([cum, inc], i) => (
        <div className="v-reach__col" key={i}>
          <span className="v-reach__gray" style={{ height: cum * .52 + "px" }}></span>
          <span className="v-reach__purple" style={{ bottom: (cum - inc) * .52 + "px", height: Math.max(3, inc * .52) + "px" }}></span>
        </div>
      ))}</div>
    </div>
  );
  if (kind === "markets") return (
    <div className="v-markets">{[["\uD83C\uDDFA\uD83C\uDDF8","United States"],["\uD83C\uDDEC\uD83C\uDDE7","United Kingdom"],["\uD83C\uDDE8\uD83C\uDDF3","China"]].map(([flag, name], i) => (
      <div className="v-markets__r" key={i}>
        <span className="v-markets__tag"><i className="v-markets__flag">{flag}</i></span>
        <span className="v-markets__chips">{["g", "g", "n", "n", "y", "y", "g", "n", "y"].map((c, j) => <i key={j} className={"v-markets__c v-markets__c--" + (i === 1 && j === 1 ? "y" : i === 2 && j === 0 ? "n" : c)}></i>)}</span>
      </div>
    ))}</div>
  );
  if (kind === "verdicts") return (
    <div className="v-verdicts">{[["g",1],["y",2],["y",1]].map(([c, imgs], i) => (
      <div className="v-verdicts__card" key={i}>
        <span className={"v-verdicts__dot v-verdicts__dot--" + c}></span>
        <span className="v-verdicts__ln"></span>
        <span className="v-verdicts__imgs">{Array.from({ length: imgs }).map((_, j) => <i key={j}></i>)}</span>
      </div>
    ))}</div>
  );
  if (kind === "insightbars") return (
    <div className="v-ibars">
      <span className="v-ibars__box">
        <i className="v-ibars__dot"></i>
        {[92,74,84].map((w, i) => <i key={i} className="v-ibars__ln" style={{ width: w + "%" }}></i>)}
      </span>
      <span className="v-ibars__bars">{[82,74,72,50].map((w, i) => (
        <i key={i}><em style={{ width: w + "%" }}></em></i>
      ))}</span>
    </div>
  );
  if (kind === "deepdive") return (
    <div className="v-deepdive">
      <div className="v-deepdive__top">
        <span className="v-deepdive__img"><i className="v-deepdive__badge"></i></span>
        <span className="v-deepdive__ins">{[92,74,84,62].map((w, i) => (
          <i key={i}><em></em><b style={{ width: w + "%" }}></b></i>
        ))}</span>
      </div>
      <div className="v-deepdive__cols">
        {[[82,74,72,50],[80,55,38,22]].map((set, k) => (
          <span className="v-deepdive__bars" key={k}>{set.map((w, i) => (
            <i key={i}><em style={{ width: w + "%" }}></em></i>
          ))}</span>
        ))}
      </div>
    </div>
  );
  return null;
}

function EHPage({ k, t, kind }) {
  return (
    <div className="eh-pg">
      <div className="eh-pg__k">{k}</div>
      <div className="eh-pg__t">{t}</div>
      <div className="eh-pg__g"><EHViz kind={kind} /></div>
    </div>
  );
}

function EHHome({ bare, onStart, onBuildManual }) {
  const [sel, setSel] = ehS(null);
  /* "Submit Intake" is a second on-ramp, not a second flow: the modal collects
     the intake, then leaves by the same door the composer uses — onStart, which
     routes home → designing → intake. */
  const [intake, setIntake] = ehS(false);
  const [hover, setHover] = ehS(null);
  const hoverT = ehR(null);
  const holdHover = (id) => { if (hoverT.current) clearTimeout(hoverT.current); setHover(id); };
  const dropHover = () => { if (hoverT.current) clearTimeout(hoverT.current); hoverT.current = setTimeout(() => setHover(null), 140); };
  const [text, setText] = ehS("");
  const activeId = hover || sel;
  const m = EHD.moments.find(x => x.id === activeId);
  const pick = (x) => {
    const on = sel === x.id;
    setSel(on ? null : x.id);
    setText(on ? "" : x.brief);
  };
  const body = (
    <React.Fragment>
      <div className="eh-hi">Good morning, Dan</div>
      <div className="eh-h">What do you want to learn?</div>
      <EHComposer text={text} onText={setText} onSend={onStart ? (files) => onStart({ brief: text, moment: sel, files }) : null}
        onIntake={() => setIntake(true)} onBuildManual={onBuildManual} />
      <div className="eh-lab-row">
        <div className="eh-lab eh-lab--row">OR CHOOSE FROM YOUR CALENDAR MOMENT</div>
      </div>
      <div className="eh-timeline">
        <div className="eh-timeline__track"></div>
        {EHD.moments.map(x => (
          <button key={x.id} className={"eh-tl-item" + (sel === x.id ? " on" : "")}
            onMouseEnter={() => holdHover(x.id)} onMouseLeave={dropHover} onClick={() => pick(x)}>
            <span className="eh-tl-node"><i className={"ti ti-" + x.icon}></i></span>
            <span className="eh-tl-label">{x.title}</span>
          </button>
        ))}
      </div>
      {m && (
        <div className="eh-p" onMouseEnter={() => holdHover(activeId)} onMouseLeave={dropHover}>
          <div className="eh-p__hd">
            <div className="eh-p__t">{m.title}</div>
            <div className="eh-p__def">{m.def}</div>
          </div>
          <div className="eh-p__k">OUTPUT EXAMPLE</div>
          <div className="eh-pages">
            {m.pages.map(([k, t, kind], i) => <EHPage key={i} k={k} t={t} kind={kind} />)}
          </div>
          <div className="eh-p__hr"></div>
          <div className="eh-sub">{m.qLabel || "DECISION EXAMPLES"}</div>
          <div className="eh-q">
            {m.decisions.map((d, i) => (
              <div className="eh-q__r" key={i}><i className="ti ti-check eh-q__i"></i><span className="eh-q__t">{d}</span></div>
            ))}
          </div>
        </div>
      )}
      {intake && window.EHIntakeModal && (
        <window.EHIntakeModal
          onClose={() => setIntake(false)}
          onSubmit={({ brief, moment, tier }) => {
            setIntake(false);
            if (onStart) onStart({ brief, moment: moment || sel, files: [], tier });
            else if (window.__goIntake) window.__goIntake();
          }} />
      )}
    </React.Fragment>
  );
  return bare
    ? <div className="eh-main"><div className="eh-col">{body}</div></div>
    : <EHShell>{body}</EHShell>;
}

/* ================= stage ================= */
const EH_TWEAKS = /*EDITMODE-BEGIN*/{
  "zoom": 100
}/*EDITMODE-END*/;

function EHApp() {
  const [tweaks, setTweak] = window.useTweaks(EH_TWEAKS);
  const ref = ehR(null);
  const [fit, setFit] = ehS(1);
  ehE(() => {
    const f = () => { if (ref.current) setFit(Math.min(1, (ref.current.clientWidth - 40) / 1360, (ref.current.clientHeight - 40) / 860)); };
    f(); window.addEventListener("resize", f);
    return () => window.removeEventListener("resize", f);
  }, []);
  const s = fit * (tweaks.zoom / 100);
  return (
    <React.Fragment>
      <div className="eh-stage">
        <div className="eh-bar">
          <span className="eh-bar__t">Home — output example on the right</span>
          <div className="eh-bar__sp"></div>
          <label>Zoom<input type="range" min="60" max="140" step="4" value={tweaks.zoom} onChange={e => setTweak("zoom", +e.target.value)} /><span style={{ width: 34, color: "#fff" }}>{tweaks.zoom}%</span></label>
        </div>
        <div className="eh-scroll" ref={ref}>
          <div style={{ width: 1360 * s, height: 860 * s, margin: "0 auto" }}>
            <div className="eh-art__vp" style={{ width: 1360 * s, height: 860 * s }}>
              <div className="eh-art__inner" style={{ transform: `scale(${s})`, width: 1360, height: 860 }}><EHHome /></div>
            </div>
          </div>
        </div>
      </div>
      <window.TweaksPanel title="Home">
        <window.TweakSection label="View" />
        <window.TweakSlider label="Zoom" value={tweaks.zoom} min={60} max={140} step={4} unit="%" onChange={v => setTweak("zoom", v)} />
      </window.TweaksPanel>
    </React.Fragment>
  );
}

Object.assign(window, { EHHome });
if (!window.__COMBINED) ReactDOM.createRoot(document.getElementById("root")).render(<EHApp />);