<?php
// File: register.php (Error Message Fix)
include 'header.php';

// Fetch subscription packs to display in the form
$subscription_packs = [];
if (isset($conn) && $conn) {
    $result = $conn->query("SELECT id, pack_name, price, duration_days FROM subscription_packs ORDER BY price");
    if ($result) {
        $subscription_packs = $result->fetch_all(MYSQLI_ASSOC);
    }
}
?>

<div class="bg-gray-50 py-12 md:py-20">
    <div class="max-w-xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="bg-white p-8 rounded-xl shadow-lg">
            <h2 class="text-3xl font-extrabold text-center text-ucf-charcoal mb-6">Create Your Account</h2>

            <!-- ** IMPROVED ERROR MESSAGES ** -->
            <?php if (isset($_GET['error'])): ?>
                <div class="bg-red-100 border-l-4 border-red-500 text-red-700 p-4 mb-6 rounded-md" role="alert">
                    <p class="font-bold">Registration Failed</p>
                    <?php 
                        $error = $_GET['error'];
                        
                        // --- ⭐️⭐️⭐️ THIS IS THE FIX ⭐️⭐️⭐️ ---
                        // It now checks for all three "exists" errors
                        if ($error == 'exists' || $error == 'user_exists' || $error == 'pending_exists') {
                            echo '<p>An account with that username or email already exists (or is pending payment).</p>';
                        // --- END OF FIX ---
                        
                        } elseif ($error == 'session_expired') {
                            echo '<p>Your session expired. Please fill out the form and try again.</p>';
                        } elseif ($error == 'dberror') {
                            echo '<p>A database error occurred. Please try again later.</p>';
                        } elseif ($error == 'invalid_payment_response') {
                            echo '<p>Your payment was cancelled or interrupted. Your registration was not completed. Please try again.</p>';
                        } elseif ($error == 'payment_init_failed') {
                            echo '<p>We could not connect to the payment gateway. Please try again.</p>';
                        } else {
                            echo '<p>An unknown error occurred. Please try again.</p>';
                        }
                    ?>
                </div>
            <?php endif; ?>

            <form action="register_handler.php" method="POST" enctype="multipart/form-data" class="space-y-6">
                <!-- Role Selection Cards -->
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">Register as *</label>
                    <div id="role-selector" class="grid grid-cols-1 sm:grid-cols-3 gap-4">
                        <!-- Customer Card -->
                        <label class="role-card border-2 border-ucf-green p-4 rounded-lg cursor-pointer text-center" data-role="customer">
                            <input type="radio" name="role" value="customer" class="hidden" checked>
                            <i class="fas fa-user fa-2x text-ucf-green"></i>
                            <span class="block mt-2 font-semibold">Customer</span>
                        </label>
                        <!-- Artist Card -->
                        <label class="role-card border-2 border-gray-200 p-4 rounded-lg cursor-pointer text-center" data-role="artist">
                            <input type="radio" name="role" value="artist" class="hidden">
                            <i class="fas fa-paint-brush fa-2x text-gray-400"></i>
                            <span class="block mt-2 font-semibold">Artist</span>
                        </label>
                        <!-- Institution Card -->
                        <label class="role-card border-2 border-gray-200 p-4 rounded-lg cursor-pointer text-center" data-role="institution">
                            <input type="radio" name="role" value="institution" class="hidden">
                            <i class="fas fa-university fa-2x text-gray-400"></i>
                            <span class="block mt-2 font-semibold">Institution</span>
                        </label>
                    </div>
                </div>

                <!-- Common Fields -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label for="username" class="block text-sm font-semibold text-gray-700">Username *</label>
                        <input type="text" name="username" id="username" required class="mt-1 block w-full rounded-md border-2 border-gray-400 shadow-sm focus:border-ucf-green focus:ring focus:ring-ucf-green focus:ring-opacity-50">
                    </div>
                    <div>
                        <label for="email" class="block text-sm font-semibold text-gray-700">Email Address *</label>
                        <input type="email" name="email" id="email" required class="mt-1 block w-full rounded-md border-2 border-gray-400 shadow-sm focus:border-ucf-green focus:ring focus:ring-ucf-green focus:ring-opacity-50">
                    </div>
                    <div class="md:col-span-2">
                        <label for="password" class="block text-sm font-semibold text-gray-700">Password *</label>
                        <input type="password" name="password" id="password" required class="mt-1 block w-full rounded-md border-2 border-gray-400 shadow-sm focus:border-ucf-green focus:ring focus:ring-ucf-green focus:ring-opacity-50">
                    </div>
                </div>

                <!-- Artist-Specific Fields (Initially hidden) -->
                <div id="artist-fields" class="hidden space-y-6 pt-6 border-t">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label for="first_name" class="block text-sm font-semibold text-gray-700">First Name *</label>
                            <input type="text" name="first_name" id="first_name" class="mt-1 block w-full rounded-md border-2 border-gray-400 shadow-sm focus:border-ucf-green focus:ring focus:ring-ucf-green focus:ring-opacity-50">
                        </div>
                        <div>
                            <label for="last_name" class="block text-sm font-semibold text-gray-700">Last Name *</label>
                            <input type="text" name="last_name" id="last_name" class="mt-1 block w-full rounded-md border-2 border-gray-400 shadow-sm focus:border-ucf-green focus:ring focus:ring-ucf-green focus:ring-opacity-50">
                        </div>
                         <div>
                            <label for="phone" class="block text-sm font-semibold text-gray-700">Phone *</label>
                            <input type="tel" name="phone" id="phone" class="mt-1 block w-full rounded-md border-2 border-gray-400 shadow-sm focus:border-ucf-green focus:ring focus:ring-ucf-green focus:ring-opacity-50">
                        </div>
                         <div>
                            <label for="address" class="block text-sm font-semibold text-gray-700">Address *</label>
                            <input type="text" name="address" id="address" class="mt-1 block w-full rounded-md border-2 border-gray-400 shadow-sm focus:border-ucf-green focus:ring focus:ring-ucf-green focus:ring-opacity-50">
                        </div>
                        <div class="md:col-span-2">
                             <label for="profile_photo" class="block text-sm font-semibold text-gray-700">Profile Photo (Max 100KB) *</label>
                             <input type="file" name="profile_photo" id="profile_photo" accept="image/*" 
                                class="mt-1 block w-full text-sm text-gray-700 border-2 border-gray-400 rounded-md shadow-sm
                                file:mr-4 file:py-2 file:px-4 file:rounded-l-md file:border-0
                                file:text-sm file:font-semibold file:bg-ucf-green file:text-white
                                hover:file:bg-ucf-green-dark cursor-pointer">
                             <p id="file-size-error" class="text-red-500 text-xs mt-1 hidden">File is too large! Please choose an image under 100 KB.</p>
                        </div>
                        <div class="md:col-span-2">
                             <label for="subscription_pack" class="block text-sm font-semibold text-gray-700">Choose Subscription Pack *</label>
                             <select name="subscription_pack" id="subscription_pack" class="mt-1 block w-full rounded-md border-2 border-gray-400 shadow-sm focus:border-ucf-green focus:ring focus:ring-ucf-green focus:ring-opacity-50">
                                 <?php if (empty($subscription_packs)): ?>
                                    <option value="" disabled>No subscription packs found.</option>
                                 <?php else: ?>
                                    <?php foreach ($subscription_packs as $pack): ?>
                                        <option value="<?php echo $pack['id']; ?>">
                                            <?php echo htmlspecialchars($pack['pack_name']) . ' (' . $pack['duration_days'] . ' days) - ₹' . number_format($pack['price'], 2); ?>
                                        </option>
                                    <?php endforeach; ?>
                                 <?php endif; ?>
                             </select>
                        </div>
                    </div>
                </div>
                
                <div class="pt-6">
                    <button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-lg font-medium text-white bg-ucf-green hover:bg-ucf-green-dark">
                        Register
                    </button>
                </div>
            </form>

             <div class="text-sm text-center mt-4">
                 <p class="text-gray-600">
                     Already have an account?
                     <a href="login.php" class="font-medium text-ucf-green hover:text-ucf-green-dark">
                         Log In
                     </a>
                 </p>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const roleSelector = document.getElementById('role-selector');
    const artistFields = document.getElementById('artist-fields');
    
    if (!roleSelector || !artistFields) {
        console.error("Error: Could not find all required elements for role selection.");
        return;
    }
    
    const artistInputs = artistFields.querySelectorAll('input, select, textarea');

    roleSelector.addEventListener('change', function (e) {
        const selectedRole = e.target.value;

        document.querySelectorAll('.role-card').forEach(card => {
            card.classList.remove('border-ucf-green');
            card.classList.add('border-gray-200');
            card.querySelector('i').classList.remove('text-ucf-green');
            card.querySelector('i').classList.add('text-gray-400');
        });
        
        const selectedCard = e.target.closest('.role-card');
        if (selectedCard) {
            selectedCard.classList.add('border-ucf-green');
            selectedCard.classList.remove('border-gray-200');
            selectedCard.querySelector('i').classList.add('text-ucf-green');
            selectedCard.querySelector('i').classList.remove('text-gray-400');
        }

        if (selectedRole === 'artist') {
            artistFields.classList.remove('hidden');
            artistInputs.forEach(input => input.required = true);
        } else { 
            artistFields.classList.add('hidden');
            artistInputs.forEach(input => input.required = false);
        }
    });

    const photoInput = document.getElementById('profile_photo');
    const errorMsg = document.getElementById('file-size-error');
    if (photoInput && errorMsg) {
        photoInput.addEventListener('change', function() {
            if (this.files[0]) {
                const fileSize = this.files[0].size;
                if (fileSize > 100 * 1024) { 
                    errorMsg.classList.remove('hidden');
                    this.value = ''; 
                } else {
                    errorMsg.classList.add('hidden');
                }
            }
        });
    } else {
        console.warn("Warning: Photo input or error message element not found.");
    }
});
</script>

<?php include 'footer.php'; ?>