"use client";

// MissionArtifacts — the mission's captured FILES, and a reader for them.
//
// Distinct from MissionOutputReader, which shows agent turn output: that is the
// agent's ACCOUNT of the work, this is the work. For a repo-less research
// mission these artifacts are the only durable result — see
// `cm-api/src/mission_outputs.rs`.
//
// Bodies are fetched on demand. The mission detail carries paths only, and a
// research phase can leave dozens of documents.

import { useCallback, useState } from "react";
import { FileText } from "lucide-react";

import {
  getArtifactContent,
  type ArtifactContent,
  type MissionDetail,
} from "@/lib/api/missions";
import { MarkdownBlock } from "./MarkdownBlock";

const mono =
  "ui-monospace, SFMono-Regular, SF Mono, Menlo, Monaco, Consolas, monospace";

export function MissionArtifacts({
  mission,
  secondaryBtn,
}: {
  mission: MissionDetail;
  secondaryBtn: React.CSSProperties;
}) {
  const missionId = mission.id;
  const artifacts = mission.artifacts;
  const [openId, setOpenId] = useState<string | null>(null);
  const [text, setText] = useState<ArtifactContent | null>(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  /**
   * Open one artifact, fetching its text. Clicking the open one closes it.
   *
   * Errors surface in place rather than being swallowed: a file the server
   * refuses to read (outside `_outputs`, or reaped with its mission) has to say
   * so, or the panel sits empty and reads as a slow load that never finishes.
   */
  const open = useCallback(
    async (artifactId: string) => {
      if (openId === artifactId) {
        setOpenId(null);
        return;
      }
      setOpenId(artifactId);
      setText(null);
      setError(null);
      setLoading(true);
      try {
        setText(await getArtifactContent(missionId, artifactId));
      } catch (e) {
        setError(e instanceof Error ? e.message : "could not read this artifact");
      } finally {
        setLoading(false);
      }
    },
    [missionId, openId],
  );

  if (artifacts.length === 0) {
    return (
      <div style={{ fontFamily: mono, fontSize: 11.5, color: "#8a8a92", padding: 12 }}>
        no artifacts yet — phases produce them as they run
      </div>
    );
  }

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
      {artifacts.map((a) => {
        const isOpen = openId === a.id;
        return (
          <div key={a.id} style={{ display: "flex", flexDirection: "column", gap: 8 }}>
            <div
              style={{
                padding: 11,
                borderRadius: 10,
                border: "1px solid rgba(255,255,255,.07)",
                background: "#101014",
                display: "flex",
                alignItems: "center",
                gap: 10,
              }}
            >
              <FileText size={16} style={{ color: "#7cd6e0", flex: "none" }} />
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 13, color: "#f3f3f5", fontWeight: 500 }}>
                  {a.title ?? a.path.split("/").pop() ?? a.path}
                </div>
                <div style={{ fontFamily: mono, fontSize: 10.5, color: "#8a8a92" }}>
                  {a.kind} · {a.path}
                </div>
              </div>
              <button
                type="button"
                onClick={() => open(a.id)}
                style={{ ...secondaryBtn, padding: "5px 10px", fontSize: 11 }}
              >
                {isOpen ? "Hide" : "Read"}
              </button>
            </div>
            {isOpen && (
              <div
                style={{
                  border: "1px solid rgba(255,255,255,.06)",
                  borderRadius: 8,
                  background: "#0a0a0d",
                  padding: 16,
                  maxHeight: 640,
                  overflowY: "auto",
                }}
              >
                {loading ? (
                  <div style={{ fontFamily: mono, fontSize: 11.5, color: "#8a8a92" }}>
                    loading…
                  </div>
                ) : error ? (
                  <div style={{ fontFamily: mono, fontSize: 11.5, color: "#ff8a7a" }}>
                    {error}
                  </div>
                ) : text?.truncated ? (
                  <div style={{ fontFamily: mono, fontSize: 11.5, color: "#8a8a92" }}>
                    too large to display inline ({text.bytes.toLocaleString()} bytes)
                  </div>
                ) : text ? (
                  <MarkdownBlock source={text.content} />
                ) : null}
              </div>
            )}
          </div>
        );
      })}
    </div>
  );
}