"use client";

import { useEffect, useMemo, useState } from "react";
import {
  AlertCircle,
  ArrowRight,
  Building2,
  CheckCircle2,
  ChevronDown,
  ChevronRight,
  CreditCard,
  Home,
  Landmark,
  ListTodo,
  Pencil,
  Maximize2,
  PiggyBank,
  Table2,
  Plus,
  Settings2,
  ShoppingCart,
  Tornado,
  Trash2,
  TrendingUp,
  Wallet,
} from "lucide-react";
import { Timeline } from "@/components/Timeline";
import { Sparkline } from "@/components/Sparkline";
import { CapitalDistributionDialog, RateDistributionDialog } from "@/components/DistributionDialogs";
import { capitalPot } from "@/lib/distribution";
import {
  isRetirementTransition,
  openTransitionCount,
  decisionsText,
  type DecisionCounts,
  transitionInactive as inactiveAtTransition,
  TRANSITION_CATEGORIES,
  retirementConfirmed,
} from "@/lib/decisions";
import { AHV_REFERENCE_AGE } from "@/lib/constants";
import {
  RETIREMENT_CATEGORIES,
  withRetirementDefaults,
  type RetirementDecision,
} from "@/lib/retirement-decision";
import { RetirementFields } from "@/components/RetirementFields";
import { RetirementPanel } from "@/components/RetirementPanel";
import { Button, EmptyState, InspectorShell, Modal, useConfirm, useToast } from "@/components/ui";
import { ElementDetailDialog, PhaseDetailDialog } from "@/components/DetailView";
import {
  CashTransitionFields,
  ElementDetail,
  ElementPhaseFields,
  ElementTransitionFields,
  cashTransitionSummary,
  isCashTransitionAnswered,
  isTransitionAnswered,
  withCashTransitionDefaults,
  withTransitionDefaults,
  type CellContext,
} from "@/components/ElementDetail";
import { PhaseDetail } from "@/components/PhaseDetail";
import { PlanProfileFields, type ProfileDraft } from "@/components/PlanProfileFields";
import { RetirementAdjuster } from "@/components/RetirementAdjuster";
import { MoneyField, SelectField, TextField } from "@/components/FormField";
import { api } from "@/lib/api-client";
import { formatChf } from "@/lib/format";
import { DATA_SOURCE_OPTIONS, type DataSource } from "@/lib/dataview";
import {
  CATEGORY_LABELS,
  CATEGORY_ORDER,
  PERSON_ONLY_CATEGORIES,
  inheritedPhaseValues,
  num,
  ownerLabel,
  type CashTransitionData,
  type ElementCategory,
  type PhaseData,
  type TransitionData,
} from "@/lib/elements";
import { computePlan, type PhaseComputed, type PlanComputed } from "@/lib/calculations";
import type { ScenarioDiff } from "@/lib/diff";
import type { ElementInput, PlanInput } from "@/lib/types";

const CATEGORY_ICON: Record<ElementCategory, React.ReactNode> = {
  INCOME: <Wallet className="h-4 w-4" />,
  EXPENSE: <ShoppingCart className="h-4 w-4" />,
  AHV: <Landmark className="h-4 w-4" />,
  PENSION_FUND: <Building2 className="h-4 w-4" />,
  PILLAR_3A: <PiggyBank className="h-4 w-4" />,
  REAL_ESTATE: <Home className="h-4 w-4" />,
  OTHER_ASSET: <TrendingUp className="h-4 w-4" />,
  OTHER_DEBT: <CreditCard className="h-4 w-4" />,
};

// Kategorien mit einem Übergangs-Entscheid. AHV ist dabei ein Sonderfall: nur beim
// Pensions-Übergang ist die Beitragskarriere zu prüfen (siehe transitionInactive).
const VALUE_CATEGORIES: ElementCategory[] = [
  "PENSION_FUND",
  "PILLAR_3A",
  "REAL_ESTATE",
  "OTHER_ASSET",
  "OTHER_DEBT",
];

type Column =
  | { kind: "phase"; phase: PhaseComputed }
  | { kind: "transition"; fromPhase: PhaseComputed; toPhase: PhaseComputed };

// Alle Einzel-Bearbeitungen laufen über EIN rechtes Inspector-Panel (statt Modals):
// die Matrix bleibt sichtbar, ein Klick auf eine andere Zelle wechselt den Inhalt.
// Genau ein Panel kann offen sein -- deshalb eine Union statt sechs einzelner Zustände.
type Panel =
  | { kind: "phase"; phaseId: string }
  | { kind: "elementMeta"; elementId: string }
  | { kind: "cell"; elementId: string; phaseId: string }
  | { kind: "transition"; elementId: string; fromPhaseId: string }
  | { kind: "cashTransition"; fromPhaseId: string }
  | { kind: "cashInitial" }
  | { kind: "profile" };

