<template>
  <div class="min-h-screen flex items-center justify-center bg-surface-gray-2 py-12 px-4 sm:px-6 lg:px-8">
    <div class="max-w-md w-full space-y-8">
      <div class="text-center">
        <AdminLogo class="mx-auto h-16 w-16" />
        <h2 class="mt-6 text-3xl font-bold text-ink-gray-9">
          Admin Panel
        </h2>
        <p class="mt-2 text-sm text-ink-gray-5">
          {{ $t('auth.login') }}
        </p>
      </div>

      <form class="mt-8 space-y-6" @submit.prevent="handleLogin">
        <div class="space-y-4">
          <div>
            <label for="email" class="block text-sm font-medium text-ink-gray-7">
              {{ $t('auth.email') }}
            </label>
            <TextInput
              id="email"
              v-model="email"
              type="email"
              required
              class="mt-1"
              :placeholder="$t('auth.email')"
            />
          </div>

          <div>
            <label for="password" class="block text-sm font-medium text-ink-gray-7">
              {{ $t('auth.password') }}
            </label>
            <TextInput
              id="password"
              v-model="password"
              type="password"
              required
              class="mt-1"
              :placeholder="$t('auth.password')"
            />
          </div>
        </div>

        <div class="flex items-center justify-between">
          <div class="flex items-center">
            <input
              id="remember-me"
              v-model="rememberMe"
              type="checkbox"
              class="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
            />
            <label for="remember-me" class="ml-2 block text-sm text-ink-gray-7">
              {{ $t('auth.rememberMe') }}
            </label>
          </div>

          <div class="text-sm">
            <a href="#" class="font-medium text-blue-600 hover:text-blue-500">
              {{ $t('auth.forgotPassword') }}
            </a>
          </div>
        </div>

        <div>
          <Button
            type="submit"
            variant="solid"
            class="w-full"
            :loading="loading"
          >
            {{ $t('auth.loginButton') }}
          </Button>
        </div>

        <ErrorMessage v-if="error" :message="error" />
      </form>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { Button, TextInput, ErrorMessage, call } from 'frappe-ui'
import AdminLogo from '@/components/Icons/AdminLogo.vue'
import { session } from '@/session'

const router = useRouter()
const route = useRoute()

const email = ref('')
const password = ref('')
const rememberMe = ref(false)
const loading = ref(false)
const error = ref('')

async function handleLogin() {
  loading.value = true
  error.value = ''

  try {
    await call('login', {
      usr: email.value,
      pwd: password.value,
    })

    await session.init()

    const redirect = route.query.redirect || '/dashboard'
    router.push(redirect)
  } catch (e) {
    error.value = e.message || 'Login failed'
  } finally {
    loading.value = false
  }
}
</script>
