"use client";

import React, { useState } from "react";
import Link from "next/link";
import {
    Book,
    Bot,
    LayoutDashboard,
    MessageSquare,
    Shield,
    Terminal,
    Zap,
    Menu,
    X,
    ChevronRight,
    Sparkles
} from "lucide-react";
import { cn } from "@/lib/utils";

const sections = [
    {
        id: "getting-started",
        title: "Getting Started",
        icon: <Zap className="w-5 h-5" />,
        items: [
            { id: "introduction", title: "Introduction" },
            { id: "inviting-bot", title: "Inviting the Bot" },
        ],
    },
    {
        id: "commands",
        title: "Commands",
        icon: <Terminal className="w-5 h-5" />,
        items: [
            { id: "leveling-commands", title: "Leveling" },
            { id: "utility-commands", title: "Utility" },
            { id: "fun-commands", title: "Fun & AI" },
        ],
    },
    {
        id: "dashboard",
        title: "Dashboard",
        icon: <LayoutDashboard className="w-5 h-5" />,
        items: [
            { id: "leaderboard", title: "Leaderboard" },
            { id: "leveling-system", title: "Leveling System" },
        ],
    },
];

export default function DocsPage() {
    const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
    const [activeSection, setActiveSection] = useState("introduction");

    React.useEffect(() => {
        const observer = new IntersectionObserver(
            (entries) => {
                entries.forEach((entry) => {
                    if (entry.isIntersecting) {
                        setActiveSection(entry.target.id);
                    }
                });
            },
            {
                rootMargin: "-100px 0px -80% 0px",
            }
        );

        const ids = sections.flatMap((section) => section.items.map((item) => item.id));
        ids.forEach((id) => {
            const element = document.getElementById(id);
            if (element) {
                observer.observe(element);
            }
        });

        return () => observer.disconnect();
    }, []);

    const scrollToSection = (id: string) => {
        const element = document.getElementById(id);
        if (element) {
            element.scrollIntoView({ behavior: "smooth" });
            setActiveSection(id);
            setMobileMenuOpen(false);
        }
    };

    return (
        <div className="min-h-screen bg-black text-white selection:bg-blue-500/30">
            {/* Mobile Header */}
            <div className="lg:hidden sticky top-0 z-50 border-b border-white/10 bg-black/80 backdrop-blur-md px-4 py-3 flex items-center justify-between">
                <div className="flex items-center gap-2 font-bold text-xl">
                    <img src="/void_sentinel.png" alt="Void Sentinel Logo" className="w-6 h-6 rounded-full" />
                    <span>Void Sentinel</span>
                </div>
                <button
                    onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
                    className="p-2 hover:bg-white/5 rounded-lg transition-colors"
                >
                    {mobileMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
                </button>
            </div>

            <div className="container mx-auto px-4 flex flex-col lg:flex-row gap-8 py-8">
                {/* Sidebar Navigation */}
                <aside className={cn(
                    "lg:w-64 flex-shrink-0 fixed lg:sticky top-[4rem] lg:top-8 h-[calc(100vh-6rem)] lg:h-[calc(100vh-4rem)] overflow-y-auto z-40 bg-black lg:bg-transparent transition-transform duration-300 left-0 w-full lg:translate-x-0 border-r lg:border-r-0 border-white/10 lg:block p-4 lg:p-0",
                    mobileMenuOpen ? "translate-x-0" : "-translate-x-full"
                )}>
                    <div className="space-y-6">
                        <div className="hidden lg:flex items-center gap-2 font-bold text-2xl mb-8 px-2">
                            <Link href="/" className="flex items-center gap-2 hover:opacity-80 transition-opacity">
                                <img src="/void_sentinel.png" alt="Void Sentinel Logo" className="w-8 h-8 rounded-full" />
                                <span>Void Sentinel</span>
                            </Link>
                        </div>

                        {sections.map((section) => (
                            <div key={section.id} className="space-y-2">
                                <div className="flex items-center gap-2 px-2 text-sm font-semibold text-gray-400 uppercase tracking-wider">
                                    {section.icon}
                                    {section.title}
                                </div>
                                <div className="space-y-1">
                                    {section.items.map((item) => (
                                        <button
                                            key={item.id}
                                            onClick={() => scrollToSection(item.id)}
                                            className={cn(
                                                "w-full text-left px-3 py-2 rounded-lg text-sm transition-all duration-200 border border-transparent",
                                                activeSection === item.id
                                                    ? "bg-blue-500/10 text-blue-400 border-blue-500/20 shadow-[0_0_15px_rgba(59,130,246,0.1)]"
                                                    : "text-gray-400 hover:text-white hover:bg-white/5"
                                            )}
                                        >
                                            {item.title}
                                        </button>
                                    ))}
                                </div>
                            </div>
                        ))}

                        <div className="pt-6 mt-6 border-t border-white/10">
                            <Link
                                href="/"
                                className="flex items-center gap-2 px-3 py-2 text-sm text-gray-400 hover:text-white transition-colors"
                            >
                                <ChevronRight className="w-4 h-4" />
                                Back to Home
                            </Link>
                        </div>
                    </div>
                </aside>

                {/* Main Content */}
                <main className="flex-1 min-w-0 lg:pl-8">
                    <div className="max-w-3xl mx-auto space-y-16 pb-20">
                        {/* Getting Started */}
                        <section id="introduction" className="space-y-6 scroll-mt-24">
                            <h1 className="text-4xl md:text-5xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-white via-blue-200 to-slate-400">
                                Documentation
                            </h1>
                            <p className="text-xl text-gray-300 leading-relaxed">
                                Welcome to the official documentation for Void Sentinel. A powerful, modern Discord bot designed to elevate your server's engagement through advanced leveling, utility tools, and AI-powered interactions.
                            </p>
                        </section>

                        <section id="inviting-bot" className="space-y-4 scroll-mt-24 border-t border-white/10 pt-10">
                            <h2 className="text-3xl font-bold flex items-center gap-3">
                                Inviting the Bot
                            </h2>
                            <p className="text-gray-300 leading-relaxed">
                                Currently, Void Sentinel is in <span className="text-yellow-400 font-semibold">Beta</span>. Access is restricted to approved servers.
                            </p>
                            <div className="bg-yellow-500/10 border border-yellow-500/20 rounded-xl p-4 flex gap-3">
                                <div className="flex-shrink-0 mt-1">
                                    <Shield className="w-5 h-5 text-yellow-500" />
                                </div>
                                <div>
                                    <h4 className="font-semibold text-yellow-400">Restricted Access</h4>
                                    <p className="text-sm text-yellow-200/80 mt-1">
                                        To invite Void Sentinel to your server, you must request access by sending a DM to <span className="font-mono bg-black/30 px-1 rounded">_void_x_</span> on Discord. Once approved, you can use the invite link provided in the dashboard.
                                    </p>
                                </div>
                            </div>
                        </section>

                        {/* Commands */}
                        <section id="leveling-commands" className="space-y-4 scroll-mt-24 border-t border-white/10 pt-10">
                            <h2 className="text-3xl font-bold flex items-center gap-3">
                                Leveling Commands
                            </h2>
                            <div className="space-y-6">
                                <CommandCard
                                    command="/leaderboard"
                                    description="Displays the top 10 members in the server leaderboard. Generates a custom image with ranks, avatars, and XP progress."
                                />
                                <CommandCard
                                    command="/set_levelup_message_channel"
                                    description="Sets the channel where level-up notifications will be sent."
                                    args={["channel: The target channel (optional, defaults to current)"]}
                                    permission="MANAGE_GUILD"
                                />
                                <CommandCard
                                    command="/set_levelup_message"
                                    description="Sets the custom message template for level-up notifications."
                                    args={["message: Use {user.mention} and {user.level} as placeholders."]}
                                    permission="MANAGE_GUILD"
                                />
                            </div>
                        </section>

                        <section id="utility-commands" className="space-y-4 scroll-mt-24 border-t border-white/10 pt-10">
                            <h2 className="text-3xl font-bold flex items-center gap-3">
                                Utility Commands
                            </h2>
                            <div className="space-y-6">
                                <CommandCard
                                    command="/auto_response"
                                    description="Create an automatic response trigger."
                                    args={[
                                        "msg: The trigger message",
                                        "response: The bot's response",
                                        "mention_reply: Whether to reply with a ping (default: false)"
                                    ]}
                                    permission="MANAGE_MESSAGES"
                                />
                                <CommandCard
                                    command="/view_auto_responses"
                                    description="List all configured auto-responses for the server."
                                    permission="MANAGE_MESSAGES"
                                />
                                <CommandCard
                                    command="/delete_auto_response"
                                    description="Delete an existing auto-response."
                                    args={["msg: The trigger message to delete"]}
                                    permission="MANAGE_MESSAGES"
                                />
                                <CommandCard
                                    command="/edit_auto_response"
                                    description="Edit an existing auto-response."
                                    args={[
                                        "msg: The trigger message",
                                        "new_response: New response text (optional)",
                                        "new_mention_reply: New reply setting (optional)"
                                    ]}
                                    permission="MANAGE_MESSAGES"
                                />

                            </div>
                        </section>

                        <section id="fun-commands" className="space-y-4 scroll-mt-24 border-t border-white/10 pt-10">
                            <h2 className="text-3xl font-bold flex items-center gap-3">
                                Fun & AI Commands
                            </h2>

                            <div className="bg-blue-500/10 border border-blue-500/20 rounded-xl p-4 mb-6">
                                <p className="text-sm text-blue-200">
                                    <strong className="text-blue-400">Note:</strong> AI-powered features are currently experimental and restricted.
                                </p>
                            </div>

                            <div className="space-y-6">
                                <CommandCard
                                    command="/ai_chat"
                                    description="Toggle AI chat mode for the current channel. The bot will respond to messages in this channel."
                                    permission="BOT_OWNER"
                                    tag="Restricted"
                                />
                                <CommandCard
                                    command="/urban"
                                    description="Search for a term on Urban Dictionary."
                                    args={["term: The word to search for"]}
                                />
                                <CommandCard
                                    command="/say"
                                    description="Make the bot say something, optionally impersonating another user via webhook."
                                    args={[
                                        "msg: The message content",
                                        "user: User to impersonate (optional)"
                                    ]}
                                />
                                <CommandCard
                                    command="/summary"
                                    description="Summarizes a referenced message or the replied message using AI."
                                    args={["message: Link to message (or reply to one)"]}
                                    tag="Restricted"
                                />
                            </div>
                        </section>

                        {/* Dashboard Guide */}

                        <section id="leaderboard" className="space-y-6 scroll-mt-24 border-t border-white/10 pt-10">
                            <h2 className="text-3xl font-bold flex items-center gap-3">
                                Leaderboard
                            </h2>
                            <p className="text-gray-300">
                                View your server's leveling leaderboard through the dashboard. This list displays all members ranked by their accumulated XP and current level.
                            </p>
                            <div className="rounded-xl overflow-hidden border border-white/10 bg-black/20">
                                <img
                                    src="/leaderboard_example.png"
                                    alt="Leaderboard Example"
                                    className="w-full h-auto opacity-90 hover:opacity-100 transition-opacity"
                                />
                            </div>
                        </section>

                        <section id="leveling-system" className="space-y-6 scroll-mt-24 border-t border-white/10 pt-10">
                            <h2 className="text-3xl font-bold flex items-center gap-3">
                                Leveling System Setup
                            </h2>
                            <p className="text-gray-300 leading-relaxed">
                                The dashboard allows you to configure multi-track leveling systems. Here's how to set it up:
                            </p>

                            <div className="space-y-6">
                                <div className="bg-white/5 border border-white/10 rounded-xl p-6 space-y-3">
                                    <h3 className="text-xl font-semibold text-white flex items-center gap-2">
                                        <span className="flex items-center justify-center w-6 h-6 rounded-full bg-blue-500/20 text-blue-400 text-xs font-bold border border-blue-500/30">1</span>
                                        Create Leveling Roles
                                    </h3>
                                    <ul className="list-disc list-inside space-y-1 ml-1 text-gray-300">
                                        <li>Create all the level roles you intend to use in your Discord server first.</li>
                                    </ul>
                                </div>

                                <div className="bg-white/5 border border-white/10 rounded-xl p-6 space-y-4">
                                    <h3 className="text-xl font-semibold text-white flex items-center gap-2">
                                        <span className="flex items-center justify-center w-6 h-6 rounded-full bg-blue-500/20 text-blue-400 text-xs font-bold border border-blue-500/30">2</span>
                                        Add to Multi-Track Leveling System
                                    </h3>
                                    <ul className="list-disc list-inside space-y-2 ml-1 text-gray-300">
                                        <li>Go to the dashboard and click on <strong>Leveling</strong> in the sidebar.</li>
                                        <li>In the <strong>Level Tracks</strong> section, click on <strong>Add New Track</strong>.</li>
                                        <li>Give your track a unique name (e.g., "Mage", "Warrior").</li>
                                        <li>Select an <strong>Initial Role</strong>. <span className="text-sm text-gray-400 block ml-6 mt-1 mb-2 border-l-2 border-white/10 pl-3 italic">This role identifies which track a user belongs to.</span></li>
                                        <li>Add your level roles and assign the specific levels they unlock at.</li>
                                        <li>Click <strong>Save Changes</strong> to apply your configuration.</li>
                                    </ul>
                                    <div className="text-sm text-blue-300/80 bg-blue-500/10 border border-blue-500/20 p-3 rounded-lg flex items-center gap-2">
                                        Free servers can have up to 4 tracks. Premium servers support up to 10 tracks.
                                    </div>
                                </div>

                                <div className="bg-white/5 border border-white/10 rounded-xl p-6 space-y-4">
                                    <h3 className="text-xl font-semibold text-white flex items-center gap-2">
                                        <span className="flex items-center justify-center w-6 h-6 rounded-full bg-blue-500/20 text-blue-400 text-xs font-bold border border-blue-500/30">3</span>
                                        Set Level Bridgers
                                    </h3>
                                    <p className="text-gray-300 text-sm">
                                        Level Bridgers help restrict users to their initial track and integrate seamlessly with Discord onboarding or reaction roles.
                                    </p>
                                    <ul className="list-disc list-inside space-y-2 ml-1 text-gray-300">
                                        <li>Select a <strong>Recruit Role</strong> (the role given by onboarding/reaction).</li>
                                        <li>Select the corresponding <strong>Initial Role</strong> defined in your Level Track.</li>
                                        <li>Click on <strong>Add Bridger</strong>.</li>
                                    </ul>
                                </div>
                            </div>

                            <div className="bg-yellow-500/10 border border-yellow-500/20 rounded-xl p-4">
                                <h4 className="flex items-center gap-2 font-semibold text-yellow-400 mb-2">
                                    <Shield className="w-4 h-4" />
                                    Changing Tracks
                                </h4>
                                <p className="text-sm text-yellow-200/80">
                                    If a user wants to switch to a different track, they must rest their progress. Use the command <code className="bg-black/30 px-1.5 py-0.5 rounded font-mono text-yellow-100">/level reset</code>.
                                    This will reset their level and XP to 0 and remove all roles associated with their current level track.
                                </p>
                            </div>
                        </section>

                    </div>
                </main>
            </div>
        </div>
    );
}

function CommandCard({ command, description, args, permission, tag }: { command: string, description: string, args?: string[], permission?: string, tag?: string }) {
    return (
        <div className="group rounded-xl bg-white/5 border border-white/5 overflow-hidden hover:bg-white/[0.07] transition-all duration-300">
            <div className="p-4 border-b border-white/5 flex flex-wrap items-center justify-between gap-2 bg-black/20">
                <div className="flex items-center gap-3">
                    <code className="px-2.5 py-1 rounded-md bg-blue-500/20 text-blue-400 font-mono text-sm font-semibold">
                        {command}
                    </code>
                    {permission && (
                        <span className="px-2 py-0.5 rounded text-[10px] uppercase font-bold tracking-wider bg-red-500/10 text-red-400 border border-red-500/20">
                            {permission}
                        </span>
                    )}
                </div>
                {tag && (
                    <span className="px-2 py-0.5 rounded text-[10px] uppercase font-bold tracking-wider bg-yellow-500/10 text-yellow-400 border border-yellow-500/20">
                        {tag}
                    </span>
                )}
            </div>
            <div className="p-4 space-y-3">
                <p className="text-gray-300 text-sm leading-relaxed">{description}</p>
                {args && args.length > 0 && (
                    <div className="space-y-1">
                        <p className="text-xs font-semibold text-gray-500 uppercase tracking-widest">Parameters</p>
                        <ul className="space-y-1">
                            {args.map((arg, i) => (
                                <li key={i} className="text-xs text-gray-400 font-mono pl-2 border-l-2 border-white/10">
                                    {arg}
                                </li>
                            ))}
                        </ul>
                    </div>
                )}
            </div>
        </div>
    )
}