// ============================================
// APLIKASI DOKUMENTASI NASABAH LPD GERANA
// ============================================

// Global Variables
let stream = null;
let capturedImage = null;
let db = null;
let currentDetailId = null;

// DOM Elements
const elements = {
    // Webcam
    webcam: document.getElementById('webcam'),
    canvas: document.getElementById('canvas'),
    preview: document.getElementById('preview'),
    previewImage: document.getElementById('previewImage'),

    // Buttons
    startBtn: document.getElementById('startBtn'),
    captureBtn: document.getElementById('captureBtn'),
    retakeBtn: document.getElementById('retakeBtn'),
    saveBtn: document.getElementById('saveBtn'),
    printBtn: document.getElementById('printBtn'),
    deleteBtn: document.getElementById('deleteBtn'),
    exportBtn: document.getElementById('exportBtn'),

    // Form
    form: document.getElementById('nasabahForm'),
    nama: document.getElementById('nama'),
    noAnggota: document.getElementById('noAnggota'),
    jenisPerjanjian: document.getElementById('jenisPerjanjian'),
    tanggal: document.getElementById('tanggal'),
    catatan: document.getElementById('catatan'),

    // Gallery
    gallery: document.getElementById('gallery'),
    emptyState: document.getElementById('emptyState'),
    searchInput: document.getElementById('searchInput'),
    galleryStats: document.getElementById('galleryStats'),

    // Modal
    modal: document.getElementById('detailModal'),
    modalBody: document.getElementById('modalBody'),
    closeModal: document.querySelector('.close-modal'),

    // Status
    webcamStatus: document.getElementById('webcamStatus'),
    toast: document.getElementById('toast')
};

// ============================================
// API CONFIGURATION
// ============================================

const API_BASE_URL = 'http://localhost:3002/api';

async function checkApiConnection() {
    try {
        const response = await fetch(`${API_BASE_URL}/health`);
        if (!response.ok) {
            throw new Error('API not responding');
        }
        console.log('✅ API connection successful');
        return true;
    } catch (error) {
        console.error('❌ API connection failed:', error);
        showToast('⚠️ Tidak dapat terhubung ke server. Pastikan server berjalan.', 'error');
        return false;
    }
}

// ============================================
// DATABASE OPERATIONS
// ============================================

async function saveToDatabase(data) {
    try {
        const response = await fetch(`${API_BASE_URL}/dokumentasi`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(data)
        });

        if (!response.ok) {
            const error = await response.json();
            throw new Error(error.error || 'Failed to save');
        }

        const result = await response.json();
        console.log('Data berhasil disimpan dengan ID:', result.id);
        return result.id;
    } catch (error) {
        console.error('Error saving to database:', error);
        throw error;
    }
}

async function getAllData() {
    try {
        const response = await fetch(`${API_BASE_URL}/dokumentasi`);

        if (!response.ok) {
            throw new Error('Failed to fetch data');
        }

        const result = await response.json();
        return result.data || [];
    } catch (error) {
        console.error('Error fetching data:', error);
        throw error;
    }
}

async function getDataById(id) {
    try {
        const response = await fetch(`${API_BASE_URL}/dokumentasi/${id}`);

        if (!response.ok) {
            throw new Error('Data not found');
        }

        const result = await response.json();
        return result.data;
    } catch (error) {
        console.error('Error fetching data by ID:', error);
        throw error;
    }
}

async function deleteData(id) {
    try {
        const response = await fetch(`${API_BASE_URL}/dokumentasi/${id}`, {
            method: 'DELETE'
        });

        if (!response.ok) {
            throw new Error('Failed to delete');
        }

        return true;
    } catch (error) {
        console.error('Error deleting data:', error);
        throw error;
    }
}

// ============================================
// WEBCAM FUNCTIONS
// ============================================

async function startWebcam() {
    try {
        showStatus('Meminta akses webcam...', 'info');

        stream = await navigator.mediaDevices.getUserMedia({
            video: {
                width: { ideal: 1280 },
                height: { ideal: 720 },
                facingMode: 'user'
            },
            audio: false
        });

        elements.webcam.srcObject = stream;

        elements.startBtn.style.display = 'none';
        elements.captureBtn.style.display = 'inline-flex';

        showStatus('Webcam aktif. Posisikan nasabah dan klik "Ambil Foto"', 'success');
        showToast('✅ Webcam berhasil diaktifkan', 'success');

    } catch (error) {
        console.error('Error accessing webcam:', error);
        showStatus('Gagal mengakses webcam. Pastikan webcam terhubung dan izin diberikan.', 'error');
        showToast('❌ Gagal mengakses webcam', 'error');
    }
}

