/**
 * Post Editor sidebar bootstrap
 */

import { registerPlugin } from '@wordpress/plugins';
import { __ } from '@wordpress/i18n';
import { PluginSidebar, PluginSidebarMoreMenuItem } from '@wordpress/edit-post';
import {
    PanelBody,
    SelectControl,
    TextControl,
    Flex,
    FlexItem,
    Icon,
    ExternalLink,
    Spinner,
    Notice,
    Modal,
    Button
} from '@wordpress/components';
import apiFetch from '@wordpress/api-fetch';
import { useMemo, useState, useCallback, useEffect } from '@wordpress/element';
import { select } from '@wordpress/data';
import { CirclePlus, SquarePen } from 'lucide-react';

const SIDEBAR_NAME = 'lmat-post-sidebar';

const getSettings = () => {
    // Provided by PHP in Abstract_Screen::enqueue via wp_add_inline_script
    try {
        // eslint-disable-next-line no-undef
        if ( typeof lmat_block_editor_plugin_settings !== 'undefined' ) {
            // eslint-disable-next-line no-undef
            return lmat_block_editor_plugin_settings;
        }
    } catch (e) {}
    if ( typeof window !== 'undefined' && window.lmat_block_editor_plugin_settings ) {
        return window.lmat_block_editor_plugin_settings;
    }
    return { lang: null, translations_table: {} };
};

