/* ============================================================
   F2 UI — Diagram kit (extends WorkflowNode / FlowEdge)
   NodeCard · AgentFlow (linear composite) · FlowConnector (labeled edge)
   ============================================================ */
(function () {
  const { Icon, WorkflowNode, FlowEdge, StatusDot, Badge } = window.F2;

  const KINDS = {
    trigger: { icon: 'Webhook', label: 'TRIGGER' },
    agent: { icon: 'Bot', label: 'AGENT' },
    tool: { icon: 'Wrench', label: 'TOOL CALL' },
    output: { icon: 'CircleCheckBig', label: 'OUTPUT' },
    decision: { icon: 'GitFork', label: 'DECISION' },
    data: { icon: 'Database', label: 'DATA' },
    model: { icon: 'BrainCircuit', label: 'MODEL' },
  };
  const TONE = { neutral: 'var(--f2-gray-400)', active: 'var(--f2-accent)', success: 'var(--f2-success)', warning: 'var(--f2-warning)', error: 'var(--f2-error)' };

  /* ====================== NodeCard ====================== */
  function NodeCard({ kind = 'agent', title, meta, status, active = false, icon, width = 200, style = {} }) {
    const k = KINDS[kind] || KINDS.agent;
    return (
      <div style={{
        position: 'relative', width, padding: 16, borderRadius: 'var(--f2-radius-md)',
        background: 'var(--f2-surface-card)', border: `1px solid ${active ? 'var(--f2-accent)' : 'var(--f2-border-strong)'}`, ...style,
      }}>
        {active && <span style={{ position: 'absolute', top: 12, right: 12, width: 8, height: 8, borderRadius: 2, background: 'var(--f2-accent)' }} />}
        <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
          <span style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 30, height: 30, borderRadius: 'var(--f2-radius-control)', background: 'var(--f2-surface-raised)', border: '1px solid var(--f2-border)', color: active ? 'var(--f2-accent-text)' : 'var(--f2-text-muted)', flex: '0 0 auto' }}><Icon name={icon || k.icon} size={16} /></span>
          <span style={{ fontFamily: 'var(--f2-font-mono)', fontSize: 10.5, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--f2-text-faint)' }}>{k.label}</span>
        </div>
        {title && <div style={{ marginTop: 12, fontFamily: 'var(--f2-font-display)', fontWeight: 600, fontSize: 15, color: 'var(--f2-text)', lineHeight: 1.3 }}>{title}</div>}
        {(meta || status) && (
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: meta ? 8 : 10 }}>
            {status && <StatusDot tone={status} live={status === 'active'} size={7} />}
            {meta && <span style={{ fontFamily: 'var(--f2-font-mono)', fontSize: 11.5, color: 'var(--f2-text-muted)' }}>{meta}</span>}
          </div>
        )}
      </div>
    );
  }

  /* ====================== FlowConnector (labeled / branching edge) ====================== */
  function FlowConnector({ label, final = false, vertical = false, length = 56, style = {} }) {
    if (!label) return <FlowEdge final={final} vertical={vertical} length={length} style={style} />;
    return (
      <div style={{ display: 'inline-flex', flexDirection: vertical ? 'row' : 'column', alignItems: 'center', gap: 4, ...style }}>
        {!vertical && <span style={{ fontFamily: 'var(--f2-font-mono)', fontSize: 10, letterSpacing: '0.08em', textTransform: 'uppercase', color: final ? 'var(--f2-accent-text)' : 'var(--f2-text-faint)' }}>{label}</span>}
        <FlowEdge final={final} vertical={vertical} length={length} />
        {vertical && <span style={{ fontFamily: 'var(--f2-font-mono)', fontSize: 10, letterSpacing: '0.08em', textTransform: 'uppercase', color: final ? 'var(--f2-accent-text)' : 'var(--f2-text-faint)' }}>{label}</span>}
      </div>
    );
  }

  /* ====================== AgentFlow (linear composite) ====================== */
  function AgentFlow({ steps = [], vertical = false, edgeLength = 48, style = {} }) {
    return (
      <div style={{ display: 'inline-flex', flexDirection: vertical ? 'column' : 'row', alignItems: 'center', gap: 2, flexWrap: vertical ? 'nowrap' : 'wrap', justifyContent: 'center', ...style }}>
        {steps.map((s, i) => {
          const next = steps[i + 1];
          const finalEdge = next && (next.active || next.kind === 'output' || s.finalEdge);
          return (
            <React.Fragment key={i}>
              <WorkflowNode label={s.label || (KINDS[s.kind] || {}).label || 'STEP'} active={!!s.active} icon={<Icon name={s.icon || (KINDS[s.kind] || KINDS.agent).icon} size={15} />} />
              {next && <FlowConnector label={s.edgeLabel} final={!!finalEdge} vertical={vertical} length={s.edgeLabel ? edgeLength + 8 : edgeLength} />}
            </React.Fragment>
          );
        })}
      </div>
    );
  }

  Object.assign(window.F2, { NodeCard, FlowConnector, AgentFlow });
})();