import { eq } from "drizzle-orm";
import { DetailBackLink } from "@/components/detail-back-link";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { db } from "@/lib/db";
import { getCurrentSession } from "@/lib/session";
import { householdMembers, users } from "@/modules/_core/schema";
import { renameHousehold } from "./actions";

export default async function HouseholdSettingsPage() {
  const { household, role } = await getCurrentSession();

  const members = await db
    .select({ user: users, role: householdMembers.role })
    .from(householdMembers)
    .innerJoin(users, eq(householdMembers.userId, users.id))
    .where(eq(householdMembers.householdId, household.id));

  return (
    <div className="container max-w-2xl py-8 space-y-6">
      <DetailBackLink href="/settings" label="Settings" />
      <h1 className="text-2xl font-semibold">Household Settings</h1>

      <Card>
        <CardHeader>
          <CardTitle>Members</CardTitle>
        </CardHeader>
        <CardContent>
          <ul className="space-y-2">
            {members.map(({ user, role: memberRole }) => (
              <li key={user.id} className="flex items-center justify-between">
                <span>{user.name ?? user.email}</span>
                <span className="text-sm text-muted-foreground capitalize">{memberRole}</span>
              </li>
            ))}
          </ul>
        </CardContent>
      </Card>

      {role === "owner" && (
        <Card>
          <CardHeader>
            <CardTitle>Rename Household</CardTitle>
          </CardHeader>
          <CardContent>
            <form action={renameHousehold} className="flex gap-2">
              <Input name="name" defaultValue={household.name} required />
              <Button type="submit">Save</Button>
            </form>
          </CardContent>
        </Card>
      )}
    </div>
  );
}