'use client';

import { useState, useCallback } from 'react';
import { useRouter } from 'next/navigation';
import Link from 'next/link';
import {
  FileText, Search, LogOut, Shield, Menu, X, Bell,
} from 'lucide-react';
import type { JWTPayload } from '@/lib/types';

interface Props {
  user: Pick<JWTPayload, 'username' | 'role'>;
  onMenuToggle?: () => void;
}

export default function Navbar({ user, onMenuToggle }: Props) {
  const router   = useRouter();
  const [query,  setQuery]  = useState('');
  const [logging, setLogging] = useState(false);

  const handleSearch = useCallback(
    (e: React.FormEvent) => {
      e.preventDefault();
      if (query.trim()) router.push(`/?q=${encodeURIComponent(query.trim())}`);
    },
    [query, router]
  );

  async function logout() {
    setLogging(true);
    await fetch('/api/auth/logout', { method: 'POST' });
    router.push('/login');
  }

  return (
    <header className="sticky top-0 z-40 flex h-14 items-center gap-3 border-b border-slate-200 bg-white px-4 shadow-sm">
      {/* Mobile menu toggle */}
      <button
        className="rounded-lg p-1.5 text-slate-500 hover:bg-slate-100 lg:hidden"
        onClick={onMenuToggle}
        aria-label="Toggle sidebar"
      >
        <Menu className="h-5 w-5" />
      </button>

      {/* Logo */}
      <Link href="/" className="flex items-center gap-2 font-semibold text-slate-800 mr-2">
        <FileText className="h-5 w-5 text-blue-600" />
        <span className="hidden sm:inline">DocManager</span>
      </Link>

      {/* Search */}
      <form onSubmit={handleSearch} className="flex flex-1 max-w-xl">
        <div className="relative w-full">
          <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" />
          <input
            type="search"
            value={query}
            onChange={(e) => setQuery(e.target.value)}
            placeholder="Search files across all folders…"
            className="input w-full pl-9 pr-4 py-1.5 text-sm"
          />
        </div>
      </form>

      <div className="ml-auto flex items-center gap-2">
        {/* Admin badge */}
        {user.role === 'admin' && (
          <Link
            href="/admin"
            className="hidden sm:inline-flex items-center gap-1.5 rounded-lg bg-amber-50 px-3 py-1.5 text-xs font-medium text-amber-700 border border-amber-200 hover:bg-amber-100 transition-colors"
          >
            <Shield className="h-3.5 w-3.5" />
            Admin
          </Link>
        )}

        {/* Username */}
        <span className="hidden md:block text-sm text-slate-600 font-medium">
          {user.username}
        </span>

        {/* Logout */}
        <button
          onClick={logout}
          disabled={logging}
          className="rounded-lg p-1.5 text-slate-500 hover:bg-slate-100 hover:text-red-600 transition-colors"
          title="Logout"
        >
          <LogOut className="h-4 w-4" />
        </button>
      </div>
    </header>
  );
}