<template>
  <div class="login">
    <!-- 语言切换 -->
    <div class="login__lang">
      <LangDropdown />
    </div>

    <!-- Mobile: Single column | Desktop: Split screen -->
    <div class="login__container">
      <!-- Left Panel - Hidden on mobile, visible on lg+ -->
      <div class="login__left">
        <!-- Logo -->
        <div class="login__left-logo">
          <div class="login__left-logo-icon">
            <svg class="login__icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"
              />
            </svg>
          </div>
          <span class="login__left-logo-text">{{ t('摄像头管理系统') }}</span>
        </div>

        <!-- Center content -->
        <div class="login__left-content">
          <h2 class="login__left-title">
            {{ t('欢迎回来') }}
          </h2>
          <p class="login__left-desc">
            {{ t('登录您的管理后台，开始管理您的业务') }}
          </p>

          <!-- Stats -->
          <div class="login__left-stats">
            <div class="login__left-stat">
              <div class="login__left-stat-value">50K+</div>
              <div class="login__left-stat-label">{{ t('用户') }}</div>
            </div>
            <div class="login__left-stat">
              <div class="login__left-stat-value">99.9%</div>
              <div class="login__left-stat-label">{{ t('稳定性') }}</div>
            </div>
            <div class="login__left-stat">
              <div class="login__left-stat-value">24/7</div>
              <div class="login__left-stat-label">{{ t('技术支持') }}</div>
            </div>
          </div>
        </div>

        <!-- Footer -->
        <div class="login__left-footer">&copy; {{ new Date().getFullYear() }} TG Live Game. All rights reserved.</div>
      </div>

      <!-- Right Panel - Login Form -->
      <div class="login__right">
        <div class="login__form-wrapper">
          <!-- Mobile Logo -->
          <div class="login__mobile-logo">
            <div class="login__mobile-logo-icon">
              <svg class="login__icon login__icon--white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"
                />
              </svg>
            </div>
            <span class="login__mobile-logo-text">{{ t('摄像头管理系统') }}</span>
          </div>

          <!-- Title -->
          <div class="login__title-section">
            <h1 class="login__title">{{ t('登录') }}</h1>
            <p class="login__subtitle">{{ t('欢迎回来') }}</p>
          </div>

          <!-- Form -->
          <form class="login__form" @submit.prevent="handleLogin">
            <div class="login__form-item">
              <input
                v-model="loginForm.username"
                type="text"
                :placeholder="t('用户名')"
                class="login__input"
                autocomplete="username"
              />
              <p v-if="errors.username" class="login__error">{{ errors.username }}</p>
            </div>

            <div class="login__form-item">
              <div class="login__password-wrapper">
                <input
                  v-model="loginForm.password"
                  :type="showPassword ? 'text' : 'password'"
                  :placeholder="t('密码')"
                  class="login__input"
                  autocomplete="current-password"
                  @keyup.enter="handleLogin"
                />
                <button type="button" class="login__password-toggle" @click="showPassword = !showPassword">
                  <svg
                    v-if="!showPassword"
                    class="login__icon login__icon--sm"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                  >
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="2"
                      d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
                    />
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="2"
                      d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
                    />
                  </svg>
                  <svg v-else class="login__icon login__icon--sm" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="2"
                      d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"
                    />
                  </svg>
                </button>
              </div>
              <p v-if="errors.password" class="login__error">{{ errors.password }}</p>
            </div>

            <div class="login__actions">
              <label class="login__remember">
                <input v-model="rememberMe" type="checkbox" class="login__checkbox" />
                <span>{{ t('记住我') }}</span>
              </label>
              <span class="login__forgot" @click="goHelp">{{ t('忘记密码？') }}</span>
            </div>

            <button type="submit" class="login__submit" :disabled="loading">
              <span v-if="loading" class="login__loading">
                <svg class="login__spinner" viewBox="0 0 24 24" fill="none">
                  <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                  <path
                    class="opacity-75"
                    fill="currentColor"
                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                  ></path>
                </svg>
              </span>
              {{ t('登录') }}
            </button>
          </form>

          <!-- Version -->
          <div class="login__version">v{{ version }}</div>

          <!-- Mobile Footer -->
          <p class="login__mobile-footer">&copy; {{ new Date().getFullYear() }} TG Live Game</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import LangDropdown from '@/components/LangDropdown.vue'
import { useUserStore } from '@/store/user'
import type { LoginParams } from '@/types'
import { useI18n } from 'vue-i18n'

const router = useRouter()
const route = useRoute()
const userStore = useUserStore()
const { t } = useI18n()

