import { Button } from "@ariakit/react";
import { Link } from "wouter";
import { useAppConfig } from "../AppConfig/AppConfig.tsx";
import { interactiveText } from "../common.css.ts";
import { IndieTabletopClubLogo } from "../IndieTabletopClubLogo.tsx";
import { LetterheadParagraph } from "../Letterhead/index.tsx";
import { button } from "../Letterhead/style.css.ts";
import { MiddotSeparated } from "../MiddotSeparated/MiddotSeparated.tsx";
import { useAppActions, useCurrentUser } from "../store/index.tsx";
import type { CurrentUser } from "../types.ts";
import { card } from "./style.css.ts";

/**
 * @deprecated Use {@link AuthCardV2}
 */
export function AuthCard(props: {
  onLogout: () => void;
  currentUser: CurrentUser | null;
  description?: string;
}) {
  const {
    currentUser,
    onLogout,

    // Remove this default once AuthCard v1 is migrated away.
    description = "Enable backup & sync, access your pledge data, and more!",
  } = props;
  const { hrefs } = useAppConfig();
  const align = !currentUser ? "center" : "start";

  return (
    <div className={card.container({ align })}>
      <IndieTabletopClubLogo className={card.logo({ align })} />

      {currentUser ?
        <>
          <LetterheadParagraph>{currentUser.email}</LetterheadParagraph>

          <MiddotSeparated className={card.loggedInAction}>
            <Link className={interactiveText} href={hrefs.account()}>
              Account
            </Link>

            <Button className={interactiveText} onClick={() => onLogout()}>
              Log out
            </Button>
          </MiddotSeparated>
        </>
      : <>
          <LetterheadParagraph size="small">{description}</LetterheadParagraph>

          <Link href={hrefs.join()} className={button()}>
            Join
          </Link>

          <LetterheadParagraph size="small">
            {"Already have an account? "}
            <Link href={hrefs.login()} className={interactiveText}>
              Log in
            </Link>
            {"."}
          </LetterheadParagraph>
        </>
      }
    </div>
  );
}

export type AuthCardProps = {
  /**
   * A short description that explains why users should log in or join.
   *
   * @example
   * "Enable backup & sync, access your pledge data, and more!"
   */
  description: string;
};

/**
 * Small, ITC-branded card that shows authentication status.
 *
 * Primarily intended to be used within the sidenav.
 */
export function AuthCardV2(props: AuthCardProps) {
  const currentUser = useCurrentUser();
  const { logout } = useAppActions();
  return <AuthCard {...props} currentUser={currentUser} onLogout={logout} />;
}