import { useEffect, useMemo, useState } from "react";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { Settings2 } from "lucide-react";

import { modelRoutingApi, type ModelRoutingItem } from "@/api/modelRouting";
import { ConfigSubpageHeader } from "@/components/ai-config/ConfigSubpageHeader";
import { FeatureIntroGuide } from "@/components/ai-config/FeatureIntroGuide";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { formatBeijingDateTime } from "@/lib/datetime";
import { toZhRoutingSource, toZhTierAlias } from "@/lib/display";

const TIER_OPTIONS = ["low", "high"] as const;
const FUNCTION_USAGE_DESCRIPTIONS: Record<string, string> = {
  adaptive_rag_answer_deep: "复杂问题的深度回答阶段：会做更细的推理和更完整的结论组织。",
  adaptive_rag_answer_normal: "常规问答阶段：基于已检索到的信息快速生成可读回复。",
  feishu_humanized_reply: "对外回复润色阶段：把结果改写成飞书里更自然、易读的表达。",
  rag_db_project_semantic_retrieval: "知识检索阶段：从项目库里找最相关的历史上下文与证据。",
  rag_intent_classification: "意图识别阶段：先判断这是哪类问题，再决定后续处理路径。",
  signal_planner_analyze: "任务规划阶段：把需求拆成可执行步骤、产物和责任边界。",
  classify_intent_ai_pmo_kernel: "轻量意图分流：快速判断是否进入 PMO 内核处理链路。",
  classify_intent_complex: "复杂意图判别：识别高复杂度请求，决定是否升级到高层模型。",
};

function getFunctionUsageHint(functionName: string): string {
  return FUNCTION_USAGE_DESCRIPTIONS[functionName] || "通用路由节点：用于该函数调用阶段的高低层选择。";
}

function describeLastExecution(item: ModelRoutingItem): string {
  const last = item.last_execution;
  if (!last) return "暂无执行记录";
  return `${last.planned_tier} -> ${last.executed_tier}`;
}

function describeUpgrade(item: ModelRoutingItem): string {
  const last = item.last_execution;
  if (!last) return "-";
  return last.planned_tier !== last.executed_tier ? "是" : "否";
}

