"use client";

import * as React from "react";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { de } from "@/lib/i18n/de";
import type {
  MerkmalDefinition,
  MerkmalValueInput,
} from "@/lib/merkmale/types";

export type MerkmalWerteState = Record<string, MerkmalValueInput>;

/**
 * Leitet den initialen Editor-Zustand aus Definitionen + bereits gespeicherten
 * Werten ab. Vorgabewerte werden typgerecht aus den drei Spalten gelesen, falls
 * kein gespeicherter Wert existiert.
 */
export function initMerkmalWerte(
  defs: MerkmalDefinition[],
  vorhanden: MerkmalValueInput[] = [],
): MerkmalWerteState {
  const byId = new Map(vorhanden.map((v) => [v.merkmalId, v]));
  const state: MerkmalWerteState = {};
  for (const d of defs) {
    const existing = byId.get(d.merkmalId);
    state[d.merkmalId] = existing ?? {
      merkmalId: d.merkmalId,
      num: d.vorgabeNum,
      text: d.vorgabeText,
      bool: d.vorgabeBool,
    };
  }
  return state;
}

interface Props {
  definitionen: MerkmalDefinition[];
  werte: MerkmalWerteState;
  onChange: (next: MerkmalWerteState) => void;
}

/**
 * Typisierter Merkmal-Editor: rendert je Merkmal das passende Eingabefeld
 * (Zahl/Auswahl/Schalter/Text). Pflichtmerkmale sind markiert. Der Editor ist
 * kontrolliert; die Server-Action validiert die Werte erneut (Default-deny).
 */
export function MerkmalValueEditor({ definitionen, werte, onChange }: Props) {
  if (definitionen.length === 0) {
    return (
      <p className="text-sm text-anthrazit/60">{de.verwaltung.keineMerkmale}</p>
    );
  }

  function update(merkmalId: string, patch: Partial<MerkmalValueInput>) {
    onChange({
      ...werte,
      [merkmalId]: { ...werte[merkmalId], merkmalId, ...patch },
    });
  }

  return (
    <div className="space-y-4">
      {definitionen.map((d) => {
        const v = werte[d.merkmalId] ?? { merkmalId: d.merkmalId };
        const fieldId = `merkmal-${d.merkmalId}`;
        return (
          <div key={d.merkmalId} className="grid gap-1.5">
            <Label htmlFor={fieldId}>
              {d.name}
              {d.einheit ? (
                <span className="text-anthrazit/50"> ({d.einheit})</span>
              ) : null}
              {d.pflicht ? (
                <span className="ml-1 text-signal" aria-hidden>
                  *
                </span>
              ) : null}
            </Label>

            {d.typ === "number" ? (
              <Input
                id={fieldId}
                name={fieldId}
                type="number"
                inputMode="decimal"
                step="any"
                required={d.pflicht}
                value={v.num ?? ""}
                onChange={(e) =>
                  update(d.merkmalId, {
                    num: e.target.value === "" ? null : Number(e.target.value),
                  })
                }
              />
            ) : d.typ === "boolean" ? (
              <select
                id={fieldId}
                name={fieldId}
                required={d.pflicht}
                className="h-10 w-full rounded border border-rand bg-white px-3 text-sm text-anthrazit focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-navy"
                value={v.bool == null ? "" : v.bool ? "true" : "false"}
                onChange={(e) =>
                  update(d.merkmalId, {
                    bool:
                      e.target.value === ""
                        ? null
                        : e.target.value === "true",
                  })
                }
              >
                <option value="">{de.search.egal}</option>
                <option value="true">{de.search.ja}</option>
                <option value="false">{de.search.nein}</option>
              </select>
            ) : d.typ === "enum" ? (
              <select
                id={fieldId}
                name={fieldId}
                required={d.pflicht}
                className="h-10 w-full rounded border border-rand bg-white px-3 text-sm text-anthrazit focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-navy"
                value={v.text ?? ""}
                onChange={(e) =>
                  update(d.merkmalId, {
                    text: e.target.value === "" ? null : e.target.value,
                  })
                }
              >
                <option value="">—</option>
                {d.optionen.map((o) => (
                  <option key={o.wert} value={o.wert}>
                    {o.label}
                  </option>
                ))}
              </select>
            ) : (
              <Input
                id={fieldId}
                name={fieldId}
                type="text"
                required={d.pflicht}
                value={v.text ?? ""}
                onChange={(e) =>
                  update(d.merkmalId, {
                    text: e.target.value === "" ? null : e.target.value,
                  })
                }
              />
            )}
          </div>
        );
      })}
    </div>
  );
}

/** Wandelt den Editor-Zustand in die Liste der Server-Eingaben um. */
export function werteToList(state: MerkmalWerteState): MerkmalValueInput[] {
  return Object.values(state);
}
