script.js

// Initialize the canvas
const canvas = new fabric.Canvas('canvas', {
    width: document.getElementById('workspace').clientWidth,
    height: document.getElementById('workspace').clientHeight - document.getElementById('top-menu').offsetHeight,
    backgroundColor: '#ffffff'
});

// --- Application State ---
let drawingMode = {
    active: false,
    type: null,
    startPoint: null,
    tempLine: null
};

// --- DOM Elements ---
const propertiesPanel = document.getElementById('properties-panel');
const exportBtn = document.getElementById('export-btn');

// --- Menu Bar Logic ---
const menuActions = {
    'new-project-btn': () => {
        if (confirm('Are you sure you want to start a new project? All unsaved changes will be lost.')) {
            canvas.clear();
        }
    },
    'save-project-btn': () => {
        const json = JSON.stringify(canvas.toJSON(['customType', 'volume', 'power', 'head', 'state', 'zone', 'voltage', 'meshSize', 'coverage', 'flowRate', 'zones']));
        const blob = new Blob([json], { type: 'application/json' });
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = 'irrigation-design.json';
        a.click();
        URL.revokeObjectURL(url);
    },
    'open-project-btn': () => {
        const input = document.createElement('input');
        input.type = 'file';
        input.accept = '.json';
        input.onchange = e => {
            const file = e.target.files[0];
            const reader = new FileReader();
            reader.onload = readerEvent => {
                const content = readerEvent.target.result;
                canvas.loadFromJSON(content, canvas.renderAll.bind(canvas));
            };
            reader.readAsText(file);
        };
        input.click();
    },
    'undo-btn': () => alert('Undo functionality is a planned feature!'),
    'redo-btn': () => alert('Redo functionality is a planned feature!'),
    'zoom-in-btn': () => canvas.setZoom(canvas.getZoom() * 1.1),
    'zoom-out-btn': () => canvas.setZoom(canvas.getZoom() / 1.1),
    'zoom-reset-btn': () => canvas.setZoom(1),
    'bom-btn': () => alert('Bill of Materials generation is a planned feature!'),
    'schematic-btn': () => alert('Schematic View generation is a planned feature!')
};

document.querySelectorAll('.dropdown-content a').forEach(item => {
    item.addEventListener('click', (event) => {
        event.preventDefault();
        const action = menuActions[item.id];
        if (action) {
            action();
        }
        closeAllDropdowns();
    });
});

const fileBtn = document.getElementById('file-btn');
const editBtn = document.getElementById('edit-btn');
const viewBtn = document.getElementById('view-btn');
const toolsBtn = document.getElementById('tools-btn');
function closeAllDropdowns() {
    document.querySelectorAll('.dropdown-content').forEach(menu => menu.classList.remove('show'));
}
fileBtn.addEventListener('click', (e) => { e.stopPropagation(); closeAllDropdowns(); document.getElementById('file-dropdown').classList.toggle('show'); });
editBtn.addEventListener('click', (e) => { e.stopPropagation(); closeAllDropdowns(); document.getElementById('edit-dropdown').classList.toggle('show'); });
viewBtn.addEventListener('click', (e) => { e.stopPropagation(); closeAllDropdowns(); document.getElementById('view-dropdown').classList.toggle('show'); });
toolsBtn.addEventListener('click', (e) => { e.stopPropagation(); closeAllDropdowns(); document.getElementById('tools-dropdown').classList.toggle('show'); });
window.onclick = () => closeAllDropdowns();

// --- Drawing Mode for Pipes/Wires ---
function enterDrawingMode(type, buttonEl) {
    exitDrawingMode(); // Exit any previous mode
    drawingMode.active = true;
    drawingMode.type = type;
    canvas.defaultCursor = 'crosshair';
    canvas.selection = false;
    buttonEl.classList.add('active');
}

function exitDrawingMode() {
    document.querySelectorAll('.component-btn.active').forEach(b => b.classList.remove('active'));
    drawingMode.active = false;
    drawingMode.type = null;
    drawingMode.startPoint = null;
    if (drawingMode.tempLine) {
        canvas.remove(drawingMode.tempLine);
        drawingMode.tempLine = null;
    }
    canvas.defaultCursor = 'default';
    canvas.selection = true;
    canvas.renderAll();
}

canvas.on('mouse:down', (o) => {
    if (!drawingMode.active) return;
    const pointer = canvas.getPointer(o.e);
    if (!drawingMode.startPoint) {
        drawingMode.startPoint = { x: pointer.x, y: pointer.y };
    } else {
        const endPoint = { x: pointer.x, y: pointer.y };
        const line = new fabric.Line([drawingMode.startPoint.x, drawingMode.startPoint.y, endPoint.x, endPoint.y], {
            stroke: drawingMode.type.color,
            strokeWidth: drawingMode.type.width,
            customType: drawingMode.type.name
        });
        canvas.add(line);
        exitDrawingMode();
    }
});

