import React, { useState, useEffect } from "react";
import ReactModal from "react-modal";
import "bootstrap-icons/font/bootstrap-icons.css"; // Import Bootstrap Icons

function SettingModal({ showModal, onClose }) {
  const [name, setName] = useState("CPLV4");
  const [mac1, setMac1] = useState("0 48 86 81 46 157");
  const [mac2, setMac2] = useState("0 48 86 81 46 158");
  const [ip, setIp] = useState("10.10.0.118");
  const [subnet, setSubnet] = useState("255.255.255.0");
  const [gateway, setGateway] = useState("10.10.0.1");
  const [systemUhr, setSystemUhr] = useState("16.10.24 15:27:23 Uhr");
  const [ntp1, setNtp1] = useState("192.53.103.108");
  const [ntp2, setNtp2] = useState("0.0.0.0");
  const [ntp3, setNtp3] = useState("0.0.0.0");
  const [zeitzone, setZeitzone] = useState("2");
  const [activ, setActiv] = useState("1");

  useEffect(() => {
    if (window.deviceName) setName(window.deviceName);
    if (window.mac1) setMac1(window.mac1);
    if (window.mac2) setMac2(window.mac2);
    if (window.ip) setIp(window.ip);
    if (window.subnet) setSubnet(window.subnet);
    if (window.gateway) setGateway(window.gateway);
    if (window.datetime) setSystemUhr(window.datetime);
    if (window.ntpServer1Ip) setNtp1(window.ntpServer1Ip);
    if (window.ntpServer2Ip) setNtp2(window.ntpServer2Ip);
    if (window.ntpServer3Ip) setNtp3(window.ntpServer3Ip);
    if (window.ntpTimezone) setZeitzone(window.ntpTimezone);
    if (window.ntpActive) setActiv(window.ntpActive);
  }, []);

  const handleSubmit = () => {
    const url = `CPL?SNNA=${name}&SEI01=${ip}&SEI02=${subnet}&SEI03=${gateway}&SNIP1=${ntp1}&SNIP2=${ntp2}&SNIP3=${ntp3}&SNTZ=${zeitzone}&SNAC=${activ}`;

    fetch(url)
      .then((response) => {
        if (response.ok) {
          alert("Daten erfolgreich gesendet!");
        } else {
          alert("Fehler beim Senden der Daten!");
        }
      })
      .catch((error) => {
        console.error("Fehler:", error);
        alert("Fehler beim Senden der Daten!");
      });
  };

  const handleReboot = () => {
    const rebootUrl = `CPL?BOOT=1`;

    fetch(rebootUrl)
      .then((response) => {
        if (response.ok) {
          alert(
            "Neustart Befehl erfolgreich gesendet! CPL wird neu gestartet."
          );
        } else {
          alert("Fehler beim Senden des Neustart-Befehls!");
        }
      })
      .catch((error) => {
        console.error("Fehler:", error);
        alert("Fehler beim Senden des Neustart-Befehls!");
      });
  };

  const handleClearDatabase = () => {
    const clearDbUrl = `CPL?DEDB=1`;

    fetch(clearDbUrl)
      .then((response) => {
        if (response.ok) {
          alert("Befehl zum Leeren der Datenbank erfolgreich gesendet!");
        } else {
          alert("Fehler beim Senden des Befehls zum Leeren der Datenbank!");
        }
      })
      .catch((error) => {
        console.error("Fehler:", error);
        alert("Fehler beim Senden des Befehls zum Leeren der Datenbank!");
      });
  };

  return (
    <ReactModal
      isOpen={showModal}
      onRequestClose={onClose}
      style={{
        overlay: {
          backgroundColor: "rgba(0, 0, 0, 0.5)",
          zIndex: 100,
        },
        content: {
          top: "50%",
          left: "50%",
          right: "auto",
          bottom: "auto",
          marginRight: "-50%",
          transform: "translate(-50%, -50%)",
          width: "80%",
          maxWidth: "800px",
          padding: "20px",
          borderRadius: "8px",
          border: "none",
          position: "relative",
        },
      }}
    >
      {/* Close Icon */}
      <button
        onClick={onClose}
        style={{
          position: "absolute",
          top: "10px",
          right: "10px",
          background: "transparent",
          border: "none",
          cursor: "pointer",
          fontSize: "24px",
        }}
      >
        <i className="bi bi-x-circle-fill"></i> {/* Bootstrap X Icon */}
      </button>

      <div>
        <h2 className="text-lg font-bold mb-4">System:</h2>
        <form>
          <div className="mb-4">
            <label className="block text-sm font-medium">Name:</label>
            <input
              type="text"
              className="border border-gray-300 rounded p-2 w-full"
              value={name}
              onChange={(e) => setName(e.target.value)}
            />
          </div>

          <div className="mb-4 grid grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-medium">
                MAC Adresse 1:
              </label>
              <input
                type="text"
                className="border border-gray-300 rounded p-2 w-full"
                value={mac1}
                onChange={(e) => setMac1(e.target.value)}
              />
            </div>
            <div>
              <label className="block text-sm font-medium">
                MAC Adresse 2:
              </label>
              <input
                type="text"
                className="border border-gray-300 rounded p-2 w-full"
                value={mac2}
                onChange={(e) => setMac2(e.target.value)}
              />
            </div>
          </div>

          <div className="mb-4 grid grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-medium">IP:</label>
              <input
                type="text"
                className="border border-gray-300 rounded p-2 w-full"
                value={ip}
                onChange={(e) => setIp(e.target.value)}
              />
            </div>
            <div>
              <label className="block text-sm font-medium">Subnet:</label>
              <input
                type="text"
                className="border border-gray-300 rounded p-2 w-full"
                value={subnet}
                onChange={(e) => setSubnet(e.target.value)}
              />
            </div>
          </div>

          <div className="mb-4 grid grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-medium">Gateway:</label>
              <input
                type="text"
                className="border border-gray-300 rounded p-2 w-full"
                value={gateway}
                onChange={(e) => setGateway(e.target.value)}
              />
            </div>
            <div>
              <label className="block text-sm font-medium">Systemuhr:</label>
              <input
                type="text"
                className="border border-gray-300 rounded p-2 w-full"
                value={systemUhr}
                disabled
              />
            </div>
          </div>

          {/* SNTP Client */}
          <h3 className="text-sm font-bold mb-2">SNTP Client:</h3>
          <div className="mb-4 grid grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-medium">
                IP NTP Server 1:
              </label>
              <input
                type="text"
                className="border border-gray-300 rounded p-2 w-full"
                value={ntp1}
                onChange={(e) => setNtp1(e.target.value)}
              />
            </div>
            <div>
              <label className="block text-sm font-medium">
                IP NTP Server 2:
              </label>
              <input
                type="text"
                className="border border-gray-300 rounded p-2 w-full"
                value={ntp2}
                onChange={(e) => setNtp2(e.target.value)}
              />
            </div>
            <div>
              <label className="block text-sm font-medium">
                IP NTP Server 3:
              </label>
              <input
                type="text"
                className="border border-gray-300 rounded p-2 w-full"
                value={ntp3}
                onChange={(e) => setNtp3(e.target.value)}
              />
            </div>
            <div>
              <label className="block text-sm font-medium">Zeitzone:</label>
              <input
                type="text"
                className="border border-gray-300 rounded p-2 w-full"
                value={zeitzone}
                onChange={(e) => setZeitzone(e.target.value)}
              />
            </div>
            <div>
              <label className="block text-sm font-medium">Activ:</label>
              <input
                type="text"
                className="border border-gray-300 rounded p-2 w-full"
                value={activ}
                onChange={(e) => setActiv(e.target.value)}
              />
            </div>
          </div>

          {/* Datenbank leeren und Neustart CPL */}
          <div className="flex flex-col items-start justify-between mt-4 space-y-2">
            <button
              className="bg-orange-500 text-white px-4 py-2 rounded"
              onClick={() => handleReboot()}
            >
              Neustart CPL
            </button>
          </div>

          {/* Modal Footer */}
          <div className="flex justify-between mt-4">
            <button
              className="bg-red-500 text-white px-4 py-2 rounded"
              onClick={() => handleClearDatabase()}
            >
              Datenbank leeren
            </button>
            <button
              onClick={() => handleSubmit()}
              className="bg-blue-500 text-white px-4 py-2 rounded"
            >
              Übernehmen
            </button>
          </div>
        </form>
      </div>
    </ReactModal>
  );
}

export default SettingModal;