/* ============================================================
   F2 UI — Diagram kit stories
   ============================================================ */
(function () {
  const F2 = window.F2;
  const { Icon, NodeCard, AgentFlow, FlowConnector, WorkflowNode, FlowEdge, Badge, StatusDot } = F2;
  const G = 'Diagram';

  /* ---------------- NodeCard ---------------- */
  window.story({
    id: 'node-card', group: G, name: 'NodeCard', status: 'new',
    tagline: 'A richer workflow node — a kind chip, title, status dot and metadata. For detailed agent diagrams beyond the compact WorkflowNode.',
    importLine: "const { NodeCard } = F2;",
    keywords: ['diagram', 'node', 'agent', 'card'],
    props: [
      { name: 'kind', type: "'trigger'|'agent'|'tool'|'output'|'decision'|'data'|'model'", default: 'agent', control: 'select', options: ['trigger', 'agent', 'tool', 'output', 'decision', 'data', 'model'], description: 'Preset label + default icon.' },
      { name: 'title', type: 'string', default: 'Classify invoice', control: 'text', description: 'Node title.' },
      { name: 'meta', type: 'string', default: 'gpt-4o · 0.8s', control: 'text', description: 'Metadata line (model, latency…).' },
      { name: 'status', type: "'active'|'success'|'warning'|'error'|'neutral'", default: 'active', control: 'select', options: ['none', 'active', 'success', 'warning', 'error'], description: 'Status dot.' },
      { name: 'active', type: 'boolean', default: true, control: 'boolean', description: 'Light the amber edge + node dot.' },
      { name: 'icon', type: 'string', description: 'Override the kind icon (Lucide name).' },
    ],
    render: (v) => <NodeCard kind={v.kind} title={v.title} meta={v.meta} status={v.status === 'none' ? undefined : v.status} active={v.active} />,
    code: (v) => `<NodeCard\n  kind="${v.kind}"\n  title="${v.title}"\n  meta="${v.meta}"${v.status !== 'none' ? `\n  status="${v.status}"` : ''}${v.active ? '\n  active' : ''}\n/>`,
    examples: [
      { name: 'trigger', render: () => <NodeCard kind="trigger" title="New email" meta="stripe.invoice" width={180} /> },
      { name: 'agent (active)', render: () => <NodeCard kind="agent" title="Classify invoice" meta="gpt-4o · 0.8s" status="active" active width={180} /> },
      { name: 'tool', render: () => <NodeCard kind="tool" title="Write to ERP" meta="SAP · upsert" status="success" width={180} /> },
      { name: 'decision', render: () => <NodeCard kind="decision" title="Confidence ≥ 0.8?" width={180} /> },
    ],
    a11y: [
      'Wrap a diagram of NodeCards in a labelled <code>role="group"</code> / figure with a caption describing the flow for non-visual users.',
      'Kind is shown as a text chip, not by color — status adds a dot + (where present) a label.',
    ],
  });

  /* ---------------- FlowConnector ---------------- */
  window.story({
    id: 'flow-connector', group: G, name: 'FlowConnector', status: 'new',
    tagline: 'A labeled edge — adds an uppercase mono condition ("on success") to the FlowEdge for branching diagrams.',
    importLine: "const { FlowConnector } = F2;",
    keywords: ['diagram', 'edge', 'connector', 'branch', 'label'],
    props: [
      { name: 'label', type: 'string', default: 'on success', control: 'text', description: 'Edge condition label (omit for a plain edge).' },
      { name: 'final', type: 'boolean', default: false, control: 'boolean', description: 'Amber terminal edge.' },
      { name: 'vertical', type: 'boolean', default: false, control: 'boolean', description: 'Vertical orientation.' },
      { name: 'length', type: 'number', default: 56, control: 'number', min: 32, max: 120, step: 4, description: 'Edge length in px.' },
    ],
    render: (v) => (
      <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
        <WorkflowNode label="DECISION" icon={<Icon name="GitFork" size={15} />} />
        <FlowConnector label={v.label} final={v.final} vertical={v.vertical} length={v.length} />
        <WorkflowNode label="OUTPUT" active={v.final} icon={<Icon name="CircleCheckBig" size={15} />} />
      </div>
    ),
    code: (v) => `<FlowConnector label="${v.label}"${v.final ? ' final' : ''}${v.vertical ? ' vertical' : ''} length={${v.length}} />`,
    a11y: ['The label is text (not an icon) so the branch condition is readable; the edge itself is decorative.'],
  });

  /* ---------------- AgentFlow ---------------- */
  function BranchExample() {
    return (
      <div style={{ display: 'flex', alignItems: 'center', gap: 4, flexWrap: 'wrap', justifyContent: 'center' }}>
        <WorkflowNode label="EMAIL" icon={<Icon name="Mail" size={15} />} />
        <FlowEdge length={32} />
        <WorkflowNode label="AGENT" active icon={<Icon name="Bot" size={15} />} />
        <FlowEdge length={32} />
        <WorkflowNode label="CHECK" icon={<Icon name="GitFork" size={15} />} />
        <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          <FlowConnector label="≥ 0.8" final length={40} />
          <FlowConnector label="< 0.8" length={40} />
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          <WorkflowNode label="ERP" active icon={<Icon name="CircleCheckBig" size={15} />} />
          <WorkflowNode label="REVIEW" icon={<Icon name="UserRoundCheck" size={15} />} />
        </div>
      </div>
    );
  }
  window.story({
    id: 'agent-flow', group: G, name: 'AgentFlow', status: 'new', minH: 320,
    tagline: 'A linear agent pipeline composed from WorkflowNodes and auto-wired FlowEdges — the edge into the active/output node lights amber.',
    importLine: "const { AgentFlow } = F2;",
    keywords: ['diagram', 'pipeline', 'agent', 'flow', 'composite'],
    props: [
      { name: 'steps', type: 'Array<{label?,kind?,icon?,active?,edgeLabel?}>', description: 'Ordered steps; the connector auto-ambers into an active/output step.' },
      { name: 'vertical', type: 'boolean', default: false, control: 'boolean', description: 'Lay the pipeline out vertically.' },
      { name: 'edgeLength', type: 'number', default: 48, control: 'number', min: 24, max: 96, step: 4, description: 'Connector length in px.' },
    ],
    render: (v) => <AgentFlow vertical={v.vertical} edgeLength={v.edgeLength} steps={[
      { kind: 'trigger', label: 'EMAIL', icon: 'Mail' },
      { kind: 'agent', label: 'EXTRACT', icon: 'ScanText' },
      { kind: 'agent', label: 'CLASSIFY', active: true },
      { kind: 'tool', label: 'TOOL', icon: 'Wrench' },
      { kind: 'output', label: 'ERP' },
    ]} />,
    code: (v) => `<AgentFlow${v.vertical ? '\n  vertical' : ''}\n  steps={[\n    { kind: 'trigger', label: 'EMAIL', icon: 'Mail' },\n    { kind: 'agent', label: 'EXTRACT', icon: 'ScanText' },\n    { kind: 'agent', label: 'CLASSIFY', active: true },\n    { kind: 'tool', label: 'TOOL', icon: 'Wrench' },\n    { kind: 'output', label: 'ERP' },\n  ]}\n/>`,
    examples: [
      { name: 'vertical', render: () => <AgentFlow vertical steps={[{ kind: 'trigger', label: 'WEBHOOK', icon: 'Webhook' }, { kind: 'agent', label: 'AGENT', active: true }, { kind: 'output', label: 'OUTPUT' }]} /> },
      { name: 'branching (assembled)', note: 'NodeCards + labeled connectors', render: () => <BranchExample /> },
    ],
    a11y: [
      'AgentFlow is a visual composite — give the container a caption or <code>aria-label</code> summarising the pipeline.',
      'The amber terminal edge is reinforced by the active output node, never color alone.',
    ],
    notes: 'For non-linear graphs, compose <strong>NodeCard</strong> / <strong>WorkflowNode</strong> with <strong>FlowConnector</strong> directly (see the branching example) — AgentFlow covers the common linear case.',
  });
})();