{% extends 'base.html' %}
{% load static %}

{% block title %}Drug Interaction Checker - Pharmacy Management{% endblock %}

{% block content %}
<div class="content">
    <div class="container-fluid">
        <!-- Page Header -->
        <div class="row">
            <div class="col-12">
                <div class="page-header">
                    <div class="page-title">
                        <h4>Drug Interaction Checker</h4>
                        <h6>Check for potential drug interactions and clinical alerts</h6>
                    </div>
                    <div class="page-btn">
                        <a href="{% url 'pharmacy:drug_interaction_list' %}" class="btn btn-secondary">
                            <i class="fas fa-list me-1"></i>View All Interactions
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <!-- Drug Selection Panel -->
            <div class="col-lg-8 col-md-12">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">
                            <i class="fas fa-pills me-2"></i>
                            Drug Selection
                        </h5>
                    </div>
                    <div class="card-body">
                        <!-- Patient Selection -->
                        <div class="row mb-4">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="patientSelect" class="form-label">
                                        Select Patient <span class="text-danger">*</span>
                                    </label>
                                    <select id="patientSelect" class="form-select">
                                        <option value="">Choose a patient...</option>
                                        <option value="1" data-mrn="123456" data-allergies="Penicillin, Sulfa">John Smith (MRN: 123456)</option>
                                        <option value="2" data-mrn="789012" data-allergies="None">Sarah Johnson (MRN: 789012)</option>
                                        <option value="3" data-mrn="345678" data-allergies="Aspirin">Michael Brown (MRN: 345678)</option>
                                        <option value="4" data-mrn="901234" data-allergies="Latex, Iodine">Emily Davis (MRN: 901234)</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-label">Patient Allergies</label>
                                    <div id="patientAllergies" class="alert alert-info" style="display: none;">
                                        <i class="fas fa-exclamation-triangle me-2"></i>
                                        <span id="allergiesList">No allergies on file</span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Drug Search and Selection -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <label class="form-label">Add Medications</label>
                                <div class="input-group">
                                    <input type="text" id="drugSearch" class="form-control" 
                                           placeholder="Search for medications (generic or brand name)...">
                                    <button class="btn btn-primary" type="button" onclick="searchDrugs()">
                                        <i class="fas fa-search"></i>
                                    </button>
                                </div>
                                <small class="form-text text-muted">
                                    Type at least 3 characters to search for medications
                                </small>
                            </div>
                        </div>

                        <!-- Drug Search Results -->
                        <div id="drugSearchResults" class="mb-4" style="display: none;">
                            <h6>Search Results:</h6>
                            <div class="list-group" id="searchResultsList">
                                <!-- Search results will be populated here -->
                            </div>
                        </div>

                        <!-- Selected Drugs -->
                        <div class="row">
                            <div class="col-12">
                                <h6>Selected Medications:</h6>
                                <div id="selectedDrugs" class="selected-drugs-container">
                                    <div class="alert alert-light text-center">
                                        <i class="fas fa-pills fa-2x text-muted mb-2"></i>
                                        <p class="mb-0">No medications selected yet</p>
                                        <small class="text-muted">Search and add medications to check for interactions</small>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Action Buttons -->
                        <div class="row mt-4">
                            <div class="col-12 text-end">
                                <button type="button" class="btn btn-secondary me-2" onclick="clearAllDrugs()">
                                    <i class="fas fa-trash me-1"></i>Clear All
                                </button>
                                <button type="button" class="btn btn-primary" onclick="checkInteractions()" disabled id="checkButton">
                                    <i class="fas fa-search me-1"></i>Check Interactions
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Quick Actions Panel -->
            <div class="col-lg-4 col-md-12">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">
                            <i class="fas fa-bolt me-2"></i>
                            Quick Actions
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="d-grid gap-2">
                            <button type="button" class="btn btn-outline-primary" onclick="loadCommonCombinations()">
                                <i class="fas fa-star me-2"></i>Common Drug Combinations
                            </button>
                            <button type="button" class="btn btn-outline-warning" onclick="loadHighRiskDrugs()">
                                <i class="fas fa-exclamation-triangle me-2"></i>High-Risk Medications
                            </button>
                            <button type="button" class="btn btn-outline-info" onclick="loadRecentChecks()">
                                <i class="fas fa-history me-2"></i>Recent Checks
                            </button>
                            <button type="button" class="btn btn-outline-success" onclick="loadPatientMedications()">
                                <i class="fas fa-user-md me-2"></i>Patient's Current Meds
                            </button>
                        </div>
                    </div>
                </div>

                <!-- Statistics Card -->
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">
                            <i class="fas fa-chart-bar me-2"></i>
                            Today's Statistics
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="stat-item mb-3">
                            <div class="d-flex justify-content-between">
                                <span>Checks Performed</span>
                                <strong class="text-primary">247</strong>
                            </div>
                        </div>
                        <div class="stat-item mb-3">
                            <div class="d-flex justify-content-between">
                                <span>Critical Alerts</span>
                                <strong class="text-danger">8</strong>
                            </div>
                        </div>
                        <div class="stat-item mb-3">
                            <div class="d-flex justify-content-between">
                                <span>Major Interactions</span>
                                <strong class="text-warning">24</strong>
                            </div>
                        </div>
                        <div class="stat-item">
                            <div class="d-flex justify-content-between">
                                <span>Alerts Resolved</span>
                                <strong class="text-success">89</strong>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Interaction Results -->
        <div class="row" id="interactionResults" style="display: none;">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">
                            <i class="fas fa-exclamation-triangle me-2"></i>
                            Interaction Analysis Results
                        </h5>
                    </div>
                    <div class="card-body">
                        <div id="interactionContent">
                            <!-- Results will be populated here -->
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Common Drug Combinations Modal -->
        <div class="modal fade" id="commonCombinationsModal" tabindex="-1">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">
                            <i class="fas fa-star me-2"></i>Common Drug Combinations
                        </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-6">
                                <h6>Cardiovascular</h6>
                                <div class="list-group mb-3">
                                    <a href="#" class="list-group-item list-group-item-action" onclick="addDrugCombination(['Lisinopril', 'Hydrochlorothiazide'])">
                                        <strong>ACE Inhibitor + Diuretic</strong>
                                        <small class="d-block text-muted">Lisinopril + HCTZ</small>
                                    </a>
                                    <a href="#" class="list-group-item list-group-item-action" onclick="addDrugCombination(['Metoprolol', 'Amlodipine'])">
                                        <strong>Beta Blocker + CCB</strong>
                                        <small class="d-block text-muted">Metoprolol + Amlodipine</small>
                                    </a>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <h6>Diabetes</h6>
                                <div class="list-group mb-3">
                                    <a href="#" class="list-group-item list-group-item-action" onclick="addDrugCombination(['Metformin', 'Glipizide'])">
                                        <strong>Metformin + Sulfonylurea</strong>
                                        <small class="d-block text-muted">Metformin + Glipizide</small>
                                    </a>
                                    <a href="#" class="list-group-item list-group-item-action" onclick="addDrugCombination(['Insulin', 'Metformin'])">
                                        <strong>Insulin + Metformin</strong>
                                        <small class="d-block text-muted">Long-acting insulin + Metformin</small>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
