import type { Meta, StoryObj } from '@storybook/angular';
import { applicationConfig } from '@storybook/angular';
import { provideRouter } from '@angular/router';
import { AanvraagBlockComponent } from './aanvraag-block.component';
import { Aanvraag } from '@registratie/domain/aanvraag';

const base = {
  id: 'a1',
  type: 'registratie',
  documentIds: [],
  createdAt: '2026-06-28T10:00:00Z',
  updatedAt: '2026-06-28T10:05:00Z',
  submittedAt: '2026-06-28T10:05:00Z',
} satisfies Omit<Aanvraag, 'status'>;

const meta: Meta<AanvraagBlockComponent> = {
  title: 'Domein/Registratie/Aanvraag Block',
  component: AanvraagBlockComponent,
  decorators: [applicationConfig({ providers: [provideRouter([])] })],
  render: (args) => ({
    props: args,
    // A row is an <li> — the keuzelijst styling needs the real list context.
    template: `<ul class="keuzelijst__list"><app-aanvraag-block [aanvraag]="aanvraag" /></ul>`,
  }),
  parameters: {
    // Structural: app-aanvraag-block's host sits between the keuzelijst <ul> and its <li>
    // — axe's list/listitem rule needs them adjacent regardless of `display:contents`.
    // WP-11 (CIBG markup fidelity) reworks this markup; see docs/backlog/WP-11-markup-fidelity.md.
    a11y: { disable: true },
  },
};
export default meta;
type Story = StoryObj<AanvraagBlockComponent>;

// One story per status variant; the block renders its own body + actions.
// A Concept renders as a CIBG melding (block element), not a keuzelijst <li> — no <ul> wrapper.
export const Concept: Story = {
  args: { aanvraag: { ...base, status: { tag: 'Concept', stepIndex: 1, stepCount: 3 } } },
  render: (args) => ({ props: args, template: `<app-aanvraag-block [aanvraag]="aanvraag" />` }),
};
export const InBehandelingAuto: Story = {
  args: {
    aanvraag: {
      ...base,
      status: { tag: 'InBehandeling', referentie: 'BIG-2026-456789', manual: false },
    },
  },
};
export const InBehandelingManual: Story = {
  args: {
    aanvraag: {
      ...base,
      type: 'registratie',
      status: { tag: 'InBehandeling', referentie: 'BIG-2026-456789', manual: true },
    },
  },
};
export const Goedgekeurd: Story = {
  args: { aanvraag: { ...base, status: { tag: 'Goedgekeurd', referentie: 'BIG-2026-456789' } } },
};
export const Afgewezen: Story = {
  args: {
    aanvraag: {
      ...base,
      type: 'herregistratie',
      status: {
        tag: 'Afgewezen',
        referentie: 'BIG-2026-456789',
        reden: 'Aanvraag afgewezen: geen gewerkte uren geregistreerd.',
      },
    },
  },
};
