<script lang="ts">
    import TerminalVisualizer from '$lib/components/terminal-visualizer.svelte';
    import { onMount } from 'svelte';

    // State for the layout configurator
    let layout = $state({ type: 'pane', id: 0 });
    let nextId = 1;
    let activePaneId = $state(0);
    let generatedConfig = $state('');

    function splitPane(direction: 'h' | 'v') {
        // Find the active pane in the tree and replace it with a split
        const newLayout = JSON.parse(JSON.stringify(layout));
        
        function findAndSplit(node: any) {
            if (node.type === 'pane') {
                if (node.id === activePaneId) {
                    const oldId = node.id;
                    const newId = nextId++;
                    
                    // Create new split node
                    node.type = direction === 'h' ? 'split-h' : 'split-v';
                    node.ratio = 0.5;
                    delete node.id;
                    node.children = [
                        { type: 'pane', id: oldId },
                        { type: 'pane', id: newId }
                    ];
                    return true;
                }
                return false;
            } else {
                return findAndSplit(node.children[0]) || findAndSplit(node.children[1]);
            }
        }

        findAndSplit(newLayout);
        layout = newLayout;
        generateTmuxConfig();
    }

    function resetLayout() {
        layout = { type: 'pane', id: 0 };
        nextId = 1;
        activePaneId = 0;
        generateTmuxConfig();
    }

    function selectPane(id: number) {
        activePaneId = id;
    }

    // Simple recursive function to generate tmux commands
    function generateTmuxConfig() {
        let config = `# ~/.tmux.conf setup\n`;
        config += `# Generated by mytmux.life\n\n`;
        config += `new-session -s development -n editor\n`;
        
        function traverse(node: any) {
            if (node.type === 'split-h') {
                config += `split-window -h\n`;
                traverse(node.children[1]); // Right child
                config += `select-pane -L\n`; // Go back left
                traverse(node.children[0]); // Left child
            } else if (node.type === 'split-v') {
                config += `split-window -v\n`;
                traverse(node.children[1]); // Bottom child
                config += `select-pane -U\n`; // Go back up
                traverse(node.children[0]); // Top child
            }
        }
        
        traverse(layout);
        
        config += `\n# Select the initially active pane\n`;
        config += `select-pane -t ${activePaneId}\n`;
        
        generatedConfig = config;
    }

    onMount(() => {
        generateTmuxConfig();
    });
</script>

<div class="flex flex-col gap-16 pb-20">
    
    <!-- Hero Section -->
    <section class="container px-4 pt-20 md:pt-32">
        <div class="grid gap-8 md:grid-cols-2 items-center">
            <div class="space-y-6">
                <div class="inline-flex items-center rounded-full border border-primary/50 bg-primary/10 px-3 py-1 text-xs font-medium text-primary">
                    <span class="mr-2 h-2 w-2 rounded-full bg-primary animate-pulse"></span>
                    SYSTEM ONLINE
                </div>
                <h1 class="text-4xl font-extrabold tracking-tight lg:text-6xl glow-text">
                    Master Your <br/>
                    <span class="text-primary">&lt;Terminal /&gt;</span>
                </h1>
                <p class="text-xl text-muted-foreground max-w-[600px]">
                    Stop wasting time switching windows. 
                    <span class="text-foreground font-bold">mytmux.life</span> helps you architect the perfect terminal development environment.
                </p>
                <div class="flex flex-col sm:flex-row gap-4 pt-4">
                    <a href="#configurator" class="inline-flex h-12 items-center justify-center bg-primary text-primary-foreground px-8 text-sm font-medium transition-colors hover:bg-primary/90 hover:shadow-[0_0_20px_rgba(0,255,0,0.5)]">
                        INITIALIZE_CONFIG
                    </a>
                    <a href="#learn" class="inline-flex h-12 items-center justify-center border border-input bg-background px-8 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground">
                        READ_MAN_PAGE
                    </a>
                </div>
            </div>
            
            <!-- ASCII Art / Decorative Element -->
            <div class="hidden md:block p-6 border border-border bg-card/50 font-mono text-xs leading-none text-muted-foreground select-none overflow-hidden">
<pre>
   _________________________________________
  /                                         \
 |  root@mytmux:~ $ tmux new -s dev          |
 |  [0] nvim ---------------- [1] server --  |
 |  |                        |            |  |
 |  |   import { life }      |  npm run   |  |
 |  |     from 'tmux';       |   dev      |  |
 |  |                        |            |  |
 |  |   // TODO: Sleep       |            |  |
 |  |________________________|____________|  |
 |  [2] logs ------------------------------  |
 |  | > ready in 200ms                    |  |
 |  | > watching files...                 |  |
 |  |_____________________________________|  |
  \_________________________________________/
