import { db } from "@/db";
import { households, bankAccounts, users } from "@/db/schema";
import { eq } from "drizzle-orm";
import { requireHousehold } from "@/lib/session";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { formatMoney } from "@/lib/utils";
import { archiveAccountAction, renameHouseholdAction, unarchiveAccountAction } from "./actions";

export default async function SettingsPage() {
  const { householdId } = await requireHousehold();
  const [hh] = await db.select().from(households).where(eq(households.id, householdId));
  const accts = await db.select().from(bankAccounts).where(eq(bankAccounts.householdId, householdId));
  const members = await db.select().from(users).where(eq(users.householdId, householdId));

  return (
    <div className="space-y-6 max-w-4xl mx-auto">
      <div>
        <h1 className="text-2xl font-bold tracking-tight">Settings</h1>
      </div>

      <Card>
        <CardHeader>
          <CardTitle>Household</CardTitle>
          <CardDescription>Shared between members of this household.</CardDescription>
        </CardHeader>
        <CardContent>
          <form action={renameHouseholdAction} className="flex gap-3 items-end">
            <div className="space-y-1.5 flex-1">
              <Label>Name</Label>
              <Input name="name" defaultValue={hh?.name} required />
            </div>
            <Button type="submit">Save</Button>
          </form>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle>Members</CardTitle>
          <CardDescription>{members.length} in this household</CardDescription>
        </CardHeader>
        <CardContent className="space-y-2">
          {members.map((m) => (
            <div key={m.id} className="flex items-center justify-between rounded-md border bg-card/40 px-4 py-3">
              <div>
                <div className="font-medium">{m.name ?? m.email}</div>
                <div className="text-xs text-muted-foreground">{m.email}</div>
              </div>
              <Badge variant={m.role === "owner" ? "default" : "secondary"} className="capitalize">{m.role}</Badge>
            </div>
          ))}
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle>Bank accounts</CardTitle>
          <CardDescription>Archive accounts you no longer use.</CardDescription>
        </CardHeader>
        <CardContent className="space-y-2">
          {accts.map((a) => (
            <div key={a.id} className="flex items-center justify-between rounded-md border bg-card/40 px-4 py-3">
              <div className="flex items-center gap-3">
                <div>
                  <div className="font-medium">{a.name} {a.isArchived ? <Badge variant="secondary">Archived</Badge> : null}</div>
                  <div className="text-xs text-muted-foreground capitalize">{a.type} · opened {a.openingDate}</div>
                </div>
              </div>
              <div className="flex items-center gap-3">
                <span className="font-mono tabular text-sm text-muted-foreground">opening: {formatMoney(a.openingBalanceMinor, a.currency)}</span>
                <form action={a.isArchived ? unarchiveAccountAction : archiveAccountAction}>
                  <input type="hidden" name="id" value={a.id} />
                  <Button type="submit" variant="ghost" size="sm">{a.isArchived ? "Restore" : "Archive"}</Button>
                </form>
              </div>
            </div>
          ))}
        </CardContent>
      </Card>
    </div>
  );
}
