import type { Metadata } from "next";
import Link from "next/link";
import { headers } from "next/headers";
import { auth } from "@/lib/auth/server";
import { db, userNutritionGoals, eq } from "@epicure/db";
import { NutritionGoalsForm } from "@/components/nutrition/nutrition-goals-form";
import { getMessages } from "@/lib/i18n/server";
import { buttonVariants } from "@/components/ui/button";
import { cn } from "@/lib/utils";

export const metadata: Metadata = {};

export default async function NutritionPage() {
  const session = await auth.api.getSession({ headers: await headers() });
  if (!session) return null;
  const m = getMessages((session.user as { locale?: string }).locale);

  const goals = await db.query.userNutritionGoals.findFirst({
    where: eq(userNutritionGoals.userId, session.user.id),
  });

  return (
    <div className="space-y-8">
      <section className="rounded-xl border p-6 space-y-4">
        <div>
          <h2 className="font-semibold text-lg">{m.settings.nutritionGoals.title}</h2>
          <p className="text-sm text-muted-foreground mt-1">
            {m.settings.nutritionGoals.description}
          </p>
        </div>
        <NutritionGoalsForm
          initialGoals={
            goals
              ? {
                  caloriesKcal: goals.caloriesKcal,
                  proteinG: goals.proteinG,
                  carbsG: goals.carbsG,
                  fatG: goals.fatG,
                }
              : null
          }
        />
      </section>
      <section className="rounded-xl border p-6 space-y-3">
        <div>
          <h2 className="font-semibold text-lg">{m.nutritionDiary.title}</h2>
          <p className="text-sm text-muted-foreground mt-1">{m.nutritionDiary.subtitle}</p>
        </div>
        <Link href="/nutrition" className={cn(buttonVariants({ variant: "outline", size: "sm" }))}>
          {m.settings.nutritionGoals.viewDiaryCta}
        </Link>
      </section>
    </div>
  );
}