import { useState, useMemo } from "react";
import { Button, Input, Text, View } from "@tarojs/components";
import Taro from "@tarojs/taro";
import AdminGuard from "../../components/AdminGuard";
import { adminChangePassword } from "../../api/admin";
import { clearAdminTokens } from "../../utils/adminAuth";
import { useActionDrawer } from "../../components/action-drawer";
import "./index.scss";

export default function AdminChangePasswordPage() {
  const [oldPassword, setOldPassword] = useState("");
  const [newPassword, setNewPassword] = useState("");
  const [confirmPassword, setConfirmPassword] = useState("");
  const [submitting, setSubmitting] = useState(false);
  const { showActionDrawer, actionDrawer } = useActionDrawer();

  const canSubmit = useMemo(() => {
    return oldPassword.length >= 6 && newPassword.length >= 8 && confirmPassword.length >= 8 && !submitting;
  }, [oldPassword, newPassword, confirmPassword, submitting]);

  const onSubmit = async () => {
    if (!canSubmit) return;
    if (!/[a-zA-Z]/.test(newPassword) || !/\d/.test(newPassword)) {
      Taro.showToast({ title: "新密码需包含字母和数字", icon: "none" });
      return;
    }
    if (newPassword !== confirmPassword) {
      Taro.showToast({ title: "两次输入的新密码不一致", icon: "none" });
      return;
    }
    setSubmitting(true);
    try {
      await adminChangePassword(oldPassword, newPassword);
      await showActionDrawer({
        type: "success",
        title: "成功",
        content: "密码已修改，请重新登录",
        confirmText: "重新登录",
        showCancel: false
      });
      clearAdminTokens();
      Taro.redirectTo({ url: "/pages/admin-login/index" });
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <AdminGuard>
      <View className="page-shell admin-change-pwd">
        <View className="page-body admin-change-pwd__body">
          <Text className="admin-change-pwd__title">修改密码</Text>

          <View className="admin-change-pwd__form">
            <View className="admin-change-pwd__field">
              <Text className="admin-change-pwd__label">旧密码</Text>
              <Input
                className="admin-change-pwd__input"
                value={oldPassword}
                password
                placeholder="请输入当前密码"
                onInput={(e) => setOldPassword(e.detail.value)}
              />
            </View>

            <View className="admin-change-pwd__field">
              <Text className="admin-change-pwd__label">新密码</Text>
              <Input
                className="admin-change-pwd__input"
                value={newPassword}
                password
                maxlength={32}
                placeholder="至少8位，需含字母和数字"
                onInput={(e) => setNewPassword(e.detail.value)}
              />
            </View>

            <View className="admin-change-pwd__field">
              <Text className="admin-change-pwd__label">确认新密码</Text>
              <Input
                className="admin-change-pwd__input"
                value={confirmPassword}
                password
                maxlength={32}
                placeholder="再次输入新密码"
                onInput={(e) => setConfirmPassword(e.detail.value)}
              />
            </View>

            <Button
              className="admin-change-pwd__submit"
              loading={submitting}
              disabled={!canSubmit}
              onClick={onSubmit}
            >
              确认修改
            </Button>
          </View>
        </View>
        {actionDrawer}
      </View>
    </AdminGuard>
  );
}
