@props(['onResult' => 'onScanKtpResult'])

{{--
    Komponen Scan KTP - ambil foto KTP lewat webcam, baca NIK & Nama otomatis
    pakai OCR (Tesseract.js, jalan di browser, tidak butuh apapun di server).

    Cara pakai: sertakan komponen ini, lalu definisikan function JS dengan nama
    sesuai prop `onResult` (default: onScanKtpResult) yang menerima 1 parameter
    object {nik, nama, rawText} - dipanggil setiap kali OCR selesai membaca.

    PENTING: hasil OCR TIDAK PERNAH 100% akurat. Selalu perlakukan hasilnya
    sebagai draft yang wajib dikonfirmasi/dikoreksi pengguna, jangan auto-submit.
--}}

<div x-data="scanKtp()" x-init="init()" class="border border-slate-200 dark:border-slate-700 rounded-2xl p-4 bg-slate-50 dark:bg-slate-800">

    <div class="flex items-center justify-between mb-3">
        <h3 class="font-semibold text-sm text-slate-700 dark:text-slate-200 flex items-center gap-2">
            <x-icon name="camera" class="w-4 h-4" /> Scan KTP
        </h3>
        <span x-show="status" x-text="status" class="text-xs text-slate-400"></span>
    </div>

    <div class="relative rounded-xl overflow-hidden bg-black aspect-[16/10]" x-show="!capturedImage">
        <video x-ref="video" autoplay playsinline muted class="w-full h-full object-cover"></video>
        <div class="absolute inset-4 border-2 border-dashed border-white/70 rounded-lg pointer-events-none"></div>
    </div>

    <p x-show="!capturedImage" class="mt-2 text-xs text-slate-400">
        Tips: pastikan pencahayaan terang & merata (hindari silau/pantulan), posisikan KTP rata (tidak miring) hingga <strong>mengisi penuh</strong> kotak putus-putus, dan pastikan kamera fokus sebelum ambil gambar.
    </p>

    <img x-show="capturedImage" :src="capturedImage" class="w-full rounded-xl" x-cloak>

    <canvas x-ref="canvas" class="hidden"></canvas>

    <div class="mt-3 flex gap-2">
        <template x-if="!capturedImage">
            <x-button type="button" @click="capture()" x-bind:disabled="!cameraReady" class="w-full">
                <x-icon name="camera" class="w-4 h-4" /> Ambil Gambar KTP
            </x-button>
        </template>
        <template x-if="capturedImage && !processing">
            <x-button type="button" variant="secondary" @click="retake()" class="w-full">Ambil Ulang</x-button>
        </template>
    </div>

    <div x-show="processing" class="mt-3 text-sm text-slate-500 flex items-center gap-2">
        <svg class="animate-spin w-4 h-4" viewBox="0 0 24 24" fill="none"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8z"></path></svg>
        Membaca teks KTP... (<span x-text="progress"></span>%)
    </div>

    <p x-show="cameraError" x-text="cameraError" class="mt-2 text-xs text-red-500"></p>
    <p class="mt-2 text-xs text-slate-400">Hasil bacaan otomatis wajib dicek/dikoreksi sebelum disimpan - OCR tidak selalu 100% akurat.</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/tesseract.js@5/dist/tesseract.min.js"></script>
