<?php
// phpcs:disable
if ( ! defined( 'ABSPATH' ) ) { exit; }

$notif = new YATOON_Notifications();

$reminder_enabled      = get_option( 'yatoon_reminder_enabled', '1' );
$reminder_hours_before = get_option( 'yatoon_reminder_hours_before', 24 );
$reminder_subject      = get_option( 'yatoon_reminder_subject', 'Reminder: Your appointment at {business_name} is tomorrow' );
$reminder_template     = get_option( 'yatoon_reminder_template', $notif->default_reminder_template() );

$review_enabled        = get_option( 'yatoon_review_enabled', '1' );
$review_hours_after    = get_option( 'yatoon_review_hours_after', 2 );
$review_subject        = get_option( 'yatoon_review_subject', 'How was your visit to {business_name}?' );
$review_template       = get_option( 'yatoon_review_template', $notif->default_review_template() );
$review_google_link    = get_option( 'yatoon_review_google_link', '' );

$no_show_enabled       = get_option( 'yatoon_no_show_followup_enabled', '1' );
$no_show_hours_after   = get_option( 'yatoon_no_show_followup_hours_after', 1 );
$no_show_subject       = get_option( 'yatoon_no_show_followup_subject', 'We missed you at {business_name}' );
$no_show_template      = get_option( 'yatoon_no_show_followup_template', $notif->default_no_show_followup_template() );

$nonce = wp_create_nonce( 'yatoon_notifications_nonce' );
?>
<div class="wrap" id="yatoon-notif-wrap">
<h1 style="display:flex;align-items:center;gap:10px;">
    <span style="font-size:24px;">🔔</span> Email Notifications
</h1>
<p style="color:#666;margin-top:0;">Configure appointment reminders and post-visit review request emails. Both are sent via your WordPress mail (wp_mail) - no paid SMS required.</p>

<div id="yatoon-notif-msg" style="display:none;margin:10px 0;"></div>

<style>
#yatoon-notif-wrap .yn-card{background:#fff;border:1px solid #ddd;border-radius:8px;padding:24px 28px;margin-bottom:24px;max-width:820px;}
#yatoon-notif-wrap .yn-card h2{margin-top:0;font-size:17px;display:flex;align-items:center;gap:8px;}
#yatoon-notif-wrap .yn-row{display:flex;gap:16px;align-items:flex-start;margin-bottom:14px;flex-wrap:wrap;}
#yatoon-notif-wrap .yn-row label{font-weight:600;min-width:180px;padding-top:6px;}
#yatoon-notif-wrap .yn-row input[type=text],
#yatoon-notif-wrap .yn-row input[type=number],
#yatoon-notif-wrap .yn-row input[type=url]{width:100%;max-width:460px;padding:7px 10px;border:1px solid #ccc;border-radius:5px;font-size:14px;}
#yatoon-notif-wrap .yn-row textarea{width:100%;max-width:460px;padding:8px 10px;border:1px solid #ccc;border-radius:5px;font-family:monospace;font-size:13px;line-height:1.6;resize:vertical;}
#yatoon-notif-wrap .yn-toggle{display:flex;align-items:center;gap:10px;margin-bottom:18px;}
#yatoon-notif-wrap .yn-toggle input{width:18px;height:18px;cursor:pointer;}
#yatoon-notif-wrap .yn-vars{background:#f9f9f9;border:1px solid #e5e5e5;border-radius:5px;padding:10px 14px;font-size:12px;color:#555;max-width:460px;line-height:1.8;}
#yatoon-notif-wrap .yn-vars code{background:#efefef;padding:1px 5px;border-radius:3px;font-size:11px;}
#yatoon-notif-wrap .yn-actions{display:flex;gap:10px;align-items:center;margin-top:8px;}
#yatoon-notif-wrap .btn-test{background:#f0f0f0;border:1px solid #ccc;border-radius:5px;padding:6px 14px;cursor:pointer;font-size:13px;}
#yatoon-notif-wrap .btn-test:hover{background:#e0e0e0;}
#yatoon-notif-wrap .yn-divider{border:none;border-top:1px solid #f0f0f0;margin:18px 0;}
#yatoon-notif-wrap .section-disabled{opacity:0.45;pointer-events:none;}
</style>

