const { useState, useRef } = React;
const { 
  Upload, FileText, CheckCircle2, AlertCircle, ShoppingCart, 
  Calendar, User, CreditCard, ChevronRight, Copy, Check, FileCheck, RefreshCw,
  FileSpreadsheet
} = window.lucide;

function OCRScanner({ onScanComplete }) {
  const [dragActive, setDragActive] = useState(false);
  const [file, setFile] = useState(null);
  const [scanning, setScanning] = useState(false);
  const [progressMessage, setProgressMessage] = useState('');
  const [scannedResults, setScannedResults] = useState(null);
  const [selectedResultIndex, setSelectedResultIndex] = useState(0);
  const [error, setError] = useState(null);
  const [copied, setCopied] = useState(false);
  const fileInputRef = useRef(null);

  const scannedResult = scannedResults && scannedResults.length > 0 ? scannedResults[selectedResultIndex] : null;

  const progressMessages = [
    'กำลังอัปโหลดไฟล์เอกสารอย่างปลอดภัย...',
    'กำลังประมวลผล OCR และให้อัลกอริทึมวิเคราะห์ประเภทเอกสาร...',
    'AI กำลังถอดและดึงข้อความภาษาไทยอย่างละเอียด...',
    'กำลังจัดหมวดหมู่ข้อมูลอัตโนมัติ (Lazada / Shopee / TikTok)...',
    'กำลังแยกชื่อสินค้า ราคา และจำนวนยอดชำระ...',
    'กำลังส่งข้อมูลเข้า Google Sheets และส่งอีเมลแจ้งเตือน...',
    'ใกล้เสร็จสมบูรณ์แล้ว โปรดรอสักครู่...'
  ];

  const rotateProgressMessages = (index = 0) => {
    if (!scanning) return;
    setProgressMessage(progressMessages[index % progressMessages.length]);
    setTimeout(() => {
      rotateProgressMessages(index + 1);
    }, 3000);
  };

  const handleDrag = (e) => {
    e.preventDefault();
    e.stopPropagation();
    if (e.type === 'dragenter' || e.type === 'dragover') {
      setDragActive(true);
    } else if (e.type === 'dragleave') {
      setDragActive(false);
    }
  };

  const handleDrop = (e) => {
    e.preventDefault();
    e.stopPropagation();
    setDragActive(false);

    if (e.dataTransfer.files && e.dataTransfer.files[0]) {
      const droppedFile = e.dataTransfer.files[0];
      validateAndSetFile(droppedFile);
    }
  };

  const handleFileChange = (e) => {
    if (e.target.files && e.target.files[0]) {
      validateAndSetFile(e.target.files[0]);
    }
  };

  const validateAndSetFile = (selectedFile) => {
    setError(null);
    const validTypes = ['application/pdf', 'image/png', 'image/jpeg', 'image/jpg', 'image/webp'];
    if (!validTypes.includes(selectedFile.type)) {
      setError('รองรับเฉพาะไฟล์เอกสาร PDF หรือรูปภาพ (PNG, JPEG, WEBP) เท่านั้น');
      return;
    }
    setFile(selectedFile);
    setScannedResults(null);
    setSelectedResultIndex(0);
  };

  const handleScan = async () => {
    if (!file) return;

    setScanning(true);
    setError(null);
    setScannedResults(null);
    setSelectedResultIndex(0);
    
    rotateProgressMessages(0);

    try {
      let chunks = [];
      
      // If it's a PDF and PDFLib is available, try to chunk it
      if (file.type === 'application/pdf' && window.PDFLib) {
        try {
          setProgressMessage('กำลังเตรียมเอกสาร PDF (Auto-Splitting) เพื่อป้องกันเซิร์ฟเวอร์ Timeout...');
          const arrayBuffer = await file.arrayBuffer();
          const pdfDoc = await window.PDFLib.PDFDocument.load(arrayBuffer);
          const pageCount = pdfDoc.getPageCount();
          
          if (pageCount > 5) {
            const CHUNK_SIZE = 5;
            for (let i = 0; i < pageCount; i += CHUNK_SIZE) {
              const newPdf = await window.PDFLib.PDFDocument.create();
              const end = Math.min(i + CHUNK_SIZE, pageCount);
              const pageIndices = Array.from({length: end - i}, (_, idx) => i + idx);
              const copiedPages = await newPdf.copyPages(pdfDoc, pageIndices);
              copiedPages.forEach((page) => newPdf.addPage(page));
              
              const pdfBytes = await newPdf.save();
              const blob = new Blob([pdfBytes], { type: 'application/pdf' });
              const chunkFile = new File([blob], `${file.name}_part${Math.floor(i/CHUNK_SIZE) + 1}.pdf`, { type: 'application/pdf' });
              chunks.push(chunkFile);
            }
          } else {
            chunks = [file];
          }
        } catch (pdfErr) {
          console.warn('PDF splitting failed, falling back to full upload:', pdfErr);
          chunks = [file];
        }
      } else {
        chunks = [file];
      }

      let allResults = [];

      for (let i = 0; i < chunks.length; i++) {
        const chunkFile = chunks[i];
        if (chunks.length > 1) {
          setProgressMessage(`กำลังส่งมอบข้อมูลชุดที่ ${i + 1}/${chunks.length} ไปยังเซิร์ฟเวอร์...`);
        }

        const formData = new FormData();
        formData.append('file', chunkFile);

        const res = await fetch('api.php?action=scan', {
          method: 'POST',
          body: formData
        });

        if (!res.ok) {
          if (res.status === 504) {
            throw new Error(`เซิร์ฟเวอร์หมดเวลาการเชื่อมต่อ (Status 504) ในขณะส่งชุดข้อมูลที่ ${i + 1}/${chunks.length}`);
          }

          let errMsg = 'เกิดข้อผิดพลาดในการประมวลผล OCR';
          try {
            const errText = await res.text();
            try {
              const errData = JSON.parse(errText);
              errMsg = errData.error || errData.details || errMsg;
            } catch {
              if (errText.includes('GEMINI_API_KEY is not configured') || errText.includes('apiKey is not configured')) {
                errMsg = 'ไม่พบค่า GEMINI_API_KEY กรุณาตั้งค่า API Key ใน Settings เพื่อใช้งานระบบ AI OCR';
              } else {
                errMsg = `เซิร์ฟเวอร์ตอบกลับด้วยรหัสข้อผิดพลาด Status ${res.status}`;
              }
            }
          } catch {
            errMsg = `เกิดข้อผิดพลาดภายนอก (HTTP Status ${res.status})`;
          }
          throw new Error(errMsg);
        }

        let results;
        try {
          const resText = await res.text();
          const parsed = JSON.parse(resText);
          results = Array.isArray(parsed) ? parsed : [parsed];
        } catch (jsonParseErr) {
          throw new Error('ไม่สามารถประมวลผลข้อมูลส่งกลับจากเซิร์ฟเวอร์ได้ (Invalid JSON response)');
        }
        
        allResults = [...allResults, ...results];
      }

      setScannedResults(allResults);
      onScanComplete(allResults);
    } catch (err) {
      console.error(err);
      setError(err instanceof Error ? err.message : 'เกิดข้อผิดพลาดบางประการ โปรดตรวจสอบ GEMINI_API_KEY หรือลองอีกครั้ง');
    } finally {
      setScanning(false);
    }
  };

  const handleCopyToClipboard = () => {
    if (!scannedResult) return;
    
    let clipboardText = "หมวดหมู่\tเลขที่สั่งซื้อ\tชื่อผู้รับ\tวันที่\tชื่อสินค้า\tราคาต่อหน่วย\tจำนวน\tยอดรวมย่อย\tยอดรวมสุทธิ\n";
    
    scannedResult.items.forEach(item => {
      clipboardText += `${scannedResult.category}\t${scannedResult.orderId}\t${scannedResult.customerName}\t${new Date(scannedResult.timestamp).toLocaleDateString('th-TH')}\t${item.productName}\t${item.price}\t${item.quantity}\t${item.amount}\t${scannedResult.totalAmount}\n`;
    });

    navigator.clipboard.writeText(clipboardText);
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  };

  const handleReset = () => {
    setFile(null);
    setScannedResults(null);
    setSelectedResultIndex(0);
    setError(null);
    setProgressMessage('');
    if (fileInputRef.current) fileInputRef.current.value = '';
  };

  const exportSingleRecordToCSV = (record) => {
    const headers = [
      'เลขที่คำสั่งซื้อ', 'วันที่สั่งซื้อ', 'บริษัทขนส่ง', 'หมายเลขพัสดุ', 'รหัสเส้นทาง', 'ช่องการชำระเงิน',
      'ชื่อผู้ส่ง', 'ที่อยู่ผู้ส่ง', 'เบอร์ผู้ส่ง', 'ชื่อผู้รับ', 'ที่อยู่ผู้รับ', 'เบอร์ผู้รับ',
      'ชื่อสินค้า', 'ราคาต่อหน่วย', 'จำนวน', 'รวมราคา'
    ];
    
    const rows = [];
    const baseData = [
      record.orderId || '', record.orderDate || '', record.shippingProvider || '', record.trackingNumber || '', record.routeCode || '', record.paymentMethod || '',
      record.senderName || '', (record.senderAddress || '').replace(/"/g, '""').replace(/\n/g, ' '), record.senderPhone || '',
      record.customerName || '', (record.receiverAddress || '').replace(/"/g, '""').replace(/\n/g, ' '), record.receiverPhone || ''
    ];

    if (record.items && record.items.length > 0) {
      record.items.forEach(item => {
        rows.push([
          ...baseData,
          item.productName.replace(/"/g, '""').replace(/\n/g, ' '),
          item.price.toString(),
          item.quantity.toString(),
          item.amount.toString()
        ]);
      });
    } else {
      rows.push([...baseData, '', '0', '0', '0']);
    }

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

    const blob = new Blob([new Uint8Array([0xEF, 0xBB, 0xBF]), csvContent], { type: 'text/csv;charset=utf-8;' });
    const link = document.createElement('a');
    const url = URL.createObjectURL(blob);
    link.setAttribute('href', url);
    link.setAttribute('download', `sheetocr_order_${record.orderId || record.id}.csv`);
    link.style.visibility = 'hidden';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  };

  const exportBatchToCSV = (records) => {
    const headers = [
      'เลขที่คำสั่งซื้อ', 'วันที่สั่งซื้อ', 'บริษัทขนส่ง', 'หมายเลขพัสดุ', 'รหัสเส้นทาง', 'ช่องการชำระเงิน',
      'ชื่อผู้ส่ง', 'ที่อยู่ผู้ส่ง', 'เบอร์ผู้ส่ง', 'ชื่อผู้รับ', 'ที่อยู่ผู้รับ', 'เบอร์ผู้รับ',
      'ชื่อสินค้า', 'ราคาต่อหน่วย', 'จำนวน', 'รวมราคา'
    ];
    
    const rows = [];
    
    records.forEach(record => {
      const baseData = [
        record.orderId || '', record.orderDate || '', record.shippingProvider || '', record.trackingNumber || '', record.routeCode || '', record.paymentMethod || '',
        record.senderName || '', (record.senderAddress || '').replace(/"/g, '""').replace(/\n/g, ' '), record.senderPhone || '',
        record.customerName || '', (record.receiverAddress || '').replace(/"/g, '""').replace(/\n/g, ' '), record.receiverPhone || ''
      ];

      if (record.items && record.items.length > 0) {
        record.items.forEach(item => {
          rows.push([
            ...baseData,
            item.productName.replace(/"/g, '""').replace(/\n/g, ' '),
            item.price.toString(),
            item.quantity.toString(),
            item.amount.toString()
          ]);
        });
      } else {
        rows.push([...baseData, '', '0', '0', '0']);
      }
    });

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

    const blob = new Blob([new Uint8Array([0xEF, 0xBB, 0xBF]), csvContent], { type: 'text/csv;charset=utf-8;' });
    const link = document.createElement('a');
    const url = URL.createObjectURL(blob);
    link.setAttribute('href', url);
    link.setAttribute('download', `sheetocr_batch_export_${Date.now()}.csv`);
    link.style.visibility = 'hidden';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  };

  const getCategoryTheme = (category) => {
    switch (category) {
      case 'Lazada':
        return {
          bg: 'bg-blue-50 border-blue-200',
          text: 'text-blue-800',
          badge: 'bg-blue-600 text-white',
          accent: 'border-blue-500'
        };
      case 'Shopee':
        return {
          bg: 'bg-orange-50 border-orange-200',
          text: 'text-orange-800',
          badge: 'bg-orange-500 text-white',
          accent: 'border-orange-500'
        };
      case 'TikTok Shop':
        return {
          bg: 'bg-slate-50 border-slate-200',
          text: 'text-slate-800',
          badge: 'bg-black text-white',
          accent: 'border-black'
        };
      default:
        return {
          bg: 'bg-gray-50 border-gray-200',
          text: 'text-gray-800',
          badge: 'bg-gray-600 text-white',
          accent: 'border-gray-500'
        };
    }
  };

  return (
    <div className="space-y-6">
      {/* Upload Zone */}
      <div className="bg-white rounded-xl border border-gray-100 p-6 shadow-sm">
        <h2 className="text-lg font-bold text-gray-900 mb-4 flex items-center gap-2">
          <Upload className="w-5 h-5 text-indigo-600" />
          สแกนและจัดหมวดหมู่เอกสารใหม่ (Upload & Scan)
        </h2>

        <div
          onDragEnter={handleDrag}
          onDragOver={handleDrag}
          onDragLeave={handleDrag}
          onDrop={handleDrop}
          className={`relative border-2 border-dashed rounded-xl p-8 text-center transition-all ${
            dragActive ? 'border-indigo-500 bg-indigo-50/30' : 'border-gray-200 hover:border-indigo-400 hover:bg-gray-50/50'
          }`}
        >
          <input
            ref={fileInputRef}
            type="file"
            onChange={handleFileChange}
            accept=".pdf,image/png,image/jpeg,image/jpg,image/webp"
            className="hidden"
          />

          <div className="max-w-md mx-auto space-y-3">
            <div className="w-12 h-12 bg-indigo-50 rounded-full flex items-center justify-center mx-auto text-indigo-600">
              <FileText className="w-6 h-6" />
            </div>

            <div className="text-sm">
              <button
                type="button"
                onClick={() => fileInputRef.current?.click()}
                className="font-semibold text-indigo-600 hover:text-indigo-700 outline-none"
              >
                คลิกเพื่ออัปโหลดไฟล์เอกสาร
              </button>
              <span className="text-gray-500"> หรือลากมาวางที่นี่</span>
            </div>

            <p className="text-xs text-gray-400">
              รองรับไฟล์เอกสาร PDF, รูปใบปะหน้า, รูปใบเสร็จ (Lazada, Shopee, TikTok Shop) ขนาดสูงสุด 10MB
            </p>

            {file && (
              <div className="bg-emerald-50 text-emerald-800 rounded-lg py-2 px-3 inline-flex items-center gap-1.5 text-xs font-semibold border border-emerald-100">
                <FileCheck className="w-4 h-4 text-emerald-600" />
                เตรียมพร้อมสแกน: {file.name}
              </div>
            )}
          </div>
        </div>

        {error && (
          <div className="mt-4 p-4 bg-rose-50 border border-rose-200 text-rose-800 rounded-xl text-xs flex items-start gap-2">
            <AlertCircle className="w-4 h-4 text-rose-600 shrink-0 mt-0.5" />
            <div className="font-semibold">{error}</div>
          </div>
        )}

        {file && !scanning && (
          <div className="mt-4 flex justify-end">
            <button
              onClick={handleScan}
              className="px-6 py-2.5 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg text-sm font-semibold transition-all shadow-sm flex items-center gap-2"
            >
              <RefreshCw className="w-4 h-4" />
              เริ่มต้นส่งให้ AI สแกนเอกสาร
            </button>
          </div>
        )}
      </div>

      {/* Progress Animation Loading */}
      {scanning && (
        <div className="bg-white rounded-xl border border-gray-100 p-8 shadow-sm text-center flex flex-col items-center justify-center space-y-4">
          <div className="relative flex items-center justify-center">
            <div className="animate-ping absolute inline-flex h-12 w-12 rounded-full bg-indigo-400 opacity-20"></div>
            <div className="animate-spin rounded-full h-10 w-10 border-4 border-indigo-100 border-t-indigo-600"></div>
          </div>
          <div className="space-y-1">
            <h4 className="text-sm font-bold text-gray-800">ระบบ AI กำลังประมวลผลดึงข้อมูลเอกสาร...</h4>
            <p className="text-xs text-indigo-600 font-medium animate-pulse">{progressMessage}</p>
          </div>
        </div>
      )}

      {/* Extraction Result Showcase */}
      {scannedResult && (
        <div className="bg-white rounded-xl border border-gray-100 shadow-sm overflow-hidden animate-fade-in">
          {/* Multi-page batch selector if more than 1 record was scanned */}
          {scannedResults && scannedResults.length > 1 && (
            <div className="bg-slate-50 border-b border-gray-150 px-6 py-3 flex flex-col md:flex-row md:items-center justify-between gap-3">
              <div className="flex items-center gap-2">
                <span className="text-xs font-bold text-gray-500 uppercase tracking-wider">
                  ตรวจพบทั้งหมด {scannedResults.length} รายการ:
                </span>
                <span className="bg-indigo-600 text-white text-[11px] font-black px-2 py-0.5 rounded-full">
                  หน้า {selectedResultIndex + 1} จาก {scannedResults.length}
                </span>
              </div>
              
              <div className="flex flex-wrap items-center gap-2 max-w-full">
                <button
                  onClick={() => setSelectedResultIndex(prev => Math.max(0, prev - 1))}
                  disabled={selectedResultIndex === 0}
                  className="px-2.5 py-1.5 bg-white border border-gray-200 rounded-lg text-xs font-bold text-gray-700 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-all"
                >
                  ก่อนหน้า
                </button>
                
                <div className="flex gap-1 overflow-x-auto max-w-[200px] md:max-w-[400px] py-1">
                  {scannedResults.map((_, idx) => (
                    <button
                      key={idx}
                      onClick={() => setSelectedResultIndex(idx)}
                      className={`w-7 h-7 text-xs font-bold rounded-lg transition-all shrink-0 ${
                        selectedResultIndex === idx
                          ? 'bg-indigo-600 text-white shadow-xs'
                          : 'bg-white border border-gray-200 text-gray-700 hover:bg-gray-50'
                      }`}
                    >
                      {idx + 1}
                    </button>
                  ))}
                </div>

                <button
                  onClick={() => setSelectedResultIndex(prev => Math.min(scannedResults.length - 1, prev + 1))}
                  disabled={selectedResultIndex === scannedResults.length - 1}
                  className="px-2.5 py-1.5 bg-white border border-gray-200 rounded-lg text-xs font-bold text-gray-700 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-all"
                >
                  ถัดไป
                </button>

                <div className="border-l border-gray-200 h-5 mx-1 hidden sm:block" />

                <button
                  onClick={() => exportBatchToCSV(scannedResults)}
                  className="px-3 py-1.5 bg-emerald-600 hover:bg-emerald-700 text-white rounded-lg text-xs font-bold transition-all flex items-center gap-1.5 shrink-0 shadow-xs"
                >
                  <FileSpreadsheet className="w-3.5 h-3.5" />
                  ดาวน์โหลดรวม {scannedResults.length} รายการ (.csv)
                </button>
              </div>
            </div>
          )}

          {/* Card Accent Header */}
          <div className={`p-5 border-b border-gray-100 flex flex-col md:flex-row md:items-center justify-between gap-4 ${getCategoryTheme(scannedResult.category).bg}`}>
            <div className="flex items-center gap-3">
              <span className={`text-xs font-black px-3 py-1 rounded-full uppercase tracking-wider ${getCategoryTheme(scannedResult.category).badge}`}>
                {scannedResult.category}
              </span>
              <div>
                <h3 className="text-sm font-bold text-gray-900">ผลลัพธ์การดึงข้อมูลด้วย AI สำเร็จ</h3>
                <p className="text-xs text-gray-500 font-medium">ไฟล์: {scannedResult.fileName}</p>
              </div>
            </div>

            <div className="flex flex-wrap items-center gap-2">
              <button
                onClick={handleReset}
                className="px-3.5 py-1.5 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg text-xs font-bold transition-all flex items-center gap-1.5 outline-none shadow-xs mr-2"
              >
                <RefreshCw className="w-3.5 h-3.5" />
                สแกนเอกสารใหม่ (Reset)
              </button>

              <button
                onClick={() => exportSingleRecordToCSV(scannedResult)}
                className="px-3.5 py-1.5 bg-emerald-600 hover:bg-emerald-700 text-white rounded-lg text-xs font-bold transition-all flex items-center gap-1.5 outline-none shadow-xs"
              >
                <FileSpreadsheet className="w-3.5 h-3.5" />
                ส่งออก Excel / CSV (.csv)
              </button>

              <button
                onClick={handleCopyToClipboard}
                className="px-3.5 py-1.5 bg-white text-gray-700 border border-gray-200 rounded-lg text-xs font-semibold hover:bg-gray-50 transition-all flex items-center gap-1.5 outline-none shadow-xs"
              >
                {copied ? <Check className="w-3.5 h-3.5 text-emerald-600" /> : <Copy className="w-3.5 h-3.5 text-gray-500" />}
                {copied ? 'คัดลอกข้อมูลแล้ว' : 'คัดลอกคลิปบอร์ด'}
              </button>
            </div>
          </div>

          {/* Core Info & Logistics Detail Grid */}
          <div className="p-6 border-b border-gray-50 bg-gray-50/20 space-y-4">
            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
              <div className="flex items-center gap-3 bg-white p-3.5 rounded-xl border border-gray-100">
                <div className="p-2 bg-indigo-50 rounded-lg text-indigo-600 shrink-0">
                  <ShoppingCart className="w-4 h-4" />
                </div>
                <div className="min-w-0">
                  <span className="block text-[10px] font-bold text-gray-400 uppercase tracking-wider">เลขที่สั่งซื้อ / Order ID</span>
                  <span className="text-xs font-mono font-bold text-gray-900 truncate block">{scannedResult.orderId || 'ไม่ระบุ'}</span>
                </div>
              </div>

              <div className="flex items-center gap-3 bg-white p-3.5 rounded-xl border border-gray-100">
                <div className="p-2 bg-indigo-50 rounded-lg text-indigo-600 shrink-0">
                  <User className="w-4 h-4" />
                </div>
                <div className="min-w-0">
                  <span className="block text-[10px] font-bold text-gray-400 uppercase tracking-wider">ชื่อผู้รับสินค้า / Customer</span>
                  <span className="text-xs font-bold text-gray-900 truncate block">{scannedResult.customerName || 'ไม่ระบุ'}</span>
                </div>
              </div>

              <div className="flex items-center gap-3 bg-white p-3.5 rounded-xl border border-gray-100">
                <div className="p-2 bg-indigo-50 rounded-lg text-indigo-600 shrink-0">
                  <Calendar className="w-4 h-4" />
                </div>
                <div className="min-w-0">
                  <span className="block text-[10px] font-bold text-gray-400 uppercase tracking-wider">เวลาสแกน / Scanned At</span>
                  <span className="text-xs font-bold text-gray-900 truncate block">{new Date(scannedResult.timestamp).toLocaleString('th-TH')}</span>
                </div>
              </div>
            </div>

            {/* Sub-grid of detailed logistics extraction */}
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
              {/* Order & Logistics Metadata */}
              <div className="bg-white rounded-xl border border-gray-100 p-4 space-y-3">
                <h5 className="font-bold text-xs text-gray-700 border-b border-gray-50 pb-2 flex items-center gap-1.5 text-indigo-600">
                  <ShoppingCart className="w-4 h-4 text-indigo-500" />
                  ข้อมูลขนส่งเพิ่มเติม (Logistics Metadata)
                </h5>
                <div className="space-y-2 text-xs">
                  <div className="flex justify-between">
                    <span className="text-gray-400 font-medium">บริษัทขนส่ง:</span>
                    <span className="font-bold text-gray-900 bg-slate-100 px-1.5 py-0.5 rounded border border-slate-200">{scannedResult.shippingProvider || 'ไม่ระบุ/LEX/SPX'}</span>
                  </div>
                  <div className="flex justify-between items-center">
                    <span className="text-gray-400 font-medium">หมายเลขพัสดุ (Tracking):</span>
                    <span className="font-black text-slate-800 font-mono select-all bg-slate-50 border border-slate-150 px-2 py-0.5 rounded text-[11px] leading-none">
                      {scannedResult.trackingNumber || 'ไม่ระบุ'}
                    </span>
                  </div>
                  <div className="flex justify-between">
                    <span className="text-gray-400 font-medium">รหัสเส้นทาง (Route Code):</span>
                    <span className="font-black text-indigo-600 font-mono text-[11px]">{scannedResult.routeCode || 'ไม่ระบุ'}</span>
                  </div>
                  <div className="flex justify-between">
                    <span className="text-gray-400 font-medium">วันที่สั่งซื้อบนป้าย:</span>
                    <span className="font-bold text-gray-900">{scannedResult.orderDate || 'ไม่ระบุ'}</span>
                  </div>
                  <div className="flex justify-between">
                    <span className="text-gray-400 font-medium">ช่องทางการชำระเงิน:</span>
                    <span className="font-bold text-emerald-600 bg-emerald-50 border border-emerald-100 px-1.5 py-0.5 rounded text-[10px] uppercase">{scannedResult.paymentMethod || 'ไม่ระบุ'}</span>
                  </div>
                </div>
              </div>

              {/* Sender & Receiver Address Details */}
              <div className="bg-white rounded-xl border border-gray-100 p-4 space-y-3">
                <h5 className="font-bold text-xs text-gray-700 border-b border-gray-50 pb-2 flex items-center gap-1.5 text-emerald-600">
                  <User className="w-4 h-4 text-emerald-500" />
                  ที่อยู่ผู้ส่งและผู้รับสินค้า (Addresses)
                </h5>
                <div className="space-y-3 text-xs">
                  <div className="bg-slate-50 p-2.5 rounded-lg border border-slate-100 space-y-1">
                    <span className="text-[9px] font-bold text-slate-400 uppercase tracking-wider block">ผู้ส่ง (Sender)</span>
                    <div className="font-bold text-slate-800">{scannedResult.senderName || 'ไม่ระบุชื่อร้านค้า'}</div>
                    {scannedResult.senderPhone && <div className="text-slate-500 text-[11px] font-mono">โทร: {scannedResult.senderPhone}</div>}
                    {scannedResult.senderAddress && <div className="text-slate-500 text-[11px] leading-relaxed mt-0.5">{scannedResult.senderAddress}</div>}
                  </div>

                  <div className="bg-slate-50 p-2.5 rounded-lg border border-slate-100 space-y-1">
                    <span className="text-[9px] font-bold text-slate-400 uppercase tracking-wider block">ผู้รับ (Receiver)</span>
                    <div className="font-bold text-slate-800">{scannedResult.customerName || 'ไม่ระบุชื่อผู้รับ'}</div>
                    {scannedResult.receiverPhone && <div className="text-slate-500 text-[11px] font-mono">โทร: {scannedResult.receiverPhone}</div>}
                    {scannedResult.receiverAddress && <div className="text-slate-500 text-[11px] leading-relaxed mt-0.5">{scannedResult.receiverAddress}</div>}
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* Items breakdown list */}
          <div className="p-6">
            <h4 className="text-xs font-bold text-gray-400 uppercase tracking-wider mb-3">รายการสินค้าที่พบบนเอกสาร (Extracted Products)</h4>
            
            <div className="border border-gray-100 rounded-xl overflow-hidden shadow-xs">
              <table className="w-full text-sm text-left">
                <thead className="bg-gray-50 text-gray-700 text-xs font-semibold">
                  <tr>
                    <th className="py-3 px-4">ชื่อสินค้า (Product Name)</th>
                    <th className="py-3 px-4 text-right" style={{ width: '130px' }}>ราคา/หน่วย (Price)</th>
                    <th className="py-3 px-4 text-center" style={{ width: '90px' }}>จำนวน (Qty)</th>
                    <th className="py-3 px-4 text-right" style={{ width: '140px' }}>จำนวนเงินรวม (Subtotal)</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-gray-100 text-gray-600">
                  {scannedResult.items.map((item, index) => (
                    <tr key={item.id || index} className="hover:bg-gray-50/40">
                      <td className="py-3 px-4 font-medium text-gray-900">{item.productName}</td>
                      <td className="py-3 px-4 text-right font-mono">{item.price.toLocaleString('th-TH', { minimumFractionDigits: 2 })} บาท</td>
                      <td className="py-3 px-4 text-center font-mono font-bold">{item.quantity}</td>
                      <td className="py-3 px-4 text-right font-mono font-bold text-gray-900">{item.amount.toLocaleString('th-TH', { minimumFractionDigits: 2 })} บาท</td>
                    </tr>
                  ))}
                  {scannedResult.items.length === 0 && (
                    <tr>
                      <td colSpan="4" className="py-8 text-center text-gray-400 font-semibold">ไม่พบรายการสินค้าที่แยกออกมา</td>
                    </tr>
                  )}
                </tbody>
                <tfoot className="bg-indigo-50/20 font-bold text-gray-900">
                  <tr>
                    <td colSpan="3" className="py-4 px-4 text-right text-xs uppercase tracking-wider text-gray-500">ยอดชำระเงินสุทธิทั้งสิ้น (Net Total Paid):</td>
                    <td className="py-4 px-4 text-right font-mono text-base text-rose-600">{scannedResult.totalAmount.toLocaleString('th-TH', { minimumFractionDigits: 2 })} บาท</td>
                  </tr>
                </tfoot>
              </table>
            </div>

            {/* Sync Summary Status */}
            <div className="mt-6 grid grid-cols-1 md:grid-cols-2 gap-4">
              <div className="border border-gray-100 rounded-xl p-4 flex items-start gap-3">
                <div className={`p-1.5 rounded-full ${
                  scannedResult.sheetsStatus === 'success' 
                    ? 'bg-emerald-50 text-emerald-600'
                    : scannedResult.sheetsStatus === 'not_configured'
                    ? 'bg-gray-50 text-gray-400'
                    : 'bg-rose-50 text-rose-600'
                }`}>
                  <CheckCircle2 className="w-5 h-5" />
                </div>
                <div>
                  <h5 className="text-xs font-bold text-gray-900">สถานะการนำเข้า Google Sheet</h5>
                  <p className="text-[11px] text-gray-500 mt-0.5">
                    {scannedResult.sheetsStatus === 'success' 
                      ? 'สำเร็จ: แถวข้อมูลถูกส่งไปเพิ่มในสเปรดชีตของคุณแล้ว'
                      : scannedResult.sheetsStatus === 'not_configured'
                      ? 'ไม่ได้เชื่อมต่อ: กรุณาตั้งค่า Webhook ในแท็บตั้งค่าระบบเพื่อซิงค์ข้อมูลเรียลไทม์'
                      : 'ล้มเหลว: ไม่สามารถส่งข้อมูลผ่าน Webhook ไปยัง Sheet ได้ โปรดตรวจเช็ก URL และเปิดสิทธิ์'}
                  </p>
                </div>
              </div>

              <div className="border border-gray-100 rounded-xl p-4 flex items-start gap-3">
                <div className={`p-1.5 rounded-full ${
                  scannedResult.emailStatus === 'success' 
                    ? 'bg-emerald-50 text-emerald-600'
                    : scannedResult.emailStatus === 'not_configured'
                    ? 'bg-gray-50 text-gray-400'
                    : 'bg-rose-50 text-rose-600'
                }`}>
                  <CheckCircle2 className="w-5 h-5" />
                </div>
                <div>
                  <h5 className="text-xs font-bold text-gray-900">สถานะแจ้งเตือนอีเมล</h5>
                  <p className="text-[11px] text-gray-500 mt-0.5">
                    {scannedResult.emailStatus === 'success' 
                      ? 'สำเร็จ: บันทึกรายงานสรุปส่งออกไปยังจดหมายพร้อมแจ้งเตือนแล้ว'
                      : scannedResult.emailStatus === 'not_configured'
                      ? 'ไม่ได้เปิดใช้งาน: การแจ้งเตือนทางอีเมลยังปิดอยู่ สามารถเปิดได้ในแท็บตั้งค่าระบบ'
                      : 'ล้มเหลว: ไม่สามารถส่งอีเมลออกผ่าน SMTP ได้ ตรวจสอบได้ในประวัติ outbox'}
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

window.OCRScanner = OCRScanner;