<?php
/**
 * Class LSC_Widget
 * Injects the floating chat widget on the frontend.
 */
class LSC_Widget {

    public function __construct() {
        add_action( 'wp_footer',          [ $this, 'render_widget' ] );
        add_action( 'wp_enqueue_scripts', [ $this, 'enqueue_assets' ] );
    }

    /**
     * Enqueue frontend assets.
     */
    public function enqueue_assets() {
        wp_enqueue_style(
            'lsc-widget',
            LSC_PLUGIN_URL . 'assets/css/widget.css',
            [],
            LSC_VERSION
        );

        wp_enqueue_script(
            'lsc-widget',
            LSC_PLUGIN_URL . 'assets/js/widget.js',
            [ 'jquery' ],
            LSC_VERSION,
            true
        );

        wp_localize_script( 'lsc-widget', 'lscWidget', [
            'ajaxUrl'     => admin_url( 'admin-ajax.php' ),
            'nonce'       => wp_create_nonce( 'lsc_visitor_nonce' ),
            'status'      => get_option( 'lsc_chat_status', 'offline' ),
            'position'    => $position,
            'widgetText'  => get_option( 'lsc_widget_text', 'How Can We Help You' ),
            'offlineMsg'  => get_option( 'lsc_offline_message', 'We are currently offline. Please leave a message.' ),
            'soundUrl'    => LSC_PLUGIN_URL . 'assets/sounds/notification.mp3',
            'i18n'        => [
                'send'          => __( 'Send', 'live-support-chat' ),
                'placeholder'   => __( 'Type your message…', 'live-support-chat' ),
                'namePlaceholder'  => __( 'Your name (optional)', 'live-support-chat' ),
                'emailPlaceholder' => __( 'Your email (optional)', 'live-support-chat' ),
                'minimize'      => __( 'Minimize', 'live-support-chat' ),
                'supportOnline' => __( 'Support is online', 'live-support-chat' ),
                'supportOffline'=> __( 'Support is offline', 'live-support-chat' ),
            ],
        ] );
    }

    /**
     * Render the widget HTML.
     */
    public function render_widget() {
        $status      = get_option( 'lsc_chat_status', 'offline' );
        $widget_text = get_option( 'lsc_widget_text', 'How Can We Help You' );
        $status_class = 'online' === $status ? 'lsc-online' : 'lsc-offline';

        // Widget position from settings.
        $allowed_positions = [ 'bottom-right', 'bottom-left', 'top-right', 'top-left' ];
        $position          = get_option( 'lsc_widget_position', 'bottom-right' );
        if ( ! in_array( $position, $allowed_positions, true ) ) {
            $position = 'bottom-right';
        }
        $position_class = 'lsc-pos-' . $position;

        // Status labels.
        $status_full  = 'online' === $status
            ? __( 'We Are Online', 'live-support-chat' )
            : __( 'We Are Offline', 'live-support-chat' );
        $status_short = 'online' === $status
            ? __( 'Online', 'live-support-chat' )
            : __( 'Offline', 'live-support-chat' );
        ?>
        <div id="lsc-chat-wrapper" class="<?php echo esc_attr( $status_class . ' ' . $position_class ); ?>" aria-live="polite">

            <!-- Floating toggle button -->
            <button id="lsc-toggle-btn" class="lsc-toggle-btn" aria-label="<?php esc_attr_e( 'Open chat', 'live-support-chat' ); ?>" aria-expanded="false">
                <!-- Chat / close icons -->
                <svg class="lsc-icon-chat" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <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="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
                <svg class="lsc-icon-close" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" style="display:none">
                    <path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                </svg>

                <!-- Desktop: stacked status + main label (hidden on mobile) -->
                <span class="lsc-btn-text" aria-hidden="true">
                    <span class="lsc-btn-status-line">
                        <span class="lsc-btn-status-pip"></span>
                        <?php echo esc_html( $status_full ); ?>
                    </span>
                    <span class="lsc-toggle-label"><?php echo esc_html( $widget_text ); ?></span>
                </span>

                <span class="lsc-unread-dot" id="lsc-unread-dot" style="display:none"></span>
            </button>

            <!-- Mobile-only status badge (shown below the circular button) -->
            <span class="lsc-mobile-badge" id="lsc-mobile-badge" aria-hidden="true">
                <span class="lsc-mobile-badge-dot"></span>
                <?php echo esc_html( $status_short ); ?>
            </span>

            <!-- Chat window -->
            <div id="lsc-chat-window" class="lsc-chat-window" style="display:none" role="dialog" aria-label="<?php esc_attr_e( 'Live Support Chat', 'live-support-chat' ); ?>">
                <!-- Header -->
                <div class="lsc-chat-header">
                    <span class="lsc-status-dot"></span>
                    <span class="lsc-header-title">
                        <?php 'online' === $status
                            ? esc_html_e( 'Support is online', 'live-support-chat' )
                            : esc_html_e( 'Support is offline', 'live-support-chat' ); ?>
                    </span>
                    <button class="lsc-close-btn" id="lsc-close-btn" aria-label="<?php esc_attr_e( 'Close chat', 'live-support-chat' ); ?>">
                        <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                        </svg>
                    </button>
                </div>

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

                <!-- Input area -->
                <div class="lsc-chat-input-area">
                    <div class="lsc-visitor-info" id="lsc-visitor-info">
                        <input type="text" id="lsc-visitor-name"  class="lsc-info-input" placeholder="<?php esc_attr_e( 'Your name (optional)', 'live-support-chat' ); ?>" maxlength="100" />
                        <input type="email" id="lsc-visitor-email" class="lsc-info-input" placeholder="<?php esc_attr_e( 'Your email (optional)', 'live-support-chat' ); ?>" maxlength="200" />
                    </div>
                    <div class="lsc-input-row">
                        <textarea id="lsc-message-input" class="lsc-message-input" placeholder="<?php esc_attr_e( 'Type your message…', 'live-support-chat' ); ?>" rows="2" maxlength="1000"></textarea>
                        <button id="lsc-send-btn" class="lsc-send-btn" aria-label="<?php esc_attr_e( 'Send message', 'live-support-chat' ); ?>">
                            <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M22 2L11 13M22 2L15 22L11 13M22 2L2 9L11 13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </button>
                    </div>
                </div>
            </div>

        </div>
        <?php
    }
}
