// Shell: topbar, rail, ticker, tweaks, app orchestration

const { useState: sS, useEffect: sE, useRef: sR } = React;

function Topbar({ current }) {
  const clock = useClock();
  const uptime = useRef(Date.now());
  const [_, force] = sS(0);
  sE(() => {
    const t = setInterval(() => force(x => x + 1), 1000);
    return () => clearInterval(t);
  }, []);
  const upMs = Date.now() - uptime.current;
  const ups = Math.floor(upMs / 1000);
  const ut = `${pad(Math.floor(ups/3600))}:${pad(Math.floor(ups/60)%60)}:${pad(ups%60)}`;
  return (
    <div className="topbar">
      <div className="tb-left">
        <span className="brand">MOTAWEA.SYS</span>
        <span>v4.0 · build 2026.04</span>
        <span><span className="dot"/> runtime active</span>
      </div>
      <div className="tb-right">
        <span>screen: {current.toUpperCase()}</span>
        <span>uptime: {ut}</span>
        <span>{clock.toUTCString().slice(17,25)} UTC</span>
      </div>
    </div>
  );
}

function Rail({ current, onNav }) {
  return (
    <aside className="rail">
      <div className="rail-id">
        <div className="avatar"><img src="images/main_photo.jpg" alt="Mohammed Motawea"/></div>
        <h1>Mohammed Motawea</h1>
        <span className="tag">UNITY · PRO</span>
      </div>
      <ul className="rail-nav">
        {NAV.map(n => (
          <li key={n.id}>
            <button
              className={current === n.id ? "active" : ""}
              onClick={() => onNav(n.id)}
            >
              <span className="glyph">{n.glyph}</span>
              <span>{n.label}</span>
              <span className="num">{n.num}</span>
            </button>
          </li>
        ))}
      </ul>
      <div className="rail-foot">
        <div className="rf-row"><span>LAT</span><em>25.20°N</em></div>
        <div className="rf-row"><span>LON</span><em>55.27°E</em></div>
        <div className="rf-row"><span>UTC</span><em>+04:00</em></div>
        <div className="social-row">
          {SOCIALS.map(s => (
            <a key={s.k} href={s.url} title={s.title} target="_blank" rel="noreferrer">{s.k}</a>
          ))}
        </div>
      </div>
    </aside>
  );
}

function Ticker() {
  const items = [
    "◈ Lead Unity Engineer @ Visionaries",
    "◉ Unity Certified Professional Programmer",
    "▸ Steam release · 85% positive",
    "▸ 600+ NPCs · 25→60 FPS",
    "▸ 2TB Addressables in <1GB install",
    "✉ motawea@visionaries.me",
    "◐ Open to opportunities",
    "▸ Dubai · Tokyo · California · Cairo",
  ];
  const track = [...items, ...items, ...items].map((s, i) => (
    <span key={i}>{s.split(" ").map((w, j) =>
      w.startsWith("◈") || w.startsWith("◉") || w.startsWith("▸") || w.startsWith("✉") || w.startsWith("◐")
        ? <em key={j}>{w} </em>
        : <span key={j}>{w} </span>
    )}</span>
  ));
  return (
    <div className="ticker">
      <div className="ticker-track">{track}</div>
    </div>
  );
}

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "redIntensity": 60,
  "font": "display",
  "cursorFx": true,
  "density": "normal"
}/*EDITMODE-END*/;

function Tweaks({ open, onClose, state, setState }) {
  return (
    <div className={`tweaks ${open ? "open" : ""}`}>
      <h4>
        <span>▸ TWEAKS</span>
        <button onClick={onClose} style={{background:"none", border:"none", color:"var(--ink-ghost)", cursor:"pointer", fontFamily:"var(--mono)"}}>[×]</button>
      </h4>

      <div className="t-row">
        <label>
          <span>Red Intensity</span>
          <span className="val">{state.redIntensity}%</span>
        </label>
        <input
          type="range"
          min="0" max="100" step="5"
          value={state.redIntensity}
          onChange={e => setState(s => ({ ...s, redIntensity: +e.target.value }))}
        />
      </div>

      <div className="t-row">
        <label><span>Font Family</span></label>
        <div className="seg">
          {[
            { k: "display", l: "Display" },
            { k: "mono", l: "Mono" },
            { k: "editorial", l: "Editorial" },
          ].map(o => (
            <button key={o.k}
              className={state.font === o.k ? "active" : ""}
              onClick={() => setState(s => ({ ...s, font: o.k }))}
            >{o.l}</button>
          ))}
        </div>
      </div>

      <div className="t-row">
        <label><span>Cursor FX</span><span className="val">{state.cursorFx ? "ON" : "OFF"}</span></label>
        <div className="seg">
          <button className={state.cursorFx ? "active" : ""} onClick={() => setState(s => ({ ...s, cursorFx: true }))}>On</button>
          <button className={!state.cursorFx ? "active" : ""} onClick={() => setState(s => ({ ...s, cursorFx: false }))}>Off</button>
        </div>
      </div>

      <div className="t-row">
        <label><span>Layout Density</span></label>
        <div className="seg">
          {[
            { k: "compact", l: "Compact" },
            { k: "normal", l: "Normal" },
            { k: "roomy", l: "Roomy" },
          ].map(o => (
            <button key={o.k}
              className={state.density === o.k ? "active" : ""}
              onClick={() => setState(s => ({ ...s, density: o.k }))}
            >{o.l}</button>
          ))}
        </div>
      </div>

      <div style={{marginTop: 16, fontFamily:"var(--mono)", fontSize: 9, color:"var(--ink-ghost)", letterSpacing:"0.15em", textTransform:"uppercase", borderTop:"1px dashed var(--line)", paddingTop:12}}>
        ▸ press T to toggle panel
      </div>
    </div>
  );
}

