<!-- 登录、注册、忘记密码左侧背景（深色安全 HUD） -->
<template>
  <div class="login-left-view">
    <!-- HUD 背景层：深藏青渐变 + 网格 + 辉光 -->
    <div class="hud-bg"></div>
    <div class="hud-grid"></div>
    <div class="hud-glow glow-a"></div>
    <div class="hud-glow glow-b"></div>
    <div class="hud-scan"></div>

    <!-- HUD 四角括线 -->
    <span class="hud-corner corner-tl"></span>
    <span class="hud-corner corner-tr"></span>
    <span class="hud-corner corner-bl"></span>
    <span class="hud-corner corner-br"></span>

    <!-- 顶栏：Logo + 主题切换 -->
    <div class="top-row">
      <div class="logo">
        <ArtLogo class="icon" size="46" />
        <h1 class="title">{{ AppConfig.systemInfo.shortName }}</h1>
      </div>
      <button type="button" class="theme-toggle" :title="$t('login.toggleTheme')" @click="themeAnimation">
        <span class="tt-orb"></span>
      </button>
    </div>

    <!-- 中央雷达插画 -->
    <div class="radar-wrap">
      <span class="radar-ring ring-1"></span>
      <span class="radar-ring ring-2"></span>
      <span class="radar-sweep"></span>
      <div class="radar-core">
        <ThemeSvg :src="loginIcon" size="100%" />
      </div>
    </div>

    <!-- 文案 -->
    <div class="text-wrap">
      <h1>{{ $t('login.leftView.title') }}</h1>
      <p>{{ $t('login.leftView.subTitle') }}</p>
    </div>

    <!-- 底部 HUD tagline -->
    <div class="hud-tagline">
      <span class="tag-dot"></span>
      <span class="tag-text">SECURE LLM GATEWAY</span>
      <i class="tag-sep">//</i>
      <span class="tag-text">{{ $t('login.tagline') }}</span>
    </div>

    <!-- 数据粒子 -->
    <span v-for="n in 10" :key="n" class="particle" :style="{ '--i': n }"></span>
  </div>
</template>

<script setup lang="ts">
  import AppConfig from '@/config'
  import loginIcon from '@imgs/svg/login_icon.svg'
  import { themeAnimation } from '@/utils/ui/animation'

  // 定义 props
  defineProps<{
    hideContent?: boolean // 是否隐藏内容，只显示 logo
  }>()
</script>

