@php
    $input = 'w-full rounded-xl border border-edge bg-ink px-3.5 py-2.5 text-sm text-slate-100 placeholder:text-slate-500 focus:border-brand focus:ring-2 focus:ring-brand/30';
    $lbl = 'mb-1.5 block text-sm font-medium text-slate-300';
    $fld = function ($label, $model, $ph = '', $type = 'text') use ($input, $lbl) {
        return '<div><label class="'.$lbl.'">'.e($label).'</label><input type="'.$type.'" wire:model="'.$model.'" placeholder="'.e($ph).'" class="'.$input.'"></div>';
    };
    $save = fn ($method) => '<button wire:click="'.$method.'" class="rounded-xl bg-brand px-4 py-2.5 text-sm font-semibold text-white shadow-lg shadow-brand/25 hover:bg-brand-700">Save Changes</button>';
    $tabs = [
        'general' => ['General', 'settings'], 'company' => ['Company', 'building-2'], 'email' => ['Email', 'mail'],
        'sms' => ['SMS', 'message-square'],
        'storage' => ['Storage', 'database'], 'social' => ['Social & OAuth', 'share-2'], 'payment' => ['Payment Gateways', 'credit-card'],
        'automation' => ['Automation', 'workflow'], 'security' => ['Security', 'shield'], 'system' => ['System', 'server'], 'desktop' => ['Desktop Updates', 'monitor'],
    ];
@endphp