export default function ModelRoutingConfigPage() {
  const queryClient = useQueryClient();
  const [selectedFunction, setSelectedFunction] = useState("signal_planner_analyze");
  const [tierAlias, setTierAlias] = useState<(typeof TIER_OPTIONS)[number]>("high");

  const routingQuery = useQuery({
    queryKey: ["model-routing-functions"],
    queryFn: () => modelRoutingApi.listFunctions(),
  });
  const items = routingQuery.data || [];

  const current = useMemo(
    () => items.find((item) => item.function_name === selectedFunction) || null,
    [items, selectedFunction]
  );

  useEffect(() => {
    const fallback: ModelRoutingItem | null = current || items[0] || null;
    if (!fallback) return;
    if (!current && fallback.function_name) {
      setSelectedFunction(fallback.function_name);
    }
    const nextTier = TIER_OPTIONS.includes(fallback.tier_alias as (typeof TIER_OPTIONS)[number])
      ? (fallback.tier_alias as (typeof TIER_OPTIONS)[number])
      : "high";
    setTierAlias(nextTier);
  }, [current, items]);

  const updateMutation = useMutation({
    mutationFn: () =>
      modelRoutingApi.updateFunction(selectedFunction, {
        tier_alias: tierAlias,
      }),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["model-routing-functions"] });
    },
  });

  const routingErrorText = routingQuery.error instanceof Error ? routingQuery.error.message : "请检查后端服务。";

  return (
    <div className="space-y-6">
      <ConfigSubpageHeader
        title="高级路由详情"
        description="高级排障时按函数选择快速/深度槽位；团队日常策略请优先使用 AI 路由与供应商控制台。"
        icon={<Settings2 className="h-5 w-5" />}
        tone="blue"
        meta={<span>{routingQuery.isError ? "读取失败" : `已加载 ${items.length} 条路由`}</span>}
      />
      <FeatureIntroGuide
        featureId="model-routing-config"
        title="高级路由详情"
        purpose="给高级排障保留函数级快速/深度槽位覆盖能力。"
        whenToUse="只有当控制台诊断已定位到具体函数，并需要临时切换槽位时使用。"
        steps={[
          "在右侧选中目标函数，左侧会自动回填当前逻辑 tier。",
          "只调整高层或低层，点“保存路由”。",
          "触发一次该功能调用，观察最近一次执行是否出现低层升级到高层。",
        ]}
        outputs={[
          "函数级 tier override",
          "命中规则与最近执行结果",
        ]}
      />

      <div className="grid gap-6 xl:grid-cols-[360px,1fr]">
        <Card className="border-slate-200/80 bg-white/90 shadow-sm backdrop-blur-sm dark:border-slate-800 dark:bg-slate-900/85">
          <CardHeader>
            <CardTitle className="text-base">编辑器</CardTitle>
            <CardDescription>选择函数并更新逻辑 tier。</CardDescription>
          </CardHeader>
          <CardContent className="space-y-3">
            <Input
              value={selectedFunction}
              onChange={(e) => setSelectedFunction(e.target.value.trim())}
              placeholder="function_name"
            />
            <p className="text-xs text-slate-500 dark:text-slate-400">{getFunctionUsageHint(selectedFunction)}</p>
            <select
              value={tierAlias}
              onChange={(e) => setTierAlias(e.target.value as (typeof TIER_OPTIONS)[number])}
              className="h-10 rounded-md border border-input bg-background px-3 text-sm"
            >
              {TIER_OPTIONS.map((item) => (
                <option key={item} value={item}>
                  {toZhTierAlias(item)}
                </option>
              ))}
            </select>
            <div className="rounded-xl border border-slate-200/80 bg-slate-50/80 p-3 text-xs text-slate-600 dark:border-slate-800 dark:bg-slate-950/50 dark:text-slate-300">
              真实 provider / model 只存在于配置真源，不在调用视图直接展示。
            </div>
            <Button
              onClick={() => updateMutation.mutate()}
              disabled={updateMutation.isPending || !selectedFunction}
              className="w-full bg-blue-600 text-white hover:bg-blue-700"
            >
              {updateMutation.isPending ? "保存中..." : "保存路由"}
            </Button>
            {updateMutation.isError ? (
              <p className="text-xs text-rose-600 dark:text-rose-300">
                保存失败：{updateMutation.error instanceof Error ? updateMutation.error.message : "请重试"}
              </p>
            ) : null}
          </CardContent>
        </Card>

        <Card className="border-slate-200/80 bg-white/90 shadow-sm backdrop-blur-sm dark:border-slate-800 dark:bg-slate-900/85">
          <CardHeader>
            <CardTitle className="text-base">生效路由</CardTitle>
            <CardDescription>选中行即当前编辑目标。</CardDescription>
          </CardHeader>
          <CardContent>
            {routingQuery.isLoading ? (
              <p className="text-sm text-slate-500 dark:text-slate-400">加载中...</p>
            ) : routingQuery.isError ? (
              <div className="rounded-xl border border-rose-200/70 bg-rose-50/80 p-4 dark:border-rose-900/40 dark:bg-rose-950/30">
                <p className="text-sm font-medium text-rose-700 dark:text-rose-200">路由读取失败：{routingErrorText}</p>
                <Button
                  className="mt-3"
                  variant="outline"
                  size="sm"
                  onClick={() => void routingQuery.refetch()}
                  disabled={routingQuery.isFetching}
                >
                  {routingQuery.isFetching ? "重试中..." : "重试"}
                </Button>
              </div>
            ) : items.length === 0 ? (
              <p className="text-sm text-slate-500 dark:text-slate-400">暂无路由配置。</p>
            ) : (
              <div className="overflow-x-auto rounded-xl border border-slate-200/90 dark:border-slate-700">
                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead>函数</TableHead>
                      <TableHead>逻辑层</TableHead>
                      <TableHead>配置来源</TableHead>
                      <TableHead>规则</TableHead>
                      <TableHead>最近执行</TableHead>
                      <TableHead>升级</TableHead>
                      <TableHead className="text-right">操作</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {items.map((item) => (
                      <TableRow
                        key={item.function_name}
                        className={
                          item.function_name === selectedFunction
                            ? "bg-blue-50/80 dark:bg-blue-950/35"
                            : "hover:bg-slate-50/70 dark:hover:bg-slate-800/60"
                        }
                      >
                        <TableCell>
                          <div className="font-medium">{item.function_name}</div>
                          <div className="mt-1 text-xs text-slate-500 dark:text-slate-400">
                            {getFunctionUsageHint(item.function_name)}
                          </div>
                        </TableCell>
                        <TableCell>{toZhTierAlias(item.tier_alias)}</TableCell>
                        <TableCell>{toZhRoutingSource(item.source)}</TableCell>
                        <TableCell>
                          <div className="font-medium">{item.rule_name || "来自配置真源"}</div>
                          <div className="mt-1 text-xs text-slate-500 dark:text-slate-400">
                            {typeof item.rule_priority === "number" ? `priority ${item.rule_priority}` : "tier default"}
                          </div>
                        </TableCell>
                        <TableCell>
                          <div className="font-medium">{describeLastExecution(item)}</div>
                          <div className="mt-1 text-xs text-slate-500 dark:text-slate-400">
                            {item.last_execution?.created_at ? formatBeijingDateTime(item.last_execution.created_at) : "-"}
                          </div>
                        </TableCell>
                        <TableCell>{describeUpgrade(item)}</TableCell>
                        <TableCell className="text-right">
                          <Button size="sm" variant="outline" onClick={() => setSelectedFunction(item.function_name)}>
                            编辑
                          </Button>
                        </TableCell>
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>
              </div>
            )}
          </CardContent>
        </Card>
      </div>
    </div>
  );
}