// GraphScreen.jsx — SVG force-directed graph (static layout)

const NODES = [
  { id:"newton2", x: 140, y: 160, label:"F = ma",         mastery: 1.0, tint:"ok" },
  { id:"work",    x: 260, y: 120, label:"Work",            mastery: 0.9, tint:"ok" },
  { id:"ke",      x: 400, y: 180, label:"Kinetic Energy",  mastery: 0.7, tint:"blurry" },
  { id:"wetheorem", x: 540, y: 120, label:"Work–Energy",  mastery: 0.5, tint:"blurry" },
  { id:"firstlaw", x: 680, y: 220, label:"1st Law",        mastery: 0.2, tint:"frontier" },
  { id:"enthalpy", x: 820, y: 140, label:"Enthalpy dH",    mastery: 0.0, tint:"blank" },
  { id:"pv",      x: 540, y: 280, label:"PV Work",         mastery: 0.6, tint:"blurry" },
  { id:"dqdu",    x: 400, y: 340, label:"dQ, dU",          mastery: 0.8, tint:"ok" },
];

const EDGES = [
  ["newton2","work"], ["work","ke"], ["ke","wetheorem"],
  ["wetheorem","firstlaw"], ["pv","firstlaw"], ["firstlaw","enthalpy"],
  ["dqdu","firstlaw"], ["dqdu","pv"], ["work","pv"],
];

const COLOR = {
  ok: "rgb(97,197,84)",
  blurry: "rgb(245,191,79)",
  blank: "rgb(177,177,177)",
  frontier: "rgb(151,71,255)",
};

function GraphScreen() {
  const byId = Object.fromEntries(NODES.map(n => [n.id, n]));
  const [selected, setSelected] = React.useState("firstlaw");
  const sel = byId[selected];
  React.useEffect(() => {
    window.API?.getGraph().then(d => console.log("graph:", d?.nodes?.length, "nodes"));
  }, []);
  return (
    <section className="graph">
      <div className="graph-topbar">
        <div className="eyebrow">PHYSICS 43 · knowledge graph</div>
        <div className="graph-legend">
          <span><span className="lg-dot" style={{background: COLOR.ok}}/>Crisp</span>
          <span><span className="lg-dot" style={{background: COLOR.blurry}}/>Blurry</span>
          <span><span className="lg-dot" style={{background: COLOR.blank}}/>Blank</span>
          <span><span className="lg-dot" style={{borderColor: COLOR.frontier, borderStyle:"dashed", borderWidth:"1px", background:"transparent"}}/>Frontier</span>
        </div>
      </div>
      <div className="graph-body">
        <svg className="graph-svg" viewBox="0 0 960 420">
          {EDGES.map(([a,b], i) => {
            const na = byId[a], nb = byId[b];
            const frontier = na.tint === "frontier" || nb.tint === "frontier";
            return (
              <line key={i} x1={na.x} y1={na.y} x2={nb.x} y2={nb.y}
                stroke={frontier ? COLOR.frontier : "rgba(173,89,5,0.3)"}
                strokeDasharray={frontier ? "4 4" : "0"}
                strokeWidth="1.2"/>
            );
          })}
          {NODES.map(n => (
            <g key={n.id} onClick={() => setSelected(n.id)} style={{cursor:"pointer"}}>
              <circle cx={n.x} cy={n.y} r={selected===n.id? 20 : 14}
                fill={n.tint==="frontier" ? "transparent" : COLOR[n.tint]}
                stroke={n.tint==="frontier" ? COLOR.frontier : "rgb(0,0,0)"}
                strokeWidth={selected===n.id ? 2 : 1}
                strokeDasharray={n.tint==="frontier" ? "3 3" : "0"}/>
              <text x={n.x} y={n.y + 32} textAnchor="middle"
                fontFamily="Host Grotesk" fontSize="12" fill="rgb(0,0,0)" letterSpacing="-0.03em">
                {n.label}
              </text>
            </g>
          ))}
        </svg>
        <aside className="graph-panel">
          <div className="panel-eyebrow">Selected</div>
          <div className="panel-title">{sel.label}</div>
          <div className="panel-stats">
            <div><div className="stat-label">Mastery</div><div className="stat-value">{Math.round(sel.mastery*100)}%</div></div>
            <div><div className="stat-label">State</div><div className="stat-value">{sel.tint === "frontier" ? "Frontier" : sel.tint === "ok" ? "Crisp" : sel.tint === "blank" ? "Blank" : "Blurry"}</div></div>
            <div><div className="stat-label">Last seen</div><div className="stat-value">3 days</div></div>
            <div><div className="stat-label">Attempts</div><div className="stat-value">6</div></div>
          </div>
          <button className="btn-primary panel-btn">Practice this derivation</button>
          <div className="panel-body">The integrating factor for the first law. You've proven it once with scaffolding; you haven't done it cold yet.</div>
        </aside>
      </div>
    </section>
  );
}

Object.assign(window, { GraphScreen });