import { Button, Select, Textarea } from "../ui";
import type { Persona, ThreadsAccount } from "../../domain/types";
import { useI18n } from "../../i18n/I18nContext";
import type { AttachedImage } from "../../lib/attachImage";
import { isPersonaReady, personaOptionLabel } from "../../lib/personaPrompt";
import { ImageAttach } from "./ImageAttach";

export type ReplySelection = {
  accountId: string;
  personaId: string;
};

type Props = {
  accounts: ThreadsAccount[];
  personas: Persona[];
  selection: ReplySelection;
  onSelectionChange: (next: ReplySelection) => void;
  text: string;
  onTextChange: (text: string) => void;
  onGenerate: () => void;
  onSend: () => void;
  generating?: boolean;
  sending?: boolean;
  /** 主貼回覆 / 回留言 */
  label?: string;
  showAccount?: boolean;
  actionLabel?: string;
  actionBusyLabel?: string;
  /** 附圖（選填） */
  images?: AttachedImage[];
  onImagesChange?: (next: AttachedImage[]) => void;
};

export function ReplyComposer({
  accounts,
  personas,
  selection,
  onSelectionChange,
  text,
  onTextChange,
  onGenerate,
  onSend,
  generating,
  sending,
  label,
  showAccount = true,
  actionLabel,
  actionBusyLabel,
  images,
  onImagesChange,
}: Props) {
  const { t } = useI18n();
  const draftLabel = label ?? t("reply.draft");
  const usable = accounts.filter((a) => a.is_usable);
  const persona = personas.find((p) => p.id === selection.personaId);
  const ready = isPersonaReady(persona);
  const canAttach = Boolean(onImagesChange);

  return (
    <div className="hb-reply-composer">
      <div className="hb-reply-composer__meta">
        {showAccount ? (
          <Select
            label={t("reply.account")}
            value={selection.accountId}
            onChange={(e) => onSelectionChange({ ...selection, accountId: e.target.value })}
          >
            {usable.map((a) => (
              <option key={a.id} value={a.id}>
                {a.display_name} · @{a.username}
              </option>
            ))}
          </Select>
        ) : null}
        <Select
          label={t("reply.persona")}
          value={selection.personaId}
          onChange={(e) => onSelectionChange({ ...selection, personaId: e.target.value })}
        >
          {personas.map((p) => (
            <option key={p.id} value={p.id}>
              {personaOptionLabel(p)}
            </option>
          ))}
        </Select>
      </div>
      {!ready ? (
        <p className="text-muted" style={{ fontSize: "var(--hb-text-xs)", margin: 0 }}>
          {t("reply.notReady")}
        </p>
      ) : null}
      <Textarea label={draftLabel} value={text} onChange={(e) => onTextChange(e.target.value)} rows={4} />
      {canAttach ? (
        <ImageAttach
          images={images || []}
          onChange={onImagesChange!}
          disabled={sending}
          label={t("reply.attach")}
        />
      ) : null}
      <div className="hb-wizard-actions">
        <Button type="button" variant="ghost" disabled={!ready || generating} onClick={onGenerate}>
          {generating ? t("reply.generating") : t("reply.ai")}
        </Button>
        <Button
          type="button"
          disabled={!text.trim() || sending || (showAccount && !selection.accountId)}
          onClick={onSend}
        >
          {sending ? actionBusyLabel || t("reply.sending") : actionLabel || t("reply.send")}
        </Button>
      </div>
    </div>
  );
}
