import type { ComponentProps } from "react";
import { cookies } from "next/headers";
import { HomePageClient } from "@/components/HomePageClient";
import { getTodayLocal, formatDateLocal } from "@/lib/env";
import { apiFetch } from "@/lib/api";

type WeekData = ComponentProps<typeof HomePageClient>;

const WEEK_COOKIE = "tcWeek";

function getWeekStart(saved: string | undefined): string {
  if (saved && /^\d{4}-\d{2}-\d{2}$/.test(saved)) {
    const d = new Date(saved + "T00:00:00");
    if (!isNaN(d.getTime())) {
      d.setDate(d.getDate() - d.getDay());
      return formatDateLocal(d);
    }
  }
  const todayIso = getTodayLocal();
  const d = new Date(todayIso + "T00:00:00");
  d.setDate(d.getDate() - d.getDay());
  return formatDateLocal(d);
}

export default async function HomePage() {
  const saved = (await cookies()).get(WEEK_COOKIE)?.value;
  const weekStart = getWeekStart(saved);

  const data = await apiFetch<WeekData>(
    `/api/calendar/week?start=${weekStart}`,
    { revalidate: 120 },
  );

  if (!data) {
    return (
      <main style={{ minHeight: "100vh", display: "grid", placeItems: "center", padding: 24, background: "var(--color-bg)" }}>
        <div style={{ maxWidth: 480, textAlign: "center" }}>
          <h1 style={{ fontSize: "1.2rem", fontWeight: 700, color: "var(--color-text)", marginBottom: 12 }}>
            Calendar data is unavailable
          </h1>
          <p style={{ color: "var(--color-text-muted)", lineHeight: 1.6, fontSize: "0.9rem" }}>
            We could not reach the backend. Refresh in a moment.
          </p>
        </div>
      </main>
    );
  }

  return <HomePageClient {...data} />;
}