function capturePhoto() {
    const canvas = elements.canvas;
    const context = canvas.getContext('2d');

    // Set canvas size to match video
    canvas.width = elements.webcam.videoWidth;
    canvas.height = elements.webcam.videoHeight;

    // Draw video frame to canvas
    context.drawImage(elements.webcam, 0, 0, canvas.width, canvas.height);

    // Get image data
    capturedImage = canvas.toDataURL('image/jpeg', 0.9);

    // Show preview
    elements.previewImage.src = capturedImage;
    elements.webcam.style.display = 'none';
    elements.preview.style.display = 'block';

    // Update buttons
    elements.captureBtn.style.display = 'none';
    elements.retakeBtn.style.display = 'inline-flex';
    elements.saveBtn.style.display = 'inline-flex';

    showStatus('Foto berhasil diambil. Periksa hasilnya dan klik "Simpan" jika sudah sesuai.', 'success');
    showToast('📸 Foto berhasil diambil', 'success');
}

function retakePhoto() {
    capturedImage = null;

    elements.webcam.style.display = 'block';
    elements.preview.style.display = 'none';

    elements.retakeBtn.style.display = 'none';
    elements.saveBtn.style.display = 'none';
    elements.captureBtn.style.display = 'inline-flex';

    showStatus('Webcam aktif. Ambil foto ulang.', 'info');
}

function stopWebcam() {
    if (stream) {
        stream.getTracks().forEach(track => track.stop());
        stream = null;
    }

    elements.webcam.srcObject = null;
    elements.webcam.style.display = 'block';
    elements.preview.style.display = 'none';

    elements.startBtn.style.display = 'inline-flex';
    elements.captureBtn.style.display = 'none';
    elements.retakeBtn.style.display = 'none';
    elements.saveBtn.style.display = 'none';

    capturedImage = null;
}

// ============================================
// FORM FUNCTIONS
// ============================================

async function saveDocumentation() {
    // Validate form
    if (!elements.form.checkValidity()) {
        elements.form.reportValidity();
        showToast('⚠️ Lengkapi semua data yang wajib diisi', 'error');
        return;
    }

    // Validate photo
    if (!capturedImage) {
        showToast('⚠️ Ambil foto terlebih dahulu', 'error');
        return;
    }

    // Prepare data
    const data = {
        nama: elements.nama.value.trim(),
        noAnggota: elements.noAnggota.value.trim(),
        jenisPerjanjian: elements.jenisPerjanjian.value,
        tanggal: elements.tanggal.value,
        catatan: elements.catatan.value.trim(),
        foto: capturedImage,
        timestamp: new Date().toISOString()
    };

    try {
        await saveToDatabase(data);

        showToast('✅ Dokumentasi berhasil disimpan', 'success');

        // Reset form and webcam
        elements.form.reset();
        setDefaultDate();
        stopWebcam();
        showStatus('', '');

        // Reload gallery
        await loadGallery();

    } catch (error) {
        console.error('Error saving documentation:', error);
        showToast('❌ Gagal menyimpan dokumentasi', 'error');
    }
}

function setDefaultDate() {
    const today = new Date().toISOString().split('T')[0];
    elements.tanggal.value = today;
}

// ============================================
// GALLERY FUNCTIONS
// ============================================

