import type { FC } from "react";
import { useEffect, useState } from "react";
import { t } from "../../lib/i18n";

const RoleSwitcher: FC = () => {
  const [currentRole, setCurrentRole] = useState<string>("super_admin");

  useEffect(() => {
    // localStorage에서 역할 읽기
    const savedRole = window.localStorage.getItem("X-Mock-Role");
    if (savedRole) {
      setCurrentRole(savedRole);
    } else {
      // 기본값 설정
      window.localStorage.setItem("X-Mock-Role", "super_admin");
    }
  }, []);

  const switchRole = (role: string) => {
    // localStorage 설정
    window.localStorage.setItem("X-Mock-Role", role);
    setCurrentRole(role);
    // 페이지 새로고침하여 권한 적용
    window.location.reload();
  };

  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"),
    tenant_member: t("ui.admin.role.tenant_member", "TENANT MEMBER"),
  };

  return (
    <div
      style={{
        position: "fixed",
        bottom: "20px",
        right: "20px",
        zIndex: 9999,
        background: "#1A1F2C",
        color: "white",
        padding: "10px",
        borderRadius: "8px",
        boxShadow: "0 4px 12px rgba(0,0,0,0.3)",
        display: "flex",
        flexDirection: "column",
        gap: "8px",
        fontSize: "12px",
      }}
    >
      <div
        style={{
          fontWeight: "bold",
          borderBottom: "1px solid #444",
          paddingBottom: "4px",
          marginBottom: "4px",
        }}
      >
        {t("ui.admin.dev_role_switcher", "🛠 DEV Role Switcher")}
      </div>
      {(
        ["super_admin", "tenant_admin", "rp_admin", "tenant_member"] 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",
          }}
        >
          {roleLabels[role] ?? role.toUpperCase().replace("_", " ")}{" "}
          {currentRole === role ? "✅" : ""}
        </button>
      ))}
    </div>
  );
};

export default RoleSwitcher;