"use client";

import { useState, useRef } from "react";
import ServerConfigForm from "./ServerConfigForm";
import { InformationCircleIcon, ClipboardDocumentIcon, ArrowPathIcon, PlusIcon, XMarkIcon } from "@heroicons/react/24/outline";

const tabs = [
  { name: "General" },
  { name: "Player" },
  { name: "Weapons" },
  { name: "Vehicle" },
  { name: "Object/Particles" },
  { name: "Explosion" },
  { name: "Resources" },
  { name: "Movement" },
  { name: "Client" },
  { name: "Props" },
  { name: "Other" },
];

const protectionDescriptions: Record<string, string> = {
  antiNoclip: "Prevents players from moving through walls or objects.",
  antiSemiGodmode: "Detects partial invincibility cheats.",
  antiInvisible: "Prevents player invisibility hacks.",
  antiTeleportToWaypoint: "Stops teleporting directly to map waypoints.",
  antiFastRun: "Detects abnormal running speeds.",
  antiSuperJump2: "Blocks enhanced jumping cheats.",
  antiTinyPed: "Prevents shrinking player models.",
  antiGodmode: "Detects full invincibility.",
  armourDetection: "Detects unauthorized armor usage.",
  antiTeleport: "Blocks teleporting cheats.",
  antiSpeedhack: "Detects speed hacking.",
  antiSuperJump: "Stops super jump cheats.",
  antiNightThermalVision: "Prevents use of night or thermal vision hacks.",
  antiNoHeadshot: "Detects cheats that prevent headshots.",
};

const protectionsByTab: Record<string, { label: string; key: string }[]> = {
  General: [],
  Player: [
    { label: "Anti Noclip", key: "antiNoclip" },
    { label: "Anti Semi Godmode", key: "antiSemiGodmode" },
    { label: "Anti Invisible", key: "antiInvisible" },
    { label: "Anti Teleport To Waypoint", key: "antiTeleportToWaypoint" },
    { label: "Anti Fast Run", key: "antiFastRun" },
    { label: "Anti SuperJump2", key: "antiSuperJump2" },
    { label: "Anti Tiny Ped", key: "antiTinyPed" },
    { label: "Anti Godmode", key: "antiGodmode" },
    { label: "Armour Detection", key: "armourDetection" },
    { label: "Anti Teleport", key: "antiTeleport" },
    { label: "Anti Speedhack", key: "antiSpeedhack" },
    { label: "Anti SuperJump", key: "antiSuperJump" },
    { label: "Anti Night/ThermalVision", key: "antiNightThermalVision" },
    { label: "Anti No Headshot", key: "antiNoHeadshot" },
  ],
  Weapons: [],
  Vehicle: [],
  "Object/Particles": [],
  Explosion: [],
  Resources: [],
  Movement: [],
  Client: [],
  Props: [],
  Other: [],
};

const actionOptions = ["Ban", "Kick", "Warn"];



