/**
 * app.js
 * ไฟล์หลักสำหรับเริ่มต้นแอปพลิเคชัน
 * ระบบตรวจสอบสลิปการโอนเงิน
 */

// ตัวแปรสำหรับเก็บ instance หลัก
let slipVerifier = null;

/**
 * เริ่มต้นแอปพลิเคชันเมื่อ DOM โหลดเสร็จ
 */
document.addEventListener('DOMContentLoaded', async () => {
  try {
    console.log('Starting Slip Verifier Application...');

    // แสดง loading state
    showLoadingState();

    // ตรวจสอบการรองรับของเบราว์เซอร์
    checkBrowserSupport();

    // ตรวจสอบ debug mode จาก URL
    const urlParams = new URLSearchParams(window.location.search);
    const debugMode = urlParams.get('debug') === 'true';

    // เริ่มต้น Slip Verifier
    slipVerifier = new SlipVerifier(debugMode);

    // ทำให้ slipVerifier เป็น global variable
    window.slipVerifier = slipVerifier;

    if (debugMode) {
      console.log('🐛 Debug Mode Enabled');
    }

    // ซ่อน loading state
    hideLoadingState();

    console.log('Slip Verifier Application started successfully');

  } catch (error) {
    console.error('Failed to start application:', error);
    showErrorState(error.message);
  }
});

/**
 * ตรวจสอบการรองรับของเบราว์เซอร์
 */
function checkBrowserSupport() {
  const requiredFeatures = [
    'navigator.mediaDevices',
    'navigator.clipboard',
    'FileReader',
    'URL.createObjectURL'
  ];

  const missingFeatures = requiredFeatures.filter(feature => {
    try {
      return !eval(feature);
    } catch (e) {
      return true;
    }
  });

  if (missingFeatures.length > 0) {
    throw new Error(`เบราว์เซอร์ไม่รองรับฟีเจอร์: ${missingFeatures.join(', ')}`);
  }
}

/**
 * แสดง loading state
 */
function showLoadingState() {
  const loadingHtml = `
        <div id="app-loading" style="
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(248, 250, 252, 0.95);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            z-index: 9999;
            font-family: 'Kanit', sans-serif;
        ">
            <div class="loading-spinner" style="
                width: 60px;
                height: 60px;
                border: 4px solid #e2e8f0;
                border-top: 4px solid #2563eb;
                border-radius: 50%;
                animation: spin 1s linear infinite;
                margin-bottom: 20px;
            "></div>
            <h3 style="color: #2563eb; margin-bottom: 10px; font-weight: 600;">
                กำลังเริ่มต้นระบบ
            </h3>
            <p style="color: #64748b; text-align: center; max-width: 300px;">
                กำลังโหลดระบบตรวจสอบสลิปการโอนเงิน<br>
                กรุณารอสักครู่...
            </p>
        </div>
        <style>
            @keyframes spin {
                0% { transform: rotate(0deg); }
                100% { transform: rotate(360deg); }
            }
        </style>
    `;

  document.body.insertAdjacentHTML('beforeend', loadingHtml);
}

/**
 * ซ่อน loading state
 */
function hideLoadingState() {
  const loadingElement = document.getElementById('app-loading');
  if (loadingElement) {
    loadingElement.style.opacity = '0';
    setTimeout(() => loadingElement.remove(), 300);
  }
}

/**
 * แสดง error state
 */
function showErrorState(message) {
  hideLoadingState();

  const errorHtml = `
        <div id="app-error" style="
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(248, 250, 252, 0.95);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            z-index: 9999;
            font-family: 'Kanit', sans-serif;
            text-align: center;
            padding: 20px;
        ">
            <div style="
                background: white;
                padding: 40px;
                border-radius: 12px;
                box-shadow: 0 10px 25px rgba(0,0,0,0.1);
                max-width: 500px;
            ">
                <div style="
                    font-size: 4rem;
                    color: #dc2626;
                    margin-bottom: 20px;
                ">
                    <i class="bi bi-exclamation-triangle"></i>
                </div>
                <h3 style="color: #dc2626; margin-bottom: 15px; font-weight: 600;">
                    เกิดข้อผิดพลาด
                </h3>
                <p style="color: #64748b; margin-bottom: 25px; line-height: 1.6;">
                    ${message}
                </p>
                <button onclick="location.reload()" style="
                    background: #2563eb;
                    color: white;
                    border: none;
                    padding: 12px 24px;
                    border-radius: 8px;
                    font-family: 'Kanit', sans-serif;
                    font-weight: 500;
                    cursor: pointer;
                    font-size: 16px;
                ">
                    <i class="bi bi-arrow-counterclockwise"></i> ลองใหม่
                </button>
            </div>
        </div>
    `;

  document.body.insertAdjacentHTML('beforeend', errorHtml);
}

