import type { AgentRunStatus } from "@umt/contracts";
import { FlaskConical, ShieldCheck } from "lucide-react";
import { useState } from "react";
import { useNavigate } from "react-router";
import { toast } from "sonner";
import { agentMockEnabled, useCreateAgentRun } from "~/api/agent.ts";
import { GoalComposer } from "~/components/agent/agent-run-panel.tsx";
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 { errorMessage } from "~/lib/api.ts";

export default function AgentPage() {
  const [status, setStatus] = useState<"" | AgentRunStatus>("");
  const create = useCreateAgentRun();
  const navigate = useNavigate();
  const mock = agentMockEnabled();

  return (
    <>
      <PageHeader
        title="Agent 会话"
        description="交代目标，Agent 列出步骤后在授权范围内执行并汇报；需要审批的动作停在对应步骤等你批准。"
      />
      {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 className="grid grid-cols-1 gap-4 lg:grid-cols-[minmax(0,20rem)_minmax(0,1fr)]">
        <div className="pg-slab order-2 rounded-xl p-3 lg:order-1 lg:max-h-[calc(100dvh-12rem)] lg:overflow-hidden">
          <AgentSessionList status={status} onStatusChange={setStatus} className="h-full" />
        </div>
        <div className="order-1 space-y-4 lg:order-2">
          <div className="pg-slab rounded-xl p-4">
            <h2 className="mb-3 text-body font-medium text-foreground">新会话</h2>
            <GoalComposer
              pending={create.isPending}
              onSubmit={(goal, opts) =>
                create.mutate(
                  { goal, ...opts },
                  {
                    onSuccess: (run) => navigate(`/console/agent/${run.id}${mock ? "?mock=1" : ""}`),
                    onError: (e) => toast.error(errorMessage(e)),
                  },
                )
              }
            />
          </div>
          <div className="flex gap-3 rounded-xl border border-border/70 p-4 text-caption text-muted-foreground">
            <ShieldCheck aria-hidden className="mt-0.5 size-4 shrink-0" />
            <div className="space-y-1">
              <p>
                每次工具调用都经服务端授权校验。控制台发起的会话里，没有持续授权的下载、整理、策略发布会在对应步骤出审批卡。
              </p>
              <p>汇报分两栏：模型自述仅供参考，"系统核实的结果"取自下载计划、下载任务和整理记录。</p>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}