import type { Meta, StoryObj } from '@storybook/react';
import { Check, Clock } from 'lucide-react';
import { Button } from './Button.js';
import { DataList, DataListItem, DataListMeta } from './DataList.js';
import {
  DataTable,
  DataTableBody,
  DataTableCell,
  DataTableHead,
  DataTableHeader,
  DataTableRow,
} from './DataTable.js';
import { DiffCard } from './DiffCard.js';
import { IconButton } from './IconButton.js';
import { ListItemButton } from './ListItemButton.js';
import { Panel, PanelBody, PanelDescription, PanelHeader, PanelTitle } from './Panel.js';
import { StatusBadge } from './StatusBadge.js';
import { Surface, SurfaceList, SurfaceListItem } from './Surface.js';
import { Timeline } from './Timeline.js';

const meta: Meta = {
  title: 'Components/Operational Primitives',
};

export default meta;
type Story = StoryObj;

export const SurfacesAndLists: Story = {
  render: () => (
    <div className="grid max-w-2xl gap-4">
      <Panel>
        <PanelHeader>
          <div>
            <PanelTitle>Review queue</PanelTitle>
            <PanelDescription>Dense operator work surface</PanelDescription>
          </div>
          <IconButton icon={<Check className="h-4 w-4" />} label="Approve selected" />
        </PanelHeader>
        <PanelBody>
          <ListItemButton selected>
            <div className="font-medium">Merge duplicate research notes</div>
            <div className="text-sm text-[var(--bl-text-secondary)]">2 linked notes affected</div>
          </ListItemButton>
          <SurfaceList>
            <SurfaceListItem selected>Selected surface row</SurfaceListItem>
            <SurfaceListItem>Normal surface row</SurfaceListItem>
          </SurfaceList>
        </PanelBody>
      </Panel>
      <Surface variant="muted">Reusable muted surface</Surface>
    </div>
  ),
};

export const StatusTimelineAndDiff: Story = {
  render: () => (
    <div className="grid max-w-2xl gap-4">
      <div className="flex gap-2">
        <StatusBadge tone="success" dot>
          Approved
        </StatusBadge>
        <StatusBadge tone="warning" dot>
          Needs review
        </StatusBadge>
      </div>
      <Timeline
        items={[
          {
            id: '1',
            title: 'Draft created',
            description: 'Agent proposed a note update',
            status: 'Draft',
            tone: 'info',
          },
          {
            id: '2',
            title: 'Human review',
            description: 'Awaiting decision',
            status: 'Pending',
            tone: 'warning',
          },
        ]}
      />
      <DiffCard before="Original note body" after="Improved note body with extracted actions" />
    </div>
  ),
};

export const DataDisplay: Story = {
  render: () => (
    <div className="grid max-w-3xl gap-4">
      <DataList>
        <DataListItem selected>
          <div className="font-medium">Workspace intelligence</div>
          <DataListMeta>
            <Clock className="h-3.5 w-3.5" /> Updated 4 minutes ago
          </DataListMeta>
        </DataListItem>
        <DataListItem>Inbox processing</DataListItem>
      </DataList>
      <DataTable>
        <DataTableHeader>
          <DataTableRow>
            <DataTableHead>Name</DataTableHead>
            <DataTableHead>Status</DataTableHead>
          </DataTableRow>
        </DataTableHeader>
        <DataTableBody>
          <DataTableRow>
            <DataTableCell>Research notes</DataTableCell>
            <DataTableCell>
              <StatusBadge tone="success">Healthy</StatusBadge>
            </DataTableCell>
          </DataTableRow>
        </DataTableBody>
      </DataTable>
      <Button variant="subtle">Open details</Button>
    </div>
  ),
};