<script setup lang="ts">
import { Calendar, Check, Clock, User } from '@element-plus/icons-vue'

interface LoginInfo {
  ip: string
  time?: string
}

withDefaults(
  defineProps<{
    current: LoginInfo
    previous: LoginInfo
  }>(),
  {
    current: () => ({
      ip: '188.253.12.45',
    }),
    previous: () => ({
      ip: '188.253.12.42',
      time: '2026-05-22 14:52:58',
    }),
  },
)
</script>

<template>
  <section class="login-success-notice">
    <header class="notice-header">
      <div class="notice-mark" aria-hidden="true">
        <el-icon><Check /></el-icon>
      </div>

      <div>
        <h2 class="notice-title">登录成功</h2>
        <p class="notice-subtitle">您的账号已安全登录</p>
      </div>
    </header>

    <div class="notice-body">
      <section class="login-section login-section--current" aria-labelledby="current-login-title">
        <div class="section-heading">
          <span class="section-icon section-icon--current" aria-hidden="true">
            <el-icon><User /></el-icon>
          </span>
          <h3 id="current-login-title" class="section-title">当前登录信息</h3>
        </div>

        <div class="info-card info-card--single">
          <div class="info-row">
            <span class="row-icon row-icon--current">IP</span>
            <span class="row-label">IP 地址</span>
            <span class="row-divider" aria-hidden="true"></span>
            <strong class="row-value">{{ current.ip }}</strong>
          </div>
        </div>
      </section>

      <div class="section-divider" aria-hidden="true"></div>

      <section class="login-section login-section--previous" aria-labelledby="previous-login-title">
        <div class="section-heading">
          <span class="section-icon section-icon--previous" aria-hidden="true">
            <el-icon><Clock /></el-icon>
          </span>
          <h3 id="previous-login-title" class="section-title">上次登录信息</h3>
        </div>

        <div class="info-card">
          <div class="info-row">
            <span class="row-icon row-icon--previous">IP</span>
            <span class="row-label">IP 地址</span>
            <span class="row-divider" aria-hidden="true"></span>
            <strong class="row-value">{{ previous.ip }}</strong>
          </div>

          <div v-if="previous.time" class="card-divider" aria-hidden="true"></div>

          <div v-if="previous.time" class="info-row">
            <span class="row-icon row-icon--previous">
              <el-icon><Calendar /></el-icon>
            </span>
            <span class="row-label">时间</span>
            <span class="row-divider" aria-hidden="true"></span>
            <strong class="row-value">{{ previous.time }}</strong>
          </div>
        </div>
      </section>

    </div>
  </section>
</template>

