import { db } from "@/db";
import { bankAccounts } 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 { addAccountAction, finishOnboardingAction } from "./actions";

export default async function OnboardingPage() {
  const { user, householdId } = await requireHousehold();

  const accounts = await db
    .select()
    .from(bankAccounts)
    .where(eq(bankAccounts.householdId, householdId));

  return (
    <main className="min-h-screen flex items-center justify-center px-4 py-12">
      <Card className="w-full max-w-2xl">
        <CardHeader>
          <CardTitle className="text-2xl">Welcome, {user.name ?? user.email}</CardTitle>
          <CardDescription>
            Let&apos;s add your bank accounts. You can edit these later — just enter what&apos;s in each one today.
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-6">
          <form action={addAccountAction} className="grid grid-cols-1 sm:grid-cols-[1fr_140px_140px_auto] gap-3 items-end">
            <div className="space-y-1.5">
              <Label htmlFor="name">Account name</Label>
              <Input id="name" name="name" required placeholder="Alex - Bank 1" />
            </div>
            <div className="space-y-1.5">
              <Label htmlFor="type">Type</Label>
              <select
                id="type"
                name="type"
                className="h-9 w-full rounded-md border bg-input/40 px-2 text-sm"
                defaultValue="current"
              >
                <option value="current">Current</option>
                <option value="savings">Savings</option>
                <option value="credit">Credit card</option>
                <option value="cash">Cash</option>
                <option value="investment">Investment</option>
              </select>
            </div>
            <div className="space-y-1.5">
              <Label htmlFor="balance">Opening balance</Label>
              <Input id="balance" name="balance" type="number" step="0.01" placeholder="500.00" required />
            </div>
            <Button type="submit">Add</Button>
          </form>

          <div className="space-y-2">
            {accounts.length === 0 ? (
              <p className="text-sm text-muted-foreground">No accounts yet.</p>
            ) : (
              accounts.map((a) => (
                <div key={a.id} className="flex items-center justify-between rounded-md border bg-card/40 px-4 py-3">
                  <div>
                    <div className="font-medium">{a.name}</div>
                    <div className="text-xs text-muted-foreground capitalize">{a.type}</div>
                  </div>
                  <Badge variant="secondary" className="font-mono tabular">
                    {formatMoney(a.openingBalanceMinor, a.currency)}
                  </Badge>
                </div>
              ))
            )}
          </div>

          <form action={finishOnboardingAction}>
            <Button type="submit" variant={accounts.length === 0 ? "outline" : "default"} className="w-full">
              {accounts.length === 0 ? "Skip for now" : "Continue to dashboard"}
            </Button>
          </form>
        </CardContent>
      </Card>
    </main>
  );
}
