"use client";

import { useState, useEffect } from "react";
import { useRouter } from "next/navigation";
import Link from "next/link";
import { apiChangePassword, apiMe, type User } from "@/lib/api";

export default function SettingsPage() {
  const router = useRouter();
  const [user, setUser] = useState<User | null>(null);
  const [oldPassword, setOldPassword] = useState("");
  const [newPassword, setNewPassword] = useState("");
  const [confirmPassword, setConfirmPassword] = useState("");
  const [submitting, setSubmitting] = useState(false);
  const [error, setError] = useState("");
  const [success, setSuccess] = useState(false);

  useEffect(() => {
    apiMe()
      .then((res) => {
        if (!res.user) {
          router.push("/login");
          return;
        }
        setUser(res.user);
      })
      .catch(() => router.push("/login"));
  }, [router]);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setError("");

    if (newPassword.length < 6) {
      setError("新密码至少 6 位");
      return;
    }
    if (newPassword !== confirmPassword) {
      setError("两次输入的新密码不一致");
      return;
    }

    setSubmitting(true);
    try {
      const res = await apiChangePassword(oldPassword, newPassword);
      if (res.message) {
        setSuccess(true);
        setTimeout(() => router.push("/login"), 1500);
      } else {
        setError(res.error || "修改失败");
      }
    } catch (e) {
      setError("网络错误，请重试");
    } finally {
      setSubmitting(false);
    }
  };

  if (!user) {
    return <p style={{ color: "var(--text-secondary)" }}>加载中...</p>;
  }

  return (
    <div className="max-w-md mx-auto">
      <nav className="text-sm mb-4" style={{ color: "var(--text-secondary)" }}>
        <Link href="/" className="hover:underline">首页</Link>
        <span className="mx-2">/</span>
        <span>账号设置</span>
      </nav>

      <h1 className="text-2xl font-bold mb-6">账号设置</h1>

      <div className="p-4 rounded-lg mb-6" style={{ background: "var(--bg-secondary)" }}>
        <div className="text-sm" style={{ color: "var(--text-secondary)" }}>当前账号</div>
        <div className="font-medium mt-1" style={{ color: "var(--text)" }}>{user.nickname}（{user.username}）</div>
      </div>

      <h2 className="text-lg font-semibold mb-4">修改密码</h2>

      {success && (
        <div className="p-3 rounded-lg mb-4 text-sm" style={{ background: "var(--success-bg, #dcfce7)", color: "#166534" }}>
          密码修改成功，正在跳转登录页...
        </div>
      )}

      {error && (
        <div className="p-3 rounded-lg mb-4 text-sm" style={{ background: "var(--error-bg, #fee2e2)", color: "#991b1b" }}>
          {error}
        </div>
      )}

      <form onSubmit={handleSubmit} className="space-y-4">
        <div>
          <label className="block text-sm font-medium mb-1" style={{ color: "var(--text)" }}>当前密码</label>
          <input
            type="password"
            value={oldPassword}
            onChange={(e) => setOldPassword(e.target.value)}
            required
            className="w-full p-3 rounded-lg border"
            style={{ borderColor: "var(--border)", background: "var(--bg)", color: "var(--text)" }}
          />
        </div>
        <div>
          <label className="block text-sm font-medium mb-1" style={{ color: "var(--text)" }}>新密码</label>
          <input
            type="password"
            value={newPassword}
            onChange={(e) => setNewPassword(e.target.value)}
            required
            minLength={6}
            className="w-full p-3 rounded-lg border"
            style={{ borderColor: "var(--border)", background: "var(--bg)", color: "var(--text)" }}
          />
        </div>
        <div>
          <label className="block text-sm font-medium mb-1" style={{ color: "var(--text)" }}>确认新密码</label>
          <input
            type="password"
            value={confirmPassword}
            onChange={(e) => setConfirmPassword(e.target.value)}
            required
            minLength={6}
            className="w-full p-3 rounded-lg border"
            style={{ borderColor: "var(--border)", background: "var(--bg)", color: "var(--text)" }}
          />
        </div>
        <button
          type="submit"
          disabled={submitting || success}
          className="w-full py-3 rounded-lg text-white font-medium disabled:opacity-50"
          style={{ background: "var(--primary)" }}
        >
          {submitting ? "提交中..." : "修改密码"}
        </button>
      </form>
    </div>
  );
}