script.js

class InsulinCalculator {
    constructor() {
        this.initializeElements();
        this.bindEvents();
        this.bindWeightSliderEvents();
        this.setupInputValidation();
    }

    initializeElements() {
        // Modal elements
        this.penSelectButton = document.getElementById('penSelectButton');
        this.penSelectLabel = document.getElementById('penSelectLabel');
        this.penSelectChevron = document.getElementById('penSelectChevron');
        this.penSelectorModal = document.getElementById('penSelectorModal');
        this.penSelectorContent = document.getElementById('penSelectorContent');
        this.closePenModal = document.getElementById('closePenModal');
        this.currentPenId = null; // Currently selected pen ID
        this.penSelect = null; // Will be set to selected pen value for compatibility
        this.daySupplyInput = document.getElementById('daySupply');
        this.unitsPerDoseInput = document.getElementById('unitsPerDose');
        this.doseFrequencyInput = document.getElementById('doseFrequency');
        this.concentrationInput = document.getElementById('concentration');
        this.volumePerPenInput = document.getElementById('volumePerPen');
        this.copyBtn = document.getElementById('copyBtn');
        
        this.disclaimerBtn = document.getElementById('disclaimerBtn');
        this.disclaimerModal = document.getElementById('disclaimerModal');
        this.closeDisclaimerModal = document.getElementById('closeModal');
        this.closeDisclaimerModalBtn = document.getElementById('closeModalBtn');
        
        this.resultsDiv = document.getElementById('results');
        this.errorDiv = document.getElementById('errorMessage');
        this.totalUnitsSpan = document.getElementById('totalUnits');
        this.totalMLSpan = document.getElementById('totalML');
        this.pensToOrderSpan = document.getElementById('pensToOrder');
        this.prescriptionTextP = document.getElementById('prescriptionText');
        
        
        this.patientWeightInput = document.getElementById('patientWeight');
        this.weightUnitToggle = document.getElementById('weightUnitToggle');
        this.dosingSlider = document.getElementById('dosingSlider');
        this.sliderValueSpan = document.getElementById('sliderValue');
        this.estimatedDoseSpan = document.getElementById('estimatedDose');
        this.weightBasedDosingDiv = document.getElementById('weightBasedDosing');
        this.pricingInfoDiv = document.getElementById('pricingInfo');
        this.pricingTextSpan = document.getElementById('pricingText');
        this.sliderTooltip = document.getElementById('sliderTooltip');
        
        this.wastageToggle = document.getElementById('wastageToggle');
        this.expirationWarning = document.getElementById('expirationWarning');
        this.sigGeneration = document.getElementById('sigGeneration');
        this.maxDoseWarning = document.getElementById('maxDoseWarning');
        this.primingHelpBtn = document.getElementById('primingHelpBtn');
        this.primingHelpTooltip = document.getElementById('primingHelpTooltip');
        
        // Discount elements
        this.inlineDiscountLinks = document.getElementById('inlineDiscountLinks');
        this.inlineDiscountContent = document.getElementById('inlineDiscountContent');
        
        // Clinical guidance elements
        this.clinicalGuidance = document.getElementById('clinicalGuidance');
        this.clinicalGuidanceText = document.getElementById('clinicalGuidanceText');
        
        this.insulinPens = null;
        this.selectedPen = null;
        this.includeWastage = true;
        
        
        // Discount links for each pen category
        this.penDiscountInfo = {
            // Sanofi pens - GoodRx $35/month + Amazon + SingleCare
            'lantus-solostar': {
                goodrx: { url: 'https://www.goodrx.com/lantus?label_override=lantus&form=carton&dosage=5-solostar-pens-of-3ml&quantity=1&drugId=37030', text: 'GoodRx $35/month' },
                amazon: { url: 'https://www.aboutamazon.com/news/retail/amazon-pharmacy-insulin-coupons', text: 'Amazon' },
                singlecare: { url: 'https://www.singlecare.com/prescription/lantus-solostar', text: 'SingleCare' }
            },
            'toujeo-solostar': {
                goodrx: { url: 'https://www.goodrx.com/toujeo', text: 'GoodRx $35/month' },
                amazon: { url: 'https://www.aboutamazon.com/news/retail/amazon-pharmacy-insulin-coupons', text: 'Amazon' }
            },
            'admelog-solostar': {
                goodrx: { url: 'https://www.goodrx.com/admelog', text: 'GoodRx $35/month' },
                amazon: { url: 'https://www.aboutamazon.com/news/retail/amazon-pharmacy-insulin-coupons', text: 'Amazon' },
                singlecare: { url: 'https://www.singlecare.com/prescription/admelog-solostar', text: 'SingleCare' }
            },
            'apidra-solostar': {
                goodrx: { url: 'https://www.goodrx.com/apidra', text: 'GoodRx $35/month' },
                amazon: { url: 'https://www.aboutamazon.com/news/retail/amazon-pharmacy-insulin-coupons', text: 'Amazon' }
            },
            
            // Lilly pens - Lilly Insulin Savings + Amazon
            'humalog-kwikpen': {
                lilly: { url: 'https://www.insulinaffordability.com/', text: 'Lilly Insulin Savings' },
                amazon: { url: 'https://www.aboutamazon.com/news/retail/amazon-pharmacy-insulin-coupons', text: 'Amazon' }
            },
            'humalog-kwikpen-u200': {
                lilly: { url: 'https://www.insulinaffordability.com/', text: 'Lilly Insulin Savings' },
                amazon: { url: 'https://www.aboutamazon.com/news/retail/amazon-pharmacy-insulin-coupons', text: 'Amazon' }
            },
            'basaglar-kwikpen': {
                lilly: { url: 'https://www.insulinaffordability.com/', text: 'Lilly Insulin Savings' },
                amazon: { url: 'https://www.aboutamazon.com/news/retail/amazon-pharmacy-insulin-coupons', text: 'Amazon' }
            },
            
            // Novo Nordisk pens - $35/month program + Amazon
            'novolog-flexpen': {
                novocare: { url: 'https://www.novocare.com/diabetes/help-with-costs/help-with-insulin-costs.html', text: 'Novo Nordisk $35/month' },
                amazon: { url: 'https://www.aboutamazon.com/news/retail/amazon-pharmacy-insulin-coupons', text: 'Amazon' }
            },
            'fiasp-flextouch': {
                novocare: { url: 'https://www.novocare.com/diabetes/help-with-costs/help-with-insulin-costs.html', text: 'Novo Nordisk $35/month' },
                amazon: { url: 'https://www.aboutamazon.com/news/retail/amazon-pharmacy-insulin-coupons', text: 'Amazon' }
            },
            'levemir-flextouch': {
                novocare: { url: 'https://www.novocare.com/diabetes/help-with-costs/help-with-insulin-costs.html', text: 'Novo Nordisk $35/month' },
                amazon: { url: 'https://www.aboutamazon.com/news/retail/amazon-pharmacy-insulin-coupons', text: 'Amazon' }
            },
            'tresiba-flextouch': {
                novocare: { url: 'https://www.novocare.com/diabetes/help-with-costs/help-with-insulin-costs.html', text: 'Novo Nordisk $35/month' },
                amazon: { url: 'https://www.aboutamazon.com/news/retail/amazon-pharmacy-insulin-coupons', text: 'Amazon' }
            },
            'tresiba-flextouch-u200': {
                novocare: { url: 'https://www.novocare.com/diabetes/help-with-costs/help-with-insulin-costs.html', text: 'Novo Nordisk $35/month' },
                amazon: { url: 'https://www.aboutamazon.com/news/retail/amazon-pharmacy-insulin-coupons', text: 'Amazon' }
            }
        };
        
        // Max dose limits per injection for insulin pens (in units)
        this.maxDoseLimits = {
            'humalog-kwikpen': 60,
            'humalog-kwikpen-u200': 160,
            'novolog-flexpen': 60,
            'fiasp-flextouch': 80,
            'lantus-solostar': 80,
            'basaglar-kwikpen': 80,
            'tresiba-flextouch': 80,
            'tresiba-flextouch-u200': 160,
            'toujeo-solostar': 80,
            'toujeo-max-solostar': 160, // Note: This doesn't exist in current data but included for completeness
            'levemir-flextouch': 80,
            'admelog-solostar': 60, // Same as Humalog U-100
            'apidra-solostar': 60   // Typical for rapid-acting pens
        };
        
        
        this.populateModal();
    }

