<template>
  <div class="password-protect-container">
    <div class="password-card" :class="{ 'shake-animation': error }">
      <div class="card-navigation">
        <button class="nav-btn" @click="handleBack" title="返回目录" aria-label="返回">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M19 12H5M12 19l-7-7 7-7" />
          </svg>
        </button>

        <button class="nav-btn" @click="goHome" title="回到首页" aria-label="首页">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
            <polyline points="9 22 9 12 15 12 15 22" />
          </svg>
        </button>
      </div>

      <div class="card-header">
        <div class="icon-wrapper">
          <img src="/favicon.png" alt="Logo" class="qr-image" />
        </div>
        <h2>请输入密码</h2>
        <p class="subtitle">密码提示：博主名字（英文）</p>
      </div>

      <div class="input-group">
        <input
            v-model="input"
            type="password"
            @keyup.enter="submit"
            @input="handleInput"
            placeholder="请输入密码"
            :class="{ invalid: error }"
            aria-label="密码输入框"
            ref="passwordInput"
        />
        <p v-if="error" class="error-message">{{ error }}</p>
      </div>

      <div class="button-group">
        <button class="submit-btn" @click="submit" :disabled="!input.trim()">
          确认访问
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useRouter } from "vitepress";

const router = useRouter();
const passwordInput = ref<HTMLInputElement | null>(null);

const props = defineProps<{
  correctPassword: string;
  pageId: string;
}>();

const emit = defineEmits<{
  (e: "verified", success: boolean): void;
}>();

const input = ref("");
const error = ref("");

onMounted(() => {
  passwordInput.value?.focus();
});

const handleInput = () => {
  // 实时过滤空格，但不建议在中文输入法活跃时操作，
  // 如果需要完美支持中文输入，建议将逻辑移至 submit
  input.value = input.value.replace(/\s+/g, "");
  if (error.value) {
    error.value = "";
  }
};

const submit = () => {
  if (!input.value.trim()) {
    error.value = "请输入密码";
    return;
  }
  if (input.value === props.correctPassword) {
    emit("verified", true);
  } else {
    error.value = "密码错误，请重新输入";
    input.value = "";
  }
};

const goHome = () => router.go("/");
const handleBack = () => router.go("/Encrypt");
</script>

<style scoped>
.password-protect-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 1rem;
  background-color: var(--vp-c-bg);
  --error-color: #f44336;
}

.password-card {
  position: relative;
  width: 100%;
  max-width: 400px;
  background: var(--vp-c-bg-soft);
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  padding: 3.5rem 2rem 2.5rem;
  border: 1px solid var(--vp-c-divider);
}

.card-navigation {
  position: absolute;
  top: 1rem;
  left: 0;
  right: 0;
  padding: 0 1rem;
  display: flex;
  justify-content: space-between;
}

.nav-btn {
  background: transparent;
  border: none;
  color: var(--vp-c-text-2);
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.nav-btn:hover {
  color: var(--vp-c-brand);
  background: var(--vp-c-default-soft);
}

.card-header {
  text-align: center;
  margin-bottom: 2rem;
}

.icon-wrapper {
  display: flex;
  justify-content: center;
  margin-bottom: 1rem;
}

.qr-image {
  width: 120px;
  height: 120px;
  object-fit: contain;
  border-radius: 12px;
}

.card-header h2 {
  margin: 0.5rem 0;
  color: var(--vp-c-text-1);
  font-size: 1.5rem;
  font-weight: 600;
  border: none;
}

.subtitle {
  color: var(--vp-c-text-2);
  font-size: 0.9rem;
}

.input-group {
  margin-bottom: 1.5rem;
}

.input-group input {
  width: 100%;
  padding: 0.9rem 1rem;
  border: 1px solid var(--vp-c-divider);
  border-radius: 10px;
  background: var(--vp-c-bg);
  color: var(--vp-c-text-1);
  font-size: 1rem;
  box-sizing: border-box;
  transition: border-color 0.2s;
}

.input-group input:focus {
  outline: none;
  border-color: var(--vp-c-brand);
}

.input-group input.invalid {
  border-color: var(--error-color);
}

.error-message {
  color: var(--error-color);
  font-size: 0.85rem;
  margin-top: 0.6rem;
}

.submit-btn {
  width: 100%;
  padding: 0.9rem;
  background: var(--vp-c-brand);
  color: white;
  border: none;
  border-radius: 10px;
  font-weight: 600;
  cursor: pointer;
}

.submit-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

@keyframes shake {
  10%, 90% { transform: translate3d(-1px, 0, 0); }
  20%, 80% { transform: translate3d(2px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
  40%, 60% { transform: translate3d(4px, 0, 0); }
}
</style>