<div>
    <x-admin.page-head title="Settings" subtitle="Manage application settings and preferences." />

    {{-- Tab bar --}}
    <div class="mb-6 flex gap-5 overflow-x-auto border-b border-edge">
        @foreach ($tabs as $key => [$label, $icon])
            <button wire:click="$set('tab','{{ $key }}')" class="relative -mb-px flex items-center gap-2 whitespace-nowrap border-b-2 pb-3 text-sm font-medium transition {{ $tab === $key ? 'border-brand text-white' : 'border-transparent text-slate-400 hover:text-slate-200' }}">
                <x-dynamic-component :component="'lucide-'.$icon" class="h-4 w-4" /> {{ $label }}
            </button>
        @endforeach
    </div>

    <div class="grid grid-cols-1 gap-6 xl:grid-cols-[minmax(0,1.7fr)_minmax(0,1fr)]">
        {{-- ============ Left: tab content ============ --}}
        <div class="min-w-0 space-y-6">
            {{-- GENERAL --}}
            @if ($tab === 'general')
                <x-admin.card>
                    <h3 class="text-base font-semibold text-white">General Settings</h3>
                    <p class="mb-5 text-sm text-slate-500">Configure general application settings.</p>
                    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                        <div><label class="{{ $lbl }}">Application Name</label><input wire:model="general.site_name" class="{{ $input }}">@error('general.site_name')<p class="mt-1 text-xs text-red-400">{{ $message }}</p>@enderror</div>
                        {!! $fld('Application URL', 'general.app_url', 'https://ccpublisher.com') !!}
                        {!! $fld('Admin Email', 'general.admin_email', 'admin@ccpublisher.com', 'email') !!}
                        <div><label class="{{ $lbl }}">Default Timezone</label><select wire:model="general.timezone" class="{{ $input }}">@foreach (['UTC','America/New_York','Europe/London','Asia/Karachi','Asia/Dubai','Asia/Kolkata'] as $tz)<option value="{{ $tz }}">{{ $tz }}</option>@endforeach</select></div>
                        <div><label class="{{ $lbl }}">Date Format</label><select wire:model="general.date_format" class="{{ $input }}"><option>MM/DD/YYYY</option><option>DD/MM/YYYY</option><option>YYYY-MM-DD</option></select></div>
                        <div><label class="{{ $lbl }}">Time Format</label><select wire:model="general.time_format" class="{{ $input }}"><option value="12h">12 Hour (AM/PM)</option><option value="24h">24 Hour</option></select></div>
                        <div><label class="{{ $lbl }}">Default Language</label><select wire:model="general.language" class="{{ $input }}"><option value="en">English</option><option value="ur">Urdu</option><option value="ar">Arabic</option></select></div>
                        {!! $fld('Items Per Page', 'general.items_per_page', '25', 'number') !!}
                    </div>
                    <div class="mt-5 divide-y divide-edge rounded-xl border border-edge px-4">
                        <x-admin.toggle model="general.maintenance_mode" label="Maintenance Mode" hint="Put the application in maintenance mode." />
                        <x-admin.toggle model="general.registration_enabled" label="Allow User Registration" hint="Allow new users to register." />
                        <x-admin.toggle model="general.email_verification" label="Email Verification" hint="Require email verification for new users." />
                        <x-admin.toggle model="general.force_https" label="Force Secure Connections" hint="Redirect all requests to HTTPS." />
                    </div>
                    <div class="mt-5 flex gap-2">{!! $save('saveGeneral') !!}<button wire:click="mount" class="rounded-xl border border-edge px-4 py-2.5 text-sm text-slate-300 hover:bg-raised">Reset Settings</button></div>
                </x-admin.card>
            @endif

            {{-- COMPANY --}}
            @if ($tab === 'company')
                <x-admin.card title="Company Settings">
                    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                        {!! $fld('Company Name', 'company.name') !!}
                        {!! $fld('Phone Number', 'company.phone') !!}
                        <div class="sm:col-span-2">{!! $fld('Company Address', 'company.address') !!}</div>
                        {!! $fld('Country', 'company.country') !!}
                        {!! $fld('State', 'company.state') !!}
                        {!! $fld('City', 'company.city') !!}
                        {!! $fld('Postal Code', 'company.postal') !!}
                        {!! $fld('Support Email', 'company.support_email', '', 'email') !!}
                        {!! $fld('Support Website', 'company.support_website') !!}
                        {!! $fld('Business Registration No.', 'company.reg_number') !!}
                        {!! $fld('Tax Number', 'company.tax_number') !!}
                        <div><label class="{{ $lbl }}">Currency</label><select wire:model="company.currency" class="{{ $input }}">@foreach (['USD','EUR','GBP','PKR','AED','INR'] as $c)<option>{{ $c }}</option>@endforeach</select></div>
                        {!! $fld('Currency Symbol', 'company.currency_symbol') !!}
                    </div>
                    <div class="mt-5">{!! $save('saveCompany') !!}</div>
                </x-admin.card>
            @endif

            {{-- EMAIL --}}
            @if ($tab === 'email')
                <x-admin.card title="Email (SMTP) Settings">
                    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                        <div><label class="{{ $lbl }}">SMTP Host</label><input wire:model="mail_host" class="{{ $input }}">@error('mail_host')<p class="mt-1 text-xs text-red-400">{{ $message }}</p>@enderror</div>
                        <div><label class="{{ $lbl }}">SMTP Port</label><input type="number" wire:model="mail_port" class="{{ $input }}"></div>
                        {!! $fld('SMTP Username', 'mail_username') !!}
                        <div><label class="{{ $lbl }}">SMTP Password {!! $mail_password_set ? '<span class="text-xs text-green-400">(configured)</span>' : '' !!}</label><input type="password" wire:model="mail_password" placeholder="{{ $mail_password_set ? '•••••• leave blank to keep' : '' }}" class="{{ $input }}"></div>
                        <div><label class="{{ $lbl }}">Encryption</label><select wire:model="mail_encryption" class="{{ $input }}"><option value="tls">TLS</option><option value="ssl">SSL</option><option value="none">None</option></select></div>
                        {!! $fld('Sender Name', 'mail_from_name') !!}
                        {!! $fld('Sender Email', 'mail_from_address', '', 'email') !!}
                        {!! $fld('Reply-To Email', 'mail_reply_to', '', 'email') !!}
                    </div>
                    <div class="mt-4 divide-y divide-edge rounded-xl border border-edge px-4"><x-admin.toggle model="mail_queue" label="Queue Emails" hint="Send emails via the queue for better performance." /></div>
                    <div class="mt-5 flex flex-wrap items-end gap-2">
                        {!! $save('saveMail') !!}
                        <div class="flex items-end gap-2">
                            <div><label class="{{ $lbl }}">Test recipient</label><input wire:model="test_recipient" class="{{ $input }}"></div>
                            <button wire:click="sendTest" class="rounded-xl border border-edge px-4 py-2.5 text-sm text-slate-200 hover:bg-raised">Send Test Email</button>
                        </div>
                    </div>
                </x-admin.card>
                <x-admin.card title="Email Templates">
                    <div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
                        @foreach ($templates as $t)
                            <button wire:click="editTemplate({{ $t->id }})" class="flex items-center justify-between rounded-xl border border-edge bg-ink px-3.5 py-2.5 text-left text-sm hover:bg-raised">
                                <span><span class="block font-medium text-slate-200">{{ $t->name }}</span><span class="block text-xs text-slate-500">{{ $t->key }}</span></span>
                                <x-lucide-pencil class="h-4 w-4 text-slate-500" />
                            </button>
                        @endforeach
                    </div>
                    @if ($editingTemplateId)
                        <div class="mt-4 space-y-3 rounded-xl border border-edge bg-ink p-4">
                            <div><label class="{{ $lbl }}">Subject</label><input wire:model="tpl_subject" class="{{ $input }}">@error('tpl_subject')<p class="mt-1 text-xs text-red-400">{{ $message }}</p>@enderror</div>
                            <div><label class="{{ $lbl }}">Body <span class="text-xs text-slate-500">— use @{{ name }}, @{{ app_name }} placeholders</span></label><textarea wire:model="tpl_body" rows="6" class="{{ $input }} font-mono text-xs"></textarea>@error('tpl_body')<p class="mt-1 text-xs text-red-400">{{ $message }}</p>@enderror</div>
                            <div class="flex gap-2"><button wire:click="saveTemplate" class="rounded-xl bg-brand px-4 py-2 text-sm font-semibold text-white hover:bg-brand-700">Save Template</button><button wire:click="$set('editingTemplateId', null)" class="rounded-xl border border-edge px-4 py-2 text-sm text-slate-300 hover:bg-raised">Cancel</button></div>
                        </div>
                    @endif
                </x-admin.card>
            @endif

            {{-- STORAGE --}}
            @if ($tab === 'storage')
                <x-admin.card title="Storage Settings">
                    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                        <div class="sm:col-span-2"><label class="{{ $lbl }}">Storage Driver</label><select wire:model="storage.driver" class="{{ $input }}"><option value="local">Local</option><option value="s3">Amazon S3</option><option value="r2">Cloudflare R2</option><option value="spaces">DigitalOcean Spaces</option><option value="b2">Backblaze B2</option><option value="gcs">Google Cloud Storage</option><option value="azure">Azure Storage</option></select></div>
                        {!! $fld('Storage Limit (GB)', 'storage.limit_gb', '10', 'number') !!}
                        {!! $fld('Video Upload Limit (MB)', 'storage.video_mb', '1024', 'number') !!}
                        {!! $fld('Image Upload Limit (MB)', 'storage.image_mb', '25', 'number') !!}
                        {!! $fld('Document Upload Limit (MB)', 'storage.doc_mb', '50', 'number') !!}
                        {!! $fld('Temporary File Lifetime (hours)', 'storage.temp_lifetime_h', '24', 'number') !!}
                    </div>
                    <div class="mt-4 divide-y divide-edge rounded-xl border border-edge px-4"><x-admin.toggle model="storage.auto_cleanup" label="Automatic Cleanup" hint="Delete temporary files automatically." /></div>
                    <div class="mt-5">{!! $save('saveStorage') !!}</div>
                </x-admin.card>
            @endif

            {{-- SOCIAL & OAUTH --}}
            @if ($tab === 'social')
                <x-admin.card title="Social & OAuth (App Credentials)">
                    <p class="mb-4 text-sm text-slate-500">Operator-level app credentials. Secrets are encrypted and never exposed to customers.</p>
                    <div class="space-y-4">
                        <div class="rounded-xl border border-edge bg-ink p-4">
                            <div class="mb-3 flex items-center gap-2 font-semibold text-white"><span class="grid h-8 w-8 place-items-center rounded-lg text-xs font-bold text-white" style="background:#1877f2">FB</span> Meta (Facebook / Instagram) @if($meta_secret_set)<span class="admin-chip bg-green-500/15 text-green-400">Configured</span>@endif</div>
                            <div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
                                <div><label class="{{ $lbl }}">Client ID</label><input wire:model="meta_client_id" class="{{ $input }}"></div>
                                <div><label class="{{ $lbl }}">Client Secret</label><input type="password" wire:model="meta_client_secret" placeholder="{{ $meta_secret_set ? '•••••• leave blank to keep' : '' }}" class="{{ $input }}"></div>
                            </div>
                        </div>
                        <div class="rounded-xl border border-edge bg-ink p-4">
                            <div class="mb-3 flex items-center gap-2 font-semibold text-white"><span class="grid h-8 w-8 place-items-center rounded-lg text-xs font-bold text-white" style="background:#ff0000">YT</span> Google (YouTube) @if($google_secret_set)<span class="admin-chip bg-green-500/15 text-green-400">Configured</span>@endif</div>
                            <div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
                                <div><label class="{{ $lbl }}">Client ID</label><input wire:model="google_client_id" class="{{ $input }}"></div>
                                <div><label class="{{ $lbl }}">Client Secret</label><input type="password" wire:model="google_client_secret" placeholder="{{ $google_secret_set ? '•••••• leave blank to keep' : '' }}" class="{{ $input }}"></div>
                            </div>
                        </div>
                        <p class="text-xs text-slate-500">TikTok, LinkedIn &amp; Pinterest OAuth are not yet wired — coming in a future release.</p>
                    </div>
                    <div class="mt-5">{!! $save('saveOauth') !!}</div>
                </x-admin.card>
            @endif

            {{-- PAYMENT --}}
            @if ($tab === 'payment')
                <x-admin.card title="Payment Gateways">
                    <div class="space-y-4">
                        <div class="rounded-xl border border-edge bg-ink p-4">
                            <x-admin.toggle model="payment.stripe_enabled" label="Stripe" hint="Accept card payments via Stripe." />
                            <div class="mt-2 grid grid-cols-1 gap-3 sm:grid-cols-2">
                                {!! $fld('Publishable Key', 'payment.stripe_key', 'pk_live_…') !!}
                                <div><label class="{{ $lbl }}">Secret Key</label><input type="password" wire:model="stripe_secret" placeholder="{{ $stripe_secret_set ? '•••••• configured' : 'sk_live_…' }}" class="{{ $input }}"></div>
                                <div class="sm:col-span-2">{!! $fld('Webhook URL', 'payment.stripe_webhook') !!}</div>
                            </div>
                        </div>
                        <div class="rounded-xl border border-edge bg-ink p-4">
                            <x-admin.toggle model="payment.paypal_enabled" label="PayPal" hint="Accept payments via PayPal." />
                            <div class="mt-2 grid grid-cols-1 gap-3 sm:grid-cols-2">
                                {!! $fld('Client ID', 'payment.paypal_client_id') !!}
                                <div><label class="{{ $lbl }}">Secret</label><input type="password" wire:model="paypal_secret" placeholder="{{ $paypal_secret_set ? '•••••• configured' : '' }}" class="{{ $input }}"></div>
                                <div class="sm:col-span-2">{!! $fld('Webhook URL', 'payment.paypal_webhook') !!}</div>
                            </div>
                        </div>
                        <p class="text-xs text-slate-500">Paddle, LemonSqueezy &amp; Authorize.net can be added on request. Payment processing is not yet wired — these credentials are stored securely for when it is.</p>
                    </div>
                    <div class="mt-5">{!! $save('savePayment') !!}</div>
                </x-admin.card>
            @endif

            {{-- SMS --}}
            @if ($tab === 'sms')
                <x-admin.card title="SMS (68SMS)">
                    <div class="space-y-4">
                        <x-admin.toggle model="sms_enabled" label="Enable SMS" hint="Send one-time codes and urgent billing alerts by text." />

                        <div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
                            <div>
                                <label class="{{ $lbl }}">API Key</label>
                                <input type="password" wire:model="sms_key" placeholder="{{ $sms_key_set ? '•••••• configured' : 'Your 68SMS API key' }}" class="{{ $input }}">
                                <p class="mt-1 text-xs text-slate-500">Stored encrypted. Leave blank to keep the current key.</p>
                            </div>
                            <div>
                                <label class="{{ $lbl }}">Sending Country</label>
                                <select wire:model="sms_country" class="{{ $input }}">
                                    @foreach (config('sms.countries') as $id => $name)
                                        <option value="{{ $id }}">{{ $name }}</option>
                                    @endforeach
                                </select>
                                <p class="mt-1 text-xs text-slate-500">68SMS sends to the US, UK and Canada only.</p>
                            </div>
                            <div class="sm:col-span-2">
                                {!! $fld('Sending Number (optional)', 'sms_from', 'Leave blank to let the provider choose') !!}
                            </div>
                        </div>

                        <div class="rounded-xl border border-edge bg-ink p-4">
                            <div class="flex flex-wrap items-center gap-3">
                                <button wire:click="checkSmsBalance" class="rounded-xl border border-edge px-3.5 py-2 text-sm font-medium text-slate-200 hover:bg-white/5">Check balance</button>
                                @if ($sms_balance !== null)
                                    <span class="admin-chip bg-green-500/15 text-green-400">Balance: {{ $sms_balance }}</span>
                                @endif
                            </div>
                            <div class="mt-3 grid grid-cols-1 gap-3 sm:grid-cols-[minmax(0,1fr)_auto] sm:items-end">
                                {!! $fld('Test Recipient', 'sms_test_recipient', '15856931105') !!}
                                <button wire:click="sendTestSms" class="rounded-xl border border-edge px-3.5 py-2.5 text-sm font-medium text-slate-200 hover:bg-white/5">Send test</button>
                            </div>
                            <p class="mt-2 text-xs text-slate-500">A test message costs one send against your 68SMS balance.</p>
                        </div>

                        <p class="text-xs text-slate-500">Customers receive texts only after verifying their number and opting in to SMS notifications.</p>
                    </div>
                    <div class="mt-5">{!! $save('saveSms') !!}</div>
                </x-admin.card>
            @endif

            {{-- AUTOMATION --}}
            @if ($tab === 'automation')
                <x-admin.card title="Automation Settings">
                    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                        {!! $fld('Maximum Queue Workers', 'automation.max_workers', '3', 'number') !!}
                        {!! $fld('Maximum Concurrent Jobs', 'automation.max_concurrent', '5', 'number') !!}
                        {!! $fld('Queue Retry Attempts', 'automation.retry_attempts', '3', 'number') !!}
                        {!! $fld('Queue Timeout (seconds)', 'automation.timeout_s', '900', 'number') !!}
                        {!! $fld('Scheduler Interval (seconds)', 'automation.scheduler_interval_s', '60', 'number') !!}
                        {!! $fld('Automation Delay (seconds)', 'automation.automation_delay_s', '120', 'number') !!}
                        {!! $fld('Retry Delay (minutes)', 'automation.retry_delay_m', '15', 'number') !!}
                        {!! $fld('Maximum Retry Count', 'automation.max_retry', '5', 'number') !!}
                    </div>
                    <div class="mt-4 divide-y divide-edge rounded-xl border border-edge px-4">
                        <x-admin.toggle model="automation.auto_pause_on_errors" label="Auto Pause on API Errors" hint="Pause a Page's queue when it hits a rate-limit." />
                        <x-admin.toggle model="automation.duplicate_detection" label="Duplicate Detection" hint="Prevent duplicate posts from being queued." />
                    </div>
                    <p class="mt-3 text-xs text-slate-500">These are operator defaults; the desktop app enforces its own per-user queue governor.</p>
                    <div class="mt-5">{!! $save('saveAutomation') !!}</div>
                </x-admin.card>
            @endif

            {{-- SECURITY --}}
            @if ($tab === 'security')
                <x-admin.card title="Security Settings">
                    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                        {!! $fld('Password Minimum Length', 'security.password_min', '8', 'number') !!}
                        {!! $fld('Session Timeout (minutes)', 'security.session_timeout_m', '120', 'number') !!}
                        {!! $fld('Login Attempt Limit', 'security.login_limit', '5', 'number') !!}
                        {!! $fld('API Token Expiry (days)', 'security.api_token_expiry_d', '90', 'number') !!}
                        <div class="sm:col-span-2"><label class="{{ $lbl }}">IP Whitelist <span class="text-xs text-slate-500">(comma-separated)</span></label><textarea wire:model="security.ip_whitelist" rows="2" class="{{ $input }}"></textarea></div>
                        <div class="sm:col-span-2"><label class="{{ $lbl }}">IP Blacklist <span class="text-xs text-slate-500">(comma-separated)</span></label><textarea wire:model="security.ip_blacklist" rows="2" class="{{ $input }}"></textarea></div>
                    </div>
                    <div class="mt-4 divide-y divide-edge rounded-xl border border-edge px-4">
                        <x-admin.toggle model="security.two_factor" label="Two-Factor Authentication" hint="Require 2FA for admin accounts." />
                        <x-admin.toggle model="security.captcha" label="Captcha" hint="Show a captcha on login &amp; registration." />
                        <x-admin.toggle model="security.audit_logs" label="Audit Logs" hint="Record admin actions." />
                        <x-admin.toggle model="security.activity_logging" label="Activity Logging" hint="Record user activity." />
                        <x-admin.toggle model="security.security_notifications" label="Security Notifications" hint="Email on new sign-ins &amp; security events." />
                    </div>
                    <div class="mt-5">{!! $save('saveSecurity') !!}</div>
                </x-admin.card>
            @endif

            {{-- SYSTEM --}}
            @if ($tab === 'system')
                <x-admin.card title="System Information">
                    <div class="grid grid-cols-2 gap-x-8 gap-y-4 sm:grid-cols-3">
                        <div><div class="text-xs text-slate-500">Environment</div><span class="admin-chip {{ $system['env'] === 'production' ? 'bg-green-500/15 text-green-400' : 'bg-amber-500/15 text-amber-400' }} capitalize">{{ $system['env'] }}</span></div>
                        <div><div class="text-xs text-slate-500">Debug Mode</div><span class="admin-chip {{ $system['debug'] ? 'bg-amber-500/15 text-amber-400' : 'bg-green-500/15 text-green-400' }}">{{ $system['debug'] ? 'Enabled' : 'Disabled' }}</span></div>
                        <div><div class="text-xs text-slate-500">Database</div><span class="admin-chip {{ $system['db'] ? 'bg-green-500/15 text-green-400' : 'bg-red-500/15 text-red-400' }}">{{ $system['db'] ? 'Connected' : 'Down' }}</span></div>
                        <div><div class="text-xs text-slate-500">Queue Driver</div><div class="text-sm text-slate-200">{{ $system['queue'] }}</div></div>
                        <div><div class="text-xs text-slate-500">Cache Driver</div><div class="text-sm text-slate-200">{{ $system['cache'] }}</div></div>
                        <div><div class="text-xs text-slate-500">Pending Jobs</div><div class="text-sm text-slate-200">{{ $system['jobs'] }}</div></div>
                        <div><div class="text-xs text-slate-500">PHP Version</div><div class="text-sm text-slate-200">{{ $system['php'] }}</div></div>
                        <div><div class="text-xs text-slate-500">Laravel Version</div><div class="text-sm text-slate-200">{{ $system['laravel'] }}</div></div>
                        <div><div class="text-xs text-slate-500">Server Time</div><div class="text-sm text-slate-200">{{ $system['server_time']->format('M j, Y H:i') }}</div></div>
                    </div>
                </x-admin.card>
            @endif

            {{-- DESKTOP UPDATES --}}
            @if ($tab === 'desktop')
                <x-admin.card title="Desktop Updates">
                    <div class="flex items-center justify-between rounded-xl border border-edge bg-ink p-4">
                        <div><div class="text-xs text-slate-500">Latest Desktop Version</div><div class="text-lg font-bold text-white">{{ $desktop['latest']?->version ?? '—' }}</div></div>
                        <a href="{{ route('admin.software') }}" wire:navigate class="rounded-xl bg-brand px-4 py-2.5 text-sm font-semibold text-white hover:bg-brand-700">Manage Releases</a>
                    </div>
                    <h4 class="mb-2 mt-5 text-sm font-semibold text-white">Version History</h4>
                    <div class="overflow-x-auto">
                        <table class="w-full text-left text-sm"><thead><tr class="border-b border-edge text-xs uppercase tracking-wide text-slate-500"><th class="pb-2 pr-4 font-medium">Version</th><th class="pb-2 pr-4 font-medium">Type</th><th class="pb-2 pr-4 font-medium">Status</th><th class="pb-2 pr-4 font-medium">Downloads</th><th class="pb-2 pr-4 font-medium">Released</th></tr></thead>
                        <tbody class="divide-y divide-edge">
                            @forelse ($desktop['history'] as $v)
                                <tr class="text-slate-300"><td class="py-3 pr-4 font-medium text-white">{{ $v->version }}</td><td class="py-3 pr-4">{{ ucfirst($v->release_type) }}</td><td class="py-3 pr-4"><span class="admin-chip {{ $v->status === 'published' ? 'bg-green-500/15 text-green-400' : 'bg-slate-500/15 text-slate-400' }}">{{ $v->status }}</span></td><td class="py-3 pr-4">{{ number_format($v->download_count) }}</td><td class="py-3 pr-4 text-slate-400">{{ $v->published_at?->format('M j, Y') ?? '—' }}</td></tr>
                            @empty
                                <tr><td colspan="5" class="py-8 text-center text-slate-500">No releases yet.</td></tr>
                            @endforelse
                        </tbody></table>
                    </div>
                    <p class="mt-3 text-xs text-slate-500">Upload installers, set mandatory updates and grace periods in the <a href="{{ route('admin.software') }}" wire:navigate class="text-brand-500 hover:underline">Software Updates</a> module.</p>
                </x-admin.card>
            @endif
        </div>

        {{-- ============ Right rail ============ --}}
        <div class="space-y-6">
            <x-admin.card>
                <div class="mb-4 flex items-center justify-between"><h3 class="text-base font-semibold text-white">Application Information</h3><x-lucide-info class="h-5 w-5 text-brand-500" /></div>
                <div class="space-y-3 text-sm">
                    <div class="flex justify-between"><span class="text-slate-400">Version</span><span class="admin-chip bg-brand/15 text-brand-500">v{{ $appInfo['version'] }}</span></div>
                    <div class="flex justify-between"><span class="text-slate-400">Environment</span><span class="admin-chip {{ $system['env'] === 'production' ? 'bg-green-500/15 text-green-400' : 'bg-amber-500/15 text-amber-400' }} capitalize">{{ $system['env'] }}</span></div>
                    <div class="flex justify-between"><span class="text-slate-400">Debug Mode</span><span class="text-slate-200">{{ $system['debug'] ? 'Enabled' : 'Disabled' }}</span></div>
                    <div class="flex justify-between"><span class="text-slate-400">PHP Version</span><span class="text-slate-200">{{ $system['php'] }}</span></div>
                    <div class="flex justify-between"><span class="text-slate-400">Laravel Version</span><span class="text-slate-200">{{ $system['laravel'] }}</span></div>
                    <div class="flex justify-between"><span class="text-slate-400">Installation Date</span><span class="text-slate-200">{{ $appInfo['installed']?->format('M j, Y') ?? '—' }}</span></div>
                </div>
            </x-admin.card>

            <x-admin.card>
                <div class="mb-3 flex items-center justify-between"><h3 class="text-base font-semibold text-white">System Time</h3><x-lucide-clock class="h-5 w-5 text-brand-500" /></div>
                <div class="text-2xl font-bold text-white">{{ $system['server_time']->format('h:i:s A') }}</div>
                <div class="text-sm text-slate-400">{{ $system['server_time']->format('l, M j, Y') }}</div>
                <div class="mt-3 flex items-center justify-between text-sm"><span class="text-slate-400">Timezone</span><span class="text-slate-200">{{ config('app.timezone') }}</span></div>
                <button wire:click="syncTime" class="mt-3 inline-flex items-center gap-2 rounded-xl border border-edge px-3.5 py-2 text-sm text-slate-200 hover:bg-raised"><x-lucide-refresh-ccw class="h-4 w-4" /> Sync Now</button>
            </x-admin.card>

            <x-admin.card>
                <div class="mb-2 flex items-center justify-between"><h3 class="text-base font-semibold text-white">Configuration Cache</h3><x-lucide-database-zap class="h-5 w-5 text-brand-500" /></div>
                <p class="mb-3 text-sm text-slate-400">Clear cached configuration to apply changes across the application.</p>
                <button wire:click="clearConfigCache" wire:confirm="Clear the configuration cache?" class="rounded-xl border border-green-500/40 bg-green-500/10 px-3.5 py-2 text-sm font-semibold text-green-400 hover:bg-green-500/20">Clear Configuration Cache</button>
                <div class="mt-3 flex justify-between text-sm"><span class="text-slate-400">Last Cleared</span><span class="text-slate-200">{{ $appInfo['cache_cleared'] ? \Carbon\Carbon::parse($appInfo['cache_cleared'])->format('M j, H:i') : 'Never' }}</span></div>
            </x-admin.card>
        </div>
    </div>

    {{-- ============ About ============ --}}
    <x-admin.card class="mt-6">
        <div class="grid grid-cols-1 items-center gap-6 lg:grid-cols-[minmax(0,1.4fr)_minmax(0,1fr)]">
            <div class="flex items-center gap-4">
                <span class="grid h-14 w-14 place-items-center rounded-2xl bg-gradient-to-br from-brand to-accent2 text-lg font-extrabold text-white">CC</span>
                <div>
                    <div class="flex items-center gap-2"><span class="text-lg font-bold text-white">CC Publisher</span><span class="admin-chip bg-brand/15 text-brand-500">v{{ $appInfo['version'] }}</span></div>
                    <p class="mt-0.5 text-sm text-slate-400">The all-in-one social media auto publishing and automation platform.</p>
                    <div class="mt-2 flex flex-wrap gap-x-4 gap-y-1 text-xs">
                        <a href="{{ config('app.url') }}" class="inline-flex items-center gap-1 text-brand-500 hover:underline">Website <x-lucide-external-link class="h-3 w-3" /></a>
                        <a href="{{ config('app.url') }}" class="inline-flex items-center gap-1 text-brand-500 hover:underline">Documentation <x-lucide-external-link class="h-3 w-3" /></a>
                        <a href="{{ config('app.url') }}" class="inline-flex items-center gap-1 text-brand-500 hover:underline">Support <x-lucide-external-link class="h-3 w-3" /></a>
                        <a href="{{ route('admin.software') }}" wire:navigate class="inline-flex items-center gap-1 text-brand-500 hover:underline">Changelog</a>
                    </div>
                </div>
            </div>
            <div class="grid grid-cols-4 gap-3 text-center">
                <div><div class="text-lg font-bold text-white">{{ number_format($stats['users']) }}</div><div class="text-[11px] text-slate-500">Total Users</div></div>
                <div><div class="text-lg font-bold text-white">{{ number_format($stats['accounts']) }}</div><div class="text-[11px] text-slate-500">Accounts</div></div>
                <div><div class="text-lg font-bold text-white">{{ number_format($stats['posts']) }}</div><div class="text-[11px] text-slate-500">Posts Today</div></div>
                <div><div class="text-lg font-bold text-white">{{ $stats['uptime'] }}%</div><div class="text-[11px] text-slate-500">Uptime</div></div>
            </div>
        </div>
    </x-admin.card>
</div>