export function PlanView({
  plan,
  computed: planComputed,
  actualComputed = null,
  actualYears = [],
  diff,
  onChanged,
  onOpenSpec,
  onOpenSensitivity,
}: {
  plan: PlanInput;
  computed: PlanComputed;
  // Zweiter Rechenlauf mit den effektiven Werten; null, wenn keine erfasst sind.
  actualComputed?: PlanComputed | null;
  // Kalenderjahre mit Ist-Satz (Marker auf der Zeitachse).
  actualYears?: number[];
  // Abweichungen gegenüber dem Eltern-Szenario; null im Basisszenario (nichts zu markieren).
  diff: ScenarioDiff | null;
  onChanged: () => void;
  onOpenSpec?: (anchor: string) => void;
  onOpenSensitivity?: () => void;
}) {
  // Planzahlen oder effektive Zahlen (inkl. Abweichung). Bewusst zwei Möglichkeiten statt
  // dreier: Plan UND Ist als Rohwerte nebeneinander wären mit nominal/real acht Zahlen je
  // Zelle (siehe SPEZIFIKATION 9.29).
  const [dataSource, setDataSource] = useState<DataSource>("PLAN");
  const hasActuals = actualComputed !== null;
  const computed = dataSource === "ACTUAL" && actualComputed ? actualComputed : planComputed;

  // Planwert derselben Zelle -- Grundlage der Abweichung. In der Plan-Sicht null, dann zeigt
  // die Zelle gar keine Abweichung an (statt eine von 0 zu behaupten).
  const showDeviation = dataSource === "ACTUAL" && actualComputed !== null;
  const planEndOf = (elementId: string | undefined, phaseId: string): number | null => {
    if (!showDeviation || !elementId) return null;
    const ph = planComputed.phases.find((p) => p.id === phaseId);
    const el = ph?.elements.find((e) => e.elementId === elementId);
    return el ? el.endValue : null;
  };
  const confirmDialog = useConfirm();
  const toast = useToast();
  // Markierungs-Klassen: geändert = gelb, neu = grün, entfernt = grau.
  const cellDiff = (elementId: string, phaseId: string) =>
    diff?.phaseCell.has(`${elementId}:${phaseId}`) ? "bg-diff-soft ring-1 ring-inset ring-diff/40" : "";
  const transDiff = (elementId: string, fromPhaseId: string) =>
    diff?.transitionCell.has(`${elementId}:${fromPhaseId}`) ? "bg-diff-soft ring-1 ring-inset ring-diff/40" : "";
  const rowDiff = (elementId: string) => {
    const k = diff?.elementRow.get(elementId);
    return k === "added"
      ? "bg-diff-added-soft"
      : k === "changed"
        ? "bg-diff-soft"
        : "";
  };
  const [panel, setPanel] = useState<Panel | null>(null);
  const [collapsedCats, setCollapsedCats] = useState<Set<ElementCategory>>(new Set());
  const [showAdd, setShowAdd] = useState(false);
  const [addCategory, setAddCategory] = useState<ElementCategory | null>(null);
  const [showAddPhase, setShowAddPhase] = useState(false);
  const [reviewFromPhaseId, setReviewFromPhaseId] = useState<string | null>(null);
  // Offener Verteil-Dialog (Kapital bzw. Spar-/Verzehrquote) -- bewusst ein eigenes Popup,
  // weil beide mehrere Elemente auf einmal bearbeiten.
  const [distribute, setDistribute] = useState<{ kind: "capital" | "rates"; phaseId: string } | null>(null);
  const [valueMode, setValueMode] = useState<ValueMode>("nominal");
  // Matrix oder Pensionierung. Kein URL-Zustand: Es ist eine Arbeitsansicht, kein Ort.
  const [view, setView] = useState<"matrix" | "retirement">("matrix");
  // Die Tour (Start-Knopf, Auto-Start bei Plan-Erstellung, Rendering) liegt seit dem
  // Layout-Umbau in AppShell -- sie liest die data-tour-Ziele im DOM dieser Ansicht.
  // Nur-Lese-Detailansicht (Roadmap Nr. 43). Der Rechenweg wird erst beim Öffnen erzeugt.
  const [detailFor, setDetailFor] = useState<{ kind: "element"; id: string } | { kind: "phase"; id: string } | null>(null);

  // Erklärte Berechnung: bewusst NUR wenn eine Detailansicht offen ist. computePlan ist rein
  // und läuft im Browser -- es braucht dafür weder einen API-Aufruf noch eine grössere
  // Server-Antwort, und das Ergebnis ist per Konstruktion identisch zum Serverergebnis.
  const explained = useMemo(
    () => (detailFor ? computePlan(plan, undefined, { explain: true }) : null),
    [detailFor, plan]
  );

  useEffect(() => {
    const stored = typeof window !== "undefined" ? window.localStorage.getItem(VALUE_MODE_KEY) : null;
    // eslint-disable-next-line react-hooks/set-state-in-effect -- einmalige Übernahme der gespeicherten Wahl
    if (stored === "nominal" || stored === "both" || stored === "real") setValueMode(stored);
  }, []);
  function changeValueMode(m: ValueMode) {
    setValueMode(m);
    if (typeof window !== "undefined") window.localStorage.setItem(VALUE_MODE_KEY, m);
  }

  const columns = useMemo<Column[]>(() => {
    const cols: Column[] = [];
    computed.phases.forEach((p, i) => {
      cols.push({ kind: "phase", phase: p });
      if (i < computed.phases.length - 1) {
        cols.push({ kind: "transition", fromPhase: p, toPhase: computed.phases[i + 1] });
      }
    });
    return cols;
  }, [computed.phases]);

  // Anzeigename einer Person: eigener Name, sonst Fallback "Person A"/"Person B".
  function personLabel(role: string): string {
    const p = plan.persons.find((x) => x.role === role);
    if (p?.name && p.name.trim()) return p.name.trim();
    return role === "PERSON_A" ? "Person A" : "Person B";
  }

  const personAxes = plan.persons.map((p) => ({
    role: p.role,
    label: personLabel(p.role),
    currentAge: p.age,
    retirementAge: p.retirementAge,
    color: p.role === "PERSON_A" ? "var(--person-a)" : "var(--person-b)",
  }));

  const elementsByCategory = useMemo(() => {
    const map = new Map<ElementCategory, ElementInput[]>();
    for (const cat of CATEGORY_ORDER) map.set(cat, []);
    for (const e of [...plan.elements].sort((a, b) => a.orderIndex - b.orderIndex)) {
      map.get(e.category)!.push(e);
    }
    return map;
  }, [plan.elements]);

  function computedElement(phaseId: string, elementId: string) {
    return computed.phases.find((p) => p.id === phaseId)?.elements.find((e) => e.elementId === elementId);
  }

  // isRetirementTransition/transitionInactive/openTransitionCount kommen aus lib/decisions --
  // der Bericht zaehlt mit derselben Regel (sonst meldet er andere Zahlen als die Matrix).

  // Beitragskarriere des Element-Besitzers (nur für AHV relevant).
  function careerFor(element: ElementInput) {
    if (element.category !== "AHV" || !element.ownerRole || element.ownerRole === "HOUSEHOLD") return null;
    const person = plan.persons.find((p) => p.role === element.ownerRole);
    return computed.ahvCareer.find((c) => c.personId === person?.id) ?? null;
  }

  // Anzahl Phasen NACH dieser (für den Fortschreibungs-Warnhinweis).
  function laterPhaseCount(phase: PhaseComputed): number {
    return computed.phases.length - phase.sequenceNumber;
  }

  // Phasen in ihrer Reihenfolge -- Grundlage der Vererbung (Roadmap Nr. 44, Punkt A).
  const orderedPhaseIds = computed.phases.map((p) => p.id);

  // Alter des Element-Besitzers im ersten Jahr einer Phase. Ohne Personenzuordnung gilt
  // Person A, weil die Zeitachse ohnehin an ihr hängt.
  function ownerAgeAtPhaseStart(phase: PhaseComputed, element: ElementInput): number {
    const role = element.ownerRole && element.ownerRole !== "HOUSEHOLD" ? element.ownerRole : "PERSON_A";
    return phase.persons.find((p) => p.role === role)?.startAge ?? 0;
  }

  // Baut den Kontext für eine Phasenzelle.
  function buildPhaseContext(phase: PhaseComputed, element: ElementInput): CellContext {
    const ce = computedElement(phase.id, element.id);
    const ownerWorking =
      element.ownerRole && element.ownerRole !== "HOUSEHOLD"
        ? phase.persons.find((p) => p.role === element.ownerRole)?.working ?? false
        : phase.type !== "PENSION";
    return {
      kind: "phase",
      phaseId: phase.id,
      ownerWorking,
      isConsumption: phase.isConsumption,
      durationYears: phase.durationYears,
      isRetirementTransition: false,
      carriedEndValue: ce?.endValue ?? 0,
      carried: ce?.carried ?? false,
      derivedStart: ce?.baseValue ?? 0,
      derivedMortgage: ce?.mortgageStart ?? 0,
      mortgageEnd: ce?.mortgageEnd ?? 0,
      // Verkehrswert = Eigenkapital + Resthypothek (beides am Phasenende).
      propertyValueEnd: (ce?.endValue ?? 0) + (ce?.mortgageEnd ?? 0),
      deflatorStart: phase.cumulativeInflationStart,
      laterPhaseCount: laterPhaseCount(phase),
      ahvCareer: careerFor(element),
      inheritedValues: inheritedPhaseValues(element.phaseValues, orderedPhaseIds, phase.id),
      ownerAgeStart: ownerAgeAtPhaseStart(phase, element),
      investTargets: [],
      capitalFromTransfer: ce?.capitalFromTransfer ?? 0,
      capitalFromTransferSources: ce?.capitalFromTransferSources ?? [],
    };
  }

  function buildTransitionContext(fromPhase: PhaseComputed, toPhase: PhaseComputed | undefined, element: ElementInput): CellContext {
    const ce = computedElement(fromPhase.id, element.id);
    return {
      kind: "transition",
      phaseId: fromPhase.id,
      ownerWorking: true,
      isConsumption: fromPhase.isConsumption,
      durationYears: fromPhase.durationYears,
      isRetirementTransition: toPhase ? isRetirementTransition(element, fromPhase, toPhase) : false,
      carriedEndValue: ce?.endValue ?? 0,
      carried: ce?.carried ?? false,
      derivedStart: 0,
      derivedMortgage: 0,
      mortgageEnd: ce?.mortgageEnd ?? 0,
      // Verkehrswert = Eigenkapital + Resthypothek (beides am Phasenende).
      propertyValueEnd: (ce?.endValue ?? 0) + (ce?.mortgageEnd ?? 0),
      deflatorStart: fromPhase.cumulativeInflationStart,
      laterPhaseCount: laterPhaseCount(fromPhase),
      ahvCareer: careerFor(element),
      inheritedValues: {},
      ownerAgeStart: ownerAgeAtPhaseStart(fromPhase, element),
      // Ziele fuer die Anlage-Quote beim Kapitalbezug (Punkt C).
      investTargets: investTargetsOf(plan, toPhase),
      capitalFromTransfer: 0,
      capitalFromTransferSources: [],
    };
  }

  // Am Übergang nichts (mehr) zu tun: verkauft/getilgt ODER PK/3a nach der Pensionierung
  // (Besitzer ist zu Beginn der Von-Phase bereits pensioniert -> bereits bezogen/verrentet)
  // ODER AHV ausserhalb des Pensions-Übergangs.
  const transitionInactive = (el: ElementInput, fromPhase: PhaseComputed, toPhase?: PhaseComputed) =>
    inactiveAtTransition(computed, el, fromPhase, toPhase);

  function cashTransitionFor(phaseId: string): CashTransitionData {
    return plan.phases.find((p) => p.id === phaseId)?.cashTransition ?? {};
  }

  // Anzahl offener (noch nicht getroffener) Übergangs-Entscheide an einer Grenze.
  // Der Cash-Entscheid (einmalige Sonderein-/ausgaben) zählt mit.
  const transitionOpenCount = (fromPhase: PhaseComputed, toPhase: PhaseComputed) =>
    openTransitionCount(plan, computed, fromPhase, toPhase);

  // Ist der Übergangs-Entscheid dieses Elements noch offen?
  function transitionUnanswered(el: ElementInput, fromPhase: PhaseComputed, toPhase: PhaseComputed): boolean {
    if (transitionInactive(el, fromPhase, toPhase)) return false;
    const retire = isRetirementTransition(el, fromPhase, toPhase);
    return !isTransitionAnswered(el.category, retire, el.transitionValues[fromPhase.id] ?? {});
  }

  function transitionElements(fromPhase: PhaseComputed, toPhase?: PhaseComputed): ElementInput[] {
    return plan.elements
      .filter((el) => TRANSITION_CATEGORIES.includes(el.category))
      .filter((el) => !transitionInactive(el, fromPhase, toPhase))
      .sort((a, b) => a.orderIndex - b.orderIndex);
  }

  async function handleAddPhase(payload: { name?: string; durationYears?: number }) {
    await api.post(`/api/scenarios/${plan.id}/phases`, payload);
    setShowAddPhase(false);
    onChanged();
  }

  // Kurzfassung der Pensionierung fuer die Matrix-Ansicht: die eine Zahl, die zaehlt, plus
  // der Hinweis auf ungepruefte Vorgaben. Ein Klick fuehrt in den Bildschirm.
  const retirementSummaryText = (() => {
    const r = computed.retirement;
    if (r.gapAnnual === null) return null;
    const unconfirmed = plan.elements.filter(
      (e) => RETIREMENT_CATEGORIES.includes(e.category) && !retirementConfirmed(e)
    ).length;
    const luecke = r.gapAnnual < 0 ? `Rentenluecke ${formatChf(r.gapAnnual)}/Jahr` : `Ueberschuss ${formatChf(r.gapAnnual)}/Jahr`;
    return unconfirmed > 0 ? `${luecke} · ${unconfirmed} Vorgaben ungeprueft` : luecke;
  })();

  const hasPhases = computed.phases.length > 0;
  const firstPhase = computed.phases[0] ?? null;
  const lastPhase = computed.phases[computed.phases.length - 1] ?? null;

  return (
    <div className="flex flex-col gap-5">
      <NextSteps
        plan={plan}
        computed={computed}
        columns={columns}
        openCountFor={transitionOpenCount}
        onReview={(fromPhaseId) => setReviewFromPhaseId(fromPhaseId)}
        onAddElement={(cat) => {
          setAddCategory(cat);
          setShowAdd(true);
        }}
        onAddPhase={() => setShowAddPhase(true)}
        onOpenSensitivity={onOpenSensitivity}
      />

      {/* Kompakter Klotz: Grundprofil (25 %) · Zeitachse (50 %) · Kennzahlen (25 %). Auf
          schmalen Screens stapeln die drei. */}
      <div className="grid grid-cols-1 gap-4 lg:grid-cols-4">
        {/* Grundprofil -- Daten untereinander, «Bearbeiten» oben rechts. */}
        <div
          data-tour="profil"
          className={`flex flex-col gap-2 rounded-xl border px-4 py-3 shadow-sm lg:col-span-1 ${
            diff?.profileChanged ? "border-diff bg-diff-soft" : "border-border bg-surface"
          }`}
        >
          <div className="flex items-start justify-between gap-2">
            <span className="text-xs font-semibold uppercase tracking-wide text-faint">
              Grundprofil{diff?.profileChanged ? " · abweichend" : ""}
            </span>
            <button
              type="button"
              onClick={() => setPanel({ kind: "profile" })}
              className="flex shrink-0 items-center gap-1 rounded-lg border border-border px-2 py-0.5 text-xs font-medium text-muted hover:bg-surface-2"
            >
              <Settings2 className="h-3.5 w-3.5" /> Bearbeiten
            </button>
          </div>
          <div className="flex flex-col gap-1">
            {plan.persons.map((p) => (
              <span key={p.role} className="text-xs text-muted">
                {personLabel(p.role)}: {p.age} J., Pension {p.retirementAge}
              </span>
            ))}
            <span className="text-xs text-muted">Inflation {plan.inflationRateDefault}%</span>
          </div>
        </div>

        {/* Zeitachse */}
        <div data-tour="timeline" className="lg:col-span-2">
          <Timeline
            phases={computed.phases}
            persons={personAxes}
            ruinAge={computed.ruinAge}
            actualYears={actualYears}
            startYear={plan.startYear}
          />
        </div>

        {/* Kennzahlen: Endvermögen nominal + real (+ Ruin, falls vorhanden). */}
        <div data-tour="endwealth" className="flex flex-col justify-center gap-2 rounded-xl border border-border bg-surface px-4 py-3 shadow-sm lg:col-span-1">
          <span className="text-xs font-semibold uppercase tracking-wide text-faint">Endvermögen</span>
          <div>
            <div className="text-[11px] text-muted">Nominal</div>
            <div className="text-lg font-bold text-fg">
              {lastPhase ? formatChf(Math.round(lastPhase.endWealthNominal)) : "—"}
            </div>
          </div>
          <div>
            <div className="text-[11px] text-muted">Real (heutige Kaufkraft)</div>
            <div className="text-lg font-bold text-fg">
              {lastPhase ? formatChf(Math.round(lastPhase.endWealthReal)) : "—"}
            </div>
          </div>
          {computed.ruinAge !== null && (
            <div className="mt-0.5 rounded-lg bg-danger-soft px-2 py-1 text-xs font-medium text-danger">
              Kapital reicht nur bis Alter {computed.ruinAge}
            </div>
          )}
        </div>
      </div>

      {/* Ansicht: Matrix oder Pensionierung. Die Pensionierung steht bewusst gleichrangig
          NEBEN der Matrix und nicht in ihr: Sie ist keine Zelle, sondern eine eigene Frage --
          und die einzige, die man zwischen Szenarien systematisch variiert. */}
      {hasPhases && (
        <div className="flex flex-wrap items-center gap-2">
          <div className="inline-flex rounded-lg border border-border bg-surface p-0.5 text-sm">
            {(["matrix", "retirement"] as const).map((v) => (
              <button
                key={v}
                type="button"
                onClick={() => setView(v)}
                className={`flex items-center gap-1.5 rounded-md px-3 py-1 font-medium ${
                  view === v ? "bg-accent text-accent-fg" : "text-muted hover:bg-surface-2"
                }`}
              >
                {v === "matrix" ? <Table2 className="h-4 w-4" /> : <PiggyBank className="h-4 w-4" />}
                {v === "matrix" ? "Matrix" : "Pensionierung"}
              </button>
            ))}
          </div>
          {view === "matrix" && retirementSummaryText && (
            <button
              type="button"
              onClick={() => setView("retirement")}
              className="truncate text-xs text-muted underline decoration-dotted underline-offset-2 hover:text-fg"
              title="Zur Pensionierung"
            >
              {retirementSummaryText}
            </button>
          )}
        </div>
      )}

      {view === "retirement" && (
        <RetirementPanel plan={plan} computed={computed} onSaved={onChanged} />
      )}

      {/* Anzeige-Umschalter (nominal/real, Plan/Ist) -- direkt über der Matrix, weil er nur
          deren Zahlen steuert. */}
      {hasPhases && view === "matrix" && (
        <div className="flex items-center gap-2">
          <span className="text-xs text-muted">Anzeige</span>
          <div className="inline-flex rounded-lg border border-border bg-surface p-0.5 text-xs">
            {(["nominal", "both", "real"] as ValueMode[]).map((m) => (
              <button
                key={m}
                type="button"
                onClick={() => changeValueMode(m)}
                className={`rounded-md px-2.5 py-1 font-medium ${
                  valueMode === m ? "bg-accent text-accent-fg" : "text-muted hover:bg-surface-2"
                }`}
              >
                {m === "nominal" ? "Nominal" : m === "both" ? "Beide" : "Real"}
              </button>
            ))}
          </div>
          <span className="text-[11px] text-faint">real = kaufkraftbereinigt (Planbeginn)</span>

          {/* Zweite Achse: Datenquelle. Erscheint nur, wenn es überhaupt Ist-Werte gibt --
              sonst wäre es ein Umschalter ohne Gegenstück. */}
          {hasActuals && (
            <>
              <span className="ml-2 text-xs text-muted">Zahlen</span>
              <div className="inline-flex rounded-lg border border-border bg-surface p-0.5 text-xs">
                {DATA_SOURCE_OPTIONS.map((o) => (
                  <button
                    key={o.value}
                    type="button"
                    onClick={() => setDataSource(o.value)}
                    title={o.label}
                    className={`rounded-md px-2.5 py-1 font-medium ${
                      dataSource === o.value ? "bg-accent text-accent-fg" : "text-muted hover:bg-surface-2"
                    }`}
                  >
                    {o.short}
                  </button>
                ))}
              </div>
              {dataSource === "ACTUAL" && (
                <span className="text-[11px] text-faint">Abweichung gegenüber Plan farbig</span>
              )}
            </>
          )}
        </div>
      )}

      {!hasPhases && (
        <EmptyState
          icon={<Plus className="h-6 w-6" />}
          title="Noch keine Lebensphasen"
          text="Deine Planung besteht aus Lebensphasen – Abschnitten, in denen deine Finanzen ähnlich laufen (z. B. «bis zur Pension»). Leg die erste an, danach kommen die finanziellen Elemente."
        >
          <Button onClick={() => setShowAddPhase(true)}>
            <Plus className="h-4 w-4" /> Erste Lebensphase
          </Button>
        </EmptyState>
      )}

      {hasPhases && (
        <div className="flex flex-wrap items-center gap-2">
          <Button size="sm" className="px-3 py-1.5 text-sm" onClick={() => setShowAdd(true)}>
            <Plus className="h-4 w-4" /> Finanzielles Element
          </Button>
          <button
            type="button"
            onClick={() => setShowAddPhase(true)}
            className="flex items-center gap-1.5 rounded-lg border border-dashed border-accent bg-accent-soft px-3 py-1.5 text-sm font-medium text-accent-soft-fg transition-colors hover:bg-accent-soft"
          >
            <Plus className="h-4 w-4" /> Lebensphase
          </button>
          {/* Alle Kategoriegruppen auf einen Schlag auf- oder zuklappen. */}
          <button
            type="button"
            onClick={() =>
              setCollapsedCats((prev) =>
                prev.size === 0 ? new Set(CATEGORY_ORDER.filter((c) => (elementsByCategory.get(c)?.length ?? 0) > 0)) : new Set()
              )
            }
            className="ml-auto flex items-center gap-1.5 rounded-lg border border-border px-2.5 py-1.5 text-xs font-medium text-muted transition-colors hover:bg-surface-2 hover:text-fg"
          >
            {collapsedCats.size === 0 ? (
              <>
                <ChevronRight className="h-3.5 w-3.5" /> Alle zuklappen
              </>
            ) : (
              <>
                <ChevronDown className="h-3.5 w-3.5" /> Alle aufklappen
              </>
            )}
          </button>
        </div>
      )}

      {computed.ruinAge !== null && (
        <div className="flex flex-wrap items-center gap-2 rounded-xl border border-danger bg-danger-soft px-4 py-2 text-sm font-medium text-danger">
          <AlertCircle className="h-4 w-4 shrink-0" />
          <span className="min-w-0 flex-1">
            Kapital aufgebraucht mit Alter {computed.ruinAge} – das Gesamtvermögen (inkl. Cash) fällt danach unter 0.
          </span>
          {onOpenSensitivity && (
            <button
              type="button"
              onClick={onOpenSensitivity}
              className="flex shrink-0 items-center gap-1.5 rounded-lg border border-danger px-2.5 py-1 text-xs font-semibold text-danger transition-colors hover:bg-danger hover:text-white"
            >
              <Tornado className="h-3.5 w-3.5" /> Wirksamsten Hebel finden
            </button>
          )}
        </div>
      )}

      {/* Matrix: eigener Scrollbereich, damit Phasen-Köpfe (oben) UND Elementnamen (links)
          beim Scrollen sichtbar bleiben. */}
      {hasPhases && view === "matrix" && (
        <div data-tour="matrix" className="max-h-[75vh] overflow-auto rounded-xl border border-border bg-surface shadow-sm">
          {/* Feste Spaltenbreiten: Alle Phasenspalten sind gleich breit -- bei einer einzigen
              Phase bleibt die Tabelle dadurch schmal, bei vielen wird horizontal gescrollt.
              Ein w-full haette die Spalten je nach Anzahl unterschiedlich gedehnt. */}
          <table className="border-collapse text-sm">
            <thead>
              <tr>
                <th className="sticky left-0 top-0 z-40 w-56 min-w-56 border-b border-r border-border bg-surface-2 px-3 py-2 text-left text-xs font-semibold uppercase tracking-wide text-faint">
                  Finanzielle Elemente
                </th>
                {columns.map((col) =>
                  col.kind === "phase" ? (
                    <PhaseHeader
                      key={col.phase.id}
                      phase={col.phase}
                      personLabel={personLabel}
                      mode={valueMode}
                      diffKind={diff?.phaseHeader.get(col.phase.id) ?? null}
                      onClick={() => setPanel({ kind: "phase", phaseId: col.phase.id })}
                      onExpand={() => setDetailFor({ kind: "phase", id: col.phase.id })}
                      onDistributeCapital={
                        col.phase.sequenceNumber > 1 ? () => setDistribute({ kind: "capital", phaseId: col.phase.id }) : null
                      }
                      onDistributeRates={() => setDistribute({ kind: "rates", phaseId: col.phase.id })}
                      onDelete={
                        col.phase.sequenceNumber === computed.phases.length
                          ? () => void deletePhase(col.phase.id, col.phase.name)
                          : null
                      }
                      active={panel?.kind === "phase" && panel.phaseId === col.phase.id}
                    />
                  ) : (
                    <TransitionHeader
                      key={`t-${col.fromPhase.id}`}
                      counts={transitionOpenCount(col.fromPhase, col.toPhase)}
                      onClick={() => setReviewFromPhaseId(col.fromPhase.id)}
                    />
                  )
                )}
              </tr>
            </thead>
            <tbody>
              {/* Cash-Zeile (systemseitig, immer sichtbar, read-only). */}
              <tr className="bg-surface-2/50">
                <td data-tour="cash" className="sticky left-0 z-10 border-b border-r border-border bg-surface px-3 py-1.5">
                  <span className="flex items-center gap-1.5 text-xs font-semibold text-fg">
                    <Wallet className="h-4 w-4 text-accent" /> Cash
                  </span>
                  <span className="text-[10px] text-faint">verfügbares Kapital</span>
                </td>
                {columns.map((col) => {
                  const isFirst = col.kind === "phase" && col.phase.sequenceNumber === 1;
                  return col.kind === "phase" ? (
                    <td
                      key={`cash-${col.phase.id}`}
                      onClick={isFirst ? () => setPanel({ kind: "cashInitial" }) : undefined}
                      title={isFirst ? "Cash-Anfangswert bearbeiten" : undefined}
                      className={`border-b border-r border-border px-2 py-1.5 text-center text-xs ${
                        isFirst ? "cursor-pointer hover:bg-accent-soft" : ""
                      } ${col.phase.cashNegative ? "font-semibold text-danger" : "text-fg"} ${
                        isFirst && diff?.cashInitialChanged ? "bg-diff-soft ring-1 ring-inset ring-diff/40" : ""
                      }`}
                    >
                      <span className="whitespace-nowrap">
                        {valStr(col.phase.cashStart, col.phase.cumulativeInflationStart, valueMode)}{" "}
                        <span className="text-faint">→</span>{" "}
                        {valStr(col.phase.cashEnd, col.phase.cumulativeInflationEnd, valueMode)}
                      </span>
                    </td>
                  ) : (
                    (() => {
                      // Übergangszelle der Cash-Zeile: einmalige Sonderein-/ausgaben.
                      const ct = cashTransitionFor(col.fromPhase.id);
                      const open = !isCashTransitionAnswered(ct);
                      return (
                        <td
                          key={`cash-t-${col.fromPhase.id}`}
                          onClick={() => setPanel({ kind: "cashTransition", fromPhaseId: col.fromPhase.id })}
                          title="Einmalige Sonderein-/ausgaben"
                          className={`cursor-pointer border-b border-r border-border px-2 py-1.5 text-center text-[11px] ${
                            open
                              ? "bg-attention font-semibold text-attention-fg"
                              : diff?.cashTransitionCell.has(col.fromPhase.id)
                                ? "bg-diff-soft text-diff ring-1 ring-inset ring-diff/40"
                                : "bg-accent-soft/40 text-accent"
                          }`}
                        >
                          {cashTransitionSummary(ct)}
                        </td>
                      );
                    })()
                  );
                })}
              </tr>
              {CATEGORY_ORDER.map((cat) => {
                const els = elementsByCategory.get(cat)!;
                if (els.length === 0) return null;
                const collapsed = collapsedCats.has(cat);
                return (
                  <FragmentRows key={cat}>
                    <tr className="bg-surface-2">
                      <td
                        className="sticky left-0 z-10 cursor-pointer border-b border-r border-border bg-surface-2 px-3 py-1.5"
                        onClick={() =>
                          setCollapsedCats((prev) => {
                            const next = new Set(prev);
                            if (next.has(cat)) next.delete(cat);
                            else next.add(cat);
                            return next;
                          })
                        }
                      >
                        <span className="flex items-center gap-1.5 text-xs font-semibold text-muted">
                          {collapsed ? <ChevronRight className="h-3.5 w-3.5" /> : <ChevronDown className="h-3.5 w-3.5" />}
                          <span className="text-accent">{CATEGORY_ICON[cat]}</span>
                          {CATEGORY_LABELS[cat]}
                        </span>
                      </td>
                      {/* Zugeklappt: Summe der Elementwerte je Phase -- sonst verschwindet die
                          Information beim Zuklappen. Aufgeklappt bleibt die Zeile leer, weil
                          man die Einzelwerte darunter sieht. */}
                      {collapsed
                        ? columns.map((col) =>
                            col.kind === "phase" ? (
                              <td
                                key={`sum-${cat}-${col.phase.id}`}
                                className="border-b border-r border-border bg-surface-2 px-2 py-1.5 text-center text-xs font-semibold text-muted"
                              >
                                {(() => {
                                  const rows = els
                                    .map((e) => computedElement(col.phase.id, e.id))
                                    .filter((ce): ce is NonNullable<typeof ce> => !!ce && ce.status === "ACTIVE");
                                  if (rows.length === 0) return "";
                                  const start = rows.reduce((sum, ce) => sum + ce.startValue, 0);
                                  const end = rows.reduce((sum, ce) => sum + ce.endValue, 0);
                                  return (
                                    <span className="whitespace-nowrap">
                                      {valStr(start, col.phase.cumulativeInflationStart, valueMode)}{" "}
                                      <span className="text-faint">→</span>{" "}
                                      {valStr(end, col.phase.cumulativeInflationEnd, valueMode)}
                                    </span>
                                  );
                                })()}
                              </td>
                            ) : (
                              <td key={`sum-t-${cat}-${col.fromPhase.id}`} className="border-b border-r border-border bg-surface-2" />
                            )
                          )
                        : <td colSpan={columns.length} className="border-b border-border" />}
                    </tr>
                    {!collapsed &&
                      els.map((el) => (
                        <tr key={el.id} className="hover:bg-surface-2">
                          <td className={`group/row sticky left-0 z-10 border-b border-r border-border px-3 py-1.5 ${rowDiff(el.id) || "bg-surface"}`}>
                            <div className="flex items-center gap-1 text-xs font-medium text-fg">
                              <span className="min-w-0 flex-1 truncate">{el.name}</span>
                              {diff?.elementRow.get(el.id) === "added" && (
                                <span className="rounded bg-diff-added px-1 text-[9px] font-semibold uppercase text-white">neu</span>
                              )}
                              {/* Aktionen zum Element selbst (phasenunabhängig): umbenennen,
                                  löschen, Detailansicht -- bewusst IMMER sichtbar, damit sie
                                  auch ohne Maus (Touch) erreichbar sind. */}
                              <button
                                type="button"
                                aria-label={`${el.name} umbenennen`}
                                title="Umbenennen und Zuordnung ändern"
                                onClick={(e) => {
                                  e.stopPropagation();
                                  setPanel({ kind: "elementMeta", elementId: el.id });
                                }}
                                className="shrink-0 rounded p-0.5 text-faint hover:bg-accent-soft hover:text-accent"
                              >
                                <Pencil className="h-3 w-3" />
                              </button>
                              <button
                                type="button"
                                aria-label={`${el.name} löschen`}
                                title="Element löschen"
                                onClick={(e) => {
                                  e.stopPropagation();
                                  void deleteElement(el.id, el.name);
                                }}
                                className="shrink-0 rounded p-0.5 text-faint hover:bg-danger-soft hover:text-danger"
                              >
                                <Trash2 className="h-3 w-3" />
                              </button>
                              <button
                                type="button"
                                aria-label={`Detailansicht ${el.name}`}
                                title="Detailansicht (nur lesen)"
                                onClick={(e) => {
                                  e.stopPropagation();
                                  setDetailFor({ kind: "element", id: el.id });
                                }}
                                className="shrink-0 rounded p-0.5 text-faint hover:bg-accent-soft hover:text-accent"
                              >
                                <Maximize2 className="h-3 w-3" />
                              </button>
                            </div>
                            {el.ownerRole && el.ownerRole !== "HOUSEHOLD" && (
                              <div className="text-[10px] text-faint">{personLabel(el.ownerRole)}</div>
                            )}
                            {/* Trend über alle Planjahre -- die per-Jahr-Werte existieren seit 0.11. */}
                            <Sparkline
                              values={computed.phases.flatMap(
                                (ph) => ph.elements.find((e) => e.elementId === el.id)?.yearly?.map((y) => y.value) ?? []
                              )}
                              className="mt-0.5"
                            />
                          </td>
                          {columns.map((col) => {
                            if (col.kind === "phase") {
                              const ce = computedElement(col.phase.id, el.id);
                              return (
                                <td
                                  key={col.phase.id}
                                  onClick={() => setPanel({ kind: "cell", elementId: el.id, phaseId: col.phase.id })}
                                  title={cellDiff(el.id, col.phase.id) ? "Weicht von der Vorlage ab" : undefined}
                                  className={`cursor-pointer border-b border-r border-border px-2 py-1.5 text-center text-xs ${
                                    ce?.locked ? "text-faint" : "text-fg"
                                  } ${cellDiff(el.id, col.phase.id)}`}
                                >
                                  {phaseCellContent(ce, col.phase, valueMode, planEndOf(ce?.elementId, col.phase.id))}
                                </td>
                              );
                            }
                            const locked = TRANSITION_CATEGORIES.includes(el.category) && transitionInactive(el, col.fromPhase, col.toPhase);
                            const canTransition = TRANSITION_CATEGORIES.includes(el.category) && !locked;
                            const open = canTransition && transitionUnanswered(el, col.fromPhase, col.toPhase);
                            return (
                              <td
                                key={`t-${col.fromPhase.id}`}
                                onClick={() =>
                                  canTransition &&
                                  setPanel({ kind: "transition", elementId: el.id, fromPhaseId: col.fromPhase.id })
                                }
                                title={transDiff(el.id, col.fromPhase.id) ? "Weicht von der Vorlage ab" : undefined}
                                className={`border-b border-r border-border px-2 py-1.5 text-center text-[11px] ${
                                  canTransition ? "cursor-pointer" : "text-faint"
                                } ${
                                  // Offene Entscheide tragen die Attention-Farbe (getrennt vom
                                  // Akzent: "hier fehlt was" ist nicht "hier kannst du klicken").
                                  open
                                    ? "bg-attention font-semibold text-attention-fg"
                                    : transDiff(el.id, col.fromPhase.id)
                                      ? "bg-diff-soft text-diff ring-1 ring-inset ring-diff/40"
                                      : canTransition
                                        ? "bg-accent-soft/40 text-accent"
                                        : ""
                                }`}
                              >
                                {canTransition ? transitionSummary(el, col.fromPhase, col.toPhase) : locked ? "–" : "→"}
                              </td>
                            );
                          })}
                        </tr>
                      ))}
                  </FragmentRows>
                );
              })}
              {/* Geisterzeilen: in der Vorlage vorhanden, in diesem Szenario gelöscht. */}
              {(diff?.removedElements ?? []).map((r) => (
                <tr key={`removed-${r.id}`} className="bg-diff-removed-soft">
                  <td className="sticky left-0 z-10 border-b border-r border-border bg-diff-removed-soft px-3 py-1.5">
                    <div className="flex items-center gap-1 truncate text-xs font-medium text-diff-removed line-through">
                      {r.name}
                    </div>
                    <div className="text-[10px] text-diff-removed">{CATEGORY_LABELS[r.category]} · entfernt</div>
                  </td>
                  <td colSpan={columns.length} className="border-b border-border px-3 py-1.5 text-center text-[11px] text-diff-removed">
                    In diesem Szenario entfernt
                  </td>
                </tr>
              ))}
              {plan.elements.length === 0 && (diff?.removedElements.length ?? 0) === 0 && (
                <tr>
                  <td className="sticky left-0 bg-surface px-3 py-4 text-xs text-faint" colSpan={columns.length + 1}>
                    Noch keine finanziellen Elemente. Füge oben dein erstes Element hinzu.
                  </td>
                </tr>
              )}
            </tbody>
          </table>
        </div>
      )}

      {/* Inspector-Panel: alle Einzel-Bearbeitungen. Der key erzwingt beim Wechsel der
          Auswahl einen Neuaufbau, damit kein Formular-Zustand der vorherigen Zelle
          übrig bleibt (gleiches Muster wie zuvor bei den Dialogen). */}
      {panel && renderPanel()}

      {showAdd && firstPhase && (
        <AddElementDialog
          plan={plan}
          firstPhase={firstPhase}
          initialCategory={addCategory}
          onClose={() => {
            setShowAdd(false);
            setAddCategory(null);
          }}
          onCreated={() => {
            setShowAdd(false);
            setAddCategory(null);
            toast("success", "Element angelegt.");
            onChanged();
          }}
        />
      )}

      {showAddPhase && (
        <AddPhaseDialog
          maxDurationYears={nextPhaseCap()}
          onClose={() => setShowAddPhase(false)}
          onCreate={handleAddPhase}
        />
      )}

      {reviewFromPhaseId && (() => {
        const fromPhase = computed.phases.find((p) => p.id === reviewFromPhaseId);
        if (!fromPhase) return null;
        const toIndex = computed.phases.findIndex((p) => p.id === fromPhase.id) + 1;
        const toPhase = computed.phases[toIndex];
        const els = transitionElements(fromPhase, toPhase);
        return (
          <TransitionReviewDialog
            plan={plan}
            computed={computed}
            fromPhase={fromPhase}
            toPhase={toPhase}
            elements={els}
            initialCash={cashTransitionFor(fromPhase.id)}
            buildContext={(el) => buildTransitionContext(fromPhase, toPhase, el)}
            isRetirement={(el) => (toPhase ? isRetirementTransition(el, fromPhase, toPhase) : false)}
            onClose={() => setReviewFromPhaseId(null)}
            onSaved={() => {
              setReviewFromPhaseId(null);
              onChanged();
            }}
          />
        );
      })()}

      {detailFor?.kind === "element" && explained && (() => {
        const el = plan.elements.find((e) => e.id === detailFor.id);
        if (!el) return null;
        return (
          <ElementDetailDialog
            key={`det-${detailFor.id}`}
            elementId={el.id}
            name={el.name}
            category={el.category}
            computed={explained}
            onClose={() => setDetailFor(null)}
            onOpenSpec={onOpenSpec}
          />
        );
      })()}

      {detailFor?.kind === "phase" && explained && (() => {
        const ph = explained.phases.find((p) => p.id === detailFor.id);
        if (!ph) return null;
        return (
          <PhaseDetailDialog
            key={`detph-${detailFor.id}`}
            phase={ph}
            computed={computed}
            isFirst={ph.sequenceNumber === 1}
            onClose={() => setDetailFor(null)}
            onOpenSpec={onOpenSpec}
          />
        );
      })()}

      {distribute?.kind === "capital" && (
        <CapitalDistributionDialog
          key={`cap-${distribute.phaseId}`}
          plan={plan}
          computed={computed}
          phaseId={distribute.phaseId}
          onClose={() => setDistribute(null)}
          onSaved={() => {
            setDistribute(null);
            toast("success", "Kapital verteilt.");
            onChanged();
          }}
        />
      )}

      {distribute?.kind === "rates" && (
        <RateDistributionDialog
          key={`rate-${distribute.phaseId}`}
          plan={plan}
          computed={computed}
          phaseId={distribute.phaseId}
          onClose={() => setDistribute(null)}
          onSaved={() => {
            setDistribute(null);
            toast("success", "Raten gespeichert.");
            onChanged();
          }}
        />
      )}
    </div>
  );

  // Nächste Phasen-Kappung (für das Phase-Popup).
  // Element loeschen -- neu auch direkt aus der Zeile heraus.
  async function deleteElement(elementId: string, elementName: string) {
    const ok = await confirmDialog({
      title: "Element löschen?",
      message: `«${elementName}» wird aus ALLEN Lebensphasen entfernt, samt Werten und Übergangs-Entscheiden.`,
      confirmLabel: "Endgültig löschen",
      danger: true,
    });
    if (!ok) return;
    try {
      await api.delete(`/api/elements/${elementId}`);
      setPanel(null);
      onChanged();
      toast("success", "Element gelöscht.");
    } catch (e) {
      toast("error", e instanceof Error ? e.message : "Löschen fehlgeschlagen.");
    }
  }

  async function deletePhase(phaseId: string, phaseName: string) {
    const ok = await confirmDialog({
      title: "Lebensphase löschen?",
      message: `«${phaseName}» wird mit allen erfassten Werten und Übergangs-Entscheiden entfernt.`,
      confirmLabel: "Endgültig löschen",
      danger: true,
    });
    if (!ok) return;
    try {
      await api.delete(`/api/phases/${phaseId}`);
      setPanel(null);
      onChanged();
      toast("success", "Lebensphase gelöscht.");
    } catch (e) {
      toast("error", e instanceof Error ? e.message : "Löschen fehlgeschlagen.");
    }
  }

  function nextPhaseCap(): number | null {
    // Simpel aus den Personen ableiten (Jahre nach Planbeginn = Summe der Dauern).
    const yearsBefore = plan.phases.reduce((s, p) => s + p.durationYears, 0);
    const caps = plan.persons
      .map((p) => p.retirementAge - (p.age + yearsBefore))
      .filter((d) => d > 0);
    return caps.length > 0 ? Math.min(...caps) : null;
  }

  // Inhalt des Inspector-Panels je nach Auswahl.
  function renderPanel() {
    if (!panel) return null;
    const close = () => setPanel(null);
    const closeAndRefresh = () => {
      setPanel(null);
      onChanged();
    };

    switch (panel.kind) {
      case "elementMeta": {
        const el = plan.elements.find((e) => e.id === panel.elementId);
        if (!el) return null;
        return (
          <InspectorShell key={`meta-${panel.elementId}`} title={`Element: ${el.name}`} onClose={close}>
            <ElementMetaPanel
              element={el}
              plan={plan}
              personLabel={personLabel}
              onSaved={closeAndRefresh}
              onDelete={() => deleteElement(el.id, el.name)}
            />
          </InspectorShell>
        );
      }
      case "phase": {
        const phase = computed.phases.find((p) => p.id === panel.phaseId);
        const phaseInput = plan.phases.find((p) => p.id === panel.phaseId);
        if (!phase || !phaseInput) return null;
        return (
          <InspectorShell key={`ph-${panel.phaseId}`} title={`Lebensphase: ${phase.name}`} onClose={close}>
            <PhaseDetail
              phase={phaseInput}
              allPhases={plan.phases}
              maxDurationYears={phase.maxDurationYears}
              isLast={phase.sequenceNumber === computed.phases.length}
              laterPhaseCount={laterPhaseCount(phase)}
              onSaved={closeAndRefresh}
              onDeleted={closeAndRefresh}
            />
          </InspectorShell>
        );
      }
      case "cell": {
        const element = plan.elements.find((e) => e.id === panel.elementId);
        const phase = computed.phases.find((p) => p.id === panel.phaseId);
        if (!element || !phase) return null;
        return (
          <InspectorShell
            key={`${panel.elementId}-${panel.phaseId}`}
            title={element.name}
            subtitle={`Lebensphase: ${phase.name}`}
            onClose={close}
          >
            <ElementDetail
              element={element}
              context={buildPhaseContext(phase, element)}
              phaseData={element.phaseValues[phase.id] ?? {}}
              // Für die Übernahme von Raten über Phasen hinweg: alle Phasen und die dort
              // bereits erfassten Werte (sie müssen beim Übertragen erhalten bleiben).
              allPhases={plan.phases.map((p) => ({ id: p.id, sequenceNumber: p.sequenceNumber }))}
              phaseDataByPhase={element.phaseValues}
              transitionData={{}}
              onSaved={closeAndRefresh}
              onDeleteElement={() => {
                setPanel(null);
                deleteElement(element.id, element.name);
              }}
            />
          </InspectorShell>
        );
      }
      case "transition": {
        const element = plan.elements.find((e) => e.id === panel.elementId);
        const fromPhase = computed.phases.find((p) => p.id === panel.fromPhaseId);
        if (!element || !fromPhase) return null;
        const toPhase = computed.phases[computed.phases.findIndex((p) => p.id === fromPhase.id) + 1];
        return (
          <TransitionCellPanel
            plan={plan}
            computed={computed}
            key={`${panel.elementId}-${panel.fromPhaseId}`}
            element={element}
            fromPhase={fromPhase}
            toPhase={toPhase}
            context={buildTransitionContext(fromPhase, toPhase, element)}
            onClose={close}
            onSaved={closeAndRefresh}
          />
        );
      }
      case "cashTransition": {
        const fromPhase = computed.phases.find((p) => p.id === panel.fromPhaseId);
        if (!fromPhase) return null;
        const toPhase = computed.phases[computed.phases.findIndex((p) => p.id === fromPhase.id) + 1];
        return (
          <CashTransitionPanel
            key={`ct-${panel.fromPhaseId}`}
            fromPhase={fromPhase}
            toPhase={toPhase}
            initial={cashTransitionFor(fromPhase.id)}
            onClose={close}
            onSaved={closeAndRefresh}
          />
        );
      }
      case "cashInitial":
        return <CashInitialPanel key="cash-init" plan={plan} onClose={close} onSaved={closeAndRefresh} />;
      case "profile":
        return <ProfilePanel key="profile" plan={plan} onClose={close} onSaved={closeAndRefresh} />;
    }
  }


  function transitionSummary(el: ElementInput, fromPhase: PhaseComputed, toPhase: PhaseComputed): string {
    const td = el.transitionValues[fromPhase.id] ?? {};
    switch (el.category) {
      case "AHV":
        return td.reviewed === true ? "Geprüft" : "?";
      case "OTHER_ASSET":
        return td.decision === "SELL"
          ? "Verkauf"
          : td.decision === "PARTIAL"
            ? `Teilverkauf −${formatChf(num(td.partialSaleAmount))}`
            : td.decision === "HOLD"
              ? "Halten"
              : "?";
      case "REAL_ESTATE":
        if (td.decision === "SELL") return "Verkauf";
        if (td.decision === undefined) return "?";
        return num(td.extraAmortization) > 0 ? `Sonderamort. −${formatChf(num(td.extraAmortization))}` : "Halten";
      case "PENSION_FUND":
        if (isRetirementTransition(el, fromPhase, toPhase)) {
          return td.payoutMode === "CAPITAL" ? "Kapital" : td.payoutMode === "COMBI" ? "Kombi" : td.payoutMode === "PENSION" ? "Rente" : "?";
        }
        if (td.withdrawalMode === undefined) return "?";
        return td.withdrawalMode === "AMOUNT" && num(td.withdrawal) > 0 ? `−${formatChf(num(td.withdrawal))}` : "Kein Bezug";
      case "PILLAR_3A":
        if (isRetirementTransition(el, fromPhase, toPhase)) return "Bezug";
        if (td.withdrawalMode === undefined) return "?";
        return td.withdrawalMode === "AMOUNT" && num(td.withdrawal) > 0 ? `−${formatChf(num(td.withdrawal))}` : "Kein Bezug";
      case "OTHER_DEBT":
        return num(td.immediateRepayment) > 0 ? "Tilgung" : "→";
      default:
        return "→";
    }
  }
}