async function loadGallery(searchTerm = '') {
    try {
        const allData = await getAllData();

        // Filter by search term
        let filteredData = allData;
        if (searchTerm) {
            const term = searchTerm.toLowerCase();
            filteredData = allData.filter(item =>
                item.nama.toLowerCase().includes(term) ||
                item.noAnggota.toLowerCase().includes(term)
            );
        }

        // Sort by timestamp (newest first)
        filteredData.sort((a, b) => new Date(b.timestamp) - new Date(a.timestamp));

        // Update stats
        updateGalleryStats(filteredData.length, allData.length);

        // Show empty state if no data
        if (filteredData.length === 0) {
            elements.gallery.innerHTML = '';
            elements.emptyState.style.display = 'block';
            return;
        }

        elements.emptyState.style.display = 'none';

        // Render gallery items
        elements.gallery.innerHTML = filteredData.map(item => `
            <div class="gallery-item" data-id="${item.id}" onclick="showDetail(${item.id})">
                <img src="${item.foto}" alt="${item.nama}" class="gallery-item-image">
                <div class="gallery-item-info">
                    <h3>${escapeHtml(item.nama)}</h3>
                    <p><strong>No. Anggota:</strong> ${escapeHtml(item.noAnggota)}</p>
                    <p><strong>Perjanjian:</strong> ${escapeHtml(item.jenisPerjanjian)}</p>
                    <p class="gallery-item-date">📅 ${formatDate(item.tanggal)} • 🕐 ${formatTime(item.timestamp)}</p>
                </div>
            </div>
        `).join('');

    } catch (error) {
        console.error('Error loading gallery:', error);
        showToast('❌ Gagal memuat galeri', 'error');
    }
}

function updateGalleryStats(shown, total) {
    if (total === 0) {
        elements.galleryStats.innerHTML = '';
        return;
    }

    let statsText = `📊 Total: ${total} dokumentasi`;
    if (shown < total) {
        statsText += ` • Ditampilkan: ${shown}`;
    }

    elements.galleryStats.innerHTML = statsText;
}

// ============================================
// DETAIL & PRINT FUNCTIONS
// ============================================

async function showDetail(id) {
    try {
        const data = await getDataById(id);
        if (!data) {
            showToast('❌ Data tidak ditemukan', 'error');
            return;
        }

        currentDetailId = id;

        elements.modalBody.innerHTML = `
            <div class="detail-container">
                <div>
                    <img src="${data.foto}" alt="${escapeHtml(data.nama)}" class="detail-image">
                </div>
                <div class="detail-info">
                    <h2>📋 Detail Dokumentasi</h2>
                    
                    <div class="detail-row">
                        <div class="detail-label">Nama Lengkap</div>
                        <div class="detail-value">${escapeHtml(data.nama)}</div>
                    </div>
                    
                    <div class="detail-row">
                        <div class="detail-label">Nomor Anggota</div>
                        <div class="detail-value">${escapeHtml(data.noAnggota)}</div>
                    </div>
                    
                    <div class="detail-row">
                        <div class="detail-label">Jenis Perjanjian</div>
                        <div class="detail-value">${escapeHtml(data.jenisPerjanjian)}</div>
                    </div>
                    
                    <div class="detail-row">
                        <div class="detail-label">Tanggal Penandatanganan</div>
                        <div class="detail-value">${formatDate(data.tanggal)}</div>
                    </div>
                    
                    ${data.catatan ? `
                        <div class="detail-row">
                            <div class="detail-label">Catatan</div>
                            <div class="detail-value">${escapeHtml(data.catatan)}</div>
                        </div>
                    ` : ''}
                    
                    <div class="detail-row">
                        <div class="detail-label">Waktu Pengambilan Foto</div>
                        <div class="detail-value">${formatDateTime(data.timestamp)}</div>
                    </div>
                    
                    ${data.ipAddress ? `
                        <div class="detail-row">
                            <div class="detail-label">IP Address</div>
                            <div class="detail-value">${escapeHtml(data.ipAddress)}</div>
                        </div>
                    ` : ''}
                    
                    ${data.browserInfo ? `
                        <div class="detail-row">
                            <div class="detail-label">Browser / Perangkat</div>
                            <div class="detail-value">${escapeHtml(data.browserInfo)}</div>
                        </div>
                    ` : ''}
                </div>
            </div>
        `;

        elements.modal.classList.add('show');

    } catch (error) {
        console.error('Error showing detail:', error);
        showToast('❌ Gagal memuat detail', 'error');
    }
}

function closeModal() {
    elements.modal.classList.remove('show');
    currentDetailId = null;
}

function printDetail() {
    window.print();
}

async function deleteDetail() {
    if (!currentDetailId) return;

    if (!confirm('Apakah Anda yakin ingin menghapus dokumentasi ini?')) {
        return;
    }

    try {
        await deleteData(currentDetailId);
        showToast('✅ Dokumentasi berhasil dihapus', 'success');
        closeModal();
        await loadGallery();
    } catch (error) {
        console.error('Error deleting data:', error);
        showToast('❌ Gagal menghapus dokumentasi', 'error');
    }
}

// ============================================
// EXPORT FUNCTION
// ============================================