export default function PlayerProtections() {
  const allProtections = Object.values(protectionsByTab).flat();

  const [settings, setSettings] = useState<Record<
    string,
    { enabled: boolean; action: string }
  >>(() =>
    allProtections.reduce((acc, p) => {
      acc[p.key] = { enabled: false, action: "Ban" };
      return acc;
    }, {} as Record<string, { enabled: boolean; action: string }>)
  );

  const [copied, setCopied] = useState(false);
  const [activeTab, setActiveTab] = useState("Player");
  const textareaRef = useRef<HTMLTextAreaElement>(null);

  function toggleProtection(key: string) {
    setSettings((prev) => {
      const current = prev[key];
      if (!current) {
        return {
          ...prev,
          [key]: { enabled: true, action: "Ban" },
        };
      }
      return {
        ...prev,
        [key]: { ...current, enabled: !current.enabled },
      };
    });
  }

  function setAction(key: string, action: string) {
    if (!actionOptions.includes(action)) return;
    setSettings((prev) => {
      const current = prev[key];
      if (!current) {
        return {
          ...prev,
          [key]: { enabled: false, action },
        };
      }
      return {
        ...prev,
        [key]: { ...current, action },
      };
    });
  }

  const protectionsForActiveTab = protectionsByTab[activeTab] ?? [];

  
  const configText = (() => {
    // Start with server config text at top (General)
    let text = "\n\n";


    for (const tab of tabs) {
      const tabName = tab.name;
      const protections = protectionsByTab[tabName];
      if (!protections || protections.length === 0) continue;

      text += `[${tabName}]\n`;

      protections.forEach(({ key }) => {
        const setting = settings[key];
        const val = setting
          ? setting.enabled
            ? setting.action.toLowerCase()
            : "off"
          : "off";
        text += `${key} = ${val}\n`;
      });

      text += "\n";
    }

    return text.trim();
  })();

  async function copyConfig() {
    try {
      await navigator.clipboard.writeText(configText);
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    } catch {
      alert("Failed to copy to clipboard");
    }
  }

  function exportConfig() {
    const blob = new Blob([configText], { type: "text/plain" });
    const url = URL.createObjectURL(blob);
    const link = document.createElement("a");
    link.href = url;
    link.download = "cyberanticheat-config.txt";
    link.click();
    URL.revokeObjectURL(url);
  }

  return (
    <div className="min-h-screen bg-[#0F1115] text-white font-sans">
      {/* Header */}
      <div className="flex items-center justify-between p-4 border-b border-gray-700 bg-[#12161C]">
        <h1 className="text-lg font-semibold flex items-center gap-2">
          <svg
            className="w-6 h-6 text-blue-500"
            fill="none"
            stroke="currentColor"
            strokeWidth={2}
            viewBox="0 0 24 24"
          >
            <path d="M3 7v4a2 2 0 002 2h14a2 2 0 002-2V7"></path>
            <path d="M3 7l9 6 9-6"></path>
          </svg>
          CyberAnticheat Config Generator
        </h1>
        <div className="flex gap-2">
          <button
            onClick={() =>
              setSettings(
                allProtections.reduce((acc, p) => {
                  acc[p.key] = { enabled: false, action: "Ban" };
                  return acc;
                }, {} as Record<string, { enabled: boolean; action: string }>)
              )
            }
            className="px-3 py-1 border border-gray-600 rounded text-gray-300 hover:bg-gray-700"
          >
            <ArrowPathIcon className="w-5 h-5 inline-block mr-1" />
            Restore Old Config
          </button>

          <button
            onClick={copyConfig}
            className="px-3 py-1 border border-gray-600 rounded text-gray-300 hover:bg-gray-700"
            title="Copy config text"
          >
            <ClipboardDocumentIcon className="w-5 h-5 inline-block mr-1" />
            {copied ? "Copied!" : "Copy Config"}
          </button>

          <button
            onClick={exportConfig}
            className="px-3 py-1 rounded bg-blue-600 hover:bg-blue-700 transition"
            title="Export config TXT file"
          >
            Export Config
          </button>
        </div>
      </div>

      {/* Tabs */}
      <nav className="flex gap-4 border-b border-gray-700 bg-[#12161C] px-4 text-sm">
        {tabs.map((tab) => (
          <button
            key={tab.name}
            onClick={() => setActiveTab(tab.name)}
            className={`py-3 ${
              activeTab === tab.name
                ? "border-b-2 border-blue-500 text-blue-500 font-semibold"
                : "text-gray-400 hover:text-blue-400"
            }`}
          >
            {tab.name}
          </button>
        ))}
      </nav>

      {/* Protections for active tab */}
      <div className="max-w-7xl mx-auto p-6">
        <section className="bg-[#12161C] rounded-lg p-6 shadow-lg">
          <h2 className="text-xl font-semibold mb-4 flex items-center gap-2">
            {activeTab} Protections{" "}
            <InformationCircleIcon className="w-5 h-5 text-gray-400" />
          </h2>

          {activeTab === "General" ? (
  <><section className="bg-[#12161C] rounded-lg p-6 shadow-lg">
                          <h2 className="text-xl font-semibold mb-4 flex items-center gap-2">
                              General Server Settings
                          </h2>
                          <ServerConfigForm />
                      </section><textarea
                              readOnly
                              className="w-full h-72 bg-[#0F1115] text-white p-4 rounded resize-none font-mono text-sm border border-gray-700"
                              aria-label="Server Configuration Text" /></>
          ) : protectionsForActiveTab.length === 0 ? (
            <p className="text-gray-500 italic">No protections available.</p>
          ) : (
            <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
              {protectionsForActiveTab.map(({ label, key }) => {
                const setting = settings[key] ?? {
                  enabled: false,
                  action: "Ban",
                };

                return (
                  <div
                    key={key}
                    className="bg-[#0F1115] border border-gray-700 rounded-lg p-5 flex flex-col justify-between shadow-md"
                    style={{ minHeight: "110px" }}
                  >
                    <div className="flex items-center justify-between mb-3">
                      <label
                        htmlFor={`toggle-${key}`}
                        className="cursor-pointer select-none text-lg font-semibold"
                      >
                        {label}
                      </label>

                      <div className="relative group">
                        <InformationCircleIcon className="w-5 h-5 text-gray-500 cursor-default" />
                        <div className="absolute bottom-full mb-1 hidden w-52 rounded bg-gray-800 px-3 py-2 text-xs text-white text-center group-hover:block z-10">
                          {protectionDescriptions[key] ??
                            "No description available."}
                        </div>
                      </div>
                    </div>

                    <div className="flex items-center justify-between">
                      {/* Toggle */}
                      <button
                        id={`toggle-${key}`}
                        onClick={() => toggleProtection(key)}
                        className={`relative inline-flex items-center h-7 rounded-full w-12 transition-colors focus:outline-none ${
                          setting.enabled ? "bg-blue-600" : "bg-gray-700"
                        }`}
                        aria-pressed={setting.enabled}
                        aria-label={`Toggle ${label}`}
                      >
                        <span
                          className={`inline-block w-6 h-6 transform bg-white rounded-full transition-transform ${
                            setting.enabled ? "translate-x-6" : "translate-x-1"
                          }`}
                        />
                      </button>

                      {/* Action dropdown */}
                      <select
                        disabled={!setting.enabled}
                        value={setting.action}
                        onChange={(e) => setAction(key, e.target.value)}
                        className="ml-4 bg-[#1D2129] border border-gray-600 text-white text-sm rounded px-3 py-1 focus:outline-none disabled:opacity-50"
                        aria-label={`Select action for ${label}`}
                      >
                        {actionOptions.map((action) => (
                          <option key={action} value={action}>
                            {action}
                          </option>
                        ))}
                      </select>
                    </div>
                  </div>
                );
              })}
            </div>
          )}
        </section>

        {/* Generated Config Output */}
        <section className="mt-10 bg-[#12161C] rounded-lg p-6 shadow-lg">
          <h2 className="text-xl font-semibold mb-2 flex items-center gap-2">
            Generated Config{" "}
            <InformationCircleIcon className="w-5 h-5 text-gray-400" />
          </h2>
          <p className="text-gray-500 mb-4 text-sm">
            Copy or export your generated configuration below.
          </p>
          <textarea
            ref={textareaRef}
            readOnly
            value={configText}
            className="w-full h-64 bg-[#0F1115] text-white p-4 rounded resize-none font-mono text-sm border border-gray-700"
            aria-label="Generated configuration output"
          />
        </section>
      </div>
    </div>
  );
}