let selectedDrugs = [];
let drugDatabase = [
    { id: 1, name: 'Lisinopril', generic: 'Lisinopril', brand: 'Prinivil, Zestril', class: 'ACE Inhibitor' },
    { id: 2, name: 'Metformin', generic: 'Metformin', brand: 'Glucophage', class: 'Biguanide' },
    { id: 3, name: 'Atorvastatin', generic: 'Atorvastatin', brand: 'Lipitor', class: 'Statin' },
    { id: 4, name: 'Amlodipine', generic: 'Amlodipine', brand: 'Norvasc', class: 'Calcium Channel Blocker' },
    { id: 5, name: 'Warfarin', generic: 'Warfarin', brand: 'Coumadin', class: 'Anticoagulant' },
    { id: 6, name: 'Aspirin', generic: 'Aspirin', brand: 'Bayer', class: 'NSAID' },
    { id: 7, name: 'Simvastatin', generic: 'Simvastatin', brand: 'Zocor', class: 'Statin' },
    { id: 8, name: 'Metoprolol', generic: 'Metoprolol', brand: 'Lopressor', class: 'Beta Blocker' },
    { id: 9, name: 'Hydrochlorothiazide', generic: 'Hydrochlorothiazide', brand: 'Microzide', class: 'Diuretic' },
    { id: 10, name: 'Amoxicillin', generic: 'Amoxicillin', brand: 'Amoxil', class: 'Antibiotic' }
];

