import { useBackLayer } from "../../app/useBackLayer.js";
import { useI18n } from "../../shared/I18nProvider.jsx";
import "./account-handoff.css";

export function AccountHandoffDialog({ open, fromAccount, toAccount, onCancel, onConfirm }) {
  const { t } = useI18n();
  const closeDialog = useBackLayer(open, onCancel, "account-handoff-confirmation");
  if (!open) return null;

  return <div className="account-handoff-backdrop" onMouseDown={(event) => { if (event.target === event.currentTarget) closeDialog(); }}>
    <div className="account-handoff-dialog" role="dialog" aria-modal="true" aria-labelledby="account-handoff-title" aria-describedby="account-handoff-description">
      <h2 id="account-handoff-title">{t("conversation.accountHandoffTitle")}</h2>
      <p className="account-handoff-token-note">{t("conversation.accountHandoffTokens")}</p>
      <p id="account-handoff-description" className="account-handoff-continuity-note">{t("conversation.accountHandoffDescription", { from: fromAccount, to: toAccount })}</p>
      <div className="account-handoff-actions">
        <button type="button" className="account-handoff-cancel" onClick={() => closeDialog()}>{t("conversation.accountHandoffCancel")}</button>
        <button type="button" className="account-handoff-confirm" autoFocus onClick={() => closeDialog(onConfirm)}>{t("conversation.accountHandoffConfirm")}</button>
      </div>
    </div>
  </div>;
}