    bindEvents() {
        this.copyBtn.addEventListener('click', () => this.copyPrescription());
        
        this.disclaimerBtn.addEventListener('click', () => this.showDisclaimer());
        this.closeDisclaimerModal.addEventListener('click', () => this.hideDisclaimer());
        this.closeDisclaimerModalBtn.addEventListener('click', () => this.hideDisclaimer());
        this.disclaimerModal.addEventListener('click', (e) => {
            if (e.target === this.disclaimerModal) {
                this.hideDisclaimer();
            }
        });
        
        // Modal events
        this.penSelectButton.addEventListener('click', () => {
            this.openModal();
        });
        
        this.penSelectButton.addEventListener('keydown', (e) => this.handleButtonKeydown(e));
        
        // Close modal events
        this.closePenModal.addEventListener('click', () => {
            this.closeModal();
        });
        
        // Close modal on escape key
        document.addEventListener('keydown', (e) => {
            if (e.key === 'Escape' && this.penSelectorModal && 
                !this.penSelectorModal.classList.contains('hidden')) {
                this.closeModal();
            }
        });
        
        // Close modal when clicking outside
        this.penSelectorModal.addEventListener('click', (e) => {
            if (e.target === this.penSelectorModal) {
                this.closeModal();
            }
        });
        
        // Priming loss toggle event
        if (this.wastageToggle) {
            this.wastageToggle.addEventListener('change', () => {
                this.includeWastage = this.wastageToggle.checked;
                this.calculate();
            });
        }
        
        // Priming help tooltip event
        if (this.primingHelpBtn && this.primingHelpTooltip) {
            this.primingHelpBtn.addEventListener('click', () => {
                this.primingHelpTooltip.classList.toggle('hidden');
            });
            
            // Close tooltip when clicking outside
            document.addEventListener('click', (e) => {
                if (!this.primingHelpBtn.contains(e.target) && !this.primingHelpTooltip.contains(e.target)) {
                    this.primingHelpTooltip.classList.add('hidden');
                }
            });
        }
        
        
        // Live calculation on input change
        const inputs = [
            this.daySupplyInput,
            this.unitsPerDoseInput,
            this.doseFrequencyInput,
            this.concentrationInput,
            this.volumePerPenInput
        ];
        
        inputs.forEach(input => {
            input.addEventListener('input', () => {
                this.calculate();
                // Update expiration warning when day supply changes
                if (input === this.daySupplyInput) {
                    this.checkExpirationWarning(this.penSelect);
                }
            });
            input.addEventListener('change', () => {
                this.calculate();
                // Update expiration warning when day supply changes
                if (input === this.daySupplyInput) {
                    this.checkExpirationWarning(this.penSelect);
                }
            });
        });
    }

    getInputValues() {
        return {
            daySupply: parseFloat(this.daySupplyInput.value) || 30,
            unitsPerDose: parseFloat(this.unitsPerDoseInput.value),
            doseFrequency: parseFloat(this.doseFrequencyInput.value) || 1,
            concentration: parseFloat(this.concentrationInput.value),
            volumePerPen: parseFloat(this.volumePerPenInput.value)
        };
    }

    validateInputs(values) {
        const errors = [];
        
        if (!values.unitsPerDose || values.unitsPerDose <= 0) {
            errors.push('Units per dose is required and must be greater than 0');
        }
        
        if (!values.concentration || values.concentration <= 0) {
            errors.push('Insulin concentration is required and must be greater than 0');
        }
        
        if (!values.volumePerPen || values.volumePerPen <= 0) {
            errors.push('Volume per pen is required and must be greater than 0');
        }
        
        if (values.daySupply <= 0) {
            errors.push('Day supply must be greater than 0');
        }
        
        if (values.doseFrequency <= 0) {
            errors.push('Dose frequency must be greater than 0');
        }
        
        return errors;
    }

    calculateResults(values) {
        // Baseline units needed = units/dose × doses/day × days
        const baselineUnits = values.unitsPerDose * values.doseFrequency * values.daySupply;
        
        // Calculate priming loss based on manufacturer specifications
        let primingLoss = 0;
        let primingUnitsPerDose = 0;
        
        if (this.includeWastage && this.selectedPen && this.selectedPen.priming_units) {
            primingUnitsPerDose = this.selectedPen.priming_units;
            // priming_loss = priming_units × injections_per_day × days_supply
            primingLoss = primingUnitsPerDose * values.doseFrequency * values.daySupply;
        }
        
        // Total units needed = baseline + priming loss
        const totalUnits = baselineUnits + primingLoss;
        
        // Total mL needed = total units ÷ units/mL
        const totalML = totalUnits / values.concentration;
        
        // Pens to order = ceil(total mL ÷ mL per pen)
        let pensToOrder = Math.ceil(totalML / values.volumePerPen);
        
        // Check expiration constraints
        const expirationCheck = this.checkPenExpiration(values.daySupply, pensToOrder);
        if (expirationCheck.needsMorePens) {
            pensToOrder = expirationCheck.recommendedPens;
        }
        
        return {
            baselineUnits: Math.round(baselineUnits * 100) / 100,
            primingLoss: Math.round(primingLoss * 100) / 100,
            primingUnitsPerDose,
            totalUnits: Math.round(totalUnits * 100) / 100,
            totalML: Math.round(totalML * 100) / 100,
            pensToOrder,
            expirationWarning: expirationCheck.warning,
            wastageIncluded: this.includeWastage,
            dailyDose: values.unitsPerDose * values.doseFrequency // Add daily dose for clinical guidance
        };
    }

