"use client";
// /components/main/kabelueberwachung/kue705FO/modals/TdrEinstellung.tsx
import React, { useState, useEffect } from "react";

declare global {
  interface Window {
    win_tdrActive?: number[];
    win_tdrAmp?: string[];
    win_tdrPulse?: string[];
    win_tdrTrigger?: string[];
  }
}

interface Props {
  slot: number;
}

export default function TdrEinstellung({ slot }: Props) {
  const [tdrActive, setTdrActive] = useState(false);
  const [tdrData, setTdrData] = useState({
    verstarkung: "",
    pulsweite: "",
    trigger: "",
  });

  useEffect(() => {
    if (typeof window !== "undefined") {
      if (Array.isArray(window.win_tdrActive)) {
        const status = parseInt(String(window.win_tdrActive[slot]));
        setTdrActive(status === 1);
      }
      setTdrData({
        verstarkung: window.win_tdrAmp?.[slot] ?? "",
        pulsweite: window.win_tdrPulse?.[slot] ?? "",
        trigger: window.win_tdrTrigger?.[slot] ?? "",
      });
    }
  }, [slot]);

  const handleSave = () => {
    const v = tdrData.verstarkung.trim();
    const p = tdrData.pulsweite.trim();
    const t = tdrData.trigger.trim();

    if (!v || !p || !t) {
      alert("Bitte alle Felder ausfüllen.");
      return;
    }

    const url = `/CPL?KTT${slot}=0&V=${v}&P=${p}&T=${t}`;
    alert(`Sende: ${url}`);
    window.location.href = url;
  };

  return (
    <div className="space-y-4 text-sm laptop:text-base">
      <h2 className="text-base laptop:text-lg font-semibold">
        TDR-Einstellung – Steckplatz {slot + 1}
      </h2>

      <div className="flex items-center gap-3">
        <span className="text-sm font-medium">TDR-Funktion:</span>
        <button
          type="button"
          role="switch"
          aria-checked={tdrActive}
          onClick={() => setTdrActive(!tdrActive)}
          className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200 ${
            tdrActive ? "bg-green-500" : "bg-gray-300"
          }`}
        >
          <span
            className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform duration-200 ${
              tdrActive ? "translate-x-6" : "translate-x-1"
            }`}
          />
        </button>
        <span className="text-sm text-gray-600">
          {tdrActive ? "aktiviert" : "deaktiviert"}
        </span>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div>
          <label className="block text-sm font-medium mb-1">Verstärkung</label>
          <input
            value={tdrData.verstarkung}
            onChange={(e) =>
              setTdrData({ ...tdrData, verstarkung: e.target.value })
            }
            className="border px-2 py-1 rounded w-full"
          />
        </div>

        <div>
          <label className="block text-sm font-medium mb-1">Pulsweite</label>
          <input
            value={tdrData.pulsweite}
            onChange={(e) =>
              setTdrData({ ...tdrData, pulsweite: e.target.value })
            }
            className="border px-2 py-1 rounded w-full"
          />
        </div>

        <div>
          <label className="block text-sm font-medium mb-1">Trigger</label>
          <input
            value={tdrData.trigger}
            onChange={(e) =>
              setTdrData({ ...tdrData, trigger: e.target.value })
            }
            className="border px-2 py-1 rounded w-full"
          />
        </div>
      </div>

      <div className="pt-4 flex justify-end">
        <button
          onClick={handleSave}
          className="bg-blue-600 text-white px-4 py-2 rounded shadow hover:bg-blue-700 transition"
        >
          💾 Einstellungen senden
        </button>
      </div>
    </div>
  );
}