@extends('layouts.admin', ['pageTitle' => __('Shell preview'), 'active' => 'shell.preview'])

@section('title', __('Shell preview'))

@section('page-actions')
    <x-button variant="secondary" icon="book" as="a" href="{{ route('styleguide') }}">
        {{ __('Style guide') }}
    </x-button>
    <x-button variant="primary" icon="plus">
        {{ __('New item') }}
    </x-button>
@endsection

@section('content')
    <p class="dc-text-muted mb-4">
        {{ __('This page renders the S0.1 admin shell exactly as future business modules will consume it: sidebar, topbar, page header, and content grid.') }}
    </p>

    <div class="dc-grid-auto mb-4">
        <x-stat label="{{ __('Sales today') }}"      value="{{ format_money(0) }}"     hint="{{ __('Awaiting first invoice') }}" icon="chart" />
        <x-stat label="{{ __('Receivables') }}"      value="{{ format_money(0) }}"     hint="{{ __('No parties yet') }}"          icon="file" />
        <x-stat label="{{ __('Cash in hand') }}"     value="{{ format_money(0) }}"     hint="{{ __('Ledger not initialised') }}" icon="shield" />
        <x-stat label="{{ __('Active users') }}"     value="0"                          hint="{{ __('Auth arrives in Sprint 0.2') }}" icon="users" />
    </div>

    <div class="row g-4">
        <div class="col-lg-8">
            <x-card title="{{ __('Sprint 0.1 progress') }}"
                    subtitle="{{ __('Modules delivered in this sub-sprint.') }}">
                <div class="dc-vstack">
                    @foreach ([
                        ['label' => 'System Configuration',          'status' => 'success'],
                        ['label' => 'Database Migration Structure',  'status' => 'success'],
                        ['label' => 'Environment Configuration',     'status' => 'success'],
                        ['label' => 'Global Helper Functions',       'status' => 'success'],
                        ['label' => 'Error Handling',                'status' => 'success'],
                        ['label' => 'Logging System',                'status' => 'success'],
                        ['label' => 'Base / Guest / Auth / Admin Layouts', 'status' => 'success'],
                        ['label' => 'Bootstrap 5.3 UI Foundation',   'status' => 'success'],
                        ['label' => 'Theme System (light + dark + system)', 'status' => 'success'],
                        ['label' => 'Responsive Layout',             'status' => 'success'],
                        ['label' => 'Common & Navigation Components','status' => 'success'],
                    ] as $item)
                        <div class="d-flex align-items-center justify-content-between gap-3 py-1">
                            <div class="d-flex align-items-center gap-3">
                                <span class="dc-sidebar__brand-mark" style="width:32px;height:32px;font-size:.75rem;">
                                    <x-icon name="check" size="16" />
                                </span>
                                <div>
                                    <div class="fw-semibold">{{ $item['label'] }}</div>
                                    <div class="dc-text-muted small">{{ __('Production ready') }}</div>
                                </div>
                            </div>
                            <x-badge tone="{{ $item['status'] }}">{{ __('Done') }}</x-badge>
                        </div>
                    @endforeach
                </div>
            </x-card>
        </div>

        <div class="col-lg-4">
            <x-card title="{{ __('Environment') }}">
                <dl class="mb-0">
                    <div class="d-flex justify-content-between py-2 border-bottom">
                        <dt class="dc-text-muted">{{ __('App name') }}</dt>
                        <dd class="mb-0 fw-medium">{{ $__product['name'] }}</dd>
                    </div>
                    <div class="d-flex justify-content-between py-2 border-bottom">
                        <dt class="dc-text-muted">{{ __('Version') }}</dt>
                        <dd class="mb-0 fw-medium">v{{ $__product['version'] }}</dd>
                    </div>
                    <div class="d-flex justify-content-between py-2 border-bottom">
                        <dt class="dc-text-muted">{{ __('Env') }}</dt>
                        <dd class="mb-0 fw-medium">{{ config('app.env') }}</dd>
                    </div>
                    <div class="d-flex justify-content-between py-2 border-bottom">
                        <dt class="dc-text-muted">{{ __('PHP') }}</dt>
                        <dd class="mb-0 fw-medium">{{ PHP_VERSION }}</dd>
                    </div>
                    <div class="d-flex justify-content-between py-2 border-bottom">
                        <dt class="dc-text-muted">{{ __('Locale') }}</dt>
                        <dd class="mb-0 fw-medium">{{ app()->getLocale() }}</dd>
                    </div>
                    <div class="d-flex justify-content-between py-2">
                        <dt class="dc-text-muted">{{ __('Timezone') }}</dt>
                        <dd class="mb-0 fw-medium">{{ config('app.timezone') }}</dd>
                    </div>
                </dl>
            </x-card>
        </div>
    </div>
@endsection