<script setup>
import { reactive, ref } from "vue";
import { Lock, Message } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import { useI18n } from "vue-i18n";
import { useAuthStore } from "@/stores/auth";

const auth = useAuthStore();
const { t } = useI18n();
const mode = ref("login");
const form = reactive({
  email: "",
  password: "",
  invite_code: "",
});

async function submit() {
  try {
    if (mode.value === "login") {
      await auth.login({ email: form.email, password: form.password });
      ElMessage.success(t("auth.loginSuccess"));
    } else {
      await auth.register({
        email: form.email,
        password: form.password,
        invite_code: form.invite_code || null,
      });
      ElMessage.success(t("auth.registerSuccess"));
    }
  } catch (error) {
    ElMessage.error(error.message || t("common.requestFailed"));
  }
}
</script>

<template>
  <main class="auth-shell">
    <section class="auth-intro">
      <p class="auth-kicker">{{ t("auth.kicker") }}</p>
      <h1>Email Unlimit</h1>
      <p>{{ t("auth.description") }}</p>
      <ul>
        <li>{{ t("auth.featureMailbox") }}</li>
        <li>{{ t("auth.featureRealtime") }}</li>
        <li>{{ t("auth.featurePrivacy") }}</li>
      </ul>
    </section>

    <section class="auth-form-wrap" aria-labelledby="auth-title">
      <div class="segmented-control" role="tablist">
        <button
          type="button"
          :class="{ active: mode === 'login' }"
          role="tab"
          :aria-selected="mode === 'login'"
          @click="mode = 'login'"
        >
          {{ t("auth.login") }}
        </button>
        <button
          type="button"
          :class="{ active: mode === 'register' }"
          role="tab"
          :aria-selected="mode === 'register'"
          @click="mode = 'register'"
        >
          {{ t("auth.register") }}
        </button>
      </div>

      <h2 id="auth-title">
        {{ mode === "login" ? t("auth.welcomeBack") : t("auth.createAccount") }}
      </h2>
      <p class="form-hint">
        {{ mode === "login" ? t("auth.loginHint") : t("auth.registerHint") }}
      </p>

      <form class="auth-form" @submit.prevent="submit">
        <label>
          <span>{{ t("auth.email") }}</span>
          <div class="field-with-icon">
            <el-icon><Message /></el-icon>
            <input
              v-model.trim="form.email"
              type="email"
              autocomplete="email"
              required
              :placeholder="t('auth.emailPlaceholder')"
            />
          </div>
        </label>

        <label>
          <span>{{ t("auth.password") }}</span>
          <div class="field-with-icon">
            <el-icon><Lock /></el-icon>
            <input
              v-model="form.password"
              type="password"
              :autocomplete="
                mode === 'login' ? 'current-password' : 'new-password'
              "
              minlength="8"
              maxlength="128"
              required
              :placeholder="t('auth.passwordPlaceholder')"
            />
          </div>
        </label>

        <label v-if="mode === 'register'">
          <span>{{ t("auth.inviteCode") }}</span>
          <input
            v-model.trim="form.invite_code"
            type="text"
            autocomplete="off"
            :placeholder="t('auth.invitePlaceholder')"
          />
        </label>

        <button class="primary-command" type="submit" :disabled="auth.loading">
          {{
            auth.loading
              ? t("common.processing")
              : mode === "login"
                ? t("auth.login")
                : t("auth.register")
          }}
        </button>
      </form>
    </section>
  </main>
</template>
