/* ============================================================
   F2 UI — Dashboard stories
   ============================================================ */
(function () {
  const F2 = window.F2;
  const { Icon, StatCard, MetricChart, SidebarNav, Topbar, DashboardLayout, Card, IconButton, Badge, StatusDot } = F2;
  const G = 'Dashboard';

  /* ---------------- StatCard ---------------- */
  window.story({
    id: 'stat-card', group: G, name: 'StatCard', status: 'new',
    tagline: 'A KPI in a card — Stat plus an icon tile and an optional area sparkline. The active card lights its amber edge.',
    importLine: "const { StatCard } = F2;",
    keywords: ['kpi', 'card', 'metric', 'dashboard'],
    props: [
      { name: 'label', type: 'string', default: 'Processed today', control: 'text', description: 'Metric label.' },
      { name: 'value', type: 'ReactNode', default: '1,284', control: 'text', description: 'Headline value.' },
      { name: 'delta', type: 'string', default: '+12.4%', control: 'text', description: 'Change vs. previous period.' },
      { name: 'icon', type: 'string', default: 'FileText', control: 'text', description: 'Lucide icon in the corner tile.' },
      { name: 'chart', type: 'number[]', description: 'Optional sparkline series.' },
      { name: 'active', type: 'boolean', default: false, control: 'boolean', description: 'Light the amber edge for the focus metric.' },
    ],
    render: (v) => <StatCard label={v.label} value={v.value} delta={v.delta} icon={v.icon} active={v.active} chart={[8, 10, 9, 13, 12, 16, 19]} style={{ width: 260 }} />,
    code: (v) => `<StatCard\n  label="${v.label}"\n  value="${v.value}"\n  delta="${v.delta}"\n  icon="${v.icon}"${v.active ? '\n  active' : ''}\n  chart={[8, 10, 9, 13, 12, 16, 19]}\n/>`,
    examples: [
      { name: 'with sparkline', render: () => <StatCard label="Processed" value="1,284" delta="+12.4%" icon="FileText" chart={[8, 10, 9, 13, 12, 16, 19]} style={{ width: 230 }} /> },
      { name: 'down / success line', render: () => <StatCard label="Avg. latency" value="19s" delta="-31%" icon="Timer" chartTone="success" chart={[40, 33, 35, 28, 26, 22, 19]} style={{ width: 230 }} /> },
      { name: 'active', render: () => <StatCard label="Active agents" value="7" delta="+2" icon="Bot" active style={{ width: 230 }} /> },
    ],
    a11y: [
      'Composes Stat (label + value + arrowed delta) so direction is not color-only.',
      'The sparkline is decorative; the figure and delta carry the meaning.',
    ],
  });

  /* ---------------- MetricChart ---------------- */
  window.story({
    id: 'metric-chart', group: G, name: 'MetricChart', status: 'new',
    tagline: 'A dependency-free, responsive SVG/flex chart — bars, line, area or sparkline. The latest bar lights amber.',
    importLine: "const { MetricChart } = F2;",
    keywords: ['chart', 'graph', 'bars', 'sparkline', 'svg'],
    props: [
      { name: 'data', type: 'number[] | {label,value}[]', description: 'The series.' },
      { name: 'type', type: "'bar' | 'line' | 'area' | 'sparkline'", default: 'bar', control: 'select', options: ['bar', 'line', 'area', 'sparkline'], description: 'Chart style.' },
      { name: 'tone', type: "'accent' | 'success' | 'muted'", default: 'accent', control: 'select', options: ['accent', 'success', 'muted'], description: 'Series color.' },
      { name: 'height', type: 'number', default: 140, control: 'number', min: 60, max: 220, step: 10, description: 'Chart height in px.' },
      { name: 'highlightLast', type: 'boolean', default: true, control: 'boolean', description: 'Bar charts: fill the last bar amber.' },
    ],
    render: (v) => <MetricChart data={[42, 55, 48, 63, 58, 71, 66, 82, 78, 91, 86, 99]} type={v.type} tone={v.tone} height={v.height} highlightLast={v.highlightLast} style={{ width: 460, maxWidth: '100%' }} />,
    code: (v) => `<MetricChart\n  type="${v.type}"\n  tone="${v.tone}"\n  height={${v.height}}\n  data={[42, 55, 48, 63, 58, 71, 66, 82, 78, 91, 86, 99]}\n/>`,
    examples: [
      { name: 'bar', render: () => <MetricChart type="bar" height={80} data={[4, 7, 5, 9, 8, 12, 11, 15]} style={{ width: 200 }} /> },
      { name: 'area', render: () => <MetricChart type="area" height={80} data={[4, 7, 5, 9, 8, 12, 11, 15]} style={{ width: 200 }} /> },
      { name: 'line', render: () => <MetricChart type="line" height={80} data={[8, 6, 9, 7, 11, 9, 13]} style={{ width: 200 }} /> },
      { name: 'sparkline', render: () => <MetricChart type="sparkline" height={36} tone="success" data={[40, 33, 35, 28, 26, 22, 19]} style={{ width: 160 }} /> },
    ],
    a11y: [
      'Charts are visual summaries — pair them with the underlying figure (e.g. a Stat) or a data table for non-visual access.',
      'Bars expose a native <code>title</code> tooltip with label + value on hover.',
    ],
    notes: 'No charting dependency — bars are flex boxes, line/area are a single responsive SVG path with a non-scaling stroke. Drop in any series and it scales to its container.',
  });

  /* ---------------- SidebarNav ---------------- */
  function SidebarDemo() {
    const [active, setActive] = React.useState('automations');
    const items = [
      { value: 'overview', label: 'Overview', icon: 'LayoutDashboard', section: 'Workspace' },
      { value: 'automations', label: 'Automations', icon: 'Workflow', badge: 7 },
      { value: 'runs', label: 'Runs', icon: 'Play' },
      { value: 'data', label: 'Data sources', icon: 'Database', section: 'Manage' },
      { value: 'team', label: 'Team', icon: 'Users' },
      { value: 'billing', label: 'Billing', icon: 'CreditCard' },
    ];
    return (
      <div style={{ height: 460, width: 250, border: '1px solid var(--f2-border-strong)', borderRadius: 'var(--f2-radius-md)', overflow: 'hidden' }}>
        <SidebarNav items={items} active={active} onSelect={setActive} user={{ name: 'Ana Ribeiro', email: 'ana@f2.tech', status: 'success' }} />
      </div>
    );
  }
  window.story({
    id: 'sidebar-nav', group: G, name: 'SidebarNav', status: 'new',
    tagline: 'The primary app navigation — brand, sectioned items with icons and counts, an active amber indicator, and a user footer.',
    importLine: "const { SidebarNav } = F2;",
    keywords: ['sidebar', 'navigation', 'menu', 'app shell'],
    props: [
      { name: 'items', type: 'Array<{value,label,icon,section?,badge?}>', description: 'Nav items; a new section label starts a group.' },
      { name: 'active', type: 'string', description: 'Active item value.' },
      { name: 'onSelect', type: '(value) => void', description: 'Item click handler.' },
      { name: 'brand', type: 'string', default: 'F2 Tecnologia', description: 'Wordmark next to the F2 glyph.' },
      { name: 'user', type: '{name,email?,src?,status?}', description: 'Footer account row.' },
      { name: 'footer', type: 'ReactNode', description: 'Custom footer (overrides user row).' },
    ],
    render: () => <SidebarDemo />,
    code: () => `const [active, setActive] = useState('overview');\n<SidebarNav\n  active={active}\n  onSelect={setActive}\n  user={{ name: 'Ana Ribeiro', email: 'ana@f2.tech', status: 'success' }}\n  items={[\n    { value: 'overview', label: 'Overview', icon: 'LayoutDashboard', section: 'Workspace' },\n    { value: 'automations', label: 'Automations', icon: 'Workflow', badge: 7 },\n    { value: 'data', label: 'Data sources', icon: 'Database', section: 'Manage' },\n  ]}\n/>`,
    a11y: [
      'Items are buttons; the active one is reinforced with a raised surface + amber icon, not color alone.',
      'Wrap in a <code>&lt;nav aria-label="Primary"&gt;</code> landmark in your app shell.',
    ],
  });

  /* ---------------- Topbar ---------------- */
  window.story({
    id: 'topbar', group: G, name: 'Topbar', status: 'new',
    tagline: 'The app header — title or breadcrumb, an optional search, action icons and the account avatar.',
    importLine: "const { Topbar } = F2;",
    keywords: ['topbar', 'header', 'appbar', 'navigation'],
    props: [
      { name: 'title', type: 'string', default: 'Overview', control: 'text', description: 'Page title (or pass breadcrumb).' },
      { name: 'breadcrumb', type: 'ReactNode', description: 'Replaces the title with a custom node.' },
      { name: 'search', type: 'boolean', default: true, control: 'boolean', description: 'Show the inline search field.' },
      { name: 'onMenu', type: '() => void', description: 'Show a menu toggle (mobile).' },
      { name: 'actions', type: 'ReactNode', description: 'Trailing action icons.' },
      { name: 'user', type: '{name,src?,status?}', description: 'Account avatar.' },
    ],
    render: (v) => (
      <div style={{ width: 640, maxWidth: '100%', border: '1px solid var(--f2-border-strong)', borderRadius: 'var(--f2-radius-md)', overflow: 'hidden' }}>
        <Topbar title={v.title} search={v.search}
          actions={<><IconButton variant="ghost" size="sm" aria-label="Notifications"><Icon name="Bell" size={18} /></IconButton><IconButton variant="ghost" size="sm" aria-label="Help"><Icon name="CircleHelp" size={18} /></IconButton></>}
          user={{ name: 'Ana Ribeiro', status: 'success' }} />
      </div>
    ),
    code: (v) => `<Topbar\n  title="${v.title}"${v.search ? '\n  search' : ''}\n  actions={<IconButton aria-label="Notifications"><Icon name="Bell" /></IconButton>}\n  user={{ name: 'Ana Ribeiro', status: 'success' }}\n/>`,
    a11y: [
      'Use a <code>&lt;header&gt;</code> landmark; the search input should have an accessible label in production.',
      'Action icons are IconButtons with explicit labels.',
    ],
  });

  /* ---------------- DashboardLayout (composite) ---------------- */
  window.story({
    id: 'dashboard-layout', group: G, name: 'DashboardLayout', status: 'new',
    tagline: 'An assembled client-panel shell — SidebarNav + Topbar + a content grid of StatCards and a live chart. The whole kit, composed.',
    importLine: "const { DashboardLayout } = F2;",
    keywords: ['layout', 'shell', 'dashboard', 'composite', 'panel'],
    minH: 600,
    props: [
      { name: 'children', type: 'ReactNode', description: 'Page content; defaults to a sample overview (stat cards + runs chart).' },
      { name: 'height', type: 'number', default: 540, description: 'Shell height in px.' },
    ],
    render: () => <DashboardLayout height={560} style={{ width: '100%' }} />,
    code: () => `<DashboardLayout>\n  {/* your page content — or omit for the sample overview */}\n  <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }}>\n    <StatCard label="Processed" value="1,284" delta="+12.4%" icon="FileText" chart={series} />\n    <StatCard label="Avg. latency" value="19s" delta="-31%" icon="Timer" />\n    <StatCard label="Active agents" value="7" delta="+2" icon="Bot" active />\n  </div>\n</DashboardLayout>`,
    a11y: [
      'Composes the navigation, header and content landmarks into one responsive shell.',
      'Every interactive part (nav items, search, actions, cards) is keyboard reachable.',
    ],
    notes: 'This is a <strong>composed block</strong>, not a primitive — a ready starting point for a client panel. Swap <code>children</code> for your own page and keep the chrome.',
  });
})();