use leptos::prelude::*;

use crate::components::onboarding::QuickLinks;

#[component]
pub fn MainLayout(children: Children) -> impl IntoView {
    let (show_docs, set_show_docs) = signal(false);
    let (docs_collapsed, set_docs_collapsed) = signal(true);

    view! {
        <div style="display: flex; min-height: 100vh; background: #f5f5f5; position: relative;">
            // Sidebar
            <aside style="width: 250px; background: #1f2937; color: white; padding: 20px; box-shadow: 2px 0 4px rgba(0,0,0,0.1);">
                <div style="margin-bottom: 30px;">
                    <h1 style="font-size: 1.5rem; margin: 0; font-weight: 600;">
                        "Control Center"
                    </h1>
                </div>

                <nav>
                    <ul style="list-style: none; padding: 0; margin: 0;">
                        <li style="margin-bottom: 5px;">
                            <a href="/" style="display: block; padding: 10px 15px; color: white; text-decoration: none; border-radius: 6px; transition: background 0.2s;">
                                "📊 Dashboard"
                            </a>
                        </li>
                        <li style="margin-bottom: 5px;">
                            <a href="/servers" style="display: block; padding: 10px 15px; color: white; text-decoration: none; border-radius: 6px; transition: background 0.2s;">
                                "🖥️ Servers"
                            </a>
                        </li>
                        <li style="margin-bottom: 5px;">
                            <a href="/clusters" style="display: block; padding: 10px 15px; color: white; text-decoration: none; border-radius: 6px; transition: background 0.2s;">
                                "🔧 Clusters"
                            </a>
                        </li>
                        <li style="margin-bottom: 5px;">
                            <a href="/taskservs" style="display: block; padding: 10px 15px; color: white; text-decoration: none; border-radius: 6px; transition: background 0.2s;">
                                "⚙️ Task Services"
                            </a>
                        </li>
                        <li style="margin-bottom: 5px;">
                            <a href="/workflows" style="display: block; padding: 10px 15px; color: white; text-decoration: none; border-radius: 6px; transition: background 0.2s;">
                                "🔄 Workflows"
                            </a>
                        </li>

                        // Infrastructure as Code section
                        <li style="margin-top: 15px; margin-bottom: 10px;">
                            <span style="display: block; padding: 10px 15px; font-size: 0.85rem; font-weight: 600; text-transform: uppercase; color: #9ca3af; letter-spacing: 0.05em;">
                                "Infrastructure"
                            </span>
                        </li>
                        <li style="margin-bottom: 5px;">
                            <a href="/detection" style="display: block; padding: 10px 15px; color: white; text-decoration: none; border-radius: 6px; transition: background 0.2s;">
                                "🔍 Detection"
                            </a>
                        </li>
                        <li style="margin-bottom: 5px;">
                            <a href="/rules" style="display: block; padding: 10px 15px; color: white; text-decoration: none; border-radius: 6px; transition: background 0.2s;">
                                "📋 Rules"
                            </a>
                        </li>
                        <li style="margin-bottom: 5px;">
                            <a href="/deployment" style="display: block; padding: 10px 15px; color: white; text-decoration: none; border-radius: 6px; transition: background 0.2s;">
                                "🚀 Deployment"
                            </a>
                        </li>

                        <li style="margin-bottom: 5px;">
                            <a href="/kms" style="display: block; padding: 10px 15px; color: white; text-decoration: none; border-radius: 6px; transition: background 0.2s;">
                                "🔐 KMS"
                            </a>
                        </li>
                        <li style="margin-bottom: 5px;">
                            <a href="/settings" style="display: block; padding: 10px 15px; color: white; text-decoration: none; border-radius: 6px; transition: background 0.2s;">
                                "⚙️ Settings"
                            </a>
                        </li>
                    </ul>
                </nav>

                // Documentation toggle button
                <div style="position: absolute; bottom: 20px; left: 20px; right: 20px;">
                    <button
                        on:click=move |_| {
                            set_show_docs.set(!show_docs.get());
                            set_docs_collapsed.set(false);
                        }
                        style="width: 100%; padding: 12px; background: #3b82f6; color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 8px;"
                    >
                        <span>"📚"</span>
                        <span>"Documentation"</span>
                    </button>
                </div>
            </aside>

            // Main content area
            <main style="flex: 1; overflow: auto;">
                {children()}
            </main>

            // Quick Links Sidebar (right side)
            <Show when=move || show_docs.get()>
                <div style="position: fixed; right: 0; top: 0; bottom: 0; z-index: 1000;">
                    <div style="position: relative; height: 100%;">
                        // Close/Collapse button
                        <button
                            on:click=move |_| {
                                if docs_collapsed.get() {
                                    set_docs_collapsed.set(false);
                                } else {
                                    set_show_docs.set(false);
                                    set_docs_collapsed.set(true);
                                }
                            }
                            style="position: absolute; left: -40px; top: 20px; background: white; border: none; border-radius: 6px 0 0 6px; padding: 10px 8px; cursor: pointer; box-shadow: -2px 2px 8px rgba(0,0,0,0.1); z-index: 1001;"
                            title={move || if docs_collapsed.get() { "Expand docs" } else { "Close docs" }}
                        >
                            {move || if docs_collapsed.get() { "◀" } else { "▶" }}
                        </button>

                        <QuickLinks collapsed=docs_collapsed />
                    </div>
                </div>
            </Show>
        </div>
    }
}
