import type { Meta, StoryObj } from '@storybook/vue3'
import HealthDashboardView from './HealthDashboardView.vue'

interface ViewArgs {
  data: {
    status: string
    version: string
    uptime_seconds: number
    timestamp: string
  } | null
  pending: boolean
  error: { message: string } | null
}

const meta = {
  title: 'Components/HealthDashboardView',
  component: HealthDashboardView,
  tags: ['autodocs'],
  argTypes: {
    pending: { control: 'boolean' },
  },
  parameters: {
    docs: {
      description: {
        component:
          'Pure presentational component for the health dashboard. ' +
          'Accepts `data`, `pending`, `error` as props so all 3 states can be ' +
          'previewed in Storybook and asserted in unit tests. The data fetching ' +
          'wrapper is `HealthDashboard.vue`.',
      },
    },
  },
} satisfies Meta<ViewArgs>

export default meta

type Story = StoryObj<typeof meta>

export const Healthy: Story = {
  args: {
    data: {
      status: 'healthy',
      version: '1.4.0',
      uptime_seconds: 3600,
      timestamp: '2026-05-03T17:30:00.000Z',
    },
    pending: false,
    error: null,
  },
}

export const Loading: Story = {
  args: {
    data: null,
    pending: true,
    error: null,
  },
}

export const ErrorState: Story = {
  args: {
    data: null,
    pending: false,
    error: { message: '[GET] "/api/healthz": 502 Bad Gateway (simulated)' },
  },
}

export const HealthyHighUptime: Story = {
  args: {
    data: {
      status: 'healthy',
      version: '1.5.0-rc1',
      uptime_seconds: 86400 * 7,
      timestamp: new Date().toISOString(),
    },
    pending: false,
    error: null,
  },
}