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

type Props = {
  draft: WizardDraft;
  accountMap: Map<string, ThreadsAccount>;
};

export function PreviewStep({ draft, accountMap }: Props) {
  const { t } = useI18n();
  const steps = applyIntervalToSteps(draft.steps, draft.interval_minutes);

  return (
    <Card title={t("wizard.preview.title")}>
      <div className="hb-thread-preview">
        {steps.map((step, index) => {
          const acc = accountMap.get(index === 0 ? draft.lead_account_id : step.account_id);
          const isRoot = index === 0;
          return (
            <div key={step.id} className={`hb-bubble${isRoot ? " is-root" : ""}`}>
              <div className="hb-bubble__meta">
                <AccountAvatar
                  account={
                    acc || {
                      display_name: t("wizard.preview.unknown"),
                      username: "?",
                      avatar_color: "var(--hb-muted)",
                    }
                  }
                />
                <strong>{acc?.display_name || t("wizard.preview.unknownAccount")}</strong>
                {isRoot ? <span className="text-muted"> · {t("wizard.preview.root")}</span> : null}
                {!isRoot && step.account_id === draft.lead_account_id ? (
                  <span className="text-muted"> · {t("wizard.preview.leadTalk")}</span>
                ) : null}
              </div>
              <p>{step.text || t("wizard.preview.empty")}</p>
            </div>
          );
        })}
      </div>
    </Card>
  );
}