// Zellinhalt: Start- UND Zielwert für wertbehaftete Elemente, sonst die Kennzahl.
const START_END_CATEGORIES: ElementCategory[] = [...VALUE_CATEGORIES, "INCOME", "EXPENSE"];

type ValueMode = "nominal" | "both" | "real";
const VALUE_MODE_KEY = "fpt-value-mode";

// Realwert = nominal / kumulierte Inflation (Kaufkraft zum Planbeginn).
function realOf(nominal: number, deflator: number): number {
  return Math.round(nominal / (deflator || 1));
}

// Reiner Text (fuer Titel/Tooltips und einzeilige Faelle).
function valStr(nominal: number, deflator: number, mode: ValueMode): string {
  if (mode === "real") return formatChf(realOf(nominal, deflator));
  if (mode === "both") return `${formatChf(nominal)} (${formatChf(realOf(nominal, deflator))})`;
  return formatChf(nominal);
}

// Im Modus "Beide" steht der Realwert in Klammern in einer EIGENEN Zeile unter dem nominalen
// Wert -- nebeneinander wird die Zeile zu lang und die Spalten unnoetig breit. Der Pfeil
// wiederholt sich auf der zweiten Zeile, damit der Zeitbezug Start -> Ende erhalten bleibt.
function ValuePair({
  start,
  end,
  deflatorStart,
  deflatorEnd,
  mode,
  devEnd,
}: {
  start: number;
  end: number;
  deflatorStart: number;
  deflatorEnd: number;
  mode: ValueMode;
  // Abweichung des ENDwerts gegenüber dem Plan (nur in der Ist-Sicht gesetzt). Bewusst nur
  // ein Wert statt Start und Ende: Die Zelle soll nicht zur zweiten Tabelle werden.
  devEnd?: number | null;
}) {
  const arrow = <span className="text-faint">→</span>;
  return (
    <span className="inline-flex flex-col">
      <span className="whitespace-nowrap tabular-nums">
        {mode === "real" ? formatChf(realOf(start, deflatorStart)) : formatChf(start)} {arrow}{" "}
        {mode === "real" ? formatChf(realOf(end, deflatorEnd)) : formatChf(end)}
        <Deviation value={devEnd} deflator={mode === "real" ? deflatorEnd : 1} />
      </span>
      {mode === "both" && (
        <span className="whitespace-nowrap tabular-nums text-faint">
          ({formatChf(realOf(start, deflatorStart))}) {arrow} ({formatChf(realOf(end, deflatorEnd))})
          <Deviation value={devEnd} deflator={deflatorEnd} />
        </span>
      )}
    </span>
  );
}

