const {
  ActionRowBuilder,
  StringSelectMenuBuilder,
  ButtonBuilder,
  ButtonStyle,
  AttachmentBuilder
} = require("discord.js");
const { createCanvas } = require("canvas");

module.exports = {
  name: "help",
  category: "Information",
  aliases: ["h"],
  description: "Show all commands or details for a specific one.",
  cooldown: 3,
  botParams: ["EmbedLinks", "SendMessages", "AttachFiles"],
  execute: async (message, args, client, prefix) => {

    const commandCategories = [
      { label: "Antinuke", value: "antinuke", description: "Get all Antinuke commands", emoji: `${client.emoji.antinuke}` },
      { label: "Automod", value: "automod", description: "Get all Automod commands", emoji: `${client.emoji.automod}` },
      { label: "Config", value: "config", description: "Get all Config commands", emoji: `${client.emoji.config}` },
      { label: "Extra", value: "extra", description: "Get all Extra commands", emoji: `${client.emoji.extra}` },
      { label: "Game", value: "game", description: "Get all Fun commands", emoji: `${client.emoji.fun}` },
      { label: "Information", value: "information", description: "Get all Information commands", emoji: `${client.emoji.information}` },
      { label: "Moderation", value: "moderation", description: "Get all Moderation commands", emoji: `${client.emoji.moderation}` },
      { label: "Music", value: "music", description: "Get all Music commands", emoji: `${client.emoji.music}` },
      { label: "Image", value: "images", description: "Get all Pfps commands", emoji: `${client.emoji.pfp}` },
      { label: "Utility", value: "utility", description: "Get all Utility commands", emoji: `${client.emoji.utility}` },
      { label: "Voice", value: "voice", description: "Get all Voice commands", emoji: `${client.emoji.voice}` },
      { label: "Welcome", value: "welcome", description: "Get all Welcome commands", emoji: `${client.emoji.welc}` },
    ];

    const cmdsPerPage = 10;
    let currentCategoryIndex = -1;
    let currentPage = 0;

    function drawRoundedRect(ctx, x, y, width, height, radius, color) {
      ctx.fillStyle = color;
      ctx.beginPath();
      ctx.moveTo(x + radius, y);
      ctx.lineTo(x + width - radius, y);
      ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
      ctx.lineTo(x + width, y + height - radius);
      ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
      ctx.lineTo(x + radius, y + height);
      ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
      ctx.lineTo(x, y + radius);
      ctx.quadraticCurveTo(x, y, x + radius, y);
      ctx.closePath();
      ctx.fill();
    }

    function generateHomeImage() {
      const canvas = createCanvas(800, 600);
      const ctx = canvas.getContext("2d");
      const gradient = ctx.createLinearGradient(0, 0, 800, 600);
      gradient.addColorStop(0, "#232526");
      gradient.addColorStop(1, "#414345");
      ctx.fillStyle = gradient;
      ctx.fillRect(0, 0, 800, 600);

      ctx.font = "bold 36px Arial";
      ctx.fillStyle = "#ffffff";
      ctx.textAlign = "center";
      ctx.fillText("Kawaii Help Menu", 400, 80);

      const cmdCount = client.commands.size + client.slashCommands.size;
      ctx.font = "20px Arial";
      ctx.fillStyle = "#cdd6f4";
      ctx.fillText(`Prefix: ${prefix} | Total Commands: ${cmdCount}`, 400, 120);

      const cols = 3;
      const cardWidth = 200;
      const cardHeight = 45;
      const spacingX = 40;
      const spacingY = 20;
      const startX = 70;
      let x = startX;
      let y = 180;

      commandCategories.forEach((cat, index) => {
        const row = Math.floor(index / cols);
        const col = index % cols;
        const posX = x + col * (cardWidth + spacingX);
        const posY = y + row * (cardHeight + spacingY);

        drawRoundedRect(ctx, posX, posY, cardWidth, cardHeight, 10, "rgba(255, 255, 255, 0.1)");
        ctx.fillStyle = "#ffffff";
        ctx.font = "16px Arial";
        ctx.textAlign = "center";
        const count = client.commands.filter(c => c.category?.toLowerCase() === cat.value).size;
        ctx.fillText(`${cat.label} (${count})`, posX + cardWidth / 2, posY + 28);
      });

      ctx.font = "14px Arial";
      ctx.fillStyle = "#cdd6f4";
      ctx.textAlign = "center";
      ctx.fillText("Powered by Beast Development", 400, 580);

      return canvas.toBuffer();
    }

    function generatePaginatedCategoryImage(label, commands, page) {
      const canvas = createCanvas(800, 600);
      const ctx = canvas.getContext("2d");

      const gradient = ctx.createLinearGradient(0, 0, 800, 600);
      gradient.addColorStop(0, "#232526");
      gradient.addColorStop(1, "#414345");
      ctx.fillStyle = gradient;
      ctx.fillRect(0, 0, 800, 600);

      ctx.font = "bold 32px Arial";
      ctx.fillStyle = "#ffffff";
      ctx.textAlign = "center";
      ctx.fillText(`${label} Commands`, 400, 70);

      const cmds = commands.slice(page * cmdsPerPage, (page + 1) * cmdsPerPage);

      const cols = 2;
      const cmdPerCol = Math.ceil(cmds.length / cols);
      const cardWidth = 300;
      const cardHeight = 35;
      const startX = 100;

      for (let col = 0; col < cols; col++) {
        const colX = startX + col * 330;
        let y = 120;

        for (let i = col * cmdPerCol; i < (col + 1) * cmdPerCol && i < cmds.length; i++) {
          drawRoundedRect(ctx, colX, y, cardWidth, cardHeight, 8, "rgba(255, 255, 255, 0.1)");
          ctx.fillStyle = "#ffffff";
          ctx.font = "14px Arial";
          ctx.textAlign = "left";
          ctx.fillText(`${prefix}${cmds[i]}`, colX + 15, y + 23);
          y += 45;
        }
      }

      const totalPages = Math.ceil(commands.length / cmdsPerPage);
      ctx.font = "14px Arial";
      ctx.fillStyle = "#cdd6f4";
      ctx.textAlign = "center";
      ctx.fillText(`Page ${page + 1} of ${totalPages} | Total ${commands.length} command(s)`, 400, 560);

      return canvas.toBuffer();
    }

    const dropdown = new ActionRowBuilder().addComponents(
      new StringSelectMenuBuilder()
        .setCustomId("help_select")
        .setPlaceholder("Choose a command category")
        .addOptions(
          commandCategories.map(cat => ({
            label: cat.label,
            value: cat.value,
            description: cat.description,
            emoji: cat.emoji,
          }))
        )
    );

    const buttons = new ActionRowBuilder().addComponents(
      new ButtonBuilder().setCustomId("previous").setLabel("Previous").setStyle(ButtonStyle.Secondary).setEmoji("⬅️"),
      new ButtonBuilder().setCustomId("home").setLabel("Home").setStyle(ButtonStyle.Primary).setEmoji("🏠"),
      new ButtonBuilder().setCustomId("next").setLabel("Next").setStyle(ButtonStyle.Secondary).setEmoji("➡️")
    );

    const homeAttachment = new AttachmentBuilder(generateHomeImage(), { name: "home.png" });

    const msg = await message.channel.send({ files: [homeAttachment], components: [dropdown] });

    const collector = msg.createMessageComponentCollector({ filter: i => i.user.id === message.author.id, time: 60000 });

    collector.on("collect", async (interaction) => {
      if (interaction.isStringSelectMenu()) {
        const selected = interaction.values[0];
        currentCategoryIndex = commandCategories.findIndex(c => c.value === selected);
        currentPage = 0;
        const allCmds = client.commands.filter(c => c.category?.toLowerCase() === selected).map(c => c.name);
        const image = generatePaginatedCategoryImage(commandCategories[currentCategoryIndex].label, allCmds, currentPage);
        await interaction.update({ files: [new AttachmentBuilder(image, { name: "category.png" })], components: [dropdown, buttons] });
      } else if (interaction.isButton()) {
        if (interaction.customId === "home") {
          currentCategoryIndex = -1;
          currentPage = 0;
          const homeBuffer = generateHomeImage();
          await interaction.update({ files: [new AttachmentBuilder(homeBuffer, { name: "home.png" })], components: [dropdown] });
        } else if (currentCategoryIndex !== -1) {
          const category = commandCategories[currentCategoryIndex];
          const allCmds = client.commands.filter(c => c.category?.toLowerCase() === category.value).map(c => c.name);
          const totalPages = Math.ceil(allCmds.length / cmdsPerPage);

          if (interaction.customId === "previous" && currentPage > 0) currentPage--;
          else if (interaction.customId === "next" && currentPage < totalPages - 1) currentPage++;

          const image = generatePaginatedCategoryImage(category.label, allCmds, currentPage);
          await interaction.update({ files: [new AttachmentBuilder(image, { name: "category.png" })], components: [dropdown, buttons] });
        }
      }
    });

    collector.on("end", () => {
      msg.edit({ components: [] }).catch(() => {});
    });
  },
};