<template>
  <view class="page login-page">
    <view class="login-hero">
      <view class="login-hero__mark">AI</view>
      <text class="page-title">瑶光 AI 短剧</text>
      <text class="page-subtitle">在手机上上传剧本、启动 Agent、查看制作进度。</text>
    </view>

    <view class="login-form panel">
      <text class="login-form__title">登录工作台</text>
      <text class="login-form__desc">继续你的短剧项目</text>

      <text class="field-label">账号</text>
      <input
        :value="email"
        class="field-input"
        placeholder="请输入邮箱"
        type="text"
        confirm-type="next"
        cursor-spacing="24"
        :adjust-position="true"
        @input="handleEmailInput"
      />

      <text class="field-label login-form__label">密码</text>
      <input
        :value="password"
        class="field-input"
        placeholder="请输入密码"
        password
        confirm-type="done"
        cursor-spacing="24"
        :adjust-position="true"
        @input="handlePasswordInput"
        @confirm="handleLogin"
      />

      <button class="primary-button login-form__button" :loading="loading" @tap="handleLogin">登录</button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useAuthStore } from "@/stores/auth";

const auth = useAuthStore();
const email = ref("");
const password = ref("");
const loading = ref(false);

function inputValue(event: unknown) {
  const inputEvent = event as {
    detail?: string | number | { value?: string | number };
    target?: { value?: string | number };
  };

  if (typeof inputEvent.detail === "object" && inputEvent.detail) {
    return String(inputEvent.detail.value || "");
  }

  return String(inputEvent.detail ?? inputEvent.target?.value ?? "");
}

function handleEmailInput(event: unknown) {
  email.value = inputValue(event);
}

function handlePasswordInput(event: unknown) {
  password.value = inputValue(event);
}

async function handleLogin() {
  if (!email.value || !password.value) {
    uni.showToast({ title: "请输入账号和密码", icon: "none" });
    return;
  }

  loading.value = true;
  try {
    await auth.login(email.value, password.value);
    uni.switchTab({ url: "/pages/home/index" });
  } catch (error) {
    uni.showToast({ title: error instanceof Error ? error.message : "登录失败", icon: "none" });
  } finally {
    loading.value = false;
  }
}
</script>

<style scoped lang="scss">
.login-page {
  padding-top: 84rpx;
}

.login-hero {
  padding-bottom: 18rpx;
}

.login-hero__mark {
  width: 96rpx;
  height: 96rpx;
  margin-bottom: 28rpx;
  border-radius: 28rpx;
  background: linear-gradient(135deg, #5b5cf6, #1ea7ff);
  color: #ffffff;
  font-size: 30rpx;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 18rpx 42rpx rgba(30, 167, 255, 0.24);
}

.login-form {
  margin-top: 42rpx;
  padding: 32rpx;
}

.login-form__title {
  display: block;
  color: #101828;
  font-size: 34rpx;
  font-weight: 860;
}

.login-form__desc {
  display: block;
  margin-top: 8rpx;
  margin-bottom: 30rpx;
  color: #667085;
  font-size: 25rpx;
}

.login-form__label {
  margin-top: 28rpx;
}

.login-form__button {
  margin-top: 36rpx;
}
</style>
