"use client";

import { useState } from "react";
import { PlusIcon, XMarkIcon } from "@heroicons/react/24/outline";

export default function ServerConfigForm() {
  const [serverName, setServerName] = useState("Server Name");
  const [licenseKey, setLicenseKey] = useState("");
  const [discordInvite, setDiscordInvite] = useState("https://discord.discord.gg/serverinvite");
  const [language, setLanguage] = useState("English");
  const [serverLogoUrl, setServerLogoUrl] = useState("https://cybersecures.eu/app/main/theme/assets/img/uploads/41eef524a401f5751cb260a061236eba.png?v=1737290234");
  const [requireSteam, setRequireSteam] = useState(false);
  const [logIpInfo, setLogIpInfo] = useState(false);
  const [minOnlineSeconds, setMinOnlineSeconds] = useState(45);

  const [exemptGroups, setExemptGroups] = useState<string[]>(["owner"]);
  const [adminGroups, setAdminGroups] = useState<string[]>(["admin", "staff"]);

  const [newExemptGroup, setNewExemptGroup] = useState("");
  const [newAdminGroup, setNewAdminGroup] = useState("");

  const inventorySystems = ["esx", "qb", "ox"];
  const [enabledInventory, setEnabledInventory] = useState<string[]>([]);

  function addExemptGroup() {
    const trimmed = newExemptGroup.trim();
    if (trimmed && !exemptGroups.includes(trimmed)) {
      setExemptGroups([...exemptGroups, trimmed]);
      setNewExemptGroup("");
    }
  }

  function removeExemptGroup(name: string) {
    setExemptGroups(exemptGroups.filter((g) => g !== name));
  }

  function addAdminGroup() {
    const trimmed = newAdminGroup.trim();
    if (trimmed && !adminGroups.includes(trimmed)) {
      setAdminGroups([...adminGroups, trimmed]);
      setNewAdminGroup("");
    }
  }

  function removeAdminGroup(name: string) {
    setAdminGroups(adminGroups.filter((g) => g !== name));
  }

  function toggleInventory(name: string) {
    if (enabledInventory.includes(name)) {
      setEnabledInventory(enabledInventory.filter((i) => i !== name));
    } else {
      setEnabledInventory([...enabledInventory, name]);
    }
  }

  return (
    <div className="space-y-6">
      <h2 className="text-xl font-semibold">Server Configuration</h2>

      <InputField label="Server Name" value={serverName} onChange={setServerName} />
      <InputField label="License Key" value={licenseKey} onChange={setLicenseKey} placeholder="Enter your license key" />
      <InputField label="Discord Invite URL" value={discordInvite} onChange={setDiscordInvite} />
      <SelectField label="Language" value={language} onChange={setLanguage} options={["English", "Dutch", "Spanish"]} />
      <InputField label="Server Logo URL" value={serverLogoUrl} onChange={setServerLogoUrl} />

      <Toggle label="Require Steam" enabled={requireSteam} onToggle={() => setRequireSteam(!requireSteam)} />
      <Toggle label="Log IP Information" enabled={logIpInfo} onToggle={() => setLogIpInfo(!logIpInfo)} />

      <InputField label="Minimum Online Seconds Before Ban" value={minOnlineSeconds} onChange={(v: any) => setMinOnlineSeconds(Number(v))} type="number" />

      <GroupInput title="Exempt Groups" groups={exemptGroups} newGroup={newExemptGroup} setNewGroup={setNewExemptGroup} onAdd={addExemptGroup} onRemove={removeExemptGroup} />
      <GroupInput title="Admin Groups" groups={adminGroups} newGroup={newAdminGroup} setNewGroup={setNewAdminGroup} onAdd={addAdminGroup} onRemove={removeAdminGroup} />

      <div>
        <h3 className="text-lg font-semibold mb-2">Inventory Configuration</h3>
        <div className="flex gap-4 flex-wrap">
          {inventorySystems.map((inv) => (
            <label key={inv} className="flex items-center gap-2">
              <input type="checkbox" checked={enabledInventory.includes(inv)} onChange={() => toggleInventory(inv)} />
              <span>{inv}</span>
            </label>
          ))}
        </div>
      </div>
    </div>
  );
}

function InputField({ label, value, onChange, type = "text", placeholder = "" }: any) {
  return (
    <div>
      <label className="block text-sm font-semibold mb-1">{label}</label>
      <input
        type={type}
        value={value}
        placeholder={placeholder}
        onChange={(e) => onChange(e.target.value)}
        className="w-full p-2 rounded bg-[#1D2129] border border-gray-600 text-white"
      />
    </div>
  );
}

function SelectField({ label, value, onChange, options }: any) {
  return (
    <div>
      <label className="block text-sm font-semibold mb-1">{label}</label>
      <select
        value={value}
        onChange={(e) => onChange(e.target.value)}
        className="w-full p-2 rounded bg-[#1D2129] border border-gray-600 text-white"
      >
        {options.map((opt: string) => (
          <option key={opt} value={opt}>{opt}</option>
        ))}
      </select>
    </div>
  );
}

function Toggle({ label, enabled, onToggle }: any) {
  return (
    <div className="flex items-center justify-between">
      <span className="text-sm font-semibold">{label}</span>
      <button onClick={onToggle} className={`relative w-12 h-7 rounded-full ${enabled ? "bg-blue-600" : "bg-gray-700"}`}>
        <span className={`absolute left-1 top-1 w-5 h-5 rounded-full bg-white transform ${enabled ? "translate-x-5" : ""}`} />
      </button>
    </div>
  );
}

function GroupInput({ title, groups, newGroup, setNewGroup, onAdd, onRemove }: any) {
  return (
    <div>
      <h3 className="text-lg font-semibold mb-2">{title}</h3>
      <div className="flex flex-wrap gap-2 mb-2">
        {groups.map((group: string) => (
          <span key={group} className="bg-blue-700 px-3 py-1 rounded flex items-center gap-2">
            {group}
            <button onClick={() => onRemove(group)}><XMarkIcon className="w-4 h-4" /></button>
          </span>
        ))}
      </div>
      <div className="flex gap-2">
        <input
          type="text"
          value={newGroup}
          onChange={(e) => setNewGroup(e.target.value)}
          className="flex-grow p-2 rounded bg-[#1D2129] border border-gray-600 text-white"
        />
        <button onClick={onAdd} disabled={!newGroup.trim()} className="bg-blue-600 px-4 rounded hover:bg-blue-700">
          <PlusIcon className="w-5 h-5" />
        </button>
      </div>
    </div>
  );
}