const LanguageSection = ( { lang, allLanguages } ) => {
    const [updating, setUpdating] = useState(false);
    const [error, setError] = useState('');
    const [showConfirmDialog, setShowConfirmDialog] = useState(false);
    const [pendingLanguage, setPendingLanguage] = useState(null);
    const [selectValue, setSelectValue] = useState(lang?.slug || '');
    const postId = select('core/editor')?.getCurrentPostId?.();

    // Update selectValue when lang changes
    useEffect(() => {
        setSelectValue(lang?.slug || '');
    }, [lang?.slug]);

    const options = useMemo( () => {
        const list = [];
        if ( lang ) {
            list.push( { label: lang.name, value: lang.slug, flag_url: lang.flag_url } );
        }
        Object.values( allLanguages ).forEach( ( row ) => {
            // Only include languages that don't have an existing translation (no edit_link)
            // If edit_link exists, it means there's already a linked translation, so exclude it
            if ( ! row.links?.edit_link ) {
                list.push( { label: row.lang.name, value: row.lang.slug, flag_url: row.lang.flag_url } );
            }
        } );
        return list;
    }, [ lang, allLanguages ] );

    const updatePostLanguage = async ( langSlug ) => {
        try {
            setUpdating(true);
            setError('');
            
            const editorStore = select('core/editor');
            const currentPost = editorStore?.getCurrentPost?.();
            const postStatus = currentPost?.status;
            const isNewPost = !postId || postStatus === 'auto-draft';
            
            const response = await apiFetch({
                path: '/lmat/v1/languages/update-post-language',
                method: 'POST',
                data: {
                    post_id: postId,
                    lang: langSlug,
                },
            });
            
            // Verify the language was updated successfully
            if (response && response.success) {
                // Small delay to ensure database write completes
                await new Promise(resolve => setTimeout(resolve, 100));
                
                // Reload the page with appropriate language parameter
                const currentUrl = new URL(window.location.href);
                // Use new_lang for new posts, lang for existing posts
                if (isNewPost) {
                    currentUrl.searchParams.set('new_lang', langSlug);
                } else {
                    currentUrl.searchParams.set('lang', langSlug);
                }
                window.location.href = currentUrl.toString();
            } else {
                throw new Error(__( 'Language update did not succeed.', 'translate-words' ));
            }
        } catch ( e ) {
            setUpdating(false);
            setError( __( 'Failed to update language. Please try again.', 'translate-words' ) );
        }
    };

    const handleLanguageChange = async ( value ) => {
        // If selecting the current language, do nothing.
        if ( ! value || ( lang && value === lang.slug ) ) {
            setSelectValue( lang?.slug || '' );
            return;
        }

        // If there's an existing translation in that language, navigate to it
        const selected = allLanguages?.[ value ];
        if ( selected && selected.links?.edit_link ) {
            window.location.href = selected.links.edit_link;
            return;
        }

        // If no post ID (new post), navigate to add link if available
        if ( ! postId ) {
            if ( selected && selected.links?.add_link ) {
                window.location.href = selected.links.add_link;
            }
            return;
        }

        // Show confirmation dialog before updating
        setSelectValue( value ); // Update select to show the selected value
        setPendingLanguage( value );
        setShowConfirmDialog( true );
    };

    const handleConfirmLanguageChange = () => {
        setShowConfirmDialog( false );
        if ( pendingLanguage ) {
            updatePostLanguage( pendingLanguage );
        }
        setPendingLanguage( null );
    };

    const handleCancelLanguageChange = () => {
        setShowConfirmDialog( false );
        setPendingLanguage( null );
        // Reset the select control to the current language
        setSelectValue( lang?.slug || '' );
    };

    const getSelectedLanguageName = () => {
        if ( ! pendingLanguage ) return '';
        const selected = allLanguages?.[ pendingLanguage ];
        return selected ? selected.lang.name : '';
    };

    return (
        <>
            <PanelBody title={ __( 'Language', 'translate-words' ) } initialOpen >
                <Flex align="center">
                    <FlexItem>
                        { lang?.flag_url ? (
                            <img src={ lang.flag_url } alt={ lang?.name || '' } className="flag" style={ { marginRight: 8, width: 20, height: 14 } } />
                        ) : null }
                    </FlexItem>
                    <FlexItem style={ { flex: 1 } }>
                        <SelectControl
                            label={ undefined }
                            value={ selectValue }
                            onChange={ handleLanguageChange }
                            disabled={ updating || showConfirmDialog }
                            help={ updating ? __( 'Updating language...', 'translate-words' ) : undefined }
                            options={ options.map( ( opt ) => ( { label: opt.label, value: opt.value } ) ) }
                        />
                    </FlexItem>
                </Flex>
                { error ? (
                    <Notice status="error" isDismissible={ false }>
                        { error }
                    </Notice>
                ) : null }
            </PanelBody>
            { showConfirmDialog && (
                <Modal
                    title={ __( 'Change Language', 'translate-words' ) }
                    onRequestClose={ handleCancelLanguageChange }
                    isDismissible={ true }
                >
                    <p>
                        { __( 'Are you sure you want to change the language of this post to', 'translate-words' ) }
                        { ' ' }
                        <strong>{ getSelectedLanguageName() }</strong>?
                    </p>
                    <p>
                        { __( 'This will update the language of the current post. Any unsaved changes will be lost.', 'translate-words' ) }
                    </p>
                    <div style={ { display: 'flex', justifyContent: 'flex-end', gap: '8px', marginTop: '16px' } }>
                        <Button
                            variant="secondary"
                            onClick={ handleCancelLanguageChange }
                            disabled={ updating }
                        >
                            { __( 'Cancel', 'translate-words' ) }
                        </Button>
                        <Button
                            variant="primary"
                            onClick={ handleConfirmLanguageChange }
                            disabled={ updating }
                        >
                            { __( 'Change Language', 'translate-words' ) }
                        </Button>
                    </div>
                </Modal>
            ) }
        </>
    );
};

