"use client";

import { useState } from "react";
import { useScopeEffect } from "@/lib/company-scope";
import { CompanyNameTag } from "@/components/shared/CompanyNameTag";
import { listTalents } from "@/lib/api-v2";
import { PageContainer, Badge } from "@/components/shared/PageContainer";
import { LoadingSpinner } from "@/components/shared/LoadingSpinner";
import { EmptyState } from "@/components/shared/EmptyState";

/** 人才项。 */
interface Talent {
  company_id?: string;
  name: string;
  current_role: string;
  performance_rating?: string;
  potential_rating?: string;
  nine_box?: string;
  status: string;
}

export default function TalentsPage() {
  const [items, setItems] = useState<Talent[]>([]);
  const [isLoading, setIsLoading] = useState(true);

  useScopeEffect(() => {
    listTalents()
      .then((resp) => setItems((resp.data as Talent[]) ?? []))
      .catch(() => setItems([]))
      .finally(() => setIsLoading(false));
  });

  return (
    <PageContainer title="人才引力场" description="人才流动预测 + 主动推荐 + 9-Box 矩阵">
      {isLoading ? (
        <LoadingSpinner />
      ) : items.length === 0 ? (
        <EmptyState description="暂无人才数据" />
      ) : (
        <div className="overflow-x-auto rounded-lg border border-gray-200">
          <table className="min-w-full divide-y divide-gray-200 text-sm">
            <thead className="bg-gray-50">
              <tr>
                <th className="px-4 py-2 text-left font-medium text-gray-500">企业</th>
                <th className="px-4 py-2 text-left font-medium text-gray-500">姓名</th>
                <th className="px-4 py-2 text-left font-medium text-gray-500">当前职位</th>
                <th className="px-4 py-2 text-left font-medium text-gray-500">绩效</th>
                <th className="px-4 py-2 text-left font-medium text-gray-500">潜力</th>
                <th className="px-4 py-2 text-left font-medium text-gray-500">9-Box</th>
                <th className="px-4 py-2 text-left font-medium text-gray-500">状态</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-gray-100 bg-white">
              {items.map((item, i) => (
                <tr key={i}>
                  <td className="px-4 py-2"><CompanyNameTag companyId={item.company_id} /></td>
                  <td className="px-4 py-2 text-gray-900">{item.name}</td>
                  <td className="px-4 py-2 text-gray-600">{item.current_role}</td>
                  <td className="px-4 py-2 text-gray-600">{item.performance_rating ?? "-"}</td>
                  <td className="px-4 py-2 text-gray-600">{item.potential_rating ?? "-"}</td>
                  <td className="px-4 py-2"><Badge color="blue">{item.nine_box ?? "-"}</Badge></td>
                  <td className="px-4 py-2"><Badge color={item.status === "active" ? "green" : "gray"}>{item.status}</Badge></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
    </PageContainer>
  );
}