{% extends "base.html" %}

{% block title %}Join RateRight - Quick Sign Up for Tradies{% endblock %}

{% block content %}
<style>
    .registration-hero { 
        background: linear-gradient(135deg, #1a237e 0%, #ff6b00 100%); 
        color: white; 
        text-align: center; 
        padding: 60px 20px; 
        position: relative;
    }
    .registration-hero h1 { 
        font-size: 42px; 
        margin: 0; 
        text-shadow: 2px 2px 4px rgba(0,0,0,0.3); 
    }
    .registration-hero p { 
        font-size: 18px; 
        margin: 20px auto; 
        max-width: 600px; 
        opacity: 0.95; 
    }
    .quick-signup-badge {
        background: rgba(255,255,255,0.2);
        padding: 8px 16px;
        border-radius: 20px;
        font-size: 14px;
        margin: 10px auto;
        display: inline-block;
    }

    .registration-container { 
        max-width: 700px; 
        margin: -30px auto 50px; 
        padding: 0 20px; 
        position: relative; 
        z-index: 10; 
    }
    
    .registration-card { 
        background: white; 
        border-radius: 20px; 
        box-shadow: 0 10px 40px rgba(0,0,0,0.1); 
        overflow: hidden; 
    }
    
    .card-header { 
        background: linear-gradient(45deg, #ff6b00, #ff9e00); 
        color: white; 
        padding: 30px; 
        text-align: center; 
    }
    .card-header h2 { 
        margin: 0; 
        font-size: 28px; 
    }
    .card-header p { 
        margin: 10px 0 0; 
        opacity: 0.9; 
    }
    .progress-steps {
        display: flex;
        justify-content: center;
        gap: 10px;
        margin-top: 15px;
    }
    .step-dot {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: rgba(255,255,255,0.3);
        transition: all 0.3s;
    }
    .step-dot.active {
        background: white;
        transform: scale(1.2);
    }

    .card-body { 
        padding: 40px; 
    }
    
    .account-type-selection { 
        margin-bottom: 35px; 
    }
    .account-type-grid { 
        display: flex; 
        gap: 15px; 
        margin-top: 15px; 
    }
    .account-type-card { 
        flex: 1; 
        background: #f8f9fa; 
        border: 3px solid #e9ecef; 
        border-radius: 12px; 
        padding: 25px 15px; 
        text-align: center; 
        cursor: pointer; 
        transition: all 0.3s; 
        position: relative;
    }
    .account-type-card:hover { 
        transform: translateY(-2px); 
        box-shadow: 0 5px 15px rgba(0,0,0,0.1); 
    }
    .account-type-card.selected { 
        border-color: #ff6b00; 
        background: #fff3e0; 
        transform: translateY(-2px); 
    }
    .account-type-card.selected::after {
        content: '✓';
        position: absolute;
        top: 8px;
        right: 12px;
        background: #ff6b00;
        color: white;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        font-size: 12px;
    }
    .account-icon { 
        font-size: 32px; 
        margin-bottom: 10px; 
    }
    .account-type-card h3 { 
        color: #1a237e; 
        margin-bottom: 8px; 
        font-size: 18px; 
    }
    .account-type-card p {
        font-size: 13px;
        color: #666;
        margin: 0;
    }
    
    .form-section { 
        margin-bottom: 30px; 
    }
    .form-section h3 { 
        color: #1a237e; 
        font-size: 20px; 
        margin-bottom: 15px; 
        display: flex; 
        align-items: center; 
        gap: 8px; 
    }
    
    .form-row { 
        display: flex; 
        gap: 15px; 
        margin-bottom: 15px; 
    }
    .form-group { 
        flex: 1; 
    }
    
    .form-label { 
        display: block; 
        font-weight: 600; 
        color: #333; 
        margin-bottom: 6px; 
        font-size: 14px; 
    }
    .form-label.required::after { 
        content: ' *'; 
        color: #d32f2f; 
    }
    
    .form-control { 
        width: 100%; 
        padding: 12px 15px; 
        border: 2px solid #e9ecef; 
        border-radius: 8px; 
        font-size: 16px; 
        transition: all 0.3s; 
        box-sizing: border-box; 
    }
    .form-control:focus { 
        border-color: #ff6b00; 
        outline: none; 
        box-shadow: 0 0 0 3px rgba(255,107,0,0.1); 
    }
    
    .form-text { 
        font-size: 12px; 
        color: #666; 
        margin-top: 4px; 
    }
    
    .checkbox-group { 
        display: flex; 
        align-items: flex-start; 
        gap: 10px; 
        margin-bottom: 12px; 
    }
    .checkbox-input { 
        margin-top: 2px; 
        transform: scale(1.1); 
    }
    .checkbox-label { 
        font-size: 14px; 
        line-height: 1.3; 
    }
    
    .optional-section {
        background: #f8f9fa;
        border: 1px solid #e9ecef;
        border-radius: 10px;
        padding: 20px;
        margin: 25px 0;
    }
    .optional-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
    }
    .optional-content {
        margin-top: 15px;
        display: none;
    }
    .optional-content.show {
        display: block;
    }
    .toggle-icon {
        transition: transform 0.3s;
    }
    .toggle-icon.rotated {
        transform: rotate(180deg);
    }
    
    .completion-later {
        background: linear-gradient(45deg, #e3f2fd, #f3e5f5);
        border: 2px dashed #2196f3;
        border-radius: 10px;
        padding: 20px;
        text-align: center;
        margin: 25px 0;
    }
    .completion-later h4 {
        color: #1565c0;
        margin-bottom: 10px;
    }
    .completion-later p {
        color: #666;
        margin: 0;
        font-size: 14px;
    }
    
    .compliance-section { 
        background: #e8f5e8; 
        border: 2px solid #4caf50; 
        border-radius: 10px; 
        padding: 20px; 
        margin: 25px 0; 
    }
    .compliance-section h3 { 
        color: #2e7d32; 
        font-size: 18px;
    }
    
    .submit-section { 
        text-align: center; 
        padding-top: 20px; 
        border-top: 2px solid #f0f0f0; 
    }
    .submit-btn { 
        background: linear-gradient(45deg, #ff6b00, #ff9e00); 
        color: white; 
        padding: 16px 40px; 
        border: none; 
        border-radius: 8px; 
        font-size: 18px; 
        font-weight: bold; 
        cursor: pointer; 
        transition: all 0.3s; 
        box-shadow: 0 4px 15px rgba(255,107,0,0.3); 
    }
    .submit-btn:hover { 
        transform: translateY(-2px); 
        box-shadow: 0 6px 20px rgba(255,107,0,0.4); 
    }
    .submit-btn:disabled { 
        opacity: 0.6; 
        cursor: not-allowed; 
        transform: none; 
    }
    
    .login-link { 
        margin-top: 20px; 
        text-align: center; 
        color: #666; 
    }
    .login-link a { 
        color: #ff6b00; 
        text-decoration: none; 
        font-weight: 600; 
    }
    
    .alerts { 
        margin-bottom: 20px; 
    }
    .alert { 
        padding: 12px 15px; 
        border-radius: 8px; 
        margin-bottom: 10px; 
    }
    .alert-error { 
        background: #ffebee; 
        color: #c62828; 
        border-left: 4px solid #d32f2f; 
    }
    .alert-success { 
        background: #e8f5e8; 
        color: #2e7d32; 
        border-left: 4px solid #4caf50; 
    }
    
    @media (max-width: 768px) {
        .registration-hero h1 { font-size: 32px; }
        .registration-hero p { font-size: 16px; }
        .card-body { padding: 25px; }
        .account-type-grid { flex-direction: column; }
        .form-row { flex-direction: column; }
        .registration-container { margin-top: -20px; }
    }
</style>

<section class="registration-hero">
    <h1>Quick Tradie Sign Up</h1>
    <p>Get started in under 2 minutes. Complete your profile later for better job matches.</p>
    <div class="quick-signup-badge">⚡ 2 min setup • Profile completion later</div>
</section>

<div class="registration-container">
    <div class="registration-card">
        <div class="card-header">
            <h2>🛠️ Join RateRight</h2>
            <p>Essential info first, details later</p>
            <div class="progress-steps">
                <div class="step-dot active"></div>
                <div class="step-dot"></div>
                <div class="step-dot"></div>
            </div>
        </div>
        
        <div class="card-body">
            <div class="alerts" id="registration-alerts"></div>
            
            <form id="registration-form">
                <!-- Account Type Selection -->
                <div class="account-type-selection">
                    <h3>👤 I want to...</h3>
                    <div class="account-type-grid">
                        <div class="account-type-card" data-type="worker" id="worker-card">
                            <div class="account-icon">👷</div>
                            <h3>Find Work</h3>
                            <p>I'm a tradie looking for jobs</p>
                        </div>
                        <div class="account-type-card" data-type="contractor" id="contractor-card">
                            <div class="account-icon">🏢</div>
                            <h3>Hire Workers</h3>
                            <p>I need to hire tradies</p>
                        </div>
                    </div>
                    <input type="hidden" id="role" name="role" value="worker">
                </div>

                <!-- Essential Information Only -->
                <div class="form-section">
                    <h3>✨ Your Details</h3>
                    <div class="form-row">
                        <div class="form-group">
                            <label for="first_name" class="form-label required">First Name</label>
                            <input type="text" class="form-control" id="first_name" name="first_name" required>
                        </div>
                        <div class="form-group">
                            <label for="last_name" class="form-label required">Last Name</label>
                            <input type="text" class="form-control" id="last_name" name="last_name" required>
                        </div>
                    </div>
                    
                    <div class="form-row">
                        <div class="form-group">
                            <label for="email" class="form-label required">Email</label>
                            <input type="email" class="form-control" id="email" name="email" required>
                        </div>
                        <div class="form-group">
                            <label for="phone_number" class="form-label required">Mobile</label>
                            <input type="tel" class="form-control" id="phone_number" name="phone_number" placeholder="0412 345 678" required>
                        </div>
                    </div>
                    
                    <div class="form-row">
                        <div class="form-group">
                            <label for="location" class="form-label required">Work Location</label>
                            <input type="text" class="form-control" id="location" name="location" placeholder="Sydney, NSW" required>
                        </div>
                        <div class="form-group">
                            <label for="abn_number" class="form-label required">ABN</label>
                            <input type="text" class="form-control" id="abn_number" name="abn_number" placeholder="12 345 678 901" required>
                            <div class="form-text">Required by Australian law</div>
                        </div>
                    </div>
                    
                    <div class="form-row">
                        <div class="form-group">
                            <label for="password" class="form-label required">Password</label>
                            <input type="password" class="form-control" id="password" name="password" required>
                            <div class="form-text">At least 8 characters</div>
                        </div>
                        <div class="form-group">
                            <label for="confirm_password" class="form-label required">Confirm</label>
                            <input type="password" class="form-control" id="confirm_password" name="confirm_password" required>
                        </div>
                    </div>
                </div>

                <!-- Optional Details - Collapsible -->
                <div class="optional-section">
                    <div class="optional-header" onclick="toggleOptionalSection()">
                        <h4>🔧 Add Trade Details (Optional)</h4>
                        <span class="toggle-icon" id="toggle-icon">▼</span>
                    </div>
                    <div class="optional-content" id="optional-content">
                        <div class="form-row worker-only">
                            <div class="form-group">
                                <label for="primary_trade" class="form-label">Primary Trade</label>
                                <select class="form-control" id="primary_trade" name="primary_trade">
                                    <option value="">Select your trade...</option>
                                    <optgroup label="🟢 LOW RISK TRADES">
                                        <option value="carpentry">Carpentry</option>
                                        <option value="painting">Painting</option>
                                        <option value="tiling">Tiling</option>
                                        <option value="landscaping">Landscaping</option>
                                        <option value="general_labour">General Labour</option>
                                    </optgroup>
                                    <optgroup label="🟡 MEDIUM RISK TRADES">
                                        <option value="plumbing">Plumbing</option>
                                        <option value="bricklaying">Bricklaying</option>
                                        <option value="concreting">Concreting</option>
                                        <option value="plastering">Plastering</option>
                                        <option value="flooring">Flooring</option>
                                        <option value="formwork_carpentry">Formwork Carpentry</option>
                                    </optgroup>
                                    <optgroup label="🟠 HIGH RISK TRADES">
                                        <option value="electrical">Electrical</option>
                                        <option value="roofing">Roofing</option>
                                        <option value="scaffolding">Scaffolding</option>
                                        <option value="demolition">Demolition</option>
                                        <option value="excavation">Excavation</option>
                                        <option value="hvac">HVAC</option>
                                        <option value="air_conditioning">Air Conditioning</option>
                                        <option value="steelfixing">Steelfixing</option>
                                    </optgroup>
                                    <optgroup label="🔴 EXTREME RISK TRADES">
                                        <option value="crane_operation">Crane Operation</option>
                                        <option value="high_voltage_electrical">High Voltage Electrical</option>
                                        <option value="asbestos_removal">Asbestos Removal</option>
                                        <option value="explosive_works">Explosive Works</option>
                                    </optgroup>
                                </select>
                                <div class="form-text">Risk level affects insurance requirements and safety protocols</div>
                            </div>
                            <div class="form-group">
                                <div style="margin-top: 30px;">
                                    <div class="checkbox-group">
                                        <input type="checkbox" class="checkbox-input" id="has_white_card" name="has_white_card">
                                        <label for="has_white_card" class="checkbox-label">I have a valid White Card</label>
                                    </div>
                                    <div class="form-text">Required for medium+ risk trades (🟡🟠🔴)</div>
                                </div>
                            </div>
                        </div>
                        <div class="form-row contractor-only" style="display: none;">
                            <div class="form-group">
                                <label for="business_name" class="form-label">Business Name</label>
                                <input type="text" class="form-control" id="business_name" name="business_name" placeholder="Smith Construction Pty Ltd">
                            </div>
                            <div class="form-group">
                                <div style="margin-top: 30px;">
                                    <div class="checkbox-group">
                                        <input type="checkbox" class="checkbox-input" id="gst_registered" name="gst_registered">
                                        <label for="gst_registered" class="checkbox-label">GST Registered</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Profile Completion Later -->
                <div class="completion-later">
                    <h4>🚀 Complete Later for Better Matches</h4>
                    <p>After signup, add insurance details, certifications, and work history to get premium job offers and build your rating faster.</p>
                    <div style="margin-top: 15px; padding: 10px; background: rgba(255,255,255,0.7); border-radius: 5px; font-size: 12px;">
                        <strong>Risk Level Guide:</strong> 🟢 Low ($1M insurance) • 🟡 Medium ($2M insurance) • 🟠 High ($5M insurance) • 🔴 Extreme ($10M insurance)
                    </div>
                </div>

                <!-- Legal Compliance - Simplified -->
                <div class="compliance-section">
                    <h3>⚖️ Quick Legal Bits</h3>
                    <div class="checkbox-group">
                        <input type="checkbox" class="checkbox-input" id="terms_accepted" name="terms_accepted" required>
                        <label for="terms_accepted" class="checkbox-label">
                            I agree to the <a href="/terms" target="_blank">Terms</a> and <a href="/privacy" target="_blank">Privacy Policy</a>
                        </label>
                    </div>
                    <div class="checkbox-group">
                        <input type="checkbox" class="checkbox-input" id="compliance_acknowledgment" name="compliance_acknowledgment" required>
                        <label for="compliance_acknowledgment" class="checkbox-label">
                            I understand this platform follows <strong>Australian WHS and Fair Work laws</strong>
                        </label>
                    </div>
                </div>

                <div class="submit-section">
                    <button type="submit" class="submit-btn" id="submit-btn">
                        🚀 Create Account
                    </button>
                    
                    <div class="login-link">
                        Already have an account? <a href="/login">Sign in here</a>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
// Account type selection
document.querySelectorAll('.account-type-card').forEach(card => {
    card.addEventListener('click', function() {
        document.querySelectorAll('.account-type-card').forEach(c => c.classList.remove('selected'));
        this.classList.add('selected');
        
        const accountType = this.dataset.type;
        document.getElementById('role').value = accountType;
        
        // Show/hide relevant optional fields
        const workerFields = document.querySelectorAll('.worker-only');
        const contractorFields = document.querySelectorAll('.contractor-only');
        
        workerFields.forEach(field => field.style.display = accountType === 'worker' ? 'block' : 'none');
        contractorFields.forEach(field => field.style.display = accountType === 'contractor' ? 'block' : 'none');
        
        // Update progress
        updateProgress(1);
    });
});

// Pre-select worker
document.getElementById('worker-card').click();

// Toggle optional section
function toggleOptionalSection() {
    const content = document.getElementById('optional-content');
    const icon = document.getElementById('toggle-icon');
    
    content.classList.toggle('show');
    icon.classList.toggle('rotated');
    
    if (content.classList.contains('show')) {
        updateProgress(2);
    }
}

// Progress tracking
function updateProgress(step) {
    const dots = document.querySelectorAll('.step-dot');
    dots.forEach((dot, index) => {
        dot.classList.toggle('active', index < step);
    });
}

// Trade selection handler
document.getElementById('primary_trade').addEventListener('change', function() {
    const selectedTrade = this.value;
    const whiteCardGroup = document.querySelector('#has_white_card').closest('.form-group');
    const whiteCardText = whiteCardGroup.querySelector('.form-text');
    
    // Update White Card text based on risk level
    if (selectedTrade.includes('electrical') || selectedTrade.includes('roofing') || 
        selectedTrade.includes('scaffolding') || selectedTrade.includes('demolition') ||
        selectedTrade.includes('excavation') || selectedTrade.includes('hvac') ||
        selectedTrade.includes('steelfixing') || selectedTrade.includes('crane') ||
        selectedTrade.includes('asbestos') || selectedTrade.includes('explosive')) {
        whiteCardText.innerHTML = '<strong>White Card REQUIRED</strong> for HIGH/EXTREME risk trades 🟠🔴';
        whiteCardText.style.color = '#d32f2f';
    } else if (selectedTrade.includes('plumbing') || selectedTrade.includes('bricklaying') ||
               selectedTrade.includes('concreting') || selectedTrade.includes('plastering') ||
               selectedTrade.includes('flooring') || selectedTrade.includes('formwork')) {
        whiteCardText.innerHTML = '<strong>White Card recommended</strong> for MEDIUM risk trades 🟡';
        whiteCardText.style.color = '#ff9800';
    } else {
        whiteCardText.innerHTML = 'Required for medium+ risk trades (🟡🟠🔴)';
        whiteCardText.style.color = '#666';
    }
});

// Input formatting
document.getElementById('phone_number').addEventListener('input', function(e) {
    let value = e.target.value.replace(/\D/g, '');
    if (value.length > 10) value = value.slice(0,10);
    if (value.length >= 4) value = value.replace(/(\d{4})(\d{3})(\d{3})/, '$1 $2 $3');
    e.target.value = value;
});

document.getElementById('abn_number').addEventListener('input', function(e) {
    let value = e.target.value.replace(/\D/g, '');
    if (value.length > 11) value = value.slice(0,11);
    if (value.length >= 2) value = value.replace(/(\d{2})(\d{3})(\d{3})(\d{3})/, '$1 $2 $3 $4');
    e.target.value = value;
    
    // Real-time ABN validation
    if (value.replace(/\s/g, '').length === 11) {
        const cleanAbn = value.replace(/\s/g, '');
        const isValid = validateABNChecksum(cleanAbn);
        const abnField = e.target;
        const formText = abnField.nextElementSibling;
        
        if (isValid) {
            abnField.style.borderColor = '#4caf50';
            formText.innerHTML = '✅ Valid ABN format';
            formText.style.color = '#4caf50';
        } else {
            abnField.style.borderColor = '#d32f2f';
            formText.innerHTML = '❌ Invalid ABN checksum';
            formText.style.color = '#d32f2f';
        }
    }
});

// ABN checksum validation (Australian algorithm)
function validateABNChecksum(abn) {
    if (abn.length !== 11) return false;
    
    const weights = [10, 1, 3, 5, 7, 9, 11, 13, 15, 17, 19];
    let total = 0;
    
    for (let i = 0; i < 11; i++) {
        let value = parseInt(abn[i]);
        if (i === 0) value -= 1; // Subtract 1 from first digit
        total += value * weights[i];
    }
    
    return total % 89 === 0;
}

// Form submission
document.getElementById('registration-form').addEventListener('submit', async function(e) {
    e.preventDefault();
    
    const alertContainer = document.getElementById('registration-alerts');
    const submitBtn = document.getElementById('submit-btn');
    alertContainer.innerHTML = '';
    
    updateProgress(3);
    
    // Basic validation
    const password = document.getElementById('password').value;
    const confirm = document.getElementById('confirm_password').value;
    
    if (password !== confirm) {
        showError('Passwords do not match', alertContainer);
        return;
    }
    
    if (password.length < 8) {
        showError('Password must be at least 8 characters', alertContainer);
        return;
    }
    
    // ABN validation with legal compliance
    const abn = document.getElementById('abn_number').value.replace(/\s/g, '');
    if (abn.length !== 11) {
        showError('ABN must be 11 digits', alertContainer);
        return;
    }
    
    if (!validateABNChecksum(abn)) {
        showError('Invalid ABN - please check the number is correct', alertContainer);
        return;
    }
    
    // Collect data
    const formData = new FormData(this);
    const data = Object.fromEntries(formData.entries());
    
    // Add checkboxes
    data.has_white_card = document.getElementById('has_white_card').checked;
    data.gst_registered = document.getElementById('gst_registered').checked;
    data.terms_accepted = document.getElementById('terms_accepted').checked;
    data.compliance_acknowledgment = document.getElementById('compliance_acknowledgment').checked;
    
    // Set required backend fields with sensible defaults
    data.privacy_consent = true; // Covered by combined terms checkbox
    data.whs_acknowledgment = true; // Covered by compliance checkbox
    data.fair_work_acknowledgment = true; // Covered by compliance checkbox
    
    try {
        submitBtn.innerHTML = '⏳ Creating Account...';
        submitBtn.disabled = true;
        
        const response = await fetch('/api/auth/register', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(data)
        });
        
        if (!response.ok) {
            const error = await response.json();
            throw new Error(error.message || 'Registration failed');
        }
        
        showSuccess('Account created! Please check your email to verify.', alertContainer);
        
        setTimeout(() => {
            window.location.href = '/login?message=Please check your email to verify your account';
        }, 2000);
        
    } catch (error) {
        showError(error.message || 'Registration failed. Please try again.', alertContainer);
    } finally {
        submitBtn.innerHTML = '🚀 Create Account';
        submitBtn.disabled = false;
    }
});

function showError(message, container) {
    container.innerHTML = `
        <div class="alert alert-error">
            <strong>❌</strong> ${message}
        </div>
    `;
    container.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
}

function showSuccess(message, container) {
    container.innerHTML = `
        <div class="alert alert-success">
            <strong>✅</strong> ${message}
        </div>
    `;
    container.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
}
</script>
{% endblock %}