// Canvas: renders the flow as a vertical stack of typographic cards
// connected by thin ink lines. Accepts drops from the palette.
function Canvas({ flow, onDrop, onSelect, selected, onRemove, onParamEdit, running, activeId }) {
  const [over, setOver] = React.useState(false);
  const [insertAt, setInsertAt] = React.useState(null);
  const [agentName, setAgentName] = React.useState(window.USER_CONTEXT.agentName);

  React.useEffect(() => {
    const handleReady = () => setAgentName(window.USER_CONTEXT.agentName);
    window.addEventListener('userContextReady', handleReady);
    return () => window.removeEventListener('userContextReady', handleReady);
  }, []);

  return (
    <div
      className={`canvas ${over ? "is-over" : ""}`}
      onDragOver={(e) => {
        e.preventDefault();
        e.dataTransfer.dropEffect = "copy";
        setOver(true);
      }}
      onDragLeave={() => setOver(false)}
      onDrop={(e) => {
        e.preventDefault();
        setOver(false);
        const blockId = e.dataTransfer.getData("text/block-id");
        if (blockId) onDrop(blockId, insertAt);
        setInsertAt(null);
      }}
    >
      <div className="canvas-bg" aria-hidden="true" />

      <div className="canvas-chrome">
        <div className="canvas-eyebrow">Workflow</div>
        <h1 className="canvas-title">Socratico.online Agent Creator</h1>
        <p className="canvas-subtitle" style={{ fontSize: '1.2rem', color: 'var(--ink-3)', marginTop: '-5px', marginBottom: '15px', fontFamily: 'var(--f-display)', fontStyle: 'italic' }}>
          {agentName}
        </p>
        <div className="canvas-meta">
          <span>{flow.length} blocks</span>
          <span className="dot">·</span>
          <span>edited just now</span>
          <span className="dot">·</span>
          <span className="status-chip">{running ? "running" : "idle"}</span>
        </div>
      </div>

      <div className="stack">
        <DropGap
          index={0}
          active={insertAt === 0}
          onEnter={() => setInsertAt(0)}
          onLeave={() => setInsertAt(null)}
        />
        {flow.map((node, i) => {
          const def = window.findBlock(node.blockId);
          if (!def) return null;
          return (
            <React.Fragment key={node.instanceId}>
              <FlowBlock
                node={node}
                def={def}
                index={i}
                total={flow.length}
                selected={selected === node.instanceId}
                active={activeId === node.instanceId}
                onSelect={() => onSelect(node.instanceId)}
                onRemove={() => onRemove(node.instanceId)}
                onParamEdit={onParamEdit}
              />
              <DropGap
                index={i + 1}
                active={insertAt === i + 1}
                onEnter={() => setInsertAt(i + 1)}
                onLeave={() => setInsertAt(null)}
                connector={i < flow.length - 1}
              />
            </React.Fragment>
          );
        })}

        {flow.length === 0 && (
          <div className="empty-canvas">
            <div className="empty-rule" />
            <div className="empty-title">Empty canvas</div>
            <div className="empty-body">
              Drag a <em>When triggered</em> block here to begin a flow.
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

function DropGap({ index, active, onEnter, onLeave, connector }) {
  return (
    <div
      className={`drop-gap ${active ? "is-active" : ""} ${connector ? "has-connector" : ""}`}
      onDragOver={(e) => {
        e.preventDefault();
        onEnter();
      }}
      onDragLeave={onLeave}
    >
      {connector && <span className="connector-line" />}
      {active && <span className="insert-mark">insert here</span>}
    </div>
  );
}

function FlowBlock({ node, def, index, total, selected, active, onSelect, onRemove, onParamEdit }) {
  const glyph = window.KIND_GLYPH[def.kind] || "·";
  return (
    <article
      className={`flow-block kind-${def.kind} ${selected ? "is-selected" : ""} ${active ? "is-active" : ""}`}
      onClick={onSelect}
      style={{ "--accent": def.accent }}
    >
      <span className="fb-rule" />
      <header className="fb-head">
        <span className="fb-index">{String(index + 1).padStart(2, "0")}</span>
        <span className="fb-glyph">{glyph}</span>
        <span className="fb-cat">{def.category}</span>
        <h3 className="fb-label">{def.label}</h3>
        <button
          className="fb-remove"
          onClick={(e) => {
            e.stopPropagation();
            onRemove();
          }}
          title="Remove block"
        >
          ×
        </button>
      </header>
      {node.params && node.params.length > 0 && (
        <dl className="fb-params">
          {node.params.map((p, i) => (
            <div className="fb-param" key={i}>
              <dt>{p.key}</dt>
              <dd>
                {p.type === 'slider' ? (
                  <div className="fb-param-slider-wrap">
                    <input
                      type="range"
                      className="fb-param-slider"
                      min={p.min || 1}
                      max={p.max || 5}
                      value={p.val}
                      onClick={(e) => e.stopPropagation()}
                      onChange={(e) => onParamEdit(node.instanceId, i, e.target.value)}
                    />
                    <span className="fb-param-val-badge">{p.val}</span>
                  </div>
                ) : (
                  <input
                    className="fb-param-input"
                    value={p.val}
                    onClick={(e) => e.stopPropagation()}
                    onChange={(e) => onParamEdit(node.instanceId, i, e.target.value)}
                  />
                )}
              </dd>
            </div>
          ))}
        </dl>
      )}
    </article>
  );
}

Object.assign(window, { Canvas });