'use client'

import Link from 'next/link'
import { Menu, X, Moon, Sun } from 'lucide-react'
import { useState, useEffect } from 'react'

export default function Header() {
  const [open, setOpen] = useState(false)
  const [dark, setDark] = useState(false)

  useEffect(() => {
    const isDark = document.documentElement.classList.contains('dark')
    setDark(isDark)
  }, [])

  const toggleDark = () => {
    document.documentElement.classList.toggle('dark')
    setDark(!dark)
  }

  return (
    <header className="sticky top-0 z-50 border-b border-gray-200 dark:border-gray-800 bg-white/95 dark:bg-gray-950/95 backdrop-blur">
      <div className="max-w-6xl mx-auto px-6 py-4 flex justify-between items-center">
        <Link href="/" className="flex items-center gap-2">
          <div className="w-8 h-8 rounded-full bg-gradient-to-br from-blue-600 to-purple-600 flex items-center justify-center text-white font-bold text-sm">
            RL
          </div>
          <div>
            <div className="text-sm font-bold text-gray-900 dark:text-white">Rock Liang</div>
            <div className="text-xs text-gray-600 dark:text-gray-400">Software Engineer Lead</div>
          </div>
        </Link>

        <nav className="hidden md:flex gap-8 items-center">
          <Link href="/" className="text-sm hover:text-blue-600 dark:hover:text-blue-400">Home</Link>
          <Link href="/cluster" className="text-sm hover:text-blue-600 dark:hover:text-blue-400">Cluster</Link>
          <Link href="/infrastructure" className="text-sm hover:text-blue-600 dark:hover:text-blue-400">Infrastructure</Link>
          <Link href="/kafka" className="text-sm hover:text-blue-600 dark:hover:text-blue-400">Kafka</Link>
          <Link href="/cicd" className="text-sm hover:text-blue-600 dark:hover:text-blue-400">CI/CD</Link>
          <Link href="/agent" className="text-sm hover:text-blue-600 dark:hover:text-blue-400">Agent</Link>
          <button onClick={toggleDark} className="p-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded">
            {dark ? <Sun size={20} /> : <Moon size={20} />}
          </button>
        </nav>

        <button
          onClick={() => setOpen(!open)}
          className="md:hidden p-2"
        >
          {open ? <X size={24} /> : <Menu size={24} />}
        </button>
      </div>

      {open && (
        <div className="md:hidden border-t border-gray-200 dark:border-gray-800 p-4 space-y-2">
          <Link href="/" className="block py-2 text-sm hover:text-blue-600">Home</Link>
          <Link href="/infrastructure" className="block py-2 text-sm hover:text-blue-600">Infrastructure</Link>
          <Link href="/kafka" className="block py-2 text-sm hover:text-blue-600">Kafka</Link>
          <Link href="/cicd" className="block py-2 text-sm hover:text-blue-600">CI/CD</Link>
          <Link href="/agent" className="block py-2 text-sm hover:text-blue-600">Agent</Link>
        </div>
      )}
    </header>
  )
}