import type { Session, TaskId } from "../../protocol/model";
import { CapabilityPanel } from "./CapabilityPanel";
import { RecentEvents } from "./RecentEvents";
import { RunningTasks } from "./RunningTasks";
import { SessionIdentity } from "./SessionIdentity";
import { SessionNotes } from "./SessionNotes";
import { TagEditor } from "./TagEditor";
import type { SessionOverviewData } from "./types";

export function SessionOverview({ session, data, onTagsChange, onCancelTask }: { session: Session; data: SessionOverviewData; onTagsChange?: (tags: readonly string[]) => void; onCancelTask?: (taskId: TaskId) => void }) {
  const running = data.tasks.filter((task) => task.state === "PENDING" || task.state === "RUNNING");
  return <div className="session-overview"><header><div><p className="eyebrow">SESSION OVERVIEW</p><h2>{session.name}</h2></div><span className={`connection ${session.state.toLowerCase()}`}>{session.state}</span></header><div className="overview-grid"><SessionIdentity session={session} /><CapabilityPanel declared={session.capabilities} catalog={data.capabilities} /><RunningTasks tasks={running} onCancel={onCancelTask} /><RecentEvents events={data.events} /><section><h3>Artifact</h3>{data.artifacts.length === 0 ? <p className="empty-state">暂无 Artifact</p> : <ul className="card-list">{data.artifacts.map((artifact) => <li key={artifact.artifact_id}><div><strong>{artifact.name}</strong><small>{artifact.media_type} · {artifact.size_bytes} bytes</small></div></li>)}</ul>}</section><SessionNotes notes={data.notes} /><TagEditor tags={session.tags} disabled={!onTagsChange} onChange={(tags) => onTagsChange?.(tags)} /></div></div>;
}