import { ArrowLeft, PanelRightOpen } from "lucide-react";
import { Link, useNavigate, useOutletContext, useParams } from "react-router";
import { agentMockEnabled } from "~/api/agent.ts";
import { agentListHref } from "~/components/agent/agent-nav.ts";
import { AgentRunPanel } from "~/components/agent/agent-run-panel.tsx";
import { agentReturnPath, showAgentRunInDrawer } from "~/components/agent/agent-store.ts";
import { Button } from "~/components/ui/button.tsx";
import type { AgentOutletContext } from "./agent.tsx";

// 会话页的右栏(AGUI-3):会话列占满(顶部概况条、底部输入区);标题与左栏会话列表在外壳 agent.tsx,切换会话不重挂载。
// 步骤、子会话、预算与模型在概况条里。
export default function AgentRunPage() {
  const { runId = "" } = useParams();
  const navigate = useNavigate();
  const mock = agentMockEnabled();
  const { group } = useOutletContext<AgentOutletContext>();
  return (
    <div className="pg-slab flex h-[calc(100dvh-10.25rem)] min-h-[28rem] flex-col gap-2 rounded-2xl p-3 md:p-4 lg:h-[calc(100dvh-11.25rem)]">
      <Button asChild variant="ghost" size="sm" className="-mt-1 -ml-2 self-start text-muted-foreground lg:hidden">
        <Link to={agentListHref(group, mock)}>
          <ArrowLeft />
          全部会话
        </Link>
      </Button>
      <AgentRunPanel
        key={runId}
        runId={runId}
        className="min-h-0 flex-1"
        actions={
          // 整页 → 抽屉:回到进智能体页面之前的页面,会话在抽屉里接着看
          <Button
            variant="outline"
            size="icon-sm"
            aria-label="在侧边打开"
            title="在侧边打开，回到之前的页面"
            onClick={() => {
              showAgentRunInDrawer(runId);
              navigate(agentReturnPath() ?? "/console");
            }}
          >
            <PanelRightOpen />
          </Button>
        }
      />
    </div>
  );
}