<?php
/**
 * API Tester Page Template
 *
 * @package KiviCare_API
 */

// Exit if accessed directly.
if ( ! defined( 'ABSPATH' ) ) {
    exit;
}
?>

<div class="wrap">
    <div class="care-api-docs">
        
        <!-- Header -->
        <div class="care-api-header">
            <div class="api-version">v<?php echo esc_html( CARE_API_VERSION ); ?></div>
            <h1><?php esc_html_e( 'Care API Tester', 'care-api' ); ?></h1>
            <p><?php esc_html_e( 'Interactive API endpoint testing tool', 'care-api' ); ?></p>
        </div>

        <div class="api-docs-content">
            
            <!-- Authentication Section -->
            <div class="api-tester">
                <div class="tester-header">
                    <h2><?php esc_html_e( 'Authentication', 'care-api' ); ?></h2>
                    <p><?php esc_html_e( 'Generate or enter your JWT token to test authenticated endpoints', 'care-api' ); ?></p>
                </div>
                
                <div class="tester-content">
                    <div class="form-row">
                        <div class="form-group">
                            <label for="test-token"><?php esc_html_e( 'JWT Token', 'care-api' ); ?></label>
                            <input type="password" id="test-token" placeholder="<?php esc_attr_e( 'Enter your JWT token or generate one', 'care-api' ); ?>">
                        </div>
                        <div class="form-group">
                            <button type="button" class="generate-token-button test-button">
                                <?php esc_html_e( 'Generate Token', 'care-api' ); ?>
                            </button>
                        </div>
                    </div>
                    
                    <div class="user-info" style="display: none;"></div>
                </div>
            </div>

            <!-- API Tester Form -->
            <div class="api-tester">
                <div class="tester-header">
                    <h2><?php esc_html_e( 'Test API Endpoints', 'care-api' ); ?></h2>
                    <p><?php esc_html_e( 'Select an endpoint, configure parameters, and test the API response', 'care-api' ); ?></p>
                </div>
                
                <div class="tester-content">
                    <form class="tester-form">
                        
                        <!-- HTTP Method and Endpoint -->
                        <div class="form-row">
                            <div class="form-group">
                                <label for="test-method"><?php esc_html_e( 'HTTP Method', 'care-api' ); ?></label>
                                <select id="test-method" required>
                                    <option value=""><?php esc_html_e( 'Select Method', 'care-api' ); ?></option>
                                    <option value="GET">GET</option>
                                    <option value="POST">POST</option>
                                    <option value="PUT">PUT</option>
                                    <option value="DELETE">DELETE</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="test-endpoint"><?php esc_html_e( 'API Endpoint', 'care-api' ); ?></label>
                                <select id="test-endpoint" required>
                                    <option value=""><?php esc_html_e( 'Select Endpoint', 'care-api' ); ?></option>
                                    <optgroup label="<?php esc_attr_e( 'Authentication', 'care-api' ); ?>">
                                        <option value="/auth/login">/auth/login</option>
                                        <option value="/auth/refresh">/auth/refresh</option>
                                        <option value="/auth/logout">/auth/logout</option>
                                    </optgroup>
                                    <optgroup label="<?php esc_attr_e( 'Clinics', 'care-api' ); ?>">
                                        <option value="/clinics">/clinics</option>
                                        <option value="/clinics/1">/clinics/{id}</option>
                                    </optgroup>
                                    <optgroup label="<?php esc_attr_e( 'Patients', 'care-api' ); ?>">
                                        <option value="/patients">/patients</option>
                                        <option value="/patients/123">/patients/{id}</option>
                                        <option value="/patients/123/history">/patients/{id}/history</option>
                                        <option value="/patients/123/encounters">/patients/{id}/encounters</option>
                                        <option value="/patients/123/prescriptions">/patients/{id}/prescriptions</option>
                                    </optgroup>
                                    <optgroup label="<?php esc_attr_e( 'Doctors', 'care-api' ); ?>">
                                        <option value="/doctors">/doctors</option>
                                        <option value="/doctors/456">/doctors/{id}</option>
                                        <option value="/doctors/456/schedule">/doctors/{id}/schedule</option>
                                        <option value="/doctors/456/appointments">/doctors/{id}/appointments</option>
                                    </optgroup>
                                    <optgroup label="<?php esc_attr_e( 'Appointments', 'care-api' ); ?>">
                                        <option value="/appointments">/appointments</option>
                                        <option value="/appointments/789">/appointments/{id}</option>
                                        <option value="/appointments/available-slots">/appointments/available-slots</option>
                                    </optgroup>
                                    <optgroup label="<?php esc_attr_e( 'Encounters', 'care-api' ); ?>">
                                        <option value="/encounters">/encounters</option>
                                        <option value="/encounters/101">/encounters/{id}</option>
                                        <option value="/encounters/101/prescriptions">/encounters/{id}/prescriptions</option>
                                    </optgroup>
                                    <optgroup label="<?php esc_attr_e( 'Bills', 'care-api' ); ?>">
                                        <option value="/bills">/bills</option>
                                        <option value="/bills/202">/bills/{id}</option>
                                        <option value="/bills/202/payment">/bills/{id}/payment</option>
                                    </optgroup>
                                    <optgroup label="<?php esc_attr_e( 'Services', 'care-api' ); ?>">
                                        <option value="/services">/services</option>
                                        <option value="/services/303">/services/{id}</option>
                                    </optgroup>
                                    <optgroup label="<?php esc_attr_e( 'Reports', 'care-api' ); ?>">
                                        <option value="/reports/appointments">/reports/appointments</option>
                                        <option value="/reports/revenue">/reports/revenue</option>
                                        <option value="/reports/patients">/reports/patients</option>
                                        <option value="/reports/doctors">/reports/doctors</option>
                                    </optgroup>
                                </select>
                            </div>
                        </div>

                        <!-- Request Headers -->
                        <div class="form-group">
                            <label for="test-headers"><?php esc_html_e( 'Additional Headers (JSON)', 'care-api' ); ?></label>
                            <textarea id="test-headers" class="json-editor" placeholder='{"Custom-Header": "value"}'></textarea>
                            <p class="description"><?php esc_html_e( 'Optional: Add custom headers as JSON object', 'care-api' ); ?></p>
                        </div>

                        <!-- Request Body -->
                        <div class="form-group body-group" style="display: none;">
                            <label for="test-body"><?php esc_html_e( 'Request Body (JSON)', 'care-api' ); ?></label>
                            <textarea id="test-body" class="json-editor" placeholder='{"key": "value"}'></textarea>
                            <p class="description"><?php esc_html_e( 'Request body data as JSON (for POST/PUT requests)', 'care-api' ); ?></p>
                        </div>

                        <!-- Test Button -->
                        <div class="form-group">
                            <button type="button" class="test-button">
                                <?php esc_html_e( 'Test Endpoint', 'care-api' ); ?>
                            </button>
                        </div>

                    </form>
                </div>
            </div>

            <!-- Response Display -->
            <div class="response-section" style="display: none;">
                <div class="api-tester">
                    <div class="tester-header">
                        <h2><?php esc_html_e( 'API Response', 'care-api' ); ?></h2>
                        <div class="response-status"></div>
                    </div>
                    
                    <div class="tester-content">
                        
                        <!-- Response Headers -->
                        <div class="endpoint-section">
                            <h4><?php esc_html_e( 'Response Headers', 'care-api' ); ?></h4>
                            <div class="response-headers">
                                <pre></pre>
                            </div>
                        </div>

                        <!-- Response Body -->
                        <div class="endpoint-section">
                            <h4><?php esc_html_e( 'Response Body', 'care-api' ); ?></h4>
                            <div class="response-body">
                                <pre></pre>
                            </div>
                        </div>

                    </div>
                </div>
            </div>

            <!-- Quick Test Examples -->
            <div class="api-tester">
                <div class="tester-header">
                    <h2><?php esc_html_e( 'Quick Test Examples', 'care-api' ); ?></h2>
                    <p><?php esc_html_e( 'Common API testing scenarios', 'care-api' ); ?></p>
                </div>
                
                <div class="tester-content">
                    <div class="endpoint-section">
                        <div class="form-row">
                            
                            <!-- Login Test -->
                            <div class="example-card" style="background: #f8f9fa; padding: 20px; border-radius: 8px; border-left: 4px solid #28a745;">
                                <h4><?php esc_html_e( 'Test Login', 'care-api' ); ?></h4>
                                <p><?php esc_html_e( 'Authenticate with your WordPress credentials', 'care-api' ); ?></p>
                                <button type="button" class="button quick-test" 
                                    data-method="POST" 
                                    data-endpoint="/auth/login"
                                    data-body='{"username": "<?php echo esc_js( wp_get_current_user()->user_login ); ?>", "password": "your_password"}'>
                                    <?php esc_html_e( 'Set Login Test', 'care-api' ); ?>
                                </button>
                            </div>

                            <!-- Get Clinics Test -->
                            <div class="example-card" style="background: #f8f9fa; padding: 20px; border-radius: 8px; border-left: 4px solid #007bff;">
                                <h4><?php esc_html_e( 'Test Get Clinics', 'care-api' ); ?></h4>
                                <p><?php esc_html_e( 'Retrieve list of clinics (requires authentication)', 'care-api' ); ?></p>
                                <button type="button" class="button quick-test" 
                                    data-method="GET" 
                                    data-endpoint="/clinics">
                                    <?php esc_html_e( 'Set Clinics Test', 'care-api' ); ?>
                                </button>
                            </div>

                        </div>

                        <div class="form-row" style="margin-top: 20px;">
                            
                            <!-- Get Patients Test -->
                            <div class="example-card" style="background: #f8f9fa; padding: 20px; border-radius: 8px; border-left: 4px solid #ffc107;">
                                <h4><?php esc_html_e( 'Test Get Patients', 'care-api' ); ?></h4>
                                <p><?php esc_html_e( 'Retrieve patients list (requires doctor/admin role)', 'care-api' ); ?></p>
                                <button type="button" class="button quick-test" 
                                    data-method="GET" 
                                    data-endpoint="/patients">
                                    <?php esc_html_e( 'Set Patients Test', 'care-api' ); ?>
                                </button>
                            </div>

                            <!-- Create Appointment Test -->
                            <div class="example-card" style="background: #f8f9fa; padding: 20px; border-radius: 8px; border-left: 4px solid #dc3545;">
                                <h4><?php esc_html_e( 'Test Create Appointment', 'care-api' ); ?></h4>
                                <p><?php esc_html_e( 'Book a new appointment', 'care-api' ); ?></p>
                                <button type="button" class="button quick-test" 
                                    data-method="POST" 
                                    data-endpoint="/appointments"
                                    data-body='{"patient_id": 123, "doctor_id": 456, "clinic_id": 1, "appointment_start_date": "2024-12-20", "appointment_start_time": "14:30:00", "appointment_end_date": "2024-12-20", "appointment_end_time": "15:00:00"}'>
                                    <?php esc_html_e( 'Set Appointment Test', 'care-api' ); ?>
                                </button>
                            </div>

                        </div>
                    </div>
                </div>
            </div>

            <!-- Testing Tips -->
            <div class="api-tester">
                <div class="tester-header">
                    <h2><?php esc_html_e( 'Testing Tips', 'care-api' ); ?></h2>
                </div>
                
                <div class="tester-content">
                    <div class="endpoint-section">
                        <div class="notice notice-info">
                            <h4><?php esc_html_e( 'Getting Started', 'care-api' ); ?></h4>
                            <ul>
                                <li><?php esc_html_e( 'First, generate a test token using your current WordPress user credentials', 'care-api' ); ?></li>
                                <li><?php esc_html_e( 'Start with simple GET requests like /clinics or /patients', 'care-api' ); ?></li>
                                <li><?php esc_html_e( 'Check the response status and headers for debugging information', 'care-api' ); ?></li>
                                <li><?php esc_html_e( 'Use the documentation tab to understand required parameters', 'care-api' ); ?></li>
                            </ul>
                        </div>

                        <div class="notice notice-warning">
                            <h4><?php esc_html_e( 'Important Notes', 'care-api' ); ?></h4>
                            <ul>
                                <li><?php esc_html_e( 'This tester uses your live database - be careful with POST/PUT/DELETE operations', 'care-api' ); ?></li>
                                <li><?php esc_html_e( 'Tokens expire after 24 hours - regenerate if you get authentication errors', 'care-api' ); ?></li>
                                <li><?php esc_html_e( 'Some endpoints require specific user roles (doctor, admin, etc.)', 'care-api' ); ?></li>
                                <li><?php esc_html_e( 'Replace {id} placeholders in endpoints with actual IDs from your data', 'care-api' ); ?></li>
                            </ul>
                        </div>

                        <div class="notice notice-success">
                            <h4><?php esc_html_e( 'Troubleshooting', 'care-api' ); ?></h4>
                            <ul>
                                <li><strong><?php esc_html_e( '401 Unauthorized:', 'care-api' ); ?></strong> <?php esc_html_e( 'Check your token and make sure it\'s not expired', 'care-api' ); ?></li>
                                <li><strong><?php esc_html_e( '403 Forbidden:', 'care-api' ); ?></strong> <?php esc_html_e( 'Your user role doesn\'t have permission for this endpoint', 'care-api' ); ?></li>
                                <li><strong><?php esc_html_e( '404 Not Found:', 'care-api' ); ?></strong> <?php esc_html_e( 'Check the endpoint URL and replace {id} with actual IDs', 'care-api' ); ?></li>
                                <li><strong><?php esc_html_e( '422 Validation Error:', 'care-api' ); ?></strong> <?php esc_html_e( 'Check required parameters and data formats', 'care-api' ); ?></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

<script>
// Quick test button functionality
jQuery(document).ready(function($) {
    $('.quick-test').on('click', function() {
        var method = $(this).data('method');
        var endpoint = $(this).data('endpoint');
        var body = $(this).data('body');
        
        $('#test-method').val(method);
        $('#test-endpoint').val(endpoint);
        
        if (body) {
            $('#test-body').val(JSON.stringify(JSON.parse(body), null, 2));
            $('.body-group').show();
        } else {
            $('.body-group').hide();
        }
        
        // Scroll to form
        $('html, body').animate({
            scrollTop: $('.tester-form').offset().top - 100
        }, 500);
    });
});
</script>