'use client';

import { cn } from "@/lib/utils";

interface ICommand {
    name: string
    description: string
    syntax: string
    permissions: string[]
    version: string | undefined
    examples: string[]
    subcommands: ICommand[]
}

const COMMAND_PREFIX = '!'
const commands: ICommand[] = [
    {
        name: "nightbot",
        description: "Interacts with Nightbot.",
        syntax: "",
        permissions: ["tts.commands.nightbot"],
        version: "4.2",
        examples: [],
        subcommands: [
            {
                name: "play",
                description: "Play the songs on the queue.",
                syntax: "",
                permissions: [],
                version: undefined,
                examples: [],
                subcommands: [],
            },
            {
                name: "pause",
                description: "Pause the currently playing song.",
                syntax: "",
                permissions: [],
                version: undefined,
                examples: [],
                subcommands: [],
            },
            {
                name: "skip",
                description: "Skip the currently playing song.",
                syntax: "",
                permissions: [],
                version: undefined,
                examples: [],
                subcommands: [],
            },
            {
                name: "volume",
                description: "Skip the currently playing song.",
                syntax: "<volume 0-100>",
                permissions: [],
                version: undefined,
                examples: [],
                subcommands: [],
            },
            {
                name: "clear_queue",
                description: "Clears the queue.",
                syntax: "",
                permissions: [],
                version: undefined,
                examples: [],
                subcommands: [],
            },
            {
                name: "clear_playlist",
                description: "Clears the playlist.",
                syntax: "",
                permissions: [],
                version: undefined,
                examples: [],
                subcommands: [],
            },
        ]
    },
    {
        name: "obs",
        description: "Interacts with OBS.",
        syntax: "<scene name> <source name>",
        permissions: [],
        version: "3.6",
        examples: [],
        subcommands: [
            {
                name: "rotate",
                description: "Apply a rotational transformation",
                syntax: "<rotation in degree>",
                permissions: [],
                version: undefined,
                examples: [],
                subcommands: [],
            },
            {
                name: "x",
                description: "Move element to a new X position",
                syntax: "<x position in pixels>",
                permissions: [],
                version: undefined,
                examples: [],
                subcommands: [],
            },
            {
                name: "y",
                description: "Move element to a new Y position",
                syntax: "<y position in pixels>",
                permissions: [],
                version: undefined,
                examples: [],
                subcommands: [],
            },
        ]
    },
    {
        name: "refresh",
        description: "Refreshes certain data being stored on the client.",
        syntax: "",
        permissions: [],
        version: "3.2",
        examples: [],
        subcommands: [
            {
                name: "tts_voice_enabled",
                description: "Refreshes the list of enabled TTS voices used by chat",
                syntax: "",
                permissions: [],
                version: undefined,
                examples: [],
                subcommands: [],
            },
            {
                name: "word_filters",
                description: "Refreshes the list of words filters",
                syntax: "",
                permissions: [],
                version: undefined,
                examples: [],
                subcommands: [],
            },
            {
                name: "default_voice",
                description: "Refreshes the default voice",
                syntax: "",
                permissions: [],
                version: undefined,
                examples: [],
                subcommands: [],
            },
            {
                name: "redemptions",
                description: "Refreshes the redemmptions",
                syntax: "",
                permissions: [],
                version: "3.4",
                examples: [],
                subcommands: [],
            },
            {
                name: "obs_cache",
                description: "Refreshes the cache for OBS",
                syntax: "",
                permissions: [],
                version: "3.7",
                examples: [],
                subcommands: [],
            },
            {
                name: "permissions",
                description: "Refreshes the group permissions",
                syntax: "",
                permissions: [],
                version: "3.7",
                examples: [],
                subcommands: [],
            }
        ]
    },
    {
        name: "skip",
        description: "Skips the currently playing message.",
        syntax: "",
        permissions: [],
        version: undefined,
        examples: [],
        subcommands: [
            {
                name: "all",
                description: "Clears everything in queue and skips the currently playing message. This effectively runs !skipall command.",
                syntax: "",
                permissions: ["tts.commands.skipall"],
                version: "3.9",
                examples: [],
                subcommands: []
            },
        ]
    },
    {
        name: "skipall",
        description: "Clears everything in queue and skips the currently playing message.",
        syntax: "",
        permissions: [],
        version: undefined,
        examples: [],
        subcommands: []
    },
    {
        name: "tts",
        description: "Clears everything in queue and skips the currently playing message.",
        syntax: "",
        permissions: [],
        version: "3.2",
        examples: [],
        subcommands: [
            {
                name: "enable",
                description: "Enables a TTS voice.",
                syntax: "<tts voice name>",
                permissions: [],
                version: undefined,
                examples: [],
                subcommands: [],
            },
            {
                name: "disable",
                description: "Disables a TTS voice",
                syntax: "<tts voice name>",
                permissions: [],
                version: undefined,
                examples: [],
                subcommands: [],
            },
            {
                name: "add",
                description: "Adds a TTS voice to the list of available voices, case sensitive.",
                syntax: "<name of tts voice>",
                permissions: ["tom"],
                version: "3.9",
                examples: ["Brian"],
                subcommands: []
            },
            {
                name: "remove",
                description: "Removes a TTS voice from the list of available voices.",
                syntax: "<name of tts voice>",
                permissions: ["tom"],
                version: "3.9",
                examples: [],
                subcommands: []
            },
            {
                name: "join",
                description: "Voices the messages of another channel",
                syntax: "<mention of other broadcaster>",
                permissions: ["tts.commands.tts.join"],
                version: "4.0",
                examples: [],
                subcommands: [],
            },
            {
                name: "leave",
                description: "Stop reading the messages of another channel",
                syntax: "<mention of other broadcaster>",
                permissions: ["tts.commands.tts.leave"],
                version: "4.0",
                examples: [],
                subcommands: [],
            }
        ]
    },
    {
        name: "version",
        description: "Sends a message to the console with version info.",
        syntax: "",
        permissions: [],
        version: undefined,
        examples: [],
        subcommands: []
    },
    {
        name: "voice",
        description: "Change voice when reading messages for yourself.",
        syntax: "<voice name>",
        permissions: [],
        version: undefined,
        examples: ["brian"],
        subcommands: [
            {
                name: "<mention of affected chatter>",
                description: "Change chatter's voice when reading messages.",
                syntax: "",
                permissions: ["tts.commands.voice.admin"],
                version: "4.0",
                examples: ["brian @Nightbot"],
                subcommands: []
            }
        ]
    }
]

