frontend/src/components/DevModeLoginButton.tsx

import { Code } from "@mui/icons-material";
import { Tooltip } from "@mui/material";
import React, { useEffect } from "react";
import { UserInfo } from "../types";
import { LoginButton } from "./LoginButton";

// Mock development user data
const DEV_USER_INFO: UserInfo = {
  sub: "dev-user-123",
  email: "dev@example.com",
  name: "Development User",
  preferred_username: "devuser",
};
const DEV_ACCESS_TOKEN = "dev-mock-token-123";

interface DevModeLoginButtonProps {
  userInfo: UserInfo | null;
  accessToken: string | null;
  loginLabel: string;
  isDisabled?: boolean;
  onLoginStateChange: (
    userInfo: UserInfo | null,
    accessToken: string | null,
    loginLabel: string,
  ) => void;
}

export const DevModeLoginButton: React.FC<DevModeLoginButtonProps> = ({
  userInfo,
  accessToken,
  loginLabel,
  isDisabled = false,
  onLoginStateChange,
}) => {
  // Initialize with logout state on mount
  useEffect(() => {
    if (!userInfo && !accessToken) {
      onLoginStateChange(null, null, "Dev Mode Login");
    }
  }, [userInfo, accessToken, onLoginStateChange]);

  const handleLoginClick = () => {
    if (userInfo) {
      // Log out in dev mode
      onLoginStateChange(null, null, "Dev Mode Login");
    } else {
      // Log in with dev credentials
      const label =
        DEV_USER_INFO.email ||
        DEV_USER_INFO.name ||
        DEV_USER_INFO.preferred_username ||
        "Dev User";
      onLoginStateChange(DEV_USER_INFO, DEV_ACCESS_TOKEN, label);
    }
  };

  const displayLabel = userInfo
    ? `${loginLabel} (Dev Mode)`
    : loginLabel === "Login with Hugging Face"
      ? "Dev Mode Login"
      : loginLabel;
  const isLoggedIn = !!userInfo?.sub;
  return (
    <Tooltip title={isLoggedIn ? "Log out" : ""} placement="right">
      <LoginButton
        icon={<Code />}
        onClick={handleLoginClick}
        isLoggedIn={isLoggedIn}
        disabled={isDisabled}
      >
        {displayLabel}
      </LoginButton>
    </Tooltip>
  );
};