<?php  if (!defined('ABSPATH')) exit; ?>

<div class="ass-sidebar ass-sidebar-container pt-3 h-100">
    <div class="d-flex flex-column justify-content-start gap-3 align-content-end w-100 h-100 p-2 position-relative">
        <div class="ass-sidebar-background bg-white p-4 border border-gray h-100 rounded ass-shadow">
            <div class="d-flex justify-content-between align-items-center gap-5">
                <div class="ass-sidebar-logo-container">
                    <img class="ass-sidebar-logo" src="<?php echo esc_url(plugins_url('/assets/images/ass_sidebar_logo.png', ASSI_PLUGIN_FILE)); ?>">
                    <div class="d-flex flex-column justify-content-center align-items-start pt-2">
                        <img class="ass-sidebar-logo-text" src="<?php echo esc_url(plugins_url('/assets/images/ass_sidebar_logo_text.png', ASSI_PLUGIN_FILE)); ?>">
                        <p class="ass-sidebar-version-text"><?php echo (defined('ASSI_PLUGIN_VERSION_DISPLAY') ? esc_html(ASSI_PLUGIN_VERSION_DISPLAY) : '') ?></p>
                    </div>
                </div>
                <button class="btn ass-sidebar-close-btn ass-transparent-border">
                    <i class="bi bi-chevron-double-left text-primary fs-6"></i>
                </button>
            </div>
            <hr>
            <div class="align-items-start gap-2 ass-sidebar-license" style="display:none;">
                <div class="ass-global-alert ass-sidebar-alert-connection-lost alert alert-sm alert-danger mb-1 p-2" data-alert-id="lost_connection" style="display:none;">
                    <div class="d-flex gap-2 align-items-center">
                        <i class="bi bi-exclamation-diamond"></i>
                        <span class="ass-size-12"><?php esc_html_e('Your account connection has been disconnected.', 'assistini'); ?> <a class="ass-sidebar-alert-connection-lost-more" href="#"><?php esc_html_e('learn more.', 'assistini'); ?></a></span>
                        <button type="button" class="ass-alert-close-lost-connection btn-close ass-size-8 align-self-start" aria-label="Close"></button>
                    </div>
                </div>
                <div class="d-flex flex-column gap-1 w-100">
                    <div class="d-flex justify-content-between align-items-center w-100 mb-0">
                        <div class="d-flex align-items-center">
                            <p class="fs-6 lh-1 mb-0"><?php esc_html_e('Licence', 'assistini'); ?>: <span class="ass-sidebar-licence-name text-secondary"><?php echo esc_html(ASSI_Tools::getPlanName((defined('ASSI_ACCOUNT_PLAN_ID') ? (int) ASSI_ACCOUNT_PLAN_ID : 0))); ?></span></p>
                            <i class="ass-sidebar-licence-reload bi bi-arrow-repeat ass-size-14 ms-1 px-1 text-secondary rounded"></i>
                        </div>
                    </div>
                    <div class="ass-flex flex-column gap-1 w-100 ass-sidebar-licence-credits-ctn">
                        <p><?php esc_html_e('Your monthly word volume', 'assistini'); ?></p>
                        <div class="d-flex flex-row justify-content-end">
                            <span class="ass-size-11 ass-fw-600"><?php esc_html_e('Remaining', 'assistini'); ?>: <span class="ass-sidebar-credits-open">0</span> / <span class="ass-sidebar-credits-total"></span> <?php esc_html_e('(auto-renew)', 'assistini'); ?></span>
                        </div>
                        <div class="progress ass-sidebar-progress" role="progressbar" aria-label="Your monthly word volume" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
                            <div class="progress-bar ass-sidebar-progress-bar" style="width: 0%"></div>
                            <div class="progress-bar ass-sidebar-progress-bar-2" style="width: 0%"></div>
                        </div>
                        <div class="ass-sidebar-remaining d-flex flex-column justify-content-start mt-1">
                            <div class="d-flex flex-row w-100 align-items-center gap-1">
                                <div class="bg-primary" style="height:10px;width:10px;border-radius:2px;"></div>
                                <span class="ass-size-11 ass-fw-600"><span class="ass-sidebar-licence-credits">0</span> <?php echo esc_html(ASSI_Tools::getPlanName(defined('ASSI_ACCOUNT_PLAN_ID') ? (int) ASSI_ACCOUNT_PLAN_ID : 0)); ?> <?php esc_html_e('Plan', 'assistini'); ?></span>
                            </div>
                            <div class="ass-sidebar-license-promo" style="display:none;">
                                <div class="d-flex flex-row w-100 align-items-center gap-1" style="display:none;">
                                    <div class="ass-bg-lightblue" style="height:10px;width:10px;border-radius:2px;"></div>
                                    <span class="ass-size-11 ass-fw-600"><span class="ass-sidebar-license-promo-credits">0</span> <?php esc_html_e('Welcome Bonus (30 days)', 'assistini'); ?></span>
                                </div>
                            </div>
                        </div>
                        <button class="ass-sidebar-license-upgrade-btn btn btn-sm btn-outline-primary mt-2"><?php esc_html_e('Need More? Upgrade now', 'assistini'); ?></button>
                    </div>
                </div>
                <hr>
            </div>
            <div class="align-items-start gap-2 ass-sidebar-license-no-auth" style="display:none;">
                <div class="d-flex flex-column gap-1 w-100">
                    <p><?php esc_html_e('Your monthly word volume', 'assistini'); ?></p>
                    <div class="progress ass-sidebar-progress" role="progressbar" aria-label="Your monthly word volume" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
                        <div class="progress-bar ass-sidebar-progress-bar-no-auth" style="width: 0%"></div>
                    </div>
                    <div class="d-flex flex-column justify-content-start mt-1">
                    </div>
                    <button class="ass-oauth-start-btn ass-sidebar-license-connect-btn btn btn-sm btn-outline-primary"><?php esc_html_e('Connect now', 'assistini'); ?></button>  
                </div>
                <hr>
            </div>
            <?php
                $assi_sidebarHtml = ASSI_Sidebar::getSidebarMenuHtml();
                if (isset($assi_sidebarHtml) && !empty($assi_sidebarHtml)) {
                    echo wp_kses($assi_sidebarHtml, array(
                        'div' => array(
                            'class' => array(),
                            'style' => array(),
                        ),
                        'p' => array(
                            'class' => array(),
                        ),
                        'button' => array(
                            'class' => array(),
                            'data-content' => array(),
                        ),
                        'i' => array(
                            'class' => array(),
                            'style' => array(),
                        ),
                        'span' => array(
                            'class' => array(),
                            'style' => array(),
                            'data-action' => array(),
                        ),
                    ));
                }
            ?>
        </div>
        <div class="ass-sidebar-openai-status-ctn ass-sidebar-background bg-white border border-gray h-100 rounded ass-shadow ass-flex flex-column overflow-hidden">
            <div class="ass-sidebar-status-headline d-flex align-items-center px-4 py-2">
                <span class="ass-fw-600 ass-size-16"><?php esc_html_e('AI Status', 'assistini'); ?></span>
            </div>
            <div class="ass-sidebar-status-content ass-flex flex-column justify-content-center px-4 py-2 ass-size-14">
                <div class="ass-sidebar-status-content-inner ass-flex align-items-center gap-2" data-status="-1">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                    <span><?php esc_html_e('Loading', 'assistini');?></span>
                </div>
                <div class="ass-sidebar-status-content-inner ass-flex align-items-center gap-2" data-status="0" style="display:none;">
                    <div class="bg-dark"></div>
                    <span><?php esc_html_e('Unknown', 'assistini');?></span>
                </div>
                <div class="ass-sidebar-status-content-inner ass-flex align-items-center gap-2" data-status="1" style="display:none;">
                    <div class="bg-success"></div>
                    <span><?php esc_html_e('Operational', 'assistini');?></span>
                </div>
                <div class="ass-sidebar-status-content-inner ass-flex align-items-center gap-2" data-status="2" style="display:none;">
                    <div class="bg-warning"></div>
                    <span><?php esc_html_e('Impaired', 'assistini');?></span>
                    
                </div>
                <div class="ass-sidebar-status-content-inner ass-flex align-items-center gap-2" data-status="3" style="display:none;">
                    <div class="bg-danger"></div>
                    <span><?php esc_html_e('Disrupted', 'assistini');?></span>

                </div>
            </div>
            <div class="ass-sidebar-status-footer d-flex align-items-center justify-content-center px-4 py-2">
                <a class="ass-size-15" href="https://status.openai.com/" target="_blank" rel="noopener noreferrer"><?php esc_html_e('Live check', 'assistini'); ?> >></a>
            </div>
        </div>
    </div>
</div>