<form id="yatoon-notif-form">
<input type="hidden" name="nonce" value="<?php echo esc_attr( $nonce ); ?>">

<!-- ═══════════════════════════════════════════════════════════════════════ -->
<!-- CARD 1: Appointment Reminder                                           -->
<!-- ═══════════════════════════════════════════════════════════════════════ -->
<div class="yn-card">
    <h2>📅 Appointment Reminder Email</h2>
    <p style="color:#666;font-size:13px;margin-top:-8px;">Automatically email the customer before their appointment to reduce no-shows.</p>

    <div class="yn-toggle">
        <input type="checkbox" id="reminder_enabled" name="yatoon_reminder_enabled" value="1" <?php checked( $reminder_enabled, '1' ); ?>>
        <label for="reminder_enabled" style="font-weight:600;cursor:pointer;">Enable Appointment Reminder</label>
    </div>

    <div id="reminder-fields" class="<?php echo $reminder_enabled !== '1' ? 'section-disabled' : ''; ?>">
        <div class="yn-row">
            <label>Send how many hours before?</label>
            <div>
                <input type="number" name="yatoon_reminder_hours_before" value="<?php echo esc_attr( $reminder_hours_before ); ?>" min="1" max="168" style="width:100px;">
                <span style="margin-left:8px;color:#666;font-size:13px;">hours before appointment</span>
                <div style="color:#888;font-size:12px;margin-top:4px;">e.g. 24 = send 1 day before, 2 = send 2 hours before</div>
            </div>
        </div>

        <hr class="yn-divider">

        <div class="yn-row">
            <label>Email Subject</label>
            <input type="text" name="yatoon_reminder_subject" value="<?php echo esc_attr( $reminder_subject ); ?>">
        </div>

        <div class="yn-row">
            <label>Email Body</label>
            <div style="flex:1;">
                <textarea name="yatoon_reminder_template" rows="12"><?php echo esc_textarea( $reminder_template ); ?></textarea>
                <div class="yn-vars" style="margin-top:8px;">
                    <strong>Available variables:</strong><br>
                    <code>{customer_name}</code> <code>{customer_first_name}</code> <code>{customer_email}</code> <code>{customer_phone}</code><br>
                    <code>{service_name}</code> <code>{staff_name}</code> <code>{date}</code> <code>{time}</code> <code>{end_time}</code><br>
                    <code>{total_price}</code> <code>{notes}</code> <code>{business_name}</code> <code>{business_phone}</code> <code>{business_email}</code>
                </div>
            </div>
        </div>

        <div class="yn-actions">
            <button type="button" class="btn-test" id="test-reminder">📧 Send Test Reminder to Admin</button>
            <span id="test-reminder-msg" style="font-size:13px;color:#555;"></span>
        </div>
    </div>
</div>

<!-- ═══════════════════════════════════════════════════════════════════════ -->
<!-- CARD 2: Review Request                                                 -->
<!-- ═══════════════════════════════════════════════════════════════════════ -->
<div class="yn-card">
    <h2>* Review Request Email</h2>
    <p style="color:#666;font-size:13px;margin-top:-8px;">Automatically ask happy clients to leave a Google review after their visit.</p>

    <div class="yn-toggle">
        <input type="checkbox" id="review_enabled" name="yatoon_review_enabled" value="1" <?php checked( $review_enabled, '1' ); ?>>
        <label for="review_enabled" style="font-weight:600;cursor:pointer;">Enable Review Request</label>
    </div>

    <div id="review-fields" class="<?php echo $review_enabled !== '1' ? 'section-disabled' : ''; ?>">
        <div class="yn-row">
            <label>Send how many hours after?</label>
            <div>
                <input type="number" name="yatoon_review_hours_after" value="<?php echo esc_attr( $review_hours_after ); ?>" min="0" max="168" style="width:100px;">
                <span style="margin-left:8px;color:#666;font-size:13px;">hours after appointment ends</span>
                <div style="color:#888;font-size:12px;margin-top:4px;">e.g. 2 = send 2 hours after, 24 = send next day</div>
            </div>
        </div>

        <div class="yn-row">
            <label>Google Review Link</label>
            <div style="flex:1;">
                <input type="url" name="yatoon_review_google_link" value="<?php echo esc_attr( $review_google_link ); ?>" placeholder="https://g.page/r/YOUR_ID/review">
                <div style="color:#888;font-size:12px;margin-top:4px;">
                    Find your link: Google Maps -> your business -> "Get more reviews" -> copy the link.<br>
                    A * button will appear in the email linking here. Leave blank to omit the button.
                </div>
            </div>
        </div>

        <hr class="yn-divider">

        <div class="yn-row">
            <label>Email Subject</label>
            <input type="text" name="yatoon_review_subject" value="<?php echo esc_attr( $review_subject ); ?>">
        </div>

        <div class="yn-row">
            <label>Email Body</label>
            <div style="flex:1;">
                <textarea name="yatoon_review_template" rows="12"><?php echo esc_textarea( $review_template ); ?></textarea>
                <div class="yn-vars" style="margin-top:8px;">
                    <strong>Available variables:</strong><br>
                    <code>{customer_name}</code> <code>{customer_first_name}</code> <code>{service_name}</code> <code>{staff_name}</code><br>
                    <code>{date}</code> <code>{time}</code> <code>{business_name}</code> <code>{business_phone}</code> <code>{business_email}</code><br>
                    <code>{review_link}</code> - the Google review URL (also shown as a button)
                </div>
            </div>
        </div>

        <div class="yn-actions">
            <button type="button" class="btn-test" id="test-review">📧 Send Test Review Request to Admin</button>
            <span id="test-review-msg" style="font-size:13px;color:#555;"></span>
        </div>
    </div>
