import { Icon } from "./Icon";
import { del, post } from "../api";
import { useT } from "../i18n";
import { useStore } from "../store";
import type { QueueItem } from "../types";
import { imageSrc } from "./FileFigure";
import { confirmDialog, promptDialog, toast } from "../dialogs";

const EMPTY: QueueItem[] = [];

/** Messages waiting for the agent; deletable until delivered. */
export function QueueList({ sessionId, busy }: { sessionId: string; busy: boolean }) {
  const t = useT();
  const items = useStore((s) => s.queue[sessionId] ?? EMPTY);
  if (items.length === 0) return null;
  return (
    <div className="queue">
      <div className="queue-head">
        <span>{busy ? t("queue.pending", { n: items.length }) : t("queue.stopped", { n: items.length })}</span>
        {!busy && (
          <button className="small primary" onClick={() => post(`/sessions/${sessionId}/queue/flush`).catch((e) => toast(e.message))}>
            {t("queue.sendNow")}
          </button>
        )}
      </div>
      {items.map((it) => {
        const text = it.parts.map((p) => (p.type === "text" ? p.text : "")).join(" ").trim();
        const images = it.parts.filter((p) => p.type === "image") as Extract<QueueItem["parts"][number], { type: "image" }>[];
        return (
          <div key={it.id} className="queue-item">
            {it.source === "background" && <span className="chip">{t("tool.background")}</span>}
            <span className="queue-text">{it.source === "background" ? t("queue.backgroundResult") : text || "—"}</span>
            {images.map((p, i) => (
              <img key={i} src={imageSrc(p.image)} alt="" />
            ))}
            {it.source !== "background" && (
              <button
                className="small ghost"
                aria-label={t("queue.remove")}
                title={t("queue.remove")}
                onClick={() => del(`/sessions/${sessionId}/queue/${it.id}`).catch((e) => toast(e.message))}
              >
                <Icon name="close" />
              </button>
            )}
          </div>
        );
      })}
    </div>
  );
}