<script lang="ts" setup>
import { useForm, Link } from '@inertiajs/vue3'
import { ref } from 'vue'
import AuthLayout from '@/Layouts/AuthLayout.vue'

defineOptions({ layout: AuthLayout })

interface SelectedPlan {
  id: number
  name: string
  price: string
  currency: string
  billing_cycle: string
  service_type: string
}

interface Props {
  status?: string
  selectedPlan?: SelectedPlan | null
}

const props = defineProps<Props>()

const isPasswordVisible = ref(false)

const form = useForm({
  email: '',
  password: '',
  remember: false,
})

const submit = (): void => {
  form.post('/login', {
    onFinish: () => form.reset('password'),
  })
}
</script>

<template>
  <VCardText>
    <h4 class="text-h4 mb-1">
      Welcome to <span class="text-capitalize">EZSCALE</span>
    </h4>
    <p class="mb-0">
      Sign in to manage your services
    </p>
  </VCardText>

  <VCardText>
    <VAlert
      v-if="status"
      type="success"
      variant="tonal"
      class="mb-4"
    >
      {{ status }}
    </VAlert>

    <VAlert
      v-if="props.selectedPlan"
      type="info"
      variant="tonal"
      class="mb-4"
    >
      Sign in to complete your purchase of <strong>{{ props.selectedPlan.name }}</strong>
    </VAlert>

    <VForm @submit.prevent="submit">
      <VRow>
        <!-- email -->
        <VCol cols="12">
          <VTextField
            v-model="form.email"
            autofocus
            label="Email"
            type="email"
            placeholder="john@example.com"
            prepend-inner-icon="tabler-mail"
            :error-messages="form.errors.email ? [form.errors.email] : []"
          />
        </VCol>

        <!-- password -->
        <VCol cols="12">
          <VTextField
            v-model="form.password"
            label="Password"
            placeholder="············"
            :type="isPasswordVisible ? 'text' : 'password'"
            autocomplete="current-password"
            prepend-inner-icon="tabler-lock"
            :append-inner-icon="isPasswordVisible ? 'tabler-eye-off' : 'tabler-eye'"
            :error-messages="form.errors.password ? [form.errors.password] : []"
            @click:append-inner="isPasswordVisible = !isPasswordVisible"
          />

          <div class="d-flex align-center flex-wrap justify-space-between my-6">
            <VCheckbox
              v-model="form.remember"
              label="Remember me"
            />
            <Link
              class="text-primary"
              href="/forgot-password"
            >
              Forgot Password?
            </Link>
          </div>

          <VBtn
            block
            type="submit"
            :loading="form.processing"
            :disabled="form.processing"
          >
            Login
          </VBtn>
        </VCol>

        <!-- create account -->
        <VCol
          cols="12"
          class="text-body-1 text-center"
        >
          <span class="d-inline-block">
            New on our platform?
          </span>
          <Link
            class="text-primary ms-1 d-inline-block text-body-1"
            href="/register"
          >
            Create an account
          </Link>
        </VCol>
      </VRow>
    </VForm>
  </VCardText>
</template>
