import { NavLink, Outlet, useNavigate } from 'react-router-dom'
import { LayoutGrid, BarChart3, Link, Plus, Search } from 'lucide-react'
import { useState, useEffect, useCallback } from 'react'
import SearchModal from './SearchModal.tsx'

const navItems = [
  { to: '/board', label: 'Board', icon: LayoutGrid },
  { to: '/analytics', label: 'Analytics', icon: BarChart3 },
  { to: '/mappings', label: 'Mappings', icon: Link },
]

export default function Layout() {
  const navigate = useNavigate()
  const [searchOpen, setSearchOpen] = useState(false)
  const [showCreateHint, setShowCreateHint] = useState(false)

  // Global Cmd+K handler
  const handleGlobalKeyDown = useCallback((e: KeyboardEvent) => {
    if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
      e.preventDefault()
      setSearchOpen(true)
    }
  }, [])

  useEffect(() => {
    document.addEventListener('keydown', handleGlobalKeyDown)
    return () => document.removeEventListener('keydown', handleGlobalKeyDown)
  }, [handleGlobalKeyDown])

  return (
    <div className="flex flex-col h-screen bg-[var(--color-page)] text-[var(--color-text-primary)] overflow-hidden">
      {/* Top navigation bar */}
      <header className="flex items-center h-12 px-4 border-b border-[var(--color-border)] shrink-0 bg-[var(--color-page)]">
        {/* Logo */}
        <div className="flex items-center gap-2 mr-8">
          <div className="w-5 h-5 rounded bg-gradient-to-br from-[var(--color-accent)] to-[var(--color-accent-end)] flex items-center justify-center">
            <span className="text-[10px] font-bold text-white">T</span>
          </div>
          <span className="text-sm font-semibold tracking-tight">TaskTracker</span>
        </div>

        {/* Nav tabs */}
        <nav className="flex items-center gap-1">
          {navItems.map(({ to, label, icon: Icon }) => (
            <NavLink
              key={to}
              to={to}
              className={({ isActive }) =>
                `flex items-center gap-1.5 px-3 py-1.5 rounded-md text-[13px] font-medium transition-colors ${
                  isActive
                    ? 'text-white bg-white/[0.08]'
                    : 'text-[var(--color-text-secondary)] hover:text-white hover:bg-white/[0.04]'
                }`
              }
            >
              <Icon size={15} />
              {label}
            </NavLink>
          ))}
        </nav>

        {/* Spacer */}
        <div className="flex-1" />

        {/* Search trigger */}
        <button
          onClick={() => setSearchOpen(true)}
          className="flex items-center gap-2 h-7 px-2.5 rounded-md text-[12px] text-[var(--color-text-secondary)] bg-white/[0.04] border border-[var(--color-border)] hover:border-[var(--color-border-hover)] hover:text-[var(--color-text-primary)] transition-colors mr-2"
        >
          <Search size={13} />
          <span className="hidden sm:inline">Search</span>
          <kbd className="hidden sm:inline text-[10px] font-mono text-[var(--color-text-tertiary)] bg-white/[0.06] px-1 py-0.5 rounded">
            Ctrl K
          </kbd>
        </button>

        {/* New task button */}
        <button
          onClick={() => {
            navigate('/board')
            setShowCreateHint(true)
            setTimeout(() => setShowCreateHint(false), 100)
          }}
          className="flex items-center gap-1 h-7 px-2.5 rounded-md text-[12px] font-medium text-white bg-gradient-to-r from-[var(--color-accent)] to-[var(--color-accent-end)] hover:brightness-110 transition-all"
        >
          <Plus size={14} />
          <span className="hidden sm:inline">New Task</span>
        </button>
      </header>

      {/* Content */}
      <main className="flex-1 overflow-auto p-5">
        <Outlet context={{ showCreateHint }} />
      </main>

      {/* Search modal */}
      {searchOpen && (
        <SearchModal
          onSelect={(taskId) => {
            setSearchOpen(false)
            navigate(`/board?task=${taskId}`)
          }}
          onClose={() => setSearchOpen(false)}
        />
      )}
    </div>
  )
}