// iConference KI-Framework — components + app. Uses window.FW, window.POS.
const { useState, useEffect } = React;

function icInitialLang(def) {
  try {
    const u = new URLSearchParams(location.search).get("lang");
    if (u === "de" || u === "en") return u;
  } catch (e) {}
  return def || "de";
}

function Graph({ t, sel, setSel }) {
  return (
    <div className="graph">
      <svg className="links" preserveAspectRatio="none">
        {window.POS.map((p, i) => (
          <line key={i} className={"ln" + (sel === i ? " hot" : "")}
            x1="50%" y1="50%" x2={p.left} y2={p.top} />
        ))}
      </svg>
      <div className="ghub"><b>RAG</b><span>{t.hubSub}</span></div>
      {t.nodes.map((nd, i) => (
        <div key={nd.id} className={"gnode" + (sel === i ? " sel" : "")}
          style={window.POS[i]} onClick={() => setSel(i)}>
          <div className="chip" style={sel === i ? {} : { borderColor: "rgba(255,255,255,.16)" }}>
            <i data-lucide={nd.icon} style={{ color: sel === i ? "#fff" : nd.color }}></i>
          </div>
          <div className="lab">{nd.lab}</div>
        </div>
      ))}
    </div>
  );
}

function Detail({ nd, t }) {
  return (
    <aside className="detail">
      <div className="deyebrow">{t.intro.eyebrow}</div>
      <h1 className="dh1">{t.intro.h}</h1>
      <p className="dintro-p">{t.intro.p}</p>
      <div className="ddiv"></div>
      <div className="dnode" key={nd.id}>
        <div className="dico" style={{ background: nd.color }}><i data-lucide={nd.icon}></i></div>
        <h2>{nd.lab}</h2>
        <p className="dlead">{nd.lead}</p>
        <ul className="dlist">
          {nd.points.map((p) => <li key={p}><i data-lucide="check"></i>{p}</li>)}
        </ul>
        <div className="dtags">{nd.tags.map((tg) => <span className="dtag" key={tg}>{tg}</span>)}</div>
      </div>
    </aside>
  );
}

function App() {
  const [lang, setLang] = useState(() => icInitialLang("de"));
  const [sel, setSel] = useState(0);
  const t = window.FW[lang];
  useEffect(() => { if (window.lucide) window.lucide.createIcons(); });
  useEffect(() => { document.documentElement.lang = lang; }, [lang]);

  return (
    <div className="page">
      <div className="fbar">
        <img src="../assets/iconference-logo-white.png" alt="iConference" />
        <div className="divider"></div>
        <div className="ttl">{t.barTitle.split(" ").slice(0, -1).join(" ")} <span>{t.barTitle.split(" ").slice(-1)}</span></div>
        <div className="right">
          <a className="back" href={"../index.html?lang=" + lang}><i data-lucide="arrow-left"></i>{t.back}</a>
          <div className="lang">
            <button className={lang === "de" ? "on" : ""} onClick={() => setLang("de")}>DE</button>
            <button className={lang === "en" ? "on" : ""} onClick={() => setLang("en")}>EN</button>
          </div>
        </div>
      </div>
      <div className="fbody">
        <Graph t={t} sel={sel} setSel={setSel} />
        <Detail nd={t.nodes[sel]} t={t} />
      </div>
    </div>
  );
}
ReactDOM.createRoot(document.getElementById("root")).render(<App />);