"use client";
import { useState, useEffect } from "react";
import MatchPrediction from "./ui/MatchPrediction";
import Image from "next/image";
import { useRouter } from "next/navigation";
import ActivityModal from "./ui/components/ActivityModal";

export default function Home() {
  const [currentUser, setCurrentUser] = useState(null);
  const router = useRouter();

  useEffect(() => {
    const user = JSON.parse(localStorage.getItem("currentUser") || "null");
    setCurrentUser(user);
  }, []);

  const handlePersonalCenterClick = () => {
    console.log("Personal center clicked");
    router.push("/personal-center");
  };


  return (
    <div className="bg-blue-600 text-white min-h-screen">
      <header className="h-16 fixed top-0 left-0 right-0 bg-white shadow-md z-10 transition-all duration-300">
        <div className="max-w-md mx-auto px-4 h-full">
          <div className="flex justify-between items-center h-full">
            <div className="flex items-center">
              <Image
                src="/images/header_logo.png"
                alt="Logo"
                width={100}
                height={45}
              />
            </div>

            {currentUser ? (
              <div className="flex items-center">
                <div
                  className="flex items-center cursor-pointer mr-4"
                  onClick={handlePersonalCenterClick}
                >
                  {currentUser.avatar ? (
                    <Image
                      src={currentUser.avatar}
                      alt="User Avatar"
                      width={32}
                      height={32}
                      className="rounded-full mr-2"
                    />
                  ) : (
                    <div className="w-7 h-7 mr-2">
                      <Image
                        src="/images/cluo.webp"
                        alt="User Avatar"
                        width={32}
                        height={32}
                        className="rounded-full"
                      />
                    </div>
                  )}
                  <span className="text-base font-bold text-gray-700">
                    {currentUser.username}
                  </span>
                </div>

              </div>
            ) : (
              <button
                className="bg-blue-500 text-white hover:bg-blue-600 px-4 py-1 rounded-full text-sm font-bold transition duration-300"
                onClick={() => router.push("/login")}
              >
                登录
              </button>
            )}
          </div>
        </div>
      </header>

      <main className="max-w-md mx-auto pt-16">
        <MatchPrediction currentUser={currentUser} />
      </main>

      <ActivityModal />
    </div>
  );
}