/**
 * Fusion Authorizer Portal - Signature Pad
 * Touch-enabled digital signature capture
 */

odoo.define('fusion_authorizer_portal.signature_pad', function (require) {
    'use strict';
    
    var publicWidget = require('web.public.widget');
    var ajax = require('web.ajax');
    
    // Signature Pad Class
    var SignaturePad = function (canvas, options) {
        this.canvas = canvas;
        this.ctx = canvas.getContext('2d');
        this.options = Object.assign({
            strokeColor: '#000000',
            strokeWidth: 2,
            backgroundColor: '#ffffff'
        }, options || {});
        
        this.isDrawing = false;
        this.lastX = 0;
        this.lastY = 0;
        this.points = [];
        
        this._initialize();
    };
    
    SignaturePad.prototype = {
        _initialize: function () {
            var self = this;
            
            // Set canvas size
            this._resizeCanvas();
            
            // Set drawing style
            this.ctx.strokeStyle = this.options.strokeColor;
            this.ctx.lineWidth = this.options.strokeWidth;
            this.ctx.lineCap = 'round';
            this.ctx.lineJoin = 'round';
            
            // Clear with background color
            this.clear();
            
            // Event listeners
            this.canvas.addEventListener('mousedown', this._startDrawing.bind(this));
            this.canvas.addEventListener('mousemove', this._draw.bind(this));
            this.canvas.addEventListener('mouseup', this._stopDrawing.bind(this));
            this.canvas.addEventListener('mouseout', this._stopDrawing.bind(this));
            
            // Touch events
            this.canvas.addEventListener('touchstart', this._startDrawing.bind(this), { passive: false });
            this.canvas.addEventListener('touchmove', this._draw.bind(this), { passive: false });
            this.canvas.addEventListener('touchend', this._stopDrawing.bind(this), { passive: false });
            this.canvas.addEventListener('touchcancel', this._stopDrawing.bind(this), { passive: false });
            
            // Resize handler
            window.addEventListener('resize', this._resizeCanvas.bind(this));
        },
        
        _resizeCanvas: function () {
            var rect = this.canvas.getBoundingClientRect();
            var ratio = window.devicePixelRatio || 1;
            
            this.canvas.width = rect.width * ratio;
            this.canvas.height = rect.height * ratio;
            
            this.ctx.scale(ratio, ratio);
            this.canvas.style.width = rect.width + 'px';
            this.canvas.style.height = rect.height + 'px';
            
            // Restore drawing style after resize
            this.ctx.strokeStyle = this.options.strokeColor;
            this.ctx.lineWidth = this.options.strokeWidth;
            this.ctx.lineCap = 'round';
            this.ctx.lineJoin = 'round';
        },
        
        _getPos: function (e) {
            var rect = this.canvas.getBoundingClientRect();
            var x, y;
            
            if (e.touches && e.touches.length > 0) {
                x = e.touches[0].clientX - rect.left;
                y = e.touches[0].clientY - rect.top;
            } else {
                x = e.clientX - rect.left;
                y = e.clientY - rect.top;
            }
            
            return { x: x, y: y };
        },
        
        _startDrawing: function (e) {
            e.preventDefault();
            this.isDrawing = true;
            var pos = this._getPos(e);
            this.lastX = pos.x;
            this.lastY = pos.y;
            this.points.push({ x: pos.x, y: pos.y, start: true });
        },
        
        _draw: function (e) {
            e.preventDefault();
            if (!this.isDrawing) return;
            
            var pos = this._getPos(e);
            
            this.ctx.beginPath();
            this.ctx.moveTo(this.lastX, this.lastY);
            this.ctx.lineTo(pos.x, pos.y);
            this.ctx.stroke();
            
            this.lastX = pos.x;
            this.lastY = pos.y;
            this.points.push({ x: pos.x, y: pos.y });
        },
        
        _stopDrawing: function (e) {
            e.preventDefault();
            this.isDrawing = false;
        },
        
        clear: function () {
            this.ctx.fillStyle = this.options.backgroundColor;
            this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
            this.points = [];
        },
        
        isEmpty: function () {
            return this.points.length === 0;
        },
        
        toDataURL: function (type, quality) {
            return this.canvas.toDataURL(type || 'image/png', quality || 1.0);
        }
    };
    
    // Make SignaturePad available globally for inline scripts
    window.SignaturePad = SignaturePad;
    
    // Widget for signature pads in portal
    publicWidget.registry.SignaturePadWidget = publicWidget.Widget.extend({
        selector: '.signature-pad-container',
        
        start: function () {
            this._super.apply(this, arguments);
            
            var canvas = this.el.querySelector('canvas');
            if (canvas) {
                this.signaturePad = new SignaturePad(canvas);
            }
            
            return Promise.resolve();
        },
        
        getSignaturePad: function () {
            return this.signaturePad;
        }
    });
    
    return {
        SignaturePad: SignaturePad,
        Widget: publicWidget.registry.SignaturePadWidget
    };
});