</div>

<!-- ═══════════════════════════════════════════════════════════════════════ -->
<!-- CARD 2b: Star Rating Collection                                        -->
<!-- ═══════════════════════════════════════════════════════════════════════ -->
<div class="yn-card">
    <h2>* Star Rating Collection</h2>
    <p class="yn-desc">Sends a simple 1-5 star email after each appointment. Ratings are stored in <a href="admin.php?page=yatoon-reviews">Reviews</a>. Approved reviews can be displayed on your site with <code>[yatoon_reviews]</code> (Pro).</p>
    <div class="yn-row">
        <input type="checkbox" id="rating_enabled" name="yatoon_rating_enabled" value="1" <?php checked(get_option('yatoon_rating_enabled','1'),'1'); ?>>
        <label for="rating_enabled" style="font-weight:600;cursor:pointer;">Enable Star Rating Emails</label>
    </div>
    <div style="margin-top:14px;display:grid;grid-template-columns:1fr 1fr;gap:12px;">
        <div class="yn-row" style="flex-direction:column;align-items:flex-start;">
            <label style="font-weight:600;font-size:13px;margin-bottom:4px;">Hours after appointment</label>
            <input type="number" name="yatoon_rating_hours_after" value="<?php echo esc_attr(get_option('yatoon_rating_hours_after','3')); ?>" min="1" max="72" style="width:100px;padding:6px 8px;border:1px solid #ddd;border-radius:5px;">
            <span style="font-size:12px;color:#888;margin-top:3px;">Email sent X hours after end time</span>
        </div>
        <div class="yn-row" style="flex-direction:column;align-items:flex-start;">
            <label style="font-weight:600;font-size:13px;margin-bottom:4px;">Auto-approve ratings?</label>
            <label style="display:flex;align-items:center;gap:6px;cursor:pointer;">
                <input type="checkbox" name="yatoon_rating_auto_approve" value="1" <?php checked(get_option('yatoon_rating_auto_approve','1'),'1'); ?>>
                <span style="font-size:13px;">Approve all submitted ratings automatically</span>
            </label>
        </div>
    </div>
    <div class="yn-row" style="flex-direction:column;align-items:flex-start;margin-top:12px;">
        <label style="font-weight:600;font-size:13px;margin-bottom:4px;">Email subject</label>
        <input type="text" name="yatoon_rating_subject" value="<?php echo esc_attr(get_option('yatoon_rating_subject','How was your visit to {business_name}?')); ?>" style="width:100%;padding:6px 10px;border:1px solid #ddd;border-radius:5px;">
    </div>
</div>

