leistungsbilanz-ts/src/frontend/components/circuit-tree-preview.tsx

"use client";

import { useEffect, useState } from "react";
import { Fragment } from "react";
import { getCircuitTree } from "../utils/api";
import type { CircuitTreeCircuitDto, CircuitTreeResponseDto } from "../types";
import {
  formatValue,
  getCircuitSectionLabel,
} from "../utils/circuit-grid-model";

function renderCircuitSummaryLabel(circuit: CircuitTreeCircuitDto) {
  if (circuit.displayName?.trim()) {
    return circuit.displayName;
  }
  if (circuit.deviceRows.length > 1) {
    return `${circuit.deviceRows.length} Geräte`;
  }
  return "Reserve";
}

export function CircuitTreePreview(props: { projectId: string; circuitListId: string }) {
  const { projectId, circuitListId } = props;
  const [data, setData] = useState<CircuitTreeResponseDto | null>(null);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    setIsLoading(true);
    setError(null);
    getCircuitTree(projectId, circuitListId)
      .then(setData)
      .catch((err: unknown) =>
        setError(err instanceof Error ? err.message : "Die Stromkreisstruktur konnte nicht geladen werden.")
      )
      .finally(() => setIsLoading(false));
  }, [projectId, circuitListId]);

  if (isLoading) {
    return <div className="alert alert-info">Stromkreisstruktur wird geladen …</div>;
  }

  if (error) {
    return <div className="alert alert-danger">{error}</div>;
  }

  if (!data || !data.sections.length) {
    return <div className="alert alert-secondary">Keine Bereiche oder Stromkreise vorhanden.</div>;
  }

  const hasAnyCircuits = data.sections.some((section) => section.circuits.length > 0);
  if (!hasAnyCircuits) {
    return <div className="alert alert-secondary">Bereiche sind vorhanden, enthalten aber noch keine Stromkreise.</div>;
  }

  return (
    <div className="card shadow-sm">
      <div className="card-body">
        <div className="table-responsive">
          <table className="table table-sm align-middle circuit-tree-table">
            <thead>
              <tr>
                <th>Betriebsmittelkennzeichen</th>
                <th>Anzeigename</th>
                <th>Phasenart</th>
                <th>Anschlussart</th>
                <th>Kostengruppe</th>
                <th>Kategorie</th>
                <th>Ebene</th>
                <th>Raumnummer</th>
                <th>Raumname</th>
                <th className="text-end">Anzahl</th>
                <th className="text-end">Leistung / Gerät [kW]</th>
                <th className="text-end">Gleichzeitigkeit</th>
                <th className="text-end">cos φ</th>
                <th className="text-end">Gesamtsumme [kW]</th>
                <th>Schutzart</th>
                <th className="text-end">Bemessungsstrom</th>
                <th>Charakteristik</th>
                <th>Kabeltyp</th>
                <th>Kabelquerschnitt</th>
                <th className="text-end">Kabellänge</th>
                <th>Bemerkung</th>
              </tr>
            </thead>
            <tbody>
              {data.sections.map((section) => (
                <SectionRows key={section.id} section={section} />
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

function SectionRows(props: { section: CircuitTreeResponseDto["sections"][number] }) {
  const { section } = props;
  return (
    <>
      <tr className="section-row">
        <td colSpan={21}>
          <strong>{getCircuitSectionLabel(section)}</strong>
        </td>
      </tr>
      {section.circuits.map((circuit) => {
        if (circuit.deviceRows.length === 0) {
          return (
            <tr key={circuit.id} className="reserve-row">
              <td>{circuit.equipmentIdentifier}</td>
              <td>{circuit.displayName?.trim() || "Reserve"}</td>
              <td colSpan={11}>-</td>
              <td className="text-end">
                {formatValue(circuit.circuitTotalPower, "circuitTotalPower")}
              </td>
              <td>{circuit.protectionDevice?.type ?? "-"}</td>
              <td className="text-end">
                {formatValue(circuit.protectionDevice?.ratedCurrentA, "protectionRatedCurrent")}
              </td>
              <td>{circuit.protectionDevice?.tripCharacteristic ?? circuit.protectionDevice?.fuseUtilizationCategory ?? "-"}</td>
              <td>{circuit.cableType ?? "-"}</td>
              <td>{circuit.cableCrossSection ?? "-"}</td>
              <td className="text-end">{formatValue(circuit.cableLength, "cableLength")}</td>
              <td>{circuit.remark ?? "-"}</td>
            </tr>
          );
        }

        if (circuit.deviceRows.length === 1) {
          const row = circuit.deviceRows[0];
          return (
            <tr key={circuit.id} className={circuit.isReserve ? "reserve-row" : ""}>
              <td>{circuit.equipmentIdentifier}</td>
              <td>{row.displayName || row.name}</td>
              <td>{formatValue(row.phaseType ?? undefined, "phaseType")}</td>
              <td>{row.connectionKind ?? "-"}</td>
              <td>{row.costGroup ?? "-"}</td>
              <td>{row.category ?? "-"}</td>
              <td>{row.level ?? "-"}</td>
              <td>{row.roomNumberSnapshot ?? "-"}</td>
              <td>{row.roomNameSnapshot ?? "-"}</td>
              <td className="text-end">{formatValue(row.quantity, "quantity")}</td>
              <td className="text-end">{formatValue(row.powerPerUnit, "powerPerUnit")}</td>
              <td className="text-end">
                {formatValue(row.simultaneityFactor, "simultaneityFactor")}
              </td>
              <td className="text-end">{formatValue(row.cosPhi, "cosPhi")}</td>
              <td className="text-end">{formatValue(row.rowTotalPower, "rowTotalPower")}</td>
              <td>{circuit.protectionDevice?.type ?? "-"}</td>
              <td className="text-end">
                {formatValue(circuit.protectionDevice?.ratedCurrentA, "protectionRatedCurrent")}
              </td>
              <td>{circuit.protectionDevice?.tripCharacteristic ?? circuit.protectionDevice?.fuseUtilizationCategory ?? "-"}</td>
              <td>{circuit.cableType ?? "-"}</td>
              <td>{circuit.cableCrossSection ?? "-"}</td>
              <td className="text-end">{formatValue(circuit.cableLength, "cableLength")}</td>
              <td>{row.remark ?? circuit.remark ?? "-"}</td>
            </tr>
          );
        }

        return (
          <Fragment key={circuit.id}>
            <tr key={`${circuit.id}-summary`} className="summary-row">
              <td>{circuit.equipmentIdentifier}</td>
              <td>{renderCircuitSummaryLabel(circuit)}</td>
              <td colSpan={11}>-</td>
              <td className="text-end">
                {formatValue(circuit.circuitTotalPower, "circuitTotalPower")}
              </td>
              <td>{circuit.protectionDevice?.type ?? "-"}</td>
              <td className="text-end">
                {formatValue(circuit.protectionDevice?.ratedCurrentA, "protectionRatedCurrent")}
              </td>
              <td>{circuit.protectionDevice?.tripCharacteristic ?? circuit.protectionDevice?.fuseUtilizationCategory ?? "-"}</td>
              <td>{circuit.cableType ?? "-"}</td>
              <td>{circuit.cableCrossSection ?? "-"}</td>
              <td className="text-end">{formatValue(circuit.cableLength, "cableLength")}</td>
              <td>{circuit.remark ?? "-"}</td>
            </tr>
            {circuit.deviceRows.map((row) => (
              <tr key={row.id} className="device-row">
                <td className="text-muted"> </td>
                <td className="indented-cell">{row.displayName || row.name}</td>
                <td>{formatValue(row.phaseType ?? undefined, "phaseType")}</td>
                <td>{row.connectionKind ?? "-"}</td>
                <td>{row.costGroup ?? "-"}</td>
                <td>{row.category ?? "-"}</td>
                <td>{row.level ?? "-"}</td>
                <td>{row.roomNumberSnapshot ?? "-"}</td>
                <td>{row.roomNameSnapshot ?? "-"}</td>
                <td className="text-end">{formatValue(row.quantity, "quantity")}</td>
                <td className="text-end">{formatValue(row.powerPerUnit, "powerPerUnit")}</td>
                <td className="text-end">
                  {formatValue(row.simultaneityFactor, "simultaneityFactor")}
                </td>
                <td className="text-end">{formatValue(row.cosPhi, "cosPhi")}</td>
                <td className="text-end">{formatValue(row.rowTotalPower, "rowTotalPower")}</td>
                <td>-</td>
                <td className="text-end">-</td>
                <td>-</td>
                <td>-</td>
                <td>-</td>
                <td className="text-end">-</td>
                <td>{row.remark ?? "-"}</td>
              </tr>
            ))}
          </Fragment>
        );
      })}
      <tr className="placeholder-row">
        <td>-frei-</td>
        <td colSpan={20}>Freie Zeile</td>
      </tr>
    </>
  );
}