<script module>
import { defineMeta } from '@storybook/addon-svelte-csf';
import Slider from './Slider.svelte';

const { Story } = defineMeta({
    title: 'Shared/Slider',
    component: Slider,
    tags: ['autodocs'],
    parameters: {
        docs: {
            description: {
                component:
                    'Styled bits-ui slider component with red accent (#ff3b30). Thumb is a 45° rotated square with hover/active scale animations.',
            },
            story: { inline: false }, // Render stories in iframe for state isolation
        },
    },
    argTypes: {
        value: {
            control: 'number',
            description: 'Current value (two-way bindable)',
        },
        min: {
            control: 'number',
            description: 'Minimum value',
        },
        max: {
            control: 'number',
            description: 'Maximum value',
        },
        step: {
            control: 'number',
            description: 'Step size for value increments',
        },
    },
});
</script>

<script lang="ts">
import type { ComponentProps } from 'svelte';
let value = $state(50);
let valueLow = $state(25);
let valueHigh = $state(75);
</script>

<Story
    name="Horizontal"
    args={{
        orientation: 'horizontal',
        min: 0,
        max: 100,
        step: 1,
        value,
    }}
>
    {#snippet template(args: ComponentProps<typeof Slider>)}
        <div class="p-8">
            <Slider {...args} />
            <p class="mt-4 text-sm text-muted-foreground">Value: {args.value}</p>
            <p class="mt-2 text-xs text-muted-foreground">
                Hover over thumb to see scale effect, click and drag to interact
            </p>
        </div>
    {/snippet}
</Story>

<Story
    name="Vertical"
    args={{
        orientation: 'vertical',
        min: 0,
        max: 100,
        step: 1,
        value,
    }}
>
    {#snippet template(args: ComponentProps<typeof Slider>)}
        <div class="p-8 flex items-center gap-8 h-72">
            <Slider {...args} />
            <div>
                <p class="text-sm text-muted-foreground">Value: {args.value}</p>
                <p class="mt-2 text-xs text-muted-foreground">Vertical orientation with same red accent</p>
            </div>
        </div>
    {/snippet}
</Story>

<Story
    name="With Label"
    args={{
        orientation: 'horizontal',
        min: 0,
        max: 100,
        step: 1,
        value,
    }}
>
    {#snippet template(args: ComponentProps<typeof Slider>)}
        <div class="p-8">
            <Slider {...args} />
            <p class="mt-4 text-sm text-muted-foreground">Slider with inline label</p>
        </div>
    {/snippet}
</Story>

<Story
    name="Interactive States"
    args={{
        orientation: 'horizontal',
        min: 0,
        max: 100,
        step: 1,
        value: 50,
    }}
>
    {#snippet template(args: ComponentProps<typeof Slider>)}
        <div class="p-8 space-y-8">
            <div>
                <p class="text-sm font-medium mb-2">Thumb: 45° rotated square</p>
                <Slider {...args} value={50} />
            </div>
            <div>
                <p class="text-sm font-medium mb-2">Hover State (scale-125)</p>
                <Slider {...args} value={50} />
            </div>
            <div>
                <p class="text-sm font-medium mb-2">Different Values</p>
                <div class="space-y-4">
                    <Slider {...args} value={10} />
                    <Slider {...args} value={50} />
                    <Slider {...args} value={90} />
                </div>
            </div>
            <div>
                <p class="text-sm font-medium mb-2">Focus State (ring-2 ring-[#ff3b30]/20)</p>
                <p class="text-xs text-muted-foreground">Tab to the thumb to see focus ring</p>
                <Slider {...args} value={50} class="mt-2" />
            </div>
        </div>
    {/snippet}
</Story>

<Story
    name="Step Sizes"
    args={{
        orientation: 'horizontal',
        min: 0,
        max: 100,
        step: 1,
        value,
    }}
>
    {#snippet template(args: ComponentProps<typeof Slider>)}
        <div class="p-8 space-y-6">
            <div>
                <p class="text-sm font-medium mb-2">Step: 1 (default)</p>
                <Slider {...args} value={50} step={1} />
            </div>
            <div>
                <p class="text-sm font-medium mb-2">Step: 10</p>
                <Slider {...args} value={50} step={10} />
            </div>
            <div>
                <p class="text-sm font-medium mb-2">Step: 25</p>
                <Slider {...args} value={50} step={25} />
            </div>
        </div>
    {/snippet}
</Story>
