@extends('layouts.app')

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

@section('content')
  <div class="min-h-screen flex items-center justify-center px-4">
    <div class="max-w-md w-full">
      <!-- Login Card -->
      <div class="glass-effect rounded-2xl shadow-2xl p-8 floating-card">
        <!-- Header -->
        <div class="text-center mb-8">
          <div class="w-16 h-16 bg-white rounded-2xl flex items-center justify-center mx-auto mb-4 shadow-lg glow-effect">
            <i class="fas fa-shield-alt text-purple-600 text-2xl"></i>
          </div>
          <h2 class="text-3xl font-bold text-white mb-2 text-shadow">
            Welcome Back
          </h2>
          <p class="text-white text-shadow-sm">
            Sign in to your account to continue
          </p>
        </div>

        <!-- Login Form -->
        <form method="POST" action="{{ route('login.post') }}" class="space-y-6">
          @csrf

          <!-- Error Display -->
          @if ($errors->any())
            <div class="bg-red-50 bg-opacity-20 rounded-lg p-4 border border-red-200 border-opacity-30">
              <div class="flex items-start space-x-3">
                <div class="flex-shrink-0">
                  <svg class="w-5 h-5 text-red-400" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd"
                      d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
                      clip-rule="evenodd"></path>
                  </svg>
                </div>
                <div class="text-sm text-white text-shadow-sm">
                  <p class="font-medium mb-1">Login Failed</p>
                  <ul class="list-disc list-inside space-y-1">
                    @foreach ($errors->all() as $error)
                      <li>{{ $error }}</li>
                    @endforeach
                  </ul>
                </div>
              </div>
            </div>
          @endif

          <div>
            <label for="email" class="block text-sm font-medium text-white mb-2 text-shadow-sm">
              Email Address
            </label>
            <div class="relative">
              <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                <svg class="h-5 w-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207">
                  </path>
                </svg>
              </div>
              <input id="email" name="email" type="email" required
                class="input-glass block w-full pl-10 pr-3 py-4 rounded-lg text-white placeholder-white placeholder-opacity-70 focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-50 focus:border-transparent transition-all duration-200 @error('email') border-red-300 focus:ring-red-300 @enderror"
                placeholder="Enter your email" autocomplete="email" value="{{ old('email') }}">
            </div>
          </div>

          <div>
            <label for="password" class="block text-sm font-medium text-white mb-2 text-shadow-sm">
              Password
            </label>
            <div class="relative">
              <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                <svg class="h-5 w-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z">
                  </path>
                </svg>
              </div>
              <input id="password" name="password" type="password" required
                class="input-glass block w-full pl-10 pr-3 py-4 rounded-lg text-white placeholder-white placeholder-opacity-70 focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-50 focus:border-transparent transition-all duration-200 @error('password') border-red-300 focus:ring-red-300 @enderror"
                placeholder="Enter your password" autocomplete="current-password">
            </div>
          </div>

          <div class="form-group">
            <label class="flex items-center">
              <input type="checkbox" name="remember"
                class="rounded border-white border-opacity-30 bg-white bg-opacity-20 text-purple-600 focus:ring-purple-500 focus:ring-offset-0">
              <span class="ml-2 text-white text-shadow-sm text-sm">Remember me</span>
            </label>
          </div>

          <div class="form-group">
            <button type="submit" class="btn-primary-glass w-full py-3 rounded-lg font-semibold text-lg">
              <i class="fas fa-sign-in-alt mr-2"></i>Sign In
            </button>
          </div>
        </form>

        <!-- Demo Credentials -->
        <div class="mt-6 glass-effect-card rounded-lg p-4">
          <h3 class="text-white font-semibold mb-3 text-shadow-sm text-sm flex items-center">
            <i class="fas fa-user-secret mr-2"></i>Demo Account
          </h3>
          <div class="space-y-2">
            <!-- Email -->
            <div class="flex items-center justify-between">
              <span class="text-white text-shadow-sm text-xs"><strong>Email:</strong></span>
              <div class="flex items-center space-x-2">
                <span
                  class="text-white text-shadow-sm text-xs font-mono bg-white bg-opacity-10 px-2 py-1 rounded">test@example.com</span>
                <button onclick="copyToClipboard('test@example.com', 'email')"
                  class="copy-btn text-white hover:text-purple-200 transition-colors text-xs">
                  <i class="fas fa-copy"></i>
                </button>
              </div>
            </div>
            <!-- Password -->
            <div class="flex items-center justify-between">
              <span class="text-white text-shadow-sm text-xs"><strong>Password:</strong></span>
              <div class="flex items-center space-x-2">
                <span
                  class="text-white text-shadow-sm text-xs font-mono bg-white bg-opacity-10 px-2 py-1 rounded">password</span>
                <button onclick="copyToClipboard('password', 'password')"
                  class="copy-btn text-white hover:text-purple-200 transition-colors text-xs">
                  <i class="fas fa-copy"></i>
                </button>
              </div>
            </div>
          </div>
          <!-- Copy All Button -->
          <div class="mt-3 pt-3 border-t border-white border-opacity-20">
            <button onclick="copyAllCredentials()" class="w-full btn-glass py-2 rounded text-xs font-medium">
              <i class="fas fa-copy mr-1"></i>Copy All Credentials
            </button>
          </div>
        </div>

        <!-- Links -->
        <div class="mt-6 text-center">
          <a href="{{ route('docs') }}" class="text-white text-shadow-sm hover:text-purple-200 transition-colors text-sm">
            <i class="fas fa-book mr-1"></i>Documentation
          </a>
          <span class="text-white text-shadow-sm mx-2">•</span>
          <a href="{{ route('tutorial') }}"
            class="text-white text-shadow-sm hover:text-purple-200 transition-colors text-sm">
            <i class="fas fa-graduation-cap mr-1"></i>Tutorial
          </a>
        </div>
      </div>
    </div>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      // Auto-focus on email input
      document.getElementById('email').focus();

      // Form validation and auto-submit
      const form = document.querySelector('form');
      const emailInput = document.getElementById('email');
      const passwordInput = document.getElementById('password');

      form.addEventListener('submit', function(e) {
        const submitBtn = form.querySelector('button[type="submit"]');
        submitBtn.disabled = true;
        submitBtn.innerHTML =
          '<div class="flex items-center justify-center"><div class="spinner mr-2"></div>Signing in...</div>';
      });
    });

    // Copy to clipboard function
    function copyToClipboard(text, type) {
      // Try modern clipboard API first
      if (navigator.clipboard && navigator.clipboard.writeText) {
        navigator.clipboard.writeText(text).then(function() {
          showCopySuccess(event.target.closest('.copy-btn'), type);
        }).catch(function(err) {
          console.error('Clipboard API failed:', err);
          // Fallback to execCommand
          fallbackCopyToClipboard(text, event.target.closest('.copy-btn'), type);
        });
      } else {
        // Fallback for older browsers
        fallbackCopyToClipboard(text, event.target.closest('.copy-btn'), type);
      }
    }

    // Fallback copy method using execCommand
    function fallbackCopyToClipboard(text, btn, type) {
      const textArea = document.createElement('textarea');
      textArea.value = text;
      textArea.style.position = 'fixed';
      textArea.style.left = '-999999px';
      textArea.style.top = '-999999px';
      document.body.appendChild(textArea);
      textArea.focus();
      textArea.select();

      try {
        const successful = document.execCommand('copy');
        if (successful) {
          showCopySuccess(btn, type);
        } else {
          showCopyError(btn);
        }
      } catch (err) {
        console.error('Fallback copy failed:', err);
        showCopyError(btn);
      }

      document.body.removeChild(textArea);
    }

    // Show copy success
    function showCopySuccess(btn, type) {
      const icon = btn.querySelector('i');
      const originalIcon = icon.className;

      // Change icon to checkmark
      icon.className = 'fas fa-check text-green-400';

      // Show tooltip
      showTooltip(btn, `${type === 'email' ? 'Email' : 'Password'} copied!`);

      // Reset icon after 2 seconds
      setTimeout(() => {
        icon.className = originalIcon;
      }, 2000);
    }

    // Show copy error
    function showCopyError(btn) {
      const icon = btn.querySelector('i');
      const originalIcon = icon.className;

      // Change icon to error
      icon.className = 'fas fa-times text-red-400';

      // Show tooltip
      showTooltip(btn, 'Failed to copy');

      // Reset icon after 2 seconds
      setTimeout(() => {
        icon.className = originalIcon;
      }, 2000);
    }

    // Copy all credentials function
    function copyAllCredentials() {
      const credentials = `Email: test@example.com\nPassword: password`;
      const btn = event.target;

      // Try modern clipboard API first
      if (navigator.clipboard && navigator.clipboard.writeText) {
        navigator.clipboard.writeText(credentials).then(function() {
          showCopyAllSuccess(btn);
        }).catch(function(err) {
          console.error('Clipboard API failed:', err);
          // Fallback to execCommand
          fallbackCopyAllCredentials(credentials, btn);
        });
      } else {
        // Fallback for older browsers
        fallbackCopyAllCredentials(credentials, btn);
      }
    }

    // Fallback copy all credentials
    function fallbackCopyAllCredentials(credentials, btn) {
      const textArea = document.createElement('textarea');
      textArea.value = credentials;
      textArea.style.position = 'fixed';
      textArea.style.left = '-999999px';
      textArea.style.top = '-999999px';
      document.body.appendChild(textArea);
      textArea.focus();
      textArea.select();

      try {
        const successful = document.execCommand('copy');
        if (successful) {
          showCopyAllSuccess(btn);
        } else {
          showCopyAllError(btn);
        }
      } catch (err) {
        console.error('Fallback copy failed:', err);
        showCopyAllError(btn);
      }

      document.body.removeChild(textArea);
    }

    // Show copy all success
    function showCopyAllSuccess(btn) {
      const icon = btn.querySelector('i');
      const originalText = btn.innerHTML;

      // Change to success state
      btn.innerHTML = '<i class="fas fa-check mr-1"></i>Copied!';
      btn.classList.add('bg-green-600');

      // Reset after 2 seconds
      setTimeout(() => {
        btn.innerHTML = originalText;
        btn.classList.remove('bg-green-600');
      }, 2000);
    }

    // Show copy all error
    function showCopyAllError(btn) {
      const icon = btn.querySelector('i');
      const originalText = btn.innerHTML;

      // Change to error state
      btn.innerHTML = '<i class="fas fa-times mr-1"></i>Failed!';
      btn.classList.add('bg-red-600');

      // Reset after 2 seconds
      setTimeout(() => {
        btn.innerHTML = originalText;
        btn.classList.remove('bg-red-600');
      }, 2000);
    }

    // Show tooltip function
    function showTooltip(element, message) {
      // Remove existing tooltip
      const existingTooltip = document.querySelector('.copy-tooltip');
      if (existingTooltip) {
        existingTooltip.remove();
      }

      // Create tooltip
      const tooltip = document.createElement('div');
      tooltip.className =
        'copy-tooltip fixed z-50 bg-black bg-opacity-80 text-white text-xs px-2 py-1 rounded pointer-events-none';
      tooltip.textContent = message;

      // Position tooltip
      const rect = element.getBoundingClientRect();
      tooltip.style.left = rect.left + (rect.width / 2) - (tooltip.offsetWidth / 2) + 'px';
      tooltip.style.top = rect.top - 30 + 'px';

      document.body.appendChild(tooltip);

      // Remove tooltip after 2 seconds
      setTimeout(() => {
        tooltip.remove();
      }, 2000);
    }
  </script>
@endsection