<?php
// phpcs:ignoreFile
if ( ! defined( 'ABSPATH' ) ) exit;
// $portal_data is set by YATOON_Staff_Portal::render_shortcode()
if ( ! isset( $portal_data ) ) $portal_data = array();
$pin_length = in_array( (int) get_option( 'yatoon_staff_pin_length', 4 ), array( 4, 6 ), true ) ? (int) get_option( 'yatoon_staff_pin_length', 4 ) : 4;
$staff_portal_path = wp_parse_url( get_permalink(), PHP_URL_PATH );
$staff_portal_scope = trailingslashit( $staff_portal_path ? $staff_portal_path : '/' );
?>
<div class="yatoon-staff-portal-page" lang="<?php echo esc_attr( get_bloginfo( 'language' ) ); ?>">

<div id="ysp-app">

    <div class="ysp-screen active" id="ysp-login-screen">
        <?php
        $_ysp_logo = get_option( 'yatoon_business_logo' );
        if ( $_ysp_logo ) :
        ?>
        <div class="ysp-login-logo" style="background:none;box-shadow:none;padding:0;">
            <img src="<?php echo esc_url( $_ysp_logo ); ?>"
                 alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>"
                 style="width:64px;height:64px;object-fit:contain;border-radius:16px;">
        </div>
        <?php else : ?>
        <div class="ysp-login-logo">Y</div>
        <?php endif; ?>
        <div class="ysp-login-title"><?php echo esc_html( get_option( 'yatoon_business_name', get_bloginfo( 'name' ) ) ); ?></div>
        <div class="ysp-login-sub">Staff Portal - Enter your <?php echo esc_html( $pin_length ); ?>-digit PIN</div>

        <form class="ysp-login-form" id="ysp-login-form" autocomplete="off">
            <div class="ysp-pin-display" id="ysp-pin-display">
                <?php for ( $i = 0; $i < $pin_length; $i++ ) : ?>
                <div class="ysp-pin-dot" data-index="<?php echo esc_attr( $i ); ?>"></div>
                <?php endfor; ?>
            </div>
            <div class="ysp-login-error" id="ysp-login-error" role="alert" aria-live="assertive"></div>
            <div class="ysp-numpad" id="ysp-numpad">
                <?php foreach ( range( 1, 9 ) as $n ) : ?>
                <button type="button" class="ysp-numpad-btn" data-digit="<?php echo $n; ?>"><?php echo $n; ?></button>
                <?php endforeach; ?>
                <button type="button" class="ysp-numpad-btn empty"></button>
                <button type="button" class="ysp-numpad-btn" data-digit="0">0</button>
                <button type="button" class="ysp-numpad-btn backspace" id="ysp-backspace">Del</button>
            </div>
        </form>
    </div>

    <div class="ysp-screen" id="ysp-schedule-screen">
        <div class="ysp-topbar">
            <div>
                <div class="ysp-topbar-name" id="ysp-staff-name">-</div>
                <div class="ysp-topbar-sub" id="ysp-topbar-date">Loading...</div>
            </div>
            <div class="ysp-topbar-actions">
                <div class="ysp-topbar-buttons">
                    <button class="ysp-refresh-btn ysp-icon-button" id="ysp-add-booking-btn" title="Add appointment" aria-label="Add appointment" style="display:none;"><span aria-hidden="true">+</span></button>
                    <button class="ysp-refresh-btn ysp-icon-button" id="ysp-refresh-btn" title="Refresh" aria-label="Refresh"><span aria-hidden="true">R</span></button>
                    <button class="ysp-topbar-logout ysp-icon-button" id="ysp-logout-btn" title="Sign out" aria-label="Sign out"><span aria-hidden="true">Out</span></button>
                </div>
                <span id="ysp-last-sync" class="ysp-last-sync"></span>
            </div>
        </div>

        <div class="ysp-calendar-toolbar" id="ysp-calendar-toolbar">
            <div class="ysp-view-switch" role="group" aria-label="Calendar view">
                <button type="button" data-calendar-mode="month">Month</button>
                <button type="button" data-calendar-mode="day">Day</button>
                <button type="button" data-calendar-mode="week">Week</button>
                <button type="button" data-calendar-mode="list">List</button>
            </div>
            <button type="button" class="ysp-calendar-options" id="ysp-calendar-options-btn" aria-label="Calendar and employee filters" title="Calendar and employee filters">&#9881;</button>
        </div>

        <div class="ysp-staff-tabs" id="ysp-staff-tabs" style="display:none;"></div>
        <div class="ysp-day-tabs" id="ysp-day-tabs"></div>

        <div class="ysp-schedule" id="ysp-schedule-list">
            <div class="ysp-loading-wrap"><div class="ysp-spinner"></div></div>
        </div>

        <div class="ysp-bottom-nav" id="ysp-bottom-nav">
            <button type="button" class="ysp-bottom-nav-btn active" data-view="today">
                <span class="ysp-bottom-nav-icon" aria-hidden="true">T</span>
                <span>Today</span>
            </button>
            <button type="button" class="ysp-bottom-nav-btn" data-view="calendar">
                <span class="ysp-bottom-nav-icon" aria-hidden="true">D</span>
                <span>Calendar</span>
            </button>
            <button type="button" class="ysp-bottom-nav-btn" id="ysp-bottom-clients-btn" data-view="clients" style="display:none;">
                <span class="ysp-bottom-nav-icon" aria-hidden="true">P</span>
                <span>Customers</span>
            </button>
            <button type="button" class="ysp-bottom-nav-btn" id="ysp-bottom-checkout-btn" data-view="checkout" style="display:none;">
                <span class="ysp-bottom-nav-icon" aria-hidden="true">$</span>
                <span>Checkout</span>
            </button>
            <button type="button" class="ysp-bottom-nav-btn" id="ysp-bottom-messages-btn" data-view="messages" style="display:none;">
                <span class="ysp-bottom-nav-icon" aria-hidden="true">M</span>
                <span>Messages</span>
            </button>
            <button type="button" class="ysp-bottom-nav-btn" id="ysp-bottom-more-btn">
                <span class="ysp-bottom-nav-icon" aria-hidden="true">...</span>
                <span>More</span>
            </button>
        </div>
    </div>

