@extends('layouts.app')

@section('content')
<main id="mainContent">
  <section class="section" style="min-height: 75vh; display: flex; align-items: center; padding: 4rem 0;">
    <div class="container" style="max-width: 540px;">
      
      <div class="service-card reveal" style="padding: 2.5rem; background: var(--bg-card); border-radius: var(--radius-lg); border: 1px solid var(--border-light); box-shadow: var(--shadow-lg); text-align: center;">
        
        <!-- Icon -->
        <div style="width: 64px; height: 64px; margin: 0 auto 1.5rem; border-radius: 50%; background: rgba(245, 158, 11, 0.12); color: #f59e0b; display: flex; align-items: center; justify-content: center; font-size: 1.75rem;">
          <i class="fas fa-clock"></i>
        </div>

        <span class="section-badge" style="margin-bottom: 0.75rem; background: rgba(245, 158, 11, 0.12); color: #d97706; border-color: rgba(245, 158, 11, 0.25);">
          <i class="fas fa-exclamation-triangle"></i> Link Expired
        </span>

        <h1 style="font-size: 1.75rem; font-family: var(--font-heading); font-weight: 700; color: var(--text-heading); margin-bottom: 0.75rem;">
          Verification Link Expired
        </h1>

        <p style="color: var(--text-light); font-size: 0.95rem; line-height: 1.6; margin-bottom: 1.5rem;">
          For your security, verification links expire after <strong>60 minutes</strong>. The link you clicked for <strong>{{ $email ?? ($user->email ?? 'your account') }}</strong> is no longer active.
        </p>

        <!-- Dynamic Success / Error Alert -->
        <div id="resendStatusAlert" style="display: none; padding: 0.9rem 1.25rem; border-radius: var(--radius-sm); margin-bottom: 1.5rem; font-size: 0.95rem; font-weight: 600; text-align: left; align-items: center; gap: 0.6rem;">
          <i id="resendStatusIcon" class="fas fa-check-circle" style="font-size: 1.15rem; flex-shrink: 0;"></i>
          <span id="resendStatusMessage"></span>
        </div>

        @if (session('success') || session('status') == 'verification-link-sent')
          <div style="padding: 0.9rem 1.25rem; background: rgba(16, 185, 129, 0.12); border-left: 4px solid var(--success); border-radius: var(--radius-sm); margin-bottom: 1.5rem; color: var(--success); font-size: 0.95rem; font-weight: 600; text-align: left; display: flex; align-items: center; gap: 0.6rem;">
            <i class="fas fa-check-circle" style="font-size: 1.15rem; flex-shrink: 0;"></i>
            <span>A new verification link has been sent to your email address. Please check your inbox.</span>
          </div>
        @endif

        <!-- 1-Click Resend Form -->
        <form id="expiredResendForm" method="POST" action="{{ route('verification.resend-public') }}" style="margin-bottom: 1.25rem;">
          @csrf
          <input type="hidden" name="email" value="{{ $email ?? ($user->email ?? '') }}">

          <button id="expiredResendBtn" type="submit" class="btn btn-primary" style="width: 100%; justify-content: center; font-weight: 600; padding: 0.85rem 1.5rem;">
            <span id="resendSpinner" style="display: none; margin-right: 0.5rem;">
              <i class="fas fa-spinner fa-spin"></i>
            </span>
            <span id="resendBtnText"><i class="fas fa-envelope"></i> Send New Verification Link</span>
          </button>
        </form>

        <div style="display: flex; gap: 0.75rem; justify-content: center; margin-top: 1rem;">
          <a href="{{ route('login') }}" class="btn btn-outline" style="flex: 1; justify-content: center; font-size: 0.9rem;">
            <i class="fas fa-sign-in-alt"></i> Go to Sign In
          </a>
          <a href="{{ route('home') }}" class="btn btn-outline" style="flex: 1; justify-content: center; font-size: 0.9rem;">
            <i class="fas fa-home"></i> Home
          </a>
        </div>

      </div>
    </div>
  </section>
</main>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('expiredResendForm');
    const btn = document.getElementById('expiredResendBtn');
    const btnText = document.getElementById('resendBtnText');
    const spinner = document.getElementById('resendSpinner');
    const alertBox = document.getElementById('resendStatusAlert');
    const alertMsg = document.getElementById('resendStatusMessage');
    const alertIcon = document.getElementById('resendStatusIcon');

    let cooldownTimer = null;

    function startCooldown(seconds) {
      btn.disabled = true;
      let remaining = seconds;
      btnText.innerHTML = '<i class="fas fa-hourglass-half"></i> Request new link in ' + remaining + 's';

      if (cooldownTimer) clearInterval(cooldownTimer);
      cooldownTimer = setInterval(function() {
        remaining--;
        if (remaining <= 0) {
          clearInterval(cooldownTimer);
          btn.disabled = false;
          btnText.innerHTML = '<i class="fas fa-envelope"></i> Send New Verification Link';
        } else {
          btnText.innerHTML = '<i class="fas fa-hourglass-half"></i> Request new link in ' + remaining + 's';
        }
      }, 1000);
    }

    if (form) {
      form.addEventListener('submit', function(e) {
        e.preventDefault();

        btn.disabled = true;
        spinner.style.display = 'inline-block';
        btnText.innerHTML = 'Sending new link...';

        const token = form.querySelector('input[name="_token"]').value;
        const email = form.querySelector('input[name="email"]').value;

        fetch(form.action, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/json',
            'X-CSRF-TOKEN': token
          },
          body: JSON.stringify({ email: email })
        })
        .then(response => response.json().then(data => ({ status: response.status, body: data })))
        .then(res => {
          spinner.style.display = 'none';

          if (res.status === 200 || res.status === 302) {
            alertBox.style.display = 'flex';
            alertBox.style.background = 'rgba(16, 185, 129, 0.12)';
            alertBox.style.borderLeft = '4px solid var(--success)';
            alertBox.style.color = 'var(--success)';
            alertIcon.className = 'fas fa-check-circle';
            alertMsg.textContent = (res.body && res.body.message) ? res.body.message : 'A fresh verification link has been sent to your email!';
            startCooldown(60);
          } else if (res.status === 429) {
            alertBox.style.display = 'flex';
            alertBox.style.background = 'rgba(239, 68, 68, 0.12)';
            alertBox.style.borderLeft = '4px solid #ef4444';
            alertBox.style.color = '#ef4444';
            alertIcon.className = 'fas fa-exclamation-circle';
            alertMsg.textContent = 'Too many requests. Please wait a minute before requesting another verification email.';
            startCooldown(60);
          } else {
            alertBox.style.display = 'flex';
            alertBox.style.background = 'rgba(239, 68, 68, 0.12)';
            alertBox.style.borderLeft = '4px solid #ef4444';
            alertBox.style.color = '#ef4444';
            alertIcon.className = 'fas fa-exclamation-circle';
            alertMsg.textContent = (res.body && res.body.message) ? res.body.message : 'Unable to send link. Please sign in or register.';
            btn.disabled = false;
            btnText.innerHTML = '<i class="fas fa-envelope"></i> Send New Verification Link';
          }
        })
        .catch(err => {
          spinner.style.display = 'none';
          btn.disabled = false;
          btnText.innerHTML = '<i class="fas fa-envelope"></i> Send New Verification Link';
          alertBox.style.display = 'flex';
          alertBox.style.background = 'rgba(239, 68, 68, 0.12)';
          alertBox.style.borderLeft = '4px solid #ef4444';
          alertBox.style.color = '#ef4444';
          alertMsg.textContent = 'Network error. Please try again.';
        });
      });
    }
  });
</script>
@endsection