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

const meta = {
  component: TitanIcon,
  title: 'UI/TitanIcon',
  tags: ['autodocs'],
  argTypes: {
    name: {
      control: 'select',
      options: [
        'ui/casket',
        'ui/casket-open',
        'ui/casket-closed',
        'ui/family',
        'ui/fire',
        'ui/question-mark',
        'ui/tombstone',
        'ui/urn',
        'benefits/cart',
        'benefits/truck',
        'benefits/casket',
        'benefits/heart'
      ],
      description: 'Icon name in namespace/name format'
    },
    ariaLabel: {
      control: 'text',
      description: 'Accessibility label for screen readers'
    }
  }
} satisfies Meta<typeof TitanIcon>

export default meta
type Story = StoryObj<typeof meta>

/**
 * Default icon rendering with basic styling
 */
export const Default: Story = {
  args: {
    name: 'ui/casket'
  },
  render: (args) => ({
    components: { TitanIcon },
    setup() {
      return { args }
    },
    template: `
      <div class="w-12 h-12 text-titan-green-800">
        <TitanIcon v-bind="args" />
      </div>
    `
  })
}

/**
 * All UI namespace icons
 */
export const UIIcons: Story = {
  render: () => ({
    components: { TitanIcon },
    setup() {
      const icons = [
        'ui/casket',
        'ui/casket-open',
        'ui/casket-closed',
        'ui/family',
        'ui/fire',
        'ui/question-mark',
        'ui/tombstone',
        'ui/urn'
      ]
      return { icons }
    },
    template: `
      <div class="grid grid-cols-4 gap-6">
        <div
          v-for="icon in icons"
          :key="icon"
          class="flex flex-col items-center gap-2"
        >
          <div class="w-16 h-16 text-titan-green-800">
            <TitanIcon :name="icon" />
          </div>
          <p class="text-xs text-center">{{ icon }}</p>
        </div>
      </div>
    `
  })
}

/**
 * All benefits namespace icons
 */
export const BenefitsIcons: Story = {
  render: () => ({
    components: { TitanIcon },
    setup() {
      const icons = [
        'benefits/cart',
        'benefits/truck',
        'benefits/casket',
        'benefits/heart'
      ]
      return { icons }
    },
    template: `
      <div class="grid grid-cols-4 gap-6">
        <div
          v-for="icon in icons"
          :key="icon"
          class="flex flex-col items-center gap-2"
        >
          <div class="w-16 h-16 text-titan-green-800">
            <TitanIcon :name="icon" />
          </div>
          <p class="text-xs text-center">{{ icon }}</p>
        </div>
      </div>
    `
  })
}

/**
 * Color variations using brand colors
 */
export const ColorVariations: Story = {
  render: () => ({
    components: { TitanIcon },
    template: `
      <div class="flex gap-8 items-center">
        <div class="flex flex-col items-center gap-2">
          <div class="w-12 h-12 text-titan-green-800">
            <TitanIcon name="ui/casket" aria-label="Green casket" />
          </div>
          <p class="text-xs">Green</p>
        </div>
        <div class="flex flex-col items-center gap-2">
          <div class="w-12 h-12 text-titan-yellow-400">
            <TitanIcon name="ui/casket" aria-label="Yellow casket" />
          </div>
          <p class="text-xs">Yellow</p>
        </div>
        <div class="flex flex-col items-center gap-2">
          <div class="w-12 h-12 text-titan-purple-500">
            <TitanIcon name="ui/casket" aria-label="Purple casket" />
          </div>
          <p class="text-xs">Purple</p>
        </div>
        <div class="flex flex-col items-center gap-2">
          <div class="w-12 h-12 text-gray-400">
            <TitanIcon name="ui/casket" aria-label="Gray casket" />
          </div>
          <p class="text-xs">Gray</p>
        </div>
      </div>
    `
  })
}

/**
 * Size variations controlled by parent container
 */
export const SizeVariations: Story = {
  render: () => ({
    components: { TitanIcon },
    template: `
      <div class="flex gap-8 items-end">
        <div class="flex flex-col items-center gap-2">
          <div class="w-4 h-4 text-titan-green-800">
            <TitanIcon name="benefits/heart" aria-label="Small heart" />
          </div>
          <p class="text-xs">16px</p>
        </div>
        <div class="flex flex-col items-center gap-2">
          <div class="w-6 h-6 text-titan-green-800">
            <TitanIcon name="benefits/heart" aria-label="Medium heart" />
          </div>
          <p class="text-xs">24px</p>
        </div>
        <div class="flex flex-col items-center gap-2">
          <div class="w-12 h-12 text-titan-green-800">
            <TitanIcon name="benefits/heart" aria-label="Large heart" />
          </div>
          <p class="text-xs">48px</p>
        </div>
        <div class="flex flex-col items-center gap-2">
          <div class="w-24 h-24 text-titan-green-800">
            <TitanIcon name="benefits/heart" aria-label="Extra large heart" />
          </div>
          <p class="text-xs">96px</p>
        </div>
      </div>
    `
  })
}

/**
 * Interactive playground with all controls
 */
export const Playground: Story = {
  args: {
    name: 'ui/family',
    ariaLabel: 'Family icon'
  },
  render: (args) => ({
    components: { TitanIcon },
    setup() {
      return { args }
    },
    template: `
      <div class="w-24 h-24 text-titan-green-800">
        <TitanIcon v-bind="args" />
      </div>
    `
  })
}