import { useEffect, useState } from "react";
import { Link, useNavigate } from "react-router-dom";
import { useAuth } from "../App";
import { SideRail } from "../components/SideRail";
import { Button, Field, InlineAlert } from "../components/ui";
import { ApiError, api } from "../lib/client";
import type { User } from "../lib/types";

/**
 * 账号设置：昵称、邮箱、登录密码、退出登录。
 *
 * 邮箱是**账号名**（能拿它 + 密码登录），不是"通知地址"的附属品，
 * 所以放在基本信息里、和手机号并列，而不是藏在通知偏好里。
 */
/** 小节标题：一行标题 + 一句"这是干嘛的"，比光秃秃的 h2 省解释。 */
function SectionLabel({ hint, children }: { hint?: string; children: React.ReactNode }) {
  return (
    <div>
      <h2 className="text-sm font-medium text-ink-800">{children}</h2>
      {hint ? <p className="mt-0.5 text-2xs text-ink-400">{hint}</p> : null}
    </div>
  );
}

export function AccountPage() {
  const { user, loading, reload, signOut } = useAuth();
  const navigate = useNavigate();

  const [nickname, setNickname] = useState("");
  const [email, setEmail] = useState("");
  const [profileBusy, setProfileBusy] = useState(false);
  const [profileMsg, setProfileMsg] = useState<string | null>(null);
  const [profileError, setProfileError] = useState<string | null>(null);

  const [oldPassword, setOldPassword] = useState("");
  const [newPassword, setNewPassword] = useState("");
  const [confirm, setConfirm] = useState("");
  const [pwdBusy, setPwdBusy] = useState(false);
  const [pwdMsg, setPwdMsg] = useState<string | null>(null);
  const [pwdError, setPwdError] = useState<string | null>(null);

  useEffect(() => {
    if (!loading && !user) navigate("/login", { replace: true });
  }, [loading, user, navigate]);

  useEffect(() => {
    if (user?.nickname) setNickname(user.nickname);
    setEmail(user?.email ?? "");
  }, [user?.nickname, user?.email]);

  const hasPassword = Boolean(user?.has_password);
  const nicknameChanged = nickname.trim() !== (user?.nickname ?? "");
  const emailChanged = email.trim() !== (user?.email ?? "");

  async function saveProfile(event: React.FormEvent) {
    event.preventDefault();
    setProfileBusy(true);
    setProfileMsg(null);
    setProfileError(null);
    try {
      // 只发改过的字段：邮箱留空表示"解绑"，不能因为没动它就被清掉
      const patch: { nickname?: string; email?: string } = {};
      if (nicknameChanged) patch.nickname = nickname.trim();
      if (emailChanged) patch.email = email.trim();

      await api.patch<User>("/auth/me", patch);
      await reload();
      setProfileMsg(
        emailChanged && !email.trim()
          ? "邮箱已解绑，之后不能用邮箱登录"
          : "资料已更新",
      );
    } catch (err) {
      setProfileError(err instanceof ApiError ? err.message : "保存失败");
    } finally {
      setProfileBusy(false);
    }
  }

  async function savePassword(event: React.FormEvent) {
    event.preventDefault();
    setPwdMsg(null);
    setPwdError(null);
    if (newPassword !== confirm) {
      setPwdError("两次输入的新密码不一样");
      return;
    }
    setPwdBusy(true);
    try {
      await api.post("/auth/password", {
        password: newPassword,
        ...(hasPassword ? { old_password: oldPassword } : {}),
      });
      await reload();
      setOldPassword("");
      setNewPassword("");
      setConfirm("");
      setPwdMsg(hasPassword ? "密码已修改，下次可用新密码登录" : "密码已设置，之后可以用密码登录");
    } catch (err) {
      setPwdError(err instanceof ApiError ? err.message : "保存失败");
    } finally {
      setPwdBusy(false);
    }
  }

  return (
    <div className="flex min-h-full flex-col bg-paper-100 lg:flex-row">
      <SideRail />

      <main className="min-w-0 flex-1">
        <div className="w-full px-5 py-6 lg:px-8 lg:py-8 xl:px-12 2xl:px-16">
          <div className="mb-7">
            <h1 className="font-display text-2xl font-semibold">账号设置</h1>
            <p className="mt-2 text-sm text-ink-500">
              这里改的是你自己：昵称、登录密码、退出登录。工作区里的成员与权限在各自的工作区里管。
            </p>
          </div>

          <div className="grid items-start gap-4 lg:grid-cols-[minmax(0,1.15fr)_minmax(0,1fr)]">
            <section className="card p-5">
              <SectionLabel hint="别人在成员列表里看到的名字">基本信息</SectionLabel>

              <form className="mt-4 space-y-4" onSubmit={saveProfile}>
                <div className="flex items-center gap-3">
                  <span className="grid h-12 w-12 place-items-center rounded-full bg-primary-900 text-base font-semibold text-paper-50">
                    {(user?.nickname ?? "我").trim().slice(0, 1).toUpperCase()}
                  </span>
                  <div className="min-w-0">
                    <div className="truncate text-sm font-medium text-ink-800">
                      {user?.nickname ?? "—"}
                    </div>
                    <div className="text-2xs text-ink-400">
                      {user?.created_at
                        ? `加入于 ${new Date(user.created_at).toLocaleDateString("zh-CN")}`
                        : "—"}
                    </div>
                  </div>
                </div>

                <Field label="昵称">
                  <input
                    className="input"
                    value={nickname}
                    maxLength={32}
                    aria-label="昵称"
                    onChange={(e) => setNickname(e.target.value)}
                  />
                </Field>

                <Field label="手机号">
                  <input
                    className="input bg-paper-100 text-ink-500"
                    value={user?.phone ?? ""}
                    readOnly
                    aria-label="手机号"
                  />
                </Field>
                <p className="-mt-2 text-2xs leading-relaxed text-ink-400">
                  手机号就是登录账号，暂不支持自助换号；换号等于换账号，需要单独处理。
                </p>

                <Field label="邮箱">
                  <input
                    className="input"
                    type="email"
                    placeholder="绑定后可以用邮箱 + 密码登录"
                    value={email}
                    maxLength={255}
                    aria-label="邮箱"
                    onChange={(e) => setEmail(e.target.value.trim())}
                  />
                </Field>
                <p className="-mt-2 text-2xs leading-relaxed text-ink-400">
                  邮箱是第二个账号名：绑上之后，登录页可以用「邮箱 + 密码」进入。留空保存就是解绑。
                </p>

                {profileMsg && <InlineAlert tone="success">{profileMsg}</InlineAlert>}
                {profileError && <InlineAlert>{profileError}</InlineAlert>}

                <Button
                  type="submit"
                  variant="primary"
                  size="sm"
                  disabled={profileBusy || !nickname.trim() || (!nicknameChanged && !emailChanged)}
                >
                  {profileBusy ? "保存中…" : "保存资料"}
                </Button>
              </form>
            </section>

            <div className="space-y-4">
              <section className="card p-5">
                <SectionLabel hint="验证码始终可用，密码是可选的第二条路">登录密码</SectionLabel>

                <p className="mt-3 text-xs leading-relaxed text-ink-500">
                  {hasPassword
                    ? "已设置密码。登录页可以选「密码」进入；改密码要先输当前密码。"
                    : "还没有设置密码。现在只能用手机号 + 验证码登录；设一个密码，换手机或短信不通时也能进。"}
                </p>

                <form className="mt-4 space-y-3" onSubmit={savePassword}>
                  {hasPassword ? (
                    <Field label="当前密码">
                      <input
                        type="password"
                        className="input"
                        autoComplete="current-password"
                        value={oldPassword}
                        aria-label="当前密码"
                        onChange={(e) => setOldPassword(e.target.value)}
                      />
                    </Field>
                  ) : null}

                  <Field label={hasPassword ? "新密码" : "密码"}>
                    <input
                      type="password"
                      className="input"
                      autoComplete="new-password"
                      placeholder="至少 8 位，字母和数字都要有"
                      value={newPassword}
                      aria-label={hasPassword ? "新密码" : "密码"}
                      onChange={(e) => setNewPassword(e.target.value)}
                    />
                  </Field>

                  <Field label="再输一次">
                    <input
                      type="password"
                      className="input"
                      autoComplete="new-password"
                      value={confirm}
                      aria-label="确认密码"
                      onChange={(e) => setConfirm(e.target.value)}
                    />
                  </Field>

                  {pwdMsg && <InlineAlert tone="success">{pwdMsg}</InlineAlert>}
                  {pwdError && <InlineAlert>{pwdError}</InlineAlert>}

                  <Button
                    type="submit"
                    variant="primary"
                    size="sm"
                    disabled={
                      pwdBusy ||
                      newPassword.length < 8 ||
                      !confirm ||
                      (hasPassword && !oldPassword)
                    }
                  >
                    {pwdBusy ? "保存中…" : hasPassword ? "修改密码" : "设置密码"}
                  </Button>
                </form>
              </section>

              <section className="card p-5">
                <SectionLabel hint="在这台设备上清掉登录状态">退出</SectionLabel>
                <p className="mt-3 text-xs leading-relaxed text-ink-500">
                  退出只会清掉这台浏览器里的令牌；工作区里的数据不受影响。
                </p>
                <Button variant="ghost" size="sm" className="mt-3" onClick={signOut}>
                  退出登录
                </Button>
              </section>

              {user?.platform_admin ? (
                <section className="card p-5">
                  <SectionLabel hint="平台级配置，只有平台管理员看得到">系统设置</SectionLabel>
                  <p className="mt-3 text-xs leading-relaxed text-ink-500">
                    发信邮箱（SMTP）在那儿改：填完可以当场发一封测试邮件，确认通道通不通。
                    改完即时生效，不用登服务器改配置、也不用重启。
                  </p>
                  <Link
                    to="/settings"
                    className="mt-3 inline-flex items-center gap-1 text-xs font-medium text-primary-700 hover:underline"
                  >
                    打开系统设置 →
                  </Link>
                </section>
              ) : null}
            </div>
          </div>
        </div>
      </main>
    </div>
  );
}