    displayClinicalGuidance(values, results) {
        // Only show guidance for Lantus or Toujeo
        if (!this.selectedPen || 
            (this.selectedPen.value !== 'lantus-solostar' && this.selectedPen.value !== 'toujeo-solostar')) {
            this.clinicalGuidance.classList.add('hidden');
            return;
        }

        const dailyDose = results.dailyDose;
        let guidanceText = '';

        // Don't show guidance for patients under 60 units
        if (dailyDose < 60) {
            this.clinicalGuidance.classList.add('hidden');
            return;
        }

        if (this.selectedPen.value === 'lantus-solostar') {
            if (dailyDose >= 60) {
                guidanceText = 'For patients requiring 60 units or more per day, consider switching to Toujeo (insulin glargine U-300) for easier injections (lower volume), and potentially smoother, longer-acting insulin coverage.';
            }
        } else if (this.selectedPen.value === 'toujeo-solostar') {
            guidanceText = 'Toujeo (insulin glargine U-300) may be preferred for patients needing higher daily doses (≥60 units), or when smoother, longer-acting basal coverage is desired.';
        }

        if (guidanceText) {
            this.clinicalGuidanceText.textContent = guidanceText;
            this.clinicalGuidance.classList.remove('hidden');
        } else {
            this.clinicalGuidance.classList.add('hidden');
        }
    }

    generatePrescriptionNote(values, results) {
        const insulinType = this.selectedPen ? this.selectedPen.generic : 'insulin';
        const frequency = values.doseFrequency === 1 ? 'daily' : `${values.doseFrequency} times daily`;
        
        return `Order ${results.pensToOrder} pen${results.pensToOrder > 1 ? 's' : ''} of ${insulinType} ${values.concentration} units/mL, use ${values.unitsPerDose} units ${frequency}, ${values.daySupply} day supply`;
    }
    
    generateDischargeText(values, results) {
        let breakdown = `Baseline units: ${results.baselineUnits}\n`;
        
        if (this.includeWastage && results.primingLoss > 0) {
            breakdown += `Priming loss: ${results.primingLoss} units (based on ${results.primingUnitsPerDose} units × ${values.doseFrequency} × ${values.daySupply})\n`;
            breakdown += `Total units required (including priming): ${results.totalUnits} units\n\n`;
        } else {
            breakdown += `Total units required: ${results.totalUnits} units\n\n`;
        }
        
        const pensNeeded = results.pensToOrder;
        
        breakdown += `Pens Needed: ${pensNeeded}\n\n`;
        
        return breakdown;
    }
    
    generateRxSig(values, results) {
        const insulinType = this.selectedPen ? this.selectedPen.generic : 'insulin';
        const brandName = this.selectedPen ? this.selectedPen.brand : 'Insulin Pen';
        const frequency = values.doseFrequency === 1 ? 'once daily' : `${values.doseFrequency} times daily`;
        
        // Use 5-pen box NDC for discharge prescriptions
        let ndcCode = 'N/A';
        console.log('generateRxSig - selectedPen:', this.selectedPen);
        if (this.selectedPen && this.selectedPen.ndc_codes) {
            console.log('NDC codes available:', this.selectedPen.ndc_codes);
            // Look for 5-pen box NDC (ending in -05) or use first available
            const boxNDC = this.selectedPen.ndc_codes.find(ndc => ndc.endsWith('-05'));
            ndcCode = boxNDC || this.selectedPen.ndc_codes[0];
            console.log('Selected NDC:', ndcCode);
        } else {
            console.log('No selectedPen or no ndc_codes');
        }
        
        return {
            sig: `Inject ${values.unitsPerDose} units subcutaneously ${frequency}.`,
            disp: `Disp: ${results.pensToOrder} pen${results.pensToOrder > 1 ? 's' : ''} (${values.volumePerPen} mL each)`,
            ndc: `NDC: ${ndcCode}`,
            fullSig: `${insulinType} ${values.concentration} units/mL pen\n\nInject ${values.unitsPerDose} units subcutaneously ${frequency}.\n\nDisp: ${results.pensToOrder} pen${results.pensToOrder > 1 ? 's' : ''} (${values.volumePerPen} mL each)\nNDC: ${ndcCode}`
        };
    }

    displayResults(results, prescriptionNote) {
        // Validate calculation results before displaying
        const validation = this.validateCalculationResults(results);
        
        if (!validation.isValid) {
            this.displayError(validation.errors);
            return;
        }
        
        // Always use discharge mode display
        this.totalUnitsSpan.textContent = `${results.totalUnits} units`;
        this.totalMLSpan.textContent = `${results.totalML} mL`;
        this.pensToOrderSpan.textContent = results.pensToOrder;
        
        // Custom discharge prescription text
        const values = this.getInputValues();
        const dischargeText = this.generateDischargeText(values, results);
        this.prescriptionTextP.textContent = dischargeText;
        
        // Generate and display Rx Sig
        const rxSig = this.generateRxSig(values, results);
        if (this.sigGeneration) {
            this.sigGeneration.innerHTML = `
                <div class="text-sm font-mono bg-gray-50 p-3 sm:p-4 rounded-md border border-gray-200">
                    <div class="font-bold mb-2 text-gray-900">Prescription Sig:</div>
                    <div class="text-gray-800">${rxSig.sig}</div>
                    <div class="mt-2 text-gray-800">${rxSig.disp}</div>
                    <div class="text-gray-800">${rxSig.ndc}</div>
                </div>
            `;
        }
        
        // Show warnings if any
        if (validation.warnings.length > 0) {
            this.showCalculationWarnings(validation.warnings);
        }
        
        // Show discount links
        this.displayDiscountLinks(values, results);
        
        // Show clinical guidance for Lantus/Toujeo
        this.displayClinicalGuidance(values, results);
        
        this.resultsDiv.classList.remove('hidden');
        this.errorDiv.classList.add('hidden');
    }
    
    validateCalculationResults(results) {
        const errors = [];
        const warnings = [];
        
        // Check for unreasonable total units
        if (results.totalUnits > 10000) {
            errors.push('Calculated total units is extremely high. Please verify inputs.');
        } else if (results.totalUnits > 3000) {
            warnings.push('High total units calculated. Please double-check dosing.');
        }
        
        // Check for unreasonable pen count
        if (results.pensToOrder > 50) {
            errors.push('Calculated pen count is unusually high. Please verify inputs.');
        } else if (results.pensToOrder > 20) {
            warnings.push('High number of pens calculated. Please verify day supply and dosing.');
        }
        
        // Check for very small doses that might indicate input errors
        if (results.totalUnits < 1) {
            warnings.push('Very low total units calculated. Please verify dosing inputs.');
        }
        
        return {
            isValid: errors.length === 0,
            errors,
            warnings
        };
    }
    
