'use client';

import { useRouter, usePathname } from 'next/navigation';
import { LogOut, Wheat, MapPin, FileText, Upload, LayoutDashboard } from 'lucide-react';
import { logout } from '@/lib/api';

export default function Navbar() {
  const router = useRouter();
  const pathname = usePathname();

  const handleLogout = () => {
    logout();
  };

  const isActive = (path: string) => pathname === path;

  return (
    <nav className="bg-white shadow-sm border-b border-gray-200">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex justify-between h-16">
          <div className="flex items-center space-x-8">
            <button onClick={() => router.push('/dashboard')} className="text-xl font-bold text-green-700 hover:text-green-800 transition-colors">
              KeinaSystem
            </button>
            <div className="flex items-center space-x-4">
              <button
                onClick={() => router.push('/dashboard')}
                className={`flex items-center px-3 py-2 text-sm rounded-md transition-colors ${
                  isActive('/dashboard')
                    ? 'text-green-700 bg-green-50'
                    : 'text-gray-700 hover:text-gray-900 hover:bg-gray-100'
                }`}
              >
                <LayoutDashboard className="h-4 w-4 mr-2" />
                ホーム
              </button>
              <button
                onClick={() => router.push('/allocation')}
                className={`flex items-center px-3 py-2 text-sm rounded-md transition-colors ${
                  isActive('/allocation')
                    ? 'text-green-700 bg-green-50'
                    : 'text-gray-700 hover:text-gray-900 hover:bg-gray-100'
                }`}
              >
                <Wheat className="h-4 w-4 mr-2" />
                作付け計画
              </button>
              <button
                onClick={() => router.push('/fields')}
                className={`flex items-center px-3 py-2 text-sm rounded-md transition-colors ${
                  isActive('/fields') || pathname?.startsWith('/fields/')
                    ? 'text-green-700 bg-green-50'
                    : 'text-gray-700 hover:text-gray-900 hover:bg-gray-100'
                }`}
              >
                <MapPin className="h-4 w-4 mr-2" />
                圃場管理
              </button>
              <button
                onClick={() => router.push('/reports')}
                className={`flex items-center px-3 py-2 text-sm rounded-md transition-colors ${
                  isActive('/reports') || pathname?.startsWith('/reports/')
                    ? 'text-green-700 bg-green-50'
                    : 'text-gray-700 hover:text-gray-900 hover:bg-gray-100'
                }`}
              >
                <FileText className="h-4 w-4 mr-2" />
                帳票出力
              </button>
              <button
                onClick={() => router.push('/import')}
                className={`flex items-center px-3 py-2 text-sm rounded-md transition-colors ${
                  isActive('/import')
                    ? 'text-green-700 bg-green-50'
                    : 'text-gray-700 hover:text-gray-900 hover:bg-gray-100'
                }`}
              >
                <Upload className="h-4 w-4 mr-2" />
                データ取込
              </button>
            </div>
          </div>
          <div className="flex items-center">
            <button
              onClick={handleLogout}
              className="flex items-center px-4 py-2 text-sm text-gray-700 hover:text-gray-900 hover:bg-gray-100 rounded-md transition-colors"
            >
              <LogOut className="h-4 w-4 mr-2" />
              ログアウト
            </button>
          </div>
        </div>
      </div>
    </nav>
  );
}