import type { Metadata } from "next";
import { notFound } from "next/navigation";
import { PageHeader } from "@/components/page-header";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { HouseholdSettingsForm } from "@/features/households/components/household-settings-form";
import { SettingsMembers } from "@/features/households/components/settings-members";
import { getHouseholdDetail } from "@/features/households/service";
import { tr } from "@/i18n/tr";
import { requireActiveHousehold } from "@/lib/dal";

export const metadata: Metadata = { title: tr.settings.title };

export default async function SettingsPage() {
  const { user, household } = await requireActiveHousehold("viewer");
  const detail = await getHouseholdDetail(user.id, household.id);
  if (!detail) notFound();
  const isOwner = household.role === "owner";
  const t = tr.settings;

  return (
    <>
      <PageHeader title={t.title} description={t.description} />
      <div className="grid gap-4 lg:grid-cols-2 lg:items-start">
        <Card>
          <CardHeader>
            <CardTitle>{t.household}</CardTitle>
            <CardDescription>{isOwner ? t.householdDescription : t.ownerOnly}</CardDescription>
          </CardHeader>
          <CardContent>
            <HouseholdSettingsForm settings={detail.settings} canEdit={isOwner} />
          </CardContent>
        </Card>
        <Card>
          <CardHeader>
            <CardTitle>{t.members}</CardTitle>
            <CardDescription>{t.membersDescription}</CardDescription>
          </CardHeader>
          <CardContent>
            <SettingsMembers
              members={detail.members}
              householdName={detail.name}
              currentUserId={user.id}
              canManage={isOwner}
            />
          </CardContent>
        </Card>
      </div>
    </>
  );
}