import { Input } from "@/shared/common/ui/input";
import { cn } from "@/shared/lib/utils";
import { t } from "i18next";
import { NavLink, useLocation } from "react-router-dom";
import { BellRing } from "lucide-react";
import { useReport } from "../hooks/useReport";
import { useReportByHooks } from "../hooks/useReportByHooks";
import { useAuthUser } from "@/shared/hooks/useAuthUser";
import { useUserDetail } from "../hooks/useUserDetail";
import { MeDto } from "@/shared/dto/user/meDto";

const HeaderSection = () => {
  const location = useLocation();
  const { userDetails } = useAuthUser();
  const { permissionKeys } = useUserDetail(userDetails as MeDto);
  const useParentCounts =
    permissionKeys.includes("can:viewParentPositionRecord") &&
    new URLSearchParams(location.search).get("view") === "parent";
  const {
    //   TotalDraftCC,
    //   TotalDraftInternal,
    //   TotalDraftExternal,
    TotalUrgentDraftInternal,
    TotalUrgentDraftExternal,
    //   TotalDraftForYourRef,
  } = useReport("");
  const { breakdownCounts } = useReportByHooks({
    isSecretary: useParentCounts,
  });
  const externalIncomingCount =
    breakdownCounts.external + breakdownCounts.externalSmart;
  const incomingViewSearch = useParentCounts ? "?view=parent" : "";
  return (
    <div className="flex flex-wrap justify-center sm:justify-start gap-2">
      <div
        className="
    flex flex-col sm:flex-nowrap sm:flex-row 
    sm:overflow-x-auto 
    items-stretch sm:items-center 
    gap-2 sm:gap-4 md:gap-6 
    w-full 
    pt-2 pb-2 
    scrollbar-none
  "
      >
        {/* External Tab */}
        <NavLink
          to={`/record-management/userIncoming${incomingViewSearch}`}
          end
          className={({ isActive }) =>
            cn(
              "flex items-center justify-center gap-1 sm:gap-2 text-base base:text-base border min-w-[90px] sm:min-w-[120px] md:min-w-[180px] rounded-md px-2 py-1.5 relative",
              isActive
                ? "text-primary-800 dark:text-white border-primary-600 dark:border-primary-500 bg-primary-50 dark:bg-primary-900/40"
                : "text-gray-600 dark:text-gray-300 border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800",
            )
          }
        >
          {/* Radio */}
          <Input
            type="radio"
            id="externalradio"
            checked={location.pathname === "/record-management/userIncoming"}
            readOnly
            className="h-3 w-3 sm:h-4 sm:w-4 rounded-full border border-gray-300 text-primary-600 focus:ring-primary-500 checked:bg-primary accent-primary"
          />

          {/* Label + Count + Bell */}
          <span className="flex items-center gap-1">
            {t("nav.external")}

            {/* External Count Badge */}
            {externalIncomingCount > 0 && (
              <span className="bg-red-500 text-white text-xs font-semibold rounded-full px-1.5 py-0.5">
                {externalIncomingCount}
              </span>
            )}

            {/* Urgent Bell (no number) */}
            {TotalUrgentDraftExternal > 0 && (
              <span className="relative flex h-4 w-4">
                {/* Pulse effect */}
                <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
                {/* Bell icon */}
                <BellRing className="relative h-4 w-4 text-red-500" />
              </span>
            )}
          </span>
        </NavLink>

        {/* Internal Tab */}
        <NavLink
          to={`/record-management/userIncoming/internal${incomingViewSearch}`}
          className={({ isActive }) =>
            cn(
              "flex items-center justify-center gap-1 sm:gap-2 text-base base:text-base border min-w-[90px] sm:min-w-[120px] md:min-w-[180px] rounded-md px-2 py-1.5 relative",
              isActive
                ? "text-primary-800 dark:text-white border-primary-600 dark:border-primary-500 bg-primary-50 dark:bg-primary-900/40"
                : "text-gray-600 dark:text-gray-300 border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800",
            )
          }
        >
          {/* Radio */}
          <Input
            type="radio"
            id="internalradio"
            checked={
              location.pathname === "/record-management/userIncoming/internal"
            }
            readOnly
            className="h-3 w-3 sm:h-4 sm:w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500 checked:bg-primary accent-primary"
          />

          {/* Label + Count + Bell */}
          <span className="flex items-center gap-1">
            {t("nav.internal")}

            {/* Internal Count Badge */}
            {breakdownCounts.internal > 0 && (
              <span className="bg-red-500 text-white text-xs font-semibold rounded-full px-1.5 py-0.5">
                {breakdownCounts.internal}
              </span>
            )}

            {/* Urgent Bell (no number) */}
            {TotalUrgentDraftInternal > 0 && (
              <span className="relative flex h-4 w-4">
                <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
                <BellRing className="relative h-4 w-4 text-red-500" />
              </span>
            )}
          </span>
        </NavLink>

        {/* CC Tab */}
        <NavLink
          to={`/record-management/userIncoming/cc${incomingViewSearch}`}
          className={({ isActive }) =>
            cn(
              "flex items-center justify-center gap-1 sm:gap-2 text-base base:text-base border min-w-[90px] sm:min-w-[120px] md:min-w-[180px] rounded-md px-2 py-1.5 relative overflow-visible",
              isActive
                ? "text-primary-800 dark:text-white border-primary-600 dark:border-primary-500 bg-primary-50 dark:bg-primary-900/40"
                : "text-gray-600 dark:text-gray-300 border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800",
            )
          }
        >
          <Input
            type="radio"
            id="ccradio"
            checked={location.pathname === "/record-management/userIncoming/cc"}
            readOnly
            className="h-3 w-3 sm:h-4 sm:w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500 checked:bg-primary accent-primary"
          />
          <span>{t("nav.cc")}</span>

          {/* CC Count Badge */}
          {breakdownCounts.ccUnseen > 0 && (
            <span className="bg-red-500 text-white text-xs font-semibold rounded-full px-1.5 py-0.5">
              {breakdownCounts.ccUnseen}
            </span>
          )}
        </NavLink>

        {/* For Your Reference Tab */}
        <NavLink
          to={`/record-management/userIncoming/for-your-reference${incomingViewSearch}`}
          className={({ isActive }) =>
            cn(
              "flex items-center justify-center gap-1 sm:gap-2 text-base base:text-base border min-w-[90px] sm:min-w-[120px] md:min-w-[180px] rounded-md px-2 py-1.5 relative",
              isActive
                ? "text-primary-800 dark:text-white border-primary-600 dark:border-primary-500 bg-primary-50 dark:bg-primary-900/40"
                : "text-gray-600 dark:text-gray-300 border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800",
            )
          }
        >
          <Input
            type="radio"
            id="forYourReferenceRadio"
            checked={
              location.pathname ===
              "/record-management/userIncoming/for-your-reference"
            }
            readOnly
            className="h-3 w-3 sm:h-4 sm:w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500 checked:bg-primary accent-primary"
          />
          <span>{t("nav.forYourReference")}</span>
          {breakdownCounts.forYourReference > 0 && (
            <span className="bg-red-500 text-white text-xs font-semibold rounded-full px-1.5 py-0.5">
              {breakdownCounts.forYourReference}
            </span>
          )}
        </NavLink>

        {/* Collaboration Tab */}
        {/* <NavLink
          to="/record-management/collaborations"
          className={({ isActive }) =>
            cn(
              "flex items-center justify-center gap-1 sm:gap-2 text-base base:text-base text-bold border min-w-[90px] sm:min-w-[120px] md:min-w-[180px] rounded-md px-2 py-1.5",
              isActive
                ? "text-primary-700 border-primary bg-primary-50"
                : "text-gray-600 border-gray-300 bg-white"
            )
          }
        >
          <Input
            type="radio"
            id="collaborationradio"
            checked={location.pathname === "/record-management/collaborations"}
            readOnly
            className="h-3 w-3 sm:h-4 sm:w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500 checked:bg-primary"
          />
          <span>{t("nav.collaboration")}</span>
        </NavLink> */}
      </div>
    </div>
  );
};

export default HeaderSection;
