leistungsbilanz-ts/src/frontend/estimate-balance/estimate-group-modal.tsx

"use client";

import { type FormEvent, useState } from "react";
import { FormModal } from "../components/form-modal";
import {
  estimateDefaultGroups,
  type EstimateGroupSnapshot,
} from "../../shared/estimate-balance/estimate-balance";
import { estimateTextLimits } from "./estimate-balance-document";

export interface EstimateGroupFormValues {
  costGroup: string;
  title: string;
  editor: string | null;
}

interface EstimateGroupModalProps {
  group: EstimateGroupSnapshot | null;
  onClose: () => void;
  onSave: (values: EstimateGroupFormValues) => void;
}

/** Creates or edits the KG number, title and "bearbeitet von" of one group. */
export function EstimateGroupModal({ group, onClose, onSave }: EstimateGroupModalProps) {
  const [costGroup, setCostGroup] = useState(group?.costGroup ?? "");
  const [title, setTitle] = useState(group?.title ?? "");
  const [editor, setEditor] = useState(group?.editor ?? "");

  function applyTemplate(index: string) {
    const template = estimateDefaultGroups[Number(index)];
    if (template) {
      setCostGroup(template.costGroup);
      setTitle(template.title);
    }
  }

  function handleSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    if (!title.trim()) {
      return;
    }
    onSave({
      costGroup: costGroup.trim(),
      title: title.trim(),
      editor: editor.trim() || null,
    });
  }

  return (
    <FormModal
      isSaving={false}
      onClose={onClose}
      onSubmit={handleSubmit}
      submitDisabled={!title.trim()}
      submitLabel={group ? "Übernehmen" : "Kostengruppe hinzufügen"}
      title={group ? "Kostengruppe bearbeiten" : "Kostengruppe hinzufügen"}
    >
      <div className="row g-3">
        {!group ? (
          <div className="col-12">
            <label className="form-label" htmlFor="estimate-group-template">
              Aus Vorlage KG 400 übernehmen
            </label>
            <select
              className="form-select"
              defaultValue=""
              id="estimate-group-template"
              onChange={(event) => applyTemplate(event.target.value)}
            >
              <option value="">– Vorlage wählen –</option>
              {estimateDefaultGroups.map((template, index) => (
                <option key={`${template.costGroup}-${template.title}`} value={index}>
                  {[template.costGroup, template.title].filter(Boolean).join(" ")}
                </option>
              ))}
            </select>
          </div>
        ) : null}
        <div className="col-12 col-md-3">
          <label className="form-label" htmlFor="estimate-group-cost-group">
            KG (DIN 276)
          </label>
          <input
            className="form-control"
            id="estimate-group-cost-group"
            maxLength={estimateTextLimits.costGroup}
            onChange={(event) => setCostGroup(event.target.value)}
            placeholder="z. B. 440"
            value={costGroup}
          />
        </div>
        <div className="col-12 col-md-9">
          <label className="form-label" htmlFor="estimate-group-title">
            Titel
          </label>
          <input
            className="form-control"
            id="estimate-group-title"
            maxLength={estimateTextLimits.groupTitle}
            onChange={(event) => setTitle(event.target.value)}
            placeholder="z. B. Starkstromanlagen"
            required
            value={title}
          />
        </div>
        <div className="col-12">
          <label className="form-label" htmlFor="estimate-group-editor">
            Bearbeitet von
          </label>
          <input
            className="form-control"
            id="estimate-group-editor"
            maxLength={estimateTextLimits.groupEditor}
            onChange={(event) => setEditor(event.target.value)}
            placeholder="Gewerk oder Name (optional)"
            value={editor}
          />
        </div>
        <div className="col-12">
          <p className="text-secondary small mb-0">
            Ohne KG-Nummer (z. B. „Allgemein“) wird die Gruppe im Vergleich mit der
            detaillierten Bilanz keiner Kostengruppe zugeordnet.
          </p>
        </div>
      </div>
    </FormModal>
  );
}