{% extends "base.html" %}
{% set hide_header = true %}
{% set hide_footer = true %}

{% block title %}Create Account - Ursa Customer Portal{% endblock %}

{% block content %}
<div class="auth-container">
    <div class="auth-card" style="max-width: 550px;">
        <div class="auth-header">
            <div class="auth-logo">
                <svg class="logo-icon" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" style="width: 40px; height: 40px; margin-right: 8px;">
                    <circle cx="8" cy="12" r="2.5" fill="#00d9a6"/>
                    <circle cx="14" cy="8" r="2.5" fill="#00d9a6"/>
                    <circle cx="22" cy="10" r="2.5" fill="#00d9a6"/>
                    <circle cx="20" cy="18" r="2.5" fill="#00d9a6"/>
                    <circle cx="28" cy="22" r="2.5" fill="#e94560"/>
                    <circle cx="34" cy="28" r="2.5" fill="#e94560"/>
                    <circle cx="36" cy="36" r="2.5" fill="#e94560"/>
                    <path d="M8 12L14 8L22 10L20 18L8 12" stroke="currentColor" stroke-width="1" stroke-opacity="0.4"/>
                    <path d="M22 10L28 22L34 28L36 36" stroke="currentColor" stroke-width="1" stroke-opacity="0.4"/>
                </svg>
                Ursa
            </div>
            <h1 class="auth-title">Create your account</h1>
            <p class="auth-subtitle">Get started with genomics processing in minutes</p>
        </div>
        
        {% if error %}
        <div class="alert alert-error">
            <i class="fas fa-exclamation-circle"></i>
            <div>
                <span>{{ error }}</span>
                {% if error_code %}
                <p class="form-text mb-0">Reference ID: <code>{{ error_code }}</code></p>
                {% endif %}
            </div>
        </div>
        {% endif %}
        
        {% if success %}
        <div class="alert alert-success">
            <i class="fas fa-check-circle"></i>
            <div>
                <strong>Account Created!</strong>
                <p class="mb-0" style="font-size: 0.875rem;">{{ success }}</p>
            </div>
        </div>
        {% endif %}
        
        <form method="POST" action="/portal/register" id="register-form">
            <div class="grid grid-2">
                <div class="form-group">
                    <label for="customer_name" class="form-label required">Organization Name</label>
                    <input type="text" id="customer_name" name="customer_name" class="form-control" 
                           placeholder="Acme Genomics Lab" required>
                </div>
                
                <div class="form-group">
                    {% if auth_enabled %}
                    <label for="session_email" class="form-label required">Authenticated Email</label>
                    <input
                        type="email"
                        id="session_email"
                        class="form-control"
                        value="{{ pending_signup_email or '' }}"
                        readonly
                        disabled
                    >
                    <p class="form-text">Email is sourced from your Cognito sign-in session.</p>
                    {% else %}
                    <label for="email" class="form-label required">Email Address</label>
                    <input type="email" id="email" name="email" class="form-control" 
                           placeholder="admin@company.com" required autocomplete="email">
                    {% endif %}
                </div>
            </div>
            
            <hr style="margin: var(--spacing-lg) 0; border-color: var(--color-gray-200);">
            
            <h4 style="margin-bottom: var(--spacing-md);">Resource Limits</h4>
            
            <div class="grid grid-2">
                <div class="form-group">
                    <label for="max_concurrent_worksets" class="form-label">Max Concurrent Worksets</label>
                    <select id="max_concurrent_worksets" name="max_concurrent_worksets" class="form-control form-select">
                        <option value="5">5 worksets (Starter)</option>
                        <option value="10" selected>10 worksets (Standard)</option>
                        <option value="25">25 worksets (Professional)</option>
                        <option value="50">50 worksets (Enterprise)</option>
                    </select>
                </div>
                
                <div class="form-group">
                    <label for="max_storage_gb" class="form-label">Max Storage</label>
                    <select id="max_storage_gb" name="max_storage_gb" class="form-control form-select">
                        <option value="100">100 GB (Starter)</option>
                        <option value="500" selected>500 GB (Standard)</option>
                        <option value="2000">2 TB (Professional)</option>
                        <option value="10000">10 TB (Enterprise)</option>
                    </select>
                </div>
            </div>
            
            <h4 style="margin-bottom: var(--spacing-md);">Billing Information (Optional)</h4>
            
            <div class="grid grid-2">
                <div class="form-group">
                    <label for="billing_account_id" class="form-label">AWS Billing Account ID</label>
                    <input type="text" id="billing_account_id" name="billing_account_id" class="form-control" 
                           placeholder="123456789012">
                </div>
                
                <div class="form-group">
                    <label for="cost_center" class="form-label">Cost Center (chargeback tag)</label>
                    <input type="text" id="cost_center" name="cost_center" class="form-control" 
                           placeholder="e.g., GENOMICS-001">
                    <p class="form-text">
                        Optional. Used for internal chargeback reporting and applied as the AWS tag <code>CostCenter</code>.
                        This is not an AWS Budget / spending limit.
                    </p>
                </div>
            </div>
            
            <h4 style="margin-bottom: var(--spacing-md);">S3 Storage Configuration</h4>

            <div class="form-group">
                <label class="form-label">Storage Option</label>
                <div class="radio-group">
                    <label class="radio-label">
                        <input type="radio" name="s3_option" value="auto" checked onchange="toggleBucketInput()">
                        <span><strong>Auto-provision</strong> - We'll create an S3 bucket for you</span>
                    </label>
                    <label class="radio-label">
                        <input type="radio" name="s3_option" value="byob" onchange="toggleBucketInput()">
                        <span><strong>Bring Your Own Bucket</strong> - Use your existing S3 bucket</span>
                    </label>
                </div>
            </div>

            <div id="auto-provision-section">
                <div class="form-group">
                    <label for="bucket_region" class="form-label">Bucket Region</label>
                    <select id="bucket_region" name="bucket_region" class="form-control form-select">
                        {% for region in allowed_regions | default(['us-west-2', 'us-east-1', 'ap-south-1', 'eu-central-1']) %}
                        <option value="{{ region }}" {% if region == default_region %}selected{% endif %}>
                            {{ region }}
                        </option>
                        {% endfor %}
                    </select>
                    <p class="form-text">
                        <i class="fas fa-info-circle text-info"></i>
                        Select the AWS region closest to your data and compute resources to minimize transfer costs.
                    </p>
                </div>
            </div>

            <div id="byob-section" style="display: none;">
                <div class="form-group">
                    <label for="custom_s3_bucket" class="form-label">Your S3 Bucket Name</label>
                    <div class="input-group">
                        <input type="text" id="custom_s3_bucket" name="custom_s3_bucket" class="form-control"
                               placeholder="my-genomics-bucket">
                        <button type="button" class="btn btn-secondary" onclick="validateBucket()">
                            <i class="fas fa-check-circle"></i> Validate
                        </button>
                    </div>
                    <p class="form-text">Enter your bucket name and click Validate to check permissions</p>
                </div>

                <div id="bucket-validation-result" style="display: none;"></div>

                <div class="alert alert-warning" style="font-size: 0.85rem;">
                    <i class="fas fa-info-circle"></i>
                    <div>
                        <strong>Cross-Account Access Required</strong>
                        <p class="mb-0">Your bucket needs a policy allowing Ursa to read/write data.
                        Click Validate to check permissions and get setup instructions.</p>
                    </div>
                </div>
            </div>

            <hr style="margin: var(--spacing-lg) 0; border-color: var(--color-gray-200);">

            <div class="form-group">
                <label class="checkbox-label">
                    <input type="checkbox" name="terms" id="terms" required>
                    <span>I agree to the <a href="/terms" target="_blank">Terms of Service</a> and <a href="/privacy" target="_blank">Privacy Policy</a></span>
                </label>
            </div>

            <button type="submit" class="btn btn-primary btn-block btn-lg">
                <i class="fas fa-user-plus"></i>
                Create Account
            </button>
        </form>
        
        <div class="auth-footer">
            <p>Already have an account? <a href="/portal/login">Sign in</a></p>
        </div>
    </div>
