<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gokulam Canvas Beta</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        body { font-family: 'Inter', sans-serif; background-color: #020617; overflow: hidden; color: #e2e8f0; }
        #canvas-container { position: relative; width: 100%; height: calc(100vh - 120px); cursor: crosshair; }
        canvas { background-color: #0f172a; }
        .tool-btn { transition: all 0.2s; position: relative; }
        .tool-btn.active { background-color: #3b82f6; color: white; border-color: #2563eb; z-index: 10; box-shadow: 0 0 15px rgba(59, 130, 246, 0.4); }
        .floating-panel { backdrop-filter: blur(16px); background: rgba(15, 23, 42, 0.85); border: 1px solid rgba(51, 65, 85, 0.5); }
        .atom-btn { font-weight: 800; padding: 4px; border-radius: 8px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border: 1px solid transparent; transition: all 0.2s; }
        .atom-btn:hover { border-color: #475569; background: rgba(30, 41, 59, 0.5); }
        
        /* Custom Scrollbar for Sidebar */
        aside::-webkit-scrollbar { width: 4px; }
        aside::-webkit-scrollbar-track { background: transparent; }
        aside::-webkit-scrollbar-thumb { background: #334155; border-radius: 10px; }
    </style>
</head>
<body>

<div class="h-screen flex flex-col">
    <!-- Header -->
    <header class="bg-slate-950 text-white p-4 flex justify-between items-center shrink-0 border-b border-slate-800 shadow-2xl">
        <div class="flex items-center gap-3">
            <div class="bg-blue-600 p-2 rounded-lg shadow-[0_0_20px_rgba(37,99,235,0.3)]">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
            </div>
            <div>
                <h1 class="text-xl font-bold leading-none tracking-tight">Gokulam Canvas <span class="text-blue-500 text-xs font-mono uppercase ml-1">v1.2 Beta</span></h1>
                <p class="text-[10px] text-slate-500 font-medium uppercase tracking-widest mt-1">Structural Intelligence Laboratory</p>
            </div>
        </div>
        <div class="flex gap-2">
            <button onclick="clearCanvas()" class="px-4 py-2 bg-slate-900 hover:bg-red-900/40 hover:text-red-400 hover:border-red-900 rounded-lg text-xs font-bold transition-all border border-slate-800 text-slate-400">PURGE CANVAS</button>
            <button onclick="exportSMILES()" class="px-4 py-2 bg-blue-600 hover:bg-blue-500 rounded-lg text-xs font-bold transition-all shadow-lg text-white">CALC SMILES</button>
        </div>
    </header>

    <div class="flex flex-1 overflow-hidden">
        <!-- Dark Sidebar -->
        <aside class="w-24 bg-slate-950 border-r border-slate-800 flex flex-col items-center py-6 gap-6 overflow-y-auto">
            <div class="flex flex-col gap-2 items-center">
                <span class="text-[9px] font-black text-slate-600 uppercase tracking-tighter">Nav</span>
                <button id="tool-select" onclick="setTool('select')" class="tool-btn w-12 h-12 flex items-center justify-center rounded-xl bg-slate-900 border border-slate-800 shadow-sm text-slate-400 active" title="Select/Move">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M3 3l7.07 16.97 2.51-7.39 7.39-2.51L3 3z"/><path d="M13 13l6 6"/></svg>
                </button>
                <button id="tool-eraser" onclick="setTool('eraser')" class="tool-btn w-12 h-12 flex items-center justify-center rounded-xl bg-slate-900 border border-slate-800 shadow-sm text-slate-400" title="Eraser">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 20H7L3 16C2 15 2 13 3 12L13 2L22 11L20 20Z"/><path d="M17 17L7 7"/></svg>
                </button>
            </div>

            <div class="flex flex-col gap-2 items-center">
                <span class="text-[9px] font-black text-slate-600 uppercase tracking-tighter">Bonds</span>
                <button id="tool-bond" onclick="setTool('bond')" class="tool-btn w-12 h-12 flex items-center justify-center rounded-xl bg-slate-900 border border-slate-800 shadow-sm text-slate-400" title="Single/Double Bond">
                    <line x1="6" y1="18" x2="18" y2="6" stroke="currentColor" stroke-width="3" />
                </button>
            </div>

            <div class="flex flex-col gap-2 items-center">
                <span class="text-[9px] font-black text-slate-600 uppercase tracking-tighter">Rings</span>
                <div class="grid grid-cols-2 gap-1 px-2">
                    <button id="tool-ring3" onclick="setTool('ring3')" class="tool-btn w-10 h-10 flex items-center justify-center rounded-lg bg-slate-900 border border-slate-800 text-xs font-bold text-slate-400" title="3-Membered">3</button>
                    <button id="tool-ring4" onclick="setTool('ring4')" class="tool-btn w-10 h-10 flex items-center justify-center rounded-lg bg-slate-900 border border-slate-800 text-xs font-bold text-slate-400" title="4-Membered">4</button>
                    <button id="tool-ring5" onclick="setTool('ring5')" class="tool-btn w-10 h-10 flex items-center justify-center rounded-lg bg-slate-900 border border-slate-800 text-xs font-bold text-slate-400" title="5-Membered">5</button>
                    <button id="tool-ring6" onclick="setTool('ring6')" class="tool-btn w-10 h-10 flex items-center justify-center rounded-lg bg-slate-900 border border-slate-800 text-xs font-bold text-slate-400" title="6-Membered">6</button>
                </div>
            </div>

            <div class="flex flex-col gap-2 items-center mt-auto pb-4">
                <span class="text-[9px] font-black text-slate-600 uppercase tracking-tighter">Elements</span>
                <button onclick="setAtom('C')" class="atom-btn text-slate-300">C</button>
                <button onclick="setAtom('N')" class="atom-btn text-blue-400">N</button>
                <button onclick="setAtom('O')" class="atom-btn text-red-400">O</button>
                <button onclick="setAtom('F')" class="atom-btn text-emerald-400">F</button>
                <button onclick="setAtom('P')" class="atom-btn text-orange-400">P</button>
                <button onclick="setAtom('S')" class="atom-btn text-yellow-400">S</button>
                <button onclick="setAtom('Cl')" class="atom-btn text-green-400 text-sm">Cl</button>
            </div>
        </aside>

        <!-- Main Canvas -->
        <main id="canvas-container">
            <canvas id="chemCanvas"></canvas>
            
            <!-- Contextual Dashboard (Dark Theme) -->
            <div class="absolute top-6 left-6 pointer-events-none">
                <div class="floating-panel p-4 rounded-xl shadow-2xl pointer-events-auto">
                    <div class="flex items-center gap-3">
                        <div id="atom-indicator" class="w-8 h-8 rounded-full bg-slate-200 flex items-center justify-center text-slate-950 font-bold text-xs shadow-[0_0_15px_rgba(255,255,255,0.2)]">C</div>
                        <div>
                            <p class="text-[10px] font-bold text-slate-500 uppercase leading-none tracking-wider">Active Element</p>
                            <p id="mode-display" class="text-sm font-bold text-slate-200">Selection Mode</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="absolute bottom-6 left-6 right-6 flex justify-between items-end pointer-events-none">
                <div class="floating-panel p-5 rounded-2xl shadow-2xl pointer-events-auto w-full max-w-lg">
                    <div class="flex justify-between items-center mb-3">
                        <h3 class="font-bold text-slate-400 text-[10px] uppercase tracking-[0.2em]">SAR Identity Engine</h3>
                        <div class="flex gap-4 text-[10px] font-black">
                            <span class="text-blue-400">ATOMS: <span id="atom-count">0</span></span>
                            <span class="text-indigo-400">BONDS: <span id="bond-count">0</span></span>
                        </div>
                    </div>
                    <div id="smiles-output" class="font-mono text-sm bg-slate-950/80 text-blue-400 p-4 rounded-xl border border-slate-800/50 break-all min-h-[56px] flex items-center shadow-inner">
                        <span class="opacity-50 mr-2 text-slate-600 font-bold">&gt;</span> READY_STATE_OK
                    </div>
                </div>
            </div>
        </main>
    </div>
</div>

<!-- Modal (Dark Theme) -->
<div id="modal" class="fixed inset-0 bg-slate-950/80 hidden items-center justify-center z-50 backdrop-blur-md p-4">
    <div class="bg-slate-900 rounded-3xl p-8 max-w-sm w-full shadow-[0_0_50px_rgba(0,0,0,0.5)] border border-slate-800">
        <div class="w-12 h-12 bg-blue-900/30 rounded-full flex items-center justify-center mb-5">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#60a5fa" stroke-width="2.5"><path d="M12 16V12M12 8H12.01M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z" stroke-linecap="round" stroke-linejoin="round"/></svg>
        </div>
        <h2 id="modal-title" class="text-xl font-bold text-slate-100 mb-2 tracking-tight">System Message</h2>
        <p id="modal-body" class="text-slate-400 text-sm leading-relaxed mb-8"></p>
        <button onclick="closeModal()" class="w-full py-4 bg-blue-600 text-white rounded-2xl font-bold hover:bg-blue-500 transition-all shadow-lg active:scale-95">ACKNOWLEDGE</button>
    </div>
</div>

<script>
    const canvas = document.getElementById('chemCanvas');
    const ctx = canvas.getContext('2d');
    const container = document.getElementById('canvas-container');
    
    let state = {
        atoms: [],
        bonds: [],
        currentTool: 'select',
        selectedAtom: null,
        dragging: false,
        dragStart: { x: 0, y: 0 },
        tempBond: null,
        hoveredAtom: null,
        hoveredBond: null,
        currentAtomType: 'C'
    };

    const BOND_LENGTH = 55;

    function resizeCanvas() {
        canvas.width = container.clientWidth;
        canvas.height = container.clientHeight;
        render();
    }

    window.addEventListener('resize', resizeCanvas);
    window.onload = resizeCanvas;

    function setTool(tool) {
        state.currentTool = tool;
        document.querySelectorAll('.tool-btn').forEach(b => b.classList.remove('active'));
        const btn = document.getElementById(`tool-${tool}`);
        if(btn) btn.classList.add('active');
        
        const displays = {
            'select': 'Selection Mode',
            'eraser': 'Eraser Active',
            'bond': 'Bonding Tool',
            'ring3': 'Place Cyclopropane',
            'ring4': 'Place Cyclobutane',
            'ring5': 'Place Cyclopentane',
            'ring6': 'Place Cyclohexane'
        };
        document.getElementById('mode-display').innerText = displays[tool] || tool;
    }

    function setAtom(type) {
        state.currentAtomType = type;
        const indicator = document.getElementById('atom-indicator');
        indicator.innerText = type;
        indicator.style.color = type === 'C' ? '#0f172a' : 'white';
        indicator.style.backgroundColor = getAtomColor(type);
    }

    function getMousePos(e) {
        const rect = canvas.getBoundingClientRect();
        return { x: e.clientX - rect.left, y: e.clientY - rect.top };
    }

    function findAtomAt(pos, radius = 20) {
        return state.atoms.find(a => Math.hypot(a.x - pos.x, a.y - pos.y) < radius);
    }

    function findBondAt(pos) {
        return state.bonds.find(b => {
            const d = distToSegment(pos, b.a1, b.a2);
            return d < 10;
        });
    }

    function distToSegment(p, v, w) {
        const l2 = Math.hypot(v.x - w.x, v.y - w.y) ** 2;
        if (l2 == 0) return Math.hypot(p.x - v.x, p.y - v.y);
        let t = ((p.x - v.x) * (w.x - v.x) + (p.y - v.y) * (w.y - v.y)) / l2;
        t = Math.max(0, Math.min(1, t));
        return Math.hypot(p.x - (v.x + t * (w.x - v.x)), p.y - (v.y + t * (w.y - v.y)));
    }

    canvas.onmousedown = (e) => {
        const pos = getMousePos(e);
        state.dragging = true;
        
        if (state.currentTool === 'eraser') {
            const atom = findAtomAt(pos);
            if (atom) {
                state.atoms = state.atoms.filter(a => a !== atom);
                state.bonds = state.bonds.filter(b => b.a1 !== atom && b.a2 !== atom);
            } else {
                const bond = findBondAt(pos);
                if (bond) state.bonds = state.bonds.filter(b => b !== bond);
            }
        } else if (state.currentTool === 'bond') {
            const existingBond = findBondAt(pos);
            if (existingBond && !findAtomAt(pos)) {
                existingBond.type = existingBond.type === 1 ? 2 : 1;
                state.dragging = false; 
            } else {
                const existingAtom = findAtomAt(pos);
                if (existingAtom) {
                    state.tempBond = { from: existingAtom, to: pos };
                } else {
                    const newAtom = { x: pos.x, y: pos.y, element: state.currentAtomType, id: Date.now() };
                    state.atoms.push(newAtom);
                    state.tempBond = { from: newAtom, to: pos };
                }
            }
        } else if (state.currentTool.startsWith('ring')) {
            const sides = parseInt(state.currentTool.replace('ring', ''));
            addRing(pos, sides);
        } else if (state.currentTool === 'select') {
            state.selectedAtom = findAtomAt(pos);
        }
        render();
    };

    canvas.onmousemove = (e) => {
        const pos = getMousePos(e);
        state.hoveredAtom = findAtomAt(pos);
        state.hoveredBond = findBondAt(pos);

        if (state.dragging && state.tempBond) {
            let tx = pos.x, ty = pos.y;
            if (e.shiftKey) {
                const angle = Math.atan2(pos.y - state.tempBond.from.y, pos.x - state.tempBond.from.x);
                const snapped = Math.round(angle / (Math.PI / 12)) * (Math.PI / 12);
                tx = state.tempBond.from.x + Math.cos(snapped) * BOND_LENGTH;
                ty = state.tempBond.from.y + Math.sin(snapped) * BOND_LENGTH;
            }
            state.tempBond.to = { x: tx, y: ty };
        }

        if (state.dragging && state.currentTool === 'select' && state.selectedAtom) {
            state.selectedAtom.x = pos.x;
            state.selectedAtom.y = pos.y;
        }
        render();
    };

    canvas.onmouseup = (e) => {
        if (state.tempBond) {
            const target = findAtomAt(state.tempBond.to);
            if (target && target !== state.tempBond.from) {
                addBond(state.tempBond.from, target);
            } else {
                const newAtom = { x: state.tempBond.to.x, y: state.tempBond.to.y, element: state.currentAtomType, id: Date.now() + 1 };
                state.atoms.push(newAtom);
                addBond(state.tempBond.from, newAtom);
            }
        }
        state.dragging = false;
        state.tempBond = null;
        updateStats();
        render();
    };

    function addBond(a1, a2) {
        const exists = state.bonds.find(b => (b.a1 === a1 && b.a2 === a2) || (b.a1 === a2 && b.a2 === a1));
        if (!exists) state.bonds.push({ a1, a2, type: 1 });
    }

    function addRing(center, sides) {
        const radius = 45;
        const ringAtoms = [];
        for (let i = 0; i < sides; i++) {
            const angle = (i * 2 * Math.PI / sides) - Math.PI / 2;
            const atom = {
                x: center.x + radius * Math.cos(angle),
                y: center.y + radius * Math.sin(angle),
                element: 'C',
                id: Date.now() + i
            };
            state.atoms.push(atom);
            ringAtoms.push(atom);
        }
        for (let i = 0; i < sides; i++) {
            addBond(ringAtoms[i], ringAtoms[(i + 1) % sides]);
        }
        updateStats();
    }

    function render() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        // Draw Bonds with Glow effect
        state.bonds.forEach(bond => {
            const isHovered = state.hoveredBond === bond;
            ctx.strokeStyle = isHovered ? '#60a5fa' : '#475569';
            ctx.lineWidth = isHovered ? 4 : 2.5;
            
            if (bond.type === 1) {
                ctx.beginPath();
                ctx.moveTo(bond.a1.x, bond.a1.y);
                ctx.lineTo(bond.a2.x, bond.a2.y);
                ctx.stroke();
            } else if (bond.type === 2) {
                const dx = bond.a2.x - bond.a1.x;
                const dy = bond.a2.y - bond.a1.y;
                const len = Math.hypot(dx, dy);
                const ox = -dy / len * 4;
                const oy = dx / len * 4;
                
                ctx.beginPath();
                ctx.moveTo(bond.a1.x + ox, bond.a1.y + oy);
                ctx.lineTo(bond.a2.x + ox, bond.a2.y + oy);
                ctx.moveTo(bond.a1.x - ox, bond.a1.y - oy);
                ctx.lineTo(bond.a2.x - ox, bond.a2.y - oy);
                ctx.stroke();
            }
        });

        // Draw Temp Bond
        if (state.tempBond) {
            ctx.strokeStyle = '#334155';
            ctx.setLineDash([6, 6]);
            ctx.beginPath();
            ctx.moveTo(state.tempBond.from.x, state.tempBond.from.y);
            ctx.lineTo(state.tempBond.to.x, state.tempBond.to.y);
            ctx.stroke();
            ctx.setLineDash([]);
        }

        // Draw Atoms
        state.atoms.forEach(atom => {
            const isHovered = state.hoveredAtom === atom;
            
            // Atom container
            ctx.fillStyle = '#1e293b';
            ctx.shadowBlur = isHovered ? 20 : 0;
            ctx.shadowColor = isHovered ? 'rgba(59, 130, 246, 0.5)' : 'transparent';
            ctx.beginPath();
            ctx.arc(atom.x, atom.y, 14, 0, Math.PI * 2);
            ctx.fill();
            ctx.shadowBlur = 0;
            
            if (atom.element !== 'C' || isHovered) {
                ctx.strokeStyle = isHovered ? '#60a5fa' : '#334155';
                ctx.lineWidth = 1.5;
                ctx.stroke();
                
                // Color text pop
                ctx.fillStyle = getAtomColor(atom.element);
                ctx.font = 'bold 13px Inter';
                ctx.textAlign = 'center';
                ctx.textBaseline = 'middle';
                ctx.fillText(atom.element, atom.x, atom.y);
            }
        });
    }

    function getAtomColor(el) {
        const colors = { 
            'C': '#cbd5e1', 
            'N': '#60a5fa', 
            'O': '#f87171', 
            'S': '#fbbf24', 
            'F': '#34d399', 
            'Cl': '#4ade80', 
            'P': '#fb923c' 
        };
        return colors[el] || '#fff';
    }

    function clearCanvas() {
        state.atoms = [];
        state.bonds = [];
        updateStats();
        render();
    }

    function updateStats() {
        document.getElementById('atom-count').innerText = state.atoms.length;
        document.getElementById('bond-count').innerText = state.bonds.length;
    }

    function closeModal() {
        document.getElementById('modal').style.display = 'none';
    }

    function exportSMILES() {
        if (state.atoms.length === 0) {
            showAlert("Input Required", "Sketch a fragment to begin computational analysis.");
            return;
        }
        let smiles = "";
        const visited = new Set();
        function walk(atom) {
            visited.add(atom.id);
            let part = atom.element;
            const neighbors = state.bonds
                .filter(b => b.a1 === atom || b.a2 === atom)
                .map(b => ({node: b.a1 === atom ? b.a2 : b.a1, type: b.type}))
                .filter(n => !visited.has(n.node.id));
            neighbors.forEach((n, i) => {
                const bChar = n.type === 2 ? "=" : "";
                if (i > 0) part += "(" + bChar + walk(n.node) + ")";
                else part += bChar + walk(n.node);
            });
            return part;
        }
        smiles = walk(state.atoms[0]);
        document.getElementById('smiles-output').innerHTML = `<span class="opacity-50 mr-2 text-slate-600 font-bold">&gt;</span> ${smiles}`;
        showAlert("SMILES Processed", `Lead Fragment identified as: ${smiles}. This string is ready for cloud-based docking engines.`);
    }

    function showAlert(title, body) {
        document.getElementById('modal-title').innerText = title;
        document.getElementById('modal-body').innerText = body;
        document.getElementById('modal').style.display = 'flex';
    }
</script>
</body>
</html>