<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RiskGuard ΓÇö Operational Risk Management</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: 'Segoe UI', sans-serif; background: #f0f4f8; color: #1a202c; }
        .navbar { background: linear-gradient(135deg, #1F4E79, #2E75B6); padding: 0 32px; height: 64px; display: flex; align-items: center; justify-content: space-between; box-shadow: 0 2px 12px rgba(0,0,0,0.2); position: sticky; top: 0; z-index: 100; }
        .navbar-brand { display: flex; align-items: center; gap: 12px; }
        .navbar-logo { width: 36px; height: 36px; background: white; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-weight: 900; color: #1F4E79; font-size: 18px; }
        .navbar-title { color: white; font-size: 22px; font-weight: 700; letter-spacing: 0.5px; }
        .navbar-subtitle { color: rgba(255,255,255,0.7); font-size: 12px; }
        .navbar-right { display: flex; align-items: center; gap: 16px; }
        .nav-badge { background: rgba(255,255,255,0.15); color: white; padding: 4px 12px; border-radius: 20px; font-size: 12px; }
        .btn-download { background: #00B050; color: white; border: none; padding: 8px 20px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: none; transition: background 0.2s; }
        .btn-download:hover { background: #008a3e; }
        .main { max-width: 1400px; margin: 0 auto; padding: 28px 24px; }
        .page-header { margin-bottom: 24px; }
        .page-header h1 { font-size: 24px; font-weight: 700; color: #1F4E79; }
        .page-header p { color: #64748b; font-size: 13px; margin-top: 4px; }
        .cards-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 28px; }
        .card { background: white; border-radius: 12px; padding: 20px 24px; box-shadow: 0 1px 4px rgba(0,0,0,0.08); border-left: 5px solid #e2e8f0; transition: transform 0.2s; }
        .card:hover { transform: translateY(-2px); }
        .card.critical { border-left-color: #C00000; }
        .card.high { border-left-color: #FF6600; }
        .card.medium { border-left-color: #FFD700; }
        .card.low { border-left-color: #00B050; }
        .card.total { border-left-color: #1F4E79; }
        .card-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #94a3b8; margin-bottom: 8px; }
        .card-value { font-size: 40px; font-weight: 800; line-height: 1; margin-bottom: 4px; }
        .card.critical .card-value { color: #C00000; }
        .card.high .card-value { color: #FF6600; }
        .card.medium .card-value { color: #d4a000; }
        .card.low .card-value { color: #00B050; }
        .card.total .card-value { color: #1F4E79; }
        .card-sub { font-size: 12px; color: #94a3b8; }
        .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 28px; }
        .panel { background: white; border-radius: 12px; box-shadow: 0 1px 4px rgba(0,0,0,0.08); overflow: hidden; }
        .panel-header { background: linear-gradient(135deg, #1F4E79, #2E75B6); padding: 14px 20px; display: flex; align-items: center; justify-content: space-between; }
        .panel-title { color: white; font-size: 14px; font-weight: 700; letter-spacing: 0.3px; }
        .panel-body { padding: 16px 20px; }
        .table-wrapper { overflow-x: auto; }
        table { width: 100%; border-collapse: collapse; font-size: 13px; }
        thead th { background: #1F4E79; color: white; padding: 10px 14px; text-align: left; font-weight: 600; font-size: 12px; white-space: nowrap; }
        tbody tr { border-bottom: 1px solid #f1f5f9; transition: background 0.15s; }
        tbody tr:hover { background: #f8fafc; }
        tbody td { padding: 12px 14px; vertical-align: top; font-size: 13px; color: #374151; }
        .badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
        .badge-critical { background: #FEE2E2; color: #C00000; }
        .badge-high { background: #FFEDD5; color: #C2410C; }
        .badge-medium { background: #FEF9C3; color: #854D0E; }
        .badge-low { background: #DCFCE7; color: #166534; }
        .badge-action { background: #FEE2E2; color: #C00000; }
        .badge-monitor { background: #FEF9C3; color: #854D0E; }
        .badge-acceptable { background: #DCFCE7; color: #166534; }
        .badge-immediate { background: #C00000; color: white; }
        .badge-high-p { background: #FF6600; color: white; }
        .badge-medium-p { background: #FFD700; color: #333; }
        .badge-low-p { background: #00B050; color: white; }
        .badge-open { background: #FEE2E2; color: #C00000; }
        .badge-progress { background: #DBEAFE; color: #1D4ED8; }
        .badge-closed { background: #DCFCE7; color: #166534; }
        .kri-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid #f1f5f9; }
        .kri-row:last-child { border-bottom: none; }
        .kri-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
        .kri-dot.green { background: #00B050; }
        .kri-dot.amber { background: #FFC000; }
        .kri-dot.red { background: #C00000; }
        .kri-name { font-size: 13px; font-weight: 600; color: #1a202c; flex: 1; }
        .kri-values { font-size: 11px; color: #64748b; }
        .kri-status { font-size: 11px; font-weight: 700; }
        .kri-status.green { color: #00B050; }
        .kri-status.amber { color: #d4a000; }
        .kri-status.red { color: #C00000; }
        .ai-entry { padding: 14px 0; border-bottom: 1px solid #f1f5f9; }
        .ai-entry:last-child { border-bottom: none; }
        .ai-entry-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
        .ai-risk-id { font-size: 12px; font-weight: 700; color: #1F4E79; background: #EFF6FF; padding: 2px 8px; border-radius: 4px; }
        .ai-concerns { list-style: none; margin-top: 6px; }
        .ai-concerns li { font-size: 12px; color: #475569; padding: 2px 0 2px 14px; position: relative; }
        .ai-concerns li::before { content: "ΓÇ║"; position: absolute; left: 0; color: #94a3b8; font-weight: 700; }
        .ai-recs { margin-top: 8px; background: #F0FDF4; border-radius: 6px; padding: 8px 12px; }
        .ai-recs-title { font-size: 11px; font-weight: 700; color: #166534; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.5px; }
        .ai-recs li { font-size: 12px; color: #166534; padding: 1px 0 1px 14px; position: relative; list-style: none; }
        .ai-recs li::before { content: "Γ£ô"; position: absolute; left: 0; font-size: 10px; }
        .loading { text-align: center; padding: 40px; color: #94a3b8; font-size: 14px; }
        .spinner { width: 32px; height: 32px; border: 3px solid #e2e8f0; border-top-color: #1F4E79; border-radius: 50%; animation: spin 0.8s linear infinite; margin: 0 auto 12px; }
        @keyframes spin { to { transform: rotate(360deg); } }
        .footer { text-align: center; padding: 24px; color: #94a3b8; font-size: 12px; margin-top: 12px; }
        @media (max-width: 900px) { .cards-grid { grid-template-columns: repeat(2, 1fr); } .two-col { grid-template-columns: 1fr; } }
    </style>
</head>
<body>

<nav class="navbar">
    <div class="navbar-brand">
        <div class="navbar-logo">RG</div>
        <div>
            <div class="navbar-title">RiskGuard</div>
            <div class="navbar-subtitle">Operational Risk Management Platform</div>
        </div>
    </div>
    <div class="navbar-right">
        <span class="nav-badge" id="last-updated">Loading...</span>
        <a href="http://127.0.0.1:8000/rcsa/download" class="btn-download">Γ¼ç Download RCSA Report</a>
    </div>
</nav>

<div class="main">
    <div class="page-header">
        <h1>Risk Dashboard</h1>
        <p>Real-time operational risk monitoring for banks and NBFCs ΓÇö powered by AI</p>
    </div>

    <div class="cards-grid" id="cards-grid">
        <div class="loading"><div class="spinner"></div>Loading...</div>
    </div>

    <div class="two-col">
        <div class="panel">
            <div class="panel-header">
                <span class="panel-title">≡ƒôï RCSA Risk Register</span>
                <span style="color:rgba(255,255,255,0.7); font-size:12px;" id="risk-count"></span>
            </div>
            <div class="panel-body table-wrapper">
                <div class="loading" id="rcsa-loading"><div class="spinner"></div>Loading risks...</div>
                <table id="rcsa-table" style="display:none">
                    <thead>
                        <tr>
                            <th>ID</th><th>Process</th><th>Category</th>
                            <th>Inherent</th><th>Residual</th><th>AI Verdict</th><th>Status</th>
                        </tr>
                    </thead>
                    <tbody id="rcsa-tbody"></tbody>
                </table>
            </div>
        </div>

        <div class="panel">
            <div class="panel-header">
                <span class="panel-title">≡ƒôè KRI Dashboard</span>
                <span style="color:rgba(255,255,255,0.7); font-size:12px;" id="kri-summary"></span>
            </div>
            <div class="panel-body">
                <div class="loading" id="kri-loading"><div class="spinner"></div>Loading KRIs...</div>
                <div id="kri-list"></div>
            </div>
        </div>
    </div>

    <div class="panel" style="margin-bottom:28px;">
        <div class="panel-header">
            <span class="panel-title">≡ƒñû AI Risk Assessment & Control Recommendations</span>
        </div>
        <div class="panel-body">
            <div class="loading" id="ai-loading"><div class="spinner"></div>Running AI assessment...</div>
            <div id="ai-list"></div>
        </div>
    </div>

    <div class="panel" style="margin-bottom:28px;">
        <div class="panel-header">
            <span class="panel-title">≡ƒôä Document Intelligence ΓÇö Upload SOP / Process Map / Business Record</span>
        </div>
        <div class="panel-body">
            <div style="border:2px dashed #CBD5E1; border-radius:10px; padding:32px; text-align:center; background:#F8FAFC; margin-bottom:20px;" id="drop-zone">
                <div style="font-size:40px; margin-bottom:12px;">≡ƒôé</div>
                <div style="font-weight:700; color:#1F4E79; font-size:16px; margin-bottom:6px;">Drop your document here</div>
                <div style="color:#64748b; font-size:13px; margin-bottom:16px;">Supports PDF, DOCX, TXT ΓÇö Max 10MB ΓÇö PII automatically removed before AI processing</div>
                <input type="file" id="doc-upload" accept=".pdf,.docx,.doc,.txt" style="display:none">
                <button onclick="document.getElementById('doc-upload').click()" style="background:#1F4E79; color:white; border:none; padding:10px 24px; border-radius:6px; font-size:13px; font-weight:600; cursor:pointer;">Choose File</button>
                <div style="margin-top:12px;">
                    <label style="font-size:12px; color:#64748b;">Organization Name: </label>
                    <input type="text" id="org-name-input" value="Sample Bank Ltd" style="border:1px solid #CBD5E1; border-radius:4px; padding:4px 10px; font-size:12px; margin-left:6px;">
                </div>
            </div>
            <div id="upload-status" style="display:none; text-align:center; padding:20px;">
                <div class="spinner"></div>
                <div style="color:#64748b; font-size:13px; margin-top:8px;">Analyzing document with AI ΓÇö PII being stripped before processing...</div>
            </div>
            <div id="analysis-result" style="display:none;">
                <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:16px;">
                    <div style="font-size:15px; font-weight:700; color:#1F4E79;">AI Analysis Result</div>
                    <div id="overall-rating"></div>
                </div>
                <div id="doc-summary" style="background:#EFF6FF; border-radius:8px; padding:12px 16px; font-size:13px; color:#1e40af; margin-bottom:16px;"></div>
                <div id="key-gaps" style="background:#FEF9C3; border-radius:8px; padding:12px 16px; font-size:13px; color:#854D0E; margin-bottom:16px;"></div>
                <div style="font-size:13px; font-weight:700; color:#1F4E79; margin-bottom:10px;">Risks Identified from Document:</div>
                <div id="doc-risks"></div>
            </div>
        </div>
    </div>
</div>

<div class="footer">
    RiskGuard v1.0 &nbsp;|&nbsp; Operational Risk Management Platform &nbsp;|&nbsp;
    <a href="http://127.0.0.1:8000/docs" target="_blank" style="color:#2E75B6;">API Docs</a>
</div>

<script>
const API = 'https://api.corerisk360.com';

function levelBadge(level) {
    const map = { CRITICAL: 'critical', HIGH: 'high', MEDIUM: 'medium', LOW: 'low' };
    return `<span class="badge badge-${map[level] || 'low'}">${level}</span>`;
}
function verdictBadge(v) {
    if (!v) return '';
    const map = { 'ACTION REQUIRED': 'action', 'MONITOR CLOSELY': 'monitor', 'ACCEPTABLE': 'acceptable' };
    return `<span class="badge badge-${map[v] || 'monitor'}">${v}</span>`;
}
function priorityBadge(p) {
    const map = { Immediate: 'immediate', High: 'high-p', Medium: 'medium-p', Low: 'low-p' };
    return `<span class="badge badge-${map[p] || 'medium-p'}">${p}</span>`;
}
function statusBadge(s) {
    const map = { Open: 'open', 'In Progress': 'progress', Closed: 'closed' };
    return `<span class="badge badge-${map[s] || 'open'}">${s}</span>`;
}

async function loadSummary() {
    const res = await fetch(`${API}/risks/summary`);
    const data = await res.json();
    const by_level = data.by_level;
    const total = data.total_risks;
    document.getElementById('last-updated').textContent = `Last updated: ${new Date().toLocaleTimeString()}`;
    document.getElementById('cards-grid').innerHTML = `
        <div class="card total"><div class="card-label">Total Risks</div><div class="card-value">${total}</div><div class="card-sub">Across all categories</div></div>
        <div class="card critical"><div class="card-label">Critical</div><div class="card-value">${by_level.CRITICAL || 0}</div><div class="card-sub">Immediate action required</div></div>
        <div class="card high"><div class="card-label">High</div><div class="card-value">${by_level.HIGH || 0}</div><div class="card-sub">Escalate to management</div></div>
        <div class="card medium"><div class="card-label">Medium</div><div class="card-value">${by_level.MEDIUM || 0}</div><div class="card-sub">Monitor closely</div></div>
    `;
}

async function loadRCSA() {
    const res = await fetch(`${API}/rcsa`);
    const data = await res.json();
    const entries = data.entries;
    document.getElementById('risk-count').textContent = `${entries.length} risks`;
    document.getElementById('rcsa-loading').style.display = 'none';
    document.getElementById('rcsa-table').style.display = 'table';
    document.getElementById('rcsa-tbody').innerHTML = entries.map(e => `
        <tr>
            <td><strong>${e.risk_id}</strong></td>
            <td>${e.process}</td>
            <td><span style="font-size:12px">${e.category}</span></td>
            <td>${levelBadge(e.inherent_level)}<br><small style="color:#94a3b8">${e.inherent_score}</small></td>
            <td>${levelBadge(e.residual_level)}<br><small style="color:#94a3b8">${e.residual_score}</small></td>
            <td>${verdictBadge(e.ai_verdict)}</td>
            <td>${statusBadge(e.status)}</td>
        </tr>
    `).join('');
    const allKRIs = [];
    entries.forEach(e => { if (e.kris) e.kris.forEach(k => allKRIs.push({ ...k, risk_id: e.risk_id })); });
    const redCount = allKRIs.filter(k => k.status === 'Red').length;
    const amberCount = allKRIs.filter(k => k.status === 'Amber').length;
    document.getElementById('kri-summary').textContent = `${redCount} Red ┬╖ ${amberCount} Amber`;
    document.getElementById('kri-loading').style.display = 'none';
    document.getElementById('kri-list').innerHTML = allKRIs.map(k => `
        <div class="kri-row">
            <div class="kri-dot ${k.status.toLowerCase()}"></div>
            <div style="flex:1">
                <div class="kri-name">${k.name} <span style="color:#94a3b8;font-weight:400;font-size:11px">(${k.risk_id})</span></div>
                <div class="kri-values">Current: <strong>${k.current_value}</strong> ┬╖ Threshold: ${k.threshold}</div>
            </div>
            <div class="kri-status ${k.status.toLowerCase()}">${k.status.toUpperCase()}</div>
        </div>
    `).join('');
}

async function loadAI() {
    const res = await fetch(`${API}/rcsa/ai-assessment`);
    const data = await res.json();
    document.getElementById('ai-loading').style.display = 'none';
    document.getElementById('ai-list').innerHTML = data.assessments.map(a => `
        <div class="ai-entry">
            <div class="ai-entry-header">
                <span class="ai-risk-id">${a.risk_id}</span>
                ${verdictBadge(a.verdict)}
                ${priorityBadge(a.priority)}
            </div>
            <ul class="ai-concerns">${a.concerns.map(c => `<li>${c}</li>`).join('')}</ul>
            <div class="ai-recs">
                <div class="ai-recs-title">Recommended Controls</div>
                <ul>${a.recommended_controls.map(r => `<li>${r}</li>`).join('')}</ul>
            </div>
        </div>
    `).join('');
}

async function init() {
    try {
        await Promise.all([loadSummary(), loadRCSA(), loadAI()]);
    } catch (err) {
        console.error(err);
        document.body.innerHTML += `<div style="background:#FEE2E2;padding:16px;margin:16px;border-radius:8px;color:#C00000">
            ΓÜá∩╕Å Cannot connect to API. Make sure the server is running: <code>uvicorn backend.app.main:app --reload</code>
        </div>`;
    }
}

init();

document.getElementById('doc-upload').addEventListener('change', async function(e) {
    const file = e.target.files[0];
    if (!file) return;
    const orgName = document.getElementById('org-name-input').value || 'Sample Bank Ltd';
    document.getElementById('upload-status').style.display = 'block';
    document.getElementById('analysis-result').style.display = 'none';
    const formData = new FormData();
    formData.append('file', file);
    formData.append('org_name', orgName);
    try {
        const res = await fetch(`${API}/analyze-document`, { method: 'POST', body: formData });
        const data = await res.json();
        document.getElementById('upload-status').style.display = 'none';
        if (data.detail) { alert('Error: ' + data.detail); return; }
        document.getElementById('analysis-result').style.display = 'block';
        const ratingColors = { HIGH: '#C00000', MEDIUM: '#FF6600', LOW: '#00B050' };
        const rating = data.overall_risk_rating || 'MEDIUM';
        document.getElementById('overall-rating').innerHTML = `<span class="badge" style="background:${ratingColors[rating] || '#FF6600'}; color:white; font-size:13px; padding:6px 16px;">Overall: ${rating} RISK</span>`;
        document.getElementById('doc-summary').innerHTML = `<strong>≡ƒôï Document Summary:</strong> ${data.document_summary || 'No summary available'}<br><small style="color:#3B82F6">Γ£ô File: ${data.filename} ┬╖ Pages processed: ${data.pages_processed} ┬╖ PII sanitized: ${data.pii_sanitized ? 'Yes' : 'No'}</small>`;
        const gaps = data.key_gaps || [];
        document.getElementById('key-gaps').innerHTML = gaps.length ? `<strong>ΓÜá∩╕Å Key Gaps Identified:</strong><br>${gaps.map(g => `ΓÇó ${g}`).join('<br>')}` : '<strong>Γ£ô No critical gaps identified</strong>';
        const risks = data.risks_identified || [];
        document.getElementById('doc-risks').innerHTML = risks.length ? risks.map(r => `
            <div style="border:1px solid #E2E8F0; border-radius:8px; padding:14px; margin-bottom:12px; background:white;">
                <div style="display:flex; align-items:center; gap:10px; margin-bottom:8px;">
                    <span style="font-size:11px; font-weight:700; color:#1F4E79; background:#EFF6FF; padding:2px 8px; border-radius:4px;">${r.risk_id}</span>
                    ${levelBadge(r.inherent_likelihood * r.inherent_impact >= 16 ? 'CRITICAL' : r.inherent_likelihood * r.inherent_impact >= 10 ? 'HIGH' : r.inherent_likelihood * r.inherent_impact >= 5 ? 'MEDIUM' : 'LOW')}
                    <span style="font-size:13px; font-weight:600; color:#1a202c;">${r.risk_description}</span>
                </div>
                <div style="font-size:12px; color:#475569; margin-bottom:6px;"><strong>Process:</strong> ${r.process} ΓÇ║ ${r.sub_process} &nbsp;|&nbsp; <strong>Category:</strong> ${r.risk_category}</div>
                <div style="font-size:12px; color:#475569; margin-bottom:6px;"><strong>Cause:</strong> ${r.cause}</div>
                <div style="font-size:12px; color:#475569; margin-bottom:8px;"><strong>Consequence:</strong> ${r.consequence}</div>
                <div style="background:#F0FDF4; border-radius:6px; padding:8px 12px;">
                    <div style="font-size:11px; font-weight:700; color:#166534; margin-bottom:4px;">SUGGESTED CONTROLS</div>
                    ${(r.suggested_controls || []).map(c => `<div style="font-size:12px; color:#166534;">Γ£ô ${c}</div>`).join('')}
                </div>
                ${r.regulatory_reference ? `<div style="font-size:11px; color:#6366F1; margin-top:6px;">≡ƒôû ${r.regulatory_reference}</div>` : ''}
            </div>`).join('') : '<div style="color:#94a3b8; text-align:center; padding:20px;">No risks identified in this document</div>';
    // Show Add to Register button
        if (risks.length > 0) {
            document.getElementById('doc-risks').innerHTML += `
                <button onclick="addToRegister(${JSON.stringify(risks).replace(/"/g, '&quot;')}, '${data.filename}')"
                    style="margin-top:16px; background:#1F4E79; color:white; border:none; padding:12px 28px;
                    border-radius:6px; font-size:14px; font-weight:700; cursor:pointer; width:100%;">
                    Γ₧ò Add These Risks to the Risk Register
                </button>`;
        }

    } catch (err) {
        document.getElementById('upload-status').style.display = 'none';
        alert('Failed to analyze document. Make sure the server is running.');
    }
});

async function addToRegister(risks, filename) {
    try {
        const res = await fetch(`${API}/risks/add-from-document`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ risks: risks, source_document: filename })
        });
        const data = await res.json();
        alert(`Γ£à ${data.added} risks successfully added to the Risk Register!`);
        // Refresh the dashboard
        await Promise.all([loadSummary(), loadRCSA()]);
    } catch (err) {
        alert('Failed to add risks to register.');
    }
}
// ΓöÇΓöÇ AUTH CHECK ΓöÇΓöÇ
const API_BASE = 'https://api.corerisk360.com';

function checkAuth() {
    const token = localStorage.getItem('cr360_token');
    const user = JSON.parse(localStorage.getItem('cr360_user') || 'null');
    if (!token || !user) {
        window.location.href = 'login.html';
        return null;
    }
    return { token, user };
}

function showUserInfo(user) {
    const navbar = document.querySelector('.navbar') || document.querySelector('nav');
    if (!navbar) return;
    
    // Add user info and logout to navbar
    const userDiv = document.createElement('div');
    userDiv.style.cssText = 'display:flex;align-items:center;gap:16px;margin-left:auto;';
    
    const trialBadge = user.plan === 'trial' 
        ? `<span style="background:#FEF3C7;color:#92400E;padding:4px 10px;border-radius:20px;font-size:12px;font-weight:700;">${user.trial_days_left} days left in trial</span>`
        : `<span style="background:#D1FAE5;color:#065F46;padding:4px 10px;border-radius:20px;font-size:12px;font-weight:700;">Professional</span>`;
    
    userDiv.innerHTML = `
        ${trialBadge}
        <span style="font-size:13px;color:#475569;font-weight:500;">${user.org_name}</span>
        <button onclick="handleLogout()" style="background:none;border:1px solid #CBD5E1;color:#475569;padding:6px 14px;border-radius:6px;font-size:13px;cursor:pointer;">Logout</button>
    `;
    navbar.appendChild(userDiv);
}

function handleLogout() {
    const token = localStorage.getItem('cr360_token');
    if (token) {
        fetch(`${API_BASE}/auth/logout`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ token })
        });
    }
    localStorage.removeItem('cr360_token');
    localStorage.removeItem('cr360_user');
    window.location.href = 'login.html';
}

// Run auth check when page loads
const authData = checkAuth();
if (authData) {
    showUserInfo(authData.user);
}
</script>
</body>
</html>