<?php defined( 'ABSPATH' ) || exit; ?>
<div class="wrap lsc-admin-wrap">
    <h1 class="lsc-page-title">
        <span class="dashicons dashicons-admin-settings"></span>
        <?php esc_html_e( 'Live Support Chat — Settings', 'live-support-chat' ); ?>
    </h1>

    <div class="lsc-card">
        <form method="post" action="options.php">
            <?php settings_fields( 'lsc_settings_group' ); ?>

            <table class="form-table">

                <!-- Chat Status -->
                <tr>
                    <th scope="row"><?php esc_html_e( 'Chat Status', 'live-support-chat' ); ?></th>
                    <td>
                        <select name="lsc_chat_status">
                            <option value="online"  <?php selected( get_option('lsc_chat_status'), 'online'  ); ?>><?php esc_html_e('Online',  'live-support-chat'); ?></option>
                            <option value="offline" <?php selected( get_option('lsc_chat_status'), 'offline' ); ?>><?php esc_html_e('Offline', 'live-support-chat'); ?></option>
                        </select>
                    </td>
                </tr>

                <!-- Widget Position -->
                <tr>
                    <th scope="row"><label for="lsc_widget_position"><?php esc_html_e( 'Widget Position', 'live-support-chat' ); ?></label></th>
                    <td>
                        <?php
                        $pos = get_option( 'lsc_widget_position', 'bottom-right' );
                        $positions = [
                            'bottom-right' => __( 'Bottom Right (default)', 'live-support-chat' ),
                            'bottom-left'  => __( 'Bottom Left', 'live-support-chat' ),
                            'top-right'    => __( 'Top Right', 'live-support-chat' ),
                            'top-left'     => __( 'Top Left', 'live-support-chat' ),
                        ];
                        ?>
                        <select name="lsc_widget_position" id="lsc_widget_position">
                            <?php foreach ( $positions as $value => $label ) : ?>
                                <option value="<?php echo esc_attr( $value ); ?>" <?php selected( $pos, $value ); ?>>
                                    <?php echo esc_html( $label ); ?>
                                </option>
                            <?php endforeach; ?>
                        </select>
                        <p class="description"><?php esc_html_e( 'Choose where the chat widget appears on your website.', 'live-support-chat' ); ?></p>
                    </td>
                </tr>

                <!-- Widget Text -->
                <tr>
                    <th scope="row"><label for="lsc_widget_text"><?php esc_html_e( 'Widget Button Text', 'live-support-chat' ); ?></label></th>
                    <td>
                        <input type="text" name="lsc_widget_text" id="lsc_widget_text"
                               value="<?php echo esc_attr( get_option('lsc_widget_text', 'How Can We Help You') ); ?>"
                               class="regular-text" />
                    </td>
                </tr>

                <!-- Offline Message (shown in chat widget) -->
                <tr>
                    <th scope="row"><label for="lsc_offline_message"><?php esc_html_e( 'Offline Chat Message', 'live-support-chat' ); ?></label></th>
                    <td>
                        <textarea name="lsc_offline_message" id="lsc_offline_message" class="large-text" rows="2"><?php echo esc_textarea( get_option('lsc_offline_message', '') ); ?></textarea>
                        <p class="description"><?php esc_html_e( 'Shown inside the chat widget when support is offline.', 'live-support-chat' ); ?></p>
                    </td>
                </tr>

                <!-- ── OFFLINE EMAIL NOTIFICATION ── -->
                <tr>
                    <th scope="row" colspan="2">
                        <hr style="margin:0 0 4px;border:none;border-top:1px solid #e2e8f0;">
                        <h3 style="margin:12px 0 0;font-size:.95rem;color:#1e293b;">
                            📧 <?php esc_html_e( 'Offline Email Notifications', 'live-support-chat' ); ?>
                        </h3>
                    </th>
                </tr>

                <tr>
                    <th scope="row"><label for="lsc_notification_email"><?php esc_html_e( 'Notification Email Address', 'live-support-chat' ); ?></label></th>
                    <td>
                        <input type="email" name="lsc_notification_email" id="lsc_notification_email"
                               value="<?php echo esc_attr( get_option('lsc_notification_email', get_option('admin_email')) ); ?>"
                               class="regular-text"
                               placeholder="<?php echo esc_attr( get_option('admin_email') ); ?>" />
                        <p class="description">
                            <?php esc_html_e( 'When support is offline and a visitor sends a message, an email notification is sent to this address.', 'live-support-chat' ); ?>
                        </p>
                    </td>
                </tr>

                <tr>
                    <th scope="row"><label for="lsc_notification_email_subject"><?php esc_html_e( 'Email Subject', 'live-support-chat' ); ?></label></th>
                    <td>
                        <input type="text" name="lsc_notification_email_subject" id="lsc_notification_email_subject"
                               value="<?php echo esc_attr( get_option('lsc_notification_email_subject', __('New offline chat message – {site_name}', 'live-support-chat')) ); ?>"
                               class="regular-text" />
                        <p class="description"><?php esc_html_e( 'Use {site_name} as a placeholder for your website name.', 'live-support-chat' ); ?></p>
                    </td>
                </tr>

                <!-- ── PAGES ── -->
                <tr>
                    <th scope="row" colspan="2">
                        <hr style="margin:0 0 4px;border:none;border-top:1px solid #e2e8f0;">
                        <h3 style="margin:12px 0 0;font-size:.95rem;color:#1e293b;">
                            📄 <?php esc_html_e( 'Plugin Pages', 'live-support-chat' ); ?>
                        </h3>
                    </th>
                </tr>

                <tr>
                    <th scope="row"><label for="lsc_chatter_login_page"><?php esc_html_e( 'Chatter Login Page', 'live-support-chat' ); ?></label></th>
                    <td>
                        <select name="lsc_chatter_login_page" id="lsc_chatter_login_page">
                            <option value=""><?php esc_html_e( '— Select page —', 'live-support-chat' ); ?></option>
                            <?php foreach ( $pages as $page ) : ?>
                                <option value="<?php echo esc_attr($page->ID); ?>" <?php selected(get_option('lsc_chatter_login_page'), $page->ID); ?>>
                                    <?php echo esc_html($page->post_title); ?>
                                </option>
                            <?php endforeach; ?>
                        </select>
                        <p class="description"><?php esc_html_e('Page containing [live_support_chatter_login]', 'live-support-chat'); ?></p>
                    </td>
                </tr>

                <tr>
                    <th scope="row"><label for="lsc_chatter_dashboard_page"><?php esc_html_e( 'Chatter Dashboard Page', 'live-support-chat' ); ?></label></th>
                    <td>
                        <select name="lsc_chatter_dashboard_page" id="lsc_chatter_dashboard_page">
                            <option value=""><?php esc_html_e( '— Select page —', 'live-support-chat' ); ?></option>
                            <?php foreach ( $pages as $page ) : ?>
                                <option value="<?php echo esc_attr($page->ID); ?>" <?php selected(get_option('lsc_chatter_dashboard_page'), $page->ID); ?>>
                                    <?php echo esc_html($page->post_title); ?>
                                </option>
                            <?php endforeach; ?>
                        </select>
                        <p class="description"><?php esc_html_e('Page containing [live_support_chatter_dashboard]', 'live-support-chat'); ?></p>
                    </td>
                </tr>

            </table>

            <?php submit_button( __('Save Settings', 'live-support-chat') ); ?>
        </form>
    </div>

    <!-- Shortcode reference -->
    <div class="lsc-card">
        <h2><?php esc_html_e('Shortcode Reference', 'live-support-chat'); ?></h2>
        <table class="widefat">
            <tr><th><?php esc_html_e('Shortcode','live-support-chat'); ?></th><th><?php esc_html_e('Description','live-support-chat'); ?></th></tr>
            <tr><td><code>[live_support_chatter_login]</code></td><td><?php esc_html_e('Login form for chatter users.','live-support-chat'); ?></td></tr>
            <tr><td><code>[live_support_chatter_dashboard]</code></td><td><?php esc_html_e('Full chatter management dashboard.','live-support-chat'); ?></td></tr>
        </table>
    </div>
</div>
