"use client";

import Link from "next/link";
import { useActionState, useEffect, useState, useRef, useCallback } from "react";
import { useTheme } from "next-themes";
import { Moon, Sun, X } from "lucide-react";
import { signIn } from "next-auth/react"; // Import signIn

import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";

import { AuthForm } from "@/components/auth-form";
import { SubmitButton } from "@/components/submit-button";
import { toast } from "@/components/toast";
import { type LoginActionState, login } from "../actions";
import { Button } from "@/components/ui/button";
import { AntigravityBackground } from "@/components/antigravity-background";

export default function Page() {
  const [email, setEmail] = useState("");
  const [isSuccessful, setIsSuccessful] = useState(false);
  const [siteName, setSiteName] = useState("AI Chatbot");
  const [siteLogo, setSiteLogo] = useState<string | null>(null);
  const [siteLogoDark, setSiteLogoDark] = useState<string | null>(null);
  const [isDingTalkEnabled, setIsDingTalkEnabled] = useState(false);
  const [dingTalkAppKey, setDingTalkAppKey] = useState<string | null>(null);
  const [dingTalkOrganizations, setDingTalkOrganizations] = useState<string[]>([]);
  const [isRegistrationEnabled, setIsRegistrationEnabled] = useState(true);
  const [showDingTalkModal, setShowDingTalkModal] = useState(false);
  const [dingTalkIframeSrc, setDingTalkIframeSrc] = useState("");
  const [showOrgMenu, setShowOrgMenu] = useState(false);
  const { setTheme, resolvedTheme } = useTheme();
  const [mounted, setMounted] = useState(false);
  const [isHandlingToken, setIsHandlingToken] = useState(false);
  
  // 系统通知状态
  const [notification, setNotification] = useState<{ enabled: boolean; title: string; content: string } | null>(null);
  const [showNotification, setShowNotification] = useState(false);

  const iframeRef = useRef<HTMLIFrameElement>(null);

  // 声明 formAction 在前面
  const [state, formAction] = useActionState<LoginActionState, FormData>(
    login,
    {
      status: "idle",
    }
  );

  // 使用 token 完成钉钉登录
  const completeDingTalkLogin = useCallback(async (token: string) => {
    console.log("[DingTalk] Completing login with token:", token.substring(0, 10) + "...");
    setIsHandlingToken(true);
    
    try {
      // 获取 CSRF token
      const csrfRes = await fetch("/api/auth/csrf");
      const { csrfToken } = await csrfRes.json();
      console.log("[DingTalk] Got CSRF token");

      // 手动构造登录请求
      const loginRes = await fetch("/api/auth/callback/credentials", {
        method: "POST",
        headers: {
          "Content-Type": "application/x-www-form-urlencoded",
        },
        body: new URLSearchParams({
          csrfToken,
          token,
          callbackUrl: "/",
        }),
        credentials: "include", // 重要：确保 cookie 被发送和接收
      });

      console.log("[DingTalk] Login response status:", loginRes.status);
      console.log("[DingTalk] Login response headers:", Object.fromEntries(loginRes.headers.entries()));

      // 检查响应类型
      const contentType = loginRes.headers.get("content-type");
      console.log("[DingTalk] Content-Type:", contentType);
      
      if (loginRes.redirected || loginRes.status === 302) {
        // 登录成功，被重定向
        console.log("[DingTalk] Login successful (redirected to:", loginRes.url, ")");
        
        // 等待一小段时间确保 cookie 被设置
        await new Promise(resolve => setTimeout(resolve, 300));
        
        // 验证 session 是否创建成功
        const sessionRes = await fetch("/api/auth/session");
        const session = await sessionRes.json();
        console.log("[DingTalk] Session after login:", session);
        
        if (session && session.user) {
          console.log("[DingTalk] Session validated, redirecting to home...");
          setIsSuccessful(true);
          // 使用 replace 而不是 href，避免在历史记录中留下登录页
          // 增加短暂延迟确保 cookie 完全同步
          setTimeout(() => {
            window.location.replace("/");
          }, 200);
        } else {
          console.error("[DingTalk] Session not created after login");
          setIsHandlingToken(false);
          toast({ type: "error", description: "登录失败：无法创建会话" });
        }
      } else if (contentType?.includes("application/json")) {
        const result = await loginRes.json();
        console.log("[DingTalk] Login result:", result);
        
        if (result.url || loginRes.ok) {
          // 登录成功
          console.log("[DingTalk] Login successful");
          
          // 等待一小段时间确保 cookie 被设置
          await new Promise(resolve => setTimeout(resolve, 300));
          
          // 验证 session
          const sessionRes = await fetch("/api/auth/session");
          const session = await sessionRes.json();
          console.log("[DingTalk] Session after login:", session);
          
          if (session && session.user) {
            console.log("[DingTalk] Session validated, redirecting...");
            setIsSuccessful(true);
            // 使用 replace 而不是 href，避免在历史记录中留下登录页
            // 增加短暂延迟确保 cookie 完全同步
            setTimeout(() => {
              window.location.replace(result.url || "/");
            }, 200);
          } else {
            console.error("[DingTalk] Session not created");
            setIsHandlingToken(false);
            toast({ type: "error", description: "登录失败：无法创建会话" });
          }
        } else {
          // 登录失败
          console.error("[DingTalk] Login failed:", result);
          setIsHandlingToken(false);
          toast({ type: "error", description: result.error || "登录失败，请重试" });
        }
      } else {
        // 未知响应
        const responseText = await loginRes.text();
        console.error("[DingTalk] Unexpected response type. Body:", responseText.substring(0, 200));
        setIsHandlingToken(false);
        toast({ type: "error", description: "登录失败：服务器响应异常" });
      }
    } catch (error) {
      console.error("[DingTalk] Login error:", error);
      setIsHandlingToken(false);
      toast({ type: "error", description: "登录发生错误：" + (error instanceof Error ? error.message : String(error)) });
    }
  }, []);

  // Chunk 加载错误自动恢复
  useEffect(() => {
    const handleChunkError = (event: ErrorEvent) => {
      const target = event.target as any;
      if (target?.src?.includes("/_next/static/chunks/") || event.message?.includes("Failed to load chunk")) {
        console.error("[ChunkError] 检测到chunk加载失败，3秒后自动刷新页面");
        // 3秒后自动刷新页面（清除缓存）
        setTimeout(() => {
          window.location.reload();
        }, 3000);
      }
    };

    window.addEventListener("error", handleChunkError, true);
    return () => window.removeEventListener("error", handleChunkError, true);
  }, []);

  // 初始化设置
  useEffect(() => {
    setMounted(true);
    
    // 测试标记 - 确认代码已更新
    console.log("=".repeat(50));
    console.log("🔔 登录页面代码版本: 2024-12-10 v3.0");
    console.log("=".repeat(50));
    
    // 获取网站设置（添加时间戳防止缓存）
    fetch(`/api/site-settings?t=${Date.now()}`)
      .then((res) => res.json())
      .then((data) => {
        console.log("[Login] Site settings data:", data);
        if (data.siteName) setSiteName(data.siteName);
        if (data.siteLogo) setSiteLogo(data.siteLogo);
        if (data.siteLogoDark) setSiteLogoDark(data.siteLogoDark);
        
        // 处理系统通知
        console.log("[Login] Notification data:", data.notification);
        if (data.notification && data.notification.enabled) {
          console.log("[Login] Setting notification and showing dialog");
          setNotification(data.notification);
          // 每次访问登录页都显示通知（重要公告）
          setShowNotification(true);
        } else {
          console.log("[Login] Notification not enabled or missing");
        }
      })
      .catch((err) => {
        console.error("[Login] Failed to fetch site settings:", err);
      });

    // 获取认证设置
    fetch("/api/auth-settings")
      .then((res) => res.json())
      .then((data) => {
        if (data.isDingTalkEnabled) setIsDingTalkEnabled(true);
        if (data.dingTalkAppKey) setDingTalkAppKey(data.dingTalkAppKey);
        if (Array.isArray(data.organizations)) {
          setDingTalkOrganizations(
            data.organizations
              .map((org: { name?: string }) => org.name)
              .filter((name: string | undefined): name is string => !!name),
          );
        }
        if (data.isRegistrationEnabled !== undefined) {
          setIsRegistrationEnabled(data.isRegistrationEnabled);
        }
      })
      .catch(console.error);
  }, []);

  // 检查 URL 中是否有钉钉 Token（页面加载时自动登录）
  useEffect(() => {
    const params = new URLSearchParams(window.location.search);
    const token = params.get("dingtalk_token");
    if (token) {
      completeDingTalkLogin(token);
    }
  }, [completeDingTalkLogin]);

  // 监听来自钉钉回调页面的消息
  useEffect(() => {
    const handleMessage = (event: MessageEvent) => {
      console.log("[DingTalk] Received message:", event.data);
      if (event.data && event.data.type === "dingtalk_login_success") {
        setShowDingTalkModal(false);
        setDingTalkIframeSrc("");
        
        // 使用返回的 token 完成 Auth.js 登录
        if (event.data.token) {
          toast({ type: "success", description: "钉钉认证成功，正在登录..." });
          completeDingTalkLogin(event.data.token);
        } else {
          toast({ type: "error", description: "钉钉登录失败：未获取到登录凭证" });
        }
      } else if (event.data && event.data.type === "dingtalk_login_error") {
        setShowDingTalkModal(false);
        setDingTalkIframeSrc("");
        toast({ type: "error", description: "钉钉登录失败：" + (event.data.message || "未知错误") });
      }
    };

    window.addEventListener("message", handleMessage);
    return () => window.removeEventListener("message", handleMessage);
  }, [completeDingTalkLogin]);

  // 处理登录状态变化
  useEffect(() => {
    if (state.status === "failed") {
      setIsHandlingToken(false);
      toast({
        type: "error",
        description: "邮箱或密码不正确",
      });
    } else if (state.status === "invalid_data") {
      setIsHandlingToken(false);
      toast({
        type: "error",
        description: "提交的信息校验失败",
      });
    } else if (state.status === "success") {
      setIsSuccessful(true);
      window.location.href = "/";
    }
  }, [state.status]);

  const handleSubmit = (formData: FormData) => {
    setEmail(formData.get("email") as string);
    formAction(formData);
  };

  // 根据组织名称启动钉钉登录（在 iframe 中打开）
  const startDingTalkLoginForOrg = (orgName: string) => {
    // 清除 URL 中的 token 参数，避免干扰
    if (
      typeof window !== "undefined" &&
      window.location.search.includes("dingtalk_token")
    ) {
      const newUrl = window.location.pathname;
      window.history.replaceState({}, "", newUrl);
    }

    const loginUrl = `/api/auth/dingtalk/login?org=${encodeURIComponent(
      orgName,
    )}`;

    console.log("[DingTalk] Opening org login:", orgName, loginUrl);
    setDingTalkIframeSrc(loginUrl);
    setShowDingTalkModal(true);
    setShowOrgMenu(false);
  };

  // 钉钉登录 - 支持多组织
  const handleDingTalkLogin = () => {
    if (!isDingTalkEnabled) {
      toast({ type: "error", description: "钉钉登录未启用" });
      return;
    }

    // 没有配置多组织：回退到单一 appKey 流程
    if (dingTalkOrganizations.length === 0) {
      if (!dingTalkAppKey) {
        toast({ type: "error", description: "钉钉登录未正确配置" });
        return;
      }

      // 兼容：直接使用旧的方式在 iframe 中打开
      if (
        typeof window === "undefined" ||
        typeof window.location === "undefined"
      ) {
        toast({ type: "error", description: "当前环境不支持钉钉登录" });
        return;
      }

      // 清除 URL 中的 token 参数，避免干扰
      if (window.location.search.includes("dingtalk_token")) {
        const newUrl = window.location.pathname;
        window.history.replaceState({}, "", newUrl);
      }

      const param = {
        redirect_uri: encodeURIComponent(
          window.location.origin + "/dingtalk-callback.html",
        ),
        client_id: dingTalkAppKey,
        scope: "openid",
        response_type: "code",
        state: "default",
        prompt: "consent",
      };

      const redirectUrl =
        "https://login.dingtalk.com/oauth2/auth?" +
        Object.keys(param)
          .map((key) => key + "=" + (param as any)[key])
          .join("&");

      console.log("[DingTalk] Opening OAuth URL (legacy):", redirectUrl);

      setDingTalkIframeSrc(redirectUrl);
      setShowDingTalkModal(true);
      return;
    }

    // 只有一个组织：直接使用该组织登录
    if (dingTalkOrganizations.length === 1) {
      startDingTalkLoginForOrg(dingTalkOrganizations[0] as string);
      return;
    }

    // 多组织：点击时展开/收起选择菜单（hover 时也会展开）
    setShowOrgMenu((prev) => !prev);
  };

  // 关闭钉钉登录弹窗
  const closeDingTalkModal = () => {
    setShowDingTalkModal(false);
    setDingTalkIframeSrc("");
  };

  // 决定显示哪个 LOGO
  const displayLogo = mounted 
    ? (resolvedTheme === "dark" && siteLogoDark ? siteLogoDark : siteLogo)
    : siteLogo;

  return (
    <div className="flex h-dvh w-screen items-start justify-center bg-background pt-12 md:items-center md:pt-0 relative overflow-hidden">
      {/* Antigravity 动画背景 */}
      <AntigravityBackground />
      
      {/* 主题切换按钮 */}
      <div className="absolute top-4 right-4 z-10">
        <Button
          variant="ghost"
          size="icon"
          onClick={() => setTheme(resolvedTheme === "dark" ? "light" : "dark")}
        >
          {mounted && resolvedTheme === "dark" ? (
            <Moon className="h-5 w-5" />
          ) : (
            <Sun className="h-5 w-5" />
          )}
        </Button>
      </div>

      <div className="flex w-full max-w-md flex-col gap-12 overflow-hidden rounded-2xl relative z-10 pointer-events-auto">
        <div className="flex flex-col items-center justify-center gap-2 px-4 text-center sm:px-16 backdrop-blur-sm bg-background/80 rounded-2xl p-6 pointer-events-auto">
          {displayLogo ? (
            // eslint-disable-next-line @next/next/no-img-element
            <img src={displayLogo} alt={siteName} className="h-12 w-auto mb-2 object-contain" />
          ) : null}
          <h3 className="font-semibold text-xl dark:text-zinc-50">登录 {siteName}</h3>
          <p className="text-gray-500 text-sm dark:text-zinc-400">
            使用邮箱与密码进入系统
          </p>
        </div>
        <AuthForm action={handleSubmit} defaultEmail={email} className="pointer-events-auto">
          <SubmitButton isSuccessful={isSuccessful}>登录</SubmitButton>
          
          {isDingTalkEnabled && (dingTalkAppKey || dingTalkOrganizations.length > 0) && (
            <div className="mt-4 w-full relative">
              <div className="relative mb-4">
                <div className="absolute inset-0 flex items-center">
                  <span className="w-full border-t" />
                </div>
                <div className="relative flex justify-center text-xs uppercase">
                  <span className="bg-background px-2 text-muted-foreground">
                    或使用第三方登录
                  </span>
                </div>
              </div>
              <button
                type="button"
                onClick={handleDingTalkLogin}
                className="flex w-full items-center justify-center gap-2 rounded-md border bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:bg-zinc-900 dark:text-zinc-200 dark:hover:bg-zinc-800"
              >
                <svg style={{ width: "20px", height: "20px" }} viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
                  <path
                    d="M512 2C230.2 2 2 230.2 2 512s228.2 510 510 510 510-228.2 510-510S793.3 2 512 2z m235.9 442c-1 4.6-3.6 10.8-7.2 19.1l-0.5 0.5c-21.6 45.8-77.3 135.5-77.3 135.5l-0.5-0.5-16.5 28.3h78.8L574.3 826.8l34-136h-61.8l21.6-90.2c-17.5 4.1-38.1 9.8-62.3 18 0 0-33 19.1-94.8-37.1 0 0-41.7-37.1-17.5-45.8 10.3-4.1 50-8.8 81.4-12.9 42.2-5.7 68.5-8.8 68.5-8.8s-130.3 2.1-161.2-3.1c-30.9-4.6-70.1-56.7-78.3-102 0 0-12.9-24.7 27.8-12.9 40.2 11.8 209.2 45.8 209.2 45.8S321.4 375 307 358.5c-14.4-16.5-42.8-89.6-39.2-134.5 0 0 1.5-11.3 12.9-8.2 0 0 161.8 74.2 272.5 114.4C664.5 371.4 760.8 392 747.9 444z"
                    fill="#3296FA"
                  />
                </svg>
                钉钉登录
              </button>

              {/* 多组织下的小型选择框（悬浮在按钮附近） */}
              {dingTalkOrganizations.length > 1 && showOrgMenu && (
                <div className="absolute left-0 right-0 -top-2 -translate-y-full rounded-md border bg-background shadow-lg z-20 max-h-60 overflow-auto text-sm">
                  {dingTalkOrganizations.map((org) => (
                    <button
                      key={org}
                      type="button"
                      onClick={() => startDingTalkLoginForOrg(org)}
                      className="flex w-full items-center justify-between px-3 py-2 text-left hover:bg-muted"
                    >
                      <span>{org}</span>
                    </button>
                  ))}
                </div>
              )}
            </div>
          )}

          {isRegistrationEnabled && (
          <p className="mt-4 text-center text-gray-600 text-sm dark:text-zinc-400">
            还没有账号？
            <Link
              className="font-semibold text-gray-800 hover:underline dark:text-zinc-200"
              href="/register"
            >
              立即注册
            </Link>
            ，即可免费体验。
          </p>
          )}
        </AuthForm>
      </div>

      {/* 钉钉登录 iframe 弹窗 / 多组织选择 */}
      {showDingTalkModal && (
        <div
          className="fixed inset-0 bg-black/80 flex items-center justify-center z-50 backdrop-blur-sm"
          onClick={(e) => {
            if (e.target === e.currentTarget) closeDingTalkModal();
          }}
        >
          <div className="w-[90%] max-w-[500px] h-[720px] bg-white dark:bg-zinc-900 rounded-xl overflow-hidden flex flex-col shadow-2xl">
            <div className="flex justify-between items-center p-4 bg-gray-50 dark:bg-zinc-800 border-b dark:border-zinc-700">
              <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
                钉钉登录
              </h3>
              <button
                onClick={closeDingTalkModal}
                className="p-2 hover:bg-gray-200 dark:hover:bg-zinc-700 rounded-lg transition-colors"
              >
                <X className="w-5 h-5 text-gray-500 dark:text-gray-400" />
              </button>
            </div>

            {/* 多组织选择 */}
            {dingTalkOrganizations.length > 1 && !dingTalkIframeSrc && (
              <div className="p-4 space-y-3">
                <p className="text-sm text-muted-foreground">
                  请选择要使用的钉钉组织进行登录：
                </p>
                <div className="space-y-2">
                  {dingTalkOrganizations.map((org) => (
                    <button
                      key={org}
                      type="button"
                      onClick={() => {
                        const loginUrl = `/api/auth/dingtalk/login?org=${encodeURIComponent(
                          org,
                        )}`;
                        console.log(
                          "[DingTalk] Selected organization:",
                          org,
                          loginUrl,
                        );
                        setDingTalkIframeSrc(loginUrl);
                      }}
                      className="flex w-full items-center justify-between rounded-md border bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 dark:bg-zinc-900 dark:text-zinc-200 dark:hover:bg-zinc-800"
                    >
                      <span>{org}</span>
                    </button>
                  ))}
                </div>
                <p className="text-xs text-muted-foreground">
                  选择后将在下方加载钉钉登录页面。
                </p>
              </div>
            )}

            {/* 登录 iframe */}
            {dingTalkIframeSrc && (
              <iframe
                ref={iframeRef}
                src={dingTalkIframeSrc}
                className="flex-1 w-full border-0"
                title="钉钉登录"
              />
            )}

            <div className="p-4 bg-gray-50 dark:bg-zinc-800 border-t dark:border-zinc-700 flex justify-center">
              <button
                onClick={closeDingTalkModal}
                className="px-4 py-2 bg-gray-200 dark:bg-zinc-700 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-300 dark:hover:bg-zinc-600 transition-colors"
              >
                返回登录
              </button>
            </div>
          </div>
        </div>
      )}
      
      {/* 系统通知弹窗 */}
      <Dialog open={showNotification} onOpenChange={setShowNotification}>
        <DialogContent className="sm:max-w-[425px]">
          <DialogHeader>
            <DialogTitle>{notification?.title || "系统通知"}</DialogTitle>
          </DialogHeader>
          <div className="whitespace-pre-wrap text-sm text-muted-foreground mt-4 max-h-[60vh] overflow-y-auto">
            {notification?.content}
          </div>
        </DialogContent>
      </Dialog>
      
      {/* 登录中 Loading 状态 */}
      {isHandlingToken && (
        <div className="fixed inset-0 bg-black/50 z-[60] flex items-center justify-center backdrop-blur-sm">
           <div className="bg-white dark:bg-zinc-800 p-8 rounded-xl shadow-2xl flex flex-col items-center">
             <div className="w-10 h-10 border-4 border-blue-500 border-t-transparent rounded-full animate-spin mb-4"></div>
             <p className="text-lg font-medium text-gray-900 dark:text-white">正在完成登录...</p>
           </div>
        </div>
      )}
    </div>
  );
}