"use client";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import { useEffect, useState } from "react";
import { useTranslations } from "next-intl";
import { ArrowLeftRight, CheckCircle2 } from "lucide-react";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogTitle
} from "../ui/dialog";
import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar";
import { Progress } from "../ui/progress";
import { cn } from "../../lib/utils";
function TeamSwitchModal({
  isOpen,
  fromTeam,
  toTeam,
  onComplete
}) {
  const t = useTranslations("teams");
  const [progress, setProgress] = useState(0);
  const [phase, setPhase] = useState("switching");
  useEffect(() => {
    if (!isOpen) {
      setProgress(0);
      setPhase("switching");
      return;
    }
    const progressInterval = setInterval(() => {
      setProgress((prev) => {
        if (prev >= 100) {
          clearInterval(progressInterval);
          return 100;
        }
        const increment = prev < 60 ? 8 : prev < 85 ? 5 : 3;
        return Math.min(prev + increment, 100);
      });
    }, 50);
    const completeTimer = setTimeout(() => {
      setPhase("complete");
    }, 800);
    const closeTimer = setTimeout(() => {
      onComplete();
    }, 1400);
    return () => {
      clearInterval(progressInterval);
      clearTimeout(completeTimer);
      clearTimeout(closeTimer);
    };
  }, [isOpen, onComplete]);
  const getTeamInitials = (name) => {
    return name.split(" ").map((word) => word[0]).join("").toUpperCase().slice(0, 2);
  };
  if (!toTeam) return null;
  return /* @__PURE__ */ jsx(Dialog, { open: isOpen, children: /* @__PURE__ */ jsx(
    DialogContent,
    {
      showCloseButton: false,
      className: "sm:max-w-md",
      onPointerDownOutside: (e) => e.preventDefault(),
      onEscapeKeyDown: (e) => e.preventDefault(),
      "data-cy": "team-switch-modal",
      children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-6 py-4", children: [
        /* @__PURE__ */ jsx(DialogTitle, { className: "text-center text-xl", children: phase === "switching" ? t("switcher.switchingTo") : t("switcher.switchComplete") }),
        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-4", children: [
          fromTeam && /* @__PURE__ */ jsxs(Fragment, { children: [
            /* @__PURE__ */ jsxs(
              "div",
              {
                className: cn(
                  "flex flex-col items-center gap-2 transition-all duration-500",
                  phase === "switching" ? "opacity-60 scale-90" : "opacity-30 scale-75"
                ),
                children: [
                  /* @__PURE__ */ jsxs(Avatar, { className: "h-14 w-14 border-2 border-muted", children: [
                    /* @__PURE__ */ jsx(AvatarImage, { src: fromTeam.avatarUrl || void 0, alt: fromTeam.name }),
                    /* @__PURE__ */ jsx(AvatarFallback, { className: "text-lg bg-muted", children: getTeamInitials(fromTeam.name) })
                  ] }),
                  /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground max-w-[80px] truncate", children: fromTeam.name })
                ]
              }
            ),
            /* @__PURE__ */ jsx(
              "div",
              {
                className: cn(
                  "transition-all duration-500",
                  phase === "switching" ? "animate-pulse text-primary" : "text-green-500"
                ),
                children: /* @__PURE__ */ jsx(
                  ArrowLeftRight,
                  {
                    className: cn(
                      "h-6 w-6",
                      phase === "switching" && "animate-[wiggle_0.5s_ease-in-out_infinite]"
                    )
                  }
                )
              }
            )
          ] }),
          /* @__PURE__ */ jsxs(
            "div",
            {
              className: cn(
                "flex flex-col items-center gap-2 transition-all duration-500",
                phase === "switching" ? "scale-100" : "scale-110"
              ),
              children: [
                /* @__PURE__ */ jsxs("div", { className: "relative", children: [
                  /* @__PURE__ */ jsxs(
                    Avatar,
                    {
                      className: cn(
                        "h-14 w-14 border-2 transition-all duration-500",
                        phase === "switching" ? "border-primary ring-2 ring-primary/20" : "border-green-500 ring-4 ring-green-500/20"
                      ),
                      children: [
                        /* @__PURE__ */ jsx(AvatarImage, { src: toTeam.avatarUrl || void 0, alt: toTeam.name }),
                        /* @__PURE__ */ jsx(
                          AvatarFallback,
                          {
                            className: cn(
                              "text-lg transition-colors duration-500",
                              phase === "switching" ? "bg-primary/10" : "bg-green-500/10"
                            ),
                            children: getTeamInitials(toTeam.name)
                          }
                        )
                      ]
                    }
                  ),
                  phase === "complete" && /* @__PURE__ */ jsx("div", { className: "absolute -bottom-1 -right-1 animate-in zoom-in-50 duration-300", children: /* @__PURE__ */ jsx(CheckCircle2, { className: "h-5 w-5 text-green-500 fill-background" }) })
                ] }),
                /* @__PURE__ */ jsx(
                  "span",
                  {
                    className: cn(
                      "text-sm font-medium max-w-[100px] truncate transition-colors duration-500",
                      phase === "complete" && "text-green-600"
                    ),
                    children: toTeam.name
                  }
                )
              ]
            }
          )
        ] }),
        /* @__PURE__ */ jsxs("div", { className: "w-full space-y-2", children: [
          /* @__PURE__ */ jsx(
            Progress,
            {
              value: progress,
              className: cn(
                "h-2 transition-all duration-300",
                phase === "complete" && "[&>div]:bg-green-500"
              )
            }
          ),
          /* @__PURE__ */ jsx(DialogDescription, { className: "text-center text-xs", children: phase === "switching" ? t("switcher.loadingTeamData") : t("switcher.ready") })
        ] })
      ] })
    }
  ) });
}
export {
  TeamSwitchModal
};