// Die Abweichung trägt als einziges Element Farbe -- würde man die Beträge selbst einfärben,
// entstünde ein Ampelteppich, in dem nichts mehr heraussticht.
function Deviation({ value, deflator = 1 }: { value?: number | null; deflator?: number }) {
  if (value == null || Math.round(value / (deflator || 1)) === 0) return null;
  const v = Math.round(value / (deflator || 1));
  return (
    <span className={`ml-1.5 font-semibold ${v > 0 ? "text-success" : "text-danger"}`}>
      {v > 0 ? "▲ +" : "▼ −"}
      {formatChf(Math.abs(v))}
    </span>
  );
}

// Einzelwert, gleiche Konvention.
function ValueSingle({ value, deflator, mode }: { value: number; deflator: number; mode: ValueMode }) {
  return (
    <span className="inline-flex flex-col">
      <span className="whitespace-nowrap tabular-nums">
        {mode === "real" ? formatChf(realOf(value, deflator)) : formatChf(value)}
      </span>
      {mode === "both" && (
        <span className="whitespace-nowrap tabular-nums text-faint">({formatChf(realOf(value, deflator))})</span>
      )}
    </span>
  );
}

function phaseCellContent(
  ce: ReturnType<PhaseComputed["elements"]["find"]> | undefined,
  phase: PhaseComputed,
  mode: ValueMode,
  // Endwert desselben Elements in derselben Phase laut PLAN -- null in der Plan-Sicht.
  planEnd?: number | null
): React.ReactNode {
  if (!ce) return "–";
  if (ce.note) return ce.note;
  const isFlow = ce.category === "INCOME" || ce.category === "EXPENSE";
  const dS = phase.cumulativeInflationStart;
  const dE = isFlow ? phase.flowDeflatorEnd : phase.cumulativeInflationEnd;
  const devEnd = planEnd == null ? null : ce.endValue - planEnd;
  if (START_END_CATEGORIES.includes(ce.category) && (ce.startValue !== 0 || ce.endValue !== 0)) {
    return (
      <ValuePair start={ce.startValue} end={ce.endValue} deflatorStart={dS} deflatorEnd={dE} mode={mode} devEnd={devEnd} />
    );
  }
  if ((ce.category === "AHV" || ce.category === "PENSION_FUND") && ce.startValue !== 0) {
    return (
      <span className="inline-flex flex-col">
        <span className="whitespace-nowrap">Rente {mode === "real" ? formatChf(realOf(ce.startValue, dS)) : formatChf(ce.startValue)}</span>
        {mode === "both" && (
          <span className="whitespace-nowrap tabular-nums text-faint">({formatChf(realOf(ce.startValue, dS))})</span>
        )}
      </span>
    );
  }
  return ce.summary || "–";
}