function App() {
  const [current, setCurrent] = sS(() => localStorage.getItem("mw_screen") || "home");
  const [tState, setTState] = sS(() => {
    try {
      const saved = JSON.parse(localStorage.getItem("mw_tweaks")) || {};
      return { ...TWEAK_DEFAULTS, ...saved, redIntensity: 60 };
    }
    catch { return TWEAK_DEFAULTS; }
  });
  const [tOpen, setTOpen] = sS(false);
  const [editMode, setEditMode] = sS(false);

  // persist
  sE(() => { localStorage.setItem("mw_screen", current); }, [current]);
  sE(() => { localStorage.setItem("mw_tweaks", JSON.stringify(tState)); }, [tState]);

  // apply tweaks to document
  sE(() => {
    document.documentElement.style.setProperty("--red-intensity", tState.redIntensity / 100);
    document.documentElement.dataset.font = tState.font;
    document.documentElement.dataset.density = tState.density;
    if (window.ParticleField) {
      window.ParticleField.setEnabled(tState.cursorFx);
      window.ParticleField.setRed(tState.redIntensity / 100);
    }
  }, [tState]);

  // edit-mode bridge
  sE(() => {
    function onMsg(e) {
      const d = e.data;
      if (!d || typeof d !== "object") return;
      if (d.type === "__activate_edit_mode") { setEditMode(true); setTOpen(true); }
      if (d.type === "__deactivate_edit_mode") { setEditMode(false); setTOpen(false); }
    }
    window.addEventListener("message", onMsg);
    // small delay then announce
    const t = setTimeout(() => {
      window.parent.postMessage({ type: "__edit_mode_available" }, "*");
    }, 80);
    return () => { window.removeEventListener("message", onMsg); clearTimeout(t); };
  }, []);

  // persist to host on change (EDITMODE block)
  sE(() => {
    if (!editMode) return;
    window.parent.postMessage({ type: "__edit_mode_set_keys", edits: tState }, "*");
  }, [tState, editMode]);

  // keyboard nav
  sE(() => {
    function onKey(e) {
      if (e.target.tagName === "INPUT" || e.target.tagName === "TEXTAREA") return;
      const map = { "1": "home", "2": "about", "3": "resume", "4": "portfolio", "5": "contact" };
      if (map[e.key]) { setCurrent(map[e.key]); glitchBurst(); }
      if (e.key.toLowerCase() === "t") setTOpen(o => !o);
    }
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, []);

  function nav(id) { setCurrent(id); glitchBurst(); }

  return (
    <div className="app">
      <Topbar current={current}/>
      <Rail current={current} onNav={nav}/>
      <main className="main">
        <div className={`screen ${current === "home" ? "active" : ""}`}><HomeScreen onNav={nav}/></div>
        <div className={`screen ${current === "about" ? "active" : ""}`}><AboutScreen/></div>
        <div className={`screen ${current === "resume" ? "active" : ""}`}><ResumeScreen/></div>
        <div className={`screen ${current === "portfolio" ? "active" : ""}`}><PortfolioScreen/></div>
        <div className={`screen ${current === "contact" ? "active" : ""}`}><ContactScreen/></div>
      </main>
      <Ticker/>

      {editMode && (
        <button
          className={`tweaks-toggle visible ${tOpen ? "active" : ""}`}
          onClick={() => setTOpen(o => !o)}
          title="Tweaks (T)"
        >T</button>
      )}
      <Tweaks open={tOpen} onClose={() => setTOpen(false)} state={tState} setState={setTState}/>
    </div>
  );
}

function glitchBurst() {
  const root = document.querySelector(".main");
  if (!root) return;
  root.classList.remove("glitch-burst");
  // force reflow
  void root.offsetWidth;
  root.classList.add("glitch-burst");
}

// Random periodic glitch burst on hero title
setInterval(() => {
  const els = document.querySelectorAll(".home-hero .glitch");
  els.forEach(el => {
    if (Math.random() < 0.3) {
      el.classList.add("force-glitch");
      setTimeout(() => el.classList.remove("force-glitch"), 220);
    }
  });
}, 3500);

ReactDOM.createRoot(document.getElementById("root")).render(<App/>);