import { useEffect, useState } from "react";
import { useNavigate } from "react-router";
import { motion } from "motion/react";
import { Heart } from "lucide-react";
import { useUser } from "../context/UserContext";
import { devLogin, fetchApi, getToken, clearToken, decodeToken } from "../services/api";
import { debugLog, clearDebugLogs } from "../services/debug";

export function LoginPage() {
  const navigate = useNavigate();
  const { setTokenAndUser, fetchProfile } = useUser();
  const [error, setError] = useState("");
  const [debugInfo, setDebugInfo] = useState<string[]>([]);
  const addDebug = (msg: string) => {
    console.log(msg);
    setDebugInfo(prev => [...prev.slice(-20), msg]);
  };

  useEffect(() => {
    clearDebugLogs();

    // 收集调试信息（直接在页面显示，排查缓存问题）
    const infos: string[] = [];
    const urlOpenid = new URLSearchParams(window.location.search).get('openid');
    const cachedToken = getToken();
    const ts = new Date().toISOString().slice(11, 19);
    infos.push(`[${ts}] URL: ${window.location.href.substring(0, 100)}`);
    infos.push(`[${ts}] urlOpenid=${urlOpenid || '(空)'}`);
    
    let cacheOpenid = '';
    if (cachedToken) {
      try {
        const p = decodeToken(cachedToken);
        cacheOpenid = p.openid;
        infos.push(`[${ts}] cache openid=${p.openid}, uid=${p.uid}, exp=${p.exp ? new Date(p.exp * 1000).toLocaleString() : '?'}`);
      } catch (e) {
        infos.push(`[${ts}] 缓存 token 解码失败: ${e}`);
      }
    } else {
      infos.push(`[${ts}] 无缓存 token`);
    }
        addDebug(infos.join('\n'));
    
    // 身份一致性检查
    if (urlOpenid && cachedToken) {
      try {
        const payload = decodeToken(cachedToken);
        if (payload.openid !== urlOpenid) {
          addDebug(`[auth] openid 不一致: URL=${urlOpenid}, cache=${payload.openid}，清除缓存`);
          clearToken();
        }
      } catch (e) {
        addDebug(`[auth] token 解码失败，清除: ${e}`);
        clearToken();
      }
    }

    const params = new URLSearchParams(window.location.search);
    debugLog(`URL: ${window.location.href.substring(0, 100)}`);
    debugLog(`search: ${window.location.search}`);

    const openidParam = params.get('openid');
    if (openidParam && openidParam.trim()) {
      addDebug(`开始登录: openid=${openidParam}`);
      fetchApi("/auth/openid-login", {
        method: "POST",
        body: JSON.stringify({ openid: openidParam }),
      }).then((res: any) => {
        addDebug(`openid-login OK: id=${res.user_id}, phone=${res.mobile}`);
        setTokenAndUser(res.token, { id: res.user_id, openid: res.openid, phone: res.mobile });
        fetchProfile().then((dto) => {
          if (dto) addDebug(`profile: name=${dto.name}, phone=${dto.phone}, onboarded=${dto.is_onboarded}`);
          navigate(dto?.is_onboarded ? "/home" : "/onboarding", { replace: true });
        }).catch((e: any) => {
          debugLog(`fetchProfile error: ${e?.message}`);
          setError("登录已失效，请在小程序重新进入");
        });
      }).catch((e: any) => {
        addDebug(`openid-login error: ${e?.message}`);
        setError("登录失败: " + (e?.message || ""));
      });
      return;
    }

    addDebug(`no openid, fallback to dev-login`);
    devLogin().then((res) => {
      debugLog(`dev-login: openid=${res.openid}, phone=${res.mobile}`);
      setTokenAndUser(res.token, { id: res.user_id, openid: res.openid, phone: res.mobile });
      fetchProfile().then((dto) => {
        if (dto) debugLog(`fetchProfile: name=${dto.name}, phone=${dto.phone}`);
        navigate(dto?.is_onboarded ? "/home" : "/onboarding", { replace: true });
      });
    }).catch((err) => {
      debugLog(`dev-login error: ${err?.message}`);
      setError(err?.message || "登录失败，请刷新重试");
    });
  }, []); // eslint-disable-line react-hooks/exhaustive-deps

  return (
    <div className="min-h-dvh bg-morandi-50 flex items-center justify-center p-4 relative">
      {/* 调试浮层：点击可关闭 */}
      {debugInfo.length > 0 && (
        <div
          className="absolute top-0 left-0 right-0 z-50 bg-black/80 text-green-400 text-xs p-3 overflow-auto max-h-[50%] cursor-pointer font-mono"
          style={{ whiteSpace: 'pre-wrap', wordBreak: 'break-all', lineHeight: 1.5 }}
          onClick={() => setDebugInfo([])}
        >
          <div style={{borderBottom:'1px solid #0f0',paddingBottom:4,marginBottom:4,fontWeight:'bold',fontSize:14}}>H5应用调试</div>
          {debugInfo.map((msg, i) => (
            <div key={i}>{msg}</div>
          ))}
        </div>
      )}
      <div className="text-center">
        <motion.div
          animate={{ rotate: 360 }}
          transition={{ repeat: Infinity, duration: 1.5, ease: "linear" }}
          className="inline-flex items-center justify-center w-16 h-16 bg-gradient-to-br from-morandi-300 to-morandi-400 rounded-full mb-4"
        >
          <Heart className="w-8 h-8 text-white fill-white" />
        </motion.div>
        {error ? (
          <p className="text-sm text-red-500">{error}</p>
        ) : (
          <p className="text-sm text-gray-500">加载中...</p>
        )}
      </div>
    </div>
  );
}