"use client"; // /compoenents/main/einausgaenge/modals/OutputModal.tsx
import React, { useState } from "react";

export default function OutputModal({
  selectedOutput,
  closeOutputModal,
  isOpen,
}: {
  selectedOutput: any;
  closeOutputModal: () => void;
  isOpen: boolean;
}) {
  if (!isOpen || !selectedOutput) return null;

  const [label, setLabel] = useState(selectedOutput.label || "");
  const [status, setStatus] = useState(selectedOutput.status || false);
  const [timer, setTimer] = useState(0); // Optional: Sekunden für temporäres Einschalten

  const handleSave = () => {
    // TODO: Ersetze dies durch echten API-Call (z. B. per fetch)
    console.log("🔧 Neue Einstellungen:", {
      id: selectedOutput.id,
      label,
      status,
      timer: timer > 0 ? timer : null,
    });

    // Optional: Fake-Aufruf an CGI-Endpoint
    // location.href = `CPL?Service/ausgaenge.ACP&DA${selectedOutput.id}=${status ? 1 : 0}`;

    closeOutputModal();
  };

  return (
    <div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50">
      <div className="bg-white rounded-lg shadow-lg p-6 w-full max-w-md">
        <h2 className="text-xl font-bold mb-4 text-littwin-blue">
          Ausgang {selectedOutput.id} – Konfiguration
        </h2>

        <div className="mb-4">
          <label className="block font-semibold mb-1">Bezeichnung</label>
          <input
            type="text"
            value={label}
            onChange={(e) => setLabel(e.target.value)}
            className="w-full border border-gray-300 rounded px-3 py-2"
            placeholder="z. B. Licht Relais 1"
          />
        </div>

        <div className="mb-4 flex items-center justify-between">
          <label className="font-semibold">Status</label>
          <button
            onClick={() => setStatus(!status)}
            className={`px-3 py-1 rounded text-white font-medium ${
              status ? "bg-green-600" : "bg-gray-400"
            }`}
          >
            {status ? "EIN" : "AUS"}
          </button>
        </div>

        <div className="mb-4">
          <label className="block font-semibold mb-1">
            Timer (Sekunden, optional)
          </label>
          <input
            type="number"
            min={0}
            value={timer}
            onChange={(e) => setTimer(parseInt(e.target.value))}
            className="w-full border border-gray-300 rounded px-3 py-2"
            placeholder="z. B. 5 für 5 Sekunden"
          />
        </div>

        <div className="flex justify-end gap-2 mt-6">
          <button
            onClick={closeOutputModal}
            className="px-4 py-2 rounded bg-gray-300 hover:bg-gray-400"
          >
            Abbrechen
          </button>
          <button
            onClick={handleSave}
            className="px-4 py-2 rounded bg-blue-600 hover:bg-blue-700 text-white"
          >
            Speichern
          </button>
        </div>
      </div>
    </div>
  );
}