const TranslationRow = ( { row } ) => {
    const { lang, translated_post, links } = row;
    const initialTitle = translated_post?.title || '';
    const [title, setTitle] = useState(initialTitle);
    const [error, setError] = useState('');
    const [allPages, setAllPages] = useState([]);
    const [loadingPages, setLoadingPages] = useState(false);
    const [suggestions, setSuggestions] = useState([]);
    const [selectedSuggestion, setSelectedSuggestion] = useState(null);
    const [linking, setLinking] = useState(false);

    const editable = !initialTitle; // editable only if there is no value initially

    const hasEdit = !! links?.edit_link;
    const hasAdd = !! links?.add_link;

    const loadAllPages = useCallback(async () => {
        if (loadingPages || allPages.length > 0) return;
        // Only load pages if we have a language
        if (!lang?.slug) return;
        try {
            setLoadingPages(true);
            // Pass language parameter to get only pages in the same language
            const pages = await apiFetch({ 
                path: `/lmat/v1/languages/utils/get_all_pages_data?lang=${lang.slug}` 
            });
            setAllPages(Array.isArray(pages) ? pages : []);
        } catch (e) {
            // ignore
        } finally {
            setLoadingPages(false);
        }
    }, [loadingPages, allPages.length, lang?.slug]);

    const computeSuggestions = useCallback((query) => {
        const q = (query || '').trim().toLowerCase();
        if (!q) return [];
        // No need to check sameLang since server already filters by language
        return allPages.filter((p) => {
            const unlinked = !p?.is_linked;
            const matches = (p?.title || '').toLowerCase().includes(q) || (p?.slug || '').toLowerCase().includes(q);
            return unlinked && matches;
        }).slice(0, 10);
    }, [allPages]);

    const handleTitleChange = (val) => {
        setTitle(val);
        setSelectedSuggestion(null);
        if (editable) {
            if (val && val.trim().length > 1) {
                if (allPages.length === 0) {
                    loadAllPages().then(() => {
                        setSuggestions(computeSuggestions(val));
                    });
                } else {
                    setSuggestions(computeSuggestions(val));
                }
            } else {
                setSuggestions([]);
            }
        }
    };

    const linkSelected = async (e) => {
        e.preventDefault();
        if (!selectedSuggestion) return;
        try {
            setLinking(true);
            setError('');
            const postId = select('core/editor')?.getCurrentPostId?.();
            await apiFetch({
                path: '/lmat/v1/languages/link-translation',
                method: 'POST',
                data: {
                    source_id: postId,
                    target_id: selectedSuggestion.ID,
                    target_lang: lang?.slug,
                },
            });
            window.location.reload();
        } catch (e) {
            setError( __( 'Failed to link page. Please try again.', 'translate-words' ) );
        } finally {
            setLinking(false);
        }
    };

    const createFromTyped = async (e) => {
        e.preventDefault();
        const clean = (title || '').trim();
        if (!clean) {
            // Fallback: if no title, navigate to add page
            if (links?.add_link) {
                window.location.href = links.add_link;
            }
            return;
        }
        try {
            setLinking(true);
            setError('');
            const postId = select('core/editor')?.getCurrentPostId?.();
            const postType = select('core/editor')?.getCurrentPostType?.();
            await apiFetch({
                path: '/lmat/v1/languages/create-translation',
                method: 'POST',
                data: {
                    source_id: postId,
                    target_lang: lang?.slug,
                    title: clean,
                    post_type: postType || 'page',
                },
            });
            // Refresh to reflect new translation and show Edit icon
            window.location.reload();
        } catch (e) {
            setError( __( 'Failed to create page. Please try again.', 'translate-words' ) );
        } finally {
            setLinking(false);
        }
    };

    return (
        <div style={{ marginBottom: 12 }}>
            <Flex align="center" style={ { marginBottom: 8, alignItems: 'start' } }>
                <FlexItem style={{paddingTop:'14px'}}>
                    { lang?.flag_url ? (
                        <img src={ lang.flag_url } alt={ lang?.name || '' } style={ { width: 20, height: 14 } } />
                    ) : null }
                </FlexItem>
                <FlexItem style={ { flex: 1,padding:'0px' } }>
                    <TextControl
                        value={ title }
                        onChange={ handleTitleChange }
                        placeholder={ __( 'title', 'translate-words' ) }
                        readOnly={ !editable }
                        disabled={ !editable }
                        help={
                            editable
                                ? __( 'Type a title to search pages to link, or use + to create a translation.', 'translate-words' )
                                : __( 'Modify title via Edit.', 'translate-words' )
                        }
                    />
                </FlexItem>
                <FlexItem style={{paddingTop:'14px'}}>
                    { hasEdit ? (
                        <a href={ links.edit_link } aria-label={ __( 'Edit translation', 'translate-words' ) } style={ { marginLeft: 8,height: "100%",width: "100%",display: "flex",alignItems: "center",justifyContent: "center" } }>
                            <SquarePen size={20} />
                        </a>
                    ) : null }
                    { ! hasEdit && (
                        selectedSuggestion ? (
                            <button onClick={ linkSelected } aria-label={ __( 'Link existing page', 'translate-words' ) } style={ { marginLeft: 8, background: 'transparent', border: 0, padding: 0, cursor: 'pointer' } }>
                                <CirclePlus size={20} />
                            </button>
                        ) : (
                            hasAdd ? (
                                (title || '').trim().length > 0 ? (
                                    <button onClick={ createFromTyped } aria-label={ __( 'Create translation from typed title', 'translate-words' ) } style={ { marginLeft: 8, background: 'transparent', border: 0, padding: 0, cursor: 'pointer' } }>
                                        <CirclePlus size={20} />
                                    </button>
                                ) : (
                                    <a href={ links.add_link } aria-label={ __( 'Add translation', 'translate-words' ) } style={ { marginLeft: 8,height: "100%",width: "100%",display: "flex",alignItems: "center",justifyContent: "center" } }>
                                        <CirclePlus size={20} />
                                    </a>
                                )
                            ) : null
                        )
                    ) }
                    { loadingPages || linking ? <Spinner style={{ marginLeft: 8 }} /> : null }
                </FlexItem>
            </Flex>
            { editable && suggestions.length > 0 ? (
                <div style={{ marginTop: 4 }}>
                    { suggestions.map((s) => (
                        <div key={ s.ID } style={{ padding: '4px 6px', cursor: 'pointer', background: selectedSuggestion?.ID === s.ID ? '#eef' : 'transparent' }}
                            onClick={() => setSelectedSuggestion(s)}
                            onMouseEnter={() => setSelectedSuggestion(s)}
                        >
                            { s.title } ({ s.slug })
                        </div>
                    )) }
                </div>
            ) : null }
            { error ? (
                <Notice status="error" isDismissible={ false }>
                    { error }
                </Notice>
            ) : null }
        </div>
    );
};

