"use client"

import { useState, useEffect } from "react"
import TerminalVisualizer from "@/components/terminal-visualizer"

// Types for the layout tree
type PaneNode = {
  type: "pane"
  id: number
}

type SplitNode = {
  type: "split-h" | "split-v"
  ratio: number
  children: [LayoutNode, LayoutNode]
}

export type LayoutNode = PaneNode | SplitNode

const ASCII_ART = `
   _________________________________________
  /                                         \\
 |  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...                 |  |
 |  |_____________________________________|  |
  \\_________________________________________/
`

export default function Home() {
  const [layout, setLayout] = useState<LayoutNode>({ type: "pane", id: 0 })
  const [nextId, setNextId] = useState(1)
  const [activePaneId, setActivePaneId] = useState(0)
  const [generatedConfig, setGeneratedConfig] = useState("")

  // Helper to find and split the active node
  function findAndSplitNode(
    node: LayoutNode,
    activeId: number,
    direction: "h" | "v",
    nextIdVal: number,
  ): { found: boolean; nextId: number; newNode?: LayoutNode } {
    if (node.type === "pane") {
      if (node.id === activeId) {
        const oldId = node.id
        const newId = nextIdVal

        // Create new split node
        const newNode: SplitNode = {
          type: direction === "h" ? "split-h" : "split-v",
          ratio: 0.5,
          children: [
            { type: "pane", id: oldId },
            { type: "pane", id: newId },
          ],
        }
        return { found: true, nextId: nextIdVal + 1, newNode }
      }
      return { found: false, nextId: nextIdVal }
    } else {
      // Recursively check children
      // We need to clone the node to avoid mutating state directly if we were modifying in place,
      // but here we are rebuilding the tree structure where needed.

      // Check left/top child
      const leftResult = findAndSplitNode(node.children[0], activeId, direction, nextIdVal)

      if (leftResult.found) {
        return {
          found: true,
          nextId: leftResult.nextId,
          newNode: {
            ...node,
            children: [leftResult.newNode as LayoutNode, node.children[1]],
          },
        }
      }

      // Check right/bottom child
      const rightResult = findAndSplitNode(node.children[1], activeId, direction, nextIdVal)

      if (rightResult.found) {
        return {
          found: true,
          nextId: rightResult.nextId,
          newNode: {
            ...node,
            children: [node.children[0], rightResult.newNode as LayoutNode],
          },
        }
      }

      return { found: false, nextId: nextIdVal }
    }
  }

  function splitPane(direction: "h" | "v") {
    const result = findAndSplitNode(layout, activePaneId, direction, nextId)

    if (result.found && result.newNode) {
      setNextId(result.nextId)
      setLayout(result.newNode)
    }
  }

  function resetLayout() {
    setLayout({ type: "pane", id: 0 })
    setNextId(1)
    setActivePaneId(0)
  }

  // Generate config whenever layout changes
  useEffect(() => {
    let config = `# ~/.tmux.conf setup\n`
    config += `# Generated by mytmux.life\n\n`
    config += `new-session -s development -n editor\n`

    function traverse(node: LayoutNode) {
      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`

    setGeneratedConfig(config)
  }, [layout, activePaneId])

  return (
    <div className="flex flex-col gap-16 pb-20">
      {/* Hero Section */}
      <section className="container px-4 pt-20 md:pt-32">
        <div className="grid gap-8 md:grid-cols-2 items-center">
          <div className="space-y-6">
            <div className="inline-flex items-center rounded-full border border-primary/50 bg-primary/10 px-3 py-1 text-xs font-medium text-primary">
              <span className="mr-2 h-2 w-2 rounded-full bg-primary animate-pulse"></span>
              SYSTEM ONLINE
            </div>
            <h1 className="text-4xl font-extrabold tracking-tight lg:text-6xl glow-text">
              Master Your <br />
              <span className="text-primary">&lt;Terminal /&gt;</span>
            </h1>
            <p className="text-xl text-muted-foreground max-w-[600px]">
              Stop wasting time switching windows. <span className="text-foreground font-bold">mytmux.life</span> helps
              you architect the perfect terminal development environment.
            </p>
            <div className="flex flex-col sm:flex-row gap-4 pt-4">
              <a
                href="#configurator"
                className="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"
                className="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 className="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>{ASCII_ART}</pre>
          </div>
        </div>
      </section>

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

        <div className="grid lg:grid-cols-3 gap-8 h-[600px]">
          {/* Controls & Output */}
          <div className="flex flex-col gap-6 h-full">
            <div className="p-6 border border-border bg-card space-y-6">
              <h3 className="text-lg font-bold flex items-center gap-2">
                <span className="text-primary">&gt;</span> ACTIONS
              </h3>
              <div className="grid grid-cols-2 gap-4">
                <button
                  onClick={() => splitPane("h")}
                  className="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 cursor-pointer"
                >
                  <div className="flex gap-1 h-6 w-8 border border-current p-0.5">
                    <div className="w-1/2 h-full bg-current/50"></div>
                    <div className="w-1/2 h-full border border-current"></div>
                  </div>
                  <span className="text-xs">SPLIT_VERTICAL (%)</span>
                </button>
                <button
                  onClick={() => splitPane("v")}
                  className="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 cursor-pointer"
                >
                  <div className="flex flex-col gap-1 h-8 w-6 border border-current p-0.5">
                    <div className="h-1/2 w-full bg-current/50"></div>
                    <div className="h-1/2 w-full border border-current"></div>
                  </div>
                  <span className="text-xs">SPLIT_HORIZONTAL (&quot;)</span>
                </button>
              </div>

              <div className="pt-4 border-t border-border">
                <div className="flex items-center justify-between mb-2">
                  <span className="text-xs text-muted-foreground">ACTIVE_PANE_ID:</span>
                  <span className="font-mono text-primary">{activePaneId}</span>
                </div>
                <div className="flex gap-2">
                  <button
                    onClick={resetLayout}
                    className="flex-1 py-2 text-xs bg-destructive/10 text-destructive hover:bg-destructive/20 border border-destructive/20 cursor-pointer"
                  >
                    RESET_LAYOUT
                  </button>
                </div>
              </div>
            </div>

            <div className="flex-1 p-6 border border-border bg-card flex flex-col min-h-0">
              <h3 className="text-lg font-bold flex items-center gap-2 mb-4">
                <span className="text-primary">&gt;</span> GENERATED_CONFIG
              </h3>
              <div className="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 className="lg:col-span-2 h-full border border-border bg-card p-1 relative">
            <div className="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={layout} activePaneId={activePaneId} />
          </div>
        </div>
      </section>

      {/* Documentation / Info Section */}
      <section id="learn" className="container px-4 py-12">
        <div className="grid md:grid-cols-3 gap-12">
          <div className="md:col-span-1 space-y-2">
            <h3 className="text-xl font-bold text-primary">01. MULTIPLEXING</h3>
            <p className="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 className="md:col-span-1 space-y-2">
            <h3 className="text-xl font-bold text-primary">02. WINDOWS & PANES</h3>
            <p className="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 className="md:col-span-1 space-y-2">
            <h3 className="text-xl font-bold text-primary">03. CONFIGURATION</h3>
            <p className="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 className="container px-4 py-12 border-t border-border">
        <h2 className="text-2xl font-bold mb-8">QUICK_REFERENCE_CARD</h2>
        <div className="grid md:grid-cols-2 gap-4">
          {[
            { 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" },
          ].map((item, i) => (
            <div
              key={i}
              className="flex items-center justify-between p-4 border border-border bg-card/50 hover:bg-card transition-colors group"
            >
              <span className="text-muted-foreground group-hover:text-foreground transition-colors">{item.desc}</span>
              <code className="bg-secondary px-2 py-1 text-primary text-xs">{item.cmd}</code>
            </div>
          ))}
        </div>
      </section>
    </div>
  )
}