certain/web/src/components/BudgetZeitraum.jsx

import { useState } from "react";
import { useTranslation } from "react-i18next";
import Icon from "./Icon";
import { formatMonthLabel } from "../format";

/** Auf welchen Tag der Monat gekappt fällt – einen 31. Februar gibt es nicht.
 *  Dieselbe Kappung wie `_clamp_day` im Server, sonst fiele der 28. Februar bei
 *  Starttag 31 in einen Monat, der ihn gar nicht enthält. */
function gekappt(jahr, monat, tag) {
  return Math.min(tag, new Date(jahr, monat, 0).getDate());
}

/** Der Budget-Monat, in den ein Datum von selbst fällt – die Entsprechung zu
 *  `budget.period_of` im Server. Hier gerechnet und nicht erfragt, damit die
 *  Anzeige mitläuft, während man im Formular noch am Datum dreht. */
export function budgetMonat(iso, startTag) {
  const [j, m, d] = String(iso).split("-").map(Number);
  if (!j || !m) return "";
  const zwei = (n) => String(n).padStart(2, "0");
  if (startTag <= 1 || d < gekappt(j, m, startTag)) return `${j}-${zwei(m)}`;
  return m === 12 ? `${j + 1}-01` : `${j}-${zwei(m + 1)}`;
}

export function verschoben(label, monate) {
  const [j, m] = label.split("-").map(Number);
  const d = new Date(j, m - 1 + monate, 1);
  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}`;
}

// Drei Monate in jede Richtung – so weit wie der Server es annimmt, und weit
// genug für den echten Fall (eine Zahlung kurz vor dem Stichtag, eine
// verspätet beglichene Rechnung).
const REICHWEITE = 3;

/**
 * Zu welchem Budget-Monat eine Buchung zählt.
 *
 * Normalerweise entscheidet das Datum, und dann ist hier nichts zu tun – das
 * Feld sagt nur, was gilt. Das Ändern liegt bewusst hinter einem Klick und
 * hinter Pfeilen statt hinter einer Auswahlliste: Es ist der Ausnahmefall,
 * nicht der Normalfall, und soll sich auch so anfühlen.
 */
export default function BudgetZeitraum({ wert, datum, startTag, onChange }) {
  const { t, i18n } = useTranslation();
  const [offen, setOffen] = useState(false);
  const eigen = budgetMonat(datum, startTag);
  if (!eigen) return null;
  const gilt = wert || eigen;
  const abstand = Math.round(
    (Number(gilt.split("-")[0]) - Number(eigen.split("-")[0])) * 12
    + Number(gilt.split("-")[1]) - Number(eigen.split("-")[1]));

  function setze(schritt) {
    const neu = verschoben(gilt, schritt);
    onChange(neu === eigen ? null : neu);
  }

  return (
    <div className="budgetzeitraum">
      <span className="line-label">{t("transactions.budgetPeriod")}</span>
      <div className="budgetzeitraum-kopf">
        <strong>{formatMonthLabel(gilt, i18n.language)}</strong>
        {wert
          ? <span className="badge">{t("transactions.budgetPeriodManual")}</span>
          : <span className="muted small">{t("transactions.budgetPeriodAuto")}</span>}
        <span className="grow" />
        {!offen && (
          <button type="button" className="link-btn" onClick={() => setOffen(true)}>
            {t("transactions.budgetPeriodChange")}
          </button>
        )}
      </div>
      {offen && (
        <div className="budgetzeitraum-wahl">
          <p className="muted small">{t("transactions.budgetPeriodHint")}</p>
          <div className="budgetzeitraum-schritte">
            <button type="button" className="btn sm" disabled={abstand <= -REICHWEITE}
                    aria-label={t("transactions.budgetPeriodBack")} onClick={() => setze(-1)}>
              <Icon name="chevron-left" size={16} />
            </button>
            <span className="budgetzeitraum-monat">{formatMonthLabel(gilt, i18n.language)}</span>
            <button type="button" className="btn sm" disabled={abstand >= REICHWEITE}
                    aria-label={t("transactions.budgetPeriodForward")} onClick={() => setze(1)}>
              <Icon name="chevron-right" size={16} />
            </button>
            {wert && (
              <button type="button" className="link-btn" onClick={() => onChange(null)}>
                {t("transactions.budgetPeriodReset")}
              </button>
            )}
          </div>
        </div>
      )}
    </div>
  );
}