<style scoped>
:global(.el-notification.login-success-notification) {
  right: 12px;
  left: auto;
  width: min(380px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  padding: 18px 18px 16px;
  overflow-y: auto;
  transform: none;
  border: 1px solid rgba(225, 230, 238, 0.92);
  border-radius: 16px;
  background:
    radial-gradient(circle at 18% 8%, rgba(123, 195, 80, 0.12), transparent 28%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(252, 254, 255, 0.94));
  box-shadow:
    0 18px 42px rgba(38, 50, 70, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(14px);
  scrollbar-width: thin;
  scrollbar-color: #c8d2df transparent;
}

:global(.el-notification.login-success-notification::-webkit-scrollbar) {
  width: 8px;
}

:global(.el-notification.login-success-notification::-webkit-scrollbar-thumb) {
  border-radius: 999px;
  background: #c8d2df;
}

:global(.el-notification.login-success-notification .el-notification__group) {
  width: 100%;
  margin: 0;
}

:global(.el-notification.login-success-notification .el-notification__content) {
  margin: 0;
  text-align: left;
}

:global(.el-notification.login-success-notification .el-notification__title) {
  display: none;
}

:global(.el-notification.login-success-notification .el-notification__closeBtn) {
  top: 20px;
  right: 18px;
  color: #5f6675;
  font-size: 22px;
  transition:
    color 0.2s ease,
    transform 0.2s ease;
}

:global(.el-notification.login-success-notification .el-notification__closeBtn:hover) {
  color: #22262f;
  transform: scale(1.04);
}

.login-success-notice {
  color: #20232a;
  font-family:
    'PingFang SC',
    'Microsoft YaHei',
    'Helvetica Neue',
    sans-serif;
}

.notice-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.notice-mark {
  display: flex;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, #a5e56d, transparent 31%),
    linear-gradient(145deg, #74d54f 0%, #35a923 100%);
  box-shadow:
    0 9px 18px rgba(64, 174, 39, 0.24),
    inset 0 2px 2px rgba(255, 255, 255, 0.42);
  color: #fff;
  font-size: 29px;
}

.notice-title {
  margin: 0 34px 4px 0;
  color: #20232a;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: 0;
}

.notice-subtitle {
  margin: 0;
  color: #6f7582;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.25;
}

.notice-body {
  padding: 20px 0 0;
}

.login-section {
  position: relative;
}

.section-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 11px;
}

.section-icon {
  display: flex;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 17px;
}

.section-icon--current {
  background: #eef9ed;
  color: #49aa32;
}

.section-icon--previous {
  background: #edf4ff;
  color: #397ee2;
}

.section-title {
  position: relative;
  margin: 0;
  color: #20232a;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0;
}

.info-card {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #e2e7ef;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow:
    0 8px 18px rgba(38, 50, 70, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.info-row {
  display: grid;
  min-height: 34px;
  grid-template-columns: 36px 66px 1px minmax(0, 1fr);
  align-items: center;
  column-gap: 10px;
}

.row-icon {
  display: flex;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
}

.row-icon--current {
  background: #eef9ed;
  color: #49aa32;
}

.row-icon--previous {
  background: #edf4ff;
  color: #397ee2;
}

.row-label {
  color: #6f7582;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
}

.row-divider {
  display: block;
  width: 1px;
  height: 22px;
  background: #e0e5ed;
}

.row-value {
  min-width: 0;
  color: #20232a;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  word-break: break-word;
}

.card-divider {
  height: 1px;
  margin: 10px 0 8px;
  background: #e5e9f0;
}

.section-divider {
  height: 1px;
  margin: 18px 0 15px;
  background-image: linear-gradient(to right, #dce3ed 50%, transparent 0);
  background-position: top;
  background-size: 12px 1px;
  background-repeat: repeat-x;
}

@media (max-width: 900px) {
  :global(.el-notification.login-success-notification) {
    right: 10px;
    width: min(380px, calc(100vw - 32px));
    padding: 18px 16px 16px;
    border-radius: 16px;
  }

  :global(.el-notification.login-success-notification .el-notification__closeBtn) {
    top: 20px;
    right: 16px;
    font-size: 22px;
  }

  .notice-header {
    gap: 12px;
  }

  .notice-mark {
    width: 40px;
    height: 40px;
    font-size: 28px;
  }

  .notice-title {
    margin-right: 36px;
    font-size: 19px;
  }

  .notice-subtitle {
    font-size: 13px;
  }

  .notice-body {
    padding: 20px 0 0;
  }

  .section-heading {
    gap: 10px;
  }

  .section-icon {
    width: 30px;
    height: 30px;
    font-size: 17px;
  }

  .section-title {
    font-size: 15px;
  }

  .info-card {
    padding: 12px 13px;
  }

  .info-row {
    min-height: 34px;
    grid-template-columns: 36px 66px 1px minmax(0, 1fr);
    column-gap: 10px;
  }

  .row-icon {
    width: 36px;
    height: 36px;
    font-size: 14px;
  }

  .row-label {
    font-size: 13px;
  }

  .row-value {
    font-size: 14px;
  }

  .section-divider {
    margin: 18px 0 15px;
  }

}
</style>