<!-- ═══════════════════════════════════════════════════════════════════════ -->
<!-- CARD 3: No-show Follow-up                                              -->
<!-- ═══════════════════════════════════════════════════════════════════════ -->
<div class="yn-card">
    <h2>↩️ No-show Follow-up Email</h2>
    <p style="color:#666;font-size:13px;margin-top:-8px;">Automatically follow up after an appointment is marked as no-show, so the client can rebook or contact the salon.</p>

    <div class="yn-toggle">
        <input type="checkbox" id="no_show_enabled" name="yatoon_no_show_followup_enabled" value="1" <?php checked( $no_show_enabled, '1' ); ?>>
        <label for="no_show_enabled" style="font-weight:600;cursor:pointer;">Enable No-show Follow-up</label>
    </div>

    <div id="no-show-fields" class="<?php echo $no_show_enabled !== '1' ? 'section-disabled' : ''; ?>">
        <div class="yn-row">
            <label>Send how many hours after?</label>
            <div>
                <input type="number" name="yatoon_no_show_followup_hours_after" value="<?php echo esc_attr( $no_show_hours_after ); ?>" min="0" max="168" style="width:100px;">
                <span style="margin-left:8px;color:#666;font-size:13px;">hours after marking no-show</span>
            </div>
        </div>

        <hr class="yn-divider">

        <div class="yn-row">
            <label>Email Subject</label>
            <input type="text" name="yatoon_no_show_followup_subject" value="<?php echo esc_attr( $no_show_subject ); ?>">
        </div>

        <div class="yn-row">
            <label>Email Body</label>
            <div style="flex:1;">
                <textarea name="yatoon_no_show_followup_template" rows="10"><?php echo esc_textarea( $no_show_template ); ?></textarea>
                <div class="yn-vars" style="margin-top:8px;">
                    <strong>Available variables:</strong><br>
                    <code>{customer_name}</code> <code>{customer_first_name}</code> <code>{service_name}</code> <code>{staff_name}</code><br>
                    <code>{date}</code> <code>{time}</code> <code>{business_name}</code> <code>{business_phone}</code> <code>{business_email}</code>
                </div>
            </div>
        </div>

        <div class="yn-actions">
            <button type="button" class="btn-test" id="test-no-show">📧 Send Test No-show Email to Admin</button>
            <span id="test-no-show-msg" style="font-size:13px;color:#555;"></span>
        </div>
    </div>
</div>

<!-- ═══════════════════════════════════════════════════════════════════════ -->
<!-- CARD 4: Cancellation Notification                                      -->
<!-- ═══════════════════════════════════════════════════════════════════════ -->
<div class="yn-card">
    <h2>❌ Cancellation Notification Email</h2>
    <p style="color:#666;font-size:13px;margin-top:-8px;">
        Email sent to the customer when their appointment is cancelled.<br>
        <strong>Admin cancelling:</strong> you'll see a "Notify customer" checkbox in the Bookings page.<br>
        <strong>Customer cancelling:</strong> they'll see a "Send me a confirmation email" checkbox in their portal.
    </p>

    <div class="yn-row">
        <label>Email Subject</label>
        <input type="text" name="yatoon_cancel_subject" value="<?php echo esc_attr( get_option('yatoon_cancel_subject', 'Your appointment at {business_name} has been cancelled') ); ?>">
    </div>

    <div class="yn-row">
        <label>Email Body</label>
        <div style="flex:1;">
            <textarea name="yatoon_cancel_template" rows="10"><?php echo esc_textarea( get_option('yatoon_cancel_template', $notif->default_cancel_template()) ); ?></textarea>
            <div class="yn-vars" style="margin-top:8px;">
                <strong>Available variables:</strong><br>
                <code>{customer_name}</code> <code>{customer_first_name}</code> <code>{service_name}</code> <code>{staff_name}</code><br>
                <code>{date}</code> <code>{time}</code> <code>{business_name}</code> <code>{business_phone}</code> <code>{business_email}</code>
            </div>
        </div>
    </div>

    <div class="yn-actions">
        <button type="button" class="btn-test" id="test-cancel">📧 Send Test Cancel Email to Admin</button>
        <span id="test-cancel-msg" style="font-size:13px;color:#555;"></span>
    </div>
</div>

