"use client";
import { useState, useEffect } from "react";
import ReactModal from "react-modal";
import KueEinstellung from "./KueEinstellung";
import TdrEinstellung from "./TdrEinstellung";
import Knotenpunkte from "./Knotenpunkte";

interface KueModalProps {
  showModal: boolean;
  onClose: () => void;
  slot: number;
  onModulNameChange: (id: string) => void;
}

export default function KueModal({ showModal, onClose, slot }: KueModalProps) {
  // 🧠 Tab wird initial nur einmal aus globalem Speicher geladen
  const [activeTab, setActiveTab] = useState<"kue" | "tdr" | "knoten">(() => {
    if (typeof window !== "undefined" && (window as any).__lastKueTab) {
      return (window as any).__lastKueTab;
    }
    return "kue";
  });

  // 🔁 Bei jeder Tab-Änderung speichern wir ihn global
  useEffect(() => {
    if (typeof window !== "undefined") {
      (window as any).__lastKueTab = activeTab;
    }
  }, [activeTab]);
  useEffect(() => {
    if (typeof window !== "undefined") {
      window.kabelModalOpen = showModal;
    }
  }, [showModal]);

  return (
    <ReactModal
      isOpen={showModal}
      onRequestClose={onClose}
      ariaHideApp={false}
      style={{
        overlay: {
          backgroundColor: "rgba(0, 0, 0, 0.5)",
          zIndex: 100,
        },
        content: {
          top: "50%",
          left: "50%",
          right: "auto",
          bottom: "auto",
          transform: "translate(-50%, -50%)",
          width: "90%",
          maxWidth: "850px",
          padding: "0px",
          border: "none",
          borderRadius: "8px",
          position: "relative",
        },
      }}
    >
      <div className="p-2 flex justify-between items-center rounded-t-md">
        <h2 className="text-base font-bold">Steckplatz {slot + 1}</h2>
        <button onClick={onClose} className="text-2xl hover:text-gray-200">
          <i className="bi bi-x-circle-fill"></i>
        </button>
      </div>

      <div className="flex justify-center bg-gray-100 space-x-2 p-2">
        <button
          onClick={() => setActiveTab("kue")}
          className={`px-4 py-1 rounded-t font-bold text-base ${
            activeTab === "kue"
              ? "bg-white text-blue-600"
              : "text-gray-500 hover:text-black"
          }`}
        >
          KUE Einstellung
        </button>
        <button
          onClick={() => setActiveTab("tdr")}
          className={`px-4 py-1 rounded-t font-bold text-sm ${
            activeTab === "tdr"
              ? "bg-white text-blue-600"
              : "text-gray-500 hover:text-black"
          }`}
        >
          TDR Einstellung
        </button>
        <button
          onClick={() => setActiveTab("knoten")}
          className={`px-4 py-1 rounded-t font-bold text-sm ${
            activeTab === "knoten"
              ? "bg-white text-blue-600"
              : "text-gray-500 hover:text-black"
          }`}
        >
          Knotenpunkte
        </button>
      </div>

      <div className="p-4 bg-white rounded-b-md max-h-[75vh] overflow-y-auto">
        <div style={{ display: activeTab === "kue" ? "block" : "none" }}>
          <KueEinstellung
            slot={slot}
            showModal={showModal} // ← hier übergeben
            onModulNameChange={(id) => console.log("Modulname geändert:", id)}
            onClose={onClose}
          />
        </div>

        {activeTab === "tdr" && (
          <TdrEinstellung slot={slot} onClose={onClose} />
        )}
        {activeTab === "knoten" && <Knotenpunkte slot={slot} />}
      </div>
    </ReactModal>
  );
}