</div>

<div class="ysp-overlay" id="ysp-detail-overlay">
    <div class="ysp-sheet" id="ysp-detail-sheet">
        <button type="button" class="ysp-sheet-close" data-ysp-close="detail" aria-label="Close">&times;</button>
        <div class="ysp-sheet-handle"></div>
        <div class="ysp-sheet-body" id="ysp-sheet-body"></div>
    </div>
</div>

<div class="ysp-overlay" id="ysp-editor-overlay">
    <div class="ysp-sheet" id="ysp-editor-sheet">
        <button type="button" class="ysp-sheet-close" data-ysp-close="editor" aria-label="Close">&times;</button>
        <div class="ysp-sheet-handle"></div>
        <div class="ysp-sheet-body" id="ysp-editor-body"></div>
    </div>
</div>

<div class="ysp-toast" id="ysp-toast" role="status" aria-live="polite"></div>

<script>
window.yspData = {
    ajaxUrl: <?php echo json_encode( admin_url( 'admin-ajax.php' ) ); ?>,
    nonce:   <?php echo json_encode( wp_create_nonce( 'yatoon_staff_portal_nonce' ) ); ?>,
    bizName: <?php echo json_encode( get_bloginfo( 'name' ) ); ?>,
    swUrl:   <?php echo json_encode( home_url( '/yatoon-staff-sw.js' ) ); ?>,
    swScope: <?php echo json_encode( $staff_portal_scope ); ?>,
    paymentRequestUrl: <?php echo json_encode( get_option( 'yatoon_payment_request_url', '' ) ); ?>,
    squareCheckoutUrl: <?php echo json_encode( get_option( 'yatoon_square_checkout_url', '' ) ); ?>,
    squareAppUrl: <?php echo json_encode( get_option( 'yatoon_square_app_url', '' ) ); ?>,
    squareCheckoutNote: <?php echo json_encode( get_option( 'yatoon_square_checkout_note', 'Open Square App and use Tap to Pay, then return here and mark the appointment paid.' ) ); ?>,
    activePlatform: <?php echo json_encode( get_option( 'yatoon_active_platform', 'local' ) ); ?>,
    squareNoShowFeeEnabled: <?php echo json_encode( get_option( 'yatoon_square_no_show_fee_enabled', '' ) === '1' ); ?>,
    squareNoShowFeeAmount: <?php echo json_encode( get_option( 'yatoon_square_no_show_fee_amount', '25' ) ); ?>,
    squareNoShowFeeNote: <?php echo json_encode( get_option( 'yatoon_square_no_show_fee_note', 'Open Square and charge the approved no-show or late-cancellation fee, then mark it here.' ) ); ?>,
    idleLockMinutes: <?php echo json_encode( (int) get_option( 'yatoon_staff_idle_lock_minutes', 5 ) ); ?>,
    pinLength: <?php echo json_encode( $pin_length ); ?>,
};
</script>
</div>
