import React from 'react';
import { Link } from '@inertiajs/react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { 
    faChartLine, 
    faCogs, 
    faUsers, 
    faUniversity, 
    faChevronDown, 
    faUserCircle, 
    faSignOutAlt, 
    faTimes, 
    faBars 
} from '@fortawesome/free-solid-svg-icons';

// ================================================================
// ASUMSI: APPLICATION LOGO
// ================================================================
const ApplicationLogo = (props) => {
    return (
        <svg 
            {...props} 
            xmlns="http://www.w3.org/2000/svg" 
            viewBox="0 0 24 24" 
            fill="currentColor"
        >
            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 15h2v-6h-2v6zm0-8h2V7h-2v2z"/>
        </svg>
    );
};

// ================================================================
// ASUMSI: SIDEBAR LINK
// ================================================================
const SidebarLink = ({ href, active, icon, children }) => {
    const defaultClasses = 'flex items-center space-x-3 w-full py-2 px-4 text-sm font-medium rounded-lg transition duration-150 ease-in-out';
    const activeClasses = 'bg-indigo-700 text-white shadow-md';
    const inactiveClasses = 'text-indigo-200 hover:bg-indigo-800 hover:text-white';
    
    // Fallback URL jika route() tidak tersedia
    const url = typeof route === 'function' ? route(href) : `/${href.replace(/\./g, '/')}`;

    return (
        <Link 
            href={url} 
            className={`${defaultClasses} ${active ? activeClasses : inactiveClasses}`}
        >
            {icon && <FontAwesomeIcon icon={icon} fixedWidth />}
            <span>{children}</span>
        </Link>
    );
};

// ================================================================
// ASUMSI: DROPDOWN & DROPDOWN.LINK
// ================================================================
// Ini adalah implementasi minimal untuk meniru struktur Dropdown Inertia/Laravel Breeze
const Dropdown = ({ children }) => {
    const [open, setOpen] = React.useState(false);
    
    // Mencari Trigger dan Content dari children
    const trigger = children.find(child => child.type === Dropdown.Trigger);
    const content = children.find(child => child.type === Dropdown.Content);
    
    const onTriggerClick = (e) => {
        // Mencegah navigasi Link Inertia jika yang diklik adalah tombol Dropdown
        e.preventDefault(); 
        setOpen(!open);
    };

    const onContentClick = () => {
        setOpen(false);
    };

    return (
        <div className="relative">
            {/* Trigger Clone (ditambahkan onClick) */}
            {trigger && React.cloneElement(trigger, { onClick: onTriggerClick })}

            {/* Content */}
            {open && (
                <div 
                    className="absolute z-50 mt-2 w-48 rounded-xl shadow-lg ring-1 ring-black ring-opacity-5 bg-white right-0 origin-top-right animate-fade-in"
                    onClick={onContentClick}
                >
                    <div className="py-1">
                        {content.props.children}
                    </div>
                </div>
            )}
        </div>
    );
};

Dropdown.Trigger = ({ children, onClick }) => (
    <div onClick={onClick} className="cursor-pointer">
        {children}
    </div>
);

Dropdown.Content = ({ children }) => <>{children}</>;

Dropdown.Link = ({ href, method = 'get', as = 'a', children, className = '' }) => {
    const baseClasses = "block w-full px-4 py-2 text-left text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out";
    
    return (
        <Link 
            href={href} 
            method={method} 
            as={as} 
            className={`${baseClasses} ${className}`}
        >
            {children}
        </Link>
    );
};

const customStyles = `
    .animate-fade-in {
        animation: fadeIn 0.15s ease-out;
    }
    @keyframes fadeIn {
        from { opacity: 0; transform: scale(0.95); }
        to { opacity: 1; transform: scale(1); }
    }
`;

// Export semua yang dibutuhkan oleh AuthenticatedLayout
export {
    FontAwesomeIcon, 
    ApplicationLogo, 
    Dropdown, 
    SidebarLink, 
    faChartLine, 
    faCogs, 
    faUsers, 
    faUniversity, 
    faChevronDown, 
    faUserCircle, 
    faSignOutAlt, 
    faTimes, 
    faBars, 
    customStyles 
};
