{% extends "base.html" %}

{% block title %}Dashboard | D'Tector.AI{% endblock %}

{% block extra_css %}
<style>
    .dashboard-container { display: flex; min-height: 100vh; }
    .sidebar { width: 280px; background: linear-gradient(180deg, #0a0f1f 0%, #05070f 100%); border-right: 1px solid #1e293b; display: flex; flex-direction: column; position: fixed; height: 100vh; overflow-y: auto; transition: transform 0.3s ease; z-index: 100; }
    .sidebar-header { padding: 1.5rem; border-bottom: 1px solid #1e293b; }
    .logo { display: flex; align-items: center; gap: 0.75rem; font-size: 1.25rem; font-weight: 700; background: linear-gradient(135deg, #60a5fa, #3b82f6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
    .stats-card { background: #1e293b; border-radius: 1rem; padding: 1rem; margin: 1rem; }
    .stats-number { font-size: 1.5rem; font-weight: 700; color: #60a5fa; }
    .history-list { flex: 1; padding: 1rem; overflow-y: auto; }
    .history-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
    .history-item { background: #1e293b; border-radius: 0.75rem; padding: 0.75rem; margin-bottom: 0.75rem; }
    .history-text { font-size: 0.75rem; color: #94a3b8; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .history-badge { display: inline-block; font-size: 0.625rem; padding: 0.25rem 0.5rem; border-radius: 0.5rem; margin-top: 0.5rem; }
    .badge-ai { background: #7f1a1a; color: #fecaca; }
    .badge-human { background: #14532d; color: #bbf7d0; }
    .sidebar-footer { margin-top: auto; border-top: 1px solid #1e293b; padding: 1rem; }
    .profile-section { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; border-radius: 0.75rem; cursor: pointer; }
    .profile-section:hover { background: #1e293b; }
    .profile-avatar { width: 40px; height: 40px; background: linear-gradient(135deg, #3b82f6, #8b5cf6); border-radius: 0.75rem; display: flex; align-items: center; justify-content: center; font-weight: 700; }
    .profile-info { flex: 1; }
    .profile-info h4 { font-size: 0.875rem; margin-bottom: 0.125rem; }
    .profile-info p { font-size: 0.7rem; color: #94a3b8; }
    .profile-menu { position: absolute; bottom: 70px; left: 1rem; right: 1rem; background: #1e293b; border-radius: 1rem; padding: 0.5rem; box-shadow: 0 10px 25px -5px rgba(0,0,0,0.3); opacity: 0; visibility: hidden; transform: translateY(10px); transition: all 0.2s; z-index: 200; }
    .profile-menu.show { opacity: 1; visibility: visible; transform: translateY(0); }
    .profile-menu-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; border-radius: 0.5rem; cursor: pointer; color: #e2e8f0; }
    .profile-menu-item:hover { background: #334155; }
    .menu-divider { height: 1px; background: #334155; margin: 0.5rem 0; }
    .main-content { flex: 1; margin-left: 280px; min-height: 100vh; background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); }
    .top-bar { background: rgba(15,23,42,0.8); backdrop-filter: blur(10px); padding: 1rem 2rem; border-bottom: 1px solid #1e293b; display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 50; }
    .btn-group { display: flex; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
    .btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem; border: none; border-radius: 0.75rem; font-weight: 600; cursor: pointer; transition: all 0.2s; }
    .btn-primary { background: linear-gradient(135deg, #3b82f6, #2563eb); color: white; }
    .btn-outline { background: transparent; border: 1px solid #475569; color: #e2e8f0; }
    .text-input { width: 100%; min-height: 200px; padding: 1rem; background: #0f172a; border: 1px solid #334155; border-radius: 0.75rem; color: #e2e8f0; font-family: inherit; resize: vertical; }
    .upload-area { border: 2px dashed #334155; border-radius: 1rem; padding: 2rem; text-align: center; cursor: pointer; transition: all 0.2s; }
    .upload-area:hover { border-color: #3b82f6; background: #33415530; }
    .card { background: #1e293b; border-radius: 1.5rem; margin: 1.5rem; overflow: hidden; border: 1px solid #334155; }
    .card-header { padding: 1.25rem 1.5rem; border-bottom: 1px solid #334155; }
    .card-body { padding: 1.5rem; }
    .progress-bar-container { background: #334155; border-radius: 0.5rem; overflow: hidden; height: 0.5rem; }
    .progress-bar { height: 100%; transition: width 0.3s ease; }
    .progress-ai { background: linear-gradient(90deg, #ef4444, #dc2626); }
    .progress-human { background: linear-gradient(90deg, #10b981, #059669); }
    .mobile-menu-btn { display: none; position: fixed; bottom: 1rem; right: 1rem; background: #3b82f6; color: white; width: 48px; height: 48px; border-radius: 50%; align-items: center; justify-content: center; cursor: pointer; z-index: 200; box-shadow: 0 4px 12px rgba(0,0,0,0.3); }
    @media (max-width: 768px) { .sidebar { transform: translateX(-100%); } .sidebar.open { transform: translateX(0); } .main-content { margin-left: 0; } .mobile-menu-btn { display: flex; } }
</style>
{% endblock %}

{% block content %}
<div class="dashboard-container">
    <div class="sidebar" id="sidebar">
        <div class="sidebar-header"><div class="logo"><i class="fas fa-shield-alt"></i><span>D'Tector.AI</span></div></div>

        <div class="stats-card">
            <div style="font-size: 0.75rem; color: #94a3b8;">Total Deteksi</div>
            <div class="stats-number" id="totalDetections">0</div>
            <div style="display: flex; justify-content: space-between; margin-top: 0.5rem;">
                <span><i class="fas fa-robot"></i> AI: <span id="aiCount">0</span></span>
                <span><i class="fas fa-user"></i> Human: <span id="humanCount">0</span></span>
            </div>
        </div>

        <div class="history-list">
            <div class="history-header"><span><i class="fas fa-history"></i> Riwayat Deteksi</span><button onclick="loadHistory()" style="background: none; border: none; color: #94a3b8; cursor: pointer;"><i class="fas fa-sync-alt"></i></button></div>
            <div id="historyList"><div style="text-align: center; color: #64748b; padding: 2rem;"><i class="fas fa-inbox" style="font-size: 2rem; margin-bottom: 0.5rem; display: block;"></i><p>Belum ada riwayat deteksi</p></div></div>
        </div>

        <div class="sidebar-footer">
            <div class="profile-section" id="profileBtn">
                <div class="profile-avatar"><span id="avatarInitial">U</span></div>
                <div class="profile-info"><h4 id="profileName">Memuat...</h4><p id="profileEmail">memuat...</p></div>
                <i class="fas fa-chevron-up" style="font-size: 0.75rem; color: #94a3b8;"></i>
            </div>
            <div class="profile-menu" id="profileMenu">
                <div class="profile-menu-item" onclick="location.href='/profile'"><i class="fas fa-user"></i> Profil Saya</div>
                <div class="profile-menu-item" onclick="location.href='/change-password'"><i class="fas fa-key"></i> Ubah Password</div>
                <div class="menu-divider"></div>
                <div class="profile-menu-item" onclick="logout()"><i class="fas fa-sign-out-alt"></i> Keluar</div>
            </div>
        </div>
    </div>

    <div class="main-content">
        <div class="top-bar"><div><h2><i class="fas fa-microchip"></i> Deteksi Konten AI</h2><p style="font-size: 0.75rem; color: #94a3b8;">Akurasi 95%+ dengan IndoBERT</p></div><div><span style="background: #2563eb20; padding: 0.25rem 0.75rem; border-radius: 1rem; font-size: 0.75rem;"><i class="fas fa-brain"></i> IndoBERT</span></div></div>

        <div class="card" style="margin: 1.5rem;">
            <div class="card-header"><h3><i class="fas fa-edit"></i> Input Teks / Upload File</h3></div>
            <div class="card-body">
                <div class="btn-group">
                    <button class="btn btn-primary" onclick="showTab('text')" id="tabTextBtn"><i class="fas fa-keyboard"></i> Teks Manual</button>
                    <button class="btn btn-outline" onclick="showTab('file')" id="tabFileBtn"><i class="fas fa-cloud-upload-alt"></i> Upload File</button>
                </div>

                <div id="tabText">
                    <textarea id="textInput" class="text-input" placeholder="📝 Tempelkan teks tugas mahasiswa di sini..."></textarea>
                    <div style="margin-top: 1rem; display: flex; gap: 1rem;">
                        <button class="btn btn-primary" onclick="detectText()"><i class="fas fa-search"></i> Deteksi Sekarang</button>
                        <button class="btn btn-outline" onclick="clearText()"><i class="fas fa-eraser"></i> Bersihkan</button>
                    </div>
                </div>

                <div id="tabFile" style="display: none;">
                    <div id="dropZone" class="upload-area" onclick="document.getElementById('fileInput').click()">
                        <i class="fas fa-cloud-upload-alt" style="font-size: 3rem; color: #3b82f6;"></i>
                        <p><strong>Klik atau drag & drop file</strong></p>
                        <p style="font-size: 0.75rem; color: #94a3b8;">Support: PDF, DOCX, TXT (Max 16MB)</p>
                    </div>
                    <input type="file" id="fileInput" style="display: none;" accept=".pdf,.txt,.docx">
                    <div id="fileInfo" style="margin-top: 1rem; display: none;"><div style="background: #0f172a; padding: 0.75rem; border-radius: 0.5rem;"><i class="fas fa-file"></i> <span id="fileName"></span></div><button class="btn btn-primary" onclick="detectFile()" style="margin-top: 1rem;"><i class="fas fa-search"></i> Deteksi File</button></div>
                </div>
            </div>
        </div>

        <div id="resultSection" style="display: none;">
            <div class="card" style="margin: 1.5rem;">
                <div class="card-header"><h3><i class="fas fa-chart-line"></i> Hasil Analisis</h3></div>
                <div class="card-body"><div id="resultContent"></div></div>
            </div>
        </div>
    </div>
</div>

<div class="mobile-menu-btn" onclick="toggleSidebar()"><i class="fas fa-bars"></i></div>

<script>
    let currentFile = null;

    function toggleSidebar() { document.getElementById('sidebar').classList.toggle('open'); }
    
    function showTab(tab) {
        const textTab = document.getElementById('tabText');
        const fileTab = document.getElementById('tabFile');
        const textBtn = document.getElementById('tabTextBtn');
        const fileBtn = document.getElementById('tabFileBtn');
        textTab.style.display = tab === 'text' ? 'block' : 'none';
        fileTab.style.display = tab === 'file' ? 'block' : 'none';
        textBtn.className = tab === 'text' ? 'btn btn-primary' : 'btn btn-outline';
        fileBtn.className = tab === 'file' ? 'btn btn-primary' : 'btn btn-outline';
    }

    function clearText() {
        document.getElementById('textInput').value = '';
        document.getElementById('resultSection').style.display = 'none';
    }

    function initFileUpload() {
        const dropZone = document.getElementById('dropZone');
        const fileInput = document.getElementById('fileInput');
        if (dropZone) {
            dropZone.addEventListener('dragover', (e) => { e.preventDefault(); dropZone.style.borderColor = '#3b82f6'; dropZone.style.background = '#33415530'; });
            dropZone.addEventListener('dragleave', () => { dropZone.style.borderColor = '#334155'; dropZone.style.background = 'transparent'; });
            dropZone.addEventListener('drop', (e) => { e.preventDefault(); dropZone.style.borderColor = '#334155'; const file = e.dataTransfer.files[0]; if (file) handleFile(file); });
        }
        if (fileInput) { fileInput.addEventListener('change', (e) => { if (e.target.files[0]) handleFile(e.target.files[0]); }); }
    }

    function handleFile(file) { currentFile = file; document.getElementById('fileName').textContent = file.name; document.getElementById('fileInfo').style.display = 'block'; }

    async function loadCurrentUser() {
        try {
            const response = await fetch('/api/auth/me');
            if (response.status === 401) { window.location.href = '/login'; return; }
            const user = await response.json();
            if (!user.error) {
                document.getElementById('profileName').textContent = user.full_name || user.username;
                document.getElementById('profileEmail').textContent = user.email;
                document.getElementById('avatarInitial').textContent = (user.full_name || user.username).charAt(0).toUpperCase();
            }
        } catch (error) { console.error('Error loading user:', error); }
    }

    async function loadHistory() {
        try {
            const response = await fetch('/api/history?limit=30');
            const history = await response.json();
            const container = document.getElementById('historyList');
            if (!history || history.length === 0) { container.innerHTML = '<div style="text-align: center; color: #64748b; padding: 2rem;"><i class="fas fa-inbox" style="font-size: 2rem; margin-bottom: 0.5rem; display: block;"></i><p>Belum ada riwayat deteksi</p></div>'; return; }
            container.innerHTML = history.map(item => `<div class="history-item"><div class="history-text">${escapeHtml(item.text_preview)}</div><div class="history-badge ${item.is_ai ? 'badge-ai' : 'badge-human'}">${item.is_ai ? '🤖 AI' : '👤 Human'} | ${item.confidence}%</div><div style="font-size: 0.6rem; color: #64748b; margin-top: 0.5rem;">${item.created_at}</div></div>`).join('');
        } catch (error) { console.error('Error loading history:', error); }
    }

    async function loadStats() {
        try {
            const response = await fetch('/api/stats');
            const stats = await response.json();
            document.getElementById('totalDetections').textContent = stats.total || 0;
            document.getElementById('aiCount').textContent = stats.ai_count || 0;
            document.getElementById('humanCount').textContent = stats.human_count || 0;
        } catch (error) { console.error('Error loading stats:', error); }
    }

    async function detectText() {
        const text = document.getElementById('textInput').value;
        if (!text.trim()) { alert('Masukkan teks terlebih dahulu!'); return; }
        const resultSection = document.getElementById('resultSection'); const resultContent = document.getElementById('resultContent');
        resultSection.style.display = 'block'; resultContent.innerHTML = '<div style="text-align: center; padding: 2rem;"><div class="spinner" style="margin: 0 auto 1rem;"></div><p>Menganalisis...</p></div>';
        try {
            const response = await fetch('/api/detect/text', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ text }) });
            const result = await response.json();
            if (result.error) { resultContent.innerHTML = `<div style="color: red; padding: 1rem;">Error: ${result.error}</div>`; return; }
            const isAI = result.is_ai;
            resultContent.innerHTML = `<div style="background: #0f172a; border-radius: 1rem; padding: 1.5rem;"><div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem;"><span style="font-weight: bold;">Hasil Deteksi</span><span style="background: ${isAI ? '#7f1a1a' : '#14532d'}; color: ${isAI ? '#fecaca' : '#bbf7d0'}; padding: 0.5rem 1rem; border-radius: 2rem;">${isAI ? '🤖 AI-Generated' : '👤 Human Written'}</span></div><div style="margin-bottom: 1rem;"><div style="display: flex; justify-content: space-between; margin-bottom: 0.25rem;"><span>🤖 AI Probability</span><span>${result.ai_probability}%</span></div><div class="progress-bar-container"><div class="progress-bar progress-ai" style="width: ${result.ai_probability}%"></div></div><div style="display: flex; justify-content: space-between; margin: 1rem 0 0.25rem;"><span>👤 Human Probability</span><span>${result.human_probability}%</span></div><div class="progress-bar-container"><div class="progress-bar progress-human" style="width: ${result.human_probability}%"></div></div></div><div style="margin-top: 1rem; padding: 1rem; background: #1e293b; border-radius: 0.75rem; border-left: 3px solid #3b82f6;"><strong><i class="fas fa-graduation-cap"></i> Rekomendasi:</strong><br>${isAI ? 'Tugas ini memiliki indikasi kuat dihasilkan AI. Verifikasi lanjutan diperlukan.' : 'Tugas ini cenderung tulisan manusia. Periksa kesesuaian materi.'}</div></div>`;
            await loadHistory(); await loadStats();
        } catch (error) { resultContent.innerHTML = `<div style="color: red; padding: 1rem;">Error: ${error.message}</div>`; }
    }

    async function detectFile() {
        if (!currentFile) { alert('Pilih file terlebih dahulu!'); return; }
        const resultSection = document.getElementById('resultSection'); const resultContent = document.getElementById('resultContent');
        resultSection.style.display = 'block'; resultContent.innerHTML = '<div style="text-align: center; padding: 2rem;"><div class="spinner" style="margin: 0 auto 1rem;"></div><p>Menganalisis file...</p></div>';
        const formData = new FormData(); formData.append('file', currentFile);
        try {
            const response = await fetch('/api/detect/file', { method: 'POST', body: formData });
            const result = await response.json();
            if (result.error) { resultContent.innerHTML = `<div style="color: red; padding: 1rem;">Error: ${result.error}</div>`; return; }
            const isAI = result.is_ai;
            resultContent.innerHTML = `<div style="background: #0f172a; border-radius: 1rem; padding: 1.5rem;"><div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem;"><span style="font-weight: bold;">Hasil Deteksi File</span><span style="background: ${isAI ? '#7f1a1a' : '#14532d'}; color: ${isAI ? '#fecaca' : '#bbf7d0'}; padding: 0.5rem 1rem; border-radius: 2rem;">${isAI ? '🤖 AI-Generated' : '👤 Human Written'}</span></div><div style="margin-bottom: 1rem;"><div style="display: flex; justify-content: space-between; margin-bottom: 0.25rem;"><span>🤖 AI Probability</span><span>${result.ai_probability}%</span></div><div class="progress-bar-container"><div class="progress-bar progress-ai" style="width: ${result.ai_probability}%"></div></div><div style="display: flex; justify-content: space-between; margin: 1rem 0 0.25rem;"><span>👤 Human Probability</span><span>${result.human_probability}%</span></div><div class="progress-bar-container"><div class="progress-bar progress-human" style="width: ${result.human_probability}%"></div></div></div><div style="margin-top: 1rem; padding: 1rem; background: #1e293b; border-radius: 0.75rem; border-left: 3px solid #3b82f6;"><strong><i class="fas fa-graduation-cap"></i> Rekomendasi:</strong><br>${isAI ? 'Tugas ini memiliki indikasi kuat dihasilkan AI. Verifikasi lanjutan diperlukan.' : 'Tugas ini cenderung tulisan manusia. Periksa kesesuaian materi.'}</div></div>`;
            await loadHistory(); await loadStats();
        } catch (error) { resultContent.innerHTML = `<div style="color: red; padding: 1rem;">Error: ${error.message}</div>`; }
    }

    async function logout() { if (confirm('Yakin ingin keluar?')) { await fetch('/api/auth/logout', { method: 'POST' }); window.location.href = '/'; } }

    function escapeHtml(text) { const div = document.createElement('div'); div.textContent = text; return div.innerHTML; }

    document.getElementById('profileBtn').addEventListener('click', (e) => { e.stopPropagation(); document.getElementById('profileMenu').classList.toggle('show'); });
    document.addEventListener('click', () => document.getElementById('profileMenu').classList.remove('show'));
    
    document.addEventListener('DOMContentLoaded', () => {
        console.log('Dashboard loaded, checking session...');
        showTab('text');
        loadCurrentUser();
        loadHistory();
        loadStats();
        initFileUpload();
    });
</script>
{% endblock %}