<?php
defined( 'ABSPATH' ) || exit;

$me           = wp_get_current_user();
$logout_nonce = wp_create_nonce( 'lsc_logout' );
$logout_url   = add_query_arg( [ 'lsc_logout' => 1, 'lsc_logout_nonce' => $logout_nonce ], get_permalink() );
$chat_status  = get_option( 'lsc_chat_status', 'offline' );
$initial      = strtoupper( mb_substr( $me->display_name, 0, 1 ) );
$status_class = 'online' === $chat_status ? 'lsc-status-online' : 'lsc-status-offline';
$status_label = 'online' === $chat_status
    ? esc_html__( 'Support Online', 'live-support-chat' )
    : esc_html__( 'Support Offline', 'live-support-chat' );
?>
<div class="lsc-chatter-wrap" id="lsc-chatter-wrap">

    <!-- Mobile overlay (tap to close sidebar) -->
    <div class="lsc-overlay" id="lsc-overlay"></div>

    <!-- ═══════════════════════════ SIDEBAR ═══════════════════════════ -->
    <aside class="lsc-sidebar" id="lsc-sidebar">

        <!-- Sidebar top: brand + close button (mobile) -->
        <div class="lsc-sidebar-header">
            <div class="lsc-brand">
                <svg width="30" height="30" viewBox="0 0 40 40" fill="none">
                    <rect width="40" height="40" rx="10" fill="#2563eb"/>
                    <path d="M27 13H13C12.4477 13 12 13.4477 12 14V23C12 23.5523 12.4477 24 13 24H18L20 27L22 24H27C27.5523 24 28 23.5523 28 23V14C28 13.4477 27.5523 13 27 13Z" fill="white"/>
                </svg>
                <span class="lsc-brand-name"><?php esc_html_e( 'Support Chat', 'live-support-chat' ); ?></span>
                <!-- Mobile close button -->
                <button class="lsc-sidebar-close" id="lsc-sidebar-close" aria-label="<?php esc_attr_e('Close sidebar','live-support-chat'); ?>">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
                        <path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                    </svg>
                </button>
            </div>

            <!-- Agent info -->
            <div class="lsc-agent-card">
                <div class="lsc-avatar-lg"><?php echo esc_html( $initial ); ?></div>
                <div>
                    <div class="lsc-agent-name"><?php echo esc_html( $me->display_name ); ?></div>
                    <div class="lsc-agent-role"><?php esc_html_e( 'Chatter', 'live-support-chat' ); ?></div>
                </div>
            </div>

            <!-- Global status pill -->
            <div class="lsc-status-pill <?php echo esc_attr( $status_class ); ?>" id="lsc-global-status">
                <span class="lsc-status-pill-dot"></span>
                <span id="lsc-status-text"><?php echo esc_html( $status_label ); ?></span>
            </div>
        </div>

        <!-- Section label -->
        <div class="lsc-section-label">
            <span><?php esc_html_e( 'Active Chats', 'live-support-chat' ); ?></span>
            <span class="lsc-badge-count" id="lsc-total-unread" style="display:none">0</span>
        </div>

        <!-- Chat list -->
        <div class="lsc-chat-list" id="lsc-chat-list">
            <div class="lsc-chat-list-empty" id="lsc-empty-msg">
                <svg width="36" height="36" viewBox="0 0 24 24" fill="none">
                    <path d="M21 15C21 15.5304 20.7893 16.0391 20.4142 16.4142C20.0391 16.7893 19.5304 17 19 17H7L3 21V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H19C19.5304 3 20.0391 3.21071 20.4142 3.58579C20.7893 3.96086 21 4.46957 21 5V15Z" stroke="#334155" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
                <p><?php esc_html_e( 'No active chats yet.', 'live-support-chat' ); ?></p>
            </div>
        </div>

        <!-- Footer / logout -->
        <div class="lsc-sidebar-footer">
            <a href="<?php echo esc_url( $logout_url ); ?>" class="lsc-logout-btn">
                <svg width="15" height="15" viewBox="0 0 24 24" fill="none">
                    <path d="M9 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H9M16 17L21 12M21 12L16 7M21 12H9" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
                <?php esc_html_e( 'Sign Out', 'live-support-chat' ); ?>
            </a>
        </div>
    </aside>

    <!-- ═══════════════════════ MAIN PANEL ════════════════════════════ -->
    <main class="lsc-main-panel" id="lsc-main-panel">

        <!-- Mobile top bar (always visible on mobile) -->
        <div class="lsc-mobile-topbar" id="lsc-mobile-topbar">
            <button class="lsc-hamburger" id="lsc-hamburger" aria-label="<?php esc_attr_e('Open sidebar','live-support-chat'); ?>">
                <span></span><span></span><span></span>
            </button>
            <span class="lsc-mobile-title"><?php esc_html_e( 'Support Chat', 'live-support-chat' ); ?></span>
            <span class="lsc-mobile-unread" id="lsc-mobile-unread" style="display:none">0</span>
        </div>

        <!-- Empty / welcome state -->
        <div class="lsc-main-empty" id="lsc-main-empty">
            <div class="lsc-empty-icon">
                <svg width="36" height="36" viewBox="0 0 24 24" fill="none">
                    <path d="M21 15C21 15.5304 20.7893 16.0391 20.4142 16.4142C20.0391 16.7893 19.5304 17 19 17H7L3 21V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H19C19.5304 3 20.0391 3.21071 20.4142 3.58579C20.7893 3.96086 21 4.46957 21 5V15Z" stroke="#94a3b8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
            </div>
            <h3><?php esc_html_e( 'Select a conversation', 'live-support-chat' ); ?></h3>
            <p><?php esc_html_e( 'Choose a chat from the sidebar to start replying.', 'live-support-chat' ); ?></p>
            <!-- Mobile: open sidebar button in empty state -->
            <button class="lsc-open-sidebar-btn lsc-hamburger-trigger" id="lsc-open-sidebar-empty">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                    <path d="M9 18L15 12L9 6" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                </svg>
                <?php esc_html_e( 'View chats', 'live-support-chat' ); ?>
            </button>
        </div>

        <!-- Active chat -->
        <div class="lsc-active-chat" id="lsc-active-chat" style="display:none">

            <!-- Chat top bar -->
            <div class="lsc-chat-topbar" id="lsc-chat-topbar">
                <!-- Mobile back button -->
                <button class="lsc-back-btn lsc-hamburger-trigger" id="lsc-back-btn" aria-label="<?php esc_attr_e('Back to chats','live-support-chat'); ?>">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
                        <path d="M15 18L9 12L15 6" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                    </svg>
                </button>
                <div class="lsc-topbar-visitor">
                    <div class="lsc-topbar-avatar" id="lsc-topbar-avatar">?</div>
                    <div>
                        <div class="lsc-topbar-name"  id="lsc-topbar-name"><?php esc_html_e( 'Visitor', 'live-support-chat' ); ?></div>
                        <div class="lsc-topbar-email" id="lsc-topbar-email"></div>
                    </div>
                </div>
                <div class="lsc-topbar-actions">
                    <span class="lsc-tag lsc-tag-green">
                        <svg width="7" height="7" viewBox="0 0 8 8"><circle cx="4" cy="4" r="4" fill="#22c55e"/></svg>
                        <?php esc_html_e( 'Active', 'live-support-chat' ); ?>
                    </span>
                    <button class="lsc-close-chat-btn" id="lsc-close-chat-btn">
                        <svg width="13" height="13" viewBox="0 0 24 24" fill="none">
                            <path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                        </svg>
                        <span class="lsc-close-label"><?php esc_html_e( 'Close', 'live-support-chat' ); ?></span>
                    </button>
                </div>
            </div>

            <!-- Messages -->
            <div class="lsc-messages-panel" id="lsc-messages-panel"></div>

            <!-- Reply box -->
            <div class="lsc-reply-box">
                <div class="lsc-reply-inner">
                    <textarea id="lsc-reply-input" class="lsc-reply-input" rows="1"
                              placeholder="<?php esc_attr_e( 'Type a reply…', 'live-support-chat' ); ?>"
                              maxlength="2000"></textarea>
                    <button id="lsc-reply-send-btn" class="lsc-reply-send-btn"
                            aria-label="<?php esc_attr_e( 'Send', 'live-support-chat' ); ?>">
                        <svg width="17" height="17" viewBox="0 0 24 24" fill="none">
                            <path d="M22 2L11 13M22 2L15 22L11 13M22 2L2 9L11 13"
                                  stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                    </button>
                </div>
                <div class="lsc-reply-hint lsc-desktop-only"><?php esc_html_e( 'Enter to send · Shift+Enter for new line', 'live-support-chat' ); ?></div>
            </div>
        </div>
    </main>
</div>

<audio id="lsc-notification-sound"
       src="<?php echo esc_url( LSC_PLUGIN_URL . 'assets/sounds/notification.mp3' ); ?>"
       preload="auto"></audio>