async function exportData() {
    try {
        const allData = await getAllData();

        if (allData.length === 0) {
            showToast('⚠️ Tidak ada data untuk diekspor', 'error');
            return;
        }

        // Create CSV data (without photos for file size)
        const csvData = convertToCSV(allData);

        // Download CSV
        const blob = new Blob([csvData], { type: 'text/csv;charset=utf-8;' });
        const link = document.createElement('a');
        const url = URL.createObjectURL(blob);

        link.setAttribute('href', url);
        link.setAttribute('download', `dokumentasi_nasabah_${new Date().toISOString().split('T')[0]}.csv`);
        link.style.visibility = 'hidden';

        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);

        showToast('✅ Data berhasil diekspor', 'success');

    } catch (error) {
        console.error('Error exporting data:', error);
        showToast('❌ Gagal mengekspor data', 'error');
    }
}

function convertToCSV(data) {
    const headers = ['ID', 'Nama', 'No. Anggota', 'Jenis Perjanjian', 'Tanggal', 'Catatan', 'Waktu Input'];
    const rows = data.map(item => [
        item.id,
        item.nama,
        item.noAnggota,
        item.jenisPerjanjian,
        formatDate(item.tanggal),
        item.catatan || '',
        formatDateTime(item.timestamp)
    ]);

    const csvContent = [
        headers.join(','),
        ...rows.map(row => row.map(cell => `"${cell}"`).join(','))
    ].join('\n');

    return csvContent;
}

// ============================================
// UTILITY FUNCTIONS
// ============================================

function showStatus(message, type) {
    if (!message) {
        elements.webcamStatus.innerHTML = '';
        elements.webcamStatus.className = 'status-message';
        return;
    }

    elements.webcamStatus.innerHTML = message;
    elements.webcamStatus.className = `status-message ${type}`;
}

function showToast(message, type = 'success') {
    elements.toast.textContent = message;
    elements.toast.className = `toast ${type} show`;

    setTimeout(() => {
        elements.toast.classList.remove('show');
    }, 3000);
}

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

function formatDate(dateString) {
    const options = { year: 'numeric', month: 'long', day: 'numeric' };
    return new Date(dateString).toLocaleDateString('id-ID', options);
}

function formatTime(isoString) {
    return new Date(isoString).toLocaleTimeString('id-ID', {
        hour: '2-digit',
        minute: '2-digit'
    });
}

function formatDateTime(isoString) {
    const date = new Date(isoString);
    return `${date.toLocaleDateString('id-ID', {
        year: 'numeric',
        month: 'long',
        day: 'numeric'
    })} pukul ${date.toLocaleTimeString('id-ID', {
        hour: '2-digit',
        minute: '2-digit'
    })}`;
}

// ============================================
// EVENT LISTENERS
// ============================================

function setupEventListeners() {
    // Webcam controls
    elements.startBtn.addEventListener('click', startWebcam);
    elements.captureBtn.addEventListener('click', capturePhoto);
    elements.retakeBtn.addEventListener('click', retakePhoto);
    elements.saveBtn.addEventListener('click', saveDocumentation);

    // Modal
    elements.closeModal.addEventListener('click', closeModal);
    elements.modal.addEventListener('click', (e) => {
        if (e.target === elements.modal) {
            closeModal();
        }
    });

    elements.printBtn.addEventListener('click', printDetail);
    elements.deleteBtn.addEventListener('click', deleteDetail);

    // Search
    elements.searchInput.addEventListener('input', (e) => {
        loadGallery(e.target.value);
    });

    // Export
    elements.exportBtn.addEventListener('click', exportData);

    // Keyboard shortcuts
    document.addEventListener('keydown', (e) => {
        if (e.key === 'Escape') {
            closeModal();
        }
    });
}

// ============================================
// INITIALIZATION
// ============================================

async function init() {
    try {
        // Check API connection
        const isConnected = await checkApiConnection();

        // Set default date
        setDefaultDate();

        // Setup event listeners
        setupEventListeners();

        // Load gallery
        await loadGallery();

        console.log('✅ Aplikasi berhasil diinisialisasi');

    } catch (error) {
        console.error('Error initializing app:', error);
        showToast('❌ Gagal menginisialisasi aplikasi', 'error');
    }
}

// Start the app when DOM is ready
if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init);
} else {
    init();
}

// Make showDetail function globally accessible
window.showDetail = showDetail;