@extends('layouts.app')

@section('content')
<div class="container py-4">

    @if(session('success'))
        <div class="alert alert-success">
            {{ session('success') }}
            @if(session('patente_detectada'))
                <br>Patente: <strong>{{ session('patente_detectada') }}</strong>
            @endif
        </div>
    @endif

    <div class="card shadow-sm border-0">
        <div class="card-header bg-dark text-white">
            <h4 class="mb-0">Escáner de Patentes</h4>
        </div>

        <div class="card-body">

            <p class="text-muted">
                Alinea la patente dentro del recuadro verde.
            </p>

            <!-- CAMARA -->
            <div class="position-relative mb-3">
                <video id="video" autoplay playsinline class="w-100 rounded border" style="background:#000;"></video>

                <!-- RECTÁNGULO ALINEADO CON OCR -->
                <div style="
                    position:absolute;
                    left:15%;
                    top:40%;
                    width:70%;
                    height:18%;
                    border:3px solid #28a745;
                    border-radius:10px;
                    box-shadow: 0 0 0 9999px rgba(0,0,0,0.25);
                    pointer-events:none;">
                </div>
            </div>

            <canvas id="canvasOriginal" class="d-none"></canvas>
            <canvas id="canvasTrabajo" class="d-none"></canvas>

            <!-- BOTONES -->
            <div class="mb-3">
                <button class="btn btn-primary" id="btnIniciar">Abrir cámara</button>
                <button class="btn btn-success" id="btnCapturar">Escanear patente</button>
            </div>

            <div id="estado" class="alert alert-secondary d-none"></div>

            <!-- RESULTADOS -->
            <div class="row">
                <div class="col-md-4">
                    <label>OCR bruto</label>
                    <input type="text" id="texto_ocr" class="form-control" readonly>
                </div>

                <div class="col-md-4">
                    <label>Patente</label>
                    <input type="text" id="patente_detectada" class="form-control">
                </div>

                <div class="col-md-4">
                    <label>Válida</label>
                    <input type="text" id="patente_valida" class="form-control" readonly>
                </div>
            </div>

            <div class="mt-3">
                <img id="previewProcesado" class="img-fluid rounded border d-none">
            </div>

        </div>
    </div>
</div>

<script async src="https://docs.opencv.org/4.x/opencv.js" onload="cvReady=true;"></script>
<script src="https://cdn.jsdelivr.net/npm/tesseract.js@5/dist/tesseract.min.js"></script>

<script>
let cvReady = false;
let worker = null;

/* ================= ROI UNIFICADO ================= */
const ROI = {
    x: 0.15,
    y: 0.40,
    w: 0.70,
    h: 0.18
};

/* ================= ELEMENTOS ================= */
const video = document.getElementById('video');
const canvasOriginal = document.getElementById('canvasOriginal');
const canvasTrabajo = document.getElementById('canvasTrabajo');

const textoOcr = document.getElementById('texto_ocr');
const patenteInput = document.getElementById('patente_detectada');
const validaInput = document.getElementById('patente_valida');
const preview = document.getElementById('previewProcesado');

const estado = document.getElementById('estado');

function msg(t, tipo='secondary'){
    estado.className = 'alert alert-'+tipo;
    estado.innerText = t;
    estado.classList.remove('d-none');
}

/* ================= CAMARA ================= */
document.getElementById('btnIniciar').onclick = async () => {
    const stream = await navigator.mediaDevices.getUserMedia({
        video:{facingMode:'environment', width:1280, height:720}
    });
    video.srcObject = stream;
};

/* ================= OCR ================= */
async function getWorker(){
    if(worker) return worker;

    worker = await Tesseract.createWorker('eng');
    await worker.setParameters({
        tessedit_char_whitelist:'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789',
        tessedit_pageseg_mode:7
    });

    return worker;
}

/* ================= CAPTURA ================= */
function capturar(){
    canvasOriginal.width = video.videoWidth;
    canvasOriginal.height = video.videoHeight;
    canvasOriginal.getContext('2d').drawImage(video,0,0);
}

/* ================= RECORTE ================= */
function recortes(mat){
    const w = mat.cols;
    const h = mat.rows;

    const variaciones = [
        {dy:0},
        {dy:-0.04},
        {dy:0.04}
    ];

    return variaciones.map(v=>{
        return mat.roi(new cv.Rect(
            w*(ROI.x),
            h*(ROI.y + v.dy),
            w*(ROI.w),
            h*(ROI.h)
        ));
    });
}

/* ================= VARIANTES ================= */
function variantes(roi){
    let out=[];

    let gray=new cv.Mat();
    cv.cvtColor(roi,gray,cv.COLOR_RGBA2GRAY);
    out.push(gray);

    let thr=new cv.Mat();
    cv.threshold(gray,thr,0,255,cv.THRESH_BINARY+cv.THRESH_OTSU);
    out.push(thr);

    return out;
}

/* ================= VALIDACIÓN ================= */
function valida(p){
    return /^[A-Z]{4}[0-9]{2}$/.test(p) || /^[A-Z]{2}[0-9]{4}$/.test(p);
}

/* ================= LIMPIEZA ================= */
function clean(t){
    return t.toUpperCase().replace(/[^A-Z0-9]/g,'').slice(0,6);
}

/* ================= ESCANEO ================= */
document.getElementById('btnCapturar').onclick = async () => {

    if(!cvReady){
        msg('OpenCV cargando...', 'warning');
        return;
    }

    capturar();

    let src = cv.imread(canvasOriginal);
    let zonas = recortes(src);

    let mejor = '';
    let mejorScore = -1;

    for(const roi of zonas){

        for(const v of variantes(roi)){

            cv.imshow(canvasTrabajo,v);
            let img = canvasTrabajo.toDataURL();

            const w = await getWorker();
            const {data} = await w.recognize(img);

            let txt = clean(data.text);

            let score = txt.length;

            if(score > mejorScore){
                mejorScore = score;
                mejor = txt;
                preview.src = img;
                preview.classList.remove('d-none');
            }

            if(valida(txt)){
                mejor = txt;
                break;
            }

            v.delete();
        }

        roi.delete();
    }

    src.delete();

    textoOcr.value = mejor;
    patenteInput.value = mejor;
    validaInput.value = valida(mejor) ? 'Sí' : 'No';

    msg('Proceso completado', 'success');
};
</script>
@endsection