page1_intro.py

"""
page1_intro.py — Introduction, How to Use, Objectives, Architecture Diagram
"""

import streamlit as st
from styles import (inject_global_css, page_header, metric_row,
                    WCO_GOLD, WCO_BLUE, WCO_GREEN, WCO_RED, WCO_CARD_BG, WCO_BORDER, WCO_MUTED)

ARCH_SVG = """
<svg viewBox="0 0 980 620" xmlns="http://www.w3.org/2000/svg"
     style="width:100%;border-radius:14px;background:#070E1C;">
  <defs>
    <linearGradient id="hbg" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" stop-color="#003087"/><stop offset="100%" stop-color="#001040"/>
    </linearGradient>
    <linearGradient id="gold" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0%" stop-color="#C8A951"/><stop offset="100%" stop-color="#FFD966"/>
    </linearGradient>
    <marker id="arr"  markerWidth="9" markerHeight="9" refX="7" refY="3" orient="auto">
      <path d="M0,0 L0,6 L9,3z" fill="#C8A951"/>
    </marker>
    <marker id="arrb" markerWidth="9" markerHeight="9" refX="7" refY="3" orient="auto">
      <path d="M0,0 L0,6 L9,3z" fill="#66AAFF"/>
    </marker>
    <marker id="arrg" markerWidth="9" markerHeight="9" refX="7" refY="3" orient="auto">
      <path d="M0,0 L0,6 L9,3z" fill="#44CC88"/>
    </marker>
    <marker id="arrp" markerWidth="9" markerHeight="9" refX="7" refY="3" orient="auto">
      <path d="M0,0 L0,6 L9,3z" fill="#CC77FF"/>
    </marker>
    <filter id="glow"><feGaussianBlur stdDeviation="4" result="b"/>
      <feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge></filter>
  </defs>

  <!-- background -->
  <rect width="980" height="620" fill="#070E1C" rx="14"/>
  <rect width="980" height="3" fill="url(#gold)" rx="2"/>

  <!-- title bar -->
  <text x="490" y="32" text-anchor="middle" font-family="Georgia,serif" font-size="17"
        fill="#C8A951" font-weight="bold">No-CelH · Self-Learning RMS Architecture</text>
  <text x="490" y="52" text-anchor="middle" font-family="monospace" font-size="10" fill="#557">
    DATE Exploitation  ◈  gATE Exploration  ◈  Human-in-the-Loop  ◈  WCO Compendium
  </text>

  <!-- ══════════════════════ ROW 1 BOXES ══════════════════════ -->
  <!-- [1] Import Declarations -->
  <rect x="18" y="74" width="130" height="64" rx="9" fill="#0A1E4A" stroke="#C8A951" stroke-width="1.5"/>
  <text x="83" y="97"  text-anchor="middle" font-family="Georgia" font-size="13" fill="#C8A951">📦 Import</text>
  <text x="83" y="114" text-anchor="middle" font-family="Georgia" font-size="11" fill="#AAC">Declarations</text>
  <text x="83" y="128" text-anchor="middle" font-family="monospace" font-size="9"  fill="#667">1,000 Bills / Batch</text>

  <!-- [2] Risk Register -->
  <rect x="180" y="74" width="138" height="64" rx="9" fill="#0A1E4A" stroke="#0066CC" stroke-width="1.5"/>
  <text x="249" y="97"  text-anchor="middle" font-family="Georgia" font-size="13" fill="#66AAFF">📋 Risk Register</text>
  <text x="249" y="114" text-anchor="middle" font-family="Georgia" font-size="11" fill="#AAC">5 Risk Areas · Rules</text>
  <text x="249" y="128" text-anchor="middle" font-family="monospace" font-size="9"  fill="#667">Weights · Targets</text>

  <!-- [3] DATE Scoring Engine -->
  <rect x="356" y="64" width="170" height="84" rx="9" fill="#071A10" stroke="#00843D" stroke-width="2" filter="url(#glow)"/>
  <text x="441" y="89"  text-anchor="middle" font-family="Georgia" font-size="14" fill="#44CC88" font-weight="bold">🧠 DATE Engine</text>
  <text x="441" y="107" text-anchor="middle" font-family="Georgia" font-size="11" fill="#AAC">Exploitation: ŷᶜˡˢ + ŷʳᵉᵛ</text>
  <text x="441" y="122" text-anchor="middle" font-family="monospace" font-size="9"  fill="#44CC88">Fraud Score × Revenue</text>
  <text x="441" y="136" text-anchor="middle" font-family="monospace" font-size="9"  fill="#557">Risk Scoring Pipeline</text>

  <!-- [4] Hybrid Selector -->
  <rect x="566" y="64" width="168" height="84" rx="9" fill="#1A1000" stroke="#C8A951" stroke-width="2" filter="url(#glow)"/>
  <text x="650" y="89"  text-anchor="middle" font-family="Georgia" font-size="14" fill="#C8A951" font-weight="bold">⚖️ Hybrid Selector</text>
  <text x="650" y="107" text-anchor="middle" font-family="Georgia" font-size="11" fill="#AAC">90% DATE + 10% gATE</text>
  <text x="650" y="122" text-anchor="middle" font-family="monospace" font-size="9"  fill="#C8A951">Bandwidth: 10% (adj.)</text>
  <text x="650" y="136" text-anchor="middle" font-family="monospace" font-size="9"  fill="#557">Optimal Selection</text>

  <!-- [5] gATE Engine -->
  <rect x="356" y="178" width="170" height="74" rx="9" fill="#110A1E" stroke="#9933CC" stroke-width="1.8"/>
  <text x="441" y="200" text-anchor="middle" font-family="Georgia" font-size="13" fill="#CC77FF" font-weight="bold">🔍 gATE Engine</text>
  <text x="441" y="217" text-anchor="middle" font-family="Georgia" font-size="11" fill="#AAC">unc_i × log(ŷʳᵉᵛ + ε)</text>
  <text x="441" y="232" text-anchor="middle" font-family="monospace" font-size="9"  fill="#CC77FF">K-means++ Diversity</text>
  <text x="441" y="244" text-anchor="middle" font-family="monospace" font-size="9"  fill="#557">Concept Drift Guard</text>

  <!-- CHANNEL BOXES -->
  <!-- RED -->
  <rect x="775" y="60" width="100" height="44" rx="7" fill="#1E0008" stroke="#C8102E" stroke-width="1.8"/>
  <text x="825" y="79"  text-anchor="middle" font-family="Georgia" font-size="13" fill="#FF4466" font-weight="bold">🔴 RED</text>
  <text x="825" y="96"  text-anchor="middle" font-family="monospace" font-size="9"  fill="#FF8899">Physical Exam</text>
  <!-- YELLOW -->
  <rect x="775" y="111" width="100" height="44" rx="7" fill="#1A0F00" stroke="#F5A800" stroke-width="1.8"/>
  <text x="825" y="130" text-anchor="middle" font-family="Georgia" font-size="13" fill="#FFD700" font-weight="bold">🟡 YELLOW</text>
  <text x="825" y="147" text-anchor="middle" font-family="monospace" font-size="9"  fill="#FFE066">Doc Check</text>
  <!-- GREEN -->
  <rect x="775" y="162" width="100" height="44" rx="7" fill="#00100A" stroke="#00843D" stroke-width="1.8"/>
  <text x="825" y="181" text-anchor="middle" font-family="Georgia" font-size="13" fill="#44CC88" font-weight="bold">🟢 GREEN</text>
  <text x="825" y="198" text-anchor="middle" font-family="monospace" font-size="9"  fill="#88EEBB">Facilitated</text>

  <!-- ══════════ ARROWS ROW 1 ══════════ -->
  <line x1="148" y1="106" x2="178" y2="106" stroke="#C8A951" stroke-width="1.6" marker-end="url(#arr)"/>
  <line x1="318" y1="106" x2="354" y2="106" stroke="#C8A951" stroke-width="1.6" marker-end="url(#arr)"/>
  <line x1="526" y1="106" x2="564" y2="106" stroke="#C8A951" stroke-width="1.6" marker-end="url(#arr)"/>
  <line x1="734" y1="106" x2="773" y2="106" stroke="#C8A951" stroke-width="1.6" marker-end="url(#arr)"/>
  <!-- DATE → gATE (vertical) -->
  <line x1="441" y1="148" x2="441" y2="178" stroke="#44CC88" stroke-width="1.3" stroke-dasharray="5,3" marker-end="url(#arrg)"/>
  <!-- gATE → Hybrid -->
  <path d="M526 215 Q560 215 560 148 Q560 106 564 106" stroke="#CC77FF" stroke-width="1.4"
        stroke-dasharray="5,3" fill="none" marker-end="url(#arrp)"/>

  <!-- ══════════════ ROW 2: OFFICER INSPECTION ══════════════ -->
  <rect x="566" y="290" width="168" height="64" rx="9" fill="#0A1832" stroke="#0066CC" stroke-width="1.5"/>
  <text x="650" y="313" text-anchor="middle" font-family="Georgia" font-size="13" fill="#66AAFF" font-weight="bold">👮 Officer Inspection</text>
  <text x="650" y="330" text-anchor="middle" font-family="Georgia" font-size="11" fill="#AAC">Labels: yᶜˡˢ + yʳᵉᵛ</text>
  <text x="650" y="344" text-anchor="middle" font-family="monospace" font-size="9"  fill="#667">Human-in-the-Loop</text>

  <!-- Channels → Officer -->
  <line x1="825" y1="206" x2="825" y2="298" stroke="#66AAFF" stroke-width="1.3" stroke-dasharray="4,3"/>
  <line x1="825" y1="298" x2="736" y2="316" stroke="#66AAFF" stroke-width="1.3" marker-end="url(#arrb)"/>

  <!-- ══════════════ ROW 2: OFFENCE DATABASE ══════════════ -->
  <rect x="356" y="290" width="170" height="64" rx="9" fill="#1A0008" stroke="#C8102E" stroke-width="1.5"/>
  <text x="441" y="313" text-anchor="middle" font-family="Georgia" font-size="13" fill="#FF6688" font-weight="bold">🗄️ Offence Database</text>
  <text x="441" y="330" text-anchor="middle" font-family="Georgia" font-size="11" fill="#AAC">Augmented Real-Time</text>
  <text x="441" y="344" text-anchor="middle" font-family="monospace" font-size="9"  fill="#667">5 Risk Categories</text>

  <!-- Officer → Offence DB -->
  <line x1="566" y1="322" x2="528" y2="322" stroke="#FF4466" stroke-width="1.5" marker-end="url(#arr)"/>

  <!-- ══════════ FEEDBACK LOOPS ══════════ -->
  <!-- Offence DB → DATE (model update) -->
  <path d="M441 290 Q441 260 441 252 Q441 148 526 148" stroke="#44CC88" stroke-width="1.4"
        stroke-dasharray="6,3" fill="none" marker-end="url(#arrg)"/>
  <!-- Offence DB → Risk Register (weight update) -->
  <path d="M356 322 Q249 322 249 160 Q249 138 318 138" stroke="#66AAFF" stroke-width="1.3"
        stroke-dasharray="6,3" fill="none" marker-end="url(#arrb)"/>

  <!-- feedback labels -->
  <text x="480" y="258" font-family="monospace" font-size="9" fill="#44CC88">Model Update</text>
  <text x="255" y="275" font-family="monospace" font-size="9" fill="#66AAFF">Weight Update</text>

  <!-- ══════════════ BOTTOM METRICS BAND ══════════════ -->
  <rect x="18" y="390" width="290" height="90" rx="9" fill="#0F1C35" stroke="#C8102E" stroke-width="1.2"/>
  <text x="163" y="413" text-anchor="middle" font-family="Georgia" font-size="12" fill="#FF4466" font-weight="bold">📉 Static Model (Baseline)</text>
  <text x="163" y="433" text-anchor="middle" font-family="Georgia" font-size="11" fill="#AAC">Selection Rate: 10%  |  Detection: 4.1%</text>
  <text x="163" y="452" text-anchor="middle" font-family="Georgia" font-size="11" fill="#AAC">Efficiency Index: <tspan font-weight="bold" fill="#FF4466">0.41</tspan></text>
  <text x="163" y="470" text-anchor="middle" font-family="monospace" font-size="9"  fill="#667">Exploitation-only · No Learning</text>

  <rect x="328" y="390" width="290" height="90" rx="9" fill="#0F1C35" stroke="#00843D" stroke-width="2"/>
  <text x="473" y="413" text-anchor="middle" font-family="Georgia" font-size="12" fill="#44CC88" font-weight="bold">📈 Hybrid Model (No-CelH)</text>
  <text x="473" y="433" text-anchor="middle" font-family="Georgia" font-size="11" fill="#AAC">Selection Rate: 10%  |  Detection: 8.2%</text>
  <text x="473" y="452" text-anchor="middle" font-family="Georgia" font-size="11" fill="#AAC">Efficiency Index: <tspan font-weight="bold" fill="#44CC88">0.82</tspan></text>
  <text x="473" y="470" text-anchor="middle" font-family="monospace" font-size="9"  fill="#44CC88">DATE 90% + gATE 10% · Self-Learning</text>

  <!-- improvement arrow -->
  <line x1="320" y1="432" x2="326" y2="432" stroke="#C8A951" stroke-width="2" marker-end="url(#arr)"/>
  <text x="323" y="427" text-anchor="middle" font-family="Georgia" font-size="10" fill="#C8A951">+100%</text>

  <rect x="638" y="390" width="322" height="90" rx="9" fill="#0F1C35" stroke="#9933CC" stroke-width="1.2"/>
  <text x="799" y="413" text-anchor="middle" font-family="Georgia" font-size="12" fill="#CC77FF" font-weight="bold">🔬 Discovery Barometer</text>
  <text x="799" y="433" text-anchor="middle" font-family="Georgia" font-size="11" fill="#AAC">New Importers Discovered: ~10× more</text>
  <text x="799" y="452" text-anchor="middle" font-family="Georgia" font-size="11" fill="#AAC">New HS Codes Mapped: 2,000+ in 5 yrs</text>
  <text x="799" y="471" text-anchor="middle" font-family="monospace" font-size="9"  fill="#CC77FF">Sequential Fraud Detection: ✓ Enabled</text>

  <!-- ══════════════ FORMULA BAND ══════════════ -->
  <rect x="18" y="498" width="942" height="50" rx="8" fill="#0A1020" stroke="#1E3A6E" stroke-width="1"/>
  <text x="490" y="520" text-anchor="middle" font-family="monospace" font-size="11" fill="#C8A951">
    Uncertainty:  unc_i = −1.8 × |ŷᶜˡˢ − 0.5| + 1       Scale:  S_i = unc_i × log(ŷʳᵉᵛ + ε)
  </text>
  <text x="490" y="538" text-anchor="middle" font-family="monospace" font-size="10" fill="#557">
    Efficiency Index = Detection Rate / Selection Rate       Reference: Kim et al. (2022) IEEE TKDE · WCO Risk Compendium
  </text>

  <!-- WCO badge -->
  <rect x="370" y="562" width="240" height="30" rx="15" fill="#C8A951"/>
  <text x="490" y="582" text-anchor="middle" font-family="Georgia" font-size="11" fill="#003087" font-weight="bold">
    🌐 WCO Accredited Expert Framework
  </text>
</svg>
"""


