import { cn } from "@/shared/lib/utils";
import { t } from "i18next";
import { NavLink } from "react-router-dom";
import { useReport } from "../../hooks/useReport";

const HeaderSection = () => {
  const { ROIncomingExternalNonSmart, ROIncomingNonSmart, ROIncomingSmart } =
    useReport("");
  return (
    <div className="flex gap-6 border-b border-gray-200 dark:border-gray-700 mb-4">
      {/* Non-Smart Letters Tab */}
      <NavLink
        to="/record-management/recordOfficer/incoming"
        className={({ isActive }) =>
          cn(
            "relative pb-2 text-sm sm:text-base font-medium transition-colors",
            isActive
              ? "text-primary-800 dark:text-white"
              : "text-gray-500 dark:text-gray-300 hover:text-primary-700 dark:hover:text-white"
          )
        }
      >
        {({ isActive }) => (
          <div className="relative flex items-center">
            <span>{t("userRecord.recordOfficeRegester")}</span>

            {/* 🔴 Notification badge for Non-Smart Letters */}
            {ROIncomingNonSmart > 0 && (
              <span className="ml-2 bg-red-500 text-white text-xs font-semibold rounded-full px-1.5 py-0.5 leading-none shadow">
                {ROIncomingNonSmart}
              </span>
            )}

            {/* Active underline */}
            {isActive && (
              <span className="absolute left-0 -bottom-[1px] h-0.5 w-full bg-primary-600 dark:bg-white rounded-full transition-all"></span>
            )}
          </div>
        )}
      </NavLink>

      {/* Incoming Letters Tab */}
      <NavLink
        to="/record-management/recordOfficer/incomingHistory"
        className={({ isActive }) =>
          cn(
            "relative pb-2 text-sm sm:text-base font-medium transition-colors",
            isActive
              ? "text-primary-800 dark:text-white"
              : "text-gray-500 dark:text-gray-300 hover:text-primary-700 dark:hover:text-white"
          )
        }
      >
        {({ isActive }) => (
          <div className="relative flex items-center">
            <span>{t("userRecord.fromSmartUsers")}</span>

            {/* 🔴 Notification badge for Incoming Letters */}
            {ROIncomingSmart > 0 && (
              <span className="ml-2 bg-red-500 text-white text-xs font-semibold rounded-full px-1.5 py-0.5 leading-none shadow">
                {ROIncomingSmart}
              </span>
            )}

            {/* Active underline */}
            {isActive && (
              <span className="absolute left-0 -bottom-[1px] h-0.5 w-full bg-primary-600 dark:bg-white rounded-full transition-all"></span>
            )}
          </div>
        )}
      </NavLink>
      {/* non smart external */}
      <NavLink
        to="/record-management/recordOfficer/incomingNonSmartExternal"
        className={({ isActive }) =>
          cn(
            "relative pb-2 text-sm sm:text-base font-medium transition-colors",
            isActive
              ? "text-primary-800 dark:text-white"
              : "text-gray-500 dark:text-gray-300 hover:text-primary-700 dark:hover:text-white"
          )
        }
      >
        {({ isActive }) => (
          <div className="relative flex items-center">
            <span>{t("userRecord.fromExternalNonsmart")}</span>

            {/* 🔴 Notification badge for Incoming Letters */}
            {ROIncomingExternalNonSmart > 0 && (
              <span className="ml-2 bg-red-500 text-white text-xs font-semibold rounded-full px-1.5 py-0.5 leading-none shadow">
                {ROIncomingExternalNonSmart}
              </span>
            )}

            {/* Active underline */}
            {isActive && (
              <span className="absolute left-0 -bottom-[1px] h-0.5 w-full bg-primary-600 dark:bg-white rounded-full transition-all"></span>
            )}
          </div>
        )}
      </NavLink>
    </div>
  );
};

export default HeaderSection;