document.addEventListener('DOMContentLoaded', function() {
    // Initialize patient selection
    const patientSelect = document.getElementById('patientSelect');
    patientSelect.addEventListener('change', function() {
        updatePatientAllergies();
    });

    // Initialize drug search
    const drugSearch = document.getElementById('drugSearch');
    drugSearch.addEventListener('input', function() {
        if (this.value.length >= 3) {
            searchDrugs();
        } else {
            document.getElementById('drugSearchResults').style.display = 'none';
        }
    });

    drugSearch.addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            e.preventDefault();
            searchDrugs();
        }
    });
});

function updatePatientAllergies() {
    const patientSelect = document.getElementById('patientSelect');
    const allergiesDiv = document.getElementById('patientAllergies');
    const allergiesList = document.getElementById('allergiesList');
    
    if (patientSelect.value) {
        const selectedOption = patientSelect.options[patientSelect.selectedIndex];
        const allergies = selectedOption.dataset.allergies;
        
        allergiesList.textContent = allergies || 'No allergies on file';
        allergiesDiv.style.display = 'block';
        
        if (allergies && allergies !== 'None') {
            allergiesDiv.className = 'alert alert-warning';
        } else {
            allergiesDiv.className = 'alert alert-info';
        }
    } else {
        allergiesDiv.style.display = 'none';
    }
}

function searchDrugs() {
    const searchTerm = document.getElementById('drugSearch').value.toLowerCase();
    const resultsDiv = document.getElementById('drugSearchResults');
    const resultsList = document.getElementById('searchResultsList');
    
    if (searchTerm.length < 3) {
        resultsDiv.style.display = 'none';
        return;
    }
    
    const results = drugDatabase.filter(drug => 
        drug.name.toLowerCase().includes(searchTerm) ||
        drug.generic.toLowerCase().includes(searchTerm) ||
        drug.brand.toLowerCase().includes(searchTerm)
    );
    
    resultsList.innerHTML = '';
    
    if (results.length > 0) {
        results.forEach(drug => {
            const item = document.createElement('a');
            item.className = 'list-group-item list-group-item-action';
            item.href = '#';
            item.onclick = () => addDrug(drug);
            item.innerHTML = `
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <strong>${drug.name}</strong>
                        <small class="d-block text-muted">${drug.brand} - ${drug.class}</small>
                    </div>
                    <i class="fas fa-plus text-primary"></i>
                </div>
            `;
            resultsList.appendChild(item);
        });
        resultsDiv.style.display = 'block';
    } else {
        resultsList.innerHTML = '<div class="list-group-item">No medications found</div>';
        resultsDiv.style.display = 'block';
    }
}

function addDrug(drug) {
    // Check if drug is already selected
    if (selectedDrugs.find(d => d.id === drug.id)) {
        alert('This medication is already selected.');
        return;
    }
    
    selectedDrugs.push(drug);
    updateSelectedDrugsDisplay();
    updateCheckButton();
    
    // Clear search
    document.getElementById('drugSearch').value = '';
    document.getElementById('drugSearchResults').style.display = 'none';
}