    showCalculationWarnings(warnings) {
        // Create warning display above results
        const existingWarning = this.resultsDiv.querySelector('.calculation-warnings');
        if (existingWarning) {
            existingWarning.remove();
        }
        
        const warningDiv = document.createElement('div');
        warningDiv.className = 'calculation-warnings bg-yellow-50 border border-yellow-200 rounded-lg p-3 mb-4';
        
        const title = document.createElement('div');
        title.className = 'text-sm font-medium text-yellow-800 mb-2';
        title.textContent = '⚠️ Please Review:';
        warningDiv.appendChild(title);
        
        warnings.forEach(warning => {
            const warningText = document.createElement('div');
            warningText.className = 'text-sm text-yellow-700';
            warningText.textContent = `• ${warning}`;
            warningDiv.appendChild(warningText);
        });
        
        this.resultsDiv.insertBefore(warningDiv, this.resultsDiv.firstChild);
    }

    displayError(errors) {
        this.errorDiv.querySelector('p').textContent = errors.join('. ');
        this.errorDiv.classList.remove('hidden');
        this.resultsDiv.classList.add('hidden');
        this.clinicalGuidance.classList.add('hidden');
    }

    calculate() {
        const values = this.getInputValues();
        
        // Don't show validation errors if essential fields are empty (user hasn't started yet)
        if (!values.unitsPerDose || !values.concentration || !values.volumePerPen) {
            this.resultsDiv.classList.add('hidden');
            this.errorDiv.classList.add('hidden');
            this.clinicalGuidance.classList.add('hidden');
            return;
        }
        
        const errors = this.validateInputs(values);
        
        if (errors.length > 0) {
            this.displayError(errors);
            return;
        }
        
        const results = this.calculateResults(values);
        const prescriptionNote = this.generatePrescriptionNote(values, results);
        
        this.displayResults(results, prescriptionNote);
    }

    async copyPrescription() {
        try {
            const text = this.prescriptionTextP.textContent;
            await navigator.clipboard.writeText(text);
            
            // Visual feedback
            const originalText = this.copyBtn.textContent;
            this.copyBtn.textContent = 'Copied!';
            this.copyBtn.classList.add('bg-green-600');
            this.copyBtn.classList.remove('bg-blue-600');
            
            setTimeout(() => {
                this.copyBtn.textContent = originalText;
                this.copyBtn.classList.remove('bg-green-600');
                this.copyBtn.classList.add('bg-blue-600');
            }, 2000);
        } catch (err) {
            console.error('Failed to copy text: ', err);
            
            // Fallback: show alert with text to copy manually
            alert(`Copy this prescription note:\n\n${this.prescriptionTextP.textContent}`);
        }
    }

    async populateModal() {
        try {
            const response = await fetch('final_insulin_pens.json');
            const data = await response.json();
            this.insulinPens = data;
            
            // Populate modal content
            this.populateModalContent();
            
            // Set default selection to Lantus SoloStar after DOM is ready
            setTimeout(() => {
                this.selectPen('lantus-solostar');
            }, 0);
        } catch (error) {
            console.error('Error loading insulin pens:', error);
        }
    }

    populateModalContent() {
        if (!this.insulinPens || !this.penSelectorContent) return;
        
        this.penSelectorContent.innerHTML = '';
        
        // Add pen options by category
        const categories = ['basal', 'rapid', 'ultra-rapid'];
        const categoryLabels = {
            'basal': 'Long-Acting (Basal)',
            'rapid': 'Rapid-Acting (Mealtime)',
            'ultra-rapid': 'Ultra-Rapid-Acting'
        };
        
        categories.forEach(category => {
            if (this.insulinPens[category] && this.insulinPens[category].length > 0) {
                // Add category section
                const categorySection = document.createElement('div');
                categorySection.className = 'space-y-3';
                
                // Add category header
                const categoryHeader = document.createElement('h4');
                categoryHeader.className = 'text-sm font-medium text-gray-800 mb-3';
                categoryHeader.textContent = categoryLabels[category];
                categorySection.appendChild(categoryHeader);
                
                // Add pen grid
                const penGrid = document.createElement('div');
                penGrid.className = 'grid grid-cols-1 sm:grid-cols-2 gap-3';
                
                // Add pen options
                this.insulinPens[category].forEach(pen => {
                    const has35MonthDiscount = this.penDiscountInfo[pen.value] && 
                                             (this.penDiscountInfo[pen.value].goodrx || this.penDiscountInfo[pen.value].novocare);
                    
                    const penCard = document.createElement('button');
                    penCard.type = 'button';
                    penCard.className = 'pen-card rounded-lg shadow px-4 py-4 sm:py-3 hover:ring hover:ring-blue-300 transition text-left bg-white border border-gray-200 focus:outline-none min-h-[64px] sm:min-h-[auto] active:bg-gray-50';
                    penCard.setAttribute('data-pen-value', pen.value);
                    penCard.setAttribute('data-pen-id', pen.value); // Add data-pen-id for consistency
                    
                    // Selection state will be set by updateModalSelection() when modal opens
                    
                    penCard.innerHTML = `
                        <div class="flex items-start space-x-3">
                            <div class="flex-shrink-0">
                                <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"></path></svg>
                            </div>
                            <div class="flex-1 min-w-0">
                                <div class="flex items-center space-x-2">
                                    ${has35MonthDiscount ? '<span class="text-xs font-medium text-green-700 bg-green-50 px-1.5 py-0.5 rounded">$35/mo</span>' : ''}
                                    <div class="font-medium text-gray-900 truncate">${pen.brand}</div>
                                </div>
                                <div class="text-sm text-gray-600 mt-1">
                                    <div>${pen.generic}</div>
                                    <div class="flex items-center space-x-2 text-xs text-gray-500 mt-1">
                                        <span>${pen.concentration} units/mL</span>
                                        <span>•</span>
                                        <span>${pen.volume} mL</span>
                                        ${has35MonthDiscount ? '<span>• $35/month</span>' : ''}
                                    </div>
                                </div>
                            </div>
                        </div>
                    `;
                    
                    penCard.addEventListener('click', () => {
                        this.selectPen(pen.value);
                    });
                    
                    penCard.addEventListener('keydown', (e) => this.handleCardKeydown(e, pen.value));
                    
                    penGrid.appendChild(penCard);
                });
                
                categorySection.appendChild(penGrid);
                this.penSelectorContent.appendChild(categorySection);
            }
        });
    }

