import React, { useRef } from 'react';
import { ArrowDownIcon, ArrowUpIcon, UserIcon, SettingsIcon } from './Icons';
import { User } from '../types';

interface HeaderProps {
    user: User | null;
    onLogout: () => void;
    onLoginClick: () => void;
    onImport: (e: React.ChangeEvent<HTMLInputElement>) => void;
    onExport: () => void;
    currentView: string;
    onChangeView: (view: string) => void;
}

const Header: React.FC<HeaderProps> = ({ user, onLogout, onLoginClick, onImport, onExport, currentView, onChangeView }) => {
    const fileInputRef = useRef<HTMLInputElement>(null);

    return (
        <header className="mb-8 flex flex-col md:flex-row justify-between items-center border-b border-slate-700 pb-4 gap-4">
            <div className="cursor-pointer" onClick={() => onChangeView('dashboard')}>
                <h1 className="text-4xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-cyan-500">
                    License Tracker
                </h1>
                <p className="text-gray-400 mt-1 text-sm">
                    {user ? `Welcome, ${user.username} (${user.role})` : 'Read-Only Mode'}
                </p>
            </div>

            <div className="flex flex-wrap justify-center items-center gap-3">
                
                {/* Nav Links */}
                <div className="flex space-x-1 mr-2">
                    <button 
                        onClick={() => onChangeView('dashboard')}
                        className={`px-3 py-1.5 rounded text-sm font-medium transition-colors ${currentView === 'dashboard' ? 'text-cyan-400 bg-slate-800' : 'text-gray-400 hover:text-gray-200'}`}
                    >
                        Dashboard
                    </button>
                    
                    {user && user.role === 'admin' && (
                        <>
                            <button 
                                onClick={() => onChangeView('logs')}
                                className={`px-3 py-1.5 rounded text-sm font-medium transition-colors ${currentView === 'logs' ? 'text-cyan-400 bg-slate-800' : 'text-gray-400 hover:text-gray-200'}`}
                            >
                                Logs
                            </button>
                            <button 
                                onClick={() => onChangeView('settings')}
                                className={`flex items-center px-3 py-1.5 rounded text-sm font-medium transition-colors ${currentView === 'settings' ? 'text-cyan-400 bg-slate-800' : 'text-gray-400 hover:text-gray-200'}`}
                            >
                                <SettingsIcon className="w-4 h-4 mr-1" />
                                Settings
                            </button>
                        </>
                    )}
                </div>

                {/* Tools (Backup/Restore) - Restricted to Admins */}
                {user && user.role === 'admin' && (
                    <div className="flex bg-slate-800 rounded-md p-1 border border-slate-600">
                        <button 
                            onClick={onExport}
                            className="flex items-center space-x-2 px-3 py-1.5 text-sm text-cyan-400 hover:bg-slate-700 rounded transition-colors"
                            title="Download Database Backup"
                        >
                            <ArrowDownIcon className="w-4 h-4" />
                            <span>Backup</span>
                        </button>
                        <div className="w-px bg-slate-600 mx-1 my-1"></div>
                        <button 
                            onClick={() => fileInputRef.current?.click()}
                            className="flex items-center space-x-2 px-3 py-1.5 text-sm text-cyan-400 hover:bg-slate-700 rounded transition-colors"
                            title="Restore Database from File"
                        >
                            <ArrowUpIcon className="w-4 h-4" />
                            <span>Restore</span>
                        </button>
                        <input 
                            type="file" 
                            ref={fileInputRef} 
                            onChange={onImport} 
                            accept=".json" 
                            className="hidden" 
                        />
                    </div>
                )}

                {/* Auth Button */}
                {user ? (
                    <button onClick={onLogout} className="px-4 py-2 rounded-md bg-slate-700 hover:bg-slate-600 font-semibold text-gray-200 transition-colors text-sm border border-slate-600">
                        Logout
                    </button>
                ) : (
                    <button onClick={onLoginClick} className="flex items-center space-x-2 px-4 py-2 rounded-md bg-cyan-600 hover:bg-cyan-500 font-semibold text-white transition-colors text-sm shadow-lg shadow-cyan-500/20">
                        <UserIcon className="w-4 h-4" />
                        <span>Login</span>
                    </button>
                )}
            </div>
        </header>
    );
};

export default Header;