@extends('layouts.admin', [
    'pageTitle'    => __('Design system'),
    'pageSubtitle' => __('Decent DS - the visual language shared by every screen in the ERP.'),
    'active'       => 'styleguide',
    'breadcrumbs'  => [
        ['label' => __('Home'), 'href' => route('landing')],
        ['label' => __('Design system')],
    ],
])

@section('title', __('Design system'))

@section('content')
    <div class="dc-vstack dc-stack-loose">

        <x-card title="{{ __('Color tokens') }}" subtitle="{{ __('All colors reference --dc-* CSS variables. No hard-coded values allowed in components.') }}">
            @php
                $tokens = [
                    ['name' => 'bg-canvas',   'var' => '--dc-bg-canvas'],
                    ['name' => 'bg-surface',  'var' => '--dc-bg-surface'],
                    ['name' => 'bg-inset',    'var' => '--dc-bg-inset'],
                    ['name' => 'text-primary','var' => '--dc-text-primary'],
                    ['name' => 'text-muted',  'var' => '--dc-text-muted'],
                    ['name' => 'brand-primary','var' => '--dc-brand-primary'],
                    ['name' => 'status-success','var' => '--dc-status-success'],
                    ['name' => 'status-info',   'var' => '--dc-status-info'],
                    ['name' => 'status-warning','var' => '--dc-status-warning'],
                    ['name' => 'status-danger', 'var' => '--dc-status-danger'],
                ];
            @endphp
            <div class="dc-grid-auto">
                @foreach ($tokens as $t)
                    <div class="dc-card dc-card--soft" style="border:1px solid var(--dc-border-subtle); border-radius: var(--bs-border-radius-lg);">
                        <div style="height:64px; background: var({{ $t['var'] }}); border-top-left-radius: inherit; border-top-right-radius: inherit;"></div>
                        <div class="dc-card__body" style="padding: 12px 16px;">
                            <div class="fw-semibold">{{ $t['name'] }}</div>
                            <code class="dc-text-muted small">var({{ $t['var'] }})</code>
                        </div>
                    </div>
                @endforeach
            </div>
        </x-card>

        <x-card title="{{ __('Typography') }}">
            <div class="dc-vstack">
                <div><h1 class="mb-1">Heading 1 — 30px semibold</h1><div class="dc-text-muted small">Inter · letter-spacing -.02em</div></div>
                <div><h2 class="mb-1">Heading 2 — 24px semibold</h2></div>
                <div><h3 class="mb-1">Heading 3 — 20px semibold</h3></div>
                <div><h4 class="mb-1">Heading 4 — 18px semibold</h4></div>
                <div><p class="mb-1">Body — 15px regular. The quick brown fox jumps over the lazy dog. 1234567890</p></div>
                <div><p class="dc-text-mono mb-1">Mono — {{ format_money(1234567.89) }} · IN-DL-01 · 27AAAAA0000A1Z5</p></div>
            </div>
        </x-card>

        <x-card title="{{ __('Buttons') }}">
            <div class="dc-cluster">
                <x-button variant="primary">Primary</x-button>
                <x-button variant="secondary">Secondary</x-button>
                <x-button variant="ghost">Ghost</x-button>
                <x-button variant="danger">Danger</x-button>
                <x-button variant="primary" size="sm">Small</x-button>
                <x-button variant="primary" size="lg" icon="plus">With icon</x-button>
                <x-button variant="secondary" icon="check" iconRight="chevron-r">Both icons</x-button>
                <x-button variant="ghost" disabled>Disabled</x-button>
            </div>
        </x-card>

        <x-card title="{{ __('Form controls') }}">
            <form onsubmit="return false;" class="row g-3">
                <div class="col-md-6">
                    <x-input name="demo_name" label="Full name" placeholder="Rajesh Kumar" required />
                </div>
                <div class="col-md-6">
                    <x-input name="demo_gstin" label="GSTIN" placeholder="27AAAAA0000A1Z5" hint="15 characters, uppercase." />
                </div>
                <div class="col-md-6">
                    <x-input name="demo_amount" type="text" label="Amount" placeholder="0.00" inputmode="decimal" />
                </div>
                <div class="col-md-6">
                    <x-input name="demo_invalid" label="With error" value="!!!" error="Please enter a valid value." />
                </div>
            </form>
        </x-card>

        <x-card title="{{ __('Badges & alerts') }}">
            <div class="dc-cluster mb-3">
                <x-badge>Neutral</x-badge>
                <x-badge tone="success">Success</x-badge>
                <x-badge tone="info">Info</x-badge>
                <x-badge tone="warning">Warning</x-badge>
                <x-badge tone="danger">Danger</x-badge>
            </div>
            <div class="dc-vstack">
                <x-alert tone="info" title="Info">Backups are configured to run nightly at 02:00 IST.</x-alert>
                <x-alert tone="success" title="Success">System configuration saved.</x-alert>
                <x-alert tone="warning" title="Warning">The financial year 2025-26 will lock in 15 days.</x-alert>
                <x-alert tone="danger" title="Danger">Two failed login attempts detected in the last 5 minutes.</x-alert>
            </div>
        </x-card>

        <x-card title="{{ __('Tables') }}" padded="false">
            <div class="dc-table-wrap" style="border:0; border-radius:0;">
                <table class="dc-table">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>{{ __('Module') }}</th>
                            <th>{{ __('Sub-sprint') }}</th>
                            <th>{{ __('Status') }}</th>
                            <th class="text-end">{{ __('Effort') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ([
                            ['Environment Configuration',  'S0.1', 'success', '2 hrs'],
                            ['Logging System',             'S0.1', 'success', '3 hrs'],
                            ['Base Layouts + Theme',       'S0.1', 'success', '6 hrs'],
                            ['Authentication',             'S0.2', 'info',    'planned'],
                            ['RBAC & Permissions',         'S0.2', 'info',    'planned'],
                        ] as $i => $row)
                            <tr>
                                <td class="dc-text-muted">{{ $i + 1 }}</td>
                                <td class="fw-medium">{{ $row[0] }}</td>
                                <td>{{ $row[1] }}</td>
                                <td><x-badge tone="{{ $row[2] }}">{{ ucfirst($row[2]) }}</x-badge></td>
                                <td class="text-end dc-text-numeric">{{ $row[3] }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </x-card>

        <x-card title="{{ __('Empty state') }}">
            <x-empty-state title="{{ __('Nothing here yet') }}" icon="file">
                {{ __('Business modules land from Sprint 1 onwards. This screen becomes your working dashboard.') }}
            </x-empty-state>
        </x-card>

        <x-card title="{{ __('Skeletons') }}">
            <div class="dc-vstack">
                <div class="dc-skeleton" style="height: 20px; width: 40%;"></div>
                <div class="dc-skeleton" style="height: 12px; width: 90%;"></div>
                <div class="dc-skeleton" style="height: 12px; width: 78%;"></div>
                <div class="dc-skeleton" style="height: 12px; width: 65%;"></div>
            </div>
        </x-card>

    </div>
@endsection