/** 经营驾驶舱页面 — 创始人端核心经营指标可视化。 */

"use client";

import { Gauge, TrendingUp, TrendingDown, Wallet, Users, Target, Cpu, AlertTriangle } from "lucide-react";

/** 经营驾驶舱页面。 */
export default function OperationsPage() {
  const kpis = [
    { label: "月营收", value: "800万", trend: "up", trendValue: "+15%", icon: Wallet, color: "text-emerald-600" },
    { label: "毛利率", value: "42%", trend: "up", trendValue: "+3%", icon: TrendingUp, color: "text-emerald-600" },
    { label: "客户数", value: "156", trend: "up", trendValue: "+12", icon: Users, color: "text-emerald-600" },
    { label: "Runway", value: "18 月", trend: "stable", trendValue: "持平", icon: Gauge, color: "text-blue-600" },
    { label: "OKR 进度", value: "68%", trend: "up", trendValue: "+8%", icon: Target, color: "text-indigo-600" },
    { label: "AI PoC", value: "3 个", trend: "up", trendValue: "+1", icon: Cpu, color: "text-indigo-600" },
  ];

  return (
    <div className="space-y-6">
      <div className="flex items-center gap-2">
        <Gauge className="text-[var(--founder-primary)]" size={24} />
        <h1 className="text-2xl font-bold">经营驾驶舱</h1>
      </div>

      {/* KPI 卡片网格 */}
      <div className="grid grid-cols-2 gap-4 md:grid-cols-3">
        {kpis.map((kpi) => (
          <div key={kpi.label} className="rounded-xl border bg-white p-4 shadow-sm">
            <div className="mb-2 flex items-center justify-between">
              <kpi.icon className={kpi.color} size={20} aria-hidden="true" />
              <span className={`text-xs ${kpi.trend === "up" ? "text-emerald-500" : kpi.trend === "down" ? "text-rose-500" : "text-gray-400"}`}>
                {kpi.trend === "up" && <TrendingUp size={10} className="inline" aria-hidden="true" />}
                {kpi.trend === "down" && <TrendingDown size={10} className="inline" aria-hidden="true" />}
                {kpi.trendValue}
              </span>
            </div>
            <div className="text-2xl font-bold">{kpi.value}</div>
            <div className="text-xs text-muted-foreground">{kpi.label}</div>
          </div>
        ))}
      </div>

      {/* 风险提示 */}
      <div className="rounded-xl border border-amber-200 bg-amber-50 p-4">
        <div className="mb-2 flex items-center gap-2">
          <AlertTriangle className="text-amber-500" size={18} aria-hidden="true" />
          <h2 className="font-medium text-amber-700">需要关注</h2>
        </div>
        <ul className="space-y-1.5 text-sm text-amber-800">
          <li>• 客户流失率连续 2 月上升，建议制定回访计划</li>
          <li>• 竞品发布类似产品，需加速差异化功能上线</li>
        </ul>
      </div>
    </div>
  );
}