<template>
  <form @submit.prevent="handleSubmit" class="cap-form">
    <div class="form-group">
      <label>用户名</label>
      <input v-model="username" type="text" required />
    </div>

    <div class="form-group">
      <label>密码</label>
      <input v-model="password" type="password" required />
    </div>

    <!-- Cap 验证码 Widget -->
    <cap-widget
      ref="widgetRef"
      :data-cap-api-endpoint="`https://cap.tokengx.cn/${siteKey}/`"
    />

    <p v-if="error" class="error">{{ error }}</p>

    <button type="submit">登录</button>
  </form>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import 'cap-widget';

// 使用前确保已安装: npm install cap-widget
// 环境变量: VITE_CAP_SITE_KEY=your-site-key

const siteKey = import.meta.env.VITE_CAP_SITE_KEY;

const widgetRef = ref(null);
const captchaToken = ref(null);
const username = ref('');
const password = ref('');
const error = ref('');

// ── 品牌链接重定向 ──────────────────────────────────
// cap-widget 的 "Cap" 链接默认指向 trycap.dev，且 enforceCredits() 会把 href 锁回
// trycap.dev（鼠标悬停状态栏仍显示 trycap.dev）。两处都要改：
//   1. MutationObserver 持续把 credits 的 href 修正为 cap.tokengx.cn（修悬停提示）
//   2. 拦截 window.open 改写点击跳转目标（修点击跳转）
let _originalOpen = null;
let _hrefObserver = null;
let _rootObserver = null;
function installBrandRedirect(widget) {
  const shadow = widget?.shadowRoot;
  if (!shadow) return;
  const TARGET = 'https://cap.tokengx.cn';

  const patchCredits = (credits) => {
    if (credits.getAttribute('href') !== TARGET) {
      credits.setAttribute('href', TARGET);
    }
    if (credits._capPatched) return;
    credits._capPatched = true;
    _hrefObserver = new MutationObserver(() => {
      if (credits.getAttribute('href') !== TARGET) {
        credits.setAttribute('href', TARGET);
      }
    });
    _hrefObserver.observe(credits, { attributes: true, attributeFilter: ['href'] });
  };

  const existing = shadow.querySelector('a.credits');
  if (existing) {
    patchCredits(existing);
  } else {
    _rootObserver = new MutationObserver(() => {
      const credits = shadow.querySelector('a.credits');
      if (credits) {
        patchCredits(credits);
        _rootObserver.disconnect();
        _rootObserver = null;
      }
    });
    _rootObserver.observe(shadow, { childList: true, subtree: true });
  }

  if (!_originalOpen) {
    _originalOpen = window.open.bind(window);
    window.open = function (url, target, features) {
      if (typeof url === 'string' && url.includes('trycap.dev')) {
        url = url.replace('trycap.dev', 'cap.tokengx.cn');
      }
      return _originalOpen.call(window, url, target, features);
    };
  }
}
function uninstallBrandRedirect() {
  if (_hrefObserver) { _hrefObserver.disconnect(); _hrefObserver = null; }
  if (_rootObserver) { _rootObserver.disconnect(); _rootObserver = null; }
  if (_originalOpen) { window.open = _originalOpen; _originalOpen = null; }
}

onMounted(() => {
  const widget = widgetRef.value;
  if (!widget) return;

  widget.addEventListener('solve', (e) => {
    captchaToken.value = e.detail.token;
    error.value = '';
  });

  widget.addEventListener('error', () => {
    captchaToken.value = null;
  });

  installBrandRedirect(widget);
});

onBeforeUnmount(() => {
  uninstallBrandRedirect();
});

const handleSubmit = async () => {
  if (!captchaToken.value) {
    error.value = '请先完成人机验证';
    return;
  }

  try {
    const res = await fetch('/api/login', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        username: username.value,
        password: password.value,
        captchaToken: captchaToken.value,
      }),
    });

    const data = await res.json();

    if (data.success) {
      window.location.href = '/dashboard';
    } else {
      error.value = data.error || '登录失败';
    }
  } catch (err) {
    error.value = '网络错误，请重试';
  }
};
</script>

<style scoped>
.cap-form {
  max-width: 400px;
  margin: 40px auto;
  padding: 20px;
}
.form-group {
  margin-bottom: 16px;
}
label {
  display: block;
  margin-bottom: 4px;
  font-weight: 500;
}
input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
  box-sizing: border-box;
}
cap-widget {
  display: block;
  margin: 16px 0;
}
button {
  width: 100%;
  padding: 12px;
  background: #0070f3;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
}
.error {
  color: #dc3545;
  font-size: 14px;
}
</style>
