import type { LucideIcon } from "lucide-react";
import {
  ArrowRight,
  AlertTriangle,
  Bot,
  CheckCircle2,
  ChevronDown,
  CircleCheck,
  Cloud,
  FlaskConical,
  GitBranch,
  GitCommit,
  GitPullRequest,
  Loader2,
  MessageSquareText,
  RefreshCcw,
  ShieldAlert,
  TestTube2,
  X,
} from "lucide-react";
import type { ReactNode } from "react";
import { Button } from "@/components/ui/button";
import type {
  PMFlowReleaseGateEvidence,
  PMFlowReleaseValidationDecision,
  PMFlowReleaseValidationRun,
} from "@/api/pmflowOs";
import { usePMFlowOsStore } from "@/features/pmflow-os/store";
import { cn } from "@/lib/utils";

type StatusTone = "success" | "warning" | "danger" | "neutral" | "info";

const gateItems = [
  { label: "功能完整性", status: "通过", detail: "核心流程与功能验证完成", tone: "success" as const },
  { label: "性能基线", status: "通过", detail: "P95 响应时间 < 800ms", tone: "success" as const },
  { label: "安全扫描", status: "通过", detail: "无高危漏洞", tone: "success" as const },
  { label: "数据迁移", status: "通过", detail: "迁移脚本执行成功", tone: "success" as const },
  { label: "兼容性测试", status: "通过", detail: "主流浏览器验证通过", tone: "success" as const },
  { label: "可观测性", status: "通过", detail: "监控与告警已就绪", tone: "success" as const },
  { label: "回滚预案", status: "通过", detail: "回滚版本已准备", tone: "success" as const },
  { label: "文档与支持", status: "待完善", detail: "帮助文档需补充 2 篇", tone: "warning" as const },
];

const readinessMetrics = [
  { label: "质量", value: "94%", width: "w-[94%]" },
  { label: "可观测性", value: "92%", width: "w-[92%]" },
  { label: "稳定性", value: "90%", width: "w-[90%]" },
  { label: "缺陷度", value: "92%", width: "w-[92%]" },
];

const feedbackStats = [
  { label: "总反馈", value: "1,243", delta: "较上周 +18%" },
  { label: "正向反馈", value: "862", delta: "▲ 69%" },
  { label: "待处理", value: "214", delta: "▲ 17%" },
  { label: "负向反馈", value: "167", delta: "● 13%" },
];

const feedbackItems = [
  { name: "雁仪", source: "付费用户 · 5 分钟前", text: "希望支持上传更多类型的文档进行问答，目前仅支持 PDF 和 Word。", tag: "已处理", tone: "info" as const },
  { name: "阿聪", source: "免费用户 · 17 分钟前", text: "在长文本问答时，偶尔会出现答案截断的情况。", tag: "待处理", tone: "warning" as const },
  { name: "海峰", source: "企业用户 · 1 小时前", text: "新版的引用来源展示很有帮助，但任感提升 👍", tag: "已处理", tone: "info" as const },
];

const experiments = [
  { status: "进行中", title: "新手引导流程优化", goal: "提升新用户次日留存", metric: "次日留存率", version: "B", lift: "+12.4%", progress: "w-[62%]", remain: "3 天", tone: "success" as const },
  { status: "进行中", title: "定价页文案优化", goal: "提升付费转化率", metric: "付费转化率", version: "A", lift: "+6.1%", progress: "w-[48%]", remain: "5 天", tone: "success" as const },
  { status: "已完成", title: "推荐入口位置调整", goal: "提升功能使用率", metric: "功能点击率", version: "B vs A", lift: "+8.7%", progress: "w-full", remain: "采用版本 B", tone: "info" as const },
  { status: "草案", title: "周报订阅引导文案", goal: "提升周报订阅转化", metric: "订阅转化率", version: "-", lift: "预计开始", progress: "w-[0%]", remain: "2024-05-20", tone: "neutral" as const },
];

const riskItems = [
  {
    level: "高",
    title: "第三方模型服务波动",
    tag: "外部依赖",
    owner: "程晨",
    risk: "季度主线存在 5xx 波动",
    impact: "登录、问答生成",
    action: "已配置降级策略与超时重试",
    rollback: "切回 v1.1.8（保留）",
  },
  {
    level: "中",
    title: "向量检索召回率下降",
    tag: "模型效果",
    owner: "召回年长风",
    risk: "新版展开下滑明显",
    impact: "答案相关性",
    action: "已上线召回扩展实验",
    rollback: "切回旧召回策略",
  },
];

const funnelRows = [
  { label: "访问首页", value: "128,420", rate: "100%" },
  { label: "注册账号", value: "36,842", rate: "28.7%" },
  { label: "创建项目", value: "18,562", rate: "14.5%" },
  { label: "核心功能使用", value: "9,124", rate: "7.1%" },
  { label: "付费转化", value: "4,118", rate: "3.2%" },
];

const keyMetrics = [
  { label: "新增用户", value: "12,842", delta: "▲ 18%", path: "M2 16 L12 10 L22 12 L32 6 L42 9 L52 5 L62 8 L72 6" },
  { label: "付费转化率", value: "3.21%", delta: "▲ 0.42pp", path: "M2 14 L12 13 L22 16 L32 8 L42 11 L52 5 L62 14 L72 7" },
  { label: "ARPU", value: "¥98.6", delta: "▲ 6%", path: "M2 15 L12 11 L22 14 L32 12 L42 8 L52 10 L62 6 L72 5" },
  { label: "留存率（次日）", value: "48.7%", delta: "▲ 3.6pp", path: "M2 12 L12 14 L22 9 L32 10 L42 7 L52 12 L62 5 L72 9" },
  { label: "NPS", value: "62", delta: "▲ 5", path: "M2 16 L12 12 L22 13 L32 9 L42 11 L52 7 L62 10 L72 4" },
];

