import { ChevronDown, ChevronUp, Wrench } from "lucide-react";
import type { FC } from "react";
import { useEffect, useState } from "react";
import { t } from "../../lib/i18n";

const DEV_ROLE_CHANGED_EVENT = "baron_dev_role_changed";

const RoleSwitcher: FC = () => {
  const [currentRole, setCurrentRole] = useState<string>("");
  const [isOverrideEnabled, setIsOverrideEnabled] = useState<boolean>(false);
  const [isCollapsed, setIsCollapsed] = useState<boolean>(() => {
    return window.localStorage.getItem("RoleSwitcher-Collapsed") === "true";
  });

  useEffect(() => {
    const savedRole = window.localStorage.getItem("X-Mock-Role");
    const savedEnabled =
      window.localStorage.getItem("X-Mock-Role-Enabled") === "true";
    setIsOverrideEnabled(savedEnabled);
    if (savedRole) {
      setCurrentRole(savedRole);
    }
  }, []);

  const toggleCollapse = () => {
    const nextState = !isCollapsed;
    setIsCollapsed(nextState);
    window.localStorage.setItem("RoleSwitcher-Collapsed", String(nextState));
  };

  const switchRole = (role: string) => {
    window.localStorage.setItem("X-Mock-Role", role);
    window.localStorage.setItem("X-Mock-Role-Enabled", "true");
    setCurrentRole(role);
    setIsOverrideEnabled(true);
    window.dispatchEvent(new Event(DEV_ROLE_CHANGED_EVENT));
  };

  const clearRoleOverride = () => {
    window.localStorage.removeItem("X-Mock-Role-Enabled");
    setIsOverrideEnabled(false);
    window.dispatchEvent(new Event(DEV_ROLE_CHANGED_EVENT));
  };

  if (import.meta.env.MODE === "production") return null;

  const roleLabels: Record<string, string> = {
    super_admin: t("ui.admin.role.super_admin", "SUPER ADMIN"),
    tenant_admin: t("ui.admin.role.tenant_admin", "TENANT ADMIN"),
    rp_admin: t("ui.admin.role.rp_admin", "RP ADMIN"),
    user: t("ui.admin.role.user", "TENANT MEMBER"),
  };

  return (
    <div
      style={{
        position: "fixed",
        bottom: "20px",
        right: "20px",
        zIndex: 9999,
        background: "#1A1F2C",
        color: "white",
        padding: "8px 12px",
        borderRadius: "8px",
        boxShadow: "0 4px 12px rgba(0,0,0,0.3)",
        display: "flex",
        flexDirection: "column",
        gap: isCollapsed ? "0" : "8px",
        fontSize: "12px",
        transition: "all 0.3s ease",
        border: "1px solid #333",
      }}
    >
      <button
        type="button"
        style={{
          display: "flex",
          alignItems: "center",
          justifyContent: "space-between",
          gap: "12px",
          cursor: "pointer",
          fontWeight: "bold",
          paddingBottom: isCollapsed ? "0" : "4px",
          borderBottom: isCollapsed ? "none" : "1px solid #444",
          background: "transparent",
          border: "none",
          width: "100%",
          color: "inherit",
          textAlign: "inherit",
        }}
        onClick={toggleCollapse}
      >
        <div style={{ display: "flex", alignItems: "center", gap: "6px" }}>
          <Wrench size={14} className="text-blue-400" />
          {!isCollapsed && (
            <span>{t("ui.admin.dev_role_switcher", "DEV Role Switcher")}</span>
          )}
          {isCollapsed && (
            <span style={{ fontSize: "10px", color: "#888" }}>
              {isOverrideEnabled && currentRole
                ? currentRole.toUpperCase()
                : "REAL ROLE"}
            </span>
          )}
        </div>
        {isCollapsed ? <ChevronUp size={14} /> : <ChevronDown size={14} />}
      </button>

      {!isCollapsed && (
        <div
          style={{
            display: "flex",
            flexDirection: "column",
            gap: "6px",
            marginTop: "4px",
          }}
        >
          <button
            type="button"
            onClick={clearRoleOverride}
            style={{
              background: !isOverrideEnabled ? "#3b82f6" : "#333",
              color: "white",
              border: "none",
              padding: "4px 8px",
              borderRadius: "4px",
              cursor: "pointer",
              textAlign: "left",
              transition: "background 0.2s",
              display: "flex",
              justifyContent: "space-between",
              alignItems: "center",
            }}
          >
            <span>
              {t("ui.admin.dev_role_switcher_real", "실제 역할 사용")}
            </span>
            {!isOverrideEnabled && (
              <span style={{ marginLeft: "8px" }}>✅</span>
            )}
          </button>
          {(["super_admin", "tenant_admin", "rp_admin", "user"] as const).map(
            (role) => (
              <button
                key={role}
                type="button"
                onClick={() => switchRole(role)}
                style={{
                  background: currentRole === role ? "#3b82f6" : "#333",
                  color: "white",
                  border: "none",
                  padding: "4px 8px",
                  borderRadius: "4px",
                  cursor: "pointer",
                  textAlign: "left",
                  transition: "background 0.2s",
                  display: "flex",
                  justifyContent: "space-between",
                  alignItems: "center",
                }}
              >
                <span>
                  {roleLabels[role] ?? role.toUpperCase().replace("_", " ")}
                </span>
                {isOverrideEnabled && currentRole === role && (
                  <span style={{ marginLeft: "8px" }}>✅</span>
                )}
              </button>
            ),
          )}
        </div>
      )}
    </div>
  );
};

export default RoleSwitcher;