/**
 * จัดการเมื่อหน้าต่างปิด
 */
window.addEventListener('beforeunload', async () => {
  if (slipVerifier && typeof slipVerifier.destroy === 'function') {
    await slipVerifier.destroy();
  }
});

/**
 * จัดการ errors ทั่วไป
 */
window.addEventListener('error', (event) => {
  console.error('Global error:', event.error);

  if (slipVerifier) {
    slipVerifier.showToast('เกิดข้อผิดพลาดที่ไม่คาดคิด', 'error');
  }
});

/**
 * จัดการ Promise rejections
 */
window.addEventListener('unhandledrejection', (event) => {
  console.error('Unhandled promise rejection:', event.reason);

  if (slipVerifier) {
    slipVerifier.showToast('เกิดข้อผิดพลาดในการประมวลผล', 'error');
  }

  event.preventDefault();
});

/**
 * ฟังก์ชันสำหรับการ debug (สำหรับ development)
 */
if (window.location.search.includes('debug=true')) {
  window.slipVerifier = slipVerifier;
  console.log('Debug mode enabled');

  // เพิ่มปุ่ม debug
  document.addEventListener('DOMContentLoaded', () => {
    const debugBtn = document.createElement('button');
    debugBtn.innerHTML = '<i class="bi bi-bug"></i> Debug';
    debugBtn.style.cssText = `
            position: fixed;
            top: 20px;
            right: 20px;
            background: #f59e0b;
            color: white;
            border: none;
            padding: 8px 12px;
            border-radius: 6px;
            font-size: 12px;
            z-index: 1000;
            cursor: pointer;
        `;

    debugBtn.addEventListener('click', () => {
      console.log('Current SlipVerifier instance:', slipVerifier);
      console.log('OCR Processor:', slipVerifier?.ocrProcessor);
      console.log('Slip Parser:', slipVerifier?.slipParser);
    });

    document.body.appendChild(debugBtn);
  });
}

/**
 * Service Worker Registration (สำหรับอนาคต)
 */
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    // navigator.serviceWorker.register('/sw.js')
    //     .then(registration => console.log('SW registered'))
    //     .catch(error => console.log('SW registration failed'));
  });
}

/**
 * เช็คการเชื่อมต่ออินเทอร์เน็ต
 */
window.addEventListener('online', () => {
  if (slipVerifier) {
    slipVerifier.showToast('เชื่อมต่ออินเทอร์เน็ตแล้ว', 'success');
  }
});

window.addEventListener('offline', () => {
  if (slipVerifier) {
    slipVerifier.showToast('ไม่มีการเชื่อมต่ออินเทอร์เน็ต', 'warning');
  }
});

/**
 * ซ่อนส่วนทั้งหมด
 */
function hideAllSections() {
  const sections = [
    'upload-section',
    'camera-section',
    'qr-section',
    'processing-section',
    'results-section',
    'error-section'
  ];

  sections.forEach(sectionId => {
    const section = document.getElementById(sectionId);
    if (section) {
      section.style.display = 'none';
    }
  });
}

/**
 * เพิ่ม Event Listeners สำหรับฟีเจอร์ใหม่
 */
