"use client";

import { useEffect, useState } from "react";
import { useSearchParams } from "next/navigation";
import { BlurFade } from "@/components/magicui/blur-fade";
import { HomeDock } from "./home-dock";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { LoginForm } from "./login/login-form";

export function HomePageClient({
  isAuthenticated,
  healthText,
  hasKeycloak,
}: {
  isAuthenticated: boolean;
  healthText: string;
  hasKeycloak: boolean;
}) {
  const searchParams = useSearchParams();
  const [loginOpen, setLoginOpen] = useState(false);

  useEffect(() => {
    if (searchParams.get("login") === "1" && !isAuthenticated) {
      setLoginOpen(true);
    }
  }, [searchParams, isAuthenticated]);

  return (
    <div className="relative flex min-h-screen flex-col items-center justify-center bg-gradient-to-br from-slate-50 to-slate-100 p-4 pb-24">
      <BlurFade inView delay={0.1}>
        <h1 className="mb-4 text-center text-4xl font-extrabold tracking-tight text-slate-900">
          EvanPage
        </h1>
      </BlurFade>

      <BlurFade inView delay={0.2}>
        <p className="mb-8 max-w-md text-center text-lg text-slate-600">
          全栈基础框架
        </p>
      </BlurFade>

      <BlurFade inView delay={0.3}>
        <div className="rounded-2xl border bg-white/80 px-8 py-6 shadow-lg backdrop-blur">
          <p className="text-center text-sm font-medium text-slate-500">
            后端状态
          </p>
          <p className="mt-2 text-center text-xl font-semibold text-slate-800">
            {healthText}
          </p>
        </div>
      </BlurFade>

      <HomeDock
        isAuthenticated={isAuthenticated}
        onLoginClick={() => !isAuthenticated && setLoginOpen(true)}
      />

      <Dialog open={loginOpen} onOpenChange={setLoginOpen}>
        <DialogContent className="sm:max-w-md">
          <DialogHeader>
            <DialogTitle className="text-center">登录</DialogTitle>
          </DialogHeader>
          <LoginForm
            hasKeycloak={hasKeycloak}
            onSuccess={() => setLoginOpen(false)}
          />
        </DialogContent>
      </Dialog>
    </div>
  );
}