<script setup lang="ts">
import { ref } from 'vue'
import { useApi } from '@/composables/useApi'
import { RouterLink } from 'vue-router'
import Logo from '@/components/ds/brand/Logo.vue'
import Input from '@/components/ds/forms/Input.vue'
import Button from '@/components/ds/core/Button.vue'
import Alert from '@/components/ds/feedback/Alert.vue'

const api = useApi()
const email = ref('')
const isLoading = ref(false)
const success = ref(false)
const errorMessage = ref('')

async function handleSubmit() {
  if (!email.value) return

  isLoading.value = true
  errorMessage.value = ''
  try {
    await api.post('/auth/forgot-password', { email: email.value })
    success.value = true
  } catch (err) {
    errorMessage.value = err instanceof Error ? err.message : 'Failed to send reset email'
  } finally {
    isLoading.value = false
  }
}
</script>

<template>
  <div class="auth-shell">
    <div class="auth-card">
      <!-- Branding -->
      <div class="auth-brand">
        <div class="auth-brand__mark">
          <Logo :size="36" tagline="Game Server Operations" />
        </div>
      </div>

      <!-- Success state -->
      <div v-if="success" class="auth-success">
        <Alert tone="online" title="Check your email">
          Reset instructions sent to <strong class="auth-success__addr">{{ email }}</strong>
        </Alert>
        <RouterLink to="/login" class="auth-back-link">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
            <path d="M19 12H5M12 5l-7 7 7 7" />
          </svg>
          Back to sign in
        </RouterLink>
      </div>

      <!-- Form -->
      <template v-else>
        <div class="auth-form-header">
          <h1 class="auth-form-header__title">Forgot password?</h1>
          <p class="auth-form-header__sub">Enter your email to receive reset instructions.</p>
        </div>

        <Alert v-if="errorMessage" tone="danger">{{ errorMessage }}</Alert>

        <form class="auth-form" @submit.prevent="handleSubmit">
          <Input
            v-model="email"
            label="Email"
            type="email"
            placeholder="admin@example.com"
            icon="mail"
            :required="true"
          />

          <Button
            type="submit"
            :loading="isLoading"
            :block="true"
            size="md"
          >
            Send reset link
          </Button>
        </form>

        <RouterLink to="/login" class="auth-back-link">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
            <path d="M19 12H5M12 5l-7 7 7 7" />
          </svg>
          Back to sign in
        </RouterLink>
      </template>
    </div>
  </div>
</template>

<style scoped>
.auth-shell {
  min-height: 100vh;
  background: var(--surface-canvas);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}

.auth-card {
  width: 100%;
  max-width: 400px;
  background: var(--surface-base);
  border-radius: var(--radius-lg);
  box-shadow: var(--ring-default), var(--shadow-lg);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.auth-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding-bottom: var(--space-1);
}

.auth-brand__mark {
  color: var(--accent);
}

/* Success state */
.auth-success {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: center;
}
.auth-success__addr {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-primary);
}

/* Form header */
.auth-form-header {
  text-align: center;
}
.auth-form-header__title {
  margin: 0 0 var(--space-1-5);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: var(--tracking-tight);
}
.auth-form-header__sub {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Back link */
.auth-back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  align-self: center;
  font-size: var(--text-sm);
  color: var(--text-muted);
  text-decoration: none;
  transition: color 120ms ease;
}
.auth-back-link:hover { color: var(--text-secondary); }
</style>
