import { BlurFade } from "@/components/magicui/blur-fade";

const SERVER_API_URL = process.env.SERVER_API_URL || "http://backend:8080";

export default async function HomePage() {
  let healthText = "无法连接到后端服务";

  try {
    const res = await fetch(`${SERVER_API_URL}/api/health`, {
      cache: "no-store",
    });
    if (res.ok) {
      healthText = await res.text();
    } else {
      healthText = `后端异常: ${res.status}`;
    }
  } catch (err) {
    healthText = "后端连接失败";
  }

  return (
    <div className="flex min-h-screen flex-col items-center justify-center bg-gradient-to-br from-slate-50 to-slate-100 p-4">
      <BlurFade inView delay={0.1}>
        <h1 className="mb-4 text-center text-4xl font-extrabold tracking-tight text-slate-900">
          EvanPage
        </h1>
      </BlurFade>

      <BlurFade inView delay={0.2}>
        <p className="mb-8 max-w-md text-center text-lg text-slate-600">
          全栈基础框架
        </p>
      </BlurFade>

      <BlurFade inView delay={0.3}>
        <div className="rounded-2xl border bg-white/80 px-8 py-6 shadow-lg backdrop-blur">
          <p className="text-center text-sm font-medium text-slate-500">
            后端状态
          </p>
          <p className="mt-2 text-center text-xl font-semibold text-slate-800">
            {healthText}
          </p>
        </div>
      </BlurFade>

      <BlurFade inView delay={0.4}>
        <div className="mt-8 flex gap-4">
          <a
            href="/login"
            className="rounded-lg bg-slate-900 px-5 py-2.5 text-sm font-medium text-white hover:bg-slate-800"
          >
            登录
          </a>
          <a
            href="/register"
            className="rounded-lg border border-slate-300 bg-white px-5 py-2.5 text-sm font-medium text-slate-700 hover:bg-slate-50"
          >
            注册
          </a>
        </div>
      </BlurFade>
    </div>
  );
}