const TranslationsSection = ( { translations } ) => {
    const rows = Object.values( translations );
    return (
        <PanelBody title={ __( 'Translations', 'translate-words' ) } initialOpen >
            { rows.map( ( row ) => (
                <TranslationRow key={ row.lang.slug } row={ row } />
            ) ) }
        </PanelBody>
    );
};

const Sidebar = () => {
    const settings = getSettings();
    const lang = settings?.lang || null;
    const translations = settings?.translations_table || {};

    return (
        <>
            <PluginSidebarMoreMenuItem target={ SIDEBAR_NAME }>
                { __( 'Linguator', 'translate-words' ) }
            </PluginSidebarMoreMenuItem>
            <PluginSidebar name={ SIDEBAR_NAME } title={ __( 'Linguator', 'translate-words' ) }>
                <LanguageSection lang={ lang } allLanguages={ translations } />
                <TranslationsSection translations={ translations } />
            </PluginSidebar>
        </>
    );
};

// Compute a dynamic icon element for the flag pin
const FlagIcon = (() => {
    const settings = getSettings();
    const lang = settings?.lang || null;
    if ( lang?.flag_url ) {
        return <img src={ lang.flag_url } alt={ lang?.name || '' } style={{ width: 16, height: 11 }} />;
    }
    return <svg width="16" height="11" viewBox="0 0 16 11"><rect width="16" height="11" fill="#ddd"/></svg>;
})();

registerPlugin( SIDEBAR_NAME, { render: Sidebar, icon: FlagIcon } );


// Auto-open sidebar logic using editor ready event
const { subscribe } = wp.data;

// Check for lang parameter and auto-open sidebar
const params = new URLSearchParams(window.location.search);
const hasLangParam = params.has('lang') || params.has('new_lang');