def show():
    inject_global_css()
    page_header("🛃", "No-CelH: Self-Learning RMS",
                "WCO ACCREDITED · CUSTOMS RISK MANAGEMENT SYSTEM · ACTIVE LEARNING SIMULATION")

    # ── KPI strip ─────────────────────────────────────────────────
    metric_row([
        ("5",    "Risk Areas",              WCO_GOLD),
        ("1,000","Declarations / Run",      WCO_BLUE),
        ("10%",  "Interdiction Bandwidth",  WCO_RED),
        ("0.82", "Target Efficiency Index", WCO_GREEN),
        ("2×",   "Revenue vs Static",      WCO_GOLD),
    ])

    # ── Architecture SVG ──────────────────────────────────────────
    st.markdown('<div class="section-title">🏗️ System Architecture</div>', unsafe_allow_html=True)
    st.markdown(ARCH_SVG, unsafe_allow_html=True)

    st.markdown("<br/>", unsafe_allow_html=True)

    # ── Three info columns ────────────────────────────────────────
    c1, c2, c3 = st.columns(3)
    with c1:
        st.markdown("""
        <div class="wco-card">
        <h3>🎯 Objectives</h3>
        <ul style="color:#D0DCF0;font-size:13px;line-height:2;padding-left:16px;">
          <li>Demonstrate <b style="color:#C8A951;">self-learning RMS</b> vs static models</li>
          <li>Prove exploration + exploitation <b style="color:#44CC88;">hybrid superiority</b></li>
          <li>Optimise <b>10% interdiction bandwidth</b> dynamically</li>
          <li>Build offence database via Red/Yellow feedback</li>
          <li>Adapt to <b style="color:#CC77FF;">concept drift</b> in real-time</li>
          <li>WCO compendium risk scoring with 5 risk areas</li>
        </ul></div>""", unsafe_allow_html=True)
    with c2:
        st.markdown("""
        <div class="wco-card">
        <h3>📖 How to Use This App</h3>
        <div style="color:#D0DCF0;font-size:13px;line-height:2.0;">
          <p><b style="color:#C8A951;">📋 Page 2 →</b> Configure 5-area Risk Register, 3×3 Matrix, rules & annual weights</p>
          <p><b style="color:#C8A951;">🔄 Page 3 →</b> Run live simulation — watch 1,000 bills routed in real-time</p>
          <p><b style="color:#C8A951;">📊 Page 4 →</b> Analyse offence DB growth, exploration gains, rule hit tables</p>
          <p><b style="color:#C8A951;">🏆 Page 5 →</b> Optimisation report — efficiency, accuracy, bandwidth ROI</p>
        </div></div>""", unsafe_allow_html=True)
    with c3:
        st.markdown("""
        <div class="wco-card">
        <h3>🔬 Recommended Exploration Strategy</h3>
        <div style="color:#D0DCF0;font-size:13px;line-height:2.0;">
          <p><b style="color:#CC77FF;">bATE</b> — Best for customs context</p>
          <p>✅ Uncertainty-scaled gradient embeddings</p>
          <p>✅ Revenue-weighted diversity (K-means++)</p>
          <p>✅ Outperforms BADGE & random by large margin</p>
          <p>✅ Anomaly + probability-based hybrid sampling</p>
          <p style="color:#6B85AA;font-size:11px;">gATE adds gatekeeping randomness for adversarial robustness</p>
        </div></div>""", unsafe_allow_html=True)

    # ── How RMS works ─────────────────────────────────────────────
    st.markdown('<div class="section-title">⚙️ How the Self-Learning Cycle Works</div>',
                unsafe_allow_html=True)

    steps = [
        ("1", "#C8A951", "📥 Ingest",       "Batch of import declarations enters the scoring pipeline each week"),
        ("2", "#0066CC", "🧠 Score (DATE)",  "Exploitation engine scores each bill: fraud probability ŷᶜˡˢ + revenue ŷʳᵉᵛ"),
        ("3", "#9933CC", "🔍 Explore (gATE)","Exploration engine identifies uncertain bills (unc_i near 0.5) for new knowledge"),
        ("4", "#C8A951", "⚖️ Hybrid Select", "10% bandwidth split: 90% exploitation + 10% exploration → RED/YELLOW/GREEN"),
        ("5", "#0066CC", "👮 Inspect",       "Officers examine Red & Yellow — outcomes labelled (fraud / clean / doc-query)"),
        ("6", "#00843D", "🗄️ Feedback",      "Confirmed frauds augment offence DB; rule weights auto-update → model retrains"),
    ]
    cols = st.columns(6)
    for i, (num, col, title, desc) in enumerate(steps):
        with cols[i]:
            st.markdown(f"""
            <div style="background:#0F1C35;border:1px solid {col};border-radius:10px;
                        padding:16px 12px;text-align:center;height:160px;">
              <div style="background:{col};color:#070E1C;border-radius:50%;width:28px;height:28px;
                          line-height:28px;font-weight:700;margin:0 auto 10px;font-size:14px;">{num}</div>
              <div style="color:{col};font-weight:600;font-size:12px;margin-bottom:8px;">{title}</div>
              <div style="color:#8BAAD4;font-size:11px;line-height:1.5;">{desc}</div>
            </div>""", unsafe_allow_html=True)

    st.markdown("<br/>", unsafe_allow_html=True)

    # ── Scientific basis ──────────────────────────────────────────
    with st.expander("📚 Scientific Basis & Mathematical Formulas"):
        fc1, fc2 = st.columns(2)
        with fc1:
            st.markdown("""
            <div class="wco-card-gold">
            <h3>DATE Exploitation Engine</h3>
            <p style="color:#D0DCF0;font-size:13px;">Dual Attentive Tree-aware Embedding model optimises two objectives simultaneously:</p>
            <ul style="color:#D0DCF0;font-size:13px;line-height:2;">
              <li><b style="color:#44CC88;">ŷᶜˡˢ</b> — Probability of fraudulent transaction</li>
              <li><b style="color:#44CC88;">ŷʳᵉᵛ</b> — Predicted additional revenue upon inspection</li>
            </ul>
            <p style="color:#C8A951;font-family:monospace;font-size:13px;">
              h_θ(x) = σ(W · z_φ(x))
            </p>
            </div>""", unsafe_allow_html=True)
        with fc2:
            st.markdown("""
            <div class="wco-card-gold">
            <h3>gATE Exploration Engine</h3>
            <p style="color:#D0DCF0;font-size:13px;">Selects uncertain, high-revenue, diverse bills via:</p>
            <ul style="color:#D0DCF0;font-size:13px;line-height:2;">
              <li><b style="color:#CC77FF;">unc_i</b> = −1.8 × |ŷᶜˡˢ − 0.5| + 1</li>
              <li><b style="color:#CC77FF;">S_i</b> = unc_i × log(ŷʳᵉᵛ + ε)</li>
              <li>K-means++ seeding for batch diversity</li>
            </ul>
            <p style="color:#C8A951;font-family:monospace;font-size:13px;">
              Efficiency Index = Detection Rate / Selection Rate
            </p>
            </div>""", unsafe_allow_html=True)