/** 创始人端 OKR 对齐视图 — 查看公司 OKR 与投资人期望的对齐情况。 */

"use client";

import { Target, CheckCircle2, Circle, AlertTriangle } from "lucide-react";

/** OKR 数据。 */
interface OKR {
  objective: string;
  keyResults: { title: string; progress: number; aligned: boolean }[];
}

/** OKR 对齐视图页面。 */
export default function OKRAlignPage() {
  const okrs: OKR[] = [
    {
      objective: "加速 AI 商业化落地",
      keyResults: [
        { title: "完成 3 个 PoC 签约", progress: 67, aligned: true },
        { title: "AI 产品月营收达 100 万", progress: 45, aligned: true },
        { title: "客户满意度 NPS > 50", progress: 80, aligned: false },
      ],
    },
    {
      objective: "提升组织效能",
      keyResults: [
        { title: "核心团队扩招 5 人", progress: 100, aligned: true },
        { title: "建立 OKR 季度复盘机制", progress: 100, aligned: true },
        { title: "人均产出提升 20%", progress: 60, aligned: true },
      ],
    },
  ];

  return (
    <div className="space-y-6">
      <div className="flex items-center gap-2">
        <Target className="text-[var(--founder-primary)]" size={24} />
        <h1 className="text-2xl font-bold">OKR 对齐视图</h1>
      </div>

      {/* 对齐度摘要 */}
      <div className="rounded-xl border bg-white p-4 shadow-sm">
        <div className="flex items-center justify-between">
          <span className="text-sm text-muted-foreground">投资人期望对齐度</span>
          <span className="text-2xl font-bold text-emerald-600">85%</span>
        </div>
        <div className="mt-2 h-2 overflow-hidden rounded-full bg-gray-100">
          <div className="h-full rounded-full bg-emerald-500" style={{ width: "85%" }} />
        </div>
      </div>

      {/* OKR 列表 */}
      <div className="space-y-4">
        {okrs.map((okr, i) => (
          <div key={i} className="rounded-xl border bg-white p-4 shadow-sm">
            <h2 className="mb-3 font-medium">{okr.objective}</h2>
            <div className="space-y-2">
              {okr.keyResults.map((kr, j) => (
                <div key={j} className="flex items-center gap-2 text-sm">
                  {kr.progress >= 100 ? (
                    <CheckCircle2 className="text-emerald-500" size={16} aria-hidden="true" />
                  ) : (
                    <Circle className="text-gray-300" size={16} aria-hidden="true" />
                  )}
                  <span className="flex-1">{kr.title}</span>
                  {kr.aligned ? (
                    <span className="text-xs text-emerald-600">已对齐</span>
                  ) : (
                    <span className="flex items-center gap-0.5 text-xs text-amber-600">
                      <AlertTriangle size={10} aria-hidden="true" />
                      未对齐
                    </span>
                  )}
                  <span className="font-medium">{kr.progress}%</span>
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}