function addDrugCombination(drugNames) {
    drugNames.forEach(drugName => {
        const drug = drugDatabase.find(d => d.name === drugName);
        if (drug && !selectedDrugs.find(d => d.id === drug.id)) {
            selectedDrugs.push(drug);
        }
    });
    
    updateSelectedDrugsDisplay();
    updateCheckButton();
    
    // Close modal
    const modal = bootstrap.Modal.getInstance(document.getElementById('commonCombinationsModal'));
    if (modal) modal.hide();
}

function removeDrug(drugId) {
    selectedDrugs = selectedDrugs.filter(drug => drug.id !== drugId);
    updateSelectedDrugsDisplay();
    updateCheckButton();
}

function updateSelectedDrugsDisplay() {
    const container = document.getElementById('selectedDrugs');
    
    if (selectedDrugs.length === 0) {
        container.innerHTML = `
            <div class="alert alert-light text-center">
                <i class="fas fa-pills fa-2x text-muted mb-2"></i>
                <p class="mb-0">No medications selected yet</p>
                <small class="text-muted">Search and add medications to check for interactions</small>
            </div>
        `;
        return;
    }
    
    container.innerHTML = selectedDrugs.map(drug => `
        <div class="selected-drug-item mb-2">
            <div class="d-flex justify-content-between align-items-center p-3 border rounded">
                <div>
                    <strong>${drug.name}</strong>
                    <small class="d-block text-muted">${drug.brand} - ${drug.class}</small>
                </div>
                <button type="button" class="btn btn-sm btn-outline-danger" onclick="removeDrug(${drug.id})">
                    <i class="fas fa-times"></i>
                </button>
            </div>
        </div>
    `).join('');
}

function updateCheckButton() {
    const checkButton = document.getElementById('checkButton');
    checkButton.disabled = selectedDrugs.length < 2;
}

function clearAllDrugs() {
    if (selectedDrugs.length > 0 && confirm('Are you sure you want to clear all selected medications?')) {
        selectedDrugs = [];
        updateSelectedDrugsDisplay();
        updateCheckButton();
        document.getElementById('interactionResults').style.display = 'none';
    }
}

function checkInteractions() {
    if (selectedDrugs.length < 2) {
        alert('Please select at least 2 medications to check for interactions.');
        return;
    }
    
    const patientSelect = document.getElementById('patientSelect');
    if (!patientSelect.value) {
        alert('Please select a patient first.');
        return;
    }
    
    // Show loading state
    const checkButton = document.getElementById('checkButton');
    const originalText = checkButton.innerHTML;
    checkButton.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>Checking...';
    checkButton.disabled = true;
    
    // Simulate API call
    setTimeout(() => {
        displayInteractionResults();
        checkButton.innerHTML = originalText;
        checkButton.disabled = false;
    }, 2000);
}