if (hasLangParam) {
    let unsubscribe = null;
    let attempts = 0;
    const maxAttempts = 50;
    let sidebarOpened = false;
    
    const tryOpenSidebar = () => {
        attempts++;
        
        if (sidebarOpened) {
            return true;
        }
        
        try {
            const editPostStore = wp.data.select('core/edit-post');
            const editPostDispatch = wp.data.dispatch('core/edit-post');
            
            if (!editPostStore || !editPostDispatch) {
                return false;
            }
            
            // Try modern interface store if edit-post doesn't work
            const interfaceStore = wp.data.select('core/interface');
            const interfaceDispatch = wp.data.dispatch('core/interface');
            
            const target = `plugin-sidebar/${SIDEBAR_NAME}`;
            
            // Try multiple approaches to open the sidebar
            let openSuccess = false;
            
            // Method 1: Standard openGeneralSidebar
            if (typeof editPostDispatch.openGeneralSidebar === 'function') {
                try {
                    // Close any existing sidebar first
                    if (typeof editPostDispatch.closeGeneralSidebar === 'function') {
                        editPostDispatch.closeGeneralSidebar();
                    }
                    
                    // Close inserter if open
                    if (typeof editPostDispatch.setIsInserterOpened === 'function') {
                        editPostDispatch.setIsInserterOpened(false);
                    }
                    
                    editPostDispatch.openGeneralSidebar(target);
                    openSuccess = true;
                } catch (e) {
                    // Silent error handling
                }
            }
            
            // Method 2: Try interface store approach
            if (!openSuccess && interfaceDispatch && typeof interfaceDispatch.enableComplementaryArea === 'function') {
                try {
                    // First ensure the sidebar is enabled at the interface level
                    if (typeof interfaceDispatch.enableComplementaryArea === 'function') {
                        interfaceDispatch.enableComplementaryArea('core/edit-post', target);
                    }
                    
                    // Also try to set the pinned state if available
                    if (typeof interfaceDispatch.pinItem === 'function') {
                        interfaceDispatch.pinItem('core/edit-post', target);
                    }
                    
                    openSuccess = true;
                } catch (e) {
                    // Silent error handling
                }
            }
            
            // Method 2.5: Try to ensure the sidebar panel itself is open
            if (interfaceDispatch) {
                try {
                    // Try to enable the complementary area first
                    if (typeof interfaceDispatch.setDefaultComplementaryArea === 'function') {
                        interfaceDispatch.setDefaultComplementaryArea('core/edit-post', target);
                    }
                    
                    // Try to set the sidebar as active
                    if (typeof interfaceDispatch.setActiveComplementaryArea === 'function') {
                        interfaceDispatch.setActiveComplementaryArea('core/edit-post', target);
                    }
                } catch (e) {
                    // Silent error handling
                }
            }
            
            // Method 3: Try direct edit-post enableComplementaryArea
            if (!openSuccess && typeof editPostDispatch.enableComplementaryArea === 'function') {
                try {
                    editPostDispatch.enableComplementaryArea('core/edit-post', target);
                    openSuccess = true;
                } catch (e) {
                    // Silent error handling
                }
            }
            
            if (openSuccess) {
                // Verify if it worked after a delay
                setTimeout(() => {
                    let currentSidebar = null;
                    
                    // Check multiple ways to see if sidebar is open
                    if (editPostStore.getActiveComplementaryArea) {
                        currentSidebar = editPostStore.getActiveComplementaryArea('core/edit-post');
                    }
                    
                    if (!currentSidebar && interfaceStore && interfaceStore.getActiveComplementaryArea) {
                        currentSidebar = interfaceStore.getActiveComplementaryArea('core/edit-post');
                    }
                    
                    if (currentSidebar === target) {
                        // Even though API says it's open, let's ensure the visual sidebar is actually visible
                        setTimeout(() => {
                            // Check if sidebar panel is actually visible
                            const sidebarPanel = document.querySelector('.interface-complementary-area, .edit-post-sidebar, .components-panel');
                            const sidebarContainer = document.querySelector('.interface-interface-skeleton__sidebar, .edit-post-layout__sidebar');
                            
                            if (sidebarPanel) {
                                const isVisible = sidebarPanel.offsetParent !== null && !sidebarPanel.hidden;
                                
                                if (!isVisible) {
                                    // Force sidebar panel visibility
                                    sidebarPanel.style.display = 'block';
                                    sidebarPanel.style.visibility = 'visible';
                                    sidebarPanel.style.opacity = '1';
                                    sidebarPanel.hidden = false;
                                    
                                    if (sidebarContainer) {
                                        sidebarContainer.style.display = 'block';
                                        sidebarContainer.style.visibility = 'visible';
                                        sidebarContainer.style.width = '280px';
                                    }
                                }
                            }
                            
                            // Also try to click the sidebar toggle button if sidebar is still not visible
                            setTimeout(() => {
                                const sidebarToggle = document.querySelector('button[aria-label*="Settings"], .edit-post-header__settings button, button[data-label*="Settings"]');
                                const sidebarStillHidden = !document.querySelector('.interface-complementary-area:not([hidden])');
                                
                                if (sidebarToggle && sidebarStillHidden) {
                                    sidebarToggle.click();
                                    
                                    // Then try to click our specific sidebar tab
                                    setTimeout(() => {
                                        const linguatorTab = document.querySelector('button[aria-label*="Linguator"], .components-button[aria-label*="Linguator"]');
                                        if (linguatorTab) {
                                            linguatorTab.click();
                                        }
                                    }, 300);
                                }
                            }, 200);
                        }, 100);
                        
                        sidebarOpened = true;
                        if (unsubscribe) {
                            unsubscribe();
                            unsubscribe = null;
                        }
                    } else {
                        // Try DOM-based verification
                        const sidebarElement = document.querySelector(`[data-sidebar="${SIDEBAR_NAME}"], .${SIDEBAR_NAME}`);
                        if (sidebarElement && sidebarElement.offsetParent !== null) {
                            sidebarOpened = true;
                            if (unsubscribe) {
                                unsubscribe();
                                unsubscribe = null;
                            }
                        }
                    }
                }, 500);
                
                return sidebarOpened;
            } else {
                // As a last resort, try to find and click the sidebar button in DOM
                setTimeout(() => {
                    const sidebarButton = document.querySelector(`button[aria-label*="Linguator"], button[data-label*="Linguator"], [data-sidebar="${SIDEBAR_NAME}"]`);
                    if (sidebarButton) {
                        sidebarButton.click();
                        
                        // Check if it worked
                        setTimeout(() => {
                            const sidebarElement = document.querySelector('.interface-complementary-area');
                            const isVisible = sidebarElement && sidebarElement.offsetParent !== null;
                            
                            if (isVisible) {
                                sidebarOpened = true;
                                if (unsubscribe) {
                                    unsubscribe();
                                    unsubscribe = null;
                                }
                            }
                        }, 300);
                    }
                }, 500);
            }
        } catch (e) {
            // Silent error handling
        }
        
        if (attempts >= maxAttempts) {
            if (unsubscribe) {
                unsubscribe();
                unsubscribe = null;
            }
        }
        
        return false;
    };
    
    // Wait for editor to be ready before trying
    const waitForEditor = () => {
        // Try immediately first
        if (tryOpenSidebar()) {
            return;
        }
        
        // If immediate attempt fails, subscribe to store changes
        unsubscribe = subscribe(() => {
            if (!sidebarOpened && attempts < maxAttempts) {
                tryOpenSidebar();
            }
        });
        
        // Also try with regular intervals as a fallback
        const intervalAttempts = setInterval(() => {
            if (sidebarOpened || attempts >= maxAttempts) {
                clearInterval(intervalAttempts);
                return;
            }
            
            tryOpenSidebar();
        }, 1000); // Try every second
        
        // Cleanup after maximum time
        setTimeout(() => {
            if (intervalAttempts) {
                clearInterval(intervalAttempts);
            }
            if (unsubscribe) {
                unsubscribe();
                unsubscribe = null;
            }
            // Cleanup completed
        }, 30000); // Give up after 30 seconds
    };
    
    // Start the process after a small delay to ensure everything is loaded
    setTimeout(waitForEditor, 500);
}