const version = __APP_VERSION__

const loading = ref(false)
const rememberMe = ref(true)
const showPassword = ref(false)

const loginForm = reactive<LoginParams>({
  username: '',
  password: ''
})

const errors = reactive({
  username: '',
  password: ''
})

function validateForm(): boolean {
  let isValid = true
  errors.username = ''
  errors.password = ''

  if (!loginForm.username.trim()) {
    errors.username = t('请输入用户名')
    isValid = false
  }

  if (!loginForm.password.trim()) {
    errors.password = t('请输入密码')
    isValid = false
  }

  return isValid
}

async function handleLogin() {
  if (!validateForm()) return

  loading.value = true
  try {
    const res = await userStore.loginAction(loginForm)
    if (res.success) {
      saveLoginInfo()
      ElMessage.success(t('登录成功'))
      const redirect = (route.query.redirect as string) || '/'
      router.push(redirect)
    } else {
      ElMessage.error(res.errMessage || t('登录失败'))
    }
  } catch (error: any) {
    ElMessage.error(error.message || t('登录失败，请检查网络'))
  } finally {
    loading.value = false
  }
}

// 记住我 - 只保存用户名
const REMEMBER_KEY = 'login_remember'

function saveLoginInfo() {
  if (rememberMe.value) {
    localStorage.setItem(REMEMBER_KEY, loginForm.username)
  } else {
    localStorage.removeItem(REMEMBER_KEY)
  }
}

function loadLoginInfo() {
  const saved = localStorage.getItem(REMEMBER_KEY)
  if (saved) {
    loginForm.username = saved
    rememberMe.value = true
  }
}

onMounted(() => {
  loadLoginInfo()
})

watch(rememberMe, (val) => {
  if (!val) {
    localStorage.removeItem(REMEMBER_KEY)
  }
})

function goHelp() {
  ElMessage.info(t('请联系管理员重置密码'))
}
</script>