function PhaseHeader({
  phase,
  personLabel,
  mode,
  diffKind,
  onClick,
  onExpand,
  onDistributeCapital,
  onDistributeRates,
  onDelete,
  active,
}: {
  phase: PhaseComputed;
  personLabel: (role: string) => string;
  mode: ValueMode;
  diffKind: "changed" | "added" | "removed" | null;
  onClick: () => void;
  onExpand: () => void;
  // null = Phase 1: dort gibt es kein verteilbares Übergangs-Kapital (additionalInvestment
  // wird in der ersten Phase von der Berechnung ignoriert, dort zählt der Startwert).
  onDistributeCapital: (() => void) | null;
  onDistributeRates: () => void;
  // null = nicht die letzte Phase (nur die letzte lässt sich löschen).
  onDelete: (() => void) | null;
  active: boolean;
}) {
  const quotaLabel = phase.isConsumption ? "Verzehrquote" : "Sparquote";
  const pot = capitalPot(phase);
  const dS = phase.cumulativeInflationStart;
  const dE = phase.cumulativeInflationEnd; // Bestandswerte (Cash, Vermögen)
  const dF = phase.flowDeflatorEnd; // Flow-Werte (Einkommen, Ausgaben, Quote)
  return (
    <th
      onClick={onClick}
      className={`group/ph sticky top-0 z-30 w-52 min-w-52 max-w-52 cursor-pointer border-b border-r border-border px-2 py-2 text-left align-top ${
        active
          ? "bg-accent-soft"
          : diffKind === "added"
            ? "bg-diff-added-soft"
            : diffKind === "changed"
              ? "bg-diff-soft"
              : "bg-surface"
      }`}
    >
      <div className="flex items-center gap-1">
        <span className="min-w-0 flex-1 truncate text-xs font-semibold text-fg">{phase.name}</span>
        {diffKind === "added" && (
          <span className="rounded bg-diff-added px-1 text-[9px] font-semibold uppercase text-white">neu</span>
        )}
        {phase.cashNegative ? (
          <AlertCircle className="h-3.5 w-3.5 shrink-0 text-danger" />
        ) : (
          <CheckCircle2 className="h-3.5 w-3.5 shrink-0 text-success" />
        )}
        {/* Aktionen zur Phase. Der Kopf selbst öffnet ebenfalls das Bearbeiten-Panel; die
            Knöpfe müssen das Event deshalb stoppen, sonst gingen zwei Dinge gleichzeitig auf.
            Bewusst IMMER sichtbar (Touch hat kein Hover). */}
        <button
          type="button"
          aria-label={`${phase.name} bearbeiten`}
          title="Bezeichnung und Dauer ändern"
          onClick={(e) => {
            e.stopPropagation();
            onClick();
          }}
          className="shrink-0 rounded p-0.5 text-faint hover:bg-accent-soft hover:text-accent"
        >
          <Pencil className="h-3 w-3" />
        </button>
        {onDelete && (
          <button
            type="button"
            aria-label={`${phase.name} löschen`}
            title="Lebensphase löschen"
            onClick={(e) => {
              e.stopPropagation();
              onDelete();
            }}
            className="shrink-0 rounded p-0.5 text-faint hover:bg-danger-soft hover:text-danger"
          >
            <Trash2 className="h-3 w-3" />
          </button>
        )}
        <button
          type="button"
          aria-label={`Detailansicht ${phase.name}`}
          title="Detailansicht (nur lesen)"
          onClick={(e) => {
            e.stopPropagation();
            onExpand();
          }}
          className="shrink-0 rounded p-0.5 text-faint hover:bg-accent-soft hover:text-accent"
        >
          <Maximize2 className="h-3 w-3" />
        </button>
      </div>
      <div className="mt-0.5 flex flex-wrap gap-1">
        <span className="rounded bg-surface-2 px-1 text-[10px] text-muted">
          {phase.type === "ERWERB" ? "Erwerb" : phase.type === "PENSION" ? "Pension" : "Misch"}
        </span>
        <span className="text-[10px] text-faint">{phase.durationYears} J.</span>
      </div>
      <div className="mt-1 flex flex-col gap-1 text-[10px] leading-tight text-muted">
        <div>
          {phase.persons.map((p) => (
            <div key={p.role} className="whitespace-nowrap text-faint">
              {personLabel(p.role)} {p.startAge} → {p.endAge}
            </div>
          ))}
        </div>

        {/* Verfügbares Kapital -- die Grösse, die man für die Planung DIESER Phase braucht.
            Nur zeigen, wenn überhaupt etwas da ist. */}
        {onDistributeCapital && pot.total > 0 && (
          <div className="rounded-md bg-surface-2 px-1.5 py-1">
            <div className="flex items-baseline justify-between gap-2 whitespace-nowrap">
              <span className="font-medium text-fg">Verfügbares Kapital</span>
              <ValueSingle value={pot.total} deflator={dS} mode={mode} />
            </div>
            {pot.allocatedInvestments + pot.allocatedRepayments > 0 && (
              <div className="flex items-baseline justify-between gap-2 whitespace-nowrap pl-2 text-faint">
                <span>davon verteilt</span>
                <ValueSingle value={pot.allocatedInvestments + pot.allocatedRepayments} deflator={dS} mode={mode} />
              </div>
            )}
            <div className="flex items-baseline justify-between gap-2 whitespace-nowrap pl-2 text-faint">
              <span>Rest auf Cash</span>
              <ValueSingle value={pot.rest} deflator={dS} mode={mode} />
            </div>
            <button
              type="button"
              onClick={(e) => {
                e.stopPropagation();
                onDistributeCapital();
              }}
              className="mt-1 w-full rounded border border-accent px-1.5 py-0.5 text-[10px] font-semibold text-accent transition-colors hover:bg-accent hover:text-accent-fg"
            >
              Kapital verteilen
            </button>
          </div>
        )}

        {/* Spar- bzw. Verzehrquote */}
        <div className="rounded-md bg-surface-2 px-1.5 py-1">
          <div className="flex items-baseline justify-between gap-2 whitespace-nowrap">
            <span className={`font-medium ${phase.isConsumption ? "text-danger" : "text-fg"}`}>{quotaLabel}</span>
            <ValuePair start={phase.quotaStart} end={phase.quotaEnd} deflatorStart={dS} deflatorEnd={dF} mode={mode} />
          </div>
          <button
            type="button"
            onClick={(e) => {
              e.stopPropagation();
              onDistributeRates();
            }}
            className="mt-1 w-full rounded border border-accent px-1.5 py-0.5 text-[10px] font-semibold text-accent transition-colors hover:bg-accent hover:text-accent-fg"
          >
            {phase.isConsumption ? "Bezug verteilen" : "Sparquote verteilen"}
          </button>
        </div>

        <div className="flex items-baseline justify-between gap-2 whitespace-nowrap font-medium text-fg">
          <span>Vermögen</span>
          <ValuePair
            start={phase.startWealthNominal}
            end={phase.endWealthNominal}
            deflatorStart={dS}
            deflatorEnd={dE}
            mode={mode}
          />
        </div>

        {(phase.oneOffInflow > 0 || phase.oneOffOutflow > 0) && (
          <div className={`whitespace-nowrap ${phase.oneOffOutflow > phase.oneOffInflow ? "text-danger" : "text-success"}`}>
            {phase.oneOffInflow > 0 ? `+ ${phase.oneOffInflowLabel ?? "Zufluss"}` : ""}
            {phase.oneOffInflow > 0 && phase.oneOffOutflow > 0 ? " · " : ""}
            {phase.oneOffOutflow > 0 ? `− ${phase.oneOffOutflowLabel ?? "Kosten"}` : ""}
          </div>
        )}
        {/* Alles Weitere (Einkommen, Ausgaben, Raten im Detail, Kapitalinvestitionen) steht
            in der Detailansicht -- erreichbar über das Expand-Icon oben. */}
      </div>
    </th>
  );
}

