"use client";
// components/modales/kueModal/pages/Knotenpunkte.tsx

import React, { useEffect, useState } from "react";

declare global {
  interface Window {
    kueNodeID?: string[];
    kueLinkID?: string[];
    kueLinkLength?: number[];
  }
}

interface Props {
  slot: number;
  onClose?: () => void;
}

export default function Knotenpunkte({ slot }: Props) {
  const [knotenNamen, setKnotenNamen] = useState<string[]>(Array(10).fill(""));
  const [linienNamen, setLinienNamen] = useState<string[]>(Array(10).fill(""));
  const [linienLaenge, setLinienLaenge] = useState<number[]>(Array(10).fill(0));

  useEffect(() => {
    const slotIndex = slot;
    const isDev =
      typeof window !== "undefined" && window.location.hostname === "localhost";

    const scriptUrl = isDev
      ? `/api/cpl/readKnotenpunktAPIHandler?slot=${slotIndex}`
      : `/CPL?/CPL/Service/kueDataKnoten/kueData${slotIndex}.js`;

    const script = document.createElement("script");
    script.src = scriptUrl;
    script.async = true;

    script.onload = () => {
      setKnotenNamen(window.kueNodeID ?? []);
      setLinienNamen(window.kueLinkID ?? []);
      setLinienLaenge(window.kueLinkLength ?? []);
    };

    script.onerror = () => {
      console.error("❌ Fehler beim Laden von:", scriptUrl);
    };

    document.body.appendChild(script);
    return () => {
      document.body.removeChild(script);
    };
  }, [slot]);

  return (
    <div
      className="space-y-2 text-sm laptop:text-base"
      style={{ maxHeight: "calc(75vh - 4rem)", overflowY: "auto" }}
    >
      {/*
            <h2 className="text-base laptop:text-lg font-semibold">
        Knotenpunkte & Verbindungen – Slot {slot + 1}
      </h2>
      */}

      {knotenNamen.map((knoten, index) => (
        <div key={`knoten-${index}`} className="space-y-1">
          <div className="flex flex-col laptop:flex-row laptop:items-center gap-1 laptop:gap-2">
            <label className="w-full laptop:w-28 text-left laptop:text-right shrink-0">
              Knoten {index + 1}:
            </label>
            <input
              type="text"
              className="border border-gray-300 rounded px-2 py-1 w-full"
              value={knoten}
              onChange={(e) => {
                const updated = [...knotenNamen];
                updated[index] = e.target.value;
                setKnotenNamen(updated);
              }}
              disabled
            />
          </div>

          {index < 9 && (
            <div className="flex flex-col laptop:flex-row laptop:items-center laptop:ml-10 gap-1 laptop:gap-2 text-gray-600 text-xs laptop:text-sm">
              <span className="w-full laptop:w-28 text-left laptop:text-right shrink-0">
                ↳ Verbindung:
              </span>
              <input
                type="text"
                className="border border-gray-200 rounded px-2 py-1 w-full laptop:w-1/2"
                value={linienNamen[index]}
                onChange={(e) => {
                  const updated = [...linienNamen];
                  updated[index] = e.target.value;
                  setLinienNamen(updated);
                }}
                disabled
              />
              <div className="relative w-full laptop:w-24">
                <input
                  type="number"
                  min={0}
                  step={0.01}
                  className="border border-gray-200 rounded px-2 py-1 pr-12 w-full text-right"
                  value={linienLaenge[index]}
                  onChange={(e) => {
                    const updated = [...linienLaenge];
                    updated[index] = parseFloat(e.target.value);
                    setLinienLaenge(updated);
                  }}
                  disabled
                />
                <span className="absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-500 text-sm">
                  m
                </span>
              </div>
            </div>
          )}
        </div>
      ))}
    </div>
  );
}