<template>
  <div class="login-container">
    <!-- 装饰元素 -->
    <div class="decorations">
      <div class="deco deco-1"></div>
      <div class="deco deco-2"></div>
      <div class="deco deco-3"></div>
    </div>

    <!-- 登录卡片 -->
    <div class="login-card">
      <!-- Logo区域 -->
      <div class="logo-section">
        <img src="/logo.png" alt="Logo" class="logo-img" />
        <div class="brand-info">
          <h1>少儿智慧阅读</h1>
          <p>读启智慧，阅见未来</p>
        </div>
      </div>

      <!-- 角色选择 -->
      <div class="role-section">
        <div
          v-for="role in roles"
          :key="role.value"
          :class="['role-btn', { active: formState.role === role.value }]"
          @click="selectRole(role.value)"
        >
          <component :is="role.icon" />
          <span>{{ role.label }}</span>
        </div>
      </div>

      <!-- 登录表单 -->
      <a-form
        :model="formState"
        @finish="handleLogin"
        layout="vertical"
        class="login-form"
      >
        <a-form-item name="account" :rules="[{ required: true, message: '请输入账号' }]">
          <a-input
            v-model:value="formState.account"
            placeholder="请输入账号"
            size="large"
            allow-clear
          >
            <template #prefix><UserOutlined /></template>
          </a-input>
        </a-form-item>

        <a-form-item name="password" :rules="[{ required: true, message: '请输入密码' }]">
          <a-input-password
            v-model:value="formState.password"
            placeholder="请输入密码"
            size="large"
          >
            <template #prefix><LockOutlined /></template>
          </a-input-password>
        </a-form-item>

        <a-form-item>
          <a-button
            type="primary"
            html-type="submit"
            size="large"
            block
            :loading="loading"
            class="login-btn"
          >
            登录
          </a-button>
        </a-form-item>
      </a-form>

      <!-- 测试账号 -->
      <div class="test-section">
        <div class="test-title">快速体验</div>
        <div class="test-list">
          <span
            v-for="acc in testAccounts"
            :key="acc.role"
            class="test-item"
            @click="fillAccount(acc)"
          >
            {{ acc.label }}: {{ acc.account }}
          </span>
        </div>
      </div>
    </div>

    <!-- 底部版权 -->
    <div class="footer">
      <span>© 2026 少儿智慧阅读服务平台</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, watch, markRaw } from 'vue';
import {
  UserOutlined,
  LockOutlined,
  SettingOutlined,
  SolutionOutlined,
  ReadOutlined,
  HomeOutlined,
} from '@ant-design/icons-vue';
import { useUserStore } from '@/stores/user';

const userStore = useUserStore();

const roles = [
  { value: 'admin', label: '超管', icon: markRaw(SettingOutlined) },
  { value: 'school', label: '学校', icon: markRaw(SolutionOutlined) },
  { value: 'teacher', label: '教师', icon: markRaw(ReadOutlined) },
  { value: 'parent', label: '家长', icon: markRaw(HomeOutlined) },
];

const testAccounts = [
  { role: 'admin', label: '超管', account: 'admin', password: 'admin123' },
  { role: 'school', label: '学校', account: 'school', password: '123456' },
  { role: 'teacher', label: '教师', account: 'teacher1', password: '123456' },
  { role: 'parent', label: '家长', account: 'parent1', password: '123456' },
];

const formState = reactive({
  role: 'admin',
  account: 'admin',
  password: 'admin123',
});

const loading = ref(false);

const selectRole = (role: string) => {
  formState.role = role;
};

const fillAccount = (acc: any) => {
  formState.role = acc.role;
  formState.account = acc.account;
  formState.password = acc.password;
};

watch(() => formState.role, (role) => {
  const found = testAccounts.find(t => t.role === role);
  if (found) {
    formState.account = found.account;
    formState.password = found.password;
  }
});

const handleLogin = async () => {
  loading.value = true;
  try {
    await userStore.login(formState.account, formState.password, formState.role);
  } finally {
    loading.value = false;
  }
};
</script>

<style scoped lang="scss">
// 温暖明快的配色
$primary: #FF8C42;        // 温暖橙
$primary-light: #FFF4EB;
$secondary: #6C5CE7;      // 梦幻紫
$accent: #00D9A5;         // 薄荷绿
$coral: #FF7675;          // 珊瑚粉
$sky: #74B9FF;            // 天空蓝
$text-dark: #2D3436;
$text-gray: #636E72;
$text-light: #B2BEC3;
$bg-cream: #FEFEFE;

