"use client";

import { FormEvent, useEffect, useMemo, useState } from "react";
import { AppShell } from "../../../components/app-shell";
import { apiFetch } from "@/lib/api";

type Household = {
  id: string;
  name: string;
  members?: HouseholdMember[];
};

type HouseholdMember = {
  id: string;
  userId: string;
  role: string;
  status?: string;
  joinedAt: string;
  user?: {
    email: string;
    fullName?: string | null;
  };
};

type HouseholdInvite = {
  id: string;
  email: string;
  role: string;
  status: string;
  expiresAt: string;
  acceptedAt?: string | null;
  createdAt: string;
};

type HouseholdAccount = {
  displayId: string;
  institutionName: string;
  accountType: string;
  mask?: string | null;
  currentBalance: number;
  availableBalance: number;
  isoCurrencyCode: string;
  ownerUserId?: string | null;
  ownershipType: "mine" | "theirs" | "joint" | string;
  lastBalanceSync?: string | null;
  syncStatus: string;
};

type CashflowMonth = {
  month: string;
  income: number;
  expenses: number;
  net: number;
  transactionCount: number;
};

type HealthScore = {
  score: number;
  rating: "excellent" | "strong" | "building" | "needs_attention" | string;
  components: {
    cashflow: number;
    balanceBuffer: number;
    goalProgress: number;
    collaboration: number;
    syncHealth: number;
  };
  metrics: {
    savingsRate: number;
    bufferMonths: number;
    activeGoalCount: number;
    jointAccountCount: number;
    collaborativeTransactionCount: number;
  };
  recommendations: string[];
};

type RecentTransaction = {
  date: string;
  description: string;
  amount: number;
  source: string;
  category: string;
  account?: {
    institutionName?: string;
    mask?: string | null;
    ownerUserId?: string | null;
    ownershipType?: string;
  };
};

type HouseholdGoal = {
  id: string;
  name: string;
  description?: string | null;
  targetAmount: number;
  currentAmount: number;
  remainingAmount: number;
  progressPercent: number;
  isoCurrencyCode: string;
  targetDate?: string | null;
  priority: "low" | "medium" | "high" | string;
  status: "active" | "paused" | "completed" | "archived" | string;
  createdBy?: {
    email: string;
    fullName?: string | null;
  };
};

type DashboardData = {
  household: Household;
  members: HouseholdMember[];
  summary: {
    memberCount: number;
    accountCount: number;
    totalBalance: number;
    availableBalance: number;
    monthlyIncome: number;
    monthlyExpenses: number;
    monthlyNet: number;
  };
  ownershipBreakdown: Record<string, { accountCount: number; balance: number }>;
  healthScore: HealthScore;
  accounts: HouseholdAccount[];
  cashflow: CashflowMonth[];
  recentTransactions: RecentTransaction[];
};

type FairSplitResult = {
  expenseAmount: number;
  splitMode: "equal" | "income_weighted" | "custom";
  mineMonthlyIncome: number;
  yoursMonthlyIncome: number;
  totalIncome: number;
  incomeShares: {
    mine: number;
    yours: number;
  };
  split: {
    minePercent: number;
    yoursPercent: number;
    mineAmount: number;
    yoursAmount: number;
  };
  transactionDefaults: {
    attribution: "ours";
    splitMode: "equal" | "custom";
    splitMinePercent: number;
    splitYoursPercent: number;
  };
  rationale: string;
};

const money = new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
});

const inputClass = "w-full rounded-lg border border-border bg-background px-3 py-2 text-sm text-foreground focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20";
const cardClass = "rounded-xl border border-border bg-secondary/10 p-5";
const collaboratorRoles = ["admin", "member", "viewer", "accountant", "advisor"] as const;

function formatMoney(value: number) {
  return money.format(value || 0);
}

function monthLabel(value: string) {
  const [year, month] = value.split("-").map(Number);
  return new Date(year, month - 1, 1).toLocaleDateString("en-US", { month: "short" });
}

function accountLabel(account: HouseholdAccount | RecentTransaction["account"]) {
  if (!account) return "Household account";
  const mask = account.mask ? ` ending ${account.mask}` : "";
  return `${account.institutionName ?? "Account"}${mask}`;
}

function healthRatingLabel(value: string) {
  return value.replace(/_/g, " ");
}