    // Modal methods
    openModal() {
        this.penSelectorModal.classList.remove('hidden');
        this.penSelectButton.setAttribute('aria-expanded', 'true');
        document.body.style.overflow = 'hidden';
        
        // Update visual selection to match current state
        this.updateModalSelection();
        
        // Focus first pen card for accessibility (but not the selected one to avoid focus ring confusion)
        const firstPenCard = this.penSelectorContent.querySelector('.pen-card');
        if (firstPenCard && !this.isMobile()) {
            // Only focus if it's not the selected card to avoid focus ring on selected item
            if (firstPenCard.getAttribute('data-pen-id') !== this.currentPenId) {
                firstPenCard.focus();
            }
        }
    }

    closeModal() {
        this.penSelectorModal.classList.add('hidden');
        this.penSelectButton.setAttribute('aria-expanded', 'false');
        document.body.style.overflow = '';
        this.penSelectButton.focus();
    }

    setPenValues(unitsPerMl, mlPerPen, penType = null) {
        this.concentrationInput.value = unitsPerMl;
        this.volumePerPenInput.value = mlPerPen;
        
        // Disable concentration and volume fields when pen is selected (fixed values)
        this.concentrationInput.disabled = true;
        this.volumePerPenInput.disabled = true;
        this.concentrationInput.classList.add('bg-gray-100', 'cursor-not-allowed');
        this.volumePerPenInput.classList.add('bg-gray-100', 'cursor-not-allowed');
        
        if (penType === 'rapid' || penType === 'ultra-rapid') {
            this.doseFrequencyInput.value = 3;
        } else if (penType === 'basal') {
            this.doseFrequencyInput.value = 1;
        }
        
        const selectedValue = this.penSelect;
        this.selectedPen = selectedValue ? this.findPenByValue(selectedValue) : null;
        
        this.calculate();
    }

    findPenByValue(value) {
        if (!this.insulinPens) return null;
        
        for (const category of Object.values(this.insulinPens)) {
            if (Array.isArray(category)) {
                const pen = category.find(p => p.value === value);
                if (pen) return pen;
            }
        }
        return null;
    }

    findPenType(value) {
        if (!this.insulinPens) return null;
        
        for (const [type, category] of Object.entries(this.insulinPens)) {
            if (Array.isArray(category)) {
                const pen = category.find(p => p.value === value);
                if (pen) return type;
            }
        }
        return null;
    }

    updateResultsUI() {
        // No additional UI updates needed in discharge mode
    }

    showDisclaimer() {
        this.disclaimerModal.classList.remove('hidden');
        document.body.style.overflow = 'hidden';
    }

    hideDisclaimer() {
        this.disclaimerModal.classList.add('hidden');
        document.body.style.overflow = 'auto';
    }

    bindWeightSliderEvents() {
        this.dosingSlider.addEventListener('input', () => this.calculateDoseFromSlider());
        this.patientWeightInput.addEventListener('input', () => {
            this.validateWeightInput();
            this.updateSliderState();
            this.calculateDoseFromSlider();
        });
        
        // Handle iOS keyboard dismissal and auto-scroll
        this.patientWeightInput.addEventListener('blur', () => {
            // Small delay to ensure keyboard is dismissed
            setTimeout(() => {
                if (this.patientWeightInput.value && this.patientWeightInput.value.trim() !== '') {
                    this.scrollToDosingSlider();
                }
            }, 300);
        });
        
        this.weightUnitToggle.addEventListener('click', () => this.toggleWeightUnit());
        
        // Add hover events for tooltip
        this.dosingSlider.addEventListener('mouseenter', () => this.showSliderTooltip());
        this.dosingSlider.addEventListener('mouseleave', () => this.hideSliderTooltip());
        
        this.updateSliderState();
        this.calculateDoseFromSlider();
    }

    calculateDoseFromSlider() {
        const weight = parseFloat(this.patientWeightInput.value);
        const sliderValue = parseInt(this.dosingSlider.value);
        const weightUnit = this.weightUnitToggle.dataset.unit;
        
        const dosingValues = [0.1, 0.2, 0.3];
        const dosingRate = dosingValues[sliderValue] || 0.1;
        
        this.sliderValueSpan.textContent = `${dosingRate} u/kg/day`;
        
        if (weight && weight > 0 && this.isValidWeight(weight)) {
            let weightInKg = weight;
            if (weightUnit === 'lbs') {
                weightInKg = weight * 0.4536;
            }
            
            const dailyDose = Math.round(weightInKg * dosingRate);
            this.estimatedDoseSpan.textContent = `${dailyDose} units`;
            
            this.setDoseFromWeight(dailyDose);
        } else {
            this.estimatedDoseSpan.textContent = weight ? 'Invalid weight' : 'Enter weight above';
        }
    }

    setDoseFromWeight(dose) {
        if (dose && dose > 0) {
            this.unitsPerDoseInput.value = dose;
            this.calculate();
        }
    }

    toggleWeightBasedDosing(penType) {
        if (penType === 'basal') {
            this.weightBasedDosingDiv.classList.remove('hidden');
        } else {
            this.weightBasedDosingDiv.classList.add('hidden');
        }
    }

    showPricingInfo(penValue, pen) {
        // Hide pricing info for all pens
        this.pricingInfoDiv.classList.add('hidden');
    }

    toggleWeightUnit() {
        const currentUnit = this.weightUnitToggle.dataset.unit;
        const newUnit = currentUnit === 'kg' ? 'lbs' : 'kg';
        const currentWeight = parseFloat(this.patientWeightInput.value);
        
        // If there's a weight value, ask for confirmation
        if (currentWeight && currentWeight > 0) {
            const convertedWeight = currentUnit === 'kg' 
                ? Math.round(currentWeight / 0.4536 * 10) / 10  // kg to lbs
                : Math.round(currentWeight * 0.4536 * 10) / 10; // lbs to kg
            
            const message = `Convert ${currentWeight} ${currentUnit} to ${convertedWeight} ${newUnit}?`;
            const options = [
                { text: 'Convert Weight', action: 'convert' },
                { text: 'Clear Weight', action: 'clear' },
                { text: 'Cancel', action: 'cancel' }
            ];
            
            this.showWeightConversionDialog(message, options, (action) => {
                if (action === 'convert') {
                    this.patientWeightInput.value = convertedWeight;
                    this.updateWeightUnit(newUnit);
                } else if (action === 'clear') {
                    this.patientWeightInput.value = '';
                    this.updateWeightUnit(newUnit);
                }
                // For 'cancel', do nothing
            });
        } else {
            // No weight value, just change unit
            this.updateWeightUnit(newUnit);
        }
    }
    
    updateWeightUnit(newUnit) {
        this.weightUnitToggle.dataset.unit = newUnit;
        this.weightUnitToggle.textContent = newUnit;
        this.calculateDoseFromSlider();
    }
    
