import type { AppStory, AppStoryMeta } from './csf.types'
import { UserCard, type User } from './UserCard'
import { stubQuery } from './fixtures/stubQuery'

// App-level widget: composed from library primitives (Avatar + Badge + Card) and
// driven by a query, so it's previewed across its named data-state scenarios in
// the Design tab's App lens — not as simple variants.
const meta: AppStoryMeta = {
  title: 'UserCard',
  component: UserCard,
  group: 'Account',
  description: 'Shows the current user, composed from the library Avatar + Badge.',
  tags: ['app'],
  inputs: [
    {
      name: 'query',
      kind: 'query',
      type: 'UseQueryResult<User | null>',
      description: 'Fetches the user to display.',
    },
  ],
  argTypes: {
    query: { description: 'User query result (loading / error / empty / success).', control: false },
  },
}
export default meta

const sampleUser: User = {
  id: 'u_1',
  name: 'Ada Lovelace',
  email: 'ada@example.com',
  role: 'Principal Engineer',
  status: 'active',
}

function LoadingScenario() {
  return <UserCard query={stubQuery.loading<User | null>()} />
}
export const Loading: AppStory = { tag: 'query: pending', render: LoadingScenario }

function ErrorScenario() {
  return <UserCard query={stubQuery.error<User | null>(new Error('Request failed'))} />
}
export const Errored: AppStory = { name: 'Error', tag: 'query: error', render: ErrorScenario }

function EmptyScenario() {
  return <UserCard query={stubQuery.empty<User | null>()} />
}
export const Empty: AppStory = { tag: 'query: no data', render: EmptyScenario }

function ActiveScenario() {
  return <UserCard query={stubQuery.success<User | null>(sampleUser)} />
}
export const Active: AppStory = { name: 'Active user', tag: 'query: success', render: ActiveScenario }