// --- Component Creation Logic ---
const components = {
    'add-tank': () => new fabric.Circle({ radius: 50, fill: '#007bff', customType: 'Tank', volume: 5000 }),
    'add-pump': () => new fabric.Rect({ width: 80, height: 50, fill: '#6c757d', customType: 'Pump', power: 0.75, head: 30 }),
    'add-manual-valve': () => new fabric.Circle({ radius: 15, fill: '#28a745', customType: 'Manual Valve', state: 'Open' }),
    'add-solenoid-valve': () => new fabric.Group([new fabric.Circle({ radius: 15, fill: '#20c997' }), new fabric.Rect({ width: 20, height: 20, fill: '#343a40', originX: 'center', originY: 'center' })], { customType: 'Solenoid Valve', zone: 1, voltage: 24 }),
    'add-filter': () => new fabric.Rect({ width: 40, height: 60, fill: '#ffc107', customType: 'Filter', meshSize: 120 }),
    'add-tap': () => new fabric.Triangle({ width: 30, height: 30, fill: '#17a2b8', customType: 'Tap' }),
    'add-sprinkler': () => new fabric.IText('💧', { fontSize: 30, customType: 'Sprinkler', coverage: 5 }),
    'add-emitter': () => new fabric.IText('💧', { fontSize: 15, customType: 'Emitter', flowRate: 2 }),
    'add-controller': () => new fabric.Rect({ width: 100, height: 120, fill: '#343a40', customType: 'Controller', zones: 4 }),
};

document.querySelectorAll('.component-btn').forEach(btn => {
    if (components[btn.id]) {
        btn.addEventListener('click', () => {
            exitDrawingMode();
            const component = components[btn.id]();
            component.set({ left: 150, top: 150 });
            canvas.add(component);
        });
    }
});

// Dynamic Components (Pipes/Wires)
const dynamicComponentTypes = {
    'add-hdpe-pipe': { name: 'HDPE Pipe', color: 'darkblue', width: 5 },
    'add-ldpe-pipe': { name: 'LDPE Pipe', color: 'lightblue', width: 3 },
    'add-drip-pipe': { name: 'Drip Pipe', color: 'brown', width: 3 },
    'add-high-wire': { name: 'High Current Wire', color: 'red', width: 2 },
    'add-low-wire': { name: 'Low Current Wire', color: 'orange', width: 2 }
};

Object.keys(dynamicComponentTypes).forEach(id => {
    const btn = document.getElementById(id);
    if (btn) {
        btn.addEventListener('click', () => enterDrawingMode(dynamicComponentTypes[id], btn));
    }
});

// --- Inspector Panel Logic ---
function updateInspectorPanel(obj) {
    if (!obj) {
        propertiesPanel.innerHTML = `<p>Select an object to see its properties.</p>`;
        return;
    }

    let html = `<h4>${obj.customType || 'Object'} Properties</h4>`;
    if (obj.type !== 'group') {
         html += `<label for="color">Color:</label><input type="color" id="color" value="${obj.fill || '#000000'}">`;
    }

    const props = {
        'Tank': { volume: 'number' }, 'Pump': { power: 'number', head: 'number' }, 'Manual Valve': { state: 'text' },
        'Solenoid Valve': { zone: 'number', voltage: 'number' }, 'Filter': { meshSize: 'number' },
        'Sprinkler': { coverage: 'number' }, 'Emitter': { flowRate: 'number' }, 'Controller': { zones: 'number' }
    };

    if (props[obj.customType]) {
        Object.keys(props[obj.customType]).forEach(prop => {
            const propType = props[obj.customType][prop];
            html += `<label for="${prop}">${prop.charAt(0).toUpperCase() + prop.slice(1)}:</label>
                     <input type="${propType}" id="${prop}" value="${obj[prop] || ''}">`;
        });
    }
    propertiesPanel.innerHTML = html;

    // Add event listeners for property changes
    propertiesPanel.querySelectorAll('input').forEach(input => {
        input.addEventListener('change', (e) => {
            const activeObject = canvas.getActiveObject();
            if (activeObject) {
                if (e.target.id === 'color') {
                    activeObject.set('fill', e.target.value);
                } else {
                    activeObject.set(e.target.id, e.target.type === 'number' ? parseFloat(e.target.value) : e.target.value);
                }
                canvas.renderAll();
            }
        });
    });
}
canvas.on('selection:created', (e) => updateInspectorPanel(e.target));
canvas.on('selection:updated', (e) => updateInspectorPanel(e.target));
canvas.on('selection:cleared', () => updateInspectorPanel(null));

// --- Export & Resize Logic ---
exportBtn.addEventListener('click', () => {
    const dataURL = canvas.toDataURL({ format: 'png', quality: 1 });
    const link = document.createElement('a');
    link.href = dataURL;
    link.download = 'irrigation-design.png';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
});
window.addEventListener('resize', () => {
    canvas.setWidth(document.getElementById('workspace').clientWidth);
    canvas.setHeight(document.getElementById('workspace').clientHeight - document.getElementById('top-menu').offsetHeight);
    canvas.renderAll();
});