function TransitionHeader({ counts, onClick }: { counts: DecisionCounts; onClick: () => void }) {
  // Eine ungeprüfte Vorgabe ist kein vergessenes Eingabefeld -- sie wird deshalb eigens
  // benannt und in gedeckterem Ton gezeigt (SPEZIFIKATION 3.5.3).
  const done = counts.open === 0 && counts.unconfirmed === 0;
  const onlyDefaults = counts.open === 0 && counts.unconfirmed > 0;
  return (
    <th
      onClick={onClick}
      data-tour="transition"
      title={done ? undefined : decisionsText(counts)}
      className={`sticky top-0 z-30 w-24 min-w-24 cursor-pointer border-b border-r border-border px-2 py-2 text-center align-top text-[11px] font-medium transition-colors ${
        done
          ? "bg-surface-2 text-success"
          : onlyDefaults
            ? "bg-surface-2 text-muted"
            : "bg-attention text-attention-fg"
      }`}
    >
      <div>Übergang</div>
      {done ? (
        <div className="mt-1 flex items-center justify-center gap-1 text-[10px] font-semibold">
          <CheckCircle2 className="h-3 w-3" /> geprüft
        </div>
      ) : (
        <div className="mt-1 flex flex-col gap-0.5">
          {counts.open > 0 && (
            <div className="rounded-full bg-attention-fg/20 px-1.5 py-0.5 text-[10px] font-semibold">
              {counts.open} offen
            </div>
          )}
          {counts.unconfirmed > 0 && (
            <div className="rounded-full border border-border px-1.5 py-0.5 text-[10px] font-semibold">
              {counts.unconfirmed} Vorgabe{counts.unconfirmed === 1 ? "" : "n"}
            </div>
          )}
        </div>
      )}
    </th>
  );
}

function FragmentRows({ children }: { children: React.ReactNode }) {
  return <>{children}</>;
}

// --- "Nächste Schritte": abgeleitete Checkliste ------------------------------------------
// Führt neue (und wiederkehrende) Nutzer zum jeweils nächsten sinnvollen Schritt, statt
// sie vor der Matrix raten zu lassen. Alles wird aus den vorhandenen Daten abgeleitet --
// kein eigener Zustand, kein API-Aufruf, verschwindet von selbst, wenn nichts offen ist.
function NextSteps({
  plan,
  computed,
  columns,
  openCountFor,
  onReview,
  onAddElement,
  onAddPhase,
  onOpenSensitivity,
}: {
  plan: PlanInput;
  computed: PlanComputed;
  columns: Column[];
  openCountFor: (fromPhase: PhaseComputed, toPhase: PhaseComputed) => DecisionCounts;
  onReview: (fromPhaseId: string) => void;
  onAddElement: (category: ElementCategory) => void;
  onAddPhase: () => void;
  onOpenSensitivity?: () => void;
}) {
  if (computed.phases.length === 0) return null;

  const items: { key: string; text: string; action: string; run: () => void }[] = [];

  // Offene Übergangs-Entscheide (inkl. Cash) -- der wichtigste Handlungsbedarf.
  let openTotal = 0;
  let firstOpenPhaseId: string | null = null;
  for (const col of columns) {
    if (col.kind !== "transition") continue;
    const n = openCountFor(col.fromPhase, col.toPhase);
    openTotal += n.open;
    if (n.open > 0 && firstOpenPhaseId === null) firstOpenPhaseId = col.fromPhase.id;
  }
  if (openTotal > 0 && firstOpenPhaseId) {
    const target = firstOpenPhaseId;
    items.push({
      key: "transitions",
      text: `${openTotal} Übergangs-Entscheid${openTotal === 1 ? "" : "e"} offen – z. B. ob eine Immobilie verkauft wird.`,
      action: "Jetzt durchgehen",
      run: () => onReview(target),
    });
  }

  if (!plan.elements.some((e) => e.category === "INCOME")) {
    items.push({
      key: "income",
      text: "Noch kein Einkommen erfasst – ohne Einkommen gibt es keine Sparquote und keine AHV-Rente.",
      action: "Einkommen erfassen",
      run: () => onAddElement("INCOME"),
    });
  }
  if (!plan.elements.some((e) => e.category === "EXPENSE")) {
    items.push({
      key: "expense",
      text: "Noch keine Ausgaben erfasst – sie sind erfahrungsgemäss der stärkste Hebel der ganzen Planung.",
      action: "Ausgaben erfassen",
      run: () => onAddElement("EXPENSE"),
    });
  }

  // Plan endet vor der Pensionierung: die spannendste Phase fehlt noch.
  const totalYears = computed.phases.reduce((s, p) => s + p.durationYears, 0);
  if (plan.persons.some((p) => p.age + totalYears < p.retirementAge)) {
    items.push({
      key: "pension-phase",
      text: "Dein Plan endet vor der Pensionierung – die entscheidende Phase fehlt noch.",
      action: "Phase anlegen",
      run: onAddPhase,
    });
  }

  if (computed.ruinAge !== null && onOpenSensitivity) {
    items.push({
      key: "ruin",
      text: `Das Kapital reicht nicht bis ans Planende (Ruin mit ${computed.ruinAge}). Finde heraus, welche Annahme am meisten bewegt.`,
      action: "Einflussfaktoren",
      run: onOpenSensitivity,
    });
  }

  if (items.length === 0) return null;

  return (
    <div className="rounded-xl border border-attention-soft-fg/30 bg-attention-soft px-4 py-3">
      <div className="mb-2 flex items-center gap-2 text-xs font-semibold uppercase tracking-wide text-attention-soft-fg">
        <ListTodo className="h-4 w-4" /> Nächste Schritte
      </div>
      <ul className="flex flex-col gap-1.5">
        {items.map((it) => (
          <li key={it.key} className="flex flex-wrap items-center gap-2 text-sm text-fg">
            <span className="min-w-0 flex-1">{it.text}</span>
            <button
              type="button"
              onClick={it.run}
              className="flex shrink-0 items-center gap-1 rounded-lg border border-attention-soft-fg/40 px-2.5 py-1 text-xs font-semibold text-attention-soft-fg transition-colors hover:bg-attention hover:text-attention-fg"
            >
              {it.action} <ArrowRight className="h-3 w-3" />
            </button>
          </li>
        ))}
      </ul>
    </div>
  );
}