    showWeightConversionDialog(message, options, callback) {
        // Create modal overlay
        const overlay = document.createElement('div');
        overlay.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50';
        
        // Create dialog
        const dialog = document.createElement('div');
        dialog.className = 'bg-white rounded-lg max-w-sm w-full p-6';
        
        // Add message
        const messageEl = document.createElement('p');
        messageEl.className = 'text-gray-900 mb-4 text-center';
        messageEl.textContent = message;
        dialog.appendChild(messageEl);
        
        // Add buttons
        const buttonContainer = document.createElement('div');
        buttonContainer.className = 'space-y-2';
        
        options.forEach(option => {
            const button = document.createElement('button');
            button.className = option.action === 'convert' 
                ? 'w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500'
                : option.action === 'clear'
                ? 'w-full bg-yellow-600 text-white py-2 px-4 rounded-md hover:bg-yellow-700 focus:outline-none focus:ring-2 focus:ring-yellow-500'
                : 'w-full bg-gray-300 text-gray-700 py-2 px-4 rounded-md hover:bg-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-500';
            button.textContent = option.text;
            button.addEventListener('click', () => {
                document.body.removeChild(overlay);
                callback(option.action);
            });
            buttonContainer.appendChild(button);
        });
        
        dialog.appendChild(buttonContainer);
        overlay.appendChild(dialog);
        document.body.appendChild(overlay);
        
        // Close on overlay click
        overlay.addEventListener('click', (e) => {
            if (e.target === overlay) {
                document.body.removeChild(overlay);
                callback('cancel');
            }
        });
    }
    
    setupInputValidation() {
        // Enhanced validation for all numeric inputs
        this.unitsPerDoseInput.addEventListener('input', (e) => {
            this.validateUnitsPerDose(e.target);
            this.checkMaxDoseLimit();
        });
        
        this.daySupplyInput.addEventListener('input', (e) => {
            this.validateDaySupply(e.target);
        });
        
        this.concentrationInput.addEventListener('input', (e) => {
            this.validateConcentration(e.target);
        });
        
        this.volumePerPenInput.addEventListener('input', (e) => {
            this.validateVolumePerPen(e.target);
        });
        
        this.doseFrequencyInput.addEventListener('input', (e) => {
            this.validateDoseFrequency(e.target);
        });
    }
    
    validateConcentration(input) {
        const value = parseFloat(input.value);
        
        if (!input.value || input.value.trim() === '' || isNaN(value)) {
            this.clearInputValidation(input);
            return true;
        }
        
        if (value <= 0) {
            this.showInputError(input, 'Concentration must be greater than 0');
            return false;
        }
        
        if (value < 50 || value > 500) {
            this.showInputError(input, 'Concentration typically 50-500 units/mL');
            return false;
        }
        
        this.clearInputValidation(input);
        return true;
    }
    
    validateVolumePerPen(input) {
        const value = parseFloat(input.value);
        
        if (!input.value || input.value.trim() === '' || isNaN(value)) {
            this.clearInputValidation(input);
            return true;
        }
        
        if (value <= 0) {
            this.showInputError(input, 'Volume must be greater than 0');
            return false;
        }
        
        if (value < 0.5 || value > 10) {
            this.showInputError(input, 'Volume typically 0.5-10 mL per pen');
            return false;
        }
        
        this.clearInputValidation(input);
        return true;
    }
    
    validateDoseFrequency(input) {
        const value = parseFloat(input.value);
        
        if (!input.value || input.value.trim() === '' || isNaN(value)) {
            this.clearInputValidation(input);
            return true;
        }
        
        if (value <= 0 || value !== Math.floor(value)) {
            this.showInputError(input, 'Frequency must be a whole number greater than 0');
            return false;
        }
        
        if (value > 10) {
            this.showInputError(input, 'Frequency typically 1-10 doses per day');
            return false;
        }
        
        this.clearInputValidation(input);
        return true;
    }
    
    validateUnitsPerDose(input) {
        const value = parseFloat(input.value);
        
        // Don't validate empty fields (user hasn't entered anything yet)
        if (!input.value || input.value.trim() === '' || isNaN(value)) {
            this.clearInputValidation(input);
            return true;
        }
        
        if (value <= 0) {
            this.showInputError(input, 'Dose must be greater than 0');
            return false;
        }
        
        // Reasonable insulin dose bounds
        const minDose = 0.1;
        const maxDose = 200;  // Very high but possible for severe insulin resistance
        
        if (value < minDose || value > maxDose) {
            this.showInputError(input, `Dose must be between ${minDose}-${maxDose} units`);
            return false;
        }
        
        // Warning for very high doses
        if (value > 100) {
            this.showInputError(input, `High dose (${value} units) - please verify`);
        } else {
            this.clearInputValidation(input);
        }
        
        return true;
    }
    
    validateDaySupply(input) {
        const value = parseFloat(input.value);
        
        // Don't validate empty fields or default values
        if (!input.value || input.value.trim() === '' || isNaN(value)) {
            this.clearInputValidation(input);
            return true;
        }
        
        if (value <= 0) {
            this.showInputError(input, 'Day supply must be greater than 0');
            return false;
        }
        
        // Reasonable day supply bounds
        const minDays = 1;
        const maxDays = 365;
        
        if (value < minDays || value > maxDays) {
            this.showInputError(input, `Day supply must be between ${minDays}-${maxDays} days`);
            return false;
        }
        
        this.clearInputValidation(input);
        return true;
    }
    
    showValidationError(input, message) {
        input.classList.add('border-red-500', 'bg-red-50');
        input.classList.remove('border-gray-300', 'border-yellow-500', 'bg-yellow-50');
        this.showValidationMessage(input, message, 'error');
    }
    
    showValidationWarning(input, message) {
        input.classList.add('border-yellow-500', 'bg-yellow-50');
        input.classList.remove('border-gray-300', 'border-red-500', 'bg-red-50');
        this.showValidationMessage(input, message, 'warning');
    }
    
    clearValidationError(input) {
        input.classList.remove('border-red-500', 'bg-red-50', 'border-yellow-500', 'bg-yellow-50');
        input.classList.add('border-gray-300');
        this.hideValidationMessage(input);
    }
    
    showValidationMessage(input, message, type) {
        this.hideValidationMessage(input);
        
        const messageEl = document.createElement('div');
        messageEl.className = type === 'error' 
            ? 'absolute z-10 text-red-600 text-xs mt-1 validation-message bg-white border border-red-200 rounded px-2 py-1 shadow-lg'
            : 'absolute z-10 text-yellow-600 text-xs mt-1 validation-message bg-white border border-yellow-200 rounded px-2 py-1 shadow-lg';
        messageEl.textContent = message;
        
        // Position the message below the input without affecting layout
        const parentNode = input.parentNode;
        if (!parentNode.style.position) {
            parentNode.style.position = 'relative';
        }
        
        parentNode.appendChild(messageEl);
    }
    
