@extends('layouts.admin')

@section('title', 'UI Kit')

@section('content')
<div class="tw-migrated tw-page space-y-8">
    <x-ui.page-header title="Design System / UI Kit">
        <x-slot:actions>
            <button type="button" class="tw-btn-outline" @click="$store.theme.toggle()">
                <x-ui.icon name="moon" class="h-4 w-4" />
                Toggle dark
            </button>
        </x-slot:actions>
    </x-ui.page-header>

    <x-ui.toast />

    <section class="space-y-3">
        <h2 class="text-lg font-semibold">Buttons</h2>
        <div class="flex flex-wrap gap-2">
            <x-ui.button>Primary</x-ui.button>
            <x-ui.button variant="secondary">Secondary</x-ui.button>
            <x-ui.button variant="outline">Outline</x-ui.button>
            <x-ui.button variant="ghost">Ghost</x-ui.button>
            <x-ui.button variant="danger">Danger</x-ui.button>
            <x-ui.button variant="success">Success</x-ui.button>
            <x-ui.button size="touch">Touch</x-ui.button>
        </div>
    </section>

    <section class="grid gap-4 md:grid-cols-2">
        <x-ui.card title="Forms">
            <x-ui.input name="demo_name" label="Name" placeholder="Jane" />
            <div class="mt-3">
                <x-ui.select name="demo_status" label="Status">
                    <option>Open</option>
                    <option>Closed</option>
                </x-ui.select>
            </div>
            <div class="mt-3">
                <x-ui.textarea name="demo_notes" label="Notes" rows="3" />
            </div>
            <div class="mt-3 flex gap-4">
                <x-ui.checkbox name="demo_active" label="Active" />
                <x-ui.radio name="demo_channel" value="pos" label="POS" />
            </div>
        </x-ui.card>

        <x-ui.card title="Feedback">
            <x-ui.alert type="success">Saved successfully.</x-ui.alert>
            <x-ui.alert type="danger">Something went wrong.</x-ui.alert>
            <x-ui.alert type="warning">Stock is low.</x-ui.alert>
            <x-ui.alert type="info">Tip: use components.</x-ui.alert>
            <div class="mt-3 flex flex-wrap gap-2">
                <x-ui.badge variant="primary">Primary</x-ui.badge>
                <x-ui.badge variant="success">Paid</x-ui.badge>
                <x-ui.badge variant="warning">In transit</x-ui.badge>
                <x-ui.badge variant="danger">Cancelled</x-ui.badge>
                <x-ui.status-dot color="success" />
                <x-ui.spinner />
            </div>
            <button type="button" class="tw-btn-primary mt-4"
                @click="$store.toasts.push('Toast from UI kit', 'success')">
                Show toast
            </button>
        </x-ui.card>
    </section>

    <section class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
        <x-ui.stat-card label="Sales" value="₹1,24,000" hint="Today" />
        <x-ui.stat-card label="Orders" value="48" hint="+12%" />
        <x-ui.stat-card label="Stock alerts" value="7" hint="Below min" />
        <x-ui.stat-card label="Transfers" value="3" hint="In transit" />
    </section>

    <x-ui.card title="Table">
        <x-ui.table>
            <x-slot:thead>
                <tr>
                    <th>SKU</th><th>Name</th><th>Qty</th><th>Status</th>
                </tr>
            </x-slot:thead>
            <tr><td>SKU-1</td><td>Gold Ring</td><td>12</td><td><x-ui.badge variant="success">In stock</x-ui.badge></td></tr>
            <tr><td>SKU-2</td><td>Necklace</td><td>0</td><td><x-ui.badge variant="danger">Out</x-ui.badge></td></tr>
        </x-ui.table>
    </x-ui.card>

    <x-ui.empty-state title="No items" description="Empty state preview.">
        <x-slot:action>
            <x-ui.button href="#">Add item</x-ui.button>
        </x-slot:action>
    </x-ui.empty-state>

    <div class="grid gap-2 sm:grid-cols-3">
        <x-ui.skeleton class="h-24" />
        <x-ui.skeleton class="h-24" />
        <x-ui.skeleton class="h-24" />
    </div>
</div>
@endsection