src/streamlit_app.py

"""
🏠 ICD-10 Automated Clinical Coding System — Dashboard
"""
import streamlit as st
import os

# ── Page Config ──
st.set_page_config(
    page_title="ICD-10 AutoCoder",
    page_icon="🏥",
    layout="wide",
    initial_sidebar_state="expanded",
)

# ── Load CSS ──
css_path = os.path.join(os.path.dirname(__file__), "assets", "style.css")
if os.path.exists(css_path):
    with open(css_path, encoding="utf-8") as f:
        st.markdown(f"<style>{f.read()}</style>", unsafe_allow_html=True)

from utils.config import DATASET_STATS, TOP_20_CODES

# ── Sidebar ──
with st.sidebar:
    st.markdown("## 🏥 ICD-10 AutoCoder")
    st.markdown("---")
    st.markdown("""
    **Navigation**
    - 🏠 Dashboard (this page)
    - 🔬 Live ICD Coding
    - 📊 Model Comparison
    - 📖 ICD-10 Browser
    - 📈 Dataset Explorer
    - 📂 Batch Prediction
    - ⚙️ About
    """)
    st.markdown("---")
    st.markdown(
        '<p style="color: #64748b; font-size: 0.75rem;">'
        'Built for clinical NLP research<br>'
        'RTX 4050 · 6GB VRAM · LoRA</p>',
        unsafe_allow_html=True
    )


# ═══════════════════════════════════════════════════
# HERO SECTION
# ═══════════════════════════════════════════════════
st.markdown("""
<div class="hero-container">
    <div class="hero-title">ICD-10 Automated Clinical Coding</div>
    <div class="hero-subtitle">
        A hierarchical retrieval and biomedical re-ranking system for automated 
        ICD-10 diagnosis code assignment from clinical discharge notes. 
        Bilingual output (English + Traditional Chinese) across 2,863 codes.
    </div>
</div>
""", unsafe_allow_html=True)


# ═══════════════════════════════════════════════════
# STAT CARDS
# ═══════════════════════════════════════════════════
st.markdown('<div class="section-header"><div class="section-accent"></div>Project at a Glance</div>',
            unsafe_allow_html=True)

c1, c2, c3, c4 = st.columns(4)

with c1:
    st.markdown(f"""
    <div class="stat-card">
        <div class="stat-number">{DATASET_STATS['raw_records']:,}</div>
        <div class="stat-label">Clinical Records</div>
    </div>
    """, unsafe_allow_html=True)

with c2:
    st.markdown(f"""
    <div class="stat-card">
        <div class="stat-number">{DATASET_STATS['unique_encounters']:,}</div>
        <div class="stat-label">Patient Encounters</div>
    </div>
    """, unsafe_allow_html=True)

with c3:
    st.markdown(f"""
    <div class="stat-card">
        <div class="stat-number">{DATASET_STATS['unique_codes']:,}</div>
        <div class="stat-label">ICD-10 Codes</div>
    </div>
    """, unsafe_allow_html=True)

with c4:
    st.markdown("""
    <div class="stat-card">
        <div class="stat-number">4</div>
        <div class="stat-label">Trained Models</div>
    </div>
    """, unsafe_allow_html=True)


# ═══════════════════════════════════════════════════
# ARCHITECTURE PIPELINE
# ═══════════════════════════════════════════════════
st.markdown("")
st.markdown('<div class="section-header"><div class="section-accent"></div>Three-Layer Pipeline Architecture</div>',
            unsafe_allow_html=True)

col_l, col_r = st.columns([3, 2])

with col_l:
    st.markdown("""
    <div class="pipeline-step">
        <span class="badge badge-teal">LAYER 1</span>
        <div style="margin-top:0.5rem; font-size:1.05rem; font-weight:600; color:#e8ecf4;">
            Hierarchical TF-IDF Retriever
        </div>
        <div style="font-size:0.85rem; color:#94a3b8; margin-top:0.3rem;">
            Chapter → Category → Full code scoring<br>
            Reduces 2,863 codes → top-100 candidates
        </div>
    </div>
    <div class="pipeline-arrow">▼</div>
    <div class="pipeline-step">
        <span class="badge badge-blue">LAYER 2</span>
        <div style="margin-top:0.5rem; font-size:1.05rem; font-weight:600; color:#e8ecf4;">
            ClinicalBERT Re-Ranker (LoRA)
        </div>
        <div style="font-size:0.85rem; color:#94a3b8; margin-top:0.3rem;">
            Pairwise relevance scoring: (note, ICD description) → score<br>
            92.5% pairwise F1 accuracy
        </div>
    </div>
    <div class="pipeline-arrow">▼</div>
    <div class="pipeline-step">
        <span class="badge badge-purple">LAYER 3</span>
        <div style="margin-top:0.5rem; font-size:1.05rem; font-weight:600; color:#e8ecf4;">
            Bilingual Prediction Output
        </div>
        <div style="font-size:0.85rem; color:#94a3b8; margin-top:0.3rem;">
            Ranked ICD codes with confidence scores<br>
            English + Traditional Chinese descriptions
        </div>
    </div>
    """, unsafe_allow_html=True)

