<template>
  <div class="auth-page">
    <div class="auth-card">
      <div class="auth-header">
        <div class="brand">
          <span class="brand-mark">TQ</span>
          <span class="brand-name">TrakQR</span>
        </div>
        <h1>{{ title }}</h1>
        <p>{{ subtitle }}</p>
      </div>

      <!-- Loading state -->
      <div v-if="loading" class="status-message loading">
        <div class="spinner"></div>
        <p>Verifying your email...</p>
      </div>

      <!-- Success state -->
      <div v-else-if="success" class="status-message success">
        <div class="status-icon success-icon">
          <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
            <polyline points="22 4 12 14.01 9 11.01"/>
          </svg>
        </div>
        <h2>Email verified!</h2>
        <p>Your email has been verified successfully. You can now access all features.</p>
        <router-link to="/dashboard" class="cta full">Go to Dashboard</router-link>
      </div>

      <!-- Error state -->
      <div v-else-if="error" class="status-message error">
        <div class="status-icon error-icon">
          <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <circle cx="12" cy="12" r="10"/>
            <line x1="15" y1="9" x2="9" y2="15"/>
            <line x1="9" y1="9" x2="15" y2="15"/>
          </svg>
        </div>
        <h2>Verification failed</h2>
        <p>{{ error }}</p>
        <div class="action-buttons">
          <router-link to="/settings" class="cta full">Request new link</router-link>
          <router-link to="/login" class="link-secondary">Back to login</router-link>
        </div>
      </div>

      <!-- No token state -->
      <div v-else class="status-message error">
        <div class="status-icon error-icon">
          <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <circle cx="12" cy="12" r="10"/>
            <line x1="12" y1="8" x2="12" y2="12"/>
            <line x1="12" y1="16" x2="12.01" y2="16"/>
          </svg>
        </div>
        <h2>Invalid link</h2>
        <p>This verification link is invalid or missing. Please check your email for the correct link.</p>
        <div class="action-buttons">
          <router-link to="/settings" class="cta full">Request new link</router-link>
          <router-link to="/login" class="link-secondary">Back to login</router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { authApi } from '../../api/auth.js';

const route = useRoute();

const loading = ref(false);
const success = ref(false);
const error = ref('');

const token = computed(() => route.query.token || '');

const title = computed(() => {
  if (loading.value) return 'Verifying email';
  if (success.value) return 'Email verified';
  if (error.value || !token.value) return 'Verification failed';
  return 'Verify your email';
});

const subtitle = computed(() => {
  if (loading.value) return 'Please wait while we verify your email address';
  if (success.value) return 'Your account is now fully activated';
  return 'There was a problem with your verification';
});

onMounted(async () => {
  if (!token.value) {
    return;
  }

  loading.value = true;

  try {
    await authApi.verifyEmail(token.value);
    success.value = true;
  } catch (err) {
    error.value = err.message || 'Unable to verify your email. The link may be invalid or expired.';
  } finally {
    loading.value = false;
  }
});
</script>

<style scoped>
.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.auth-card {
  width: 100%;
  max-width: 400px;
  background: var(--surface);
  border-radius: 24px;
  padding: 40px;
  box-shadow: var(--shadow);
}

.auth-header {
  text-align: center;
  margin-bottom: 32px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--ink);
  color: #fff4ec;
  font-weight: 700;
}

.brand-name {
  font-size: 1.2rem;
  font-weight: 600;
}

.auth-header h1 {
  font-size: 1.5rem;
  margin-bottom: 8px;
}

.auth-header p {
  color: var(--muted);
}

.status-message {
  text-align: center;
}

.status-message.loading {
  padding: 20px 0;
}

.spinner {
  width: 48px;
  height: 48px;
  border: 3px solid var(--line);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 16px;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.status-message.loading p {
  color: var(--muted);
}

.status-icon {
  margin-bottom: 16px;
}

.success-icon {
  color: #22c55e;
}

.error-icon {
  color: #dc2626;
}

.status-message h2 {
  font-size: 1.25rem;
  margin-bottom: 12px;
}

.status-message p {
  color: var(--muted);
  margin-bottom: 24px;
  line-height: 1.5;
}

.action-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cta.full {
  width: 100%;
  padding: 14px;
  font-size: 1rem;
  display: block;
  text-align: center;
}

.link-secondary {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.9rem;
}

.link-secondary:hover {
  color: var(--ink);
  text-decoration: underline;
}
</style>
