// ─── IDEAS — Infinite sticky-note canvas ──────────────────
const IdeasScreen = () => {
  const [stickies, setStickies] = React.useState(window.STICKIES);
  const [zoom, setZoom] = React.useState(0.7);
  const [pan, setPan] = React.useState({ x: 40, y: 20 });
  const [isPanning, setIsPanning] = React.useState(false);
  const panRef = React.useRef({ startX: 0, startY: 0, startPan: { x: 0, y: 0 } });
  const dragRef = React.useRef({ id: null, dx: 0, dy: 0 });
  const frameRef = React.useRef(null);
  const [filter, setFilter] = React.useState("all");

  // canvas-space size for minimap calc
  const CANVAS_W = 2400, CANVAS_H = 1400;

  const allTags = ["all","visual","mechanic","audio","narrative","ref","feel","tension","field","rule"];

  // pan handlers
  const onMouseDown = (e) => {
    if (e.target !== frameRef.current && !e.target.classList.contains("ideas-canvas")) return;
    setIsPanning(true);
    panRef.current = { startX: e.clientX, startY: e.clientY, startPan: { ...pan } };
  };
  React.useEffect(() => {
    if (!isPanning) return;
    const onMove = (e) => {
      setPan({
        x: panRef.current.startPan.x + (e.clientX - panRef.current.startX),
        y: panRef.current.startPan.y + (e.clientY - panRef.current.startY),
      });
    };
    const onUp = () => setIsPanning(false);
    window.addEventListener("mousemove", onMove);
    window.addEventListener("mouseup", onUp);
    return () => { window.removeEventListener("mousemove", onMove); window.removeEventListener("mouseup", onUp); };
  }, [isPanning]);

  // wheel zoom (centered on cursor)
  const onWheel = (e) => {
    if (!e.ctrlKey && !e.metaKey && Math.abs(e.deltaY) < 30) {
      // treat as pan
      setPan(p => ({ x: p.x - e.deltaX, y: p.y - e.deltaY }));
      e.preventDefault();
      return;
    }
    e.preventDefault();
    const newZoom = Math.max(0.2, Math.min(2, zoom * (e.deltaY < 0 ? 1.1 : 0.9)));
    const rect = frameRef.current.getBoundingClientRect();
    const mx = e.clientX - rect.left;
    const my = e.clientY - rect.top;
    // keep cursor's canvas point fixed
    const cx = (mx - pan.x) / zoom;
    const cy = (my - pan.y) / zoom;
    setPan({ x: mx - cx * newZoom, y: my - cy * newZoom });
    setZoom(newZoom);
  };

  // sticky dragging
  const onStickyDown = (e, s) => {
    e.stopPropagation();
    const rect = frameRef.current.getBoundingClientRect();
    const mx = (e.clientX - rect.left - pan.x) / zoom;
    const my = (e.clientY - rect.top - pan.y) / zoom;
    dragRef.current = { id: s.id, dx: mx - s.x, dy: my - s.y };
    const onMove = (ev) => {
      const r = frameRef.current.getBoundingClientRect();
      const cx = (ev.clientX - r.left - pan.x) / zoom;
      const cy = (ev.clientY - r.top - pan.y) / zoom;
      setStickies(prev => prev.map(p => p.id === dragRef.current.id ? { ...p, x: cx - dragRef.current.dx, y: cy - dragRef.current.dy } : p));
    };
    const onUp = () => {
      dragRef.current = { id: null, dx: 0, dy: 0 };
      window.removeEventListener("mousemove", onMove);
      window.removeEventListener("mouseup", onUp);
    };
    window.addEventListener("mousemove", onMove);
    window.addEventListener("mouseup", onUp);
  };

  const visible = stickies.filter(s => filter === "all" || s.tags.includes(filter));

  // viewport rectangle for minimap
  const vpRect = frameRef.current ? frameRef.current.getBoundingClientRect() : { width: 1200, height: 700 };

  return (
    <div data-screen-label="05 Ideas">
      <div className="content-pad" style={{ paddingBottom: 14 }}>
        <div className="page-head">
          <div>
            <div className="page-title display">Idea Wall</div>
            <div className="page-sub">Pan: drag · Zoom: ⌘+scroll · {stickies.length} sticky notes · clustered by theme</div>
          </div>
          <div className="right">
            <div className="row" style={{ gap: 6 }}>
              {allTags.map(t => (
                <button key={t} className={`filter-btn ${filter === t ? "is-on" : ""}`} onClick={() => setFilter(t)}>
                  {t}
                </button>
              ))}
            </div>
          </div>
        </div>
      </div>

      <div
        className="ideas-canvas-frame"
        ref={frameRef}
        onMouseDown={onMouseDown}
        onWheel={onWheel}
        style={{ cursor: isPanning ? "grabbing" : "grab" }}
      >
        <div
          className="ideas-canvas"
          style={{ transform: `translate(${pan.x}px, ${pan.y}px) scale(${zoom})` }}
        >
          {/* Cluster frames */}
          {window.STICKY_CLUSTERS.map((c, i) => (
            <React.Fragment key={i}>
              <div className="cluster-frame" style={{ left: c.x, top: c.y, width: c.w, height: c.h }}/>
              <div className="cluster-label" style={{ left: c.x + 16, top: c.y - 40 }}>{c.label}</div>
            </React.Fragment>
          ))}

          {/* Lucid Spark pill — embedded link to existing diagrams */}
          <div className="lucid-pill" style={{ left: 80, top: 1240 }}>
            <span className="lucid-dot"/>
            <div>
              <div style={{ fontWeight: 600 }}>Open in Lucid Spark</div>
              <div className="muted small">HUSK · System Diagrams (linked)</div>
            </div>
            <Icon name="link" size={13} className="muted"/>
          </div>

          {/* Stickies */}
          {visible.map(s => (
            <div
              key={s.id}
              className={`sticky c-${s.color}`}
              style={{ left: s.x, top: s.y, transform: `rotate(${(parseInt(s.id.slice(1)) % 7) - 3}deg)` }}
              onMouseDown={(e) => onStickyDown(e, s)}
            >
              <div className="sticky-pin"/>
              <div>{s.text}</div>
              <div className="sticky-meta">
                <span>{s.author}</span>
                <span>·</span>
                {s.tags.slice(0, 2).map(t => <span key={t}>#{t}</span>)}
              </div>
            </div>
          ))}
        </div>

        {/* Toolbar */}
        <div className="ideas-toolbar">
          <button className="btn primary small"><Icon name="plus" size={12}/> Sticky</button>
          <button className="btn small"><Icon name="link" size={12}/> Link</button>
          <button className="btn ghost small"><Icon name="filter" size={12}/></button>
        </div>

        {/* Zoom */}
        <div className="ideas-zoom">
          <button onClick={() => setZoom(z => Math.max(0.2, z * 0.85))}><Icon name="minus" size={12}/></button>
          <span className="pct">{Math.round(zoom * 100)}%</span>
          <button onClick={() => setZoom(z => Math.min(2, z * 1.15))}><Icon name="plus" size={12}/></button>
          <button onClick={() => { setZoom(0.7); setPan({ x: 40, y: 20 }); }} title="Reset">
            <Icon name="fullscreen" size={12}/>
          </button>
        </div>

        {/* Minimap */}
        <div className="ideas-minimap">
          <svg width="100%" height="100%" viewBox={`0 0 ${CANVAS_W} ${CANVAS_H}`} preserveAspectRatio="none">
            {window.STICKY_CLUSTERS.map((c, i) => (
              <rect key={i} x={c.x} y={c.y} width={c.w} height={c.h} fill="var(--surface-2)" stroke="var(--line-2)"/>
            ))}
            {stickies.map(s => {
              const colorMap = { yellow:"#fde68a", orange:"#fdba74", pink:"#f9a8d4", green:"#bef264", blue:"#93c5fd", mint:"#a7f3d0", red:"#fca5a5" };
              return <rect key={s.id} x={s.x} y={s.y} width="180" height="120" fill={colorMap[s.color]} opacity="0.9"/>;
            })}
            {/* viewport rectangle */}
            <rect
              x={-pan.x / zoom}
              y={-pan.y / zoom}
              width={vpRect.width / zoom}
              height={vpRect.height / zoom}
              fill="none"
              stroke="var(--accent)"
              strokeWidth="6"
            />
          </svg>
        </div>
      </div>
    </div>
  );
};

window.IdeasScreen = IdeasScreen;