@extends('layouts.app')

@section('title', 'Dashboard — ' . config('app.name', 'VoxPulse'))

@section('content')
<div class="space-y-8">
    <!-- Welcome Banner -->
    <div class="rounded-3xl bg-gradient-to-r from-indigo-900/60 via-slate-900/80 to-purple-950/60 border border-indigo-500/20 p-8 sm:p-10 shadow-2xl relative overflow-hidden">
        <div class="relative z-10 max-w-2xl">
            <div class="inline-flex items-center gap-2 px-3.5 py-1 rounded-full bg-indigo-500/10 border border-indigo-500/30 text-xs font-semibold text-indigo-300 mb-4">
                <span class="h-2 w-2 rounded-full bg-emerald-400 animate-ping"></span>
                <span>Automated CI/CD Deployment Active</span>
            </div>
            <h1 class="font-heading text-3xl sm:text-4xl font-extrabold tracking-tight text-white mb-2">
                Welcome back, {{ $user->name }}!
            </h1>
            <p class="text-slate-300 text-sm sm:text-base leading-relaxed">
                You have authenticated into the {{ config('app.name', 'VoxPulse') }} infrastructure. All voice channels, mesh signaling, and user telemetries are live.
            </p>
        </div>
    </div>

    <!-- Dashboard Cards Grid -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <!-- Account Info -->
        <div class="rounded-2xl bg-slate-900/70 border border-slate-800 p-6 shadow-xl">
            <div class="flex items-center gap-3 mb-4">
                <span class="text-2xl">👤</span>
                <h3 class="font-heading font-semibold text-slate-200">User Profile</h3>
            </div>
            <dl class="space-y-3 text-sm">
                <div>
                    <dt class="text-xs text-slate-400 font-medium uppercase">Name</dt>
                    <dd class="text-slate-200 font-semibold">{{ $user->name }}</dd>
                </div>
                <div>
                    <dt class="text-xs text-slate-400 font-medium uppercase">Email Address</dt>
                    <dd class="text-slate-200 font-mono text-xs">{{ $user->email }}</dd>
                </div>
                <div>
                    <dt class="text-xs text-slate-400 font-medium uppercase">Account Role</dt>
                    <dd class="text-xs font-bold {{ $user->is_admin ? 'text-rose-400' : 'text-slate-300' }}">
                        {{ $user->is_admin ? '🛡️ Super Administrator' : 'Standard User' }}
                    </dd>
                </div>
            </dl>
        </div>

        <!-- CI/CD Status -->
        <div class="rounded-2xl bg-slate-900/70 border border-slate-800 p-6 shadow-xl">
            <div class="flex items-center gap-3 mb-4">
                <span class="text-2xl">⚡</span>
                <h3 class="font-heading font-semibold text-slate-200">Infrastructure Specs</h3>
            </div>
            <div class="space-y-3 text-sm">
                <div class="flex items-center justify-between py-1 border-b border-slate-800">
                    <span class="text-slate-400">Environment</span>
                    <span class="font-semibold text-emerald-400">{{ app()->environment() }}</span>
                </div>
                <div class="flex items-center justify-between py-1 border-b border-slate-800">
                    <span class="text-slate-400">Framework</span>
                    <span class="font-semibold text-slate-200">Laravel v{{ app()->version() }}</span>
                </div>
                <div class="flex items-center justify-between py-1">
                    <span class="text-slate-400">PHP Version</span>
                    <span class="font-semibold text-slate-200">{{ PHP_VERSION }}</span>
                </div>
            </div>
        </div>

        <!-- Quick Navigation -->
        <div class="rounded-2xl bg-slate-900/70 border border-slate-800 p-6 shadow-xl">
            <div class="flex items-center gap-3 mb-4">
                <span class="text-2xl">🔗</span>
                <h3 class="font-heading font-semibold text-slate-200">Quick Navigation</h3>
            </div>
            <div class="space-y-2.5">
                @if($user->is_admin)
                    <a href="{{ route('admin.dashboard') }}" class="flex items-center justify-between p-2.5 rounded-xl bg-rose-600/20 hover:bg-rose-600/30 text-sm text-rose-300 hover:text-white transition border border-rose-500/40 font-semibold shadow-md">
                        <span class="flex items-center gap-2"><span>🛡️</span> Super Admin Panel</span>
                        <span>&rarr;</span>
                    </a>
                @endif
                <a href="{{ route('calls.index') }}" class="flex items-center justify-between p-2.5 rounded-xl bg-indigo-600/20 hover:bg-indigo-600/30 text-sm text-indigo-300 hover:text-white transition border border-indigo-500/40 font-semibold shadow-md">
                    <span class="flex items-center gap-2"><span>🎙️</span> Real-Time Voice Hub</span>
                    <span>&rarr;</span>
                </a>
                <a href="{{ url('/') }}" class="flex items-center justify-between p-2.5 rounded-xl bg-slate-800/40 hover:bg-slate-800 text-sm text-slate-300 hover:text-white transition border border-slate-700/40">
                    <span>Visit Home Page</span>
                    <span>&rarr;</span>
                </a>
                <a href="https://github.com/rahim-uddin-jsr/cicd-pratice" target="_blank" class="flex items-center justify-between p-2.5 rounded-xl bg-slate-800/40 hover:bg-slate-800 text-sm text-slate-300 hover:text-white transition border border-slate-700/40">
                    <span>GitHub Repository</span>
                    <span>&nearr;</span>
                </a>
            </div>
        </div>
    </div>
</div>
@endsection