import { useState } from 'react'
import type { Meta, StoryObj } from '@storybook/react-vite'
import { IconLock } from '@tabler/icons-react'
import { Tabs, type TabDef } from './Tabs'

/** A row of tabs; the selected one is a neutral fill, never the accent tint. */
const meta = {
  title: 'Navigation/Tabs',
  component: Tabs,
} satisfies Meta<typeof Tabs>

export default meta
type Story = StoryObj<typeof meta>

function Demo<T extends string>({ tabs, size, initial }: { tabs: TabDef<T>[]; size?: 'default' | 'small'; initial: T }) {
  const [active, setActive] = useState<T>(initial)
  return <Tabs tabs={tabs} active={active} onChange={setActive} size={size} />
}

/** A count is the sidebar's number — mono, muted, tabular — not a chip (Katerina, 2026-09-01). */
export const WithCounts: Story = {
  args: { tabs: [], active: 'active', onChange: () => {} },
  render: () => (
    <Demo
      initial="all"
      tabs={[
        { id: 'all', label: 'All', count: 12 },
        { id: 'archived', label: 'Archived', count: 4 },
      ]}
    />
  ),
}

/** A count of 0 is still drawn — "Flagged 0" is an answer, not an absence. */
export const WithAZero: Story = {
  args: { tabs: [], active: 'all', onChange: () => {} },
  render: () => (
    <Demo
      initial="all"
      tabs={[
        { id: 'all', label: 'All', count: 31 },
        { id: 'unread', label: 'Unread', count: 21 },
        { id: 'flagged', label: 'Flagged', count: 0 },
      ]}
    />
  ),
}

/** A plain pair — a view switch. */
export const NoCounts: Story = {
  args: { tabs: [], active: 'table', onChange: () => {} },
  render: () => (
    <Demo
      initial="list"
      tabs={[
        { id: 'list', label: 'List' },
        { id: 'grid', label: 'Grid' },
      ]}
    />
  ),
}

/** A leading icon, 16px stroke 1.5 — as Peek draws them. */
export const WithAnIcon: Story = {
  args: { tabs: [], active: 'open', onChange: () => {} },
  render: () => (
    <Demo
      initial="open"
      tabs={[
        { id: 'open', label: 'Open' },
        { id: 'locked', label: 'Locked', icon: <IconLock size={16} stroke={1.5} /> },
      ]}
    />
  ),
}

/** `unread`: something new behind a tab you are not on — the accent dot after the label. */
export const WithUnread: Story = {
  args: { tabs: [], active: 'overview', onChange: () => {} },
  render: () => (
    <Demo
      initial="overview"
      tabs={[
        { id: 'overview', label: 'Overview' },
        { id: 'activity', label: 'Activity', unread: true },
        { id: 'all', label: 'All', count: 12, unread: true },
      ]}
    />
  ),
}

/** `small` is the 12px geometry. */
export const Small: Story = {
  args: { tabs: [], active: 'conversations', onChange: () => {} },
  render: () => (
    <Demo
      size="small"
      initial="overview"
      tabs={[
        { id: 'overview', label: 'Overview' },
        { id: 'private', label: 'Private', icon: <IconLock size={16} stroke={1.5} /> },
        { id: 'activity', label: 'Activity' },
      ]}
    />
  ),
}