<!-- ═══════════════════════════════════════════════════════════════════════ -->
<!-- CARD 5: Reschedule Notification                                        -->
<!-- ═══════════════════════════════════════════════════════════════════════ -->
<div class="yn-card">
    <h2>🔄 Reschedule Notification Email</h2>
    <p style="color:#666;font-size:13px;margin-top:-8px;">
        Email sent to the customer when their appointment is rescheduled.<br>
        <strong>Customer rescheduling via portal:</strong> they'll see a "Send me a confirmation email" checkbox.
    </p>

    <div class="yn-row">
        <label>Email Subject</label>
        <input type="text" name="yatoon_reschedule_subject" value="<?php echo esc_attr( get_option('yatoon_reschedule_subject', 'Your appointment at {business_name} has been rescheduled') ); ?>">
    </div>

    <div class="yn-row">
        <label>Email Body</label>
        <div style="flex:1;">
            <textarea name="yatoon_reschedule_template" rows="10"><?php echo esc_textarea( get_option('yatoon_reschedule_template', $notif->default_reschedule_template()) ); ?></textarea>
            <div class="yn-vars" style="margin-top:8px;">
                <strong>Available variables:</strong><br>
                <code>{customer_name}</code> <code>{customer_first_name}</code> <code>{service_name}</code> <code>{staff_name}</code><br>
                <code>{date}</code> <code>{time}</code> <code>{end_time}</code> <code>{business_name}</code> <code>{business_phone}</code> <code>{business_email}</code>
            </div>
        </div>
    </div>

    <div class="yn-actions">
        <button type="button" class="btn-test" id="test-reschedule-notif">📧 Send Test Reschedule Email to Admin</button>
        <span id="test-reschedule-notif-msg" style="font-size:13px;color:#555;"></span>
    </div>
</div>

<!-- ═══════════════════════════════════════════════════════════════════════ -->
<!-- Save Button                                                            -->
<!-- ═══════════════════════════════════════════════════════════════════════ -->
<div style="max-width:820px;">
    <button type="submit" id="yn-save-btn" class="button button-primary" style="font-size:15px;padding:8px 28px;height:auto;">
        💾 Save Notification Settings
    </button>
    <span id="yn-save-msg" style="margin-left:14px;font-size:13px;"></span>
</div>
</form>

<script>
(function($){
    // Toggle section enabled/disabled
    $('#reminder_enabled').on('change', function(){
        $('#reminder-fields').toggleClass('section-disabled', !this.checked);
    });
    $('#review_enabled').on('change', function(){
        $('#review-fields').toggleClass('section-disabled', !this.checked);
    });
    $('#no_show_enabled').on('change', function(){
        $('#no-show-fields').toggleClass('section-disabled', !this.checked);
    });

    // Save settings
    $('#yatoon-notif-form').on('submit', function(e){
        e.preventDefault();
        var $btn = $('#yn-save-btn');
        $btn.text('Saving...').prop('disabled', true);
        var data = $(this).serializeArray();
        data.push({name:'action', value:'yatoon_save_notifications'});
        $.post(ajaxurl, data, function(res){
            $btn.text('💾 Save Notification Settings').prop('disabled', false);
            if(res.success){
                $('#yn-save-msg').text('OK Saved!').css('color','#2e7d32');
            } else {
                $('#yn-save-msg').text('❌ Error saving.').css('color','#c62828');
            }
            setTimeout(function(){ $('#yn-save-msg').text(''); }, 3000);
        });
    });

    // Test buttons
    function testEmail(action, msgId){
        $(msgId).text('Sending...');
        $.post(ajaxurl, {
            action: action,
            nonce: $('[name=nonce]').val()
        }, function(res){
            if(res.success){
                $(msgId).text('OK ' + res.data.message).css('color','#2e7d32');
            } else {
                $(msgId).text('❌ ' + (res.data ? res.data.message : 'Error')).css('color','#c62828');
            }
        });
    }

    $('#test-reminder').on('click', function(){
        testEmail('yatoon_test_reminder_email', '#test-reminder-msg');
    });
    $('#test-review').on('click', function(){
        testEmail('yatoon_test_review_request_email', '#test-review-msg');
    });
    $('#test-cancel').on('click', function(){
        testEmail('yatoon_test_cancel_email', '#test-cancel-msg');
    });
    $('#test-reschedule-notif').on('click', function(){
        testEmail('yatoon_test_reschedule_email', '#test-reschedule-notif-msg');
    });
    $('#test-no-show').on('click', function(){
        testEmail('yatoon_test_no_show_email', '#test-no-show-msg');
    });
})(jQuery);
</script>
</div>