</pre>
            </div>
        </div>
    </section>

    <!-- Configurator Section -->
    <section id="configurator" class="container px-4 py-12">
        <div class="flex flex-col space-y-4 mb-8">
            <h2 class="text-3xl font-bold tracking-tight border-l-4 border-primary pl-4">
                ENVIRONMENT_CONFIGURATOR
            </h2>
            <p class="text-muted-foreground">
                Visually design your session layout. Click actions to split the active pane.
            </p>
        </div>

        <div class="grid lg:grid-cols-3 gap-8 h-[600px]">
            <!-- Controls & Output -->
            <div class="flex flex-col gap-6 h-full">
                <div class="p-6 border border-border bg-card space-y-6">
                    <h3 class="text-lg font-bold flex items-center gap-2">
                        <span class="text-primary">></span> ACTIONS
                    </h3>
                    <div class="grid grid-cols-2 gap-4">
                        <button 
                            onclick={() => splitPane('h')}
                            class="h-20 border border-dashed border-muted-foreground hover:border-primary hover:text-primary hover:bg-primary/5 transition-all flex flex-col items-center justify-center gap-2"
                        >
                            <div class="flex gap-1 h-6 w-8 border border-current p-0.5">
                                <div class="w-1/2 h-full bg-current/50"></div>
                                <div class="w-1/2 h-full border border-current"></div>
                            </div>
                            <span class="text-xs">SPLIT_VERTICAL (%)</span>
                        </button>
                        <button 
                            onclick={() => splitPane('v')}
                            class="h-20 border border-dashed border-muted-foreground hover:border-primary hover:text-primary hover:bg-primary/5 transition-all flex flex-col items-center justify-center gap-2"
                        >
                            <div class="flex flex-col gap-1 h-8 w-6 border border-current p-0.5">
                                <div class="h-1/2 w-full bg-current/50"></div>
                                <div class="h-1/2 w-full border border-current"></div>
                            </div>
                            <span class="text-xs">SPLIT_HORIZONTAL (")</span>
                        </button>
                    </div>
                    
                    <div class="pt-4 border-t border-border">
                        <div class="flex items-center justify-between mb-2">
                            <span class="text-xs text-muted-foreground">ACTIVE_PANE_ID:</span>
                            <span class="font-mono text-primary">{activePaneId}</span>
                        </div>
                        <div class="flex gap-2">
                            <button 
                                onclick={resetLayout}
                                class="flex-1 py-2 text-xs bg-destructive/10 text-destructive hover:bg-destructive/20 border border-destructive/20"
                            >
                                RESET_LAYOUT
                            </button>
                        </div>
                    </div>
                </div>

                <div class="flex-1 p-6 border border-border bg-card flex flex-col min-h-0">
                    <h3 class="text-lg font-bold flex items-center gap-2 mb-4">
                        <span class="text-primary">></span> GENERATED_CONFIG
                    </h3>
                    <div class="flex-1 bg-black p-4 font-mono text-xs text-muted-foreground overflow-auto border border-border">
                        <pre>{generatedConfig}</pre>
                    </div>
                </div>
            </div>

            <!-- Visualizer Canvas -->
            <div class="lg:col-span-2 h-full border border-border bg-card p-1 relative">
                <div class="absolute top-0 left-0 bg-primary text-black text-[10px] font-bold px-2 py-0.5 z-10">
                    CANVAS_RENDER_TARGET
                </div>
                <TerminalVisualizer {layout} {activePaneId} />
            </div>
        </div>
    </section>

    <!-- Documentation / Info Section -->
    <section id="learn" class="container px-4 py-12">
        <div class="grid md:grid-cols-3 gap-12">
            <div class="md:col-span-1 space-y-2">
                <h3 class="text-xl font-bold text-primary">01. MULTIPLEXING</h3>
                <p class="text-sm text-muted-foreground leading-relaxed">
                    Run multiple terminal sessions inside one single window. Detach them and leave them running in the background, then reattach later.
                </p>
            </div>
            <div class="md:col-span-1 space-y-2">
                <h3 class="text-xl font-bold text-primary">02. WINDOWS & PANES</h3>
                <p class="text-sm text-muted-foreground leading-relaxed">
                    Organize your workspace into windows (tabs) and panes (splits). Keep your editor, server logs, and git commands visible at once.
                </p>
            </div>
            <div class="md:col-span-1 space-y-2">
                <h3 class="text-xl font-bold text-primary">03. CONFIGURATION</h3>
                <p class="text-sm text-muted-foreground leading-relaxed">
                    Tmux is highly scriptable. Bind keys, change status bar colors, and create custom layouts to fit your specific workflow needs.
                </p>
            </div>
        </div>
    </section>

    <!-- Cheat Sheet -->
    <section class="container px-4 py-12 border-t border-border">
        <h2 class="text-2xl font-bold mb-8">QUICK_REFERENCE_CARD</h2>
        <div class="grid md:grid-cols-2 gap-4">
            {#each [
                { cmd: 'Ctrl+b %', desc: 'Split pane vertically' },
                { cmd: 'Ctrl+b "', desc: 'Split pane horizontally' },
                { cmd: 'Ctrl+b o', desc: 'Swap to next pane' },
                { cmd: 'Ctrl+b c', desc: 'Create new window' },
                { cmd: 'Ctrl+b n', desc: 'Next window' },
                { cmd: 'Ctrl+b d', desc: 'Detach session' },
            ] as item}
                <div class="flex items-center justify-between p-4 border border-border bg-card/50 hover:bg-card transition-colors group">
                    <span class="text-muted-foreground group-hover:text-foreground transition-colors">{item.desc}</span>
                    <code class="bg-secondary px-2 py-1 text-primary text-xs">{item.cmd}</code>
                </div>
            {/each}
        </div>
    </section>

</div>
