import { FlaskConical } from "lucide-react";
import { Outlet, useParams } from "react-router";
import { agentMockEnabled } from "~/api/agent.ts";
import { agentRunHref, pageListMemory, usePageListGroup, useRunGroup } from "~/components/agent/agent-nav.ts";
import { AgentSessionList } from "~/components/agent/agent-session-list.tsx";
import { PageHeader } from "~/components/console/page-header.tsx";
import { Button } from "~/components/ui/button.tsx";
import { cn } from "~/lib/utils.ts";

/**
 * 智能体页的外壳(AGUI-3):列表页与会话页共用。标题、演示提示与左栏会话列表在这里,只挂载一次;
 * 右栏是子路由(新对话输入框 / 某个会话)。切换会话、回到列表都不重挂载左栏,也不重播入场动画,
 * 标题与两栏的位置不跳。
 */
export default function AgentLayout() {
  const { runId } = useParams();
  const mock = agentMockEnabled();
  const runGroupOf = useRunGroup(runId);
  // 列表页没有 tab 就是「对话」;会话页的左栏分栏跟随当前会话(巡检会话及其子会话在「自动巡检」),也可以手动切换(记在 URL)
  const [group, setGroup] = usePageListGroup(runId ? runGroupOf : undefined);

  return (
    <>
      <PageHeader title="智能体" className="mb-4 md:mb-6" />
      {mock ? (
        <div className="mb-4 flex flex-wrap items-center gap-3 rounded-xl border border-warning/40 bg-warning/10 px-4 py-3 text-caption text-warning">
          <FlaskConical className="h-4 w-4 shrink-0" />
          <span className="min-w-0 flex-1">演示模式：会话是本地假数据，不连接后端，不执行任何操作。</span>
          <Button variant="outline" size="sm" onClick={() => window.location.assign("/console/agent?mock=0")}>
            退出演示
          </Button>
        </div>
      ) : null}
      <div
        data-agent-page
        // 智能体页没有右下角悬浮按钮,收回主内容区为它留的底部空白,两栏正好占满一屏
        className="-mb-16 grid grid-cols-1 gap-4 lg:grid-cols-[minmax(0,19rem)_minmax(0,1fr)] lg:items-start"
      >
        {/* 窄屏:列表页把会话列表排在输入框下面;会话页不显示列表(顶部有「全部会话」返回) */}
        <aside
          className={cn(
            "pg-slab order-2 rounded-2xl p-3 lg:order-1 lg:block lg:h-[calc(100dvh-11.25rem)] lg:overflow-hidden",
            runId && "hidden",
          )}
        >
          <AgentSessionList
            activeId={runId}
            hrefFor={(id) => agentRunHref(id, mock)}
            group={group}
            onGroupChange={setGroup}
            memory={pageListMemory}
            className="h-full"
          />
        </aside>
        <div className="order-1 min-w-0 lg:order-2">
          <Outlet context={{ group } satisfies AgentOutletContext} />
        </div>
      </div>
    </>
  );
}

export type AgentOutletContext = { group: ReturnType<typeof usePageListGroup>[0] };