<style lang="scss" scoped>
  // 语枢网关 HUD 色板（登录页恒定深色，不随系统主题变化）
  $cyber-bg: #050b18;
  $cyber-accent: #00e5ff;
  $cyber-blue: #2f80ff;
  $cyber-green: #00ff9c;
  $cyber-text: #eaf6ff;

  .login-left-view {
    position: relative;
    box-sizing: border-box;
    width: 65vw;
    height: 100%;
    padding: 15px;
    overflow: hidden;
    color: $cyber-text;
    background-color: $cyber-bg;

    // 深藏青渐变底
    .hud-bg {
      position: absolute;
      inset: 0;
      background:
        radial-gradient(1100px 640px at 78% -10%, rgb(0 229 255 / 14%), transparent 60%),
        radial-gradient(900px 560px at -8% 108%, rgb(47 128 255 / 16%), transparent 55%),
        radial-gradient(560px 380px at 86% 96%, rgb(0 255 156 / 6%), transparent 60%),
        linear-gradient(160deg, #071226 0%, #050b18 55%, #040810 100%);
    }

    // 极细暗网格
    .hud-grid {
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgb(0 229 255 / 5%) 1px, transparent 1px),
        linear-gradient(90deg, rgb(0 229 255 / 5%) 1px, transparent 1px);
      background-size: 44px 44px;
      mask-image: radial-gradient(ellipse at center, rgb(0 0 0 / 85%), transparent 78%);
    }

    // 青色辉光光斑
    .hud-glow {
      position: absolute;
      border-radius: 50%;
      filter: blur(70px);
      pointer-events: none;

      &.glow-a {
        top: 6%;
        right: -80px;
        width: 360px;
        height: 360px;
        background: rgb(0 229 255 / 16%);
      }

      &.glow-b {
        bottom: -140px;
        left: 12%;
        width: 420px;
        height: 420px;
        background: rgb(47 128 255 / 18%);
      }
    }

    // 垂直扫描线
    .hud-scan {
      position: absolute;
      inset: -40% 0;
      background: linear-gradient(180deg, transparent 0%, rgb(0 229 255 / 6%) 50%, transparent 100%);
      pointer-events: none;
      animation: scanMove 7s linear infinite;
    }

    // HUD 四角括线
    .hud-corner {
      position: absolute;
      z-index: 4;
      width: 22px;
      height: 22px;
      border: 0 solid rgb(0 229 255 / 70%);
      pointer-events: none;

      &.corner-tl {
        top: 16px;
        left: 16px;
        border-top-width: 2px;
        border-left-width: 2px;
      }

      &.corner-tr {
        top: 16px;
        right: 16px;
        border-top-width: 2px;
        border-right-width: 2px;
      }

      &.corner-bl {
        bottom: 16px;
        left: 16px;
        border-bottom-width: 2px;
        border-left-width: 2px;
      }

      &.corner-br {
        right: 16px;
        bottom: 16px;
        border-right-width: 2px;
        border-bottom-width: 2px;
      }
    }

    // 顶栏
    .top-row {
      position: relative;
      z-index: 100;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .logo {
        display: flex;
        align-items: center;

        .title {
          margin-left: 10px;
          font-size: 20px;
          font-weight: 400;
          letter-spacing: 1px;
          color: $cyber-text;
          text-shadow: 0 0 16px rgb(0 229 255 / 30%);
        }
      }

      // HUD 主题切换按钮（圆形仪表风格）
      .theme-toggle {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        cursor: pointer;
        background: rgb(10 25 48 / 60%);
        border: 1px solid rgb(0 229 255 / 35%);
        border-radius: 50%;
        transition: all 0.25s;

        .tt-orb {
          width: 10px;
          height: 10px;
          background: $cyber-accent;
          border-radius: 50%;
          box-shadow: 0 0 12px $cyber-accent;
        }

        &:hover {
          border-color: $cyber-accent;
          box-shadow: 0 0 16px rgb(0 229 255 / 40%);
        }
      }
    }

    // 中央雷达插画
    .radar-wrap {
      position: absolute;
      inset: 0 0 12%;
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 320px;
      height: 320px;
      margin: auto;
      animation: slideInLeft 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;

      .radar-core {
        position: relative;
        z-index: 2;
        width: 74%;
        height: 74%;
        filter: drop-shadow(0 0 24px rgb(0 229 255 / 35%));
        animation: floaty 6s ease-in-out infinite;
      }

      .radar-ring {
        position: absolute;
        border-radius: 50%;
        border: 1px solid rgb(0 229 255 / 22%);

        &.ring-1 {
          inset: 6%;
        }

        &.ring-2 {
          inset: 16%;
          border-style: dashed;
          animation: spin 26s linear infinite;
        }
      }

      .radar-sweep {
        position: absolute;
        inset: 0;
        border-radius: 50%;
        background: conic-gradient(from 0deg, rgb(0 229 255 / 22%), transparent 22%);
        mask-image: radial-gradient(circle, rgb(0 0 0 / 85%), transparent 72%);
        animation: spin 5s linear infinite;
      }
    }

    // 文案
    .text-wrap {
      position: absolute;
      bottom: 92px;
      z-index: 3;
      width: 100%;
      text-align: center;
      animation: slideInLeft 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;

      h1 {
        font-size: 24px;
        font-weight: 600;
        letter-spacing: 2px;
        color: $cyber-text;
        text-shadow: 0 0 18px rgb(0 229 255 / 40%);
      }

      p {
        margin-top: 12px;
        font-size: 14px;
        letter-spacing: 1px;
        color: rgb(0 229 255 / 78%);
        font-family: ui-monospace, 'JetBrains Mono', Consolas, monospace;
      }
    }

    // 底部 HUD tagline
    .hud-tagline {
      position: absolute;
      bottom: 26px;
      left: 50%;
      z-index: 3;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 6px 14px;
      font-family: ui-monospace, 'JetBrains Mono', Consolas, monospace;
      font-size: 12px;
      letter-spacing: 1px;
      color: rgb(0 229 255 / 85%);
      background: rgb(0 229 255 / 4%);
      border: 1px solid rgb(0 229 255 / 20%);
      border-radius: 4px;
      box-shadow: 0 0 12px rgb(0 229 255 / 10%);
      transform: translateX(-50%);

      .tag-dot {
        width: 6px;
        height: 6px;
        background: $cyber-green;
        border-radius: 50%;
        box-shadow: 0 0 8px $cyber-green;
        animation: blink 2s ease-in-out infinite;
      }

      .tag-sep {
        font-style: normal;
        color: rgb(0 229 255 / 45%);
      }
    }

    // 数据粒子
    .particle {
      position: absolute;
      bottom: -10px;
      left: calc(var(--i) * 9.1% + 2%);
      z-index: 2;
      width: 3px;
      height: 3px;
      background: rgb(0 229 255 / 80%);
      border-radius: 50%;
      box-shadow: 0 0 6px $cyber-accent;
      opacity: 0;
      animation: floatUp 8s ease-in-out infinite;
      animation-delay: calc(var(--i) * -0.8s);
    }

    @media only screen and (width <= 1600px) {
      width: 60vw;

      .text-wrap {
        bottom: 64px;
      }

      .radar-wrap {
        inset: 0 0 10%;
      }
    }

    @media only screen and (width <= 1180px) {
      width: auto;
      height: auto;
      padding: 0;
      background: transparent;

      .top-row,
      .radar-wrap,
      .text-wrap,
      .hud-tagline,
      .particle,
      .hud-bg,
      .hud-grid,
      .hud-glow,
      .hud-scan,
      .hud-corner {
        display: none;
      }
    }
  }

  @keyframes spin {
    to {
      transform: rotate(360deg);
    }
  }

  @keyframes scanMove {
    0% {
      transform: translateY(-50%);
    }

    100% {
      transform: translateY(50%);
    }
  }

  @keyframes blink {
    0%,
    100% {
      opacity: 1;
    }

    50% {
      opacity: 0.25;
    }
  }

  @keyframes floaty {
    0%,
    100% {
      transform: translateY(0);
    }

    50% {
      transform: translateY(-8px);
    }
  }

  @keyframes floatUp {
    0% {
      opacity: 0;
      transform: translateY(0) scale(1);
    }

    12% {
      opacity: 0.9;
    }

    100% {
      opacity: 0;
      transform: translateY(-46vh) scale(0.4);
    }
  }

  @keyframes slideInLeft {
    from {
      opacity: 0;
      transform: translateX(-30px);
    }

    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
</style>