with col_r:
    st.markdown("""
    <div class="model-card" style="margin-bottom:1rem;">
        <div class="model-card-label">BEST BASELINE</div>
        <div class="model-card-title">TF-IDF + LinearSVC</div>
        <div class="model-card-metric">0.516</div>
        <div class="model-card-label">Micro-F1 (Top-100)</div>
    </div>
    <div class="model-card" style="margin-bottom:1rem;">
        <div class="model-card-label">BEST TRANSFORMER</div>
        <div class="model-card-title">ClinicalBERT (LoRA)</div>
        <div class="model-card-metric">0.397</div>
        <div class="model-card-label">Micro-F1 (Full 2,863)</div>
    </div>
    <div class="model-card">
        <div class="model-card-label">PROPOSED PIPELINE</div>
        <div class="model-card-title">Hierarchical Re-Ranker</div>
        <div class="model-card-metric">0.925</div>
        <div class="model-card-label">Pairwise Re-ranking F1</div>
    </div>
    """, unsafe_allow_html=True)


# ═══════════════════════════════════════════════════
# QUICK ACCESS
# ═══════════════════════════════════════════════════
st.markdown("")
st.markdown('<div class="section-header"><div class="section-accent"></div>Quick Access</div>',
            unsafe_allow_html=True)

qa1, qa2, qa3, qa4 = st.columns(4)

with qa1:
    st.markdown("""
    <div class="stat-card">
        <div style="font-size:2rem;">🔬</div>
        <div style="font-size:1.05rem; font-weight:600; color:#e8ecf4; margin-top:0.5rem;">
            Live ICD Coding
        </div>
        <div style="font-size:0.8rem; color:#94a3b8; margin-top:0.3rem;">
            Paste a clinical note and get instant ICD-10 predictions
        </div>
    </div>
    """, unsafe_allow_html=True)

with qa2:
    st.markdown("""
    <div class="stat-card">
        <div style="font-size:2rem;">📊</div>
        <div style="font-size:1.05rem; font-weight:600; color:#e8ecf4; margin-top:0.5rem;">
            Model Comparison
        </div>
        <div style="font-size:0.8rem; color:#94a3b8; margin-top:0.3rem;">
            Compare all 4 models with interactive charts
        </div>
    </div>
    """, unsafe_allow_html=True)

with qa3:
    st.markdown("""
    <div class="stat-card">
        <div style="font-size:2rem;">📖</div>
        <div style="font-size:1.05rem; font-weight:600; color:#e8ecf4; margin-top:0.5rem;">
            ICD-10 Browser
        </div>
        <div style="font-size:0.8rem; color:#94a3b8; margin-top:0.3rem;">
            Search and explore all 2,863 ICD-10 codes
        </div>
    </div>
    """, unsafe_allow_html=True)

with qa4:
    st.markdown("""
    <div class="stat-card">
        <div style="font-size:2rem;">📂</div>
        <div style="font-size:1.05rem; font-weight:600; color:#e8ecf4; margin-top:0.5rem;">
            Batch Prediction
        </div>
        <div style="font-size:0.8rem; color:#94a3b8; margin-top:0.3rem;">
            Upload CSV files for bulk ICD-10 coding with multi-model comparison
        </div>
    </div>
    """, unsafe_allow_html=True)


# ── Footer ──
st.markdown("""
<div class="footer">
    ICD-10 Automated Coding System · Biomedical NLP Research · 2026<br>
    Built with ClinicalBERT · Longformer · LoRA · PyTorch · Streamlit
</div>
""", unsafe_allow_html=True)