document.addEventListener('DOMContentLoaded', () => {
  // Toggle สำหรับแสดง/ซ่อนข้อมูล OCR ดิบ
  const toggleRawDataBtn = document.getElementById('toggle-raw-data');
  const rawDataContent = document.getElementById('raw-data-content');

  if (toggleRawDataBtn && rawDataContent) {
    toggleRawDataBtn.addEventListener('click', () => {
      const isExpanded = toggleRawDataBtn.getAttribute('data-expanded') === 'true';
      const icon = toggleRawDataBtn.querySelector('i');
      const text = toggleRawDataBtn.querySelector('.toggle-text');

      if (isExpanded) {
        // ซ่อนข้อมูล
        rawDataContent.style.display = 'none';
        toggleRawDataBtn.setAttribute('data-expanded', 'false');
        icon.className = 'bi bi-chevron-down';
        text.textContent = 'แสดงข้อมูลดิบ';
      } else {
        // แสดงข้อมูล
        rawDataContent.style.display = 'block';
        toggleRawDataBtn.setAttribute('data-expanded', 'true');
        icon.className = 'bi bi-chevron-up';
        text.textContent = 'ซ่อนข้อมูลดิบ';
      }
    });
  }

  // ปุ่มคัดลอกข้อมูลดิบ
  const copyRawBtn = document.getElementById('copy-raw-btn');
  if (copyRawBtn) {
    copyRawBtn.addEventListener('click', copyRawData);
  }

  // อัปเดตปุ่มคัดลอกข้อมูลเดิม
  const copyDataBtn = document.getElementById('copy-data-btn');
  if (copyDataBtn) {
    copyDataBtn.addEventListener('click', copySlipData);
  }
});

/**
 * คัดลอกข้อมูลสลิปแบบจัดรูปแบบ
 */
async function copySlipData() {
  try {
    if (!slipVerifier || !slipVerifier.currentSlipData) {
      throw new Error('ไม่มีข้อมูลสลิปให้คัดลอก');
    }

    const data = slipVerifier.currentSlipData;
    const formattedData = `ข้อมูลสลิปการโอนเงิน
===================
ธนาคาร: ${data.bank?.name || '-'}
จำนวนเงิน: ${SlipParser.formatAmount(data.amount)}
วันที่-เวลา: ${SlipParser.formatDateTime(data.datetime)}
ผู้โอน: ${data.sender || '-'}
ผู้รับ: ${data.receiver || '-'}
รหัสอ้างอิง: ${data.reference || '-'}

สร้างโดยระบบตรวจสอบสลิป
เวลา: ${new Date().toLocaleString('th-TH')}`;

    await navigator.clipboard.writeText(formattedData);
    slipVerifier.showToast('คัดลอกข้อมูลแล้ว', 'success');

  } catch (error) {
    console.error('Copy slip data failed:', error);
    slipVerifier.showToast('ไม่สามารถคัดลอกข้อมูลได้', 'error');
  }
}

/**
 * คัดลอกข้อมูล OCR ดิบ
 */
async function copyRawData() {
  try {
    if (!slipVerifier || !slipVerifier.ocrProcessor) {
      throw new Error('ไม่มีข้อมูล OCR ให้คัดลอก');
    }

    const debugData = slipVerifier.ocrProcessor.getDebugData();
    const rawData = `ข้อมูล OCR ดิบ
================
ข้อความต้นฉบับ:
${debugData.rawText || 'ไม่มีข้อมูล'}

ข้อความหลังปรับปรุง:
${debugData.improvedText || 'ไม่มีข้อมูล'}

สถิติการประมวลผล:
- ความมั่นใจ: ${debugData.confidence ? Math.round(debugData.confidence) + '%' : '-'}
- เวลาประมวลผล: ${debugData.processingTime || '-'} ms
- ตัวอักษรทั้งหมด: ${debugData.improvedText?.length || 0}
- ตัวอักษรไทย: ${(debugData.improvedText?.match(/[\u0E00-\u0E7F]/g) || []).length}

สร้างโดยระบบตรวจสอบสลิป
เวลา: ${new Date().toLocaleString('th-TH')}`;

    await navigator.clipboard.writeText(rawData);
    slipVerifier.showToast('คัดลอกข้อมูล OCR แล้ว', 'success');

  } catch (error) {
    console.error('Copy raw data failed:', error);
    slipVerifier.showToast('ไม่สามารถคัดลอกข้อมูลได้', 'error');
  }
}

/**
 * ฟังก์ชันช่วยสำหรับการจัดการ QR Data
 */
function setQRData(qrData) {
  if (slipVerifier) {
    slipVerifier.currentQRData = qrData;
    console.log('QR Data set:', qrData);
  }
}

/**
 * ล้างข้อมูล QR
 */
function clearQRData() {
  if (slipVerifier) {
    slipVerifier.currentQRData = null;
    console.log('QR Data cleared');
  }
}

/**
 * Export สำหรับการใช้งานภายนอก
 */
window.SlipVerifierApp = {
  getInstance: () => slipVerifier,
  restart: () => location.reload(),
  version: '1.0.0'
};