<style lang="scss" scoped>
.login {
  position: relative;
  min-height: 100vh;
  background: #ffffff;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;

  &__lang {
    position: absolute;
    top: 20px;
    right: 24px;
    z-index: 10;

    --lang-color: #374151;
    --lang-hover-bg: rgba(0, 0, 0, 0.05);
    --lang-hover-color: #000;

    :deep(.lang-trigger) {
      background: rgba(0, 0, 0, 0.05);
      padding: 8px 12px;
      border-radius: var(--radius-base);
    }
  }

  &__container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;

    @media (min-width: 1024px) {
      flex-direction: row;
    }
  }

  // Left Panel
  &__left {
    display: none;

    @media (min-width: 1024px) {
      display: flex;
      width: 50%;
      background: linear-gradient(to bottom right, #111827, #1f2937, #000000);
      padding: 2rem 3rem;
      flex-direction: column;
      justify-content: space-between;
    }

    @media (min-width: 1280px) {
      width: 40%;
    }
  }

  &__left-logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

  &__left-logo-icon {
    width: 2.5rem;
    height: 2.5rem;
    background: #ffffff;
    border-radius: var(--radius-base);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  &__left-logo-text {
    color: #ffffff;
    font-weight: 600;
    font-size: 1.125rem;
  }

  &__left-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  &__left-title {
    font-size: 1.875rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 1rem;
    line-height: 1.2;

    @media (min-width: 1280px) {
      font-size: 2.25rem;
    }
  }

  &__left-desc {
    color: #9ca3af;
    font-size: 1rem;
    max-width: 24rem;

    @media (min-width: 1280px) {
      font-size: 1.125rem;
    }
  }

  &__left-stats {
    display: flex;
    gap: 2rem;
    margin-top: 2.5rem;
  }

  &__left-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff;

    @media (min-width: 1280px) {
      font-size: 1.875rem;
    }
  }

  &__left-stat-label {
    color: #6b7280;
    font-size: 0.875rem;
  }

  &__left-footer {
    color: #4b5563;
    font-size: 0.875rem;
  }

  // Right Panel
  &__right {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;

    @media (min-width: 640px) {
      padding: 2rem;
    }

    @media (min-width: 768px) {
      padding: 3rem;
    }

    @media (min-width: 1024px) {
      padding: 4rem;
    }
  }

  &__form-wrapper {
    width: 100%;
    max-width: 24rem;

    @media (min-width: 640px) {
      max-width: 28rem;
    }
  }

  // Mobile Logo
  &__mobile-logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 2rem;

    @media (min-width: 640px) {
      margin-bottom: 3rem;
    }

    @media (min-width: 1024px) {
      display: none;
    }
  }

  &__mobile-logo-icon {
    width: 2rem;
    height: 2rem;
    background: #000000;
    border-radius: var(--radius-base);
    display: flex;
    align-items: center;
    justify-content: center;

    @media (min-width: 640px) {
      width: 2.5rem;
      height: 2.5rem;
    }
  }

  &__mobile-logo-text {
    font-weight: 600;
    color: #000000;
    font-size: 1rem;

    @media (min-width: 640px) {
      font-size: 1.125rem;
    }
  }

  // Title
  &__title-section {
    margin-bottom: 2rem;

    @media (min-width: 640px) {
      margin-bottom: 2.5rem;
    }

    @media (min-width: 1024px) {
      margin-bottom: 3rem;
    }
  }

  &__title {
    font-size: 1.875rem;
    font-weight: 800;
    color: #000000;
    letter-spacing: -0.025em;
    line-height: 1;
    margin: 0 0 0.5rem 0;

    @media (min-width: 640px) {
      font-size: 2.25rem;
      margin-bottom: 0.75rem;
    }

    @media (min-width: 1024px) {
      font-size: 3rem;
    }
  }

  &__subtitle {
    color: #9ca3af;
    font-size: 1rem;
    margin: 0;

    @media (min-width: 640px) {
      font-size: 1.125rem;
    }
  }

  // Form
  &__form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;

    @media (min-width: 640px) {
      gap: 2rem;
    }
  }

  &__form-item {
    position: relative;
  }

  &__input {
    width: 100%;
    padding: 0.75rem 0;
    background: transparent;
    border: none;
    border-bottom: 1px solid #e5e7eb;
    color: #000000;
    font-size: 1rem;
    outline: none;
    transition: border-color 150ms ease-in-out;

    @media (min-width: 640px) {
      padding: 1rem 0;
      font-size: 1.125rem;
    }

    &::placeholder {
      color: #d1d5db;
    }

    &:focus {
      border-bottom-color: #000000;
    }
  }

  &__password-wrapper {
    position: relative;
    display: flex;
    align-items: center;
  }

  &__password-toggle {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    color: #9ca3af;
    transition: color 150ms ease-in-out;

    &:hover {
      color: #000000;
    }
  }

  &__error {
    color: #ef4444;
    font-size: 0.75rem;
    margin-top: 0.5rem;
  }

  // Actions
  &__actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0.5rem 0 0.5rem;
    color: #94a3b8;
    font-size: 0.875rem;

    @media (min-width: 640px) {
      font-size: 1rem;
    }
  }

  &__remember {
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: color 150ms ease-in-out;

    &:hover {
      color: #374151;
    }
  }

  &__checkbox {
    width: 1rem;
    height: 1rem;
    border-radius: var(--radius-sm);
    border: 1px solid #d1d5db;
    margin-right: 0.5rem;
    cursor: pointer;
    accent-color: #000000;

    @media (min-width: 640px) {
      width: 1.25rem;
      height: 1.25rem;
      margin-right: 0.75rem;
    }
  }

  &__forgot {
    color: #000000;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 150ms ease-in-out;

    &:hover {
      opacity: 0.7;
      text-decoration: underline;
      text-underline-offset: 4px;
    }
  }

  // Submit
  &__submit {
    width: 100%;
    padding: 0.875rem;
    background: #000000;
    color: #ffffff;
    font-weight: 600;
    font-size: 1rem;
    border: none;
    cursor: pointer;
    transition: background-color 150ms ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;

    @media (min-width: 640px) {
      padding: 1rem;
      font-size: 1.125rem;
    }

    &:hover:not(:disabled) {
      background: #1f2937;
    }

    &:active:not(:disabled) {
      background: #374151;
    }

    &:disabled {
      opacity: 0.7;
      cursor: not-allowed;
    }
  }

  &__loading {
    display: flex;
    align-items: center;
  }

  &__spinner {
    width: 1.25rem;
    height: 1.25rem;
    animation: spin 1s linear infinite;
  }

  // Version
  &__version {
    margin-top: 1rem;
    text-align: center;
    font-size: 0.75rem;
    color: #9ca3af;
  }

  // Mobile Footer
  &__mobile-footer {
    text-align: center;
    color: #9ca3af;
    font-size: 0.75rem;
    margin-top: 2rem;

    @media (min-width: 1024px) {
      display: none;
    }
  }

  // Icons
  &__icon {
    width: 1.25rem;
    height: 1.25rem;

    &--white {
      color: #ffffff;
    }

    &--sm {
      width: 1.25rem;
      height: 1.25rem;
    }
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>
