"use client";

export default function Header({ 
  currentToken, 
  previousToken, 
  nextToken, 
  missedTokens,
  entries = [] // Add entries prop to calculate counts
}) {
  // Calculate counts from entries
  const totalTokens = entries.length;
  const doneTokens = entries.filter(entry => entry.status === "done").length;
  const missedTokensCount = entries.filter(entry => entry.status === "missed").length;
  const inQueueTokens = entries.filter(entry => entry.status === "booked").length;

  return (
    <div className="flex grow flex-col items-center justify-between lg:flex-row lg:px-6 w-full">
      <div className="hidden sm:hidden md:hidden lg:flex lg:justify-center lg:items-center lg:w-full lg:px-6 lg:py-3 xl:flex xl:justify-center xl:items-center xl:w-full xl:px-6 2xl:flex 2xl:justify-center 2xl:items-center 2xl:w-full 2xl:px-6">
        <div className="flex flex-col gap-3">
          <div className="grid grid-cols-4 gap-4">
            {/* ----------Total Tokens Card---------------- */}
            <div className="border-3 border-gray-300 rounded-[10px] px-2 py-2 flex flex-col gap-3 w-[10rem]">
              <h2 className="font-semibold text-[14px] text-[#667085]">Total Tokens</h2>
              <div className="flex gap-5 -mt-1">
                <p className="text-[25px]">{totalTokens}</p>
                <p className="text-[8px] text-[#667085] mt-[18px]">
                  <span className="text-green-400">+{inQueueTokens}</span> in queue
                </p>
              </div>
              <button className="bg-[#465FFF] text-white text-[8px] px-[24px] py-[4px] w-full rounded-[4px]">
                View All
              </button>
            </div>
            
            {/* ----------Done Tokens Card---------------- */}
            <div className="border-3 border-gray-300 rounded-[10px] px-2 py-2 flex flex-col gap-3 w-[10rem]">
              <h2 className="font-semibold text-[14px] text-[#667085]">Done</h2>
              <div className="flex gap-5 -mt-1">
                <p className="text-[25px]">{doneTokens}</p>
                <p className="text-[8px] text-[#667085] mt-[18px]">
                  <span className="text-green-400">
                    {totalTokens > 0 ? Math.round((doneTokens/totalTokens)*100) : 0}%
                  </span> of total
                </p>
              </div>
              <button className="bg-[#465FFF] text-white text-[8px] px-[24px] py-[4px] w-full rounded-[4px]">
                View List
              </button>
            </div>
            
            {/* ----------Missed Tokens Card---------------- */}
            <div className="border-3 border-gray-300 rounded-[10px] px-2 py-2 flex flex-col gap-3 w-[10rem]">
              <h2 className="font-semibold text-[14px] text-[#667085]">Missed Tokens</h2>
              <div className="flex gap-5 -mt-1">
                <p className="text-[25px]">{missedTokensCount}</p>
                <p className="text-[8px] text-[#667085] mt-[18px]">
                  {missedTokensCount > 0 ? (
                    <span className="text-red-400">{missedTokens}</span>
                  ) : (
                    "All attended"
                  )}
                </p>
              </div>
              <button className="bg-[#465FFF] text-white text-[8px] px-[24px] py-[4px] w-full rounded-[4px]">
                View List
              </button>
            </div>
            
            {/* ----------Current Token Card---------------- */}
            <div className="border-3 border-gray-300 rounded-[10px] px-2 py-2 flex flex-col gap-3 w-[10rem]">
              <h2 className="font-semibold text-[14px] text-[#667085]">Current Token</h2>
              <div className="flex flex-col gap-1 -mt-1">
                <p className="text-[25px] text-center">
                  {currentToken || "---"}
                </p>
                <div className="flex justify-between text-[8px] text-[#667085]">
                  <span>Prev: {previousToken || "---"}</span>
                  <span>Next: {nextToken || "---"}</span>
                </div>
              </div>
              <button className="bg-[#465FFF] text-white text-[8px] px-[24px] py-[4px] w-full rounded-[4px]">
                Call Next
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}