"use client";
import { useState, useEffect } from "react";
import { Markazi_Text, Nunito } from "next/font/google";
import users from "muzak/data/users.json";
import Image from "next/image";
import Link from "next/link";

const nunito = Nunito({
  weight: "900",
  subsets: ["latin"],
});

const MAX_PARTY_SIZE = 8;

export default function Lobby() {
  const [partySize, setPartySize] = useState(0);
  const [userList, setUserList] = useState([]);

  useEffect(() => {
    populateUserList();
  }, [partySize]);

  function populateUserList() {
    const mappedUsers = users.slice(0, partySize).map((user) => ({
      id: user.id,
      name: user.name,
      avatar: user.avatar,
      host: user.host,
    }));
    setUserList(mappedUsers);
  }

  function addUserToParty() {
    setPartySize((prev) => Math.min(prev + 1, MAX_PARTY_SIZE));
  }

  function deleteUserFromParty() {
    setPartySize((prev) => Math.max(prev - 1, 0));
  }

  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <div>
        <h1
          className={`${nunito.className} text-outline text-[42px] tracking-tighter text-yellow-500`}
        >
          LOBBY
        </h1>
      </div>

      <div className="flex min-h-[532px] min-w-[500px] flex-col items-center justify-start gap-4 rounded-md bg-blue-950/80 p-8">
        <div className="flex w-full flex-row items-center justify-between px-1">
          <div className="text-3xl font-bold text-yellow-500">
            Players: {partySize}
          </div>
          <Link
            href="/voting"
            className="rounded-lg border-2 border-black bg-yellow-500 p-4 text-2xl font-extrabold text-blue-600 hover:bg-yellow-400"
          >
            START
          </Link>
        </div>

        {partySize === 0 ? (
          <div className="mt-31 min-w-52 text-3xl font-semibold text-white drop-shadow-sm drop-shadow-gray-900">
            Waiting for players...
          </div>
        ) : (
          <div className="grid min-w-52 grid-flow-row grid-cols-2 items-start justify-start gap-4">
            {userList.map((user) => (
              <div
                key={user.id}
                className="flex min-w-32 items-center gap-x-4 rounded-l-[40px] rounded-r-lg border-2 bg-orange-400/90 p-2"
              >
                <img
                  src={user.avatar}
                  alt={user.name}
                  className="h-16 w-16 rounded-full bg-gray-300"
                />
                <span className="text-2xl font-semibold text-white">
                  {user.name}
                </span>
                {user.host && (
                  <div className="rounded-full bg-blue-950 p-[5px]">
                    <Image
                      src="/crown.png"
                      width={24}
                      height={24}
                      alt="Crown image"
                      className="p-[1px]"
                    />
                  </div>
                )}
              </div>
            ))}
          </div>
        )}
      </div>

      <div className="mt-4 flex items-center justify-between gap-4">
        <button
          className="rounded-md bg-blue-500 px-4 py-2 text-white hover:bg-blue-600"
          onClick={() => deleteUserFromParty()}
        >
          del
        </button>
        <button
          className="rounded-md bg-blue-500 px-4 py-2 text-white hover:bg-blue-600"
          onClick={() => addUserToParty()}
        >
          add
        </button>
      </div>
    </main>
  );
}