.login-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #FFF5F5 0%, #FFF0E6 50%, #F0F9FF 100%);
  padding: 24px;
  position: relative;
  overflow: hidden;
}

// 背景装饰
.decorations {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.deco {
  position: absolute;
  border-radius: 50%;
  opacity: 0.6;

  &.deco-1 {
    width: 300px;
    height: 300px;
    background: linear-gradient(135deg, rgba($coral, 0.15), rgba($primary, 0.1));
    top: -100px;
    right: -50px;
  }

  &.deco-2 {
    width: 200px;
    height: 200px;
    background: linear-gradient(135deg, rgba($sky, 0.15), rgba($secondary, 0.1));
    bottom: 100px;
    left: -50px;
  }

  &.deco-3 {
    width: 150px;
    height: 150px;
    background: linear-gradient(135deg, rgba($accent, 0.12), rgba($sky, 0.08));
    bottom: -50px;
    right: 20%;
  }
}

// 登录卡片
.login-card {
  width: 100%;
  max-width: 400px;
  background: white;
  border-radius: 24px;
  padding: 40px 36px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
  position: relative;
  z-index: 1;

  @media (max-width: 480px) {
    padding: 32px 24px;
    border-radius: 20px;
  }
}

// Logo区域
.logo-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 32px;

  .logo-img {
    width: 75px;
    height: 75px;
    object-fit: contain;
    margin-bottom: 16px;
    margin-top: -5px;
  }

  .brand-info {
    text-align: center;

    h1 {
      font-size: 22px;
      font-weight: 600;
      color: $text-dark;
      margin: 0 0 4px 0;
      letter-spacing: 1px;
    }

    p {
      font-size: 13px;
      color: $text-gray;
      margin: 0;
    }
  }
}

// 角色选择
.role-section {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 24px;
}

.role-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 8px;
  background: #FAFAFA;
  border: 1.5px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 12px;
  color: $text-gray;

  .anticon {
    font-size: 20px;
  }

  &:hover {
    background: $primary-light;
    border-color: rgba($primary, 0.3);
    color: $primary;
  }

  &.active {
    background: $primary-light;
    border-color: $primary;
    color: $primary;
    font-weight: 500;
  }
}

// 登录表单
.login-form {
  :deep(.ant-form-item) {
    margin-bottom: 16px;

    .ant-form-item-label {
      display: none;
    }

    .ant-input-affix-wrapper,
    .ant-input {
      height: 44px;
      border-radius: 12px;
      border-color: #EEE;
      background: #FAFAFA;
      font-size: 14px;
      display: flex;
      align-items: center;

      &:hover,
      &:focus,
      &.ant-input-affix-wrapper-focused {
        border-color: $primary;
        background: white;
        box-shadow: 0 0 0 3px rgba($primary, 0.08);
      }

      &::placeholder {
        color: $text-light;
      }

      input {
        height: 100%;
        display: flex;
        align-items: center;
      }
    }

    .ant-input-prefix {
      color: $text-light;
      margin-right: 8px;
      display: flex;
      align-items: center;
    }
  }

  .login-btn {
    height: 44px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 500;
    background: linear-gradient(135deg, $primary 0%, #FF9F5A 100%);
    border: none;
    box-shadow: 0 4px 12px rgba($primary, 0.25);
    margin-top: 8px;

    &:hover {
      background: linear-gradient(135deg, #FF7B2E 0%, $primary 100%);
      transform: translateY(-1px);
      box-shadow: 0 6px 16px rgba($primary, 0.3);
    }

    &:active {
      transform: translateY(0);
    }
  }
}

// 测试账号 - 暂时隐藏
.test-section {
  display: none;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #F5F5F5;

  .test-title {
    font-size: 12px;
    color: $text-light;
    margin-bottom: 10px;
    text-align: center;
  }

  .test-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }

  .test-item {
    font-size: 11px;
    color: $text-gray;
    background: #F8F8F8;
    padding: 4px 10px;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s ease;

    &:hover {
      background: $primary-light;
      color: $primary;
    }
  }
}

// 底部版权
.footer {
  margin-top: 24px;
  font-size: 12px;
  color: $text-light;
}
</style>