const CommandsPage = () => {
    return (
        <div className="m-10">
            <div className="text-center text-2xl">Commands</div>
            <ul className="grid gap-3 p-6 w-full lg:grid-cols-[1fr_1fr]">
                {commands.map((command) =>
                    <li key={command.name}
                        className="row-span-2">
                        <section
                            className="bg-background mt-5 p-2 rounded-lg align-top text-start flex h-full w-full select-none flex-col justify-start bg-gradient-to-b from-blue-400 to-blue-500 no-underline outline-none focus:shadow-md">
                            <div className="align-top items-center">
                                <p className="inline-block text-lg">{COMMAND_PREFIX}{command.name}</p>
                                {command.permissions.map(p =>
                                    <div key={p}
                                        className={"inline-block rounded-lg text-sm ml-0.5 mr-0.5 p-0.5 " + cn(
                                            p == "tom" && "bg-white text-black",
                                            p != "tom" && "bg-gray-400"
                                        )}>
                                        {p}
                                    </div>
                                )}
                                {!!command.version &&
                                    <div
                                        className="inline-block rounded-lg text-sm ml-0.5 mr-0.5 p-0.5 bg-red-600">
                                        version required: {command.version}
                                    </div>
                                }
                                <div className="inline-block text-sm ml-0 md:ml-1 text-wrap">{command.description}</div>
                            </div>
                            {command.subcommands.length == 0 &&
                                <div>Syntax: {COMMAND_PREFIX}{command.name} {command.syntax}</div>
                            }
                            {command.examples.map(ex =>
                                <div key={command.name + " " + ex} className="bg-blend-darken">Example: {COMMAND_PREFIX}{command.name} {ex}</div>
                            )}

                            {command.subcommands.map(c =>
                                <div key={c.name} className="m-1 p-2 rounded-md bg-gradient-to-b from-blue-400 to-blue-500">
                                    <div className="inline">
                                        {COMMAND_PREFIX}{command.name} {command.syntax.length == 0 ? "" : command.syntax + " "}{c.name} {c.syntax}
                                    </div>
                                    {c.permissions.map(p =>
                                    <div key={p}
                                        className={"inline-block rounded-lg text-sm ml-0.5 mr-0.5 p-0.5 " + cn(
                                            p == "tom" && "bg-white text-black",
                                            p != "tom" && "bg-gray-400"
                                        )}>
                                        {p}
                                    </div>
                                )}
                                    {!!c.version &&
                                        <div
                                            className="inline rounded-lg text-sm ml-0.5 mr-0.5 p-0.5 bg-red-600">
                                            version required: {c.version}
                                        </div>
                                    }
                                    <div className="text-sm">{c.description}</div>
                                </div>
                            )}
                        </section>
                    </li>
                )}
            </ul>
        </div>
    );
}

export default CommandsPage;