"use client";
import { useTheme } from "../../context/ThemeContext";

export default function Header({ 
  currentToken, 
  previousToken, 
  nextToken, 
  missedTokens,
  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;
  const { darkMode } = useTheme();

  


return (
<div className={`flex grow flex-col items-center ${darkMode ? 'bg-gray-500' : 'bg-white'} justify-between lg:flex-row lg:px-6 w-full`}>    <div className="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 p-4 rounded-lg ${darkMode ? 'bg-gray-800 text-gray-200' : 'bg-gray-50 text-gray-600'}`}>
        <div className="grid grid-cols-4 gap-4">
          {/* ----------Total Tokens Card---------------- */}
          <div className={`border rounded-lg px-3 py-3 flex flex-col gap-3 w-[10rem] transition-colors ${
            darkMode ? 'bg-gray-700 border-gray-600' : 'bg-white border-gray-200'
          }`}>
            <h2 className="font-semibold text-sm text-gray-500 dark:text-gray-300">Total Tokens</h2>
            <div className="flex gap-5 items-baseline">
              <p className="text-2xl font-medium dark:text-white">{totalTokens}</p>
              <p className="text-xs text-gray-500 dark:text-gray-400">
                <span className="text-green-500 dark:text-green-400">+{inQueueTokens}</span> in queue
              </p>
            </div>
            <button className={`bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 
              text-white text-xs py-1.5 w-full rounded transition-colors`}>
              View All
            </button>
          </div>
          
          {/* ----------Done Tokens Card---------------- */}
          <div className={`border rounded-lg px-3 py-3 flex flex-col gap-3 w-[10rem] transition-colors ${
            darkMode ? 'bg-gray-700 border-gray-600' : 'bg-white border-gray-200'
          }`}>
            <h2 className="font-semibold text-sm text-gray-500 dark:text-gray-300">Done</h2>
            <div className="flex gap-5 items-baseline">
              <p className="text-2xl font-medium dark:text-white">{doneTokens}</p>
              <p className="text-xs text-gray-500 dark:text-gray-400">
                <span className="text-green-500 dark:text-green-400">
                  {totalTokens > 0 ? Math.round((doneTokens/totalTokens)*100) : 0}%
                </span> of total
              </p>
            </div>
            <button className={`bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 
              text-white text-xs py-1.5 w-full rounded transition-colors`}>
              View List
            </button>
          </div>
          
          {/* ----------Missed Tokens Card---------------- */}
          <div className={`border rounded-lg px-3 py-3 flex flex-col gap-3 w-[10rem] transition-colors ${
            darkMode ? 'bg-gray-700 border-gray-600' : 'bg-white border-gray-200'
          }`}>
            <h2 className="font-semibold text-sm text-gray-500 dark:text-gray-300">Missed Tokens</h2>
            <div className="flex gap-5 items-baseline">
              <p className="text-2xl font-medium dark:text-white">{missedTokensCount}</p>
              <p className="text-xs text-gray-500 dark:text-gray-400">
                {missedTokensCount > 0 ? (
                  <span className="text-red-500 dark:text-red-400">{missedTokens}</span>
                ) : (
                  "All attended"
                )}
              </p>
            </div>
            <button className={`bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 
              text-white text-xs py-1.5 w-full rounded transition-colors`}>
              View List
            </button>
          </div>
          
          {/* ----------Current Token Card---------------- */}
          <div className={`border rounded-lg px-3 py-3 flex flex-col gap-3 w-[10rem] transition-colors ${
            darkMode ? 'bg-gray-700 border-gray-600' : 'bg-white border-gray-200'
          }`}>
            <h2 className="font-semibold text-sm text-gray-500 dark:text-gray-300">Current Token</h2>
            <div className="flex flex-col gap-1">
              <p className="text-2xl font-medium text-center dark:text-white">
                {currentToken || "---"}
              </p>
              <div className="flex justify-between text-xs text-gray-500 dark:text-gray-400">
                <span>Prev: {previousToken || "---"}</span>
                <span>Next: {nextToken || "---"}</span>
              </div>
            </div>
            <button className={`bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 
              text-white text-xs py-1.5 w-full rounded transition-colors`}>
              Call Next
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
);
}