// --- Dialog: neues finanzielles Element mit Direkteingabe der Phase-1-Werte ---
function AddElementDialog({
  plan,
  firstPhase,
  initialCategory,
  onClose,
  onCreated,
}: {
  plan: PlanInput;
  firstPhase: PhaseComputed;
  initialCategory?: ElementCategory | null;
  onClose: () => void;
  onCreated: () => void;
}) {
  const [category, setCategory] = useState<ElementCategory>(initialCategory ?? "INCOME");
  const [name, setName] = useState("");
  const [ownerRole, setOwnerRole] = useState<string>("PERSON_A");
  const [pd, setPd] = useState<PhaseData>({});
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const needsPerson = PERSON_ONLY_CATEGORIES.includes(category);
  const isCouple = plan.householdType === "COUPLE";
  const pLabel = (role: string) => {
    const p = plan.persons.find((x) => x.role === role);
    return p?.name && p.name.trim() ? p.name.trim() : role === "PERSON_A" ? "Person A" : "Person B";
  };

  const ownerOptions = needsPerson
    ? isCouple
      ? [
          { value: "PERSON_A", label: pLabel("PERSON_A") },
          { value: "PERSON_B", label: pLabel("PERSON_B") },
        ]
      : [{ value: "PERSON_A", label: pLabel("PERSON_A") }]
    : isCouple
      ? [
          { value: "HOUSEHOLD", label: "Gemeinsam" },
          { value: "PERSON_A", label: pLabel("PERSON_A") },
          { value: "PERSON_B", label: pLabel("PERSON_B") },
        ]
      : [
          { value: "HOUSEHOLD", label: "Gemeinsam" },
          { value: "PERSON_A", label: pLabel("PERSON_A") },
        ];

  // Kontext für die Phase-1-Felder des neuen Elements.
  const owner = needsPerson || ownerRole !== "HOUSEHOLD" ? ownerRole : null;
  const ownerWorking =
    owner && owner !== "HOUSEHOLD"
      ? firstPhase.persons.find((p) => p.role === owner)?.working ?? false
      : firstPhase.type !== "PENSION";
  const context: CellContext = {
    kind: "phase",
    phaseId: firstPhase.id,
    ownerWorking,
    isConsumption: firstPhase.isConsumption,
    durationYears: firstPhase.durationYears,
    isRetirementTransition: false,
    carriedEndValue: 0,
    carried: false,
    derivedStart: 0,
    derivedMortgage: 0,
    mortgageEnd: 0,
    propertyValueEnd: 0,
    deflatorStart: firstPhase.cumulativeInflationStart,
    laterPhaseCount: 0, // beim Anlegen bewusst kein Warnhinweis
    ahvCareer: null,
    // Beim Anlegen gibt es keine Vorphase, aus der etwas zu erben waere.
    inheritedValues: {},
    ownerAgeStart: firstPhase.persons.find((p) => p.role === (owner ?? "PERSON_A"))?.startAge ?? 0,
    investTargets: [],
    capitalFromTransfer: 0,
    capitalFromTransferSources: [],
  };

  async function create() {
    setSaving(true);
    setError(null);
    try {
      const { element } = await api.post<{ element: { id: string } }>(`/api/scenarios/${plan.id}/elements`, {
        category,
        name: name.trim() || CATEGORY_LABELS[category],
        ownerRole,
      });
      // Ist-Zustand direkt in Phase 1 speichern (sofern Felder ausgefuellt).
      if (Object.keys(pd).length > 0) {
        await api.put(`/api/elements/${element.id}/phase/${firstPhase.id}`, pd);
      }
      onCreated();
    } catch (e) {
      setError(e instanceof Error ? e.message : "Erstellen fehlgeschlagen.");
    } finally {
      setSaving(false);
    }
  }

  return (
    <DialogShell title="Finanzielles Element" onClose={onClose} wide>
      <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
        <div>
          <label className="mb-1 block text-xs font-medium text-muted">Kategorie</label>
          <select
            value={category}
            onChange={(e) => {
              const c = e.target.value as ElementCategory;
              setCategory(c);
              setPd({});
              if (PERSON_ONLY_CATEGORIES.includes(c) && ownerRole === "HOUSEHOLD") setOwnerRole("PERSON_A");
              if (!name) setName(CATEGORY_LABELS[c]);
            }}
            className="w-full rounded-lg border border-border bg-input px-3 py-2 text-sm text-fg focus:border-accent focus:outline-none focus:ring-2 focus:ring-accent/25"
          >
            {CATEGORY_ORDER.map((c) => (
              <option key={c} value={c}>
                {CATEGORY_LABELS[c]}
              </option>
            ))}
          </select>
        </div>
        <div>
          <label className="mb-1 block text-xs font-medium text-muted">Zuordnung</label>
          <select
            value={ownerRole}
            onChange={(e) => setOwnerRole(e.target.value)}
            className="w-full rounded-lg border border-border bg-input px-3 py-2 text-sm text-fg focus:border-accent focus:outline-none focus:ring-2 focus:ring-accent/25"
          >
            {ownerOptions.map((o) => (
              <option key={o.value} value={o.value}>
                {o.label}
              </option>
            ))}
          </select>
        </div>
        <div className="sm:col-span-2">
          <label className="mb-1 block text-xs font-medium text-muted">Bezeichnung</label>
          <input
            value={name}
            onChange={(e) => setName(e.target.value)}
            placeholder={CATEGORY_LABELS[category]}
            className="w-full rounded-lg border border-border bg-input px-3 py-2 text-sm text-fg focus:border-accent focus:outline-none focus:ring-2 focus:ring-accent/25"
          />
        </div>
      </div>

      <div className="mt-1 border-t border-border pt-3">
        <div className="mb-2 text-xs font-semibold uppercase tracking-wide text-faint">Werte (erste Lebensphase)</div>
        <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
          <ElementPhaseFields
            element={{ category }}
            context={context}
            pd={pd}
            setP={(patch) => setPd((prev) => ({ ...prev, ...patch }))}
          />
        </div>
      </div>

      {error && <p className="text-sm text-danger">{error}</p>}
      <DialogActions saving={saving} onConfirm={create} onClose={onClose} confirmLabel="Erstellen" />
    </DialogShell>
  );
}

// --- Dialog: neue Lebensphase ---
function AddPhaseDialog({
  maxDurationYears,
  onClose,
  onCreate,
}: {
  maxDurationYears: number | null;
  onClose: () => void;
  onCreate: (payload: { name?: string; durationYears?: number }) => void;
}) {
  const cap = maxDurationYears;
  const [name, setName] = useState("");
  const [durationYears, setDurationYears] = useState(cap ?? 10);
  const [saving, setSaving] = useState(false);

  return (
    <DialogShell title="Neue Lebensphase" onClose={onClose}>
      <div className="grid grid-cols-1 gap-3">
        <div>
          <label className="mb-1 block text-xs font-medium text-muted">Bezeichnung (optional)</label>
          <input
            value={name}
            onChange={(e) => setName(e.target.value)}
            placeholder="automatisch (Erwerb/Pension)"
            className="w-full rounded-lg border border-border bg-input px-3 py-2 text-sm text-fg focus:border-accent focus:outline-none focus:ring-2 focus:ring-accent/25"
          />
        </div>
        <div>
          <label className="mb-1 block text-xs font-medium text-muted">
            Dauer (Jahre){cap != null ? ` · max. ${cap}` : ""}
          </label>
          <input
            type="number"
            value={durationYears}
            min={1}
            max={cap ?? undefined}
            onFocus={(e) => e.currentTarget.select()}
            onChange={(e) => {
              const v = e.target.valueAsNumber || 1;
              setDurationYears(cap != null ? Math.min(v, cap) : v);
            }}
            className="w-full rounded-lg border border-border bg-input px-3 py-2 text-sm text-fg focus:border-accent focus:outline-none focus:ring-2 focus:ring-accent/25"
          />
        </div>
      </div>
      <DialogActions
        saving={saving}
        onConfirm={() => {
          setSaving(true);
          onCreate({ name: name.trim() || undefined, durationYears });
        }}
        onClose={onClose}
        confirmLabel="Erstellen"
      />
    </DialogShell>
  );
}

// Ziele für die Anlage-Quote der Kapitalverwendung (Roadmap Nr. 44, Punkt C): alle
// Vermögens-Elemente, die in der Folgephase noch aktiv sind.
// Der Name allein genuegt hier nicht: Zwei Personen nennen ihr Wertschriftendepot beide "ETF",
// und im Dropdown waehlt man dann blind das falsche -- was erst Phasen spaeter auffaellt.
function investTargetsOf(plan: PlanInput, toPhase: PhaseComputed | undefined): { id: string; name: string }[] {
  return (toPhase?.elements ?? [])
    .filter((e) => e.category === "OTHER_ASSET" && e.status === "ACTIVE")
    .map((e) => {
      const owner = plan.elements.find((x) => x.id === e.elementId)?.ownerRole ?? null;
      return { id: e.elementId, name: `${e.name} · ${ownerLabel(plan.persons, owner)}` };
    });
}

// --- Panel: Szenario-Profil (Grundprofil bearbeiten) ---
function ProfilePanel({ plan, onClose, onSaved }: { plan: PlanInput; onClose: () => void; onSaved: () => void }) {
  const [draft, setDraft] = useState<ProfileDraft>({
    householdType: plan.householdType,
    inflationRateDefault: plan.inflationRateDefault,
    startYear: plan.startYear ?? new Date().getFullYear(),
    persons: plan.persons.map((p) => ({ role: p.role, name: p.name ?? "", age: p.age, retirementAge: p.retirementAge })),
  });
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState<string | null>(null);

  async function save() {
    setSaving(true);
    setError(null);
    try {
      await api.patch(`/api/scenarios/${plan.id}`, draft);
      onSaved();
    } catch (e) {
      setError(e instanceof Error ? e.message : "Speichern fehlgeschlagen.");
    } finally {
      setSaving(false);
    }
  }

  return (
    <InspectorShell title="Szenario-Profil" subtitle="Haushalt, Personen, Planstart und Inflation dieses Szenarios" onClose={onClose}>
      <div className="flex flex-col gap-3">
        <PlanProfileFields draft={draft} onChange={setDraft} lockRetirement={plan.phases.length > 0} />
        {error && <p className="text-sm text-danger">{error}</p>}
        <div className="flex gap-2 pt-1">
          <Button disabled={saving} onClick={save}>{saving ? "…" : "Speichern"}</Button>
          <Button variant="secondary" onClick={onClose}>Abbrechen</Button>
        </div>

        {plan.phases.length > 0 && (
          <div className="mt-3 border-t border-border pt-3">
            <h3 className="mb-2 text-sm font-semibold text-fg">Pensionsalter anpassen</h3>
            {/* Wirkt SOFORT (eigener Endpunkt), weil dabei Phasendauern verschoben werden --
                das lässt sich nicht sinnvoll mit dem Profil-Formular zusammen abspeichern. */}
            <RetirementAdjuster plan={plan} onSaved={onSaved} />
          </div>
        )}
      </div>
    </InspectorShell>
  );
}

// --- Dialog: geführter Übergang ---
// Pensionsalter des Element-Besitzers -- Bezugspunkt fuer die Vorgaben des Entscheids.
function retirementAgeOf(plan: PlanInput, el: ElementInput): number {
  return plan.persons.find((p) => p.role === el.ownerRole)?.retirementAge ?? AHV_REFERENCE_AGE;
}

function TransitionReviewDialog({
  plan,
  computed,
  fromPhase,
  toPhase,
  elements,
  initialCash,
  buildContext,
  isRetirement,
  onClose,
  onSaved,
}: {
  plan: PlanInput;
  computed: PlanComputed;
  fromPhase: PhaseComputed;
  toPhase: PhaseComputed | undefined;
  elements: ElementInput[];
  initialCash: CashTransitionData;
  buildContext: (el: ElementInput) => CellContext;
  isRetirement: (el: ElementInput) => boolean;
  onClose: () => void;
  onSaved: () => void;
}) {
  const [tds, setTds] = useState<Record<string, TransitionData>>(() =>
    Object.fromEntries(
      elements.map((e) => [e.id, withTransitionDefaults(e.category, isRetirement(e), e.transitionValues[fromPhase.id] ?? {})])
    )
  );
  const [ct, setCt] = useState<CashTransitionData>(() => withCashTransitionDefaults(initialCash));
  // Pensionierungs-Entscheide: eigener Entwurf, weil sie an einem anderen Ort liegen als die
  // Übergangswerte -- und beim Speichern über einen eigenen Endpunkt gehen.
  const [rds, setRds] = useState<Record<string, RetirementDecision>>({});
  const effectiveRd = (el: ElementInput) =>
    withRetirementDefaults(el.category, retirementAgeOf(plan, el), {
      ...(el.retirementDecision ?? {}),
      ...(rds[el.id] ?? {}),
    });
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState<string | null>(null);

  async function saveAll() {
    setSaving(true);
    setError(null);
    try {
      await api.put(`/api/phases/${fromPhase.id}/cash-transition`, ct);
      for (const e of elements) {
        await api.put(`/api/elements/${e.id}/transition/${fromPhase.id}`, tds[e.id] ?? {});
      }
      // Pensionierungs-Entscheide liegen am ELEMENT und haben deshalb einen eigenen Endpunkt.
      for (const [elementId, changes] of Object.entries(rds)) {
        const el = plan.elements.find((x) => x.id === elementId);
        await api.put(`/api/elements/${elementId}/retirement`, { ...(el?.retirementDecision ?? {}), ...changes });
      }
      onSaved();
    } catch (err) {
      setError(err instanceof Error ? err.message : "Speichern fehlgeschlagen.");
    } finally {
      setSaving(false);
    }
  }

  return (
    <DialogShell title={`Übergang prüfen: ${fromPhase.name} → ${toPhase?.name ?? "Ende"}`} onClose={onClose} wide>
      <p className="text-sm text-muted">
        Geh die Positionen durch und triff je Element den Übergangs-Entscheid (Halten, Verkaufen,
        Bezug). Danach werden gehaltene Werte automatisch in die nächste Phase fortgeschrieben.
      </p>
      <div className="flex flex-col gap-3">
        {/* Cash zuerst: einmalige Sonderein-/ausgaben betreffen jeden Übergang. */}
        <div className="rounded-xl border border-border bg-surface-2 p-3">
          <div className="mb-2 flex items-center gap-2">
            <span className="text-accent">
              <Wallet className="h-4 w-4" />
            </span>
            <span className="text-sm font-semibold text-fg">Cash</span>
            <span className="text-xs text-faint">Einmalige Sonderein-/ausgaben</span>
          </div>
          <p className="mb-2 text-xs text-accent-soft-fg">
            Einmalige Ereignisse wie Erbschaft, Autokauf oder Poolbau werden hier direkt dem Cash-Konto
            gutgeschrieben bzw. belastet.
          </p>
          <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
            <CashTransitionFields
              ct={ct}
              setC={(patch) => setCt((prev) => ({ ...prev, ...patch }))}
              deflatorEnd={fromPhase.cumulativeInflationEnd}
            />
          </div>
        </div>

        {elements.length === 0 && (
          <p className="rounded-lg border border-dashed border-border bg-surface-2 p-3 text-sm text-muted">
            An diesem Übergang gibt es sonst keine zu entscheidenden Positionen.
          </p>
        )}
        {elements.map((el) => {
          const ctx = buildContext(el);
          const retire = isRetirement(el);
          const hint =
            el.category === "AHV" && retire
              ? "Pensionierung: Beitragskarriere prüfen – die Rente hängt vom Durchschnittseinkommen ab."
              : (el.category === "PENSION_FUND" || el.category === "PILLAR_3A") && !retire
                ? "Hier könntest du optional Kapital beziehen."
                : el.category === "PENSION_FUND" && retire
                  ? "Pensionierung: Bezugsart wählen (Rente / Kapital / Kombination)."
                  : el.category === "PILLAR_3A" && retire
                    ? "Wird bei Pensionierung vollständig bezogen."
                    : null;
          return (
            <div key={el.id} className="rounded-xl border border-border bg-surface-2 p-3">
              <div className="mb-2 flex items-center gap-2">
                <span className="text-accent">{CATEGORY_ICON[el.category]}</span>
                <span className="text-sm font-semibold text-fg">{el.name}</span>
                <span className="text-xs text-faint">{CATEGORY_LABELS[el.category]}</span>
              </div>
              {hint && <p className="mb-2 text-xs text-accent-soft-fg">{hint}</p>}
              <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
                <ElementTransitionFields
                  element={el}
                  context={ctx}
                  td={tds[el.id] ?? {}}
                  setT={(patch) => setTds((prev) => ({ ...prev, [el.id]: { ...prev[el.id], ...patch } }))}
                  retirement={
                    <RetirementFields
                      plan={plan}
                      el={el}
                      defaultOpen
                      rd={effectiveRd(el)}
                      patch={(id, patch) => setRds((prev) => ({ ...prev, [id]: { ...prev[id], ...patch } }))}
                      summary={computed.retirement.perPerson.find((x) => x.role === el.ownerRole)}
                    />
                  }
                />
              </div>
            </div>
          );
        })}
      </div>
      {error && <p className="text-sm text-danger">{error}</p>}
      <DialogActions saving={saving} onConfirm={saveAll} onClose={onClose} confirmLabel="Alle speichern" />
    </DialogShell>
  );
}

