"use client";
import { useState, useEffect } from "react";
import MatchDays from "./ui/MatchDays";
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 [selectedDayMatches, setSelectedDayMatches] = useState([]);
  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");
  };

  const handleLogout = () => {
    setCurrentUser(null);
    localStorage.removeItem("currentUser");
    router.push("/");
  };

  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 p-4">
          <div className="flex justify-between items-center">
            <div className="flex items-center">
              <Image
                src="/images/header_logo.png"
                alt="Logo"
                width={100}
                height={100}
              />
            </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={28}
                      height={28}
                      className="rounded-full mr-2"
                    />
                  ) : (
                    <div className="w-7 h-7 mr-2">
                      <Image
                        src="/images/cluo.webp"
                        alt="User Avatar"
                        width={28}
                        height={28}
                        className="rounded-full"
                      />
                    </div>
                  )}
                  <span className="text-sm font-bold text-gray-700">
                    {currentUser.username}
                  </span>
                </div>
                <span
                  className="text-sm font-bold cursor-pointer text-red-400 hover:text-red-500"
                  onClick={handleLogout}
                >
                  退出登录
                </span>
              </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">
        <MatchDays onSelectMatch={setSelectedDayMatches} />
        <MatchPrediction
          selectedDayMatches={selectedDayMatches}
          currentUser={currentUser}
        />
      </main>

      <ActivityModal />
    </div>
  );
}