<?php if ( ! defined( 'ABSPATH' ) ) exit; ?>
<div class="max-w-5xl mx-auto p-4 pt-4">
    <?php \RistrettoApps\Spawnster\Helpers\ComponentView::render('components/stepper', ['doneSteps' => [1,2,3]]) ?>
    <div class="w-full">
        <div class="flex items-center justify-center gap-3 mb-2">
            <img src="<?php echo esc_url(\RistrettoApps\Spawnster\Base\Constants::logo()); ?>" alt="Spawnster Logo" class="w-12 h-12">
            <span class="block text-sm font-medium tracking-widest text-center uppercase dark:text-violet-600 pt-5">SPAWNSTER</span>
        </div>
        <h2 class="text-3xl font-bold text-center dark:text-gray-900 pt-5">Your page content is ready!</h2>
        <div class="zw-base-normal text-sm text-app-body-text-2 mt-3 text-gray-500 text-center pb-10">Generated pages with contents are ready to published. Fine tune them here as needed!</div>
    </div>

    <?php \RistrettoApps\Spawnster\Helpers\ComponentView::render('components/confirm_modal', []) ?>
    <?php \RistrettoApps\Spawnster\Helpers\ComponentView::render('components/pages_created_modal', []) ?>

    <div class="flex w-full">
        <div class="tab-group flex w-full" data-dui-orientation="vertical">
            <div role="tablist" class="relative bg-stone-100 rounded-lg flex flex-col p-1 w-1/4">
                <?php wp_nonce_field( 'spawnster-nonce' ); ?>
                <div class="absolute top-0 left-0 right-0 mx-1 w-auto bg-white rounded-md shadow-sm transition-all duration-300 transform scale-x-0 translate-x-0 tab-indicator z-0"></div>
                <?php foreach ($data['pages'] as $key => $page) { ?>
                    <a href="#" class="tab-link flex items-center text-lg active px-6 py-4 text-gray-700 relative hover:text-indigo-700 [&.active]:text-indigo-700 active:text-indigo-700" data-dui-tab-target="tab-vertical-<?php echo esc_attr($key); ?>">
                        <span class="menu-item flex items-center w-[200px]" id="menu-item-<?php echo esc_attr($key); ?>" data-id="<?php echo esc_attr($key); ?>">
                            <svg width="1.5em" height="1.5em" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" class="mr-2 h-4 w-4">
                                <path d="M21 7.35304L21 16.647C21 16.8649 20.8819 17.0656 20.6914 17.1715L12.2914 21.8381C12.1102 21.9388 11.8898 21.9388 11.7086 21.8381L3.30861 17.1715C3.11814 17.0656 3 16.8649 3 16.647L2.99998 7.35304C2.99998 7.13514 3.11812 6.93437 3.3086 6.82855L11.7086 2.16188C11.8898 2.06121 12.1102 2.06121 12.2914 2.16188L20.6914 6.82855C20.8818 6.93437 21 7.13514 21 7.35304Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
                                <path d="M3.52844 7.29357L11.7086 11.8381C11.8898 11.9388 12.1102 11.9388 12.2914 11.8381L20.5 7.27777" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
                                <path d="M12 21L12 12" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
                                <path d="M11.6914 11.8285L3.89139 7.49521C3.49147 7.27304 3 7.56222 3 8.01971V16.647C3 16.8649 3.11813 17.0656 3.30861 17.1715L11.1086 21.5048C11.5085 21.727 12 21.4378 12 20.9803V12.353C12 12.1351 11.8819 11.9344 11.6914 11.8285Z" fill="currentColor" stroke="currentColor" stroke-linejoin="round"></path>
                            </svg>
                            <span id="menu-item-span-<?php echo esc_attr($key); ?>"><?php echo esc_html($page); ?></span>
                        </span>
                        <span id="edit-menu-<?php echo esc_attr($key); ?>" data-id="<?php echo esc_attr($key); ?>" class="hidden edit-menu">
                            <svg class="size-5 text-indigo-500"  fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
                            </svg>
                        </span>
                    </a>
                <?php } ?>
            </div>
            <?php foreach ($data['pages'] as $key => $page) { ?>
                <div id="tab-vertical-<?php echo esc_attr($key); ?>" class="group tab-content w-full text-stone-500 text-sm block p-4">
                    <div class="main-content-<?php echo esc_attr($key); ?>">
                    <?php
                        $heading = get_option(\RistrettoApps\Spawnster\Base\Constants::SPAWNSTER_GENERATED_HEADING_KEY . $key);
                        $context = unserialize(get_option(\RistrettoApps\Spawnster\Base\Constants::SPAWNSTER_GENERATED_CONTENT_KEY . $key));

                        //echo wp_kses_post(\RistrettoApps\Spawnster\Helpers\HTMLTagFormatter::format(stripcslashes($heading)));

                        foreach ($context as $i => $content):
                            $has_edited_content = get_option(\RistrettoApps\Spawnster\Base\Constants::SPAWNSTER_UPDATED_CONTENT_KEY . $i . '-' . $key);
                    ?>

                        <div class="w-full">
                            <div class="relative">
                                <div id="context-<?php echo esc_attr($i); ?>-<?php echo esc_attr($key); ?>" class="<?php echo $has_edited_content ? 'text-red-500' : ''; ?> overflow-scroll max-h-full">
                                    <?php echo wp_kses_post(\RistrettoApps\Spawnster\Helpers\HTMLTagFormatter::format(stripcslashes($content), $i . '-' . $key)); ?>
                                </div>
                                <div id="reply-block-<?php echo esc_attr($i); ?>-<?php echo esc_attr($key); ?>" class="absolute bottom-0 end-1 reply_block hidden">
                                    <button title="Reply" data-id="<?php echo esc_attr($i); ?>-<?php echo esc_attr($key); ?>" class="reply-button text-indigo-500 dark:text-indigo-500 rounded-lg inline-flex items-center justify-center">
                                        <span id="default-message">
                                            <span class="inline-flex items-center">
                                                <svg class="size-5" fill="currentColor" viewBox="0 0 16 16" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                                                    <path d="M7,5V3c0-0.515-0.435-1-1-1C5.484,2,5.258,2.344,5,2.586L0.578,7C0.227,7.359,0,7.547,0,8s0.227,0.641,0.578,1L5,13.414  C5.258,13.656,5.484,14,6,14c0.565,0,1-0.485,1-1v-2h2c1.9,0.075,4.368,0.524,5,2.227C14.203,13.773,14.625,14,15,14  c0.563,0,1-0.438,1-1C16,7.083,12.084,5,7,5z"/>
                                                </svg>
                                            </span>
                                        </span>
                                    </button>

                                    <button
                                            data-copy-to-clipboard-target="code-block"
                                            data-copy-to-clipboard-content-type="innerHTML"
                                            data-copy-to-clipboard-html-entities="true" class="text-indigo-500 dark:text-indigo-500 rounded-lg inline-flex items-center justify-center">
                                        <span id="default-message">
                                            <span class="inline-flex items-center">
                                               <svg class="size-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 20">
                                                    <path d="M16 1h-3.278A1.992 1.992 0 0 0 11 0H7a1.993 1.993 0 0 0-1.722 1H2a2 2 0 0 0-2 2v15a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2Zm-3 14H5a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Zm0-4H5a1 1 0 0 1 0-2h8a1 1 0 1 1 0 2Zm0-5H5a1 1 0 0 1 0-2h2V2h4v2h2a1 1 0 1 1 0 2Z"/>
                                                </svg>
                                            </span>
                                        </span>
                                    </button>
                                </div>
                            </div>
                            <div class="<?php echo !$has_edited_content ? 'hidden' : ''; ?> text-green-500 text-base" id="response-<?php echo esc_attr($i); ?>-<?php echo esc_attr($key); ?>">
                                <p class="text-base">
                                    <?php
                                        if ($has_edited_content) {
                                            echo esc_html($has_edited_content);
                                        }
                                    ?>
                                </p>
                                <div class="flex wp-full justify-end" id="response-edit-accept-block-<?php echo esc_attr($i); ?>-<?php echo esc_attr($key); ?>">
                                    <a href="#" class="edit_icon" data-id="<?php echo esc_attr($i); ?>-<?php echo esc_attr($key); ?>" title="Edit Response">
                                        <svg class="size-6 text-indigo-500"  fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
                                        </svg>
                                    </a>
                                    <a href="#" class="accept_changes" data-id="<?php echo esc_attr($i); ?>-<?php echo esc_attr($key); ?>" title="Accept Changes">
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6 text-green-500">
                                            <path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z" clip-rule="evenodd" />
                                        </svg>
                                    </a>
                                    <a href="#" class="reject_changes" data-id="<?php echo esc_attr($i); ?>-<?php echo esc_attr($key); ?>" title="Reject Changes">
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6 text-red-500">
                                            <path fill-rule="evenodd" d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25Zm-1.72 6.97a.75.75 0 1 0-1.06 1.06L10.94 12l-1.72 1.72a.75.75 0 1 0 1.06 1.06L12 13.06l1.72 1.72a.75.75 0 1 0 1.06-1.06L13.06 12l1.72-1.72a.75.75 0 1 0-1.06-1.06L12 10.94l-1.72-1.72Z" clip-rule="evenodd" />
                                        </svg>
                                    </a>
                                </div>
                            </div>
                            <div
                                class="textarea_block pt-2 pb-2 justify-bottom align-bottom hidden"
                                data-id="<?php echo esc_attr($i); ?>-<?php echo esc_attr($key); ?>"
                                id="textarea-block-<?php echo esc_attr($i); ?>-<?php echo esc_attr($key); ?>"
                            >
                                <div class="relative w-full">
                                    <textarea
                                        id="enhance-content-<?php echo esc_attr($i); ?>-<?php echo esc_attr($key); ?>"
                                        class="max-h-36 py-3 ps-4 pe-20 block w-full border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none resize-none overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-track]:bg-gray-100 [&::-webkit-scrollbar-thumb]:bg-gray-300 "
                                        placeholder="Add your response here if you want to enhance or update the content line."
                                        rows="4" data-hs-textarea-auto-height="{'defaultHeight': 24}"></textarea>

                                    <div class="absolute top-14 end-1 pt-2">
                                        <button type="button" id="enhance-button-<?php echo esc_attr($i); ?>-<?php echo esc_attr($key); ?>" data-id="<?php echo esc_attr($i); ?>-<?php echo esc_attr($key); ?>" class="enhance_button py-1.5 px-3 m-0.5 inline-flex align-bottom shrink-0 justify-center items-center text-xs font-medium rounded-lg text-white bg-indigo-600 hover:bg-indigo-500 focus:outline-none focus:bg-indigo -500 h-8">
                                            Submit
                                        </button>
                                    </div>
                                    <div class="absolute top-14 end-1 pt-6 hidden small-loader-div">
                                        <?php \RistrettoApps\Spawnster\Helpers\ComponentView::render('components/small_loader', []); ?>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <?php endforeach; ?>
                    </div>
                </div>
            <?php } ?>
        </div>
    </div>
    <div id="edit_modal_block"
         class="edit_modal hidden fixed inset-0 p-4 flex flex-wrap justify-center items-center w-full h-full z-[1000] before:fixed before:inset-0 before:w-full before:h-full before:bg-[rgba(0,0,0,0.5)] overflow-auto font-[sans-serif]">
        <?php \RistrettoApps\Spawnster\Helpers\ComponentView::render('components/edit_modal', []); ?>
    </div>
    <div id="edit_modal_menu"
         class="hidden edit_modal_menu fixed inset-0 p-4 flex flex-wrap justify-center items-center w-full h-full z-[1000] before:fixed before:inset-0 before:w-full before:h-full before:bg-[rgba(0,0,0,0.5)] overflow-auto font-[sans-serif]">
        <?php \RistrettoApps\Spawnster\Helpers\ComponentView::render('components/edit_page_name_modal', []); ?>
    </div>
    <div class="w-full">
        <hr>
        <div class="pt-5">
            <div class="flex justify-start">
                <button type="submit" class="publish_confirm px-6 py-2 bg-green-500 text-white font-semibold rounded-md hover:bg-green-600 focus:outline-none">Publish All Pages</button>
<!--                <a href="#" class="reset_all ml-2 px-6 py-2 bg-gray-500 text-white hover:text-white font-semibold rounded-md hover:bg-gray-600 focus:outline-none">Reset All</a>-->
            </div>
        </div>
    </div>
</div>


