import React from 'react';
import { UserRole } from '../types';
import {
  GraduationCap,
  FileText,
  Users,
  Award,
  BookOpen,
  PlusCircle,
  RotateCcw,
  CheckCircle2,
  Calendar,
  ShieldCheck,
  UserCheck,
  FileCheck
} from 'lucide-react';

interface NavbarProps {
  currentTab: 'dashboard' | 'penelitian' | 'pengabdian' | 'review' | 'monev' | 'documents';
  onSelectTab: (tab: 'dashboard' | 'penelitian' | 'pengabdian' | 'review' | 'monev' | 'documents') => void;
  userRole: UserRole;
  onChangeRole: (role: UserRole) => void;
  onOpenNewProposal: () => void;
  onResetData: () => void;
  totalProposalsCount: number;
  inReviewCount: number;
}

export const Navbar: React.FC<NavbarProps> = ({
  currentTab,
  onSelectTab,
  userRole,
  onChangeRole,
  onOpenNewProposal,
  onResetData,
  inReviewCount,
}) => {
  return (
    <header className="sticky top-0 z-40 bg-white border-b border-stone-200 shadow-xs">
      {/* Top Banner / Academic year status */}
      <div className="bg-slate-900 text-slate-200 text-xs px-4 py-1.5 flex flex-wrap items-center justify-between gap-2">
        <div className="flex items-center gap-3">
          <span className="flex items-center gap-1.5 font-medium text-emerald-400">
            <span className="w-2 h-2 rounded-full bg-emerald-400 animate-pulse"></span>
            PORTAL LPPM TERPADU KAMPUS
          </span>
          <span className="text-slate-500">|</span>
          <span className="flex items-center gap-1 text-slate-300">
            <Calendar className="w-3.5 h-3.5 text-slate-400" />
            Tahun Anggaran 2025/2026 Ganjil (Gelombang I Buka s.d. 30 September 2025)
          </span>
        </div>

        <div className="flex items-center gap-4 text-slate-300">
          <button
            onClick={onResetData}
            title="Kembalikan data sampel simulasi"
            className="flex items-center gap-1 hover:text-white transition-colors cursor-pointer text-slate-400 hover:underline"
          >
            <RotateCcw className="w-3 h-3" />
            Reset Data Sampel
          </button>
          <span className="text-slate-500">|</span>
          <span className="text-xs text-slate-400">Standar Standar BIMA / DRTPM Dikti</span>
        </div>
      </div>

      {/* Main Nav container */}
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex items-center justify-between h-16 gap-4">
          {/* Logo & Title */}
          <div className="flex items-center gap-3 cursor-pointer" onClick={() => onSelectTab('dashboard')}>
            <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-blue-700 to-indigo-900 flex items-center justify-center text-white shadow-sm ring-2 ring-blue-600/20">
              <GraduationCap className="w-6 h-6" />
            </div>
            <div>
              <div className="flex items-center gap-2">
                <span className="font-bold text-lg text-slate-900 tracking-tight">SIM-LPPM</span>
                <span className="text-[10px] uppercase font-semibold px-2 py-0.5 rounded-md bg-blue-50 text-blue-700 border border-blue-200">
                  Perguruan Tinggi
                </span>
              </div>
              <p className="text-xs text-slate-500 font-normal">Sistem Manajemen Penelitian & Pengabdian</p>
            </div>
          </div>

          {/* Navigation Links */}
          <nav className="hidden lg:flex items-center gap-1">
            <button
              onClick={() => onSelectTab('dashboard')}
              className={`px-3 py-2 text-sm font-medium rounded-lg transition-colors cursor-pointer flex items-center gap-2 ${
                currentTab === 'dashboard'
                  ? 'bg-blue-50 text-blue-700 font-semibold'
                  : 'text-slate-600 hover:text-slate-900 hover:bg-slate-100'
              }`}
            >
              <Award className="w-4 h-4" />
              Dasbor
            </button>

            <button
              onClick={() => onSelectTab('penelitian')}
              className={`px-3 py-2 text-sm font-medium rounded-lg transition-colors cursor-pointer flex items-center gap-2 ${
                currentTab === 'penelitian'
                  ? 'bg-blue-50 text-blue-700 font-semibold'
                  : 'text-slate-600 hover:text-slate-900 hover:bg-slate-100'
              }`}
            >
              <BookOpen className="w-4 h-4" />
              Penelitian
            </button>

            <button
              onClick={() => onSelectTab('pengabdian')}
              className={`px-3 py-2 text-sm font-medium rounded-lg transition-colors cursor-pointer flex items-center gap-2 ${
                currentTab === 'pengabdian'
                  ? 'bg-blue-50 text-blue-700 font-semibold'
                  : 'text-slate-600 hover:text-slate-900 hover:bg-slate-100'
              }`}
            >
              <Users className="w-4 h-4" />
              Pengabdian (PKM)
            </button>

            <button
              onClick={() => onSelectTab('review')}
              className={`px-3 py-2 text-sm font-medium rounded-lg transition-colors cursor-pointer flex items-center gap-2 relative ${
                currentTab === 'review'
                  ? 'bg-blue-50 text-blue-700 font-semibold'
                  : 'text-slate-600 hover:text-slate-900 hover:bg-slate-100'
              }`}
            >
              <CheckCircle2 className="w-4 h-4" />
              Penilaian Reviewer
              {inReviewCount > 0 && (
                <span className="ml-1 px-1.5 py-0.5 text-[10px] rounded-full bg-amber-100 text-amber-800 font-semibold border border-amber-300">
                  {inReviewCount}
                </span>
              )}
            </button>

            <button
              onClick={() => onSelectTab('monev')}
              className={`px-3 py-2 text-sm font-medium rounded-lg transition-colors cursor-pointer flex items-center gap-2 ${
                currentTab === 'monev'
                  ? 'bg-blue-50 text-blue-700 font-semibold'
                  : 'text-slate-600 hover:text-slate-900 hover:bg-slate-100'
              }`}
            >
              <FileCheck className="w-4 h-4" />
              Monev & Luaran
            </button>

            <button
              onClick={() => onSelectTab('documents')}
              className={`px-3 py-2 text-sm font-medium rounded-lg transition-colors cursor-pointer flex items-center gap-2 ${
                currentTab === 'documents'
                  ? 'bg-blue-50 text-blue-700 font-semibold'
                  : 'text-slate-600 hover:text-slate-900 hover:bg-slate-100'
              }`}
            >
              <FileText className="w-4 h-4" />
              Dokumen Resmi
            </button>
          </nav>

          {/* Right actions: Role switch & New Proposal */}
          <div className="flex items-center gap-3">
            {/* User Role Switcher */}
            <div className="flex items-center bg-slate-100 p-1 rounded-xl border border-slate-200 text-xs">
              <span className="text-[11px] font-semibold text-slate-500 px-2 flex items-center gap-1">
                Peran:
              </span>
              <button
                onClick={() => onChangeRole('admin_lppm')}
                className={`px-2.5 py-1 rounded-lg font-medium transition-all cursor-pointer flex items-center gap-1 ${
                  userRole === 'admin_lppm'
                    ? 'bg-white text-blue-900 shadow-xs font-semibold'
                    : 'text-slate-600 hover:text-slate-900'
                }`}
                title="Akses penuh pengelola LPPM"
              >
                <ShieldCheck className="w-3.5 h-3.5 text-blue-600" />
                Admin LPPM
              </button>
              <button
                onClick={() => onChangeRole('dosen')}
                className={`px-2.5 py-1 rounded-lg font-medium transition-all cursor-pointer flex items-center gap-1 ${
                  userRole === 'dosen'
                    ? 'bg-white text-blue-900 shadow-xs font-semibold'
                    : 'text-slate-600 hover:text-slate-900'
                }`}
                title="Akses pengusul / Dosen"
              >
                <UserCheck className="w-3.5 h-3.5 text-emerald-600" />
                Dosen
              </button>
              <button
                onClick={() => onChangeRole('reviewer')}
                className={`px-2.5 py-1 rounded-lg font-medium transition-all cursor-pointer flex items-center gap-1 ${
                  userRole === 'reviewer'
                    ? 'bg-white text-blue-900 shadow-xs font-semibold'
                    : 'text-slate-600 hover:text-slate-900'
                }`}
                title="Akses penilai usulan"
              >
                <Award className="w-3.5 h-3.5 text-amber-600" />
                Reviewer
              </button>
            </div>

            {/* Action button: Usulan Baru */}
            <button
              onClick={onOpenNewProposal}
              className="bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium px-3.5 py-2 rounded-lg flex items-center gap-1.5 shadow-xs transition-colors cursor-pointer"
            >
              <PlusCircle className="w-4 h-4" />
              <span className="hidden sm:inline">Ajukan</span> Usulan Baru
            </button>
          </div>
        </div>

        {/* Mobile Nav tabs */}
        <div className="flex lg:hidden overflow-x-auto py-2 border-t border-slate-200 gap-1 text-xs no-scrollbar">
          {[
            { id: 'dashboard', label: 'Dasbor', icon: Award },
            { id: 'penelitian', label: 'Penelitian', icon: BookOpen },
            { id: 'pengabdian', label: 'Pengabdian', icon: Users },
            { id: 'review', label: 'Reviewer', icon: CheckCircle2 },
            { id: 'monev', label: 'Monev & Luaran', icon: FileCheck },
            { id: 'documents', label: 'Dokumen', icon: FileText },
          ].map((t) => {
            const Icon = t.icon;
            const active = currentTab === t.id;
            return (
              <button
                key={t.id}
                onClick={() => onSelectTab(t.id as any)}
                className={`px-3 py-1.5 whitespace-nowrap rounded-md flex items-center gap-1.5 font-medium cursor-pointer ${
                  active ? 'bg-blue-600 text-white' : 'text-slate-700 hover:bg-slate-100'
                }`}
              >
                <Icon className="w-3.5 h-3.5" />
                {t.label}
              </button>
            );
          })}
        </div>
      </div>
    </header>
  );
};