import type { User } from './data';

interface TopNavbarProps {
    title: string;
    filterUser: string | null;
    onFilterChange: (uid: string | null) => void;
    searchQuery: string;
    onSearch: (q: string) => void;
    onNewTask: () => void;
    onOpenSidebar: () => void;
    users: User[];
}

export function TopNavbar({ title, filterUser, onFilterChange, searchQuery, onSearch, onNewTask, onOpenSidebar, users }: TopNavbarProps) {
    return (
        <div className="top-navbar">
            <button className="hamburger-btn" onClick={onOpenSidebar}>☰</button>
            <span className="navbar-title">{title}</span>
            <div className="navbar-search">
                <span className="navbar-search-icon">🔍</span>
                <input placeholder="Search tasks..." value={searchQuery} onChange={e => onSearch(e.target.value)} />
            </div>
            <div className="navbar-right">
                <div className="filter-chips">
                    <span className={`filter-chip filter-chip-all ${!filterUser ? 'active' : ''}`} onClick={() => onFilterChange(null)}>All</span>
                    {users.map(u => (
                        <div key={u.id} className={`filter-chip ${filterUser === u.id ? 'active' : ''}`}
                            style={{ background: u.color, borderColor: filterUser === u.id ? u.color : 'transparent' }}
                            title={u.name} onClick={() => onFilterChange(u.id === filterUser ? null : u.id)}>
                            {u.avatar}
                        </div>
                    ))}
                </div>
                <button className="notif-btn">🔔<span className="notif-badge">3</span></button>
                <button className="new-task-btn" onClick={onNewTask}>+ New Task</button>
            </div>
        </div>
    );
}

interface BottomToggleBarProps {
    activeView: string;
    onViewChange: (v: string) => void;
}

export function BottomToggleBar({ activeView, onViewChange }: BottomToggleBarProps) {
    return (
        <div className="bottom-bar">
            <div className="toggle-pill">
                {[{ id: 'calendar', icon: '📅', label: 'Calendar' }, { id: 'kanban', icon: '▦', label: 'Kanban' }, { id: 'list', icon: '☰', label: 'List' }].map(v => (
                    <button key={v.id} className={`toggle-btn ${activeView === v.id ? 'active' : ''}`} onClick={() => onViewChange(v.id)}>
                        {v.icon} {v.label}
                    </button>
                ))}
            </div>
        </div>
    );
}