@extends('layouts.app')

@section('title', 'Dashboard - ' . config('app.name', 'Laravel 2FA'))

@section('content')
  <div class="max-w-6xl mx-auto">
    <!-- Welcome Section -->
    <div class="text-center mb-12">
      <div class="w-20 h-20 bg-white rounded-2xl flex items-center justify-center mx-auto mb-6 shadow-lg glow-effect">
        <i class="fas fa-user-shield text-purple-600 text-3xl"></i>
      </div>
      <h1 class="text-4xl font-bold text-white mb-4 text-shadow">
        Welcome, {{ Auth::user()->name }}!
      </h1>
      <p class="text-xl text-white text-shadow-sm">
        Your secure dashboard is ready
      </p>
    </div>

    <!-- Status Cards -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
      <!-- Account Status -->
      <div class="glass-effect-card rounded-xl p-6 card-hover">
        <div class="flex items-center justify-between mb-4">
          <div class="w-12 h-12 bg-blue-500 rounded-lg flex items-center justify-center">
            <i class="fas fa-user text-white text-xl"></i>
          </div>
          <span class="text-white text-shadow-sm text-sm font-medium">Account</span>
        </div>
        <h3 class="text-white font-semibold mb-2 text-shadow-sm">Account Status</h3>
        <p class="text-white text-shadow-sm text-sm mb-4">Your account is active and secure</p>
        <div class="flex items-center">
          <div class="w-2 h-2 bg-green-400 rounded-full mr-2"></div>
          <span class="text-white text-shadow-sm text-sm">Active</span>
        </div>
      </div>

      <!-- 2FA Status -->
      <div class="glass-effect-card rounded-xl p-6 card-hover">
        <div class="flex items-center justify-between mb-4">
          <div
            class="w-12 h-12 {{ Auth::user()->is_2fa_enabled ? 'bg-green-500' : 'bg-yellow-500' }} rounded-lg flex items-center justify-center">
            <i class="fas fa-shield-alt text-white text-xl"></i>
          </div>
          <span class="text-white text-shadow-sm text-sm font-medium">2FA</span>
        </div>
        <h3 class="text-white font-semibold mb-2 text-shadow-sm">Two-Factor Auth</h3>
        <p class="text-white text-shadow-sm text-sm mb-4">
          {{ Auth::user()->is_2fa_enabled ? 'Enabled for enhanced security' : 'Not enabled yet' }}
        </p>
        <div class="flex items-center">
          <div class="w-2 h-2 {{ Auth::user()->is_2fa_enabled ? 'bg-green-400' : 'bg-yellow-400' }} rounded-full mr-2">
          </div>
          <span class="text-white text-shadow-sm text-sm">
            {{ Auth::user()->is_2fa_enabled ? 'Enabled' : 'Disabled' }}
          </span>
        </div>
      </div>

      <!-- Last Login -->
      <div class="glass-effect-card rounded-xl p-6 card-hover">
        <div class="flex items-center justify-between mb-4">
          <div class="w-12 h-12 bg-purple-500 rounded-lg flex items-center justify-center">
            <i class="fas fa-clock text-white text-xl"></i>
          </div>
          <span class="text-white text-shadow-sm text-sm font-medium">Activity</span>
        </div>
        <h3 class="text-white font-semibold mb-2 text-shadow-sm">Last Login</h3>
        <p class="text-white text-shadow-sm text-sm mb-4">You're currently signed in</p>
        <div class="flex items-center">
          <div class="w-2 h-2 bg-green-400 rounded-full mr-2"></div>
          <span class="text-white text-shadow-sm text-sm">Online</span>
        </div>
      </div>
    </div>

    <!-- Quick Actions -->
    <div class="glass-effect rounded-xl p-8 mb-12">
      <h2 class="text-2xl font-bold text-white mb-6 text-shadow">Quick Actions</h2>

      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        @if (!Auth::user()->is_2fa_enabled)
          <!-- Setup 2FA -->
          <a href="{{ route('2fa.setup') }}" class="glass-effect-card rounded-xl p-6 card-hover">
            <div class="w-12 h-12 bg-green-500 rounded-lg flex items-center justify-center mb-4">
              <i class="fas fa-shield-alt text-white text-xl"></i>
            </div>
            <h3 class="text-white font-semibold mb-2 text-shadow-sm">Setup 2FA</h3>
            <p class="text-white text-shadow-sm text-sm">Enable two-factor authentication for enhanced security</p>
          </a>
        @else
          <!-- Manage 2FA -->
          <a href="{{ route('2fa.setup') }}" class="glass-effect-card rounded-xl p-6 card-hover">
            <div class="w-12 h-12 bg-blue-500 rounded-lg flex items-center justify-center mb-4">
              <i class="fas fa-cog text-white text-xl"></i>
            </div>
            <h3 class="text-white font-semibold mb-2 text-shadow-sm">2FA Settings</h3>
            <p class="text-white text-shadow-sm text-sm">Manage your two-factor authentication settings</p>
          </a>
        @endif

        <!-- README -->
        <a href="{{ route('readme') }}" class="glass-effect-card rounded-xl p-6 card-hover">
          <div class="w-12 h-12 bg-indigo-500 rounded-lg flex items-center justify-center mb-4">
            <i class="fas fa-file-alt text-white text-xl"></i>
          </div>
          <h3 class="text-white font-semibold mb-2 text-shadow-sm">README</h3>
          <p class="text-white text-shadow-sm text-sm">Complete project documentation and setup guide</p>
        </a>

        <!-- Documentation -->
        <a href="{{ route('docs') }}" class="glass-effect-card rounded-xl p-6 card-hover">
          <div class="w-12 h-12 bg-blue-500 rounded-lg flex items-center justify-center mb-4">
            <i class="fas fa-book text-white text-xl"></i>
          </div>
          <h3 class="text-white font-semibold mb-2 text-shadow-sm">Documentation</h3>
          <p class="text-white text-shadow-sm text-sm">Learn more about the 2FA system and features</p>
        </a>

        <!-- API Docs -->
        <a href="{{ route('api.docs') }}" class="glass-effect-card rounded-xl p-6 card-hover">
          <div class="w-12 h-12 bg-green-500 rounded-lg flex items-center justify-center mb-4">
            <i class="fas fa-code text-white text-xl"></i>
          </div>
          <h3 class="text-white font-semibold mb-2 text-shadow-sm">API Reference</h3>
          <p class="text-white text-shadow-sm text-sm">Explore the API endpoints and integration options</p>
        </a>

        <!-- Tutorial -->
        <a href="{{ route('tutorial') }}" class="glass-effect-card rounded-xl p-6 card-hover">
          <div class="w-12 h-12 bg-purple-500 rounded-lg flex items-center justify-center mb-4">
            <i class="fas fa-graduation-cap text-white text-xl"></i>
          </div>
          <h3 class="text-white font-semibold mb-2 text-shadow-sm">Tutorial</h3>
          <p class="text-white text-shadow-sm text-sm">Step-by-step guide to get started with the system</p>
        </a>

        <!-- Profile -->
        <div class="glass-effect-card rounded-xl p-6">
          <div class="w-12 h-12 bg-yellow-500 rounded-lg flex items-center justify-center mb-4">
            <i class="fas fa-user text-white text-xl"></i>
          </div>
          <h3 class="text-white font-semibold mb-2 text-shadow-sm">Profile</h3>
          <p class="text-white text-shadow-sm text-sm mb-4">Manage your account information</p>
          <div class="space-y-2">
            <div class="text-white text-shadow-sm text-sm">
              <strong>Name:</strong> {{ Auth::user()->name }}
            </div>
            <div class="text-white text-shadow-sm text-sm">
              <strong>Email:</strong> {{ Auth::user()->email }}
            </div>
          </div>
        </div>

        <!-- Logout -->
        <form method="POST" action="{{ route('logout') }}" class="glass-effect-card rounded-xl p-6">
          @csrf
          <div class="w-12 h-12 bg-red-500 rounded-lg flex items-center justify-center mb-4">
            <i class="fas fa-sign-out-alt text-white text-xl"></i>
          </div>
          <h3 class="text-white font-semibold mb-2 text-shadow-sm">Sign Out</h3>
          <p class="text-white text-shadow-sm text-sm mb-4">Safely log out of your account</p>
          <button type="submit" class="btn-glass px-4 py-2 rounded-lg text-sm">
            <i class="fas fa-sign-out-alt mr-2"></i>Logout
          </button>
        </form>

        @if (config('app.env') === 'local')
          <!-- Test Navigation -->
          <a href="/debug-codes" target="_blank" class="glass-effect-card rounded-xl p-6 card-hover">
            <div class="w-12 h-12 bg-orange-500 rounded-lg flex items-center justify-center mb-4">
              <i class="fas fa-bug text-white text-xl"></i>
            </div>
            <h3 class="text-white font-semibold mb-2 text-shadow-sm">Debug Codes</h3>
            <p class="text-white text-shadow-sm text-sm">View current TOTP codes for testing</p>
          </a>
        @endif
      </div>
    </div>

    <!-- System Info -->
    <div class="glass-effect rounded-xl p-8">
      <h2 class="text-2xl font-bold text-white mb-6 text-shadow">System Information</h2>

      <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
        <div>
          <h3 class="text-white font-semibold mb-4 text-shadow-sm">Security Features</h3>
          <div class="space-y-3">
            <div class="flex items-center space-x-3">
              <i class="fas fa-check-circle text-green-400"></i>
              <span class="text-white text-shadow-sm">Laravel Sanctum Authentication</span>
            </div>
            <div class="flex items-center space-x-3">
              <i class="fas fa-check-circle text-green-400"></i>
              <span class="text-white text-shadow-sm">AES-256-CBC Encryption</span>
            </div>
            <div class="flex items-center space-x-3">
              <i class="fas fa-check-circle text-green-400"></i>
              <span class="text-white text-shadow-sm">TOTP Implementation</span>
            </div>
            <div class="flex items-center space-x-3">
              <i class="fas fa-check-circle text-green-400"></i>
              <span class="text-white text-shadow-sm">QR Code Generation</span>
            </div>
          </div>
        </div>

        <div>
          <h3 class="text-white font-semibold mb-4 text-shadow-sm">System Information</h3>
          <div class="space-y-3">
            <div class="flex items-center space-x-3">
              <i class="fas fa-code text-blue-400"></i>
              <span class="text-white text-shadow-sm">{{ config('app.name', 'Laravel 2FA') }}</span>
            </div>
            <div class="flex items-center space-x-3">
              <i class="fas fa-database text-green-400"></i>
              <span class="text-white text-shadow-sm">MySQL Database</span>
            </div>
            <div class="flex items-center space-x-3">
              <i class="fas fa-palette text-purple-400"></i>
              <span class="text-white text-shadow-sm">Tailwind CSS</span>
            </div>
            <div class="flex items-center space-x-3">
              <i class="fas fa-bolt text-yellow-400"></i>
              <span class="text-white text-shadow-sm">Alpine.js</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
@endsection