<template>
  <v-container
    class="fill-height"
    fluid
  >
    <v-row
      align="center"
      justify="center"
    >
      <v-col
        cols="12"
        sm="8"
        md="6"
        lg="4"
      >
        <v-card class="elevation-12">
          <v-toolbar
            color="primary"
            dark
            flat
          >
            <v-toolbar-title>Login</v-toolbar-title>
          </v-toolbar>
          <v-card-text>
            <v-form
              ref="form"
              v-model="valid"
              @submit.prevent="login"
            >
              <v-text-field
                v-model="username"
                :rules="usernameRules"
                label="Username"
                prepend-icon="mdi-account"
                required
              />

              <v-text-field
                v-model="password"
                :rules="passwordRules"
                label="Password"
                prepend-icon="mdi-lock"
                :append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
                :type="showPassword ? 'text' : 'password'"
                required
                @click:append="showPassword = !showPassword"
              />
            </v-form>
          </v-card-text>
          <v-card-actions>
            <v-spacer />
            <v-btn
              color="primary"
              :disabled="!valid"
              @click="login"
            >
              Login
            </v-btn>
          </v-card-actions>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

<script lang="ts" setup>
import {ref} from 'vue'

const router = useRouter()
const valid = ref(false)
const username = ref('')
const password = ref('')
const showPassword = ref(false)

const usernameRules = [
  (v: string) => !!v || 'Username is required',
]

const passwordRules = [
  (v: string) => !!v || 'Password is required',
  (v: string) => v.length >= 5 || 'Password must be at least 5 characters',
]

async function login() {
  // This is where you would typically handle authentication
  try {
    // Example authentication logic (replace with your actual authentication API)
    // const response = await api.login(username.value, password.value)

    // For now, we'll just simulate a successful login
    console.log('Login attempted with:', {username: username.value, password: password.value})

    const res = await fetch("/gui/auth/login", {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        username: username.value, password: password.value
      })
    })
    if (!res.ok) {
      alert("error!!!")
    }

    console.log(await res.json())
    // After successful login, you would typically:
    // 1. Store auth token in localStorage or a state management store
    // 2. Redirect to a protected page
    router.push('/')
  } catch (error) {
    console.error('Login failed:', error)
    // Handle login error - display message to user
  }
}
</script>

<style scoped>
.fill-height {
  height: 100%;
}
</style>
