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

const meta: Meta<typeof OrderLineField> = {
  title: 'Fields/Domain/OrderLineField',
  component: OrderLineField,
  argTypes: {
    modelValue: {
      control: 'object',
      description: 'Order line item (productId, quantity, unitPrice, lineTotal)'
    }
  }
}

export default meta
type Story = StoryObj<typeof OrderLineField>

const Template = (args: any) => ({
  components: { OrderLineField },
  setup() {
    return { args }
  },
  template: `
    <div>
      <OrderLineField
        v-bind="args"
        @update:modelValue="args.modelValue = $event"
        @remove="console.log('Line removed')"
      />
      <div class="mt-3">
        <strong>Current Value:</strong>
        <pre>{{ JSON.stringify(args.modelValue, null, 2) }}</pre>
      </div>
    </div>
  `
})

export const Default: Story = {
  render: Template,
  args: {
    modelValue: {
      productId: '',
      quantity: 1,
      unitPrice: 0,
      lineTotal: 0
    }
  }
}

export const WithProduct: Story = {
  render: Template,
  args: {
    modelValue: {
      productId: 'PROD-001',
      quantity: 5,
      unitPrice: 50000,
      lineTotal: 250000
    }
  }
}

export const MultipleLines: Story = {
  render: (args: any) => ({
    components: { OrderLineField },
    setup() {
      const lines = [
        { productId: 'PROD-001', quantity: 5, unitPrice: 50000, lineTotal: 250000 },
        { productId: 'PROD-002', quantity: 3, unitPrice: 75000, lineTotal: 225000 },
        { productId: '', quantity: 1, unitPrice: 0, lineTotal: 0 }
      ]
      return { lines, args }
    },
    template: `
      <div>
        <h5>Order Lines</h5>
        <div v-for="(line, idx) in lines" :key="idx" class="mb-3">
          <OrderLineField
            v-model="lines[idx]"
            @remove="lines.splice(idx, 1)"
          />
        </div>
        <strong>Order Total:</strong>
        ₩{{ lines.reduce((sum, l) => sum + (l.lineTotal || 0), 0).toLocaleString() }}
      </div>
    `
  })
}

export const WithValidation: Story = {
  render: Template,
  args: {
    modelValue: {
      productId: 'PROD-001',
      quantity: 10,
      unitPrice: 50000,
      lineTotal: 500000
    }
  },
  parameters: {
    docs: {
      description: {
        story: 'Example with quantity exceeding available stock will show validation error'
      }
    }
  }
}

export const Empty: Story = {
  render: Template,
  args: {
    modelValue: {
      productId: '',
      quantity: 0,
      unitPrice: 0,
      lineTotal: 0
    }
  }
}