import React, { useState } from "react";
import { Link, useNavigate } from "react-router-dom";
import menuItems from "../data/sidebar-items-medico.json";
import TrocardePerfis from "./TrocardePerfis";

function Sidebar({ menuItems }) {
    const [isActive, setIsActive] = useState(true);
    const [openSubmenu, setOpenSubmenu] = useState(null);
    const [showLogoutModal, setShowLogoutModal] = useState(false);
    const navigate = useNavigate();

    const toggleSidebar = () => {
        setIsActive(!isActive);
    };

    const handleSubmenuClick = (submenuName) => {
        setOpenSubmenu(openSubmenu === submenuName ? null : submenuName);
    };

    const handleLogoutClick = () => {
        setShowLogoutModal(true);
    };

    const handleLogoutConfirm = async () => {
        try {
            const token = localStorage.getItem('token') ||
                localStorage.getItem('authToken') ||
                localStorage.getItem('userToken') ||
                localStorage.getItem('access_token') ||
                sessionStorage.getItem('token') ||
                sessionStorage.getItem('authToken');

            if (token) {
                const response = await fetch('https://mock.apidog.com/m1/1053378-0-default/auth/v1/logout', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Authorization': `Bearer ${token}`
                    }
                });

                if (response.status === 204) {
                    console.log('Logout realizado com sucesso');
                } else if (response.status === 401) {
                    console.log('Token inválido ou expirado');
                } else {
                    try {
                        const errorData = await response.json();
                        console.error('Erro no logout:', errorData);
                    } catch {
                        console.error('Erro no logout - status:', response.status);
                    }
                }
            }

            clearAuthData();
            navigate('/login');

        } catch (error) {
            console.error('Erro durante logout:', error);
            clearAuthData();
            navigate('/login');
        } finally {
            setShowLogoutModal(false);
        }
    };

    const clearAuthData = () => {
        localStorage.removeItem('token');
        localStorage.removeItem('authToken');
        localStorage.removeItem('userToken');
        localStorage.removeItem('access_token');
        localStorage.removeItem('user');
        localStorage.removeItem('auth');
        localStorage.removeItem('userData');

        sessionStorage.removeItem('token');
        sessionStorage.removeItem('authToken');
        sessionStorage.removeItem('userToken');
        sessionStorage.removeItem('access_token');
        sessionStorage.removeItem('user');
        sessionStorage.removeItem('auth');
        sessionStorage.removeItem('userData');

        if (window.caches) {
            caches.keys().then(names => {
                names.forEach(name => {
                    if (name.includes('auth') || name.includes('api')) {
                        caches.delete(name);
                    }
                });
            });
        }
    };

    const handleLogoutCancel = () => {
        setShowLogoutModal(false);
    };

    const renderLink = (item) => {
        if (item.url && item.url.startsWith("/")) {
            return (
                <Link to={item.url} className="sidebar-link">
                    {item.icon && <i className={`bi bi-${item.icon}`}></i>}
                    <span>{item.name}</span>
                </Link>
            );
        }

        return (
            <a
                href={item.url}
                className="sidebar-link"
                target="_blank"
                rel="noreferrer"
            >
                {item.icon && <i className={`bi bi-${item.icon}`}></i>}
                <span>{item.name}</span>
            </a>
        );
    };

    return (
        <>
            {showLogoutModal && (
                <div className="modal-overlay" style={{
                    position: 'fixed',
                    top: 0,
                    left: 0,
                    right: 0,
                    bottom: 0,
                    backgroundColor: 'rgba(0, 0, 0, 0.5)',
                    display: 'flex',
                    justifyContent: 'center',
                    alignItems: 'center',
                    zIndex: 9999
                }}>
                    <div className="modal-content" style={{
                        backgroundColor: 'white',
                        padding: '2rem',
                        borderRadius: '8px',
                        boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
                        maxWidth: '400px',
                        width: '90%'
                    }}>
                        <h3 style={{ marginBottom: '1rem' }}>Confirmar Logout</h3>
                        <p style={{ marginBottom: '2rem' }}>Tem certeza que deseja encerrar a sessão?</p>
                        <div style={{ display: 'flex', gap: '1rem', justifyContent: 'flex-end' }}>
                            <button
                                onClick={handleLogoutCancel}
                                style={{
                                    padding: '0.5rem 1rem',
                                    border: '1px solid #ccc',
                                    borderRadius: '4px',
                                    backgroundColor: 'transparent',
                                    cursor: 'pointer'
                                }}
                            >
                                Cancelar
                            </button>
                            <button
                                onClick={handleLogoutConfirm}
                                style={{
                                    padding: '0.5rem 1rem',
                                    border: 'none',
                                    borderRadius: '4px',
                                    backgroundColor: '#dc3545',
                                    color: 'white',
                                    cursor: 'pointer'
                                }}
                            >
                                Sair
                            </button>
                        </div>
                    </div>
                </div>
            )}

            <div id="sidebar" className={isActive ? "active" : ""}>
                <div className="sidebar-wrapper active">
                    <div className="sidebar-header">
                        <div className="d-flex justify-content-between">
                            <div className="logo">
                                <Link to="/">
                                    <h1>MediConnect</h1>
                                </Link>
                            </div>
                            <div className="toggler">
                                <button
                                    type="button"
                                    className="sidebar-hide d-xl-none d-block btn"
                                    onClick={toggleSidebar}
                                >
                                    <i className="bi bi-x bi-middle"></i>
                                </button>
                            </div>
                        </div>
                    </div>

                    <div className="sidebar-menu">
                        <ul className="menu">
                            {menuItems && menuItems.map((item, index) => {
                                if (item.isTitle) {
                                    return (
                                        <li key={index} className="sidebar-title">
                                            {item.name}
                                        </li>
                                    );
                                }

                                if (item.submenu) {
                                    return (
                                        <li
                                            key={index}
                                            className={`sidebar-item has-sub ${openSubmenu === item.key ? "active" : ""
                                                }`}
                                        >
                                            <button
                                                type="button"
                                                className="sidebar-link btn"
                                                onClick={() => handleSubmenuClick(item.key)}
                                            >
                                                <i className={`bi bi-${item.icon}`}></i>
                                                <span>{item.name}</span>
                                            </button>
                                            <ul
                                                className={`submenu ${openSubmenu === item.key ? "active" : ""
                                                    }`}
                                            >
                                                {item.submenu.map((subItem, subIndex) => (
                                                    <li key={subIndex} className="submenu-item">
                                                        {renderLink(subItem)}
                                                    </li>
                                                ))}
                                            </ul>
                                        </li>
                                    );
                                }

                                return (
                                    <li key={index} className="sidebar-item">
                                        {renderLink(item)}
                                    </li>
                                );
                            })}

                            <li className="sidebar-item">
                                <button
                                    type="button"
                                    className="sidebar-link btn"
                                    onClick={handleLogoutClick}
                                >
                                    <i className="bi bi-box-arrow-right"></i>
                                    <span>Sair (Logout)</span>
                                </button>
                            </li>

                            <TrocardePerfis />
                        </ul>
                    </div>

                    <button className="sidebar-toggler btn x" onClick={toggleSidebar}>
                        <i data-feather="x"></i>
                    </button>
                </div>
            </div>
        </>
    );
}

export default Sidebar;