</div>

<style>
.checkbox-label, .radio-label {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    cursor: pointer;
}
.checkbox-label input, .radio-label input {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--color-accent);
}
.radio-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}
.input-group {
    display: flex;
    gap: var(--spacing-sm);
}
.input-group .form-control {
    flex: 1;
}
#bucket-validation-result {
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
}
#bucket-validation-result.success {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid var(--color-success);
}
#bucket-validation-result.error {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid var(--color-error);
}
#bucket-validation-result.warning {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid var(--color-warning);
}
.validation-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin: var(--spacing-xs) 0;
}
.validation-item i.fa-check { color: var(--color-success); }
.validation-item i.fa-times { color: var(--color-error); }
.validation-item i.fa-exclamation-triangle { color: var(--color-warning); }
</style>

<script>
function toggleBucketInput() {
    const byobSection = document.getElementById('byob-section');
    const autoProvisionSection = document.getElementById('auto-provision-section');
    const byobRadio = document.querySelector('input[name="s3_option"][value="byob"]');
    const isByob = byobRadio.checked;
    byobSection.style.display = isByob ? 'block' : 'none';
    autoProvisionSection.style.display = isByob ? 'none' : 'block';
}

async function validateBucket() {
    const bucketInput = document.getElementById('custom_s3_bucket');
    const resultDiv = document.getElementById('bucket-validation-result');
    const bucket = bucketInput.value.trim();

    if (!bucket) {
        resultDiv.style.display = 'block';
        resultDiv.className = 'error';
        resultDiv.innerHTML = '<i class="fas fa-exclamation-circle"></i> Please enter a bucket name';
        return;
    }

    resultDiv.style.display = 'block';
    resultDiv.className = '';
    resultDiv.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Validating bucket...';

    try {
        const response = await fetch('/api/s3/validate-bucket', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ bucket })
        });

        const result = await response.json();

        let html = '<div class="validation-results">';

        // Status items
        html += `<div class="validation-item">
            <i class="fas ${result.exists ? 'fa-check' : 'fa-times'}"></i>
            <span>Bucket exists</span>
        </div>`;
        html += `<div class="validation-item">
            <i class="fas ${result.accessible ? 'fa-check' : 'fa-times'}"></i>
            <span>Bucket accessible</span>
        </div>`;
        html += `<div class="validation-item">
            <i class="fas ${result.can_list ? 'fa-check' : 'fa-times'}"></i>
            <span>Can list contents</span>
        </div>`;
        html += `<div class="validation-item">
            <i class="fas ${result.can_read ? 'fa-check' : 'fa-times'}"></i>
            <span>Can read objects</span>
        </div>`;
        html += `<div class="validation-item">
            <i class="fas ${result.can_write ? 'fa-check' : 'fa-exclamation-triangle'}"></i>
            <span>Can write results ${result.can_write ? '' : '(optional but recommended)'}</span>
        </div>`;

        // Errors
        if (result.errors && result.errors.length > 0) {
            html += '<div style="margin-top: var(--spacing-sm); color: var(--color-error);">';
            result.errors.forEach(err => {
                html += `<div><i class="fas fa-times-circle"></i> ${err}</div>`;
            });
            html += '</div>';
        }

        // Warnings
        if (result.warnings && result.warnings.length > 0) {
            html += '<div style="margin-top: var(--spacing-sm); color: var(--color-warning);">';
            result.warnings.forEach(warn => {
                html += `<div><i class="fas fa-exclamation-triangle"></i> ${warn}</div>`;
            });
            html += '</div>';
        }

        html += '</div>';

        resultDiv.className = result.fully_configured ? 'success' : (result.valid ? 'warning' : 'error');
        resultDiv.innerHTML = html;

        // Show setup instructions link if not fully configured
        if (!result.fully_configured && result.setup_instructions) {
            const instructionsBtn = document.createElement('button');
            instructionsBtn.type = 'button';
            instructionsBtn.className = 'btn btn-sm btn-secondary mt-sm';
            instructionsBtn.innerHTML = '<i class="fas fa-book"></i> View Setup Instructions';
            instructionsBtn.onclick = () => {
                const modal = document.createElement('div');
                modal.className = 'modal-overlay';
                modal.innerHTML = `
                    <div class="modal" style="max-width: 700px; max-height: 80vh; overflow-y: auto;">
                        <div class="modal-header">
                            <h3>S3 Bucket Setup Instructions</h3>
                            <button class="btn btn-ghost" onclick="this.closest('.modal-overlay').remove()">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>
                        <div class="modal-body" style="white-space: pre-wrap; font-family: monospace; font-size: 0.85rem;">
                            ${result.setup_instructions}
                        </div>
                    </div>
                `;
                document.body.appendChild(modal);
            };
            resultDiv.appendChild(instructionsBtn);
        }

    } catch (error) {
        resultDiv.className = 'error';
        resultDiv.innerHTML = `<i class="fas fa-exclamation-circle"></i> Validation failed: ${error.message}`;
    }
}
</script>
{% endblock %}