import Link from "next/link";

const API_BASE = process.env.NEXT_PUBLIC_API_BASE ?? "http://localhost:8080";

async function fetchHealth() {
  try {
    const r = await fetch(`${API_BASE}/api/health`, { cache: "no-store" });
    if (!r.ok) return { ok: false, error: `HTTP ${r.status}` } as const;
    return (await r.json()) as { ok: boolean; version?: string };
  } catch (e: unknown) {
    return { ok: false, error: String(e) } as const;
  }
}

export default async function Home() {
  const health = await fetchHealth();

  return (
    <div className="min-h-screen bg-zinc-50 text-zinc-900">
      <main className="mx-auto max-w-3xl px-6 py-12">
        <h1 className="text-3xl font-semibold">CSP 在线练习平台（MVP）</h1>
        <p className="mt-2 text-sm text-zinc-600">
          API Base: <span className="font-mono">{API_BASE}</span>
        </p>

        <div className="mt-6 rounded-xl border bg-white p-5">
          <h2 className="text-lg font-medium">后端状态</h2>
          <pre className="mt-3 overflow-auto rounded-lg bg-zinc-900 p-3 text-xs text-zinc-100">
            {JSON.stringify(health, null, 2)}
          </pre>
        </div>

        <div className="mt-6 flex gap-3">
          <Link
            className="rounded-lg bg-zinc-900 px-4 py-2 text-white hover:bg-zinc-800"
            href="/auth"
          >
            注册 / 登录
          </Link>
        </div>

        <div className="mt-10 text-sm text-zinc-500">
          说明：当前前端仅用于验证注册/登录与基础连通性；题库/提交/比赛/判题会在后续迭代补齐。
        </div>
      </main>
    </div>
  );
}