"use client";

import { useState } from "react";
import { Shield, Key, Lock, Bell } from "lucide-react";

/** 投资人设置页 — 修改密码/2FA/API Key 管理。 */
export default function SettingsPage() {
  const [oldPassword, setOldPassword] = useState("");
  const [newPassword, setNewPassword] = useState("");
  const [confirmPassword, setConfirmPassword] = useState("");
  const [twoFactorEnabled, setTwoFactorEnabled] = useState(false);
  const [message, setMessage] = useState("");

  async function handleChangePassword() {
    if (newPassword !== confirmPassword) {
      setMessage("两次输入的新密码不一致");
      return;
    }
    if (newPassword.length < 8) {
      setMessage("新密码至少 8 位");
      return;
    }
    setMessage("密码修改功能待后端接口接入");
  }

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-2xl font-bold">设置</h1>
        <p className="mt-1 text-sm text-muted-foreground">账户安全 · 双因素认证 · API Key 管理</p>
      </div>

      {/* 修改密码 */}
      <div className="rounded-lg border border-[var(--border)] bg-white p-5">
        <div className="flex items-center gap-2">
          <Lock size={18} className="text-[var(--investor-primary)]" />
          <h2 className="text-sm font-medium">修改密码</h2>
        </div>
        <div className="mt-3 space-y-3">
          <div>
            <label className="text-xs text-muted-foreground">当前密码</label>
            <input
              type="password"
              className="mt-1 w-full rounded-md border border-[var(--border)] px-3 py-2 text-sm"
              value={oldPassword}
              onChange={(e) => setOldPassword(e.target.value)}
            />
          </div>
          <div>
            <label className="text-xs text-muted-foreground">新密码</label>
            <input
              type="password"
              className="mt-1 w-full rounded-md border border-[var(--border)] px-3 py-2 text-sm"
              value={newPassword}
              onChange={(e) => setNewPassword(e.target.value)}
            />
          </div>
          <div>
            <label className="text-xs text-muted-foreground">确认新密码</label>
            <input
              type="password"
              className="mt-1 w-full rounded-md border border-[var(--border)] px-3 py-2 text-sm"
              value={confirmPassword}
              onChange={(e) => setConfirmPassword(e.target.value)}
            />
          </div>
          {message && <p className="text-xs text-amber-600">{message}</p>}
          <button
            onClick={handleChangePassword}
            className="rounded-md bg-[var(--investor-primary)] px-4 py-2 text-sm text-white"
          >
            修改密码
          </button>
        </div>
      </div>

      {/* 双因素认证 */}
      <div className="rounded-lg border border-[var(--border)] bg-white p-5">
        <div className="flex items-center gap-2">
          <Shield size={18} className="text-emerald-600" />
          <h2 className="text-sm font-medium">双因素认证 (2FA)</h2>
        </div>
        <div className="mt-3 flex items-center justify-between">
          <p className="text-sm text-muted-foreground">使用 TOTP 应用（如 Google Authenticator）增强账户安全</p>
          <button
            onClick={() => setTwoFactorEnabled(!twoFactorEnabled)}
            className={`relative h-6 w-11 rounded-full transition-colors ${twoFactorEnabled ? "bg-emerald-500" : "bg-muted"}`}
            role="switch"
            aria-checked={twoFactorEnabled}
            aria-label="双因素认证开关"
          >
            <span
              className={`absolute top-0.5 h-5 w-5 rounded-full bg-white transition-transform ${twoFactorEnabled ? "translate-x-5" : "translate-x-0.5"}`}
            />
          </button>
        </div>
        {twoFactorEnabled && (
          <div className="mt-3 rounded-md border border-amber-200 bg-amber-50 p-3 text-xs text-amber-700">
            2FA 功能即将上线，敬请期待
          </div>
        )}
      </div>

      {/* API Key 管理 */}
      <div className="rounded-lg border border-[var(--border)] bg-white p-5">
        <div className="flex items-center gap-2">
          <Key size={18} className="text-amber-600" />
          <h2 className="text-sm font-medium">API Key 管理</h2>
        </div>
        <p className="mt-2 text-sm text-muted-foreground">
          用于外部系统集成的 API Key 管理。所有 Key 加密存储。
        </p>
        <div className="mt-3 rounded-md border border-[var(--border)] p-3">
          <div className="flex items-center justify-between">
            <span className="text-sm font-mono">sk-****...****</span>
            <span className="rounded bg-muted px-2 py-0.5 text-xs">未配置</span>
          </div>
        </div>
        <button className="mt-2 rounded-md border border-[var(--border)] px-4 py-2 text-sm hover:bg-muted">
          生成新 Key
        </button>
      </div>

      {/* 通知设置 */}
      <div className="rounded-lg border border-[var(--border)] bg-white p-5">
        <div className="flex items-center gap-2">
          <Bell size={18} className="text-blue-600" />
          <h2 className="text-sm font-medium">通知设置</h2>
        </div>
        <div className="mt-3 space-y-2 text-sm">
          <label className="flex items-center gap-2">
            <input type="checkbox" defaultChecked className="rounded" />
            <span>月报提交提醒</span>
          </label>
          <label className="flex items-center gap-2">
            <input type="checkbox" defaultChecked className="rounded" />
            <span>风险预警通知</span>
          </label>
          <label className="flex items-center gap-2">
            <input type="checkbox" className="rounded" />
            <span>健康度下降提醒</span>
          </label>
        </div>
      </div>
    </div>
  );
}