<script>
function scanKtp() {
    return {
        stream: null,
        cameraReady: false,
        cameraError: '',
        capturedImage: null,
        processing: false,
        progress: 0,
        status: '',

        async init() {
            const isSecure = window.isSecureContext;
            if (!isSecure) {
                this.cameraError = 'Halaman ini dibuka lewat "'+window.location.protocol+'//'+window.location.hostname+'" yang dianggap TIDAK AMAN oleh browser untuk akses kamera. Browser hanya mengizinkan kamera lewat HTTPS asli, atau persis "localhost"/"127.0.0.1". Aktifkan HTTPS di server ini, atau (khusus testing lokal) tambahkan pengecualian lewat chrome://flags/#unsafely-treat-insecure-origin-as-secure.';
                return;
            }
            try {
                this.stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment', width: { ideal: 1920 }, height: { ideal: 1080 } } });
                this.$refs.video.srcObject = this.stream;
                this.cameraReady = true;
            } catch (e) {
                if (e.name === 'NotAllowedError') {
                    this.cameraError = 'Izin kamera ditolak. Klik ikon gembok/kamera di address bar browser, lalu izinkan akses kamera untuk situs ini, kemudian muat ulang halaman.';
                } else if (e.name === 'NotFoundError') {
                    this.cameraError = 'Tidak ada kamera yang terdeteksi di perangkat ini. Pastikan webcam terpasang dan tidak sedang dipakai aplikasi lain.';
                } else if (e.name === 'NotReadableError') {
                    this.cameraError = 'Kamera sedang dipakai aplikasi lain (mis. Zoom/Teams/aplikasi kamera bawaan). Tutup aplikasi itu dulu, lalu muat ulang halaman.';
                } else {
                    this.cameraError = 'Tidak bisa mengakses kamera (' + e.name + '). Pastikan browser mendapat izin kamera dan halaman dibuka lewat HTTPS atau localhost.';
                }
            }
        },

        capture() {
            const video = this.$refs.video;
            const canvas = this.$refs.canvas;
            canvas.width = video.videoWidth;
            canvas.height = video.videoHeight;
            canvas.getContext('2d').drawImage(video, 0, 0);
            this.capturedImage = canvas.toDataURL('image/jpeg', 0.92);
            this.runOcr(canvas);
        },

        retake() {
            this.capturedImage = null;
            this.status = '';
        },

        /**
         * Ubah ke grayscale + regangkan kontras SAJA (tanpa threshold hitam-putih
         * kaku). Threshold tunggal/global gampang gagal kalau pencahayaan tidak
         * rata di seluruh foto (ada bayangan/silau sebagian) - lebih aman
         * membiarkan Tesseract memakai thresholding adaptifnya sendiri yang
         * sudah cukup baik menangani variasi pencahayaan semacam itu.
         */
        preprocessImage(sourceCanvas) {
            const w = sourceCanvas.width, h = sourceCanvas.height;
            const out = document.createElement('canvas');
            out.width = w; out.height = h;
            const ctx = out.getContext('2d');
            ctx.drawImage(sourceCanvas, 0, 0);
            const imgData = ctx.getImageData(0, 0, w, h);
            const d = imgData.data;

            // Grayscale
            for (let i = 0; i < d.length; i += 4) {
                const gray = 0.299 * d[i] + 0.587 * d[i + 1] + 0.114 * d[i + 2];
                d[i] = d[i + 1] = d[i + 2] = gray;
            }

            // Regangkan kontras berdasarkan titik tergelap/terterang di gambar
            let min = 255, max = 0;
            for (let i = 0; i < d.length; i += 4) {
                if (d[i] < min) min = d[i];
                if (d[i] > max) max = d[i];
            }
            const range = Math.max(max - min, 1);
            for (let i = 0; i < d.length; i += 4) {
                const stretched = Math.min(255, Math.max(0, ((d[i] - min) / range) * 255));
                d[i] = d[i + 1] = d[i + 2] = stretched;
            }

            ctx.putImageData(imgData, 0, 0);
            return out;
        },

        /** Ambil kandidat NIK (16 digit) terbaik dari sebuah teks hasil OCR. */
        extractNik(text) {
            const digitRuns = text.match(/\d{6,}/g) || [];
            const exact16 = digitRuns.find(d => d.length === 16);
            if (exact16) return exact16;
            const longest = digitRuns.sort((a, b) => b.length - a.length)[0];
            if (longest && longest.length >= 14 && longest.length <= 18) {
                return longest.slice(0, 16);
            }
            return '';
        },

        async runOcr(canvas) {
            this.processing = true;
            this.status = 'Menyiapkan gambar...';
            const processed = this.preprocessImage(canvas);

            let worker = null;
            try {
                worker = await Tesseract.createWorker('eng', 1, {
                    logger: (m) => {
                        if (m.status === 'recognizing text') {
                            this.progress = Math.round(m.progress * 100);
                        }
                    },
                });

                // Coba baca NIK (mode angka saja) dari DUA versi gambar - asli
                // dan yang sudah diproses - lalu pakai mana saja yang hasilnya
                // paling meyakinkan (persis 16 digit). Ini jaga-jaga karena
                // pra-pemrosesan tidak selalu membantu di semua kondisi cahaya.
                this.status = 'Membaca NIK...';
                await worker.setParameters({ tessedit_char_whitelist: '0123456789' });
                const nikFromProcessed = this.extractNik((await worker.recognize(processed)).data.text || '');
                let nik = nikFromProcessed;
                if (nik.length !== 16) {
                    const nikFromRaw = this.extractNik((await worker.recognize(canvas)).data.text || '');
                    if (nikFromRaw.length === 16 || nikFromRaw.length > nik.length) {
                        nik = nikFromRaw;
                    }
                }

                // Baca teks biasa (huruf+angka) untuk ambil Nama.
                this.status = 'Membaca nama...';
                await worker.setParameters({ tessedit_char_whitelist: '' });
                const textResult = await worker.recognize(processed);

                await worker.terminate();
                worker = null;

                const parsed = this.parseKtpText(nik, textResult.data.text || '');
                this.status = 'Selesai';
                const callback = window[@js($onResult)];
                if (typeof callback === 'function') {
                    callback(parsed);
                }
            } catch (e) {
                this.status = '';
                this.cameraError = 'Gagal membaca gambar. Coba ambil ulang dengan pencahayaan lebih terang dan KTP mengisi penuh area bingkai.';
                if (worker) { await worker.terminate(); }
            } finally {
                this.processing = false;
            }
        },

        parseKtpText(nik, fullText) {
            let nama = '';
            const namaMatch = fullText.match(/Nama\s*[:\-]?\s*([A-Za-z\s'.]{3,40})/i);
            if (namaMatch) {
                nama = namaMatch[1].trim().replace(/\s{2,}/g, ' ');
            }

            return { nik: nik, nama: nama, rawText: fullText };
        },

        destroy() {
            if (this.stream) {
                this.stream.getTracks().forEach(t => t.stop());
            }
        },
    };
}
</script>