<?php
require_once 'config.php';

// Get token and phone from URL
$token = $_GET['token'] ?? '';
$phone = $_GET['phone'] ?? '';

if (!$token || !$phone) {
    echo "<h1>Invalid Request</h1>";
    echo "<p>Missing token or phone number.</p>";
    exit;
}

// Format phone for display
$formattedPhone = preg_replace('/(\+1)(\d{3})(\d{3})(\d{4})/', '$1-$2-$3-$4', $phone);
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Confirm SMS consent for Mark's Tech Solution updates, appointment reminders, and service notifications.">
    <meta name="keywords" content="SMS consent, Mark's Tech Solution, text message consent, opt in, opt out">
    <meta name="author" content="Mark's Tech Solution">
    <meta name="robots" content="noindex, follow">
    <meta name="theme-color" content="#ff6600">
    <meta name="referrer" content="strict-origin-when-cross-origin">
    <title>SMS Consent - Mark's Tech Solution</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="bg-light">
    <div class="container mt-5">
        <div class="row justify-content-center">
            <div class="col-md-6">
                <div class="card">
                    <div class="card-body">
                        <h3 class="text-center mb-4">SMS Consent Request</h3>
                        
                        <div class="alert alert-info">
                            <strong>Mark's Tech Solution</strong> would like to send you SMS messages for:
                            <ul class="mt-2">
                                <li>Service updates</li>
                                <li>Technical support</li>
                                <li>Special offers</li>
                            </ul>
                        </div>
                        
                        <div class="text-center mb-3">
                            <strong>Phone Number:</strong><br>
                            <code><?php echo htmlspecialchars($formattedPhone); ?></code>
                        </div>
                        
                        <div class="text-center">
                            <button onclick="handleResponse('approved')" class="btn btn-success me-2">
                                <i class="fas fa-check"></i> Approve
                            </button>
                            <button onclick="handleResponse('denied')" class="btn btn-danger">
                                <i class="fas fa-times"></i> Deny
                            </button>
                        </div>
                        
                        <div id="message" class="mt-3"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        function handleResponse(response) {
            const token = '<?php echo htmlspecialchars($token); ?>';
            const phone = '<?php echo htmlspecialchars($phone); ?>';
            
            fetch('twilio_consent.php', {
                method: 'POST',
                headers: {'Content-Type': 'application/x-www-form-urlencoded'},
                body: new URLSearchParams({
                    action: 'handle_response',
                    token: token,
                    phone: phone,
                    response: response
                })
            })
            .then(res => res.json())
            .then(data => {
                const msg = document.getElementById('message');
                if (data.success) {
                    msg.innerHTML = '<div class="alert alert-success">Thank you! Your response has been recorded.</div>';
                    setTimeout(() => window.location.href = 'index.php', 2000);
                } else {
                    msg.innerHTML = '<div class="alert alert-danger">Error: ' + data.message + '</div>';
                }
            })
            .catch(err => {
                document.getElementById('message').innerHTML = '<div class="alert alert-danger">Network error. Please try again.</div>';
            });
        }
    </script>
</body>
</html>