const aiActions = [
  { title: "优先处理", focus: "长文本截断", suffix: "问题" },
  { title: "扩展", focus: "新手引导", suffix: "实验至企业用户" },
  { title: "监控", focus: "第三方模型服务", suffix: "稳定性" },
  { title: "发布下一版迭代计划", focus: "", suffix: "预计 5 月 20 日" },
];

const nextSuggestions = [
  { title: "迭代优先级建议", body: "基于负向反馈，建议优先优化长文本截断问题，预计影响 13% 的活跃用户。", action: "查看建议详情" },
  { title: "实验推荐", body: "建议对「上传更多文档类型」进行需求验证实验，预估提升付费转化 +4~7%。", action: "创建实验" },
  { title: "增长机会", body: "新手引导流程优化效果良好，建议扩展至企业用户引导，目标提升次留 +10%。", action: "查看方案" },
  { title: "风险关注", body: "模型服务波动风险仍在，建议持续监控并保留回滚策略，保障稳定性。", action: "查看风险方案" },
];

function Card({ children, className }: { children: ReactNode; className?: string }) {
  return <section className={cn("rounded-[14px] border border-[#e5edf8] bg-white shadow-[0_10px_24px_rgba(15,23,42,0.035)]", className)}>{children}</section>;
}

function StatusChip({ label, tone = "neutral" }: { label: string; tone?: StatusTone }) {
  const toneClass: Record<StatusTone, string> = {
    success: "border-emerald-100 bg-emerald-50 text-emerald-600",
    warning: "border-orange-100 bg-orange-50 text-orange-500",
    danger: "border-red-100 bg-red-50 text-red-500",
    neutral: "border-slate-100 bg-slate-50 text-slate-500",
    info: "border-blue-100 bg-blue-50 text-[#2463EB]",
  };
  return <span className={cn("rounded-md border px-2 py-0.5 text-[11px] font-semibold", toneClass[tone])}>{label}</span>;
}

function SectionTitle({ icon: Icon, title, meta, action }: { icon?: LucideIcon; title: string; meta?: string; action?: string }) {
  return (
    <div className="flex items-center justify-between gap-3">
      <div className="flex items-center gap-2">
        {Icon ? <Icon className="h-4 w-4 text-[#2463EB]" /> : null}
        <h2 className="text-[16px] font-semibold text-slate-950">{title}</h2>
        {meta ? <span className="text-xs text-slate-400">{meta}</span> : null}
      </div>
      {action ? <button className="text-xs font-semibold text-[#2463EB]">{action}</button> : null}
    </div>
  );
}

function ProgressLine({ label, value, width }: { label: string; value: string; width: string }) {
  return (
    <div>
      <div className="flex items-center justify-between text-xs text-slate-500">
        <span>{label}</span>
        <span className="font-semibold">{value}</span>
      </div>
      <div className="mt-2 h-1.5 rounded-full bg-[#eef3fb]">
        <div className={cn("h-1.5 rounded-full bg-[#2463EB]", width)} />
      </div>
    </div>
  );
}

