"use client";

import { type FormEvent, useState } from "react";
import {
  circuitGroupCategories,
  circuitGroupCategoryLabels,
  type CircuitGroupCategory,
} from "../../shared/constants/circuit-group";
import type { CircuitTreeSectionDto } from "../types";
import { FormModal } from "./form-modal";

interface CircuitGroupModalProps {
  initialSection?: CircuitTreeSectionDto;
  isSaving: boolean;
  onClose: () => void;
  onSave: (values: {
    category: CircuitGroupCategory;
    displayName: string;
  }) => Promise<void>;
}

export function CircuitGroupModal({
  initialSection,
  isSaving,
  onClose,
  onSave,
}: CircuitGroupModalProps) {
  const [category, setCategory] = useState<CircuitGroupCategory>(
    initialSection?.category ?? "lighting"
  );
  const [displayName, setDisplayName] = useState(
    initialSection?.displayName ?? ""
  );

  async function handleSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    await onSave({ category, displayName });
  }

  return (
    <FormModal
      description={
        initialSection
          ? "Nur der Anzeigename wird geändert. Kategorie, Nummer, Präfix und vorhandene BMK bleiben stabil."
          : "Die nächste freie Gruppennummer der gewählten Kategorie wird automatisch vergeben."
      }
      isSaving={isSaving}
      onClose={onClose}
      onSubmit={handleSubmit}
      submitDisabled={Boolean(initialSection && !displayName.trim())}
      submitLabel={initialSection ? "Änderungen speichern" : "Gruppe anlegen"}
      title={initialSection ? "Stromkreisgruppe bearbeiten" : "Stromkreisgruppe hinzufügen"}
    >
      <div className="row g-3">
        <div className="col-12 col-md-6">
          <label className="form-label" htmlFor="circuit-group-category">
            Kategorie
          </label>
          <select
            autoFocus={!initialSection}
            className="form-select"
            disabled={Boolean(initialSection)}
            id="circuit-group-category"
            onChange={(event) =>
              setCategory(event.target.value as CircuitGroupCategory)
            }
            value={category}
          >
            {circuitGroupCategories.map((entry) => (
              <option key={entry} value={entry}>
                {circuitGroupCategoryLabels[entry]}
              </option>
            ))}
          </select>
        </div>
        <div className="col-12 col-md-6">
          <label className="form-label" htmlFor="circuit-group-name">
            Anzeigename
          </label>
          <input
            autoFocus={Boolean(initialSection)}
            className="form-control"
            id="circuit-group-name"
            onChange={(event) => setDisplayName(event.target.value)}
            placeholder={
              initialSection
                ? undefined
                : "Leer lassen für den automatisch erzeugten Namen"
            }
            required={Boolean(initialSection)}
            value={displayName}
          />
        </div>
      </div>
    </FormModal>
  );
}