import * as React from 'react';
import FeedbackBox from './feedback-box';
import NewNoteModal from '@src/components/modals/new-note-modal';
import Recommendations from './recommendations';
import Search from '@src/components/modals/search';
import SearchInput from '../header/search-input';
import SidebarMenuLink from './sidebar-menu-link';
import {Button, Dialog, DialogContent, DialogTrigger} from '@tryghost/shade/components';
import {LucideIcon} from '@tryghost/shade/utils';
import {useAppBasePath} from '@src/hooks/use-app-base-path';
import {useCurrentUser} from '@tryghost/admin-x-framework/api/current-user';
import {useFeatureFlags} from '@src/lib/feature-flags';
import {useLocation} from '@tryghost/admin-x-framework';
import {useNotificationsCountForUser, useResetNotificationsCountForUser, useTopicsForUser} from '@src/hooks/use-activity-pub-queries';

interface SidebarProps {
    isMobileSidebarOpen: boolean;
    onCloseMobileSidebar: () => void;
}

const Sidebar: React.FC<SidebarProps> = ({isMobileSidebarOpen}) => {
    const {allFlags, flags} = useFeatureFlags();
    const [isSearchOpen, setIsSearchOpen] = React.useState(false);
    const [searchQuery, setSearchQuery] = React.useState('');
    const {data: currentUser} = useCurrentUser();
    const location = useLocation();
    const basePath = useAppBasePath();
    const {data: notificationsCount} = useNotificationsCountForUser(currentUser?.slug || '');
    const resetNotificationsCount = useResetNotificationsCountForUser(currentUser?.slug || '');
    const {topicsQuery} = useTopicsForUser();
    const {data: topicsData, isLoading} = topicsQuery;
    const showExternalExplore = !isLoading && topicsData && topicsData.topics.length === 0;

    // Reset count when on notifications page
    React.useEffect(() => {
        if (location.pathname === `${basePath}/notifications` && notificationsCount && notificationsCount > 0) {
            resetNotificationsCount.mutate();
        }
    }, [location.pathname, basePath, notificationsCount, resetNotificationsCount]);

    const handleNotificationsClick = React.useCallback(() => {
        if (notificationsCount && notificationsCount > 0) {
            resetNotificationsCount.mutate();
        }
    }, [notificationsCount, resetNotificationsCount]);

    return (
        <div className={`sticky top-0 flex min-h-screen w-[320px] flex-col border-l border-gray-200 pr-8 transition-transform duration-300 ease-in-out max-lg:fixed max-lg:inset-y-0 max-lg:right-0 max-lg:z-50 max-lg:border-0 max-lg:bg-white max-lg:shadow-xl max-md:bottom-[72px] max-md:min-h-[auto] max-md:overflow-y-scroll dark:border-gray-950 max-lg:dark:bg-black ${
            isMobileSidebarOpen ? 'max-lg:translate-x-0' : 'max-lg:translate-x-full'
        }`}>
            <div className='flex grow flex-col justify-between'>
                <div className='isolate flex w-full flex-col items-start gap-6 pt-6 pl-6'>
                    <div className='flex h-[52px] w-full items-center'>
                        <Dialog open={isSearchOpen} onOpenChange={setIsSearchOpen}>
                            <DialogTrigger className='mt-0.5 w-full'>
                                <SearchInput />
                            </DialogTrigger>
                            <DialogContent className='flex h-full max-h-[452px] flex-col overflow-y-auto pb-0'>
                                <Search query={searchQuery} setQuery={setSearchQuery} onOpenChange={setIsSearchOpen} />
                            </DialogContent>
                        </Dialog>
                    </div>
                    <div className='flex w-full flex-col gap-px'>
                        <SidebarMenuLink to='/reader'>
                            <LucideIcon.BookOpen size={18} strokeWidth={1.5} />
                            Reader
                        </SidebarMenuLink>
                        <SidebarMenuLink to='/notes'>
                            <LucideIcon.MessageCircle size={18} strokeWidth={1.5} />
                            Notes
                        </SidebarMenuLink>
                        <SidebarMenuLink
                            count={location.pathname !== `${basePath}/notifications` ? notificationsCount : undefined}
                            to='/notifications'
                            onClick={handleNotificationsClick}
                        >
                            <LucideIcon.Bell size={18} strokeWidth={1.5} />
                            Notifications
                        </SidebarMenuLink>
                        {showExternalExplore ? (
                            <Button
                                className='inline-flex w-full items-center gap-2 rounded-sm px-3 py-2.5 text-left text-md font-medium text-gray-800 transition-colors hover:bg-gray-100 dark:text-gray-500 dark:hover:bg-gray-925/70'
                                variant='ghost'
                                asChild
                            >
                                <a href="https://explore.ghost.org/social-web" rel="noopener noreferrer" target="_blank">
                                    <LucideIcon.Globe size={18} strokeWidth={1.5} />
                                    Explore
                                    <LucideIcon.ExternalLink className='ml-auto' size={14} strokeWidth={1.5} />
                                </a>
                            </Button>
                        ) : (
                            <SidebarMenuLink to='/explore'>
                                <LucideIcon.Globe size={18} strokeWidth={1.5} />
                                Explore
                            </SidebarMenuLink>
                        )}
                        <SidebarMenuLink to='/profile'>
                            <LucideIcon.User size={18} strokeWidth={1.5} />
                            Profile
                        </SidebarMenuLink>
                        <SidebarMenuLink to='/preferences'>
                            <LucideIcon.Settings2 size={18} strokeWidth={1.5} />
                            Preferences
                        </SidebarMenuLink>
                    </div>
                    <NewNoteModal>
                        <Button className='h-9 rounded-full bg-purple-500 px-3 text-md text-white hover:bg-purple-600 dark:hover:bg-purple-600'>
                            <LucideIcon.FilePen />
                            New note
                        </Button>
                    </NewNoteModal>

                    <Recommendations />

                    {allFlags.map((flag) => {
                        if (flags[flag]) {
                            return (
                                <div key={flag} className="flex items-center justify-between gap-1 pl-3 opacity-50">
                                    <span className="font-mono text-xs">{flag}</span>
                                    <span className='inline-flex items-center rounded bg-green-100 px-1 py-0.5 text-xs font-medium text-green-800'>
                                            ON
                                    </span>
                                </div>
                            );
                        }
                        return (<></>);
                    })}
                </div>
                <div className='sticky bottom-0 flex items-center gap-2 bg-white pb-4 pl-4 dark:bg-black'>
                    <FeedbackBox />
                </div>
            </div>
        </div>
    );
};

Sidebar.displayName = 'Sidebar';

export default Sidebar;
