"use client";

import { useEffect, useState } from "react";
import { apiGet } from "@/lib/api";
import type { Stock, FactorMeta } from "@/lib/types";

export default function DashboardPage() {
  const [stockCount, setStockCount] = useState<number | null>(null);
  const [factorCount, setFactorCount] = useState<number | null>(null);
  const [error, setError] = useState("");

  useEffect(() => {
    Promise.all([
      apiGet<Stock[]>("/stocks?limit=500"),
      apiGet<FactorMeta[]>("/factors"),
    ])
      .then(([stocks, factors]) => {
        setStockCount(stocks.length);
        setFactorCount(factors.length);
      })
      .catch((e: Error) => setError(e.message));
  }, []);

  return (
    <>
      <h1>总览</h1>
      {error && <div className="error">后端不可达：{error}</div>}
      <div className="stat-grid">
        <div className="stat">
          <div className="label">股票池</div>
          <div className="value">{stockCount ?? "—"}</div>
        </div>
        <div className="stat">
          <div className="label">内置因子</div>
          <div className="value">{factorCount ?? "—"}</div>
        </div>
      </div>
      <div className="card" style={{ marginTop: 16 }}>
        <h2>说明</h2>
        <div className="muted">
          个人 A 股量化研究平台（Phase 3 Web）。
          顶部导航进入「股票池 / 因子研究 / 回测」；研究基于本地 SQLite 行情
          （Tushare 同步，20 只权重股 2023–2024 日线），因子测试与回测均由后端
          Research Specification 驱动并返回标准化结果。
        </div>
      </div>
    </>
  );
}