import { useState, useMemo } from "react";
import { Button, Input, Text, View } from "@tarojs/components";
import Taro from "@tarojs/taro";
import { adminLogin } from "../../api/admin";
import { setAdminTokens, setAdminUser } from "../../utils/adminAuth";
import { useUserStore } from "../../store/user";
import "./index.scss";

export default function AdminLoginPage() {
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [submitting, setSubmitting] = useState(false);

  const canSubmit = useMemo(() => {
    return username.trim().length >= 3 && password.trim().length >= 6 && !submitting;
  }, [username, password, submitting]);

  const onSubmit = async () => {
    if (!canSubmit) return;
    setSubmitting(true);
    try {
      const result = await adminLogin(username.trim(), password);
      setAdminTokens(result.token, result.refreshToken);
      setAdminUser(result.user);
      useUserStore.setState({ adminUser: result.user });
      Taro.showToast({ title: "登录成功", icon: "none" });
      setTimeout(() => {
        Taro.redirectTo({ url: "/pages/admin-dashboard/index" });
      }, 500);
    } finally {
      setSubmitting(false);
    }
  };

  const goBack = () => {
    Taro.navigateBack({ delta: 1 }).catch(() => {
      Taro.switchTab({ url: "/pages/profile/index" });
    });
  };

  return (
    <View className="admin-login-page">
      <View className="admin-login-page__hero">
        <Text className="admin-login-page__brand">e连心 · 管理员登录</Text>
        <Text className="admin-login-page__subtitle">管理员专属操作入口</Text>
      </View>

      <View className="admin-login-page__card">
        <Text className="admin-login-page__title">账号登录</Text>
        <Text className="admin-login-page__desc">请输入管理员用户名和密码</Text>

        <View className="admin-login-page__form">
          <View className="admin-login-page__input-wrap">
            <Text className="admin-login-page__input-icon">👤</Text>
            <Input
              className="admin-login-page__input"
              value={username}
              placeholder="请输入用户名"
              onInput={(e) => setUsername(e.detail.value)}
            />
          </View>

          <View className="admin-login-page__input-wrap">
            <Text className="admin-login-page__input-icon">🔒</Text>
            <Input
              className="admin-login-page__input"
              value={password}
              password
              maxlength={32}
              placeholder="请输入密码"
              onInput={(e) => setPassword(e.detail.value)}
            />
          </View>

          <Button
            className="admin-login-page__submit"
            loading={submitting}
            disabled={!canSubmit}
            onClick={onSubmit}
          >
            登 录
          </Button>
        </View>

        <View className="admin-login-page__footer">
          <Text className="admin-login-page__back" onClick={goBack}>
            ← 返回普通用户登录
          </Text>
        </View>
      </View>
    </View>
  );
}
