import { Button, Card } from "../../../components/ui";
import type { ThreadsAccount } from "../../../domain/types";
import { useI18n } from "../../../i18n/I18nContext";
import type { WizardDraft } from "../wizardState";

type Props = {
  draft: WizardDraft;
  accountMap: Map<string, ThreadsAccount>;
  busy: boolean;
  onSubmit: () => void;
};

export function SubmitStep({ draft, accountMap, busy, onSubmit }: Props) {
  const { t } = useI18n();
  const title = draft.title || draft.topic || t("wizard.submit.unnamed");
  return (
    <Card title={t("wizard.submit.title")}>
      <p>{t("wizard.submit.body", { title, n: draft.steps.length })}</p>
      <ul className="hb-summary-list">
        {draft.steps.map((s, i) => {
          const id = i === 0 ? draft.lead_account_id : s.account_id;
          const acc = accountMap.get(id);
          return (
            <li key={s.id}>
              {i === 0 ? t("wizard.submit.root") : t("wizard.submit.replyN", { n: i })} ·{" "}
              {acc?.display_name || id}
            </li>
          );
        })}
      </ul>
      <Button type="button" onClick={onSubmit} disabled={busy}>
        {busy ? t("wizard.submit.submitting") : t("wizard.submit.run")}
      </Button>
    </Card>
  );
}
