{{!
    Adeptus Insights - Subscription Installation Step
    Enterprise-grade subscription selection with Monthly/Annual toggle
}}

<style>
.adeptus-installation-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
}

.installation-header {
    background: linear-gradient(135deg, #0ea5e9 0%, #2563eb 100%);
    color: white;
    padding: 40px;
    border-radius: 16px;
    text-align: center;
    margin-bottom: 30px;
    box-shadow: 0 10px 40px rgba(37, 99, 235, 0.3);
}

.installation-header h1 {
    margin: 0;
    font-size: 32px;
    font-weight: 700;
}

.installation-header p {
    margin: 15px 0 0 0;
    opacity: 0.9;
    font-size: 18px;
}

/* Progress Steps */
.installation-progress {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 40px;
    flex-wrap: wrap;
    gap: 10px;
}

.progress-step {
    display: flex;
    align-items: center;
    gap: 10px;
}

.progress-step .step-number {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s ease;
}

.progress-step.completed .step-number {
    background: #10b981;
    color: white;
}

.progress-step.current .step-number {
    background: #2563eb;
    color: white;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.2);
}

.progress-step.pending .step-number {
    background: #e5e7eb;
    color: #9ca3af;
}

.progress-step .step-label {
    font-weight: 500;
    font-size: 14px;
}

.progress-connector {
    width: 40px;
    height: 2px;
    background: #e5e7eb;
    margin: 0 5px;
}

.progress-connector.completed {
    background: #10b981;
}

/* Billing Toggle */
.billing-toggle-container {
    display: flex;
    justify-content: center;
    margin-bottom: 40px;
}

.billing-toggle {
    display: inline-flex;
    align-items: center;
    background: #f3f4f6;
    border-radius: 50px;
    padding: 6px;
    gap: 4px;
}

.billing-toggle-btn {
    padding: 12px 28px;
    border: none;
    background: transparent;
    border-radius: 50px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #6b7280;
}

.billing-toggle-btn.active {
    background: white;
    color: #1f2937;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.billing-toggle-btn:hover:not(.active) {
    color: #374151;
}

.savings-badge {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 20px;
    margin-left: 8px;
    text-transform: uppercase;
}

/* Plans Grid */
.plans-section {
    margin-bottom: 40px;
}

.plans-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px;
    max-width: 1100px;
    margin: 0 auto;
}

/* Plan Card */
.plan-card {
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 16px;
    padding: 32px 28px;
    position: relative;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.plan-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.plan-card.popular {
    border-color: #2563eb;
    box-shadow: 0 8px 30px rgba(37, 99, 235, 0.15);
}

.plan-card.current {
    border-color: #10b981;
    background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
}

/* Plan Badge */
.plan-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.plan-badge.popular {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    color: white;
}

.plan-badge.current {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
}

/* Plan Header */
.plan-header {
    text-align: center;
    margin-bottom: 24px;
    padding-top: 8px;
}

.plan-name {
    font-size: 24px;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 8px;
}

.plan-description {
    color: #6b7280;
    font-size: 14px;
    line-height: 1.5;
}

/* Plan Price */
.plan-price {
    text-align: center;
    margin-bottom: 28px;
    padding-bottom: 28px;
    border-bottom: 1px solid #e5e7eb;
}

.price-amount {
    font-size: 48px;
    font-weight: 800;
    color: #1f2937;
    line-height: 1;
}

.price-amount .currency {
    font-size: 24px;
    vertical-align: top;
    margin-right: 2px;
}

.price-period {
    color: #6b7280;
    font-size: 14px;
    margin-top: 4px;
}

.price-free {
    font-size: 48px;
    font-weight: 800;
    color: #10b981;
}

/* Plan Limits */
.plan-limits {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid #e5e7eb;
}

.limit-item {
    text-align: center;
    padding: 12px;
    background: #f9fafb;
    border-radius: 10px;
}

.limit-value {
    font-size: 18px;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 4px;
}

.limit-label {
    font-size: 12px;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Plan Features */
.plan-features {
    flex: 1;
    margin-bottom: 24px;
}

.plan-features ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.plan-features li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
    color: #374151;
    font-size: 14px;
    line-height: 1.4;
}

.plan-features li i {
    color: #10b981;
    font-size: 14px;
    margin-top: 2px;
    flex-shrink: 0;
}

/* Plan Action */
.plan-action {
    margin-top: auto;
}

.plan-btn {
    display: block;
    width: 100%;
    padding: 14px 24px;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    text-decoration: none;
}

.plan-btn-primary {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    color: white;
}

.plan-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.3);
    color: white;
    text-decoration: none;
}

.plan-btn-current {
    background: #e5e7eb;
    color: #6b7280;
    cursor: default;
}

.plan-btn-outline {
    background: white;
    border: 2px solid #e5e7eb;
    color: #374151;
}

.plan-btn-outline:hover {
    border-color: #2563eb;
    color: #2563eb;
    text-decoration: none;
}