    hideValidationMessage(input) {
        const existingMessage = input.parentNode.querySelector('.validation-message');
        if (existingMessage) {
            existingMessage.remove();
        }
    }
    
    updateSliderState() {
        const weight = parseFloat(this.patientWeightInput.value);
        const isValidWeight = weight && weight > 0 && this.isValidWeight(weight);
        
        if (isValidWeight) {
            this.dosingSlider.disabled = false;
            this.dosingSlider.classList.remove('opacity-50', 'cursor-not-allowed');
            this.hideSliderTooltip();
        } else {
            this.dosingSlider.disabled = true;
            this.dosingSlider.classList.add('opacity-50', 'cursor-not-allowed');
        }
    }
    
    showSliderTooltip() {
        if (this.dosingSlider.disabled && this.sliderTooltip) {
            this.sliderTooltip.classList.remove('opacity-0');
            this.sliderTooltip.classList.add('opacity-100');
        }
    }
    
    hideSliderTooltip() {
        if (this.sliderTooltip) {
            this.sliderTooltip.classList.add('opacity-0');
            this.sliderTooltip.classList.remove('opacity-100');
        }
    }
    
    isValidWeight(weight) {
        return weight >= 1 && weight <= 500; // Reasonable weight bounds
    }
    
    validateWeightInput() {
        const weight = parseFloat(this.patientWeightInput.value);
        
        if (!weight || weight <= 0) {
            this.clearInputValidation(this.patientWeightInput);
            return true; // Allow empty fields
        }
        
        if (!this.isValidWeight(weight)) {
            this.showInputError(this.patientWeightInput, 'Weight must be between 1-500');
            return false;
        }
        
        this.clearInputValidation(this.patientWeightInput);
        return true;
    }
    
    showInputError(input, message) {
        input.classList.add('border-red-500', 'bg-red-50');
        input.classList.remove('border-gray-300');
        
        // Find or create error element
        const errorId = input.id + 'Error';
        let errorElement = document.getElementById(errorId);
        
        if (!errorElement) {
            // Create error element if it doesn't exist
            errorElement = document.createElement('div');
            errorElement.id = errorId;
            errorElement.className = 'text-sm text-red-600';
            input.parentNode.appendChild(errorElement);
        }
        
        errorElement.textContent = message;
        errorElement.classList.remove('hidden');
    }
    
    clearInputValidation(input) {
        input.classList.remove('border-red-500', 'bg-red-50');
        input.classList.add('border-gray-300');
        
        const errorId = input.id + 'Error';
        const errorElement = document.getElementById(errorId);
        if (errorElement) {
            errorElement.classList.add('hidden');
        }
    }
    
    checkPenExpiration(daySupply, pensToOrder) {
        const selectedValue = this.penSelect;
        let expirationDays = 84; // Default 84 days for most pens
        
        // Tresiba expires in 56 days
        if (selectedValue === 'tresiba-flextouch') {
            expirationDays = 56;
        }
        
        // Calculate if day supply exceeds pen expiration
        if (daySupply > expirationDays) {
            const pensNeeded = Math.ceil(daySupply / expirationDays);
            return {
                needsMorePens: pensNeeded > pensToOrder,
                recommendedPens: Math.max(pensToOrder, pensNeeded),
                warning: `This pen expires ${expirationDays} days after first use. For ${daySupply} day supply, you need at least ${pensNeeded} pen${pensNeeded > 1 ? 's' : ''} to avoid expiration.`
            };
        }
        
        return { needsMorePens: false, recommendedPens: pensToOrder, warning: null };
    }
    
    checkExpirationWarning(penValue) {
        const daySupply = parseFloat(this.daySupplyInput.value) || 30;
        
        if (penValue === 'tresiba-flextouch' && daySupply > 56) {
            this.showExpirationWarning(`⚠️ Tresiba expires 56 days after first use. Consider multiple pens for ${daySupply} day supply.`);
        } else {
            this.hideExpirationWarning();
        }
    }
    
    showExpirationWarning(message) {
        if (this.expirationWarning) {
            this.expirationWarning.textContent = message;
            this.expirationWarning.classList.remove('hidden');
        }
    }
    
    hideExpirationWarning() {
        if (this.expirationWarning) {
            this.expirationWarning.classList.add('hidden');
        }
    }
    
    checkMaxDoseLimit() {
        const selectedValue = this.penSelect;
        const dose = parseFloat(this.unitsPerDoseInput.value);
        
        // Clear warning if no pen selected or no dose entered
        if (!selectedValue || !dose || dose <= 0) {
            this.hideMaxDoseWarning();
            return;
        }
        
        // Get max dose limit for selected pen
        const maxDose = this.maxDoseLimits[selectedValue];
        
        // Show warning if dose exceeds maximum
        if (maxDose && dose > maxDose) {
            this.showMaxDoseWarning(dose, maxDose);
        } else {
            this.hideMaxDoseWarning();
        }
    }
    
    showMaxDoseWarning(enteredDose, maxDose) {
        if (this.maxDoseWarning) {
            // Update warning message with specific values
            this.maxDoseWarning.innerHTML = `
                ⚠️ This dose (${enteredDose} units) exceeds the max deliverable in a single injection for this pen (${maxDose} units max). Consider splitting the dose or using a different formulation.
            `;
            this.maxDoseWarning.classList.remove('hidden');
        }
    }
    
    hideMaxDoseWarning() {
        if (this.maxDoseWarning) {
            this.maxDoseWarning.classList.add('hidden');
        }
    }
    
    
    displayDiscountLinks(values, results) {
        if (!this.selectedPen || !this.inlineDiscountLinks) return;
        
        const selectedValue = this.penSelect; // penSelect is now the string value directly
        const discountInfo = this.penDiscountInfo[selectedValue];
        
        if (!discountInfo) {
            this.inlineDiscountLinks.classList.add('hidden');
            return;
        }
        
        // Build discount links HTML based on available options
        let linksHTML = '';
        
        // Add GoodRx link (only for Sanofi pens)
        if (discountInfo.goodrx) {
            linksHTML += `
                <a href="${discountInfo.goodrx.url}" 
                   target="_blank" 
                   rel="noopener noreferrer" 
                   class="text-blue-600 hover:text-blue-800 underline focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 rounded">
                    ${discountInfo.goodrx.text}
                </a>
            `;
        }
        
        // Add Lilly link (only for Lilly pens)
        if (discountInfo.lilly) {
            if (linksHTML) linksHTML += ' • ';
            linksHTML += `
                <a href="${discountInfo.lilly.url}" 
                   target="_blank" 
                   rel="noopener noreferrer" 
                   class="text-blue-600 hover:text-blue-800 underline focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 rounded">
                    ${discountInfo.lilly.text}
                </a>
            `;
        }
        
        // Add NovoCare link (only for Novo Nordisk pens)
        if (discountInfo.novocare) {
            if (linksHTML) linksHTML += ' • ';
            linksHTML += `
                <a href="${discountInfo.novocare.url}" 
                   target="_blank" 
                   rel="noopener noreferrer" 
                   class="text-blue-600 hover:text-blue-800 underline focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 rounded">
                    ${discountInfo.novocare.text}
                </a>
            `;
        }
        
        // Add SingleCare link
        if (discountInfo.singlecare) {
            if (linksHTML) linksHTML += ' • ';
            linksHTML += `
                <a href="${discountInfo.singlecare.url}" 
                   target="_blank" 
                   rel="noopener noreferrer" 
                   class="text-blue-600 hover:text-blue-800 underline focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 rounded">
                    ${discountInfo.singlecare.text}
                </a>
            `;
        }
        
        // Add Amazon link (for all pens)
        if (discountInfo.amazon) {
            if (linksHTML) linksHTML += ' • ';
            linksHTML += `
                <a href="${discountInfo.amazon.url}" 
                   target="_blank" 
                   rel="noopener noreferrer" 
                   class="text-blue-600 hover:text-blue-800 underline focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 rounded">
                    ${discountInfo.amazon.text}
                </a>
            `;
        }
        
        this.inlineDiscountContent.innerHTML = linksHTML;
        this.inlineDiscountLinks.classList.remove('hidden');
    }

