import { cn } from "@/shared/lib/utils";
import { t } from "i18next";
import { Button } from "@/shared/common/ui/button";
import { useReportByHooks } from "../components/hooks/useReportByHooks";
const SecretaryList = (
  isSecretary: boolean,
  secretaryView: any,
  setSecretaryView: any,
  type: string,
  useParentCounts = false,
) => {
  const { breakdownCounts } = useReportByHooks({
    isSecretary: isSecretary && useParentCounts,
  });

  const secretaryOption = [
    { value: "self", label: t("userIncoming.self") },
    { value: "parent", label: t("userIncoming.parent") },
  ];
  const statusMain = [
    { value: "non_smart_user", label: t("userIncoming.nonSmart") },
    { value: "external", label: t("userIncoming.external") },
  ];
  return type === "SEC" ? (
    isSecretary && (
      <div className="flex flex-wrap gap-2 bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 px-3 py-3 rounded-t-md shadow-sm">
        {secretaryOption.map((option) => (
          <Button
            key={option.value}
            onClick={() => setSecretaryView(option.value)}
            className={cn(
              "px-5 py-2.5 rounded-full text-base font-medium transition-all duration-200 ease-in-out",
              "focus:ring-2 focus:ring-primary-500/30 focus:outline-none",
              secretaryView === option.value
                ? "bg-primary-600 dark:bg-primary-700 text-white shadow-md scale-[1.02] hover:bg-primary-600 dark:hover:bg-primary-600 hover:shadow-lg"
                : "bg-gray-50 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-primary-50 dark:hover:bg-primary-900/30 hover:text-primary-700 dark:hover:text-primary-400 hover:shadow-sm",
            )}
          >
            {option.label}
          </Button>
        ))}
      </div>
    )
  ) : (
    <div className="flex flex-wrap items-center gap-2 p-3 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 shadow-sm">
      {statusMain.map((option) => {
        const isActive = secretaryView.includes(option.value);
        const notification =
          option.value === "external"
            ? breakdownCounts.externalSmart
            : option.value === "non_smart_user"
              ? breakdownCounts.external
              : 0;

        return (
          <div key={option.value} className="relative">
            <Button
              onClick={() =>
                option.value === "external"
                  ? setSecretaryView(["external"])
                  : setSecretaryView([
                      "external_non_smart_user",
                      "non_smart_user",
                    ])
              }
              className={`
            relative px-5 py-2 rounded-full text-sm sm:text-sm font-medium transition-all duration-200
            ${
              isActive
                ? "bg-primary-600 dark:bg-primary-700 text-white shadow-sm shadow-primary-200 dark:shadow-primary-900/50 hover:bg-primary-700 dark:hover:bg-primary-600"
                : "bg-gray-50 dark:bg-gray-700 text-gray-700 dark:text-gray-300 border border-gray-200 dark:border-gray-600 hover:border-primary-300 dark:hover:border-primary-600 hover:text-primary-700 dark:hover:text-primary-400 hover:bg-primary-50 dark:hover:bg-primary-900/30"
            }
          `}
            >
              {option.label}
            </Button>

            {notification > 0 && (
              <span
                className="
              absolute -top-2 -right-2 min-w-[20px] h-[20px]
              flex items-center justify-center
              text-xs font-semibold text-white
              bg-red-500 dark:bg-red-600 rounded-full
              ring-2 ring-white dark:ring-gray-800
            "
              >
                {notification}
              </span>
            )}
          </div>
        );
      })}
    </div>
  );
};

export default SecretaryList;
