FPT/src/components/PlanProfileFields.tsx

"use client";

import { NumberField, SelectField, TextField } from "@/components/FormField";
import type { HouseholdType, PersonRole } from "@/lib/types";

export interface ProfileDraft {
  householdType: HouseholdType;
  inflationRateDefault: number;
  startYear: number;
  persons: { role: PersonRole; name: string; age: number; retirementAge: number }[];
}

export function emptyProfileDraft(): ProfileDraft {
  return {
    householdType: "SINGLE",
    inflationRateDefault: 1.5,
    startYear: new Date().getFullYear(),
    persons: [{ role: "PERSON_A", name: "", age: 35, retirementAge: 65 }],
  };
}

// Gemeinsame Formularfelder für das Grundprofil eines Plans (Haushaltsform, Personen,
// Inflation). Wird beim Plan-Erstellen und in den Plan-Einstellungen verwendet.
export function PlanProfileFields({
  draft,
  onChange,
}: {
  draft: ProfileDraft;
  onChange: (next: ProfileDraft) => void;
}) {
  function setType(type: HouseholdType) {
    if (type === "SINGLE") {
      onChange({ ...draft, householdType: type, persons: draft.persons.slice(0, 1) });
    } else {
      const persons =
        draft.persons.length < 2
          ? [...draft.persons, { role: "PERSON_B" as PersonRole, name: "", age: 35, retirementAge: 65 }]
          : draft.persons;
      onChange({ ...draft, householdType: type, persons });
    }
  }

  function updatePerson(index: number, patch: Partial<ProfileDraft["persons"][number]>) {
    onChange({
      ...draft,
      persons: draft.persons.map((p, i) => (i === index ? { ...p, ...patch } : p)),
    });
  }

  return (
    <div className="flex flex-col gap-4">
      <SelectField
        label="Haushaltsform"
        help="Planst du alleine oder gemeinsam mit einer Partnerin / einem Partner?"
        value={draft.householdType}
        onChange={setType}
        options={[
          { value: "SINGLE", label: "Einzelperson" },
          { value: "COUPLE", label: "Paar (zwei Personen)" },
        ]}
      />

      {draft.persons.map((person, index) => (
        <div key={person.role} className="grid grid-cols-2 gap-3 rounded-xl border border-border bg-surface-2 p-3">
          <div className="col-span-2 text-xs font-semibold uppercase tracking-wide text-faint">
            {draft.householdType === "COUPLE" ? (person.role === "PERSON_A" ? "Person A" : "Person B") : "Deine Angaben"}
          </div>
          <div className="col-span-2">
            <TextField
              label="Name (optional)"
              value={person.name}
              placeholder={person.role === "PERSON_A" ? "Person A" : "Person B"}
              onChange={(v) => updatePerson(index, { name: v })}
            />
          </div>
          <NumberField
            label="Aktuelles Alter"
            value={person.age}
            min={0}
            max={120}
            onChange={(v) => updatePerson(index, { age: Math.round(v) })}
          />
          <NumberField
            label="Pensionierungsalter"
            help="Steuert die Ableitung des Phasentyps (Erwerb/Pension)."
            value={person.retirementAge}
            min={30}
            max={100}
            onChange={(v) => updatePerson(index, { retirementAge: Math.round(v) })}
          />
        </div>
      ))}

      <NumberField
        label="Planstart (Jahr)"
        help="Kalenderjahr, in dem die Planung beginnt (Jahr 1). Wird auf der Zeitachse und in den Grafiken angezeigt; die Berechnung selbst rechnet in Jahren ab Planbeginn."
        value={draft.startYear}
        min={1900}
        max={2200}
        onChange={(v) => onChange({ ...draft, startYear: Math.round(v) })}
      />

      <NumberField
        label="Erwartete Inflationsrate (%)"
        help="Langfristige Annahme zur jährlichen Teuerung. Gilt plan-weit für alle Lebensphasen."
        value={draft.inflationRateDefault}
        step={0.1}
        onChange={(v) => onChange({ ...draft, inflationRateDefault: v })}
      />
    </div>
  );
}