/** AI+ 专项看板 — AI 商业化/模型成本/数据合规三维看板。 */

"use client";

import React from "react";
import { Cpu, DollarSign, ShieldCheck, TrendingUp, TrendingDown } from "lucide-react";

/** AI+ 专项看板页面。 */
export default class AIPlusDashboardPage extends React.Component {
  render() {
    const metrics = [
      {
        category: "AI 商业化",
        icon: Cpu,
        color: "text-indigo-600",
        items: [
          { label: "PoC 数量", value: "3", trend: "up", trendValue: "+1" },
          { label: "转化率", value: "45%", trend: "up", trendValue: "+8%" },
          { label: "AI 月营收", value: "80万", trend: "up", trendValue: "+20%" },
          { label: "客户满意度", value: "NPS 52", trend: "stable", trendValue: "持平" },
        ],
      },
      {
        category: "模型成本",
        icon: DollarSign,
        color: "text-amber-600",
        items: [
          { label: "月推理成本", value: "12万", trend: "down", trendValue: "-8%" },
          { label: "单次调用成本", value: "0.03元", trend: "down", trendValue: "-15%" },
          { label: "毛利率", value: "58%", trend: "up", trendValue: "+3%" },
          { label: "成本/营收比", value: "15%", trend: "down", trendValue: "-2%" },
        ],
      },
      {
        category: "数据合规",
        icon: ShieldCheck,
        color: "text-emerald-600",
        items: [
          { label: "合规评分", value: "92", trend: "up", trendValue: "+5" },
          { label: "数据泄露事件", value: "0", trend: "stable", trendValue: "无" },
          { label: "审计通过率", value: "100%", trend: "stable", trendValue: "持平" },
          { label: "整改项", value: "2", trend: "down", trendValue: "-3" },
        ],
      },
    ];

    return (
      <div className="space-y-6">
        <div className="flex items-center gap-2">
          <Cpu className="text-[var(--investor-primary)]" size={24} />
          <h1 className="text-2xl font-bold">AI+ 专项看板</h1>
        </div>

        {/* 三维看板 */}
        <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
          {metrics.map((section) => (
            <div key={section.category} className="rounded-lg border bg-white p-4 shadow-sm">
              <div className="mb-3 flex items-center gap-2">
                <section.icon className={section.color} size={18} aria-hidden="true" />
                <h2 className="font-medium">{section.category}</h2>
              </div>
              <div className="space-y-2">
                {section.items.map((item) => (
                  <div key={item.label} className="flex items-center justify-between text-sm">
                    <span className="text-muted-foreground">{item.label}</span>
                    <div className="flex items-center gap-2">
                      <span className="font-medium">{item.value}</span>
                      <span className={`text-xs ${
                        item.trend === "up" ? "text-emerald-500" : item.trend === "down" ? "text-rose-500" : "text-gray-400"
                      }`}>
                        {item.trend === "up" && <TrendingUp size={10} className="inline" aria-hidden="true" />}
                        {item.trend === "down" && <TrendingDown size={10} className="inline" aria-hidden="true" />}
                        {item.trendValue}
                      </span>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>

        {/* AI Agent 监控 */}
        <div className="rounded-lg border bg-white p-4 shadow-sm">
          <h2 className="mb-3 font-medium">Agent 运行状态</h2>
          <div className="grid grid-cols-2 gap-3 md:grid-cols-4">
            {[
              { name: "报表分析", status: "运行中", calls: 156 },
              { name: "风险预警", status: "运行中", calls: 89 },
              { name: "数据校验", status: "运行中", calls: 234 },
              { name: "协同匹配", status: "空闲", calls: 12 },
            ].map((agent) => (
              <div key={agent.name} className="rounded-md border p-3 text-center">
                <div className="text-sm font-medium">{agent.name}</div>
                <div className={`mt-1 text-xs ${agent.status === "运行中" ? "text-emerald-600" : "text-gray-400"}`}>
                  {agent.status}
                </div>
                <div className="mt-1 text-xs text-muted-foreground">{agent.calls} 次调用</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    );
  }
}