// ============================================================
// WORKFLOW CONTROL CENTER — Overview · Flow Builder · Agents
// (Integrations · Executions · AI Optimization · Logs live in workflow-detail-2.jsx)
// ============================================================

const WF_NODES_TEMPLATE = {
  capture: [
    { id: 'n1', label: 'Lead captured',     kind: 'trigger', x: 60,  y: 120, agent: 'system',  passRate: 100, count: 1284, ms: 0 },
    { id: 'n2', label: 'Enrich · Clearbit', kind: 'action',  x: 260, y: 120, agent: 'Vesta',   passRate: 94,  count: 1206, ms: 1200 },
    { id: 'n3', label: 'ICP score',         kind: 'logic',   x: 460, y: 120, agent: 'Vesta',   passRate: 78,  count: 941,  ms: 800 },
    { id: 'n4', label: 'Notify operator',   kind: 'action',  x: 660, y: 60,  agent: 'Hermes',  passRate: 96,  count: 904,  ms: 200 },
    { id: 'n5', label: 'Drop to nurture',   kind: 'action',  x: 660, y: 180, agent: 'Calliope',passRate: 88,  count: 230,  ms: 400 },
    { id: 'n6', label: 'Hot call · Atlas',  kind: 'agent',   x: 860, y: 60,  agent: 'Atlas',   passRate: 64,  count: 578,  ms: 184000 },
    { id: 'n7', label: 'Book demo',         kind: 'action',  x: 1060, y: 60, agent: 'Hermes',  passRate: 84,  count: 486,  ms: 8400 }
  ],
  qualify: [
    { id: 'n1', label: 'Form submit',     kind: 'trigger', x: 60,  y: 120, agent: 'system', passRate: 100, count: 4218, ms: 0 },
    { id: 'n2', label: 'Validate fields', kind: 'action',  x: 260, y: 120, agent: 'system', passRate: 98,  count: 4133, ms: 80 },
    { id: 'n3', label: 'Enrich profile',  kind: 'action',  x: 460, y: 120, agent: 'Vesta',  passRate: 96,  count: 3968, ms: 1400 },
    { id: 'n4', label: 'ICP score',       kind: 'logic',   x: 660, y: 120, agent: 'Vesta',  passRate: 92,  count: 3650, ms: 2200 },
    { id: 'n5', label: 'Route enterprise',kind: 'agent',   x: 860, y: 60,  agent: 'Atlas',  passRate: 88,  count: 1280, ms: 240 },
    { id: 'n6', label: 'Route SMB',       kind: 'agent',   x: 860, y: 180, agent: 'Atlas',  passRate: 84,  count: 2370, ms: 240 }
  ],
  booking: [
    { id: 'n1', label: 'Demo requested', kind: 'trigger', x: 60,  y: 120, agent: 'system',  passRate: 100, count: 612, ms: 0 },
    { id: 'n2', label: 'Calendar offer', kind: 'action',  x: 240, y: 120, agent: 'Hermes',  passRate: 92,  count: 563, ms: 400 },
    { id: 'n3', label: 'Slot picked?',   kind: 'logic',   x: 420, y: 120, agent: 'Hermes',  passRate: 64,  count: 360, ms: 0 },
    { id: 'n4', label: 'Confirm SMS',    kind: 'action',  x: 600, y: 60,  agent: 'Hermes',  passRate: 98,  count: 353, ms: 120 },
    { id: 'n5', label: 'Wait 4h',        kind: 'logic',   x: 600, y: 180, agent: 'system',  passRate: 100, count: 252, ms: 14400000 },
    { id: 'n6', label: 'AI follow-up',   kind: 'agent',   x: 780, y: 180, agent: 'Hermes',  passRate: 78,  count: 197, ms: 184000 },
    { id: 'n7', label: 'Reminder T-24h', kind: 'action',  x: 780, y: 60,  agent: 'Hermes',  passRate: 96,  count: 339, ms: 0 },
    { id: 'n8', label: 'Booking held',   kind: 'action',  x: 960, y: 120, agent: 'system',  passRate: 94,  count: 504, ms: 0 },
    { id: 'n9', label: 'Brief & prep',   kind: 'action',  x: 1140, y: 120, agent: 'Iris',   passRate: 92,  count: 463, ms: 4200 }
  ],
  sales_fu: [
    { id: 'n1', label: 'Demo no-show',     kind: 'trigger', x: 60,  y: 120, agent: 'system',  passRate: 100, count: 184, ms: 0 },
    { id: 'n2', label: 'Wait 30m',         kind: 'logic',   x: 240, y: 120, agent: 'system',  passRate: 100, count: 184, ms: 1800000 },
    { id: 'n3', label: 'Email · empathy',  kind: 'action',  x: 420, y: 60,  agent: 'Calliope',passRate: 88,  count: 162, ms: 400 },
    { id: 'n4', label: 'AI call · Hermes', kind: 'agent',   x: 420, y: 180, agent: 'Hermes',  passRate: 64,  count: 117, ms: 184000 },
    { id: 'n5', label: 'Rebook offer',     kind: 'action',  x: 620, y: 120, agent: 'Hermes',  passRate: 72,  count: 142, ms: 200 }
  ]
};