export default function HouseholdSettingsPage() {
  const [households, setHouseholds] = useState<Household[]>([]);
  const [selectedId, setSelectedId] = useState("");
  const [dashboard, setDashboard] = useState<DashboardData | null>(null);
  const [newName, setNewName] = useState("");
  const [goals, setGoals] = useState<HouseholdGoal[]>([]);
  const [invites, setInvites] = useState<HouseholdInvite[]>([]);
  const [inviteDraft, setInviteDraft] = useState({ email: "", role: "accountant" });
  const [collaborationStatus, setCollaborationStatus] = useState("");
  const [goalStatus, setGoalStatus] = useState("");
  const [goalSaving, setGoalSaving] = useState(false);
  const [goalDraft, setGoalDraft] = useState({
    name: "",
    description: "",
    targetAmount: "",
    currentAmount: "",
    targetDate: "",
    priority: "medium" as "low" | "medium" | "high",
  });
  const [goalContributions, setGoalContributions] = useState<Record<string, string>>({});
  const [fairSplitDraft, setFairSplitDraft] = useState({
    expenseAmount: "",
    mineMonthlyIncome: "",
    yoursMonthlyIncome: "",
    splitMode: "income_weighted" as "equal" | "income_weighted" | "custom",
    customMinePercent: "50",
  });
  const [fairSplitResult, setFairSplitResult] = useState<FairSplitResult | null>(null);
  const [fairSplitStatus, setFairSplitStatus] = useState("");
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [status, setStatus] = useState("");

  const selectedHousehold = useMemo(
    () => households.find((household) => household.id === selectedId) ?? null,
    [households, selectedId],
  );

  useEffect(() => {
    loadHouseholds();
  }, []);

  useEffect(() => {
    if (!selectedId) {
      setDashboard(null);
      setGoals([]);
      setInvites([]);
      return;
    }
    loadDashboard(selectedId);
    loadGoals(selectedId);
    loadInvites(selectedId);
  }, [selectedId]);

  const loadHouseholds = async () => {
    setLoading(true);
    const res = await apiFetch<Household[]>("/api/households");
    setLoading(false);
    if (res.error) {
      setStatus(res.error.message ?? "Unable to load households.");
      return;
    }
    const list = res.data ?? [];
    setHouseholds(list);
    setSelectedId((current) => current || list[0]?.id || "");
  };

  const loadDashboard = async (id: string) => {
    setStatus("Loading shared dashboard...");
    const res = await apiFetch<DashboardData>(`/api/households/${id}/dashboard`);
    if (res.error) {
      setDashboard(null);
      setStatus(res.error.message ?? "Unable to load shared dashboard.");
      return;
    }
    setDashboard(res.data);
    setStatus("");
  };

  const loadGoals = async (id: string) => {
    const res = await apiFetch<HouseholdGoal[]>(`/api/households/${id}/goals`);
    if (res.error) {
      setGoalStatus(res.error.message ?? "Unable to load shared goals.");
      return;
    }
    setGoals(res.data ?? []);
    setGoalStatus("");
  };

  const loadInvites = async (id: string) => {
    const res = await apiFetch<HouseholdInvite[]>(`/api/households/${id}/invites`);
    if (res.error) {
      setInvites([]);
      return;
    }
    setInvites(res.data ?? []);
  };

  const createHousehold = async (event: FormEvent) => {
    event.preventDefault();
    const name = newName.trim();
    if (!name) return;
    setSaving(true);
    const res = await apiFetch<Household>("/api/households", {
      method: "POST",
      body: JSON.stringify({ name }),
    });
    setSaving(false);
    if (res.error) {
      setStatus(res.error.message ?? "Unable to create household.");
      return;
    }
    setNewName("");
    await loadHouseholds();
    if (res.data?.id) setSelectedId(res.data.id);
  };

  const createGoal = async (event: FormEvent) => {
    event.preventDefault();
    if (!selectedId || !goalDraft.name.trim()) return;
    const targetAmount = Number.parseFloat(goalDraft.targetAmount);
    const currentAmount = goalDraft.currentAmount ? Number.parseFloat(goalDraft.currentAmount) : 0;
    if (!Number.isFinite(targetAmount) || targetAmount <= 0) {
      setGoalStatus("Goal target must be greater than zero.");
      return;
    }
    if (!Number.isFinite(currentAmount) || currentAmount < 0 || currentAmount > targetAmount) {
      setGoalStatus("Current amount must be between zero and the target.");
      return;
    }

    setGoalSaving(true);
    const res = await apiFetch<HouseholdGoal>(`/api/households/${selectedId}/goals`, {
      method: "POST",
      body: JSON.stringify({
        name: goalDraft.name,
        description: goalDraft.description || undefined,
        targetAmount,
        currentAmount,
        targetDate: goalDraft.targetDate || undefined,
        priority: goalDraft.priority,
      }),
    });
    setGoalSaving(false);
    if (res.error) {
      setGoalStatus(res.error.message ?? "Unable to create shared goal.");
      return;
    }
    setGoalDraft({ name: "", description: "", targetAmount: "", currentAmount: "", targetDate: "", priority: "medium" });
    await loadGoals(selectedId);
  };

  const contributeToGoal = async (goal: HouseholdGoal) => {
    if (!selectedId) return;
    const contribution = Number.parseFloat(goalContributions[goal.id] ?? "");
    if (!Number.isFinite(contribution) || contribution <= 0) {
      setGoalStatus("Contribution must be greater than zero.");
      return;
    }
    const nextAmount = Math.min(goal.targetAmount, goal.currentAmount + contribution);
    const nextStatus = nextAmount >= goal.targetAmount ? "completed" : goal.status;
    const res = await apiFetch<HouseholdGoal>(`/api/households/${selectedId}/goals/${goal.id}`, {
      method: "PATCH",
      body: JSON.stringify({ currentAmount: nextAmount, status: nextStatus }),
    });
    if (res.error) {
      setGoalStatus(res.error.message ?? "Unable to update shared goal.");
      return;
    }
    setGoalContributions((prev) => ({ ...prev, [goal.id]: "" }));
    await loadGoals(selectedId);
  };

  const setGoalStatusValue = async (goal: HouseholdGoal, status: "active" | "paused" | "completed" | "archived") => {
    if (!selectedId) return;
    const res = await apiFetch<HouseholdGoal>(`/api/households/${selectedId}/goals/${goal.id}`, {
      method: "PATCH",
      body: JSON.stringify({ status }),
    });
    if (res.error) {
      setGoalStatus(res.error.message ?? "Unable to update shared goal.");
      return;
    }
    await loadGoals(selectedId);
  };

  const inviteCollaborator = async (event: FormEvent) => {
    event.preventDefault();
    if (!selectedId || !inviteDraft.email.trim()) return;
    const res = await apiFetch<HouseholdInvite>(`/api/households/${selectedId}/invites`, {
      method: "POST",
      body: JSON.stringify({
        email: inviteDraft.email,
        role: inviteDraft.role,
      }),
    });
    if (res.error) {
      setCollaborationStatus(res.error.message ?? "Unable to invite collaborator.");
      return;
    }
    setInviteDraft({ email: "", role: "accountant" });
    setCollaborationStatus("Invite sent.");
    await loadInvites(selectedId);
  };

  const calculateFairSplit = async (event: FormEvent) => {
    event.preventDefault();
    if (!selectedId) return;
    const expenseAmount = Number.parseFloat(fairSplitDraft.expenseAmount);
    if (!Number.isFinite(expenseAmount) || expenseAmount <= 0) {
      setFairSplitStatus("Enter an expense amount greater than zero.");
      return;
    }
    setFairSplitStatus("Calculating fair split...");
    const res = await apiFetch<FairSplitResult>(`/api/households/${selectedId}/fair-split`, {
      method: "POST",
      body: JSON.stringify({
        expenseAmount,
        mineMonthlyIncome: Number.parseFloat(fairSplitDraft.mineMonthlyIncome || "0"),
        yoursMonthlyIncome: Number.parseFloat(fairSplitDraft.yoursMonthlyIncome || "0"),
        splitMode: fairSplitDraft.splitMode,
        customMinePercent: fairSplitDraft.splitMode === "custom"
          ? Number.parseFloat(fairSplitDraft.customMinePercent)
          : undefined,
      }),
    });
    if (res.error) {
      setFairSplitResult(null);
      setFairSplitStatus(res.error.message ?? "Unable to calculate split.");
      return;
    }
    setFairSplitResult(res.data);
    setFairSplitStatus("");
  };

  const updateMemberAccess = async (member: HouseholdMember, payload: { role?: string; status?: string }) => {
    if (!selectedId) return;
    const res = await apiFetch<HouseholdMember>(`/api/households/${selectedId}/members/${member.id}`, {
      method: "PATCH",
      body: JSON.stringify(payload),
    });
    if (res.error) {
      setCollaborationStatus(res.error.message ?? "Unable to update collaborator access.");
      return;
    }
    setCollaborationStatus("Collaborator access updated.");
    await loadDashboard(selectedId);
    await loadInvites(selectedId);
  };

  const maxCashflow = Math.max(
    1,
    ...(dashboard?.cashflow ?? []).map((month) => Math.max(month.income, month.expenses)),
  );
  const activeGoalTotal = goals
    .filter((goal) => goal.status !== "archived")
    .reduce((sum, goal) => sum + goal.currentAmount, 0);

  return (
    <AppShell title="Households" subtitle="Shared financial dashboard for partner and family money.">
      <div className="space-y-6">
        <div className="glass-panel rounded-2xl p-6 shadow-sm">
          <div className="grid gap-4 lg:grid-cols-[1fr_320px]">
            <div>
              <p className="text-sm font-semibold uppercase tracking-wider text-muted-foreground">Active household</p>
              <div className="mt-3 flex flex-col gap-3 sm:flex-row">
                <select value={selectedId} onChange={(event) => setSelectedId(event.target.value)} className={inputClass}>
                  {households.map((household) => (
                    <option key={household.id} value={household.id}>
                      {household.name}
                    </option>
                  ))}
                  {!households.length && <option value="">No households yet</option>}
                </select>
                <button
                  type="button"
                  onClick={() => selectedId && loadDashboard(selectedId)}
                  disabled={!selectedId}
                  className="rounded-lg border border-border px-4 py-2 text-sm font-semibold text-foreground hover:bg-secondary disabled:opacity-50"
                >
                  Refresh
                </button>
              </div>
              {selectedHousehold && (
                <p className="mt-3 text-sm text-muted-foreground">
                  {selectedHousehold.name} combines joint, mine, and partner-owned accounts without exposing stable account IDs in the page data.
                </p>
              )}
            </div>

            <form onSubmit={createHousehold} className="rounded-xl border border-border bg-background/60 p-4">
              <label className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Create household</label>
              <input
                value={newName}
                onChange={(event) => setNewName(event.target.value)}
                placeholder="Household name"
                className={`${inputClass} mt-2`}
              />
              <button
                type="submit"
                disabled={saving || !newName.trim()}
                className="mt-3 w-full rounded-lg bg-primary px-4 py-2 text-sm font-bold text-primary-foreground hover:bg-primary/90 disabled:opacity-50"
              >
                {saving ? "Creating..." : "Create"}
              </button>
            </form>
          </div>
          {status && <p className="mt-4 text-sm text-muted-foreground">{status}</p>}
        </div>

        {loading ? (
          <div className="glass-panel rounded-2xl p-8 text-sm text-muted-foreground">Loading households...</div>
        ) : dashboard ? (
          <>
            <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-5">
              <div className={cardClass}>
                <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Total balance</p>
                <p className="mt-2 text-3xl font-bold text-foreground">{formatMoney(dashboard.summary.totalBalance)}</p>
                <p className="mt-1 text-sm text-muted-foreground">{dashboard.summary.accountCount} shared accounts</p>
              </div>
              <div className={cardClass}>
                <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Available</p>
                <p className="mt-2 text-3xl font-bold text-foreground">{formatMoney(dashboard.summary.availableBalance)}</p>
                <p className="mt-1 text-sm text-muted-foreground">Current liquid view</p>
              </div>
              <div className={cardClass}>
                <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Monthly net</p>
                <p className={`mt-2 text-3xl font-bold ${dashboard.summary.monthlyNet >= 0 ? "text-green-500" : "text-red-500"}`}>
                  {formatMoney(dashboard.summary.monthlyNet)}
                </p>
                <p className="mt-1 text-sm text-muted-foreground">
                  {formatMoney(dashboard.summary.monthlyIncome)} in, {formatMoney(dashboard.summary.monthlyExpenses)} out
                </p>
              </div>
              <div className={cardClass}>
                <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Members</p>
                <p className="mt-2 text-3xl font-bold text-foreground">{dashboard.summary.memberCount}</p>
                <p className="mt-1 text-sm text-muted-foreground">Active household access</p>
              </div>
              <div className={cardClass}>
                <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Health score</p>
                <p className="mt-2 text-3xl font-bold text-foreground">{dashboard.healthScore.score}</p>
                <p className="mt-1 text-sm capitalize text-muted-foreground">{healthRatingLabel(dashboard.healthScore.rating)}</p>
              </div>
            </div>

            <div className="glass-panel rounded-2xl p-6 shadow-sm">
              <div className="grid gap-6 lg:grid-cols-[260px_1fr_1fr]">
                <div>
                  <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Couples financial health</p>
                  <p className="mt-2 text-5xl font-bold text-foreground">{dashboard.healthScore.score}</p>
                  <p className="mt-1 text-sm capitalize text-muted-foreground">{healthRatingLabel(dashboard.healthScore.rating)}</p>
                </div>
                <div className="grid gap-3 sm:grid-cols-2">
                  {[
                    ["Cashflow", dashboard.healthScore.components.cashflow, 35],
                    ["Balance buffer", dashboard.healthScore.components.balanceBuffer, 20],
                    ["Goal progress", dashboard.healthScore.components.goalProgress, 20],
                    ["Collaboration", dashboard.healthScore.components.collaboration, 15],
                    ["Sync health", dashboard.healthScore.components.syncHealth, 10],
                  ].map(([label, value, max]) => (
                    <div key={label} className="rounded-xl border border-border bg-background/40 p-3">
                      <div className="flex items-center justify-between gap-3 text-sm">
                        <span className="font-semibold text-foreground">{label}</span>
                        <span className="text-muted-foreground">{value}/{max}</span>
                      </div>
                      <div className="mt-2 h-2 overflow-hidden rounded-full bg-secondary">
                        <div className="h-full bg-primary" style={{ width: `${Math.min((Number(value) / Number(max)) * 100, 100)}%` }} />
                      </div>
                    </div>
                  ))}
                </div>
                <div className="rounded-xl border border-border bg-background/40 p-4">
                  <p className="text-sm font-semibold text-foreground">Next best moves</p>
                  <div className="mt-3 space-y-2">
                    {dashboard.healthScore.recommendations.map((recommendation) => (
                      <p key={recommendation} className="text-sm text-muted-foreground">{recommendation}</p>
                    ))}
                    {!dashboard.healthScore.recommendations.length && (
                      <p className="text-sm text-muted-foreground">Shared cashflow, goals, collaboration, and sync health are all in strong shape.</p>
                    )}
                  </div>
                </div>
              </div>
            </div>

            <div className="glass-panel rounded-2xl p-6 shadow-sm">
              <div className="grid gap-6 lg:grid-cols-[0.9fr_1.1fr]">
                <div>
                  <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Fair split calculator</p>
                  <h2 className="mt-2 text-xl font-bold text-foreground">Split shared expenses by income or custom share</h2>
                  <p className="mt-2 text-sm text-muted-foreground">
                    Calculate a household split before applying the same percentages to a shared transaction.
                  </p>
                  {fairSplitResult ? (
                    <div className="mt-5 grid gap-3 sm:grid-cols-2">
                      <div className="rounded-xl border border-border bg-background/40 p-4">
                        <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Mine</p>
                        <p className="mt-2 text-2xl font-bold text-foreground">{formatMoney(fairSplitResult.split.mineAmount)}</p>
                        <p className="text-sm text-muted-foreground">{fairSplitResult.split.minePercent}% share</p>
                      </div>
                      <div className="rounded-xl border border-border bg-background/40 p-4">
                        <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Yours</p>
                        <p className="mt-2 text-2xl font-bold text-foreground">{formatMoney(fairSplitResult.split.yoursAmount)}</p>
                        <p className="text-sm text-muted-foreground">{fairSplitResult.split.yoursPercent}% share</p>
                      </div>
                      <p className="text-sm text-muted-foreground sm:col-span-2">
                        {fairSplitResult.rationale} Transaction default: {fairSplitResult.transactionDefaults.splitMode} split with ours attribution.
                      </p>
                    </div>
                  ) : null}
                </div>
                <form onSubmit={calculateFairSplit} className="grid gap-3 md:grid-cols-2">
                  <input
                    type="number"
                    min="0"
                    step="0.01"
                    value={fairSplitDraft.expenseAmount}
                    onChange={(event) => setFairSplitDraft((prev) => ({ ...prev, expenseAmount: event.target.value }))}
                    placeholder="Expense amount"
                    className={inputClass}
                  />
                  <select
                    value={fairSplitDraft.splitMode}
                    onChange={(event) => setFairSplitDraft((prev) => ({ ...prev, splitMode: event.target.value as "equal" | "income_weighted" | "custom" }))}
                    className={inputClass}
                  >
                    <option value="income_weighted">Income-weighted</option>
                    <option value="equal">Equal 50/50</option>
                    <option value="custom">Custom percent</option>
                  </select>
                  <input
                    type="number"
                    min="0"
                    step="0.01"
                    value={fairSplitDraft.mineMonthlyIncome}
                    onChange={(event) => setFairSplitDraft((prev) => ({ ...prev, mineMonthlyIncome: event.target.value }))}
                    placeholder="Mine monthly income"
                    className={inputClass}
                  />
                  <input
                    type="number"
                    min="0"
                    step="0.01"
                    value={fairSplitDraft.yoursMonthlyIncome}
                    onChange={(event) => setFairSplitDraft((prev) => ({ ...prev, yoursMonthlyIncome: event.target.value }))}
                    placeholder="Yours monthly income"
                    className={inputClass}
                  />
                  {fairSplitDraft.splitMode === "custom" ? (
                    <input
                      type="number"
                      min="0"
                      max="100"
                      step="0.01"
                      value={fairSplitDraft.customMinePercent}
                      onChange={(event) => setFairSplitDraft((prev) => ({ ...prev, customMinePercent: event.target.value }))}
                      placeholder="Mine percent"
                      className={inputClass}
                    />
                  ) : null}
                  <button
                    type="submit"
                    className="rounded-lg bg-primary px-4 py-2 text-sm font-bold text-primary-foreground hover:bg-primary/90 md:col-span-2"
                  >
                    Calculate split
                  </button>
                  {fairSplitStatus ? <p className="text-sm text-muted-foreground md:col-span-2">{fairSplitStatus}</p> : null}
                </form>
              </div>
            </div>

            <div className="grid gap-6 xl:grid-cols-[0.9fr_1.1fr]">
              <div className="glass-panel rounded-2xl p-6 shadow-sm">
                <div className="flex items-center justify-between gap-3">
                  <div>
                    <h2 className="text-lg font-bold text-foreground">Shared goals</h2>
                    <p className="mt-1 text-sm text-muted-foreground">{formatMoney(activeGoalTotal)} saved across {goals.filter((goal) => goal.status !== "archived").length} visible goals.</p>
                  </div>
                </div>
                <form onSubmit={createGoal} className="mt-5 grid gap-3 md:grid-cols-2">
                  <input
                    value={goalDraft.name}
                    onChange={(event) => setGoalDraft((prev) => ({ ...prev, name: event.target.value }))}
                    placeholder="Goal name"
                    className={inputClass}
                  />
                  <input
                    value={goalDraft.targetAmount}
                    onChange={(event) => setGoalDraft((prev) => ({ ...prev, targetAmount: event.target.value }))}
                    placeholder="Target amount"
                    type="number"
                    min="0"
                    step="0.01"
                    className={inputClass}
                  />
                  <input
                    value={goalDraft.currentAmount}
                    onChange={(event) => setGoalDraft((prev) => ({ ...prev, currentAmount: event.target.value }))}
                    placeholder="Current amount"
                    type="number"
                    min="0"
                    step="0.01"
                    className={inputClass}
                  />
                  <input
                    value={goalDraft.targetDate}
                    onChange={(event) => setGoalDraft((prev) => ({ ...prev, targetDate: event.target.value }))}
                    type="date"
                    className={inputClass}
                  />
                  <select
                    value={goalDraft.priority}
                    onChange={(event) => setGoalDraft((prev) => ({ ...prev, priority: event.target.value as "low" | "medium" | "high" }))}
                    className={inputClass}
                  >
                    <option value="low">Low priority</option>
                    <option value="medium">Medium priority</option>
                    <option value="high">High priority</option>
                  </select>
                  <button
                    type="submit"
                    disabled={goalSaving || !goalDraft.name.trim()}
                    className="rounded-lg bg-primary px-4 py-2 text-sm font-bold text-primary-foreground hover:bg-primary/90 disabled:opacity-50"
                  >
                    {goalSaving ? "Creating..." : "Create goal"}
                  </button>
                  <textarea
                    value={goalDraft.description}
                    onChange={(event) => setGoalDraft((prev) => ({ ...prev, description: event.target.value }))}
                    placeholder="Description"
                    className={`${inputClass} md:col-span-2 min-h-20`}
                  />
                </form>
                {goalStatus && <p className="mt-3 text-sm text-muted-foreground">{goalStatus}</p>}
              </div>

              <div className="glass-panel rounded-2xl p-6 shadow-sm">
                <h2 className="text-lg font-bold text-foreground">Goal progress</h2>
                <div className="mt-4 space-y-3">
                  {goals.filter((goal) => goal.status !== "archived").map((goal) => (
                    <div key={goal.id} className="rounded-xl border border-border bg-background/40 p-4">
                      <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
                        <div className="min-w-0">
                          <div className="flex flex-wrap items-center gap-2">
                            <p className="font-semibold text-foreground">{goal.name}</p>
                            <span className="rounded-full border border-border bg-secondary/60 px-2 py-0.5 text-[11px] font-semibold capitalize text-muted-foreground">{goal.priority}</span>
                            <span className="rounded-full border border-border bg-background px-2 py-0.5 text-[11px] font-semibold capitalize text-muted-foreground">{goal.status}</span>
                          </div>
                          {goal.description && <p className="mt-1 text-sm text-muted-foreground">{goal.description}</p>}
                          <p className="mt-1 text-xs text-muted-foreground">
                            {formatMoney(goal.currentAmount)} of {formatMoney(goal.targetAmount)}
                            {goal.targetDate ? ` by ${new Date(goal.targetDate).toLocaleDateString()}` : ""}
                          </p>
                        </div>
                        <p className="text-lg font-bold text-foreground">{goal.progressPercent.toFixed(0)}%</p>
                      </div>
                      <div className="mt-3 h-2 overflow-hidden rounded-full bg-secondary">
                        <div className="h-full bg-primary" style={{ width: `${Math.min(goal.progressPercent, 100)}%` }} />
                      </div>
                      <div className="mt-3 flex flex-col gap-2 sm:flex-row">
                        <input
                          type="number"
                          min="0"
                          step="0.01"
                          value={goalContributions[goal.id] ?? ""}
                          onChange={(event) => setGoalContributions((prev) => ({ ...prev, [goal.id]: event.target.value }))}
                          placeholder="Add amount"
                          className={inputClass}
                        />
                        <button
                          type="button"
                          onClick={() => contributeToGoal(goal)}
                          className="rounded-lg border border-border px-4 py-2 text-sm font-semibold text-foreground hover:bg-secondary"
                        >
                          Add
                        </button>
                        {goal.status !== "completed" ? (
                          <button type="button" onClick={() => setGoalStatusValue(goal, "completed")} className="rounded-lg border border-border px-4 py-2 text-sm font-semibold text-foreground hover:bg-secondary">
                            Complete
                          </button>
                        ) : (
                          <button type="button" onClick={() => setGoalStatusValue(goal, "active")} className="rounded-lg border border-border px-4 py-2 text-sm font-semibold text-foreground hover:bg-secondary">
                            Reopen
                          </button>
                        )}
                      </div>
                    </div>
                  ))}
                  {!goals.filter((goal) => goal.status !== "archived").length && <p className="text-sm text-muted-foreground">No shared goals yet.</p>}
                </div>
              </div>
            </div>

            <div className="grid gap-6 xl:grid-cols-[1.2fr_0.8fr]">
              <div className="glass-panel rounded-2xl p-6 shadow-sm">
                <div className="flex items-center justify-between gap-3">
                  <h2 className="text-lg font-bold text-foreground">Accounts by ownership</h2>
                  <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Mine / theirs / joint</span>
                </div>
                <div className="mt-4 grid gap-3 md:grid-cols-3">
                  {(["mine", "theirs", "joint"] as const).map((key) => {
                    const item = dashboard.ownershipBreakdown[key] ?? { accountCount: 0, balance: 0 };
                    return (
                      <div key={key} className="rounded-xl border border-border bg-background/50 p-4">
                        <p className="text-sm font-semibold capitalize text-foreground">{key}</p>
                        <p className="mt-2 text-2xl font-bold text-foreground">{formatMoney(item.balance)}</p>
                        <p className="mt-1 text-xs text-muted-foreground">{item.accountCount} accounts</p>
                      </div>
                    );
                  })}
                </div>

                <div className="mt-5 space-y-3">
                  {dashboard.accounts.map((account) => (
                    <div key={account.displayId} className="flex flex-col gap-3 rounded-xl border border-border bg-background/40 p-4 sm:flex-row sm:items-center sm:justify-between">
                      <div>
                        <p className="font-semibold text-foreground">{accountLabel(account)}</p>
                        <p className="text-sm capitalize text-muted-foreground">
                          {account.accountType} · {account.ownershipType} · {account.syncStatus}
                        </p>
                      </div>
                      <p className="text-lg font-bold text-foreground">{formatMoney(account.currentBalance)}</p>
                    </div>
                  ))}
                  {!dashboard.accounts.length && <p className="text-sm text-muted-foreground">No household accounts linked yet.</p>}
                </div>
              </div>

              <div className="glass-panel rounded-2xl p-6 shadow-sm">
                <div className="flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between">
                  <div>
                    <h2 className="text-lg font-bold text-foreground">Collaborators</h2>
                    <p className="mt-1 text-sm text-muted-foreground">Invite accountants or advisors with view-only household access.</p>
                  </div>
                  <span className="rounded-full border border-border bg-secondary/60 px-3 py-1 text-xs font-semibold text-muted-foreground">
                    {dashboard.members.length} active
                  </span>
                </div>
                <form onSubmit={inviteCollaborator} className="mt-4 grid gap-2 sm:grid-cols-[1fr_130px_auto]">
                  <input
                    value={inviteDraft.email}
                    onChange={(event) => setInviteDraft((prev) => ({ ...prev, email: event.target.value }))}
                    type="email"
                    placeholder="advisor@example.com"
                    className={inputClass}
                  />
                  <select
                    value={inviteDraft.role}
                    onChange={(event) => setInviteDraft((prev) => ({ ...prev, role: event.target.value }))}
                    className={inputClass}
                  >
                    <option value="accountant">Accountant</option>
                    <option value="advisor">Advisor</option>
                    <option value="viewer">Viewer</option>
                    <option value="member">Member</option>
                    <option value="admin">Admin</option>
                  </select>
                  <button
                    type="submit"
                    disabled={!inviteDraft.email.trim()}
                    className="rounded-lg bg-primary px-4 py-2 text-sm font-bold text-primary-foreground hover:bg-primary/90 disabled:opacity-50"
                  >
                    Invite
                  </button>
                </form>
                {collaborationStatus && <p className="mt-3 text-sm text-muted-foreground">{collaborationStatus}</p>}
                <div className="mt-4 space-y-3">
                  {dashboard.members.map((member) => (
                    <div key={member.id} className="rounded-xl border border-border bg-background/40 p-4">
                      <div className="min-w-0">
                        <p className="truncate font-semibold text-foreground">{member.user?.fullName || member.user?.email || member.userId}</p>
                        <p className="truncate text-sm text-muted-foreground">{member.user?.email}</p>
                      </div>
                      <div className="mt-3 grid gap-2 sm:grid-cols-[1fr_1fr_auto]">
                        <select
                          value={member.role}
                          onChange={(event) => updateMemberAccess(member, { role: event.target.value })}
                          className={inputClass}
                        >
                          <option value="owner">Owner</option>
                          {collaboratorRoles.map((role) => (
                            <option key={role} value={role}>{role}</option>
                          ))}
                        </select>
                        <select
                          value={member.status ?? "active"}
                          onChange={(event) => updateMemberAccess(member, { status: event.target.value })}
                          className={inputClass}
                        >
                          <option value="active">Active</option>
                          <option value="inactive">Inactive</option>
                          <option value="removed">Removed</option>
                        </select>
                        <span className="rounded-lg border border-border bg-secondary/60 px-3 py-2 text-xs font-semibold capitalize text-muted-foreground">
                          {member.role}
                        </span>
                      </div>
                    </div>
                  ))}
                </div>
                {!!invites.length && (
                  <div className="mt-5">
                    <p className="text-sm font-semibold text-foreground">Pending invites</p>
                    <div className="mt-3 space-y-2">
                      {invites.filter((invite) => invite.status === "pending").map((invite) => (
                        <div key={invite.id} className="flex items-center justify-between gap-3 rounded-xl border border-border bg-background/40 p-3">
                          <div className="min-w-0">
                            <p className="truncate text-sm font-semibold text-foreground">{invite.email}</p>
                            <p className="text-xs capitalize text-muted-foreground">{invite.role} · expires {new Date(invite.expiresAt).toLocaleDateString()}</p>
                          </div>
                          <span className="rounded-full border border-border bg-secondary/60 px-2 py-1 text-[11px] font-semibold capitalize text-muted-foreground">{invite.status}</span>
                        </div>
                      ))}
                    </div>
                  </div>
                )}
              </div>
            </div>

            <div className="grid gap-6 xl:grid-cols-[0.9fr_1.1fr]">
              <div className="glass-panel rounded-2xl p-6 shadow-sm">
                <h2 className="text-lg font-bold text-foreground">Six-month cashflow</h2>
                <div className="mt-5 space-y-4">
                  {dashboard.cashflow.map((month) => (
                    <div key={month.month}>
                      <div className="mb-2 flex items-center justify-between text-sm">
                        <span className="font-semibold text-foreground">{monthLabel(month.month)}</span>
                        <span className={month.net >= 0 ? "text-green-500" : "text-red-500"}>{formatMoney(month.net)}</span>
                      </div>
                      <div className="grid h-2 grid-cols-2 overflow-hidden rounded-full bg-secondary">
                        <div className="bg-green-500" style={{ width: `${Math.max(4, (month.income / maxCashflow) * 100)}%` }} />
                        <div className="justify-self-end bg-red-500" style={{ width: `${Math.max(4, (month.expenses / maxCashflow) * 100)}%` }} />
                      </div>
                    </div>
                  ))}
                </div>
              </div>

              <div className="glass-panel rounded-2xl p-6 shadow-sm">
                <h2 className="text-lg font-bold text-foreground">Recent shared transactions</h2>
                <div className="mt-4 divide-y divide-border">
                  {dashboard.recentTransactions.map((transaction, index) => (
                    <div key={`${transaction.date}-${index}`} className="flex flex-col gap-2 py-3 sm:flex-row sm:items-center sm:justify-between">
                      <div className="min-w-0">
                        <p className="truncate font-semibold text-foreground">{transaction.description}</p>
                        <p className="text-sm text-muted-foreground">
                          {new Date(transaction.date).toLocaleDateString()} · {transaction.category} · {accountLabel(transaction.account)}
                        </p>
                      </div>
                      <p className={`font-bold ${transaction.amount < 0 ? "text-green-500" : "text-foreground"}`}>
                        {formatMoney(transaction.amount)}
                      </p>
                    </div>
                  ))}
                  {!dashboard.recentTransactions.length && <p className="py-4 text-sm text-muted-foreground">No shared transactions yet.</p>}
                </div>
              </div>
            </div>
          </>
        ) : (
          <div className="glass-panel rounded-2xl p-8 text-sm text-muted-foreground">
            Create a household to start viewing shared accounts and cashflow.
          </div>
        )}
      </div>
    </AppShell>
  );
}