function displayInteractionResults() {
    const resultsDiv = document.getElementById('interactionResults');
    const contentDiv = document.getElementById('interactionContent');
    
    // Sample interaction results
    const interactions = [
        {
            severity: 'critical',
            drugs: ['Warfarin', 'Aspirin'],
            effect: 'Increased bleeding risk',
            recommendation: 'Monitor INR closely. Consider alternative antiplatelet therapy.',
            mechanism: 'Additive anticoagulant effects'
        },
        {
            severity: 'major',
            drugs: ['Simvastatin', 'Amlodipine'],
            effect: 'Increased myopathy risk',
            recommendation: 'Monitor CK levels. Consider dose reduction of simvastatin.',
            mechanism: 'CYP3A4 inhibition increases simvastatin levels'
        }
    ];
    
    let html = '';
    
    if (interactions.length === 0) {
        html = `
            <div class="alert alert-success">
                <i class="fas fa-check-circle me-2"></i>
                <strong>No significant interactions found</strong>
                <p class="mb-0 mt-2">The selected medications appear to be safe to use together based on current clinical data.</p>
            </div>
        `;
    } else {
        html = `
            <div class="alert alert-warning mb-4">
                <i class="fas fa-exclamation-triangle me-2"></i>
                <strong>${interactions.length} potential interaction(s) found</strong>
                <p class="mb-0 mt-2">Please review the interactions below and take appropriate clinical action.</p>
            </div>
        `;
        
        interactions.forEach((interaction, index) => {
            const severityClass = {
                'critical': 'danger',
                'major': 'warning',
                'moderate': 'info',
                'minor': 'secondary'
            }[interaction.severity];
            
            html += `
                <div class="card mb-3">
                    <div class="card-header bg-${severityClass} bg-opacity-25">
                        <div class="d-flex justify-content-between align-items-center">
                            <h6 class="mb-0">
                                <span class="badge bg-${severityClass} me-2">${interaction.severity.toUpperCase()}</span>
                                ${interaction.drugs.join(' + ')}
                            </h6>
                            <i class="fas fa-exclamation-triangle text-${severityClass}"></i>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <h6>Clinical Effect</h6>
                                <p class="text-${severityClass}"><strong>${interaction.effect}</strong></p>
                                
                                <h6>Mechanism</h6>
                                <p class="text-muted">${interaction.mechanism}</p>
                            </div>
                            <div class="col-md-6">
                                <h6>Recommendation</h6>
                                <p>${interaction.recommendation}</p>
                                
                                <div class="mt-3">
                                    <button type="button" class="btn btn-sm btn-outline-primary me-2">
                                        <i class="fas fa-bookmark me-1"></i>Save Alert
                                    </button>
                                    <button type="button" class="btn btn-sm btn-outline-secondary me-2">
                                        <i class="fas fa-print me-1"></i>Print
                                    </button>
                                    <button type="button" class="btn btn-sm btn-outline-info">
                                        <i class="fas fa-info-circle me-1"></i>More Info
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            `;
        });
    }
    
    contentDiv.innerHTML = html;
    resultsDiv.style.display = 'block';
    
    // Scroll to results
    resultsDiv.scrollIntoView({ behavior: 'smooth' });
}

function loadCommonCombinations() {
    const modal = new bootstrap.Modal(document.getElementById('commonCombinationsModal'));
    modal.show();
}

function loadHighRiskDrugs() {
    alert('High-risk medications feature would be implemented here.');
}

function loadRecentChecks() {
    alert('Recent checks feature would be implemented here.');
}

function loadPatientMedications() {
    const patientSelect = document.getElementById('patientSelect');
    if (!patientSelect.value) {
        alert('Please select a patient first.');
        return;
    }
    
    // Sample patient medications
    const patientMeds = ['Lisinopril', 'Metformin', 'Atorvastatin'];
    
    patientMeds.forEach(medName => {
        const drug = drugDatabase.find(d => d.name === medName);
        if (drug && !selectedDrugs.find(d => d.id === drug.id)) {
            selectedDrugs.push(drug);
        }
    });
    
    updateSelectedDrugsDisplay();
    updateCheckButton();
}
</script>

<style>
.selected-drug-item {
    transition: all 0.3s ease;
}

.selected-drug-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.stat-item {
    padding: 8px 0;
    border-bottom: 1px solid #eee;
}

.stat-item:last-child {
    border-bottom: none;
}

.list-group-item:hover {
    background-color: #f8f9fa;
}

.card {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    border: 1px solid rgba(0, 0, 0, 0.125);
    margin-bottom: 1.5rem;
}

.card-header {
    background-color: rgba(0, 123, 255, 0.1);
    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}

@media (max-width: 768px) {
    .selected-drugs-container {
        max-height: 300px;
        overflow-y: auto;
    }
}
</style>
{% endblock %}