import Link from "next/link";
import { notFound } from "next/navigation";

import { AdminPageHeader } from "@/components/admin/admin-ui";
import { FamilyManagementForm } from "@/components/admin/family-management-form";
import { getAdminFamily } from "@/lib/admin-data";

type FamilyPageProps = {
  params: Promise<{ id: string }>;
};

export default async function AdminFamilyPage({
  params,
}: FamilyPageProps) {
  const { id } = await params;

  // Added: load the requested parent and their privacy-safe child information.
  const family = await getAdminFamily(id);

  if (!family) {
    notFound();
  }

  return (
    <div className="flex h-full min-h-[42rem] flex-col">
      <AdminPageHeader
        eyebrow="Families"
        title="Manage family"
        description="Update parent contact details and review linked child profiles."
        action={
          <Link
            href="/admin/families"
            className="inline-flex items-center gap-2 rounded-xl bg-white/70 px-4 py-2 text-xs font-extrabold text-[#405760] ring-1 ring-[#adc0c8]/30 transition hover:bg-white"
          >
            <span className="material-symbols-outlined text-[18px]">
              arrow_back
            </span>
            Back to families
          </Link>
        }
      />

      <FamilyManagementForm family={family} />
    </div>
  );
}