import React, { useState } from 'react';
import { Bell, ChevronDown, LogOut, Plus, ShieldAlert, UserCheck, Users } from 'lucide-react';
import { User } from '../services/types';
export type NavTab = 'dashboard' | 'renewals' | 'maintenance' | 'warranties' | 'groups' | 'digest';
interface NavbarProps {
activeTab: NavTab;
onTabChange: (tab: NavTab) => void;
currentUser: User | null;
unreadCount: number;
onOpenReminders: () => void;
onOpenCreate: () => void;
onOpenAuth: () => void;
onDeleteAccount: () => void;
onLogout: () => void;
}
export const Navbar: React.FC<NavbarProps> = ({
activeTab,
onTabChange,
currentUser,
unreadCount,
onOpenReminders,
onOpenCreate,
onOpenAuth,
onDeleteAccount,
onLogout,
}) => {
const [userMenuOpen, setUserMenuOpen] = useState(false);
return (
<header className="sticky top-0 z-40 bg-white border-b border-slate-200">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex items-center justify-between gap-8 h-16">
{/* Zone 1: Single text element wordmark */}
<div className="flex items-center gap-3 shrink-0">
<button
onClick={() => onTabChange('dashboard')}
className="text-lg font-bold tracking-tight text-slate-900 whitespace-nowrap hover:opacity-80 transition-opacity flex items-center gap-2"
>
<span className="w-7 h-7 rounded-lg bg-slate-900 text-white flex items-center justify-center text-xs font-black">
LT
</span>
<span>Lifecycle Tracker</span>
</button>
</div>
{/* Zone 2: Concise single-line navigation links */}
<nav className="hidden lg:flex items-center gap-6 text-sm font-medium text-slate-600">
<button
onClick={() => onTabChange('dashboard')}
className={`hover:text-slate-900 transition-colors whitespace-nowrap shrink-0 py-1 ${
activeTab === 'dashboard' ? 'text-slate-900 font-bold border-b-2 border-slate-900' : ''
}`}
>
Dashboard
</button>
<button
onClick={() => onTabChange('renewals')}
className={`hover:text-slate-900 transition-colors whitespace-nowrap shrink-0 py-1 ${
activeTab === 'renewals' ? 'text-slate-900 font-bold border-b-2 border-slate-900' : ''
}`}
>
Renewals
</button>
<button
onClick={() => onTabChange('maintenance')}
className={`hover:text-slate-900 transition-colors whitespace-nowrap shrink-0 py-1 ${
activeTab === 'maintenance' ? 'text-slate-900 font-bold border-b-2 border-slate-900' : ''
}`}
>
Maintenance
</button>
<button
onClick={() => onTabChange('warranties')}
className={`hover:text-slate-900 transition-colors whitespace-nowrap shrink-0 py-1 ${
activeTab === 'warranties' ? 'text-slate-900 font-bold border-b-2 border-slate-900' : ''
}`}
>
Warranties
</button>
<button
onClick={() => onTabChange('groups')}
className={`hover:text-slate-900 transition-colors whitespace-nowrap shrink-0 py-1 ${
activeTab === 'groups' ? 'text-slate-900 font-bold border-b-2 border-slate-900' : ''
}`}
>
Groups
</button>
<button
onClick={() => onTabChange('digest')}
className={`hover:text-slate-900 transition-colors whitespace-nowrap shrink-0 py-1 ${
activeTab === 'digest' ? 'text-slate-900 font-bold border-b-2 border-slate-900' : ''
}`}
>
Daily Digest
</button>
</nav>
{/* Zone 3: Primary action + In-app bell + Account dropdown */}
<div className="flex items-center gap-3 shrink-0">
{/* Primary CTA */}
<button
onClick={onOpenCreate}
className="px-3.5 py-1.5 text-xs font-semibold text-white bg-slate-900 hover:bg-slate-800 rounded-lg transition-colors whitespace-nowrap shrink-0 flex items-center gap-1.5 shadow-xs"
>
<Plus className="w-3.5 h-3.5" />
<span>Track Item</span>
</button>
{/* In-app reminder bell */}
<button
onClick={onOpenReminders}
className="relative p-2 text-slate-600 hover:text-slate-900 hover:bg-slate-100 rounded-lg transition-colors"
title="Open Reminders"
aria-label="Open Reminders"
>
<Bell className="w-4 h-4" />
{unreadCount > 0 && (
<span className="absolute -top-1 -right-1 bg-red-600 text-white font-mono text-[10px] font-bold w-4 h-4 rounded-full flex items-center justify-center">
{unreadCount > 9 ? '9+' : unreadCount}
</span>
)}
</button>
{/* Account Switcher / Profile */}
<div className="relative">
<button
onClick={() => setUserMenuOpen(!userMenuOpen)}
className="flex items-center gap-2 p-1.5 text-slate-700 hover:text-slate-900 hover:bg-slate-100 rounded-lg transition-colors text-xs font-medium"
>
<div className="w-6 h-6 rounded-full bg-slate-200 text-slate-700 font-bold flex items-center justify-center text-xs">
{currentUser?.name?.charAt(0) || 'U'}
</div>
<span className="hidden md:inline max-w-[100px] truncate">{currentUser?.name || 'Account'}</span>
<ChevronDown className="w-3.5 h-3.5 text-slate-400" />
</button>
{userMenuOpen && (
<div
className="absolute right-0 mt-2 w-56 bg-white rounded-lg shadow-lg border border-slate-200 py-1 z-50 animate-in fade-in-50"
onMouseLeave={() => setUserMenuOpen(false)}
>
<div className="px-4 py-2 border-b border-slate-100">
<p className="text-xs font-semibold text-slate-900 truncate">{currentUser?.name}</p>
<p className="text-[11px] text-slate-500 truncate">{currentUser?.email}</p>
</div>
<button
onClick={() => {
setUserMenuOpen(false);
onOpenAuth();
}}
className="w-full text-left px-4 py-2 text-xs text-slate-700 hover:bg-slate-50 flex items-center gap-2"
>
<UserCheck className="w-3.5 h-3.5 text-slate-400" />
<span>Switch or Sign In User</span>
</button>
<button
onClick={() => {
setUserMenuOpen(false);
onTabChange('groups');
}}
className="w-full text-left px-4 py-2 text-xs text-slate-700 hover:bg-slate-50 flex items-center gap-2"
>
<Users className="w-3.5 h-3.5 text-slate-400" />
<span>Manage Groups</span>
</button>
<div className="border-t border-slate-100 my-1"></div>
<button
onClick={() => {
setUserMenuOpen(false);
onLogout();
}}
className="w-full text-left px-4 py-2 text-xs text-slate-700 hover:bg-slate-50 flex items-center gap-2"
>
<LogOut className="w-3.5 h-3.5 text-slate-400" />
<span>Log Out</span>
</button>
<button
onClick={() => {
setUserMenuOpen(false);
onDeleteAccount();
}}
className="w-full text-left px-4 py-2 text-xs text-red-600 hover:bg-red-50 flex items-center gap-2"
>
<ShieldAlert className="w-3.5 h-3.5 text-red-500" />
<span>Delete Account (Permanent)</span>
</button>
</div>
)}
</div>
</div>
</div>
{/* Mobile secondary tab strip */}
<div className="flex lg:hidden overflow-x-auto py-2 gap-4 border-t border-slate-100 text-xs font-medium text-slate-600 no-scrollbar">
<button
onClick={() => onTabChange('dashboard')}
className={`whitespace-nowrap px-2 py-1 ${activeTab === 'dashboard' ? 'text-slate-900 font-bold' : ''}`}
>
Dashboard
</button>
<button
onClick={() => onTabChange('renewals')}
className={`whitespace-nowrap px-2 py-1 ${activeTab === 'renewals' ? 'text-slate-900 font-bold' : ''}`}
>
Renewals
</button>
<button
onClick={() => onTabChange('maintenance')}
className={`whitespace-nowrap px-2 py-1 ${activeTab === 'maintenance' ? 'text-slate-900 font-bold' : ''}`}
>
Maintenance
</button>
<button
onClick={() => onTabChange('warranties')}
className={`whitespace-nowrap px-2 py-1 ${activeTab === 'warranties' ? 'text-slate-900 font-bold' : ''}`}
>
Warranties
</button>
<button
onClick={() => onTabChange('groups')}
className={`whitespace-nowrap px-2 py-1 ${activeTab === 'groups' ? 'text-slate-900 font-bold' : ''}`}
>
Groups
</button>
<button
onClick={() => onTabChange('digest')}
className={`whitespace-nowrap px-2 py-1 ${activeTab === 'digest' ? 'text-slate-900 font-bold' : ''}`}
>
Daily Digest
</button>
</div>
</div>
</header>
);
};