<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useAuthStore } from '@/stores/auth'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Checkbox } from '@/components/ui/checkbox'
import { Label } from '@/components/ui/label'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Eye, EyeOff } from 'lucide-vue-next'

const auth = useAuthStore()
const email = ref('')
const password = ref('')
const showPassword = ref(false)
const rememberMe = ref(false)

onMounted(() => {
  const saved = localStorage.getItem('alpha_remember_email')
  if (saved) {
    email.value = saved
    rememberMe.value = true
  }
})

async function handleLogin() {
  if (!email.value || !password.value) return

  if (rememberMe.value) {
    localStorage.setItem('alpha_remember_email', email.value)
  } else {
    localStorage.removeItem('alpha_remember_email')
  }

  await auth.login({ email: email.value, password: password.value })
}
</script>

<template>
  <div class="flex min-h-svh flex-col items-center justify-center gap-6 bg-background p-6">
    <img src="/Alpha.svg" alt="Alpha" class="h-10 w-auto dark:invert" />

    <Card class="w-full max-w-sm cursor-pointer transition-colors border-primary/50">
      <CardHeader>
        <CardTitle class="text-2xl">Iniciar sesión</CardTitle>
      </CardHeader>

      <CardContent>
        <form @submit.prevent="handleLogin" class="grid gap-4">
          <div class="grid gap-2">
            <Label for="email">Email</Label>
            <Input id="email" v-model="email" type="email" placeholder="ricardo@..." autocomplete="email" />
          </div>
          <div class="grid gap-2">
            <Label for="password">Contraseña</Label>
            <div class="relative">
              <Input
                id="password"
                v-model="password"
                :type="showPassword ? 'text' : 'password'"
                placeholder="••••••••"
                autocomplete="current-password"
                class="pr-10"
              />
              <button
                type="button"
                class="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
                @click="showPassword = !showPassword"
              >
                <EyeOff v-if="showPassword" class="size-4" />
                <Eye v-else class="size-4" />
              </button>
            </div>
          </div>

          <div class="flex items-center gap-2">
            <Checkbox id="remember" v-model:checked="rememberMe" />
            <Label for="remember" class="text-sm font-normal cursor-pointer">Recordarme</Label>
          </div>

          <div v-if="auth.error" class="text-sm text-destructive bg-destructive/10 rounded-md px-3 py-2">
            {{ auth.error }}
          </div>

          <Button type="submit" class="w-full" :disabled="auth.loading">
            {{ auth.loading ? 'Ingresando...' : 'Iniciar sesión' }}
          </Button>
        </form>

        <p class="text-center text-xs text-muted-foreground/40 mt-6">
          kappa.lambdaanalytics.co
        </p>
      </CardContent>
    </Card>
  </div>
</template>
