import { renderAppShell } from "../layout/app-shell.tsx";
import {
  renderRunGraphView,
  type RunTaskView,
} from "./components/run-graph-view.tsx";
import { renderTaskLogPanel } from "./components/task-log-panel.tsx";

export type RunDetailPageInput = {
  workspaceName: string;
  projectName: string;
  run: {
    id: string;
    workflowName: string;
    status: string;
    assetIds?: string[];
  };
  tasks: RunTaskView[];
  selectedTaskId?: string;
};

export function renderRunDetailPage(input: RunDetailPageInput): string {
  return renderAppShell({
    workspaceName: input.workspaceName,
    projectName: input.projectName,
    activeItem: "Runs",
    content: `
      <section data-view="run-detail-page">
        <header>
          <h1>${input.run.workflowName}</h1>
          <p>Run ${input.run.id}</p>
          <p>Status: ${input.run.status}</p>
          <p>Input assets: ${(input.run.assetIds ?? []).join(", ") || "none"}</p>
        </header>
        ${renderRunGraphView(input.tasks)}
        ${renderTaskLogPanel(input.tasks, input.selectedTaskId)}
      </section>
    `,
  });
}