"use client";

import { useEffect, useState } from "react";
import { listFinancialData} from "@/lib/api-v2";
import { PageContainer,Badge, TableEmpty } from "@/components/shared/PageContainer";
import { LoadingSpinner } from "@/components/shared/LoadingSpinner";
import { EmptyState } from "@/components/shared/EmptyState";

/** 财务数据项。 */
interface FinancialData {
  period_year: number;
  period_month: number;
  statement_type: string;
  credibility_score: number;
  source: string;
}

/**
 * 投资人端 — 财务数据校验页面。
 */
export default function FinancialPage() {
  const [items, setItems] = useState<FinancialData[]>([]);
  const [isLoading, setIsLoading] = useState(true);
  const [companyId, setCompanyId] = useState("");

  useEffect(() => {
    if (!companyId) {
      // eslint-disable-next-line react-hooks/set-state-in-effect
      setIsLoading(false);
      return;
    }
    listFinancialData(companyId)
      .then((resp) => setItems((resp.data as FinancialData[]) ?? []))
      .catch(() => setItems([]))
      .finally(() => setIsLoading(false));
  }, [companyId]);

  return (
    <PageContainer title="财务数据校验" description="AI 交叉验证不同来源数据一致性，检测报表内部逻辑矛盾">
      <div className="flex items-center gap-2">
        <input
          type="text"
          placeholder="输入企业 ID"
          value={companyId}
          onChange={(e) => setCompanyId(e.target.value)}
          className="rounded-md border border-gray-300 px-3 py-1.5 text-sm"
        />
      </div>

      {isLoading ? (
        <LoadingSpinner />
      ) : !companyId ? (
        <EmptyState title="请输入企业 ID" description="输入企业 ID 后查看财务数据" />
      ) : (
        <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>
              </tr>
            </thead>
            <tbody className="divide-y divide-gray-100 bg-white">
              {items.length === 0 ? (
                <TableEmpty colSpan={4} />
              ) : (
                items.map((item, i) => (
                  <tr key={i}>
                    <td className="px-4 py-2 text-gray-900">
                      {item.period_year}-{String(item.period_month).padStart(2, "0")}
                    </td>
                    <td className="px-4 py-2 text-gray-600">{item.statement_type}</td>
                    <td className="px-4 py-2">
                      <Badge color={
                        item.credibility_score >= 80 ? "green" :
                        item.credibility_score >= 50 ? "amber" : "red"
                      }>
                        {item.credibility_score}
                      </Badge>
                    </td>
                    <td className="px-4 py-2 text-gray-500">{item.source}</td>
                  </tr>
                ))
              )}
            </tbody>
          </table>
        </div>
      )}
    </PageContainer>
  );
}