'use client';

import { usePathname } from 'next/navigation';
import Link from 'next/link';
import { Menu, X, BookOpen, Bot, Settings } from 'lucide-react';
import { useState } from 'react';

interface NavItem {
  href: string;
  label: string;
  icon: typeof BookOpen;
}

const navItems: NavItem[] = [
  { href: '/', label: 'History', icon: BookOpen },
  { href: '/chat', label: 'Teacher', icon: Bot },
  { href: '/settings', label: 'Settings', icon: Settings },
];

export function AppHeader() {
  const pathname = usePathname();
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);

  return (
    <header className="sticky top-0 z-50 bg-white/80 dark:bg-zinc-950/80 backdrop-blur border-b border-slate-200 dark:border-zinc-800">
      <div className="px-4 py-3">
        <div className="grid grid-cols-[1fr_auto_1fr] items-center">
          {/* Spacer for balance */}
          <div />

          {/* Title - Center */}
          <h1 className="text-xl font-serif font-bold text-slate-800 dark:text-zinc-100 h-9 flex items-center justify-center">
            My Journal
          </h1>

          {/* Navigation & Menu - Right */}
          <div className="flex items-center justify-end">

            {/* Menu - Right (Desktop) */}
            <nav className="hidden sm:flex items-center gap-1" aria-label="Main navigation">
              {navItems.map((item) => {
                const Icon = item.icon;
                const isActive = pathname === item.href;
                return (
                  <Link
                    key={item.href}
                    href={item.href}
                    className={`p-2 rounded-lg transition-colors ${isActive
                      ? 'bg-slate-100 dark:bg-zinc-800 text-slate-800 dark:text-zinc-100'
                      : 'text-slate-600 dark:text-zinc-400 hover:text-slate-800 dark:hover:text-zinc-100 hover:bg-slate-100 dark:hover:bg-zinc-800'
                      }`}
                    aria-label={item.label}
                  >
                    <Icon className="w-5 h-5" />
                  </Link>
                );
              })}
            </nav>

            {/* Mobile Menu Button */}
            <button
              type="button"
              className="sm:hidden p-2 text-slate-600 dark:text-zinc-400 hover:text-slate-800 dark:hover:text-zinc-100 hover:bg-slate-100 dark:hover:bg-zinc-800 rounded-lg transition-colors"
              onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
              aria-label="Toggle menu"
              aria-expanded={mobileMenuOpen}
            >
              {mobileMenuOpen ? <X className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
            </button>
          </div>
        </div>

        {/* Mobile Menu Dropdown */}
        {mobileMenuOpen && (
          <nav className="sm:hidden mt-3 pt-3 border-t border-slate-200 dark:border-zinc-800" aria-label="Mobile navigation">
            <div className="flex flex-col gap-1">
              {navItems.map((item) => {
                const Icon = item.icon;
                const isActive = pathname === item.href;
                return (
                  <Link
                    key={item.href}
                    href={item.href}
                    onClick={() => setMobileMenuOpen(false)}
                    className={`flex items-center gap-3 px-3 py-2 rounded-lg transition-colors ${isActive
                      ? 'bg-slate-100 dark:bg-zinc-800 text-slate-800 dark:text-zinc-100'
                      : 'text-slate-600 dark:text-zinc-400 hover:text-slate-800 dark:hover:text-zinc-100 hover:bg-slate-100 dark:hover:bg-zinc-800'
                      }`}
                  >
                    <Icon className="w-5 h-5" />
                    <span className="font-medium">{item.label}</span>
                  </Link>
                );
              })}
            </div>
          </nav>
        )}
      </div>
    </header>
  );
}
