<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 {
  selectedPlan?: SelectedPlan | null
}

const props = withDefaults(defineProps<Props>(), {
  selectedPlan: null,
})

const isPasswordVisible = ref(false)
const privacyPolicy = ref(false)

const form = useForm({
  name: '',
  email: '',
  password: '',
  password_confirmation: '',
})

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

<template>
  <VCardText>
    <h4 class="text-h4 mb-1">
      {{ props.selectedPlan ? 'Create your account' : 'Get started with EZSCALE' }}
    </h4>
    <p class="mb-0">
      Start hosting your projects with EZSCALE
    </p>
  </VCardText>

  <VCardText>
    <VAlert
      v-if="props.selectedPlan"
      type="info"
      variant="tonal"
      class="mb-4"
    >
      Create an account to get started with <strong>{{ props.selectedPlan.name }}</strong> &mdash; ${{ props.selectedPlan.price }}/{{ props.selectedPlan.billing_cycle }}
    </VAlert>

    <VForm @submit.prevent="submit">
      <VRow>
        <!-- name -->
        <VCol cols="12">
          <VTextField
            v-model="form.name"
            autofocus
            label="Full Name"
            placeholder="John Doe"
            prepend-inner-icon="tabler-user"
            :error-messages="form.errors.name ? [form.errors.name] : []"
          />
        </VCol>

        <!-- email -->
        <VCol cols="12">
          <VTextField
            v-model="form.email"
            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="new-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"
          />
        </VCol>

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

          <div class="d-flex align-center my-6">
            <VCheckbox
              v-model="privacyPolicy"
              inline
            >
              <template #label>
                <span class="me-1">I agree to the</span>
                <a href="/terms-of-service" class="text-primary" target="_blank">Terms of Service</a>
                <span class="mx-1">&amp;</span>
                <a href="/privacy-policy" class="text-primary" target="_blank">Privacy Policy</a>
              </template>
            </VCheckbox>
          </div>

          <VBtn
            block
            type="submit"
            :loading="form.processing"
            :disabled="form.processing || !privacyPolicy"
          >
            Sign Up
          </VBtn>
        </VCol>

        <!-- login link -->
        <VCol
          cols="12"
          class="text-body-1 text-center"
        >
          <span class="d-inline-block">
            Already have an account?
          </span>
          <Link
            class="text-primary ms-1 d-inline-block text-body-1"
            href="/login"
          >
            Sign in instead
          </Link>
        </VCol>
      </VRow>
    </VForm>
  </VCardText>
</template>
