import React from 'react';
import { Building2, ChevronDown, User, LogOut } from 'lucide-react';
import { HybridBackend } from '../services/backend.ts';
import { useConfirm } from '../contexts/ConfirmContext.tsx';

export const Header: React.FC = () => {
    const workspaces = HybridBackend.getWorkspaces();
    const activeWorkspace = HybridBackend.getActiveWorkspace();
    const userName = HybridBackend.getCurrentUserName();
    const userEmail = HybridBackend.getCurrentUser();
    const confirm = useConfirm();

    const handleWorkspaceChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
        HybridBackend.switchWorkspace(e.target.value);
    };

    const handleLogout = async () => {
        if (await confirm('TEM CERTEZA QUE DESEJA SAIR DO SISTEMA?')) {
            HybridBackend.logout();
        }
    };

    return (
        <header className="bg-white border-b border-gray-200 h-16 flex items-center justify-between px-4 md:px-8 sticky top-0 z-20 shadow-sm">
            {/* Clinic Selector */}
            <div className="flex items-center gap-3 flex-1 min-w-0">
                <div className="hidden sm:flex w-10 h-10 bg-teal-50 rounded-xl items-center justify-center text-teal-600 shadow-inner">
                    <Building2 size={20} />
                </div>
                <div className="relative w-full max-w-[200px] md:max-w-[300px]">
                    <select
                        value={activeWorkspace?.id || ''}
                        onChange={handleWorkspaceChange}
                        className="w-full bg-gray-50 border border-gray-200 text-gray-800 text-xs font-bold uppercase py-2 pl-3 pr-8 rounded-lg outline-none focus:ring-2 focus:ring-teal-500 focus:border-transparent transition-all appearance-none cursor-pointer truncate"
                    >
                        {workspaces.map((ws) => (
                            <option key={ws.id} value={ws.id}>
                                {ws.nome}
                            </option>
                        ))}
                    </select>
                    <div className="absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none text-gray-400">
                        <ChevronDown size={14} />
                    </div>
                </div>
            </div>

            {/* User Actions */}
            <div className="flex items-center gap-2 md:gap-4 ml-4">
                <div className="hidden md:flex flex-col items-end mr-2">
                    <span className="text-[10px] font-bold text-gray-400 uppercase leading-none mb-1">Unidade Ativa</span>
                    <span className="text-xs font-bold text-teal-600 uppercase border border-teal-100 bg-teal-50 px-2 py-0.5 rounded shadow-sm">
                        {activeWorkspace?.role || 'Acesso'}
                    </span>
                </div>

                <div className="h-10 w-px bg-gray-100 hidden sm:block mx-1"></div>

                <div className="flex items-center gap-3">
                    <div className="text-right hidden sm:block">
                        <p className="text-xs font-bold text-gray-800 truncate max-w-[120px]" title={userName}>
                            {userName}
                        </p>
                        <p className="text-[9px] text-gray-400 font-bold truncate max-w-[120px]" title={userEmail}>
                            {userEmail}
                        </p>
                    </div>
                    <div className="w-9 h-9 bg-gray-100 rounded-full flex items-center justify-center text-gray-600 hover:bg-gray-200 transition-colors cursor-pointer border border-white shadow-sm">
                        <User size={18} />
                    </div>
                    <button
                        onClick={handleLogout}
                        className="p-2 text-gray-400 hover:text-red-500 hover:bg-red-50 rounded-lg transition-all"
                        title="SAIR"
                    >
                        <LogOut size={18} />
                    </button>
                </div>
            </div>
        </header>
    );
};