/* Responsive */
@media (max-width: 768px) {
    .installation-progress {
        flex-direction: column;
        gap: 15px;
    }

    .progress-connector {
        display: none;
    }

    .plans-grid {
        grid-template-columns: 1fr;
    }

    .plan-limits {
        grid-template-columns: 1fr;
    }

    .billing-toggle-btn {
        padding: 10px 20px;
        font-size: 13px;
    }
}
</style>

<div class="adeptus-installation-container">
    <!-- Installation Header -->
    <div class="installation-header">
        <h1><i class="fa fa-rocket"></i> Choose Your Plan</h1>
        <p>Select the plan that best fits your institution's needs</p>
    </div>

    <!-- Installation Progress -->
    <div class="installation-progress">
        <div class="progress-step completed">
            <div class="step-number"><i class="fa fa-check"></i></div>
            <div class="step-label">Registration</div>
        </div>
        <div class="progress-connector completed"></div>
        <div class="progress-step current">
            <div class="step-number">2</div>
            <div class="step-label">Choose Plan</div>
        </div>
        <div class="progress-connector"></div>
        <div class="progress-step pending">
            <div class="step-number">3</div>
            <div class="step-label">Complete</div>
        </div>
    </div>

    <!-- Billing Toggle -->
    <div class="billing-toggle-container">
        <div class="billing-toggle">
            <button type="button" class="billing-toggle-btn active" data-interval="monthly">
                Monthly
            </button>
            <button type="button" class="billing-toggle-btn" data-interval="yearly">
                Annual
                {{#max_yearly_savings}}<span class="savings-badge">Save {{max_yearly_savings}}%</span>{{/max_yearly_savings}}
            </button>
        </div>
    </div>

    <!-- Plans Section -->
    <div class="plans-section">
        <div class="plans-grid" id="plans-container">
            {{#monthly_plans}}
            <div class="plan-card {{#is_popular}}popular{{/is_popular}} {{#is_current}}current{{/is_current}}" data-tier="{{tier}}" data-interval="monthly">
                {{#is_popular}}<div class="plan-badge popular">Most Popular</div>{{/is_popular}}
                {{#is_current}}<div class="plan-badge current">Current Plan</div>{{/is_current}}

                <div class="plan-header">
                    <div class="plan-name">{{short_name}}</div>
                    <div class="plan-description">{{description}}</div>
                </div>

                <div class="plan-price">
                    {{#is_free}}
                    <div class="price-free">Free</div>
                    <div class="price-period">Forever</div>
                    {{/is_free}}
                    {{^is_free}}
                    <div class="price-amount">
                        <span class="currency">$</span>{{price_formatted}}
                    </div>
                    <div class="price-period">per month</div>
                    {{/is_free}}
                </div>

                <div class="plan-limits">
                    <div class="limit-item">
                        <div class="limit-value">{{tokens_limit}}</div>
                        <div class="limit-label">AI Tokens</div>
                    </div>
                    <div class="limit-item">
                        <div class="limit-value">{{exports_limit}}</div>
                        <div class="limit-label">Exports/mo</div>
                    </div>
                    <div class="limit-item">
                        <div class="limit-value">{{reports_limit}}</div>
                        <div class="limit-label">Saved Reports</div>
                    </div>
                    <div class="limit-item">
                        <div class="limit-value">{{export_formats}}</div>
                        <div class="limit-label">Formats</div>
                    </div>
                </div>

                <div class="plan-features">
                    <ul>
                        {{#features}}
                        <li><i class="fa fa-check"></i> {{.}}</li>
                        {{/features}}
                    </ul>
                </div>

                <div class="plan-action">
                    {{#is_current}}
                    <button class="plan-btn plan-btn-current" disabled>
                        <i class="fa fa-check-circle"></i> Current Plan
                    </button>
                    {{/is_current}}
                    {{^is_current}}
                    {{#is_free}}
                    <button class="plan-btn plan-btn-outline select-plan-btn" data-plan-id="{{id}}" data-plan-name="{{name}}">
                        Select Free Plan
                    </button>
                    {{/is_free}}
                    {{^is_free}}
                    <button class="plan-btn plan-btn-primary select-plan-btn" data-plan-id="{{id}}" data-plan-name="{{name}}" data-stripe-product="{{stripe_product_id}}">
                        <i class="fa fa-arrow-up"></i> Upgrade to {{short_name}}
                    </button>
                    {{/is_free}}
                    {{/is_current}}
                </div>
            </div>
            {{/monthly_plans}}
        </div>
    </div>

    <!-- Hidden form for plan selection submission -->
    <form id="complete-installation-form" method="post" style="display: none;">
        <input type="hidden" name="sesskey" value="{{sesskey}}">
        <input type="hidden" name="action" value="completeinstallation">
    </form>
</div>

{{#js}}
require(['jquery', 'core/ajax', 'core/notification'], function($, Ajax, Notification) {
    // Plans data from PHP
    var plansData = {{{plans_json}}};
    var currentInterval = 'monthly';

    $(document).ready(function() {
        // Billing toggle handler
        $('.billing-toggle-btn').on('click', function() {
            var interval = $(this).data('interval');
            if (interval === currentInterval) return;

            // Update toggle UI
            $('.billing-toggle-btn').removeClass('active');
            $(this).addClass('active');
            currentInterval = interval;

            // Update plans display
            updatePlansDisplay(interval);
        });

        // Plan selection handler
        $(document).on('click', '.select-plan-btn', function() {
            var planId = $(this).data('plan-id');
            var planName = $(this).data('plan-name');
            var stripeProduct = $(this).data('stripe-product');

            if (stripeProduct) {
                // Paid plan - redirect to billing portal
                createBillingPortalSession(stripeProduct, planName);
            } else {
                // Free plan - complete installation
                $('#complete-installation-form').submit();
            }
        });

        function updatePlansDisplay(interval) {
            var plans = plansData[interval] || plansData['monthly'];
            var container = $('#plans-container');

            if (!plans || plans.length === 0) {
                // No plans for this interval, show message
                container.html('<div class="text-center p-4"><p class="text-muted">Annual plans coming soon!</p></div>');
                return;
            }

            // Rebuild cards with new interval data
            var html = '';
            plans.forEach(function(plan) {
                html += buildPlanCard(plan, interval);
            });
            container.html(html);
        }

        function buildPlanCard(plan, interval) {
            var badgeHtml = '';
            if (plan.is_current) {
                badgeHtml = '<div class="plan-badge current">Current Plan</div>';
            } else if (plan.is_popular) {
                badgeHtml = '<div class="plan-badge popular">Most Popular</div>';
            }

            var priceHtml = '';
            if (plan.is_free) {
                priceHtml = '<div class="price-free">Free</div><div class="price-period">Forever</div>';
            } else {
                var periodText = interval === 'yearly' ? 'per year' : 'per month';
                priceHtml = '<div class="price-amount">' + plan.price_formatted + '</div>' +
                           '<div class="price-period">' + periodText + '</div>';
                if (plan.has_savings) {
                    priceHtml += '<div class="savings-badge">Save ' + plan.savings_percent + '%</div>';
                }
            }

            var featuresHtml = '';
            if (plan.features && plan.features.length > 0) {
                plan.features.forEach(function(feature) {
                    featuresHtml += '<li><i class="fa fa-check"></i> ' + feature + '</li>';
                });
            }

            var actionHtml = '';
            if (plan.is_current) {
                actionHtml = '<button class="plan-btn plan-btn-current" disabled><i class="fa fa-check-circle"></i> Current Plan</button>';
            } else if (plan.is_free) {
                actionHtml = '<button class="plan-btn plan-btn-outline select-plan-btn" data-plan-id="' + plan.id + '" data-plan-name="' + plan.name + '">Select Free Plan</button>';
            } else {
                actionHtml = '<button class="plan-btn plan-btn-primary select-plan-btn" data-plan-id="' + plan.id + '" data-plan-name="' + plan.name + '" data-stripe-product="' + (plan.stripe_product_id || '') + '"><i class="fa fa-arrow-up"></i> Upgrade to ' + plan.short_name + '</button>';
            }

            return '<div class="plan-card ' + (plan.is_popular ? 'popular' : '') + ' ' + (plan.is_current ? 'current' : '') + '" data-tier="' + plan.tier + '" data-interval="' + interval + '">' +
                badgeHtml +
                '<div class="plan-header">' +
                    '<div class="plan-name">' + plan.short_name + '</div>' +
                    '<div class="plan-description">' + plan.description + '</div>' +
                '</div>' +
                '<div class="plan-price">' + priceHtml + '</div>' +
                '<div class="plan-limits">' +
                    '<div class="limit-item"><div class="limit-value">' + plan.tokens_limit + '</div><div class="limit-label">AI Tokens</div></div>' +
                    '<div class="limit-item"><div class="limit-value">' + plan.exports_limit + '</div><div class="limit-label">Exports/mo</div></div>' +
                    '<div class="limit-item"><div class="limit-value">' + plan.reports_limit + '</div><div class="limit-label">Saved Reports</div></div>' +
                    '<div class="limit-item"><div class="limit-value">' + plan.export_formats + '</div><div class="limit-label">Formats</div></div>' +
                '</div>' +
                '<div class="plan-features"><ul>' + featuresHtml + '</ul></div>' +
                '<div class="plan-action">' + actionHtml + '</div>' +
            '</div>';
        }

        function createBillingPortalSession(stripeProductId, planName) {
            var returnUrl = window.location.href;

            Ajax.call([{
                methodname: 'report_adeptus_insights_create_billing_portal_session',
                args: {
                    return_url: returnUrl,
                    sesskey: M.cfg.sesskey
                },
                done: function(response) {
                    if (response && response.success && response.portal_url) {
                        Notification.addNotification({
                            message: 'Redirecting to billing portal...',
                            type: 'success'
                        });
                        setTimeout(function() {
                            window.location.href = response.portal_url;
                        }, 1000);
                    } else {
                        Notification.addNotification({
                            message: response.message || 'Failed to create billing session. Please try again.',
                            type: 'error'
                        });
                    }
                },
                fail: function(error) {
                    console.error('Billing portal error:', error);
                    Notification.addNotification({
                        message: 'Connection error. Please try again.',
                        type: 'error'
                    });
                }
            }]);
        }
    });
});
{{/js}}
