import type { ReactNode } from "react";
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "../ui/dialog";
import { Button } from "../ui/button";
import { useAuthServiceContext } from "../../services";

interface LogOutConfirmationProps {
  /**
 * The control that opens it, rendered as the trigger - a nav row and a card footer button look
 * nothing alike and both are correct.
 *
 * Omit it when the caller already owns its control and drives `open` itself, which is the case
 * for the sidebar: its rows are built from data with an `onClick`, not from JSX a trigger could
 * wrap.
 */
  children?: ReactNode;
  /** Applied to the trigger. */
  className?: string;
  open?: boolean;
  onOpenChange?: (open: boolean) => void;
}

/**
 * One confirmation behind every way out of the product.
 *
 * There were two: the nav row signed out on the first click while the profile card asked first, both
 * visible on the same screen and both named "Log Out". Someone who learned from one that signing out
 * is confirmed could lose their session without warning from the other - and getting back in needs a
 * fresh emailed code.
 *
 * Shared rather than copied so the two cannot drift apart again, which is how they got here.
 */
export const LogOutConfirmation = ({
  children,
  className,
  open,
  onOpenChange,
}: LogOutConfirmationProps) => {
  const { logout } = useAuthServiceContext();

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      {children === undefined ? null : (
        <DialogTrigger className={className}>{children}</DialogTrigger>
      )}

      <DialogContent>
        <DialogHeader className="text-start">
          <DialogTitle>Do you want to log out?</DialogTitle>
          <DialogDescription>
            You&rsquo;ll be signed out from your account.
          </DialogDescription>
        </DialogHeader>

        <DialogFooter>
          {/*
            Staying is the safe outcome, so it is the one that closes the dialog on its own and needs
            no handler to be correct.
          */}
          <DialogClose asChild>
            {/* AMBER, because this is the SAFE half of a destructive confirm. Red would put the safe
                choice in the danger colour and blue would make backing out look like the primary act;
                the standard calls amber "a state or a non-primary act", which is exactly this. */}
            <Button className="btn btn-amber">Stay Logged In</Button>
          </DialogClose>
          <Button className="btn btn-red-ghost" onClick={logout}>
            Log Out
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
};

export default LogOutConfirmation;