import * as React from 'react';
import { Modal } from 'antd';
import { useNavigate } from 'react-router-dom';
import LocalStorage from '@/LocalStorage';
import './header.less';

interface Props {
    userName: string;
    onClickLogout: (navigate: any) => Promise<any>;
}

const Header: React.FC<Props> = (props) => {
    const navigate = useNavigate();
    const { userName, onClickLogout } = props;
    const [dropdownVisible, setDropdownVisible] = React.useState(false);
    const dropdownRef = React.useRef<HTMLDivElement>(null);

    // Header 滚动效果
    React.useEffect(() => {
        const header = document.querySelector('.header');
        const handleScroll = () => {
            if (window.scrollY > 10) {
                header?.classList.add('scrolled');
            } else {
                header?.classList.remove('scrolled');
            }
        };

        window.addEventListener('scroll', handleScroll);
        return () => window.removeEventListener('scroll', handleScroll);
    }, []);

    // 点击外部关闭下拉菜单
    React.useEffect(() => {
        const handleClickOutside = (event: MouseEvent) => {
            if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
                setDropdownVisible(false);
            }
        };

        document.addEventListener('mousedown', handleClickOutside);
        return () => document.removeEventListener('mousedown', handleClickOutside);
    }, []);

    // 处理退出登录
    const handleLogout = () => {
        setDropdownVisible(false);
        Modal.confirm({
            title: '提示',
            content: '确定退出平台吗？',
            async onOk() {
                await onClickLogout(navigate);
            }
        });
    };

    return (
        <header className='header'>
            <div className='header-container'>
                {/* Logo 区域 */}
                <div
                    className='header-logo-section'
                    onClick={() => navigate('/appCenter')}
                >
                    <div className='logo-gradient'>
                        <span
                            className='iconify'
                            data-icon='solar:shield-network-bold-duotone'
                            style={{ fontSize: '24px', color: 'white' }}
                        ></span>
                    </div>
                    <div className='logo-text-section'>
                        <h1 className='logo-title'>建科小智</h1>
                        <p className='logo-subtitle'>开放平台 v2.0</p>
                    </div>
                </div>

                {/* 右侧功能区 */}
                <div className='header-right'>
                    {/* 搜索框 */}
                    <div className='header-search'>
                        <span
                            className='iconify search-icon'
                            data-icon='solar:magnifer-linear'
                        ></span>
                        <input
                            type='text'
                            className='search-input'
                            placeholder='试试搜索 "政务审批自动摘要生成" 或 "安防监控动态预警"...'
                        />
                    </div>

                    {/* 安全状态指示器 */}
                    <div className='security-status'>
                        <span className='status-dot'></span>
                        <span>内网安全连接</span>
                    </div>

                    {/* 通知按钮 */}
                    <button className='notification-btn'>
                        <span
                            className='iconify'
                            data-icon='solar:bell-linear'
                        ></span>
                        <span className='notification-dot'></span>
                    </button>

                    {/* 用户区域 */}
                    <div className='user-dropdown-wrapper' ref={dropdownRef}>
                        <button
                            className='user-section'
                            onClick={() => setDropdownVisible(!dropdownVisible)}
                        >
                            <div className='user-avatar'>
                                <img
                                    alt={userName}
                                    src='https://modao.cc/agent-py/media/generated_images/2026-03-18/087b1d0dc0544b9e82f423a1398cbc25.jpg'
                                />
                            </div>
                            <div className='user-info'>
                                <p className='user-name'>{userName}</p>
                                <p className='user-dept'>部门信息</p>
                            </div>
                            <span
                                className='iconify user-dropdown-icon'
                                data-icon='solar:alt-arrow-down-linear'
                            ></span>
                        </button>

                        {/* 下拉菜单 */}
                        {dropdownVisible && (
                            <div className='user-dropdown-menu'>
                                <div className='user-dropdown-header'>
                                    <p className='user-dropdown-name'>{userName}</p>
                                    <p className='user-dropdown-dept'>部门信息</p>
                                </div>

                                <button className='user-dropdown-item'>
                                    <span className='iconify' data-icon='solar:user-id-linear'></span>
                                    <span>个人中心</span>
                                </button>

                                <button className='user-dropdown-item'>
                                    <span className='iconify' data-icon='solar:settings-linear'></span>
                                    <span>账户设置</span>
                                </button>

                                <div className='user-dropdown-item divider'></div>

                                <button className='user-dropdown-item danger' onClick={handleLogout}>
                                    <span className='iconify' data-icon='solar:logout-2-linear'></span>
                                    <span>退出登录</span>
                                </button>
                            </div>
                        )}
                    </div>
                </div>
            </div>
        </header>
    );
};

export default Header;
