// Script pour la signature sur tablette
class SignaturePad {
    constructor(canvas, options = {}) {
        this.canvas = canvas;
        this.ctx = canvas.getContext('2d');
        this.drawing = false;
        this.lastX = 0;
        this.lastY = 0;
        
        // Options
        this.lineWidth = options.lineWidth || 2;
        this.lineColor = options.lineColor || '#000000';
        
        // Événements
        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));
        
        // Support tactile
        this.canvas.addEventListener('touchstart', this.startDrawingTouch.bind(this));
        this.canvas.addEventListener('touchmove', this.drawTouch.bind(this));
        this.canvas.addEventListener('touchend', this.stopDrawing.bind(this));
        
        // Initialiser le style
        this.ctx.lineWidth = this.lineWidth;
        this.ctx.lineCap = 'round';
        this.ctx.lineJoin = 'round';
        this.ctx.strokeStyle = this.lineColor;
    }
    
    startDrawing(e) {
        this.drawing = true;
        const pos = this.getMousePos(e);
        this.lastX = pos.x;
        this.lastY = pos.y;
        this.ctx.beginPath();
        this.ctx.moveTo(this.lastX, this.lastY);
    }
    
    startDrawingTouch(e) {
        e.preventDefault();
        this.drawing = true;
        const pos = this.getTouchPos(e);
        this.lastX = pos.x;
        this.lastY = pos.y;
        this.ctx.beginPath();
        this.ctx.moveTo(this.lastX, this.lastY);
    }
    
    draw(e) {
        if (!this.drawing) return;
        e.preventDefault();
        
        const pos = this.getMousePos(e);
        const x = pos.x;
        const y = pos.y;
        
        this.ctx.lineTo(x, y);
        this.ctx.stroke();
        
        this.lastX = x;
        this.lastY = y;
    }
    
    drawTouch(e) {
        if (!this.drawing) return;
        e.preventDefault();
        
        const pos = this.getTouchPos(e);
        const x = pos.x;
        const y = pos.y;
        
        this.ctx.lineTo(x, y);
        this.ctx.stroke();
        
        this.lastX = x;
        this.lastY = y;
    }
    
    stopDrawing() {
        this.drawing = false;
    }
    
    getMousePos(e) {
        const rect = this.canvas.getBoundingClientRect();
        return {
            x: e.clientX - rect.left,
            y: e.clientY - rect.top
        };
    }
    
    getTouchPos(e) {
        const rect = this.canvas.getBoundingClientRect();
        const touch = e.touches[0];
        return {
            x: touch.clientX - rect.left,
            y: touch.clientY - rect.top
        };
    }
    
    clear() {
        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
    }
    
    toDataURL() {
        return this.canvas.toDataURL();
    }
}

// Initialisation
document.addEventListener('DOMContentLoaded', function() {
    const canvas = document.getElementById('signature-canvas');
    if (canvas) {
        const signaturePad = new SignaturePad(canvas);
        
        document.getElementById('clear-signature').addEventListener('click', function() {
            signaturePad.clear();
        });
        
        document.getElementById('save-signature').addEventListener('click', function() {
            const dataURL = signaturePad.toDataURL();
            document.getElementById('id_signature_data').value = dataURL;
            document.getElementById('signature-form').submit();
        });
    }
});