    // Mobile detection helper with iOS-specific detection
    isMobile() {
        return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) || 
               window.innerWidth <= 768;
    }
    
    // iOS-specific detection
    isIOS() {
        return /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
    }

    handleButtonKeydown(e) {
        if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') {
            e.preventDefault();
            this.openModal();
        } else if (e.key === 'ArrowUp') {
            e.preventDefault();
            this.openModal();
        }
    }

    handleCardKeydown(e, penValue) {
        const cards = Array.from(this.penSelectorContent.querySelectorAll('.pen-card'));
        const currentIndex = cards.indexOf(e.target);

        switch (e.key) {
            case 'Enter':
            case ' ':
                e.preventDefault();
                this.selectPen(penValue);
                break;
            case 'ArrowDown':
                e.preventDefault();
                const nextIndex = (currentIndex + 1) % cards.length;
                cards[nextIndex].focus();
                break;
            case 'ArrowUp':
                e.preventDefault();
                const prevIndex = (currentIndex - 1 + cards.length) % cards.length;
                cards[prevIndex].focus();
                break;
            case 'Escape':
                e.preventDefault();
                this.closeModal();
                break;
        }
    }

    selectPen(penValue) {
        this.currentPenId = penValue; // Track currently selected pen
        this.penSelect = penValue; // Set for compatibility
        this.selectedPen = this.findPenByValue(penValue);
        
        if (penValue && this.selectedPen) {
            // Update button label
            this.penSelectLabel.textContent = `${this.selectedPen.brand} (${this.selectedPen.generic})`;
            this.penSelectLabel.classList.remove('text-gray-500');
            this.penSelectLabel.classList.add('text-gray-900');

            // Brief confirmation highlight on the select button
            this.penSelectButton.classList.add('border-blue-500', 'ring-2', 'ring-blue-200');
            setTimeout(() => {
                this.penSelectButton.classList.remove('border-blue-500', 'ring-2', 'ring-blue-200');
            }, 1200);

            // Update form values
            const penType = this.findPenType(penValue);
            this.setPenValues(this.selectedPen.concentration, this.selectedPen.volume, penType);
            this.toggleWeightBasedDosing(penType);
            this.showPricingInfo(penValue, this.selectedPen);
            this.checkExpirationWarning(penValue);
            this.checkMaxDoseLimit();
        } else {
            // Reset to default
            this.currentPenId = null;
            this.penSelectLabel.textContent = 'Select an insulin pen...';
            this.penSelectLabel.classList.add('text-gray-500');
            this.penSelectLabel.classList.remove('text-gray-900');
            this.selectedPen = null;
            
            // Re-enable concentration and volume fields when no pen is selected
            this.concentrationInput.disabled = false;
            this.volumePerPenInput.disabled = false;
            this.concentrationInput.classList.remove('bg-gray-100', 'cursor-not-allowed');
            this.volumePerPenInput.classList.remove('bg-gray-100', 'cursor-not-allowed');
            
            this.toggleWeightBasedDosing(null);
            this.showPricingInfo(null, null);
            this.hideExpirationWarning();
        }
        
        // Update visual selection in modal
        this.updateModalSelection();
        
        // Close modal after selection (only if modal is open)
        if (this.penSelectorModal && !this.penSelectorModal.classList.contains('hidden')) {
            this.closeModal();
        }
    }

    clearAllPenSelections() {
        // Aggressively clear all selection styles from all pen cards
        if (!this.penSelectorContent) return;
        
        const allCards = this.penSelectorContent.querySelectorAll('.pen-card');
        allCards.forEach(card => {
            // Remove ALL possible selection-related classes
            card.classList.remove('ring-2', 'ring-blue-500', 'bg-blue-50', 'border-blue-300', 'border-blue-500');
            // Ensure default styling matches initial card creation
            card.classList.add('bg-white', 'border', 'border-gray-200');
            // Clear focus to prevent persistent focus rings
            card.blur();
        });
    }

    updateModalSelection() {
        // Update visual selection in modal - ensure only one pen is highlighted
        if (!this.penSelectorContent) return;
        
        console.log('Updating modal selection. Current pen ID:', this.currentPenId);
        
        // First, aggressively clear ALL selections
        this.clearAllPenSelections();
        
        // Then apply selection styles ONLY to the currently selected card
        if (this.currentPenId) {
            const selectedCard = this.penSelectorContent.querySelector(`[data-pen-id="${this.currentPenId}"]`);
            if (selectedCard) {
                console.log('Applying selection styles to:', this.currentPenId);
                selectedCard.classList.remove('bg-white', 'border', 'border-gray-200');
                selectedCard.classList.add('ring-2', 'ring-blue-500', 'bg-blue-50', 'border', 'border-blue-300');
            }
        }
    }

    scrollToDosingSlider() {
        // Find the dosing slider
        const dosingSlider = document.getElementById('dosingSlider');
        if (dosingSlider) {
            // Scroll to show the slider with some offset to show it nicely
            const elementTop = dosingSlider.getBoundingClientRect().top + window.pageYOffset;
            const offsetPosition = elementTop - 150; // 150px offset from top to show label too
            
            window.scrollTo({
                top: offsetPosition,
                behavior: 'smooth'
            });
            
            // No auto-focus on slider since it's a range input and user should choose manually
        }
    }

}


// Initialize the calculator when the page loads
document.addEventListener('DOMContentLoaded', () => {
    new InsulinCalculator();
});