// --- Panel: Cash-Übergang (einmalige Sonderein-/ausgaben) ---
function CashTransitionPanel({
  fromPhase,
  toPhase,
  initial,
  onClose,
  onSaved,
}: {
  fromPhase: PhaseComputed;
  toPhase: PhaseComputed | undefined;
  initial: CashTransitionData;
  onClose: () => void;
  onSaved: () => void;
}) {
  // Vorbelegung, damit ein blosses "Speichern" den sichtbaren Default (1:1) persistiert.
  const [ct, setCt] = useState<CashTransitionData>(() => withCashTransitionDefaults(initial));
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState<string | null>(null);

  async function save() {
    setSaving(true);
    setError(null);
    try {
      await api.put(`/api/phases/${fromPhase.id}/cash-transition`, ct);
      onSaved();
    } catch (e) {
      setError(e instanceof Error ? e.message : "Speichern fehlgeschlagen.");
    } finally {
      setSaving(false);
    }
  }

  return (
    <InspectorShell
      title="Übergang: Cash"
      subtitle={`Einmalige Sonderein-/ausgaben · ${fromPhase.name} → ${toPhase?.name ?? "Ende"}`}
      onClose={onClose}
    >
      <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
        <CashTransitionFields
          ct={ct}
          setC={(patch) => setCt((prev) => ({ ...prev, ...patch }))}
          deflatorEnd={fromPhase.cumulativeInflationEnd}
        />
      </div>
      {error && <p className="mt-3 text-sm text-danger">{error}</p>}
      <PanelActions saving={saving} onConfirm={save} onClose={onClose} confirmLabel="Speichern" />
    </InspectorShell>
  );
}

// --- Panel: Cash-Anfangswert (erste Lebensphase) ---
function CashInitialPanel({ plan, onClose, onSaved }: { plan: PlanInput; onClose: () => void; onSaved: () => void }) {
  const [value, setValue] = useState(plan.initialCash);
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState<string | null>(null);

  async function save() {
    setSaving(true);
    setError(null);
    try {
      await api.patch(`/api/scenarios/${plan.id}`, { initialCash: value });
      onSaved();
    } catch (e) {
      setError(e instanceof Error ? e.message : "Speichern fehlgeschlagen.");
    } finally {
      setSaving(false);
    }
  }

  return (
    <InspectorShell
      title="Cash-Anfangswert"
      subtitle="Startbestand des Ausgleichskontos zu Beginn der ersten Lebensphase"
      onClose={onClose}
    >
      <div className="flex flex-col gap-3">
        <MoneyField label="Anfangswert (CHF)" value={value} onChange={setValue} />
        {error && <p className="text-sm text-danger">{error}</p>}
        <PanelActions saving={saving} onConfirm={save} onClose={onClose} confirmLabel="Speichern" />
      </div>
    </InspectorShell>
  );
}

// --- Panel: einzelner Übergangs-Entscheid (per Klick auf eine Übergangszelle) ---
function TransitionCellPanel({
  plan,
  computed,
  element,
  fromPhase,
  toPhase,
  context,
  onClose,
  onSaved,
}: {
  plan: PlanInput;
  computed: PlanComputed;
  element: ElementInput;
  fromPhase: PhaseComputed;
  toPhase: PhaseComputed | undefined;
  context: CellContext;
  onClose: () => void;
  onSaved: () => void;
}) {
  const [td, setTd] = useState<TransitionData>(() =>
    withTransitionDefaults(element.category, context.isRetirementTransition, element.transitionValues[fromPhase.id] ?? {})
  );
  const [rd, setRd] = useState<RetirementDecision>({});
  const effectiveRd = (el: ElementInput) =>
    withRetirementDefaults(el.category, retirementAgeOf(plan, el), {
      ...(el.retirementDecision ?? {}),
      ...rd,
    });
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState<string | null>(null);

  async function save() {
    setSaving(true);
    setError(null);
    try {
      await api.put(`/api/elements/${element.id}/transition/${fromPhase.id}`, td);
      if (Object.keys(rd).length > 0) {
        await api.put(`/api/elements/${element.id}/retirement`, {
          ...(element.retirementDecision ?? {}),
          ...rd,
        });
      }
      onSaved();
    } catch (e) {
      setError(e instanceof Error ? e.message : "Speichern fehlgeschlagen.");
    } finally {
      setSaving(false);
    }
  }

  return (
    <InspectorShell
      title={`Übergang: ${element.name}`}
      subtitle={`${CATEGORY_LABELS[element.category]} · ${fromPhase.name} → ${toPhase?.name ?? "Ende"}`}
      onClose={onClose}
    >
      <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
        <ElementTransitionFields
          element={element}
          context={context}
          td={td}
          setT={(patch) => setTd((prev) => ({ ...prev, ...patch }))}
          retirement={
            <RetirementFields
              plan={plan}
              el={element}
              defaultOpen
              rd={effectiveRd(element)}
              patch={(_id: string, patch: Partial<RetirementDecision>) =>
                setRd((prev) => ({ ...prev, ...patch }))
              }
              summary={computed.retirement.perPerson.find((x) => x.role === element.ownerRole)}
            />
          }
        />
      </div>
      {error && <p className="mt-3 text-sm text-danger">{error}</p>}
      <PanelActions saving={saving} onConfirm={save} onClose={onClose} confirmLabel="Speichern" />
    </InspectorShell>
  );
}

// --- gemeinsame Bausteine ---
// Erstell-Flows und der geführte Übergang bleiben Modals (ui.Modal: ESC, Fokus-Falle,
// Animation); Einzel-Bearbeitungen laufen über das Inspector-Panel.
function DialogShell({
  title,
  onClose,
  children,
  wide,
}: {
  title: string;
  onClose: () => void;
  children: React.ReactNode;
  wide?: boolean;
}) {
  return (
    <Modal title={title} onClose={onClose} wide={wide}>
      {children}
    </Modal>
  );
}

function DialogActions({
  saving,
  onConfirm,
  onClose,
  confirmLabel,
}: {
  saving: boolean;
  onConfirm: () => void;
  onClose: () => void;
  confirmLabel: string;
}) {
  return (
    <div className="flex gap-2 pt-1">
      <Button disabled={saving} onClick={onConfirm}>
        {saving ? "…" : confirmLabel}
      </Button>
      <Button variant="secondary" onClick={onClose}>
        Abbrechen
      </Button>
    </div>
  );
}

// Aktionsleiste im Inspector-Panel.
function PanelActions({
  saving,
  onConfirm,
  onClose,
  confirmLabel,
}: {
  saving: boolean;
  onConfirm: () => void;
  onClose: () => void;
  confirmLabel: string;
}) {
  return (
    <div className="mt-4 flex gap-2 border-t border-border pt-3">
      <Button disabled={saving} onClick={onConfirm}>
        {saving ? "…" : confirmLabel}
      </Button>
      <Button variant="secondary" onClick={onClose}>
        Abbrechen
      </Button>
    </div>
  );
}

// --- Panel: Element umbenennen und zuordnen ----------------------------------------------
// Beides sind Eigenschaften des ELEMENTS, nicht einer Phase -- deshalb ein eigenes Panel,
// erreichbar über das Stift-Symbol in der Element-Zeile.
function ElementMetaPanel({
  element,
  plan,
  personLabel,
  onSaved,
  onDelete,
}: {
  element: ElementInput;
  plan: PlanInput;
  personLabel: (role: string) => string;
  onSaved: () => void;
  onDelete: () => void;
}) {
  const [name, setName] = useState(element.name);
  const [ownerRole, setOwnerRole] = useState<string>(element.ownerRole ?? "HOUSEHOLD");
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const needsPerson = PERSON_ONLY_CATEGORIES.includes(element.category);
  const isCouple = plan.householdType === "COUPLE";
  const options = needsPerson
    ? isCouple
      ? [
          { value: "PERSON_A", label: personLabel("PERSON_A") },
          { value: "PERSON_B", label: personLabel("PERSON_B") },
        ]
      : [{ value: "PERSON_A", label: personLabel("PERSON_A") }]
    : isCouple
      ? [
          { value: "HOUSEHOLD", label: "Gemeinsam" },
          { value: "PERSON_A", label: personLabel("PERSON_A") },
          { value: "PERSON_B", label: personLabel("PERSON_B") },
        ]
      : [
          { value: "HOUSEHOLD", label: "Gemeinsam" },
          { value: "PERSON_A", label: personLabel("PERSON_A") },
        ];

  async function save() {
    setSaving(true);
    setError(null);
    try {
      await api.patch(`/api/elements/${element.id}`, { name: name.trim() || element.name, ownerRole });
      onSaved();
    } catch (e) {
      setError(e instanceof Error ? e.message : "Speichern fehlgeschlagen.");
    } finally {
      setSaving(false);
    }
  }

  return (
    <div className="flex flex-col gap-4">
      <div className="flex items-center justify-between">
        <div className="text-xs font-semibold uppercase tracking-wide text-accent-soft-fg">
          {CATEGORY_LABELS[element.category]}
        </div>
        <button
          type="button"
          onClick={onDelete}
          className="flex items-center gap-1 rounded-lg border border-border px-2 py-1 text-xs text-muted hover:border-danger hover:bg-danger-soft hover:text-danger"
        >
          <Trash2 className="h-3.5 w-3.5" /> Element löschen
        </button>
      </div>

      <TextField label="Bezeichnung" value={name} onChange={setName} />
      <SelectField
        label="Zuordnung"
        help={
          needsPerson
            ? "AHV, Pensionskasse und Säule 3a hängen am individuellen Pensionierungszeitpunkt und gehören deshalb immer genau einer Person."
            : "Gemeinsame Elemente zählen zum Haushalt. Bei Paaren wird ein gemeinsames Einkommen NICHT für die AHV-Rente angerechnet."
        }
        value={ownerRole}
        onChange={setOwnerRole}
        options={options}
      />
      <p className="text-xs text-faint">
        Die Werte je Lebensphase bearbeitest du direkt in den Zellen der Matrix.
      </p>

      {error && <p className="text-sm text-danger">{error}</p>}
      <div className="flex gap-2">
        <Button disabled={saving} onClick={save}>
          {saving ? "Speichern…" : "Speichern"}
        </Button>
      </div>
    </div>
  );
}