function buildWorkflowNodes(workflow) {
  return WF_NODES_TEMPLATE[workflow.cat] || WF_NODES_TEMPLATE.capture;
}

function buildEdges(nodes) {
  // Simple inferred edges: linear left-to-right by x, branching by y rows
  const edges = [];
  for (let i = 0; i < nodes.length - 1; i++) {
    const a = nodes[i];
    const next = nodes.slice(i + 1).filter(n => n.x > a.x);
    next.slice(0, 1).forEach(b => edges.push([a.id, b.id]));
    // also branch if same x exists at different y
    const branches = nodes.filter(n => n.x === a.x + 200 && n.y !== a.y && n.id !== a.id);
    branches.forEach(b => edges.push([a.id, b.id]));
  }
  return edges;
}

// ===================== OVERVIEW TAB =====================
function WorkflowOverviewTab({ workflow, onPushToast }) {
  const nodes = React.useMemo(() => buildWorkflowNodes(workflow), [workflow.id, workflow.cat]);
  const edges = React.useMemo(() => buildEdges(nodes), [nodes]);
  const cat = WORKFLOW_CATEGORIES[workflow.cat];

  // Pulse tick
  const [tick, setTick] = React.useState(0);
  React.useEffect(() => {
    let raf;
    const loop = () => { setTick(t => t + 1); raf = requestAnimationFrame(loop); };
    raf = requestAnimationFrame(loop);
    return () => cancelAnimationFrame(raf);
  }, []);

  const lookup = Object.fromEntries(nodes.map(n => [n.id, n]));
  const bottleneckNode = nodes.find(n => n.passRate < 70 && n.kind !== 'logic');

  return (
    <div style={{display: 'flex', flexDirection: 'column', gap: 14}}>
      <div className="fcc-action-bar">
        <button className="btn primary sm" data-handled="1" onClick={() => window.runAction('runWorkflow', { name: workflow.name })}>
          <Icon.Play className="icon"/>Run workflow
        </button>
        <button className="btn sm" onClick={() => onPushToast(workflow.status === 'live' ? 'Workflow paused' : 'Workflow resumed')}>
          {workflow.status === 'live' ? 'Pause' : 'Resume'}
        </button>
        <button className="btn sm" data-handled="1" onClick={() => window.runAction('cloneWorkflow', { name: workflow.name })}>Clone</button>
        <button className="btn sm" data-handled="1" onClick={() => window.runAction('runAIAudit')}>AI audit</button>
        <button className="btn sm" data-handled="1" onClick={() => window.runAction('optimizeWorkflow', { name: workflow.name })}>Optimize</button>
        <button className="btn sm" data-handled="1" onClick={() => window.runAction('launchTest', { name: workflow.name })}>Launch test version</button>
      </div>

      {bottleneckNode && (
        <div className="fcc-alert warn">
          <span className="fcc-alert-icon">⚠</span>
          <div style={{flex: 1}}>
            <div className="fcc-alert-title">Booking delay detected after stage · {bottleneckNode.label}</div>
            <div className="fcc-alert-body">
              Pass-rate {bottleneckNode.passRate}% — below historical norm. Iris flagged
              {' '}<span style={{color: 'var(--cyan)'}}>{Math.round((bottleneckNode.count * (100 - bottleneckNode.passRate)) / 100)}</span> prospects
              {' '}stalled here over the last 24h.
            </div>
          </div>
          <button className="btn sm" onClick={() => onPushToast('Optimization queued for review')}>Review</button>
        </div>
      )}

      <div className="fcc-alert info">
        <span className="fcc-alert-icon" style={{color: 'var(--cyan)'}}>✦</span>
        <div style={{flex: 1}}>
          <div className="fcc-alert-title">AI follow-up recovered <span style={{color: 'var(--good)'}}>17 lost leads</span> today</div>
          <div className="fcc-alert-body">
            Hermes intercepted no-shows within 30 minutes of the missed slot. <span style={{color: 'var(--good)'}}>£14,420</span> revenue recovered this week.
          </div>
        </div>
      </div>

      {/* Animated orchestration map */}
      <div className="wfc-canvas">
        <span className="br-bl"></span>
        <span className="br-br"></span>
        <span className="coord">ORCHESTRATION · TRACE · LIVE</span>
        <span className="coord-br">v.{(workflow.id.charCodeAt(3) % 9) + 1}.{(workflow.id.charCodeAt(4) % 9)} · {nodes.length} nodes</span>

        <div style={{position: 'relative', height: 320, width: '100%'}}>
          {/* Edges */}
          <svg style={{position: 'absolute', inset: 0, width: '100%', height: '100%', zIndex: 1, overflow: 'visible'}}>
            <defs>
              <linearGradient id="wfc-edge" x1="0%" x2="100%">
                <stop offset="0%" stopColor={`${cat.hue}80`}/>
                <stop offset="100%" stopColor={`${cat.hue}40`}/>
              </linearGradient>
              <radialGradient id="wfc-pulse">
                <stop offset="0%" stopColor={cat.hue}/>
                <stop offset="100%" stopColor={`${cat.hue}00`}/>
              </radialGradient>
            </defs>
            {edges.map(([a, b], i) => {
              const na = lookup[a], nb = lookup[b];
              if (!na || !nb) return null;
              const x1 = na.x + 100, y1 = na.y + 18;
              const x2 = nb.x, y2 = nb.y + 18;
              const midX = (x1 + x2) / 2;
              const path = `M ${x1} ${y1} C ${midX} ${y1}, ${midX} ${y2}, ${x2} ${y2}`;
              return (
                <g key={i}>
                  <path d={path} fill="none" stroke="rgba(255,255,255,0.06)" strokeWidth="1" strokeDasharray="2 4"/>
                  <path d={path} fill="none" stroke="url(#wfc-edge)" strokeWidth="1.3" opacity="0.6"/>
                  <circle r="4" fill="url(#wfc-pulse)">
                    <animateMotion dur={`${2.5 + (i % 3) * 0.5}s`} repeatCount="indefinite" path={path} begin={`-${i * 0.4}s`}/>
                  </circle>
                </g>
              );
            })}
          </svg>

          {/* Nodes */}
          {nodes.map(n => {
            const nodeColor = n.kind === 'trigger' ? 'var(--good)' : n.kind === 'logic' ? 'var(--warn)' : n.kind === 'agent' ? 'var(--magenta)' : 'var(--cyan)';
            return (
              <div key={n.id} className="wfc-node" style={{left: n.x, top: n.y, borderColor: n.passRate < 70 ? 'rgba(255,177,75,0.5)' : `${nodeColor.startsWith('var') ? 'rgba(255,255,255,0.08)' : nodeColor}`}}>
                <div className="wfc-node-hd">
                  <span className="wfc-node-pip" style={{background: nodeColor, boxShadow: `0 0 6px ${nodeColor}`}}/>
                  <span className="mono" style={{fontSize: 8.5, color: 'var(--brass-bright, #e8c98a)', letterSpacing: '0.16em', textTransform: 'uppercase'}}>{n.kind}</span>
                  <span className="mono" style={{fontSize: 8.5, color: 'var(--text-faint)', letterSpacing: '0.12em', textTransform: 'uppercase', marginLeft: 'auto'}}>{n.agent}</span>
                </div>
                <div className="wfc-node-body">
                  <div style={{fontSize: 11.5, color: 'var(--text)', marginBottom: 4}}>{n.label}</div>
                  <div style={{display: 'flex', justifyContent: 'space-between', fontFamily: 'var(--font-mono)', fontSize: 9.5}}>
                    <span style={{color: 'var(--text-faint)'}}>{n.count} • {formatDuration(n.ms)}</span>
                    <span style={{color: n.passRate < 70 ? 'var(--warn)' : 'var(--cyan)'}}>{n.passRate}%</span>
                  </div>
                </div>
              </div>
            );
          })}

          {/* Floating telemetry overlay */}
          <div className="wfc-telemetry">
            <span><span style={{color: 'var(--text-faint)'}}>active</span> <span style={{color: 'var(--cyan)'}}>{nodes.length}</span></span>
            <span><span style={{color: 'var(--text-faint)'}}>pulse</span> <span style={{color: 'var(--good)'}}>{Math.floor(tick / 60) % 60}Hz</span></span>
            <span><span style={{color: 'var(--text-faint)'}}>throughput</span> <span style={{color: 'var(--brass-bright, #e8c98a)'}}>14.8k/s</span></span>
          </div>
        </div>
      </div>

      {/* Live metrics row */}
      <div className="fcc-analytics-grid" style={{gridTemplateColumns: 'repeat(6, 1fr)'}}>
        {[
          ['Executions today', workflow.triggers24h.toLocaleString(), 'var(--cyan)'],
          ['Success rate',     `${workflow.success}%`, workflow.success >= 90 ? 'var(--good)' : 'var(--cyan)'],
          ['Avg speed',        formatDuration(workflow.avgMs), 'var(--text)'],
          ['Revenue',          `£${(workflow.triggers24h * 0.18).toFixed(0)}k`, 'var(--good)'],
          ['Booked',           Math.round(workflow.triggers24h * 0.14), 'var(--violet)'],
          ['Recovered',        bottleneckNode ? '17' : '0', bottleneckNode ? 'var(--warn)' : 'var(--text-faint)']
        ].map(([lbl, v, color], i) => (
          <div key={i} className="fcc-kpi-mini">
            <div className="lbl">{lbl}</div>
            <div className="val" style={{color}}>{v}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ===================== FLOW BUILDER TAB =====================
const NODE_LIBRARY = {
  triggers: [
    ['Form Submitted',    'form'],
    ['Call Missed',       'phone'],
    ['SMS Received',      'sms'],
    ['Lead Created',      'lead'],
    ['Payment Failed',    'payment'],
    ['Calendar Booking',  'calendar'],
    ['Social Comment',    'social'],
    ['Ad Click',          'ad'],
    ['CRM Update',        'crm']
  ],
  actions: [
    ['Send SMS',          'sms'],
    ['Send Email',        'email'],
    ['Trigger AI Call',   'aicall'],
    ['Update CRM',        'crm'],
    ['Schedule Follow-up','followup'],
    ['Generate Content',  'content'],
    ['Notify Team',       'notify'],
    ['Launch Campaign',   'campaign'],
    ['Route to Agent',    'route'],
    ['Wait / Delay',      'wait'],
    ['Conditional Branch','branch']
  ],
  logic: [
    ['If / Else',                'ifelse'],
    ['Qualification Filter',     'qualify'],
    ['Confidence Threshold',     'confidence'],
    ['Smart Routing',            'routing'],
    ['Lead Scoring',             'score'],
    ['Revenue Threshold',        'revenue'],
    ['Time-Based Logic',         'time']
  ],
  agents: [
    ['Lead Closer · Atlas',      'atlas'],
    ['Content · Calliope',       'calliope'],
    ['Booking · Hermes',         'hermes'],
    ['Follow-up · Hermes',       'hermes'],
    ['Social · Calliope',        'social'],
    ['Analytics · Iris',         'iris'],
    ['Reputation · Iris',        'iris'],
    ['Qualification · Vesta',    'vesta'],
    ['Ad Opt · Orion',           'orion']
  ]
};

function WorkflowFlowBuilderTab({ workflow, onPushToast }) {
  const [selectedNode, setSelectedNode] = React.useState(null);
  const [aiPrompt, setAiPrompt] = React.useState('');
  const [aiBusy, setAiBusy] = React.useState(false);
  const [aiPlan, setAiPlan] = React.useState(null);
  const nodes = buildWorkflowNodes(workflow);

  const generate = async () => {
    if (!aiPrompt.trim()) return;
    setAiBusy(true);
    setAiPlan(null);
    try {
      const text = await window.claude.complete({
        messages: [{
          role: 'user',
          content: `You are Demiurge's workflow orchestrator. Produce a 6-step workflow plan for: "${aiPrompt}". Output as numbered steps in the form:\n1. [Trigger / Action / Logic / Agent] · NodeName — one-sentence description.\nKeep each step under 20 words. No preamble.`
        }]
      });
      setAiPlan(text);
    } catch {
      setAiPlan(`1. [Trigger] · Lead captured — Form submission or call from any channel.\n2. [Action] · Enrich profile — Vesta hydrates from Clearbit + intent signals.\n3. [Logic] · ICP qualify — Score against ideal-customer profile (≥0.7).\n4. [Agent] · Hermes call — Outbound voice within 90 seconds.\n5. [Action] · Book appointment — Round-robin slot offer with confirmation.\n6. [Logic] · No-show recovery — Auto-rebook within 4 hours of missed slot.`);
    }
    setAiBusy(false);
    onPushToast('Workflow plan generated · drag into canvas to build');
  };

  return (
    <div className="wfc-builder">
      {/* Node library */}
      <div className="wfc-library">
        <div className="ccc-setting-hd">Node library</div>
        <div style={{padding: '14px 16px', display: 'flex', flexDirection: 'column', gap: 18}}>
          {Object.entries(NODE_LIBRARY).map(([group, items]) => (
            <div key={group}>
              <div className="mono" style={{fontSize: 9.5, color: 'var(--brass-bright, #e8c98a)', letterSpacing: '0.18em', textTransform: 'uppercase', marginBottom: 8}}>
                / {group}
              </div>
              <div style={{display: 'flex', flexDirection: 'column', gap: 4}}>
                {items.map(([label, kind]) => (
                  <button
                    key={kind}
                    className="wfc-lib-node"
                    draggable
                    onClick={() => onPushToast(`Added · ${label}`)}
                  >
                    <span className={`wfc-lib-dot k-${group}`}/>
                    {label}
                  </button>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Canvas */}
      <div className="wfc-canvas-area">
        <div style={{padding: '12px 16px', display: 'flex', alignItems: 'center', gap: 8, borderBottom: '1px solid var(--border)'}}>
          <span className="mono faint" style={{fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase'}}>
            Canvas · {nodes.length} nodes · 8 connections
          </span>
          <span style={{flex: 1}}/>
          <button className="btn ghost sm" title="Zoom out"><Icon.Search style={{width: 12, height: 12}}/></button>
          <button className="btn ghost sm" onClick={() => onPushToast('Auto-arrange complete')}>Auto-arrange</button>
          <button className="btn ghost sm" onClick={() => onPushToast('Version 18 saved · 14:32')}>Save version</button>
          <button className="btn sm" onClick={() => onPushToast('Showing version history (12 versions)')}>History</button>
        </div>
        <div className="wfc-canvas-inner">
          {nodes.map(n => {
            const nodeColor = n.kind === 'trigger' ? 'var(--good)' : n.kind === 'logic' ? 'var(--warn)' : n.kind === 'agent' ? 'var(--magenta)' : 'var(--cyan)';
            return (
              <div
                key={n.id}
                className={`wfc-node ${selectedNode === n.id ? 'sel' : ''}`}
                style={{left: n.x * 0.85, top: n.y * 0.95, cursor: 'move', borderColor: selectedNode === n.id ? 'var(--cyan)' : undefined}}
                onClick={() => setSelectedNode(n.id)}
              >
                <div className="wfc-node-hd">
                  <span className="wfc-node-pip" style={{background: nodeColor, boxShadow: `0 0 6px ${nodeColor}`}}/>
                  <span className="mono" style={{fontSize: 8.5, color: 'var(--brass-bright, #e8c98a)', letterSpacing: '0.16em', textTransform: 'uppercase'}}>{n.kind}</span>
                </div>
                <div className="wfc-node-body">
                  <div style={{fontSize: 11.5, color: 'var(--text)'}}>{n.label}</div>
                </div>
              </div>
            );
          })}
        </div>

        {/* AI generate panel */}
        <div className="wfc-ai-panel">
          <div style={{display: 'flex', alignItems: 'center', gap: 10, marginBottom: 10}}>
            <Icon.Sparkles style={{width: 16, height: 16, color: 'var(--brass-bright, #e8c98a)'}}/>
            <span className="mono" style={{fontSize: 10.5, color: 'var(--brass-bright, #e8c98a)', letterSpacing: '0.18em', textTransform: 'uppercase'}}>AI generate workflow</span>
          </div>
          <input
            value={aiPrompt}
            onChange={e => setAiPrompt(e.target.value)}
            placeholder='"Build me a clinic lead recovery system"  ·  "Cold outbound + AI call + booking"'
            style={{width: '100%', fontFamily: 'var(--font-mono)', fontSize: 13, padding: '8px 0', color: 'var(--text)'}}
            onKeyDown={e => { if (e.key === 'Enter') generate(); }}
          />
          <div style={{display: 'flex', gap: 8, marginTop: 10}}>
            <button className="btn primary sm" onClick={generate} disabled={aiBusy}>
              <Icon.Sparkles className="icon"/>{aiBusy ? 'Building…' : 'Generate'}
            </button>
            <button className="btn sm" onClick={() => onPushToast('Template library opened')}>Browse templates</button>
          </div>
          {aiPlan && (
            <pre style={{
              marginTop: 12, background: 'rgba(75,232,255,0.04)',
              border: '1px solid rgba(75,232,255,0.2)',
              borderRadius: 'var(--radius)', padding: 12,
              fontFamily: 'var(--font-mono)', fontSize: 12, lineHeight: 1.6,
              color: 'var(--text)', whiteSpace: 'pre-wrap',
              maxHeight: 200, overflow: 'auto'
            }}>{aiPlan}</pre>
          )}
        </div>
      </div>

      {/* Inspector */}
      <div className="wfc-inspector">
        <div className="ccc-setting-hd">{selectedNode ? 'Node inspector' : 'Select a node'}</div>
        {selectedNode && (() => {
          const n = nodes.find(x => x.id === selectedNode);
          if (!n) return null;
          return (
            <div style={{padding: '14px 16px', display: 'flex', flexDirection: 'column', gap: 14}}>
              <div>
                <div className="mono faint" style={{fontSize: 9.5, letterSpacing: '0.14em', textTransform: 'uppercase'}}>Type</div>
                <div style={{fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 20, color: 'var(--text)', marginTop: 4}}>{n.label}</div>
                <div className="mono" style={{fontSize: 10, color: 'var(--brass-bright, #e8c98a)', letterSpacing: '0.16em', textTransform: 'uppercase', marginTop: 4}}>{n.kind} · {n.agent}</div>
              </div>
              <div className="wfc-insp-row">
                <span className="lbl">Trigger logic</span>
                <input defaultValue={`on_${n.kind}_${n.id}`} style={{fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--text)', padding: '4px 0', borderBottom: '1px solid var(--border)'}}/>
              </div>
              <div className="wfc-insp-row">
                <span className="lbl">Timing</span>
                <span className="mono" style={{fontSize: 11, color: 'var(--text)'}}>{formatDuration(n.ms)}</span>
              </div>
              <div className="wfc-insp-row">
                <span className="lbl">Confidence threshold</span>
                <input type="range" min="0" max="100" defaultValue="70" className="ccc-slider" style={{width: '100%'}}/>
              </div>
              <div className="wfc-insp-row">
                <span className="lbl">Retry policy</span>
                <div className="segmented" style={{width: '100%'}}>
                  <button className="active">3x</button>
                  <button>5x</button>
                  <button>none</button>
                </div>
              </div>
              <div className="wfc-insp-row">
                <span className="lbl">Fallback</span>
                <div className="segmented" style={{width: '100%'}}>
                  <button className="active">hold</button>
                  <button>route</button>
                  <button>abort</button>
                </div>
              </div>
              <div className="wfc-insp-row">
                <span className="lbl">Execution confidence</span>
                <div style={{display: 'flex', alignItems: 'center', gap: 8}}>
                  <div className="bar-track" style={{flex: 1, height: 4}}>
                    <div className="bar-fill" style={{width: `${n.passRate}%`, background: n.passRate >= 80 ? 'var(--good)' : n.passRate >= 60 ? 'var(--cyan)' : 'var(--warn)'}}/>
                  </div>
                  <span className="mono" style={{fontSize: 11, minWidth: 32, textAlign: 'right'}}>{n.passRate}%</span>
                </div>
              </div>
              <div style={{display: 'flex', gap: 6, paddingTop: 6}}>
                <button className="btn primary sm" onClick={() => onPushToast('Node settings saved')}>Save</button>
                <button className="btn ghost sm" onClick={() => onPushToast('Node duplicated')}>Clone</button>
                <button className="btn ghost sm" onClick={() => onPushToast('Node deleted')}>Delete</button>
              </div>
            </div>
          );
        })()}
        {!selectedNode && (
          <div style={{padding: 24, color: 'var(--text-faint)', fontSize: 12, lineHeight: 1.5, fontFamily: 'var(--font-mono)', letterSpacing: '0.04em', textAlign: 'center'}}>
            Click any node in the canvas to inspect its trigger logic, timing, conditions, assigned agent, retry behaviour, and fallback policy.
          </div>
        )}
      </div>
    </div>
  );
}

// ===================== AGENTS TAB =====================
function WorkflowAgentsTab({ workflow, onPushToast }) {
  const ALL_AGENTS = {
    Atlas:    { role: 'Lead Closer',       hue: '#4be8ff', volume: 8412, perf: 94, respMs: 240,   booked: 184, fails: 18, training: 'tuned' },
    Vesta:    { role: 'Qualification',     hue: '#8b6bff', volume: 12402,perf: 92, respMs: 38,    booked: 0,   fails: 24, training: 'tuned' },
    Hermes:   { role: 'Booking + Phone',   hue: '#ff7ad9', volume: 14800,perf: 88, respMs: 400,   booked: 412, fails: 14, training: 'tuned' },
    Calliope: { role: 'Content',           hue: '#e8c98a', volume: 2400, perf: 96, respMs: 12400, booked: 0,   fails: 4,  training: 'tuned' },
    Iris:     { role: 'Support · Analytics', hue: '#5dffb0', volume: 4218,perf: 96, respMs: 22000, booked: 0,   fails: 8,  training: 'training' },
    Orion:    { role: 'Ad Optimisation',   hue: '#ffb14b', volume: 412,  perf: 84, respMs: 184000,booked: 0,   fails: 12, training: 'tuned' },
    Vulcan:   { role: 'Operations',        hue: '#8b6bff', volume: 184,  perf: 99, respMs: 184000,booked: 0,   fails: 0,  training: 'tuned' },
    system:   { role: 'System runtime',    hue: '#eaecf5', volume: 28400,perf: 99, respMs: 80,    booked: 0,   fails: 18, training: 'core' }
  };

  const involved = workflow.agents;

  // Communication chain — simple sequential
  const chain = involved.filter(a => a !== 'system');

  return (
    <div style={{display: 'flex', flexDirection: 'column', gap: 14}}>
      <div className="fcc-alert info">
        <span className="fcc-alert-icon" style={{color: 'var(--cyan)'}}>✦</span>
        <div style={{flex: 1}}>
          <div className="fcc-alert-title">{involved.length} operators orchestrating this workflow</div>
          <div className="fcc-alert-body">Agents coordinate through the shared business model. Click any to retrain, swap models, or change persona.</div>
        </div>
        <button className="btn sm" onClick={() => onPushToast('Communication trace opened')}>View trace</button>
      </div>

      {/* Communication graph */}
      {chain.length > 1 && (
        <div className="fcc-mini-card" style={{padding: '22px 26px'}}>
          <div className="mono" style={{fontSize: 10.5, color: 'var(--brass-bright, #e8c98a)', letterSpacing: '0.2em', textTransform: 'uppercase', marginBottom: 18}}>
            / Inter-agent communication
          </div>
          <div className="wfc-agent-chain">
            {chain.map((a, i) => {
              const ag = ALL_AGENTS[a] || ALL_AGENTS.system;
              return (
                <React.Fragment key={a}>
                  <div className="wfc-chain-node">
                    <div className="wfc-chain-orb" style={{borderColor: ag.hue, color: ag.hue}}>
                      {a.slice(0, 2).toUpperCase()}
                    </div>
                    <div style={{fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 14, color: 'var(--text)', marginTop: 8}}>{a}</div>
                    <div className="mono faint" style={{fontSize: 9.5, letterSpacing: '0.14em', textTransform: 'uppercase'}}>{ag.role}</div>
                  </div>
                  {i < chain.length - 1 && (
                    <div className="wfc-chain-link">
                      <svg viewBox="0 0 100 40" preserveAspectRatio="none" style={{width: '100%', height: 40}}>
                        <defs>
                          <linearGradient id={`wfc-chain-${i}`} x1="0%" x2="100%">
                            <stop offset="0%" stopColor={ALL_AGENTS[chain[i]]?.hue || '#4be8ff'} stopOpacity="0.6"/>
                            <stop offset="100%" stopColor={ALL_AGENTS[chain[i+1]]?.hue || '#8b6bff'} stopOpacity="0.6"/>
                          </linearGradient>
                          <radialGradient id={`wfc-chain-pulse-${i}`}>
                            <stop offset="0%" stopColor="#fff" stopOpacity="0.9"/>
                            <stop offset="100%" stopColor="#fff" stopOpacity="0"/>
                          </radialGradient>
                        </defs>
                        <line x1="0" y1="20" x2="100" y2="20" stroke={`url(#wfc-chain-${i})`} strokeWidth="1.4" vectorEffect="non-scaling-stroke" strokeDasharray="2 3"/>
                        <circle r="2.5" fill={`url(#wfc-chain-pulse-${i})`}>
                          <animateMotion dur="2.6s" repeatCount="indefinite" path="M 0 20 L 100 20" begin={`-${i * 0.4}s`}/>
                        </circle>
                      </svg>
                    </div>
                  )}
                </React.Fragment>
              );
            })}
          </div>
        </div>
      )}

      {/* Agent cards */}
      <div className="wfc-agent-grid">
        {involved.map(a => {
          const ag = ALL_AGENTS[a] || ALL_AGENTS.system;
          return (
            <div key={a} className="wfc-agent-card">
              <div style={{display: 'flex', alignItems: 'flex-start', gap: 12, marginBottom: 12}}>
                <div className="wfc-chain-orb" style={{borderColor: ag.hue, color: ag.hue, width: 48, height: 48}}>
                  {a.slice(0, 2).toUpperCase()}
                </div>
                <div style={{flex: 1, minWidth: 0}}>
                  <div style={{fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 22, color: 'var(--text)', letterSpacing: '-0.02em'}}>{a}</div>
                  <div className="mono" style={{fontSize: 10, color: ag.hue, letterSpacing: '0.16em', textTransform: 'uppercase', marginTop: 2}}>{ag.role}</div>
                </div>
                <span style={{
                  fontFamily: 'var(--font-mono)', fontSize: 9, padding: '2px 7px',
                  color: ag.training === 'tuned' ? 'var(--good)' : 'var(--warn)',
                  background: ag.training === 'tuned' ? 'rgba(93,255,176,0.08)' : 'rgba(255,177,75,0.08)',
                  border: `1px solid ${ag.training === 'tuned' ? 'rgba(93,255,176,0.3)' : 'rgba(255,177,75,0.3)'}`,
                  borderRadius: 2, letterSpacing: '0.14em', textTransform: 'uppercase'
                }}>{ag.training}</span>
              </div>
              <div style={{display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10, padding: '12px 0', borderTop: '1px solid var(--border)', borderBottom: '1px solid var(--border)'}}>
                <div><div className="mono faint" style={{fontSize: 9, letterSpacing: '0.14em', textTransform: 'uppercase'}}>Volume</div><div className="mono" style={{fontSize: 14, marginTop: 4}}>{ag.volume.toLocaleString()}</div></div>
                <div><div className="mono faint" style={{fontSize: 9, letterSpacing: '0.14em', textTransform: 'uppercase'}}>Perf</div><div className="mono" style={{fontSize: 14, marginTop: 4, color: 'var(--cyan)'}}>{ag.perf}%</div></div>
                <div><div className="mono faint" style={{fontSize: 9, letterSpacing: '0.14em', textTransform: 'uppercase'}}>Resp</div><div className="mono" style={{fontSize: 14, marginTop: 4}}>{formatDuration(ag.respMs)}</div></div>
              </div>
              {ag.booked > 0 && (
                <div style={{padding: '10px 0', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, borderBottom: '1px solid var(--border)'}}>
                  <div><div className="mono faint" style={{fontSize: 9, letterSpacing: '0.14em', textTransform: 'uppercase'}}>Booked rev</div><div className="mono" style={{fontSize: 14, marginTop: 4, color: 'var(--good)'}}>£{(ag.booked * 84).toLocaleString()}</div></div>
                  <div><div className="mono faint" style={{fontSize: 9, letterSpacing: '0.14em', textTransform: 'uppercase'}}>Failures</div><div className="mono" style={{fontSize: 14, marginTop: 4, color: ag.fails > 10 ? 'var(--warn)' : 'var(--text-faint)'}}>{ag.fails}</div></div>
                </div>
              )}
              <div style={{display: 'flex', flexWrap: 'wrap', gap: 4, paddingTop: 12}}>
                <button className="btn ghost sm" onClick={() => onPushToast(`Paused · ${a}`)}>Pause</button>
                <button className="btn ghost sm" onClick={() => onPushToast(`Retraining · ${a}`)}>Retrain</button>
                <button className="btn ghost sm" onClick={() => onPushToast(`Model swap UI · ${a}`)}>Swap model</button>
                <button className="btn ghost sm" onClick={() => onPushToast(`Persona editor · ${a}`)}>Persona</button>
                <button className="btn primary sm" onClick={() => onPushToast(`Workflow picker · ${a}`)}>Assign</button>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

window.buildWorkflowNodes = buildWorkflowNodes;
window.WorkflowOverviewTab = WorkflowOverviewTab;
window.WorkflowFlowBuilderTab = WorkflowFlowBuilderTab;
window.WorkflowAgentsTab = WorkflowAgentsTab;