function MiniSpark({ path }: { path: string }) {
  return (
    <svg viewBox="0 0 74 20" className="h-6 w-20 text-[#2463EB]" aria-hidden="true">
      <path d={path} fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

function ReadinessRing() {
  return (
    <div className="relative flex h-40 w-40 items-center justify-center">
      <svg viewBox="0 0 120 120" className="h-40 w-40 -rotate-90" aria-hidden="true">
        <circle cx="60" cy="60" r="45" fill="none" stroke="#edf3fb" strokeWidth="10" />
        <circle cx="60" cy="60" r="45" fill="none" stroke="#2463EB" strokeWidth="10" strokeLinecap="round" strokeDasharray="92 100" pathLength="100" />
      </svg>
      <div className="absolute text-center">
        <div className="text-4xl font-semibold tracking-[-0.06em] text-slate-950">92%</div>
        <div className="mt-1 text-sm font-medium text-slate-500">准备就绪</div>
      </div>
    </div>
  );
}

function FunnelChart() {
  return (
    <div className="flex items-center gap-5">
      <svg viewBox="0 0 220 150" className="h-36 flex-1 text-[#2463EB]" aria-hidden="true">
        <polygon points="12,10 208,10 176,38 44,38" fill="#2463EB" />
        <polygon points="44,42 176,42 154,68 66,68" fill="#3a8bff" />
        <polygon points="66,72 154,72 135,98 85,98" fill="#6ab6ff" />
        <polygon points="85,102 135,102 119,128 101,128" fill="#a4d7ff" />
      </svg>
      <div className="w-44 space-y-2">
        {funnelRows.map((item) => (
          <div key={item.label} className="grid grid-cols-[1fr_auto_auto] gap-3 text-xs">
            <span className="text-slate-500">{item.label}</span>
            <span className="font-medium text-slate-600">{item.value}</span>
            <span className="text-slate-400">{item.rate}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function RevenueChart() {
  return (
    <svg viewBox="0 0 430 140" className="mt-3 h-36 w-full" aria-hidden="true">
      <g stroke="#eef3fb" strokeWidth="1">
        <line x1="32" y1="20" x2="408" y2="20" />
        <line x1="32" y1="60" x2="408" y2="60" />
        <line x1="32" y1="100" x2="408" y2="100" />
      </g>
      <g fill="#bfdbfe">
        <rect x="58" y="88" width="18" height="28" rx="3" />
        <rect x="104" y="78" width="18" height="38" rx="3" />
        <rect x="150" y="68" width="18" height="48" rx="3" />
        <rect x="196" y="58" width="18" height="58" rx="3" />
        <rect x="242" y="64" width="18" height="52" rx="3" />
        <rect x="288" y="49" width="18" height="67" rx="3" />
        <rect x="334" y="32" width="18" height="84" rx="3" />
      </g>
      <path d="M48 95 C72 88 88 81 112 76 S158 63 186 58 S232 67 260 58 S302 40 326 34 S370 28 402 18" fill="none" stroke="#2463EB" strokeWidth="4" strokeLinecap="round" />
      <g fill="#fff" stroke="#2463EB" strokeWidth="3">
        <circle cx="48" cy="95" r="4" />
        <circle cx="112" cy="76" r="4" />
        <circle cx="186" cy="58" r="4" />
        <circle cx="260" cy="58" r="4" />
        <circle cx="326" cy="34" r="4" />
        <circle cx="402" cy="18" r="4" />
      </g>
    </svg>
  );
}

function AiCopilot() {
  return (
    <aside className="rounded-[18px] border border-[#e5edf8] bg-white p-5 shadow-[0_10px_24px_rgba(15,23,42,0.035)]">
      <div className="flex items-center justify-between">
        <h2 className="text-xl font-semibold text-slate-950">AI 副驾</h2>
        <button className="rounded-full p-1 text-slate-400 hover:bg-slate-50">
          <X className="h-4 w-4" />
        </button>
      </div>
      <div className="mt-6 grid grid-cols-3 border-b border-[#e8eef8] text-center text-sm font-semibold text-slate-500">
        {["问", "做", "审"].map((tab) => (
          <button key={tab} className={cn("pb-3", tab === "问" && "border-b-2 border-[#2463EB] text-[#2463EB]")}>
            {tab}
          </button>
        ))}
      </div>

      <div className="mt-5 space-y-5">
        <div>
          <div className="mb-2 text-sm font-semibold text-slate-500">当前上下文</div>
          <div className="rounded-xl border border-[#e8eef8] bg-[#fbfdff] p-4 text-sm">
            {[
              ["项目", "AI 智能问答产品"],
              ["阶段", "发布"],
              ["版本", "v1.2.0"],
              ["时间", "2024-05-12 ~ 近 7 天"],
            ].map(([label, value]) => (
              <div key={label} className="grid grid-cols-[48px_1fr] py-1.5">
                <span className="text-slate-400">{label}</span>
                <span className="font-medium text-slate-600">{value}</span>
              </div>
            ))}
          </div>
        </div>

        <div>
          <div className="mb-2 text-sm font-semibold text-slate-500">你可以问我</div>
          <div className="space-y-2">
            {["本次发布的整体表现如何？", "负向反馈的主要原因是什么？", "哪些实验效果最好？下一步做什么？", "收入趋势是否健康？", "有哪些潜在风险需要关注？"].map((item) => (
              <button key={item} className="flex w-full items-center gap-3 rounded-xl border border-[#e8eef8] bg-white px-3 py-3 text-left text-sm text-slate-600 hover:border-[#bfd2ff] hover:text-[#2463EB]">
                <MessageSquareText className="h-4 w-4 text-[#2463EB]" />
                <span>{item}</span>
              </button>
            ))}
          </div>
        </div>

        <div>
          <div className="mb-2 text-sm font-semibold text-slate-500">洞察与解释</div>
          <div className="rounded-xl border border-[#e8eef8] bg-[#fbfdff] p-4 text-sm leading-7 text-slate-600">
            本次发布整体表现良好，付费转化率环比提升 0.42pp，新手引导实验带来显著的次日留存提升。主要风险来自第三方模型服务波动，建议持续监控并保留降级策略。
          </div>
        </div>

        <div>
          <div className="mb-2 text-sm font-semibold text-slate-500">推荐动作</div>
          <div className="rounded-xl border border-[#e8eef8]">
            {aiActions.map((item) => (
              <button key={item.title} className="flex w-full items-center gap-2 border-b border-[#edf2f9] px-3 py-3 text-left text-sm last:border-b-0">
                <CircleCheck className="h-4 w-4 shrink-0 text-[#2463EB]" />
                <span className="text-slate-600">{item.title}</span>
                {item.focus ? <span className="font-semibold text-[#2463EB]">{item.focus}</span> : null}
                <span className="text-slate-600">{item.suffix}</span>
              </button>
            ))}
            <div className="p-3">
              <Button variant="outline" className="h-10 w-full rounded-xl border-[#dbe6ff] text-[#2463EB]">
                创建迭代计划
              </Button>
            </div>
          </div>
        </div>

        <div className="rounded-xl border border-[#e8eef8] bg-white p-3">
          <div className="flex items-center gap-2">
            <input className="h-10 min-w-0 flex-1 bg-transparent text-sm outline-none placeholder:text-slate-400" placeholder="问任何关于发布与增长的问题..." />
            <button className="flex h-10 w-10 items-center justify-center rounded-full bg-[#2463EB] text-white">
              <ArrowRight className="h-5 w-5" />
            </button>
          </div>
        </div>
        <button className="w-full text-sm font-semibold text-[#2463EB]">查看全部对话历史</button>
      </div>
    </aside>
  );
}

type PMFlowOsStoreSnapshot = ReturnType<typeof usePMFlowOsStore>;

function gateTone(status?: string): StatusTone {
  if (status === "ready") return "success";
  if (status === "blocked") return "danger";
  if (status === "needs_confirmation") return "warning";
  return "neutral";
}

function gateLabel(status?: string) {
  if (status === "ready") return "可发布";
  if (status === "blocked") return "阻塞";
  if (status === "needs_confirmation") return "需要人工确认";
  return "缺少执行证据";
}

function validationRunLabel(status?: string) {
  if (status === "ready") return "发布候选";
  if (status === "blocked") return "保持阻塞";
  if (status === "needs_confirmation") return "需要确认";
  return "未记录";
}

function validationSummaryText(run?: PMFlowReleaseValidationRun | null) {
  if (!run) return "尚未创建 release validation run。";
  const summary = run.validationSummary || {};
  const sourceStatus = typeof summary.releaseGateStatus === "string" ? summary.releaseGateStatus : run.status;
  return `基于 ${sourceStatus} release gate 固化，部署执行：${summary.deploymentExecuted ? "已执行" : "未执行"}`;
}

function checkTone(status?: string): StatusTone {
  if (status === "passed") return "success";
  if (status === "failed") return "danger";
  return "warning";
}

function evidenceIcon(type: string) {
  if (type.includes("branch")) return GitBranch;
  if (type.includes("commit")) return GitCommit;
  if (type.includes("pr") || type.includes("merged")) return GitPullRequest;
  if (type.includes("test") || type.includes("check")) return TestTube2;
  if (type.includes("fail") || type.includes("block")) return AlertTriangle;
  return CheckCircle2;
}

function EvidenceRow({ item }: { item: PMFlowReleaseGateEvidence }) {
  const Icon = evidenceIcon(item.type);
  return (
    <div className="grid gap-3 rounded-lg border border-[#e6edf7] bg-white p-4 md:grid-cols-[32px_minmax(0,1fr)_auto]">
      <span className="flex h-8 w-8 items-center justify-center rounded-lg bg-[#eef4ff] text-[#2463EB]">
        <Icon className="h-4 w-4" />
      </span>
      <div className="min-w-0">
        <div className="flex flex-wrap items-center gap-2">
          <StatusChip label={item.type} tone={item.type.includes("fail") || item.type.includes("block") ? "danger" : "info"} />
          {item.taskTitle ? <span className="text-sm font-semibold text-slate-800">{item.taskTitle}</span> : null}
        </div>
        <p className="mt-2 text-sm leading-6 text-slate-600">{item.summary}</p>
        <div className="mt-2 flex flex-wrap gap-2 text-xs text-slate-400">
          {item.repo ? <span>{item.repo}</span> : null}
          {item.branchName ? <span>branch {item.branchName}</span> : null}
          {item.commitSha ? <span>commit {item.commitSha.slice(0, 12)}</span> : null}
          {item.prNumber ? <span>PR #{item.prNumber}</span> : null}
        </div>
      </div>
      <div className="text-xs text-slate-400">{item.occurredAt ? new Date(item.occurredAt).toLocaleString("zh-CN") : "未记录时间"}</div>
    </div>
  );
}

function RealReleaseGrowthPage({ store }: { store: PMFlowOsStoreSnapshot }) {
  const {
    state,
    dataSourceMode,
    dataSourceStatus,
    dataSourceError,
    executionSummary,
    executionSummaryStatus,
    executionSummaryError,
    projectionWarnings,
    refetchExecutionSummary,
    createReleaseValidationRun,
  } = store;
  const gate = executionSummary?.releaseGate;
  const latestValidationRun = gate?.latestValidationRun;
  const isLoading = dataSourceStatus === "loading" || executionSummaryStatus === "loading";
  const warnings = [...projectionWarnings, ...(executionSummary?.warnings || [])];
  const emptyMode = dataSourceMode === "empty" || gate?.status === "empty" || !gate;
  const canCreateValidationRun = Boolean(!emptyMode && gate?.evidence?.length);
  const handleCreateValidationRun = (decision: PMFlowReleaseValidationDecision) => {
    const decisionLabel = decision === "enter_release_candidate" ? "进入发布候选" : "保持阻塞";
    createReleaseValidationRun({
      decision,
      note: `ReleaseGrowthPage 人工确认：${decisionLabel}；PMFlow 仅记录发布前验证，不执行部署。`,
    });
  };

  return (
    <div className="min-h-full bg-[#f7faff] text-slate-950">
      <div className="mx-auto flex w-full max-w-[1180px] flex-col gap-5 px-4 py-5 md:px-6 lg:px-8">
        <Card className="p-5">
          <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
            <div>
              <div className="text-xs font-semibold uppercase tracking-[0.18em] text-[#2463EB]">Release Gate</div>
              <h1 className="mt-2 text-2xl font-semibold text-slate-950">发布 / 增长判断</h1>
              <p className="mt-2 max-w-3xl text-sm leading-6 text-slate-500">
                本页只读取 Execution Bridge 回写的 branch、commit、PR、test、failed 证据生成发布判断；PMFlow 不在这里执行发布命令。
              </p>
            </div>
            <Button variant="outline" className="h-10 rounded-lg border-[#dbe6ff] text-[#2463EB]" onClick={refetchExecutionSummary}>
              {isLoading ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : <RefreshCcw className="mr-2 h-4 w-4" />}
              刷新执行证据
            </Button>
          </div>
        </Card>

        {dataSourceError || executionSummaryError ? (
          <Card className="border-rose-100 bg-rose-50 p-4">
            <div className="flex gap-3 text-sm text-rose-700">
              <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0" />
              <span>{dataSourceError || executionSummaryError}</span>
            </div>
          </Card>
        ) : null}

        <div className="grid gap-5 lg:grid-cols-[minmax(0,1fr)_360px]">
          <main className="space-y-5">
            <Card className={cn("p-5", gate?.status === "blocked" && "border-rose-200 bg-rose-50", gate?.status === "ready" && "border-emerald-200 bg-emerald-50")}>
              <div className="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
                <div>
                  <StatusChip label={gateLabel(gate?.status)} tone={gateTone(gate?.status)} />
                  <h2 className="mt-4 text-2xl font-semibold text-slate-950">{gate?.title || "缺少执行证据"}</h2>
                  <p className="mt-2 text-sm leading-6 text-slate-600">
                    {gate?.summary || "URL 缺少 projectId 或后端尚未返回 execution-summary，无法生成发布判断。"}
                  </p>
                </div>
                <div className="rounded-lg border border-white/70 bg-white/80 px-4 py-3 text-sm">
                  <div className="text-xs text-slate-400">当前项目</div>
                  <div className="mt-1 font-semibold text-slate-900">{state.project.name}</div>
                  <div className="mt-3 text-xs text-slate-400">执行状态</div>
                  <div className="mt-1 font-semibold text-slate-700">{executionSummary?.execution.status || state.execution.status}</div>
                </div>
              </div>
            </Card>

            {emptyMode ? (
              <Card className="border-orange-100 bg-orange-50 p-5">
                <div className="flex gap-3">
                  <ShieldAlert className="mt-1 h-5 w-5 shrink-0 text-orange-500" />
                  <div>
                    <h2 className="text-lg font-semibold text-slate-950">没有可用于发布判断的执行证据</h2>
                    <p className="mt-2 text-sm leading-6 text-slate-600">
                      需要先从执行桥回写 branch、commit、PR、test 或 failed 事件。当前页面不会用 mock 发布结果补位。
                    </p>
                  </div>
                </div>
              </Card>
            ) : null}

            <Card className="p-5">
              <SectionTitle title="门禁检查" meta={gate?.updatedAt ? `更新于 ${new Date(gate.updatedAt).toLocaleString("zh-CN")}` : undefined} />
              <div className="mt-4 grid gap-3 md:grid-cols-2">
                {(gate?.checks || []).map((item) => (
                  <div key={item.key} className="rounded-lg border border-[#e6edf7] bg-white p-4">
                    <div className="flex items-center justify-between gap-3">
                      <div className="font-semibold text-slate-800">{item.label}</div>
                      <StatusChip label={item.status === "passed" ? "通过" : item.status === "failed" ? "失败" : "缺失"} tone={checkTone(item.status)} />
                    </div>
                    <div className="mt-2 text-sm leading-6 text-slate-500">{item.detail || "暂无对应证据"}</div>
                  </div>
                ))}
                {!gate?.checks?.length ? <div className="text-sm text-slate-500">暂无门禁检查项。</div> : null}
              </div>
            </Card>

            <Card className="p-5">
              <SectionTitle title="执行证据" meta={`${gate?.evidence?.length || 0} 条`} />
              <div className="mt-4 space-y-3">
                {(gate?.evidence || []).map((item) => (
                  <EvidenceRow key={`${item.id}-${item.type}`} item={item} />
                ))}
                {!gate?.evidence?.length ? <div className="rounded-lg border border-dashed border-[#d6e2f2] p-6 text-sm text-slate-500">暂无真实 execution evidence。</div> : null}
              </div>
            </Card>
          </main>

          <aside className="space-y-5">
            <Card className="p-5">
              <SectionTitle title="阻塞原因" icon={AlertTriangle} />
              <div className="mt-4 space-y-2">
                {(gate?.blockingReasons || []).map((item) => (
                  <div key={item} className="rounded-lg border border-rose-100 bg-rose-50 px-3 py-2 text-sm leading-6 text-rose-700">
                    {item}
                  </div>
                ))}
                {!gate?.blockingReasons?.length ? <div className="text-sm leading-6 text-slate-500">当前没有阻塞原因。</div> : null}
              </div>
            </Card>

            <Card className="p-5">
              <SectionTitle title="下一步动作" icon={CircleCheck} />
              <div className="mt-4 space-y-2">
                {(gate?.nextActions || ["先补充执行回写证据。"]).map((item) => (
                  <div key={item} className="rounded-lg border border-[#e6edf7] bg-[#fbfdff] px-3 py-2 text-sm leading-6 text-slate-600">
                    {item}
                  </div>
                ))}
              </div>
            </Card>

            <Card className="p-5">
              <SectionTitle title="发布验证记录" icon={ShieldAlert} />
              <div className="mt-4 rounded-lg border border-[#e6edf7] bg-[#fbfdff] p-4">
                <div className="flex items-center justify-between gap-3">
                  <div>
                    <StatusChip label={validationRunLabel(latestValidationRun?.status)} tone={gateTone(latestValidationRun?.status)} />
                    <p className="mt-3 text-sm leading-6 text-slate-600">{validationSummaryText(latestValidationRun)}</p>
                  </div>
                  {latestValidationRun?.createdAt ? (
                    <div className="shrink-0 text-xs text-slate-400">
                      {new Date(latestValidationRun.createdAt).toLocaleString("zh-CN")}
                    </div>
                  ) : null}
                </div>
                <div className="mt-4 text-xs leading-5 text-slate-500">
                  记录会固化当前 evidence、阻塞原因、下一步动作和人工确认结果；这里不会触发真实部署。
                </div>
              </div>
              <div className="mt-4 grid gap-2">
                {gate?.status === "blocked" ? (
                  <Button
                    className="h-10 rounded-lg bg-[#2463EB] text-white hover:bg-[#1f57d1]"
                    disabled={!canCreateValidationRun || isLoading}
                    onClick={() => handleCreateValidationRun("keep_blocked")}
                  >
                    记录保持阻塞
                  </Button>
                ) : (
                  <>
                    <Button
                      className="h-10 rounded-lg bg-[#2463EB] text-white hover:bg-[#1f57d1]"
                      disabled={!canCreateValidationRun || isLoading}
                      onClick={() => handleCreateValidationRun("enter_release_candidate")}
                    >
                      生成发布验证记录
                    </Button>
                    <Button
                      variant="outline"
                      className="h-10 rounded-lg border-[#dbe6ff] text-[#2463EB]"
                      disabled={!canCreateValidationRun || isLoading}
                      onClick={() => handleCreateValidationRun("keep_blocked")}
                    >
                      人工保持阻塞
                    </Button>
                  </>
                )}
                {!canCreateValidationRun ? (
                  <div className="rounded-lg border border-orange-100 bg-orange-50 px-3 py-2 text-xs leading-5 text-orange-700">
                    缺少真实执行证据，不能创建成功的发布验证记录。
                  </div>
                ) : null}
              </div>
            </Card>

            <Card className="p-5">
              <SectionTitle title="运行警告" />
              <div className="mt-4 space-y-2">
                {warnings.length ? (
                  warnings.map((item) => (
                    <div key={item} className="rounded-lg border border-orange-100 bg-orange-50 px-3 py-2 text-xs leading-5 text-orange-700">
                      {item}
                    </div>
                  ))
                ) : (
                  <div className="text-sm leading-6 text-slate-500">暂无 projection warning。</div>
                )}
              </div>
            </Card>
          </aside>
        </div>
      </div>
    </div>
  );
}

export default function ReleaseGrowthPage() {
  const store = usePMFlowOsStore();
  if (store.dataSourceMode !== "demo") {
    return <RealReleaseGrowthPage store={store} />;
  }

  return (
    <div className="min-h-full bg-[#f7faff] text-slate-950">
      <div className="grid gap-5 min-[1440px]:grid-cols-[minmax(0,1fr)_360px]">
        <main className="min-w-0 space-y-4">
          <Card className="overflow-hidden p-3">
            <div className="flex min-w-0 items-center gap-3">
              <div className="w-32 shrink-0 border-r border-[#e5edf8] pr-3">
                <div className="text-xs font-medium text-slate-400">当前项目</div>
                <div className="mt-2 whitespace-nowrap text-base font-semibold text-slate-950">AI 智能问答产品</div>
              </div>
              <div className="w-16 shrink-0 border-r border-[#e5edf8] pr-3">
                <div className="text-xs font-medium text-slate-400">当前阶段</div>
                <div className="mt-2">
                  <StatusChip label="发布" tone="success" />
                </div>
              </div>
              <div className="w-28 shrink-0 border-r border-[#e5edf8] pr-3">
                <div className="text-xs font-medium text-slate-400">发布状态</div>
                <div className="mt-2 inline-flex whitespace-nowrap rounded-full border border-emerald-100 bg-emerald-50 px-3 py-1 text-sm font-semibold text-emerald-600">已发布 v1.2.0</div>
              </div>
              <div className="w-32 shrink-0 border-r border-[#e5edf8] pr-3">
                <div className="text-xs font-medium text-slate-400">发布时间</div>
                <div className="mt-2 whitespace-nowrap text-base font-semibold text-slate-700">2024-05-12 10:30</div>
              </div>
              <div className="w-16 shrink-0 border-r border-[#e5edf8] pr-3">
                <div className="text-xs font-medium text-slate-400">当前风险</div>
                <div className="mt-2 flex items-center gap-2 text-base font-semibold text-slate-700">
                  <span className="h-2.5 w-2.5 rounded-full bg-orange-400" />
                  中等
                </div>
              </div>
              <div className="grid w-64 shrink-0 grid-cols-3 gap-3 border-r border-[#e5edf8] pr-3">
                <div>
                  <div className="text-xs text-slate-400">新增用户</div>
                  <div className="mt-1 text-base font-semibold text-slate-700">12,842</div>
                </div>
                <div>
                  <div className="text-xs text-slate-400">付费转化率</div>
                  <div className="mt-1 text-base font-semibold text-slate-700">3.21%</div>
                </div>
                <div>
                  <div className="text-xs text-slate-400">月度经常性收入</div>
                  <div className="mt-1 text-base font-semibold text-slate-700">¥126,800</div>
                </div>
              </div>
              <div className="ml-auto flex shrink-0 items-center justify-end gap-2">
                <Button variant="outline" className="h-9 rounded-xl border-[#dbe6ff] bg-white px-3 text-sm">
                  <Cloud className="mr-2 h-4 w-4" />
                  发布记录
                </Button>
                <Button variant="outline" className="h-9 rounded-xl border-[#dbe6ff] bg-white px-3 text-sm">
                  <FlaskConical className="mr-2 h-4 w-4" />
                  添加实验
                  <ChevronDown className="ml-2 h-4 w-4" />
                </Button>
                <Button className="h-9 rounded-xl bg-[#2463EB] px-4 text-sm text-white hover:bg-[#1f57d1]">新建迭代计划</Button>
              </div>
            </div>
          </Card>

          <div className="grid gap-4 xl:grid-cols-[1fr_0.9fr_1fr]">
            <Card className="p-4">
              <SectionTitle title="发布门禁 / 发布检查清单" meta="● 通过 7/8" />
              <div className="mt-4 divide-y divide-[#edf2f9] rounded-xl border border-[#edf2f9]">
                {gateItems.map((item) => (
                  <div key={item.label} className="grid grid-cols-[1fr_66px_1.4fr] items-center gap-4 px-3 py-2.5 text-sm">
                    <div className="flex items-center gap-2 font-medium text-slate-700">
                      <CheckCircle2 className={cn("h-4 w-4", item.tone === "success" ? "text-emerald-500" : "text-orange-500")} />
                      {item.label}
                    </div>
                    <StatusChip label={item.status} tone={item.tone} />
                    <div className="truncate text-slate-500">{item.detail}</div>
                  </div>
                ))}
              </div>
              <button className="mt-4 w-full text-sm font-semibold text-[#2463EB]">查看详情</button>
            </Card>

            <Card className="p-5">
              <SectionTitle title="发布准备度" />
              <div className="mt-6 grid grid-cols-[180px_1fr] items-center gap-5">
                <ReadinessRing />
                <div className="space-y-4">
                  {readinessMetrics.map((item) => (
                    <ProgressLine key={item.label} {...item} />
                  ))}
                </div>
              </div>
              <button className="mt-6 w-full text-sm font-semibold text-[#2463EB]">准备度详情</button>
            </Card>

            <Card className="p-5">
              <SectionTitle title="已知风险与回滚提醒" meta="● 2 个高风险" />
              <div className="mt-4 space-y-3">
                {riskItems.map((item) => (
                  <div key={item.title} className="rounded-xl border border-[#edf2f9] bg-[#fbfdff] p-4">
                    <div className="flex items-center gap-2">
                      <span className={cn("h-2.5 w-2.5 rounded-full", item.level === "高" ? "bg-red-500" : "bg-orange-400")} />
                      <span className={cn("text-sm font-semibold", item.level === "高" ? "text-red-500" : "text-orange-500")}>{item.level}</span>
                      <span className="font-semibold text-slate-800">{item.title}</span>
                      <StatusChip label={item.tag} tone={item.level === "高" ? "danger" : "warning"} />
                    </div>
                    <div className="mt-3 grid gap-1 text-sm leading-6 text-slate-500">
                      <span>依赖的模型服务在高峰期存在 {item.risk}</span>
                      <span>影响范围：{item.impact}</span>
                      <span>应对方案：{item.action}</span>
                      <span>回滚方案：{item.rollback}</span>
                    </div>
                    <button className="mt-2 text-xs font-semibold text-[#2463EB]">{item.level === "高" ? "查看监控" : "查看详情"}</button>
                  </div>
                ))}
              </div>
              <button className="mt-3 w-full text-sm font-semibold text-[#2463EB]">风险中心</button>
            </Card>
          </div>

          <div className="grid gap-4 xl:grid-cols-[0.9fr_1.7fr]">
            <Card className="p-4">
              <SectionTitle title="用户反馈摘要" meta="近 7 天" />
              <div className="mt-4 grid grid-cols-4 gap-3 border-b border-[#edf2f9] pb-4">
                {feedbackStats.map((item) => (
                  <div key={item.label}>
                    <div className="text-xs text-slate-400">{item.label}</div>
                    <div className="mt-1 text-lg font-semibold text-slate-700">{item.value}</div>
                    <div className="mt-1 text-xs text-emerald-600">{item.delta}</div>
                  </div>
                ))}
              </div>
              <div className="mt-3 space-y-2">
                {feedbackItems.map((item, index) => (
                  <div key={item.text} className="grid grid-cols-[32px_1fr_auto] items-center gap-3 rounded-xl border border-[#edf2f9] bg-white p-3">
                    <div className={cn("flex h-8 w-8 items-center justify-center rounded-full text-xs font-semibold text-white", index === 0 ? "bg-orange-300" : index === 1 ? "bg-blue-300" : "bg-emerald-300")}>{item.name.slice(0, 1)}</div>
                    <div className="min-w-0">
                      <div className="truncate text-sm text-slate-600">{item.text}</div>
                      <div className="mt-1 text-xs text-slate-400">来自 {item.source}</div>
                    </div>
                    <StatusChip label={item.tag} tone={item.tone} />
                  </div>
                ))}
              </div>
              <button className="mt-4 w-full text-sm font-semibold text-[#2463EB]">查看全部反馈</button>
            </Card>

            <Card className="p-4">
              <SectionTitle title="增长实验" action="全部实验 →" />
              <div className="mt-4 grid gap-3 xl:grid-cols-4">
                {experiments.map((item) => (
                  <div key={item.title} className="rounded-xl border border-[#e8eef8] bg-[#fbfdff] p-4">
                    <StatusChip label={item.status} tone={item.tone} />
                    <div className="mt-3 text-sm font-semibold text-slate-800">{item.title}</div>
                    <div className="mt-3 space-y-2 text-xs leading-5 text-slate-500">
                      <div>实验目标</div>
                      <div className="font-medium text-slate-600">{item.goal}</div>
                      <div>关键指标：{item.metric}</div>
                      <div>当前版本：{item.version}</div>
                      <div className="text-emerald-600">提升效果 {item.lift}</div>
                    </div>
                    <div className="mt-4">
                      <div className="mb-1 flex items-center justify-between text-xs text-slate-400">
                        <span>运行进度</span>
                        <span>{item.remain}</span>
                      </div>
                      <div className="h-1.5 rounded-full bg-[#edf2f9]">
                        <div className={cn("h-1.5 rounded-full bg-[#2463EB]", item.progress)} />
                      </div>
                    </div>
                    {item.status === "已完成" ? (
                      <Button variant="outline" className="mt-4 h-9 w-full rounded-xl border-[#dbe6ff] text-[#2463EB]">
                        查看报告
                      </Button>
                    ) : null}
                    {item.status === "草案" ? <Button className="mt-4 h-9 w-full rounded-xl bg-[#2463EB] text-white hover:bg-[#1f57d1]">启动实验</Button> : null}
                  </div>
                ))}
              </div>
            </Card>
          </div>

          <div className="grid gap-4 xl:grid-cols-[0.9fr_1fr_0.75fr]">
            <Card className="p-4">
              <SectionTitle title="转化漏斗" meta="近 7 天" />
              <div className="mt-4">
                <FunnelChart />
              </div>
              <div className="mt-4 flex items-center justify-between rounded-lg border border-[#e8eef8] px-4 py-2 text-sm">
                <span className="font-medium text-slate-600">整体转化率</span>
                <span className="font-semibold text-[#2463EB]">3.2%</span>
              </div>
              <button className="mt-4 w-full text-sm font-semibold text-[#2463EB]">查看漏斗分析</button>
            </Card>

            <Card className="p-4">
              <div className="flex items-center justify-between">
                <SectionTitle title="收入信号趋势" />
                <button className="rounded-lg border border-[#e8eef8] px-3 py-1 text-xs text-slate-500">
                  近 7 天
                  <ChevronDown className="ml-1 inline h-3 w-3" />
                </button>
              </div>
              <div className="mt-3 flex items-center gap-4 text-xs text-slate-500">
                <span className="flex items-center gap-1">
                  <span className="h-2 w-2 rounded-full bg-[#2463EB]" />
                  收入（元）
                </span>
                <span className="flex items-center gap-1">
                  <span className="h-2 w-2 rounded-full bg-[#9cc7ff]" />
                  新增付费用户（人）
                </span>
              </div>
              <RevenueChart />
              <button className="w-full text-sm font-semibold text-[#2463EB]">查看收入分析</button>
            </Card>

            <Card className="p-4">
              <SectionTitle title="关键指标概览" meta="近 7 天" />
              <div className="mt-3 divide-y divide-[#edf2f9]">
                {keyMetrics.map((item) => (
                  <div key={item.label} className="grid grid-cols-[1fr_auto_auto] items-center gap-4 py-2.5 text-sm">
                    <span className="text-slate-500">{item.label}</span>
                    <span className="font-semibold text-slate-700">{item.value}</span>
                    <div className="flex items-center gap-3">
                      <span className="text-xs font-medium text-emerald-600">{item.delta}</span>
                      <MiniSpark path={item.path} />
                    </div>
                  </div>
                ))}
              </div>
              <button className="mt-2 w-full text-sm font-semibold text-[#2463EB]">进入指标中心</button>
            </Card>
          </div>

          <Card className="border-[#9dbbff] p-4 shadow-[0_0_0_1px_rgba(36,99,235,0.12)]">
            <div className="mb-3 flex items-center justify-between">
              <div className="flex items-center gap-3">
                <div className="flex h-9 w-9 items-center justify-center rounded-full bg-[#2463EB] text-white">
                  <Bot className="h-5 w-5" />
                </div>
                <h2 className="text-xl font-semibold text-slate-950">AI 下一步建议</h2>
              </div>
            </div>
            <div className="grid gap-3 xl:grid-cols-4">
              {nextSuggestions.map((item) => (
                <div key={item.title} className="rounded-xl border border-[#e8eef8] bg-white p-4">
                  <div className="text-sm font-semibold text-slate-800">{item.title}</div>
                  <p className="mt-2 min-h-16 text-sm leading-6 text-slate-500">{item.body}</p>
                  <Button variant="outline" className="mt-3 h-9 w-full rounded-xl border-[#dbe6ff] text-[#2463EB]">
                    {item.action}
                  </Button>
                </div>
              ))}
            </div>
            <div className="mt-3 flex items-center justify-end gap-2 text-xs text-slate-400">
              <span>以上建议由 AI 基于当前数据生成</span>
              <RefreshCcw className="h-3.5 w-3.5 text-[#2463EB]" />
              <button className="font-semibold text-[#2463EB]">刷新建议</button>
            </div>
          </Card>
        </main>

        <div className="hidden min-[1440px]:block">
          <AiCopilot />
        </div>
      </div>
    </div>
  );
}