<?php
/**
 * Menu synchronization admin page.
 *
 * @var array $data Data passed from the controller.
 *
 * @package WPR_Translate
 */

if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

// Normalize view data for the template.
$default_menus         = isset( $data['default_menus'] ) && is_array( $data['default_menus'] ) ? $data['default_menus'] : array();
$other_menus           = isset( $data['other_menus'] ) && is_array( $data['other_menus'] ) ? $data['other_menus'] : array();
$selected_default_menu = isset( $data['selected_default_menu'] ) ? (int) $data['selected_default_menu'] : 0;
$selected_other_menu   = isset( $data['selected_other_menu'] ) ? (int) $data['selected_other_menu'] : 0;
$default_menu_items    = isset( $data['default_menu_items'] ) && is_array( $data['default_menu_items'] ) ? $data['default_menu_items'] : array();
$other_menu_items      = isset( $data['other_menu_items'] ) && is_array( $data['other_menu_items'] ) ? $data['other_menu_items'] : array();
$page_slug             = isset( $data['page_slug'] ) ? sanitize_key( $data['page_slug'] ) : 'wpr-translate-menu-sync';
$action_url            = admin_url( 'admin.php' );
$default_select_id     = 'wpr-menu-sync-default';
$other_select_id       = 'wpr-menu-sync-other';
$fallback_link         = isset( $data['fallback_link'] ) ? $data['fallback_link'] : '';
$can_sync              = ( $selected_default_menu > 0 && $selected_other_menu > 0 );
?>
<div class="wrap wpr-translate-admin">
    <h1><?php esc_html_e( 'Menu synchronization', 'wpr-translate' ); ?></h1>
    <?php settings_errors( 'wpr_menu_sync' ); ?>

    <div class="wpr-card wpr-menu-sync-card">
        <h2 class="wpr-menu-sync-heading"><?php esc_html_e( 'Menu Synchronization', 'wpr-translate' ); ?></h2>
        <p class="description wpr-menu-sync-description"><?php esc_html_e( 'Select the source-language menu and its translated counterpart, then run synchronization to copy structure and keep links aligned. Missing translated items will use the fallback link if provided.', 'wpr-translate' ); ?></p>
        <div class="wpr-menu-sync__note">
            <?php esc_html_e( 'Menu synchronization copies structure and links only. It uses translated post or term titles when those translations already exist. Custom links keep the original label, and missing translations keep the source title. Create translations first, then sync the menu.', 'wpr-translate' ); ?>
        </div>
        <div class="wpr-menu-sync__columns">
            <div class="wpr-menu-sync__column">
                <div class="wpr-menu-sync__title"><?php esc_html_e( 'Source Language Menu', 'wpr-translate' ); ?></div>
                <div class="wpr-menu-sync__control">
                    <div class="wpr-menu-sync__field">
                        <form method="get" action="<?php echo esc_url( $action_url ); ?>">
                            <input type="hidden" name="page" value="<?php echo esc_attr( $page_slug ); ?>" />
                            <?php if ( $selected_other_menu > 0 ) : ?>
                                <input type="hidden" name="other_menu" value="<?php echo esc_attr( $selected_other_menu ); ?>" />
                            <?php endif; ?>
                            <div class="wpr-menu-sync__select">
                                <select name="default_menu" id="<?php echo esc_attr( $default_select_id ); ?>" onchange="this.form.submit();">
                                    <option value=""><?php esc_html_e( 'Select a menu', 'wpr-translate' ); ?></option>
                                    <?php foreach ( $default_menus as $menu ) :
                                        $menu_id   = isset( $menu['id'] ) ? (int) $menu['id'] : 0;
                                        $menu_name = isset( $menu['name'] ) ? $menu['name'] : '';
                                        ?>
                                        <option value="<?php echo esc_attr( $menu_id ); ?>" <?php selected( $selected_default_menu, $menu_id ); ?>>
                                            <?php echo esc_html( $menu_name ); ?>
                                        </option>
                                    <?php endforeach; ?>
                                </select>
                            </div>
                        </form>
                    </div>
                </div>
                <?php if ( empty( $default_menus ) ) : ?>
                    <div class="wpr-menu-sync__notice"><?php esc_html_e( 'No default language menus found.', 'wpr-translate' ); ?></div>
                <?php endif; ?>
                <div class="wpr-menu-sync__preview">
                    <div class="wpr-menu-sync__subtitle"><?php esc_html_e( 'Menu structure', 'wpr-translate' ); ?></div>
                    <?php if ( empty( $default_menu_items ) ) : ?>
                        <div class="wpr-menu-sync__empty"><?php esc_html_e( 'Select a menu to preview its items.', 'wpr-translate' ); ?></div>
                    <?php else : ?>
                        <div class="wpr-menu-sync__menu-items">
                            <?php foreach ( $default_menu_items as $item ) :
                                $item_title = isset( $item['title'] ) ? $item['title'] : '';
                                $item_url   = isset( $item['url'] ) ? $item['url'] : '';
                                $depth       = isset( $item['depth'] ) ? max( 0, (int) $item['depth'] ) : 0;
                                $depth_class = 'wpr-menu-sync__menu-item-depth-' . min( 10, $depth );
                                ?>
                                <div class="wpr-menu-sync__menu-item <?php echo esc_attr( $depth_class ); ?>">
                                    <div class="wpr-menu-sync__menu-item-title"><?php echo esc_html( $item_title ); ?></div>
                                    <?php if ( '' !== $item_url ) : ?>
                                        <div class="wpr-menu-sync__menu-item-url"><?php echo esc_html( $item_url ); ?></div>
                                    <?php endif; ?>
                                </div>
                            <?php endforeach; ?>
                        </div>
                    <?php endif; ?>
                </div>
            </div>
            <div class="wpr-menu-sync__column">
                <div class="wpr-menu-sync__title"><?php esc_html_e( 'Translated Menus', 'wpr-translate' ); ?></div>
                <div class="wpr-menu-sync__control">
                    <div class="wpr-menu-sync__field">
                        <form method="get" action="<?php echo esc_url( $action_url ); ?>">
                            <input type="hidden" name="page" value="<?php echo esc_attr( $page_slug ); ?>" />
                            <?php if ( $selected_default_menu > 0 ) : ?>
                                <input type="hidden" name="default_menu" value="<?php echo esc_attr( $selected_default_menu ); ?>" />
                            <?php endif; ?>
                            <div class="wpr-menu-sync__select">
                                <select name="other_menu" id="<?php echo esc_attr( $other_select_id ); ?>" onchange="this.form.submit();">
                                    <option value=""><?php esc_html_e( 'Select a menu', 'wpr-translate' ); ?></option>
                                    <?php foreach ( $other_menus as $menu ) :
                                        $menu_id   = isset( $menu['id'] ) ? (int) $menu['id'] : 0;
                                        $menu_name = isset( $menu['name'] ) ? $menu['name'] : '';
                                        ?>
                                        <option value="<?php echo esc_attr( $menu_id ); ?>" <?php selected( $selected_other_menu, $menu_id ); ?>>
                                            <?php echo esc_html( $menu_name ); ?>
                                        </option>
                                    <?php endforeach; ?>
                                </select>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="wpr-menu-sync__preview">
                    <div class="wpr-menu-sync__subtitle"><?php esc_html_e( 'Menu structure', 'wpr-translate' ); ?></div>
                    <?php if ( empty( $other_menu_items ) ) : ?>
                        <div class="wpr-menu-sync__empty"><?php esc_html_e( 'Select a menu to preview its items.', 'wpr-translate' ); ?></div>
                    <?php else : ?>
                        <div class="wpr-menu-sync__menu-items">
                            <?php foreach ( $other_menu_items as $item ) :
                                $item_title = isset( $item['title'] ) ? $item['title'] : '';
                                $item_url   = isset( $item['url'] ) ? $item['url'] : '';
                                $depth       = isset( $item['depth'] ) ? max( 0, (int) $item['depth'] ) : 0;
                                $depth_class = 'wpr-menu-sync__menu-item-depth-' . min( 10, $depth );
                                ?>
                                <div class="wpr-menu-sync__menu-item <?php echo esc_attr( $depth_class ); ?>">
                                    <div class="wpr-menu-sync__menu-item-title"><?php echo esc_html( $item_title ); ?></div>
                                    <?php if ( '' !== $item_url ) : ?>
                                        <div class="wpr-menu-sync__menu-item-url"><?php echo esc_html( $item_url ); ?></div>
                                    <?php endif; ?>
                                </div>
                            <?php endforeach; ?>
                        </div>
                    <?php endif; ?>
                </div>
                <div class="wpr-menu-sync__actions">
                    <form method="post" action="<?php echo esc_url( $action_url ); ?>" class="wpr-menu-sync__form">
                        <input type="hidden" name="page" value="<?php echo esc_attr( $page_slug ); ?>" />
                        <input type="hidden" name="default_menu" value="<?php echo esc_attr( $selected_default_menu ); ?>" />
                        <input type="hidden" name="other_menu" value="<?php echo esc_attr( $selected_other_menu ); ?>" />
                        <input type="hidden" name="wpr_menu_sync_action" value="sync" />
                        <?php wp_nonce_field( 'wpr_menu_sync', 'wpr_menu_sync_nonce' ); ?>
                        <div class="wpr-menu-sync__control">
                            <div class="wpr-menu-sync__label"><?php esc_html_e( 'Fallback link', 'wpr-translate' ); ?></div>
                            <div class="wpr-menu-sync__help"><?php esc_html_e( 'If the page link from source menu is not translated we will use this fallback link.', 'wpr-translate' ); ?></div>
                            <div class="wpr-menu-sync__field">
                                <input type="text" name="wpr_menu_sync_fallback" value="<?php echo esc_attr( $fallback_link ); ?>" class="regular-text" placeholder="<?php esc_attr_e( 'https://example.com', 'wpr-translate' ); ?>" />
                            </div>
                        </div>
                        <button type="submit" class="button button-primary" <?php disabled( ! $can_sync ); ?>>
                            <?php esc_html_e( 'Menu synchronization', 'wpr-translate' ); ?>
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .wpr-menu-sync-card {
        margin-top: 24px;
    }
    .wpr-menu-sync__columns {
        display: flex;
        flex-wrap: wrap;
        gap: 24px;
    }
    .wpr-menu-sync__column {
        flex: 1 1 320px;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }
    .wpr-menu-sync__title {
        font-size: 18px;
        font-weight: 600;
    }
    .wpr-menu-sync__control {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .wpr-menu-sync__field {
        display: flex;
    }
    .wpr-menu-sync__form {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }
    .wpr-menu-sync__select select {
        min-width: 240px;
        padding: 8px;
    }
    .wpr-menu-sync__preview {
        border: 1px solid #dcdcde;
        border-radius: 4px;
        padding: 16px;
        display: flex;
        flex-direction: column;
        gap: 12px;
        background: #f6f7f7;
    }
    .wpr-menu-sync__subtitle {
        font-weight: 600;
    }
    .wpr-menu-sync__menu-items {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .wpr-menu-sync__menu-item {
        border-left: 2px solid #0073aa;
        padding-left: 12px;
    }
    .wpr-menu-sync__menu-item-title {
        font-weight: 500;
    }
    .wpr-menu-sync__menu-item-url {
        font-size: 12px;
        color: #50575e;
        word-break: break-word;
    }
    .wpr-menu-sync__actions {
        display: flex;
        justify-content: flex-start;
    }
    .wpr-menu-sync__help {
        font-size: 12px;
        color: #50575e;
    }
    .wpr-menu-sync__note {
        background: #f6f7f7;
        border-left: 4px solid #2271b1;
        padding: 12px 16px;
        border-radius: 4px;
        color: #1d2327;
    }
    .wpr-menu-sync__notice {
        background: #fef6e7;
        border-left: 4px solid #ffba00;
        padding: 12px 16px;
        border-radius: 4px;
        color: #6d5c00;
    }
    .wpr-menu-sync__empty {
        color: #50575e;
    }
</style>
