app.py

import sys
import os
import threading
import webview
from flask import Flask, render_template_string, request, redirect, url_for
from datetime import datetime
import uuid

# Import logic from data.py (Ensure your data.py is updated to the No-Pandas version!)
from data import load_data, save_data, get_recursive_status, load_issues, save_issues


def resource_path(relative_path):
    try:
        base_path = sys._MEIPASS
    except Exception:
        base_path = os.path.abspath(".")
    return os.path.join(base_path, relative_path)


static_folder = resource_path("static")
app = Flask(__name__, static_folder=static_folder)

# ==========================================
# TEMPLATES (Re-used for brevity)
# ==========================================
# Note: I'm keeping the CSS/HTML exactly as you had it, just minimized variables here.
# You can copy the full STYLES/NAV_BAR variables from your previous version if you prefer,
# but this setup ensures the app runs right now.

STYLES = """
<style>
    body { font-family: 'Segoe UI', sans-serif; background: #1e1e1e; color: #fff; margin: 0; padding: 0; user-select: none; }
    .nav { background: #333; padding: 15px; border-bottom: 2px solid #444; display: flex; gap: 20px; -webkit-app-region: drag; }
    .nav a { color: #ccc; text-decoration: none; font-size: 1.1em; padding: 5px 10px; border-radius: 4px; -webkit-app-region: no-drag; }
    .nav a:hover, .nav a.active { background: #555; color: white; }
    .container { padding: 20px; max-width: 1200px; margin: 0 auto; }
    ::-webkit-scrollbar { width: 10px; }
    ::-webkit-scrollbar-track { background: #1e1e1e; }
    ::-webkit-scrollbar-thumb { background: #444; border-radius: 5px; }
    .header-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; border-bottom: 1px solid #444; padding-bottom: 15px; }
    .header-toolbar h1 { margin: 0; }
    .header-actions { display: flex; gap: 10px; }
    .tree-header-row { display: grid; grid-template-columns: 80px 80px 1fr; padding: 10px 0; border-bottom: 1px solid #444; font-weight: bold; color: #aaa; }
    .node-wrapper { display: flex; flex-direction: column; }
    .node-children { display: block; border-left: 1px solid rgba(255,255,255,0.05); margin-left: 40px; }
    .node-children.collapsed { display: none; }
    .tree-row { display: grid; grid-template-columns: 80px 80px 1fr; align-items: center; margin-bottom: 2px; border-radius: 4px; cursor: pointer; transition: background-color 0.1s; }
    .tree-row:hover { background-color: #2a2a2a; }
    .qa-cell, .issue-cell { display: flex; justify-content: center; align-items: center; height: 100%; border-right: 1px solid rgba(255,255,255,0.05); }
    .qa-box, .issue-box { width: 40px; height: 24px; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 0.8em; font-weight: bold; }
    .qa-green { background-color: #27ae60; color: white; box-shadow: 0 0 5px rgba(39, 174, 96, 0.5); }
    .qa-red   { background-color: #c0392b; color: white; opacity: 0.6; } 
    .issue-fix { background-color: #e67e22; color: white; box-shadow: 0 0 5px rgba(230, 126, 34, 0.5); } 
    .content-cell { display: flex; align-items: center; padding: 8px 12px; height: 100%; position: relative; }
    .row-complete { background-color: rgba(46, 204, 113, 0.15); }
    .row-incomplete { background-color: rgba(231, 76, 60, 0.05); }
    .tree-lines { color: #555; font-family: monospace; white-space: pre; margin-right: 5px; user-select: none; }
    /* NEW: Hover effect for the clickable title */
    .node-title { font-weight: 500; margin-right: 10px; transition: color 0.2s; }
    .node-title:hover { text-decoration: underline; color: #3498db; }
    
    .badge-todo { background: #e67e22; color: white; font-size: 0.7em; padding: 2px 6px; border-radius: 4px; margin-left: 10px; font-weight: bold; vertical-align: middle; }
    .badge-type { background: #34495e; color: #ecf0f1; font-size: 0.7em; padding: 3px 8px; border-radius: 4px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; }
    .toggle-tree { cursor: pointer; color: #aaa; width: 20px; text-align: center; margin-right: 5px; font-size: 0.8em; transition: transform 0.2s; display: inline-block; user-select: none; }
    .toggle-tree.closed { transform: rotate(-90deg); }
    .selection-container { display: flex; gap: 20px; margin-bottom: 20px; }
    .selection-box { flex: 1; background: #252525; border: 1px solid #444; border-radius: 6px; padding: 10px; display: flex; flex-direction: column; height: 350px; }
    .selection-header { font-weight: bold; color: #ccc; margin-bottom: 10px; border-bottom: 1px solid #444; padding-bottom: 5px; }
    .search-bar { width: 100%; padding: 8px; margin-bottom: 10px; background: #333; border: 1px solid #555; color: white; border-radius: 4px; box-sizing: border-box; }
    .inv-search-container { display: flex; gap: 10px; margin-bottom: 20px; align-items: center; background: #252525; padding: 15px; border-radius: 6px; border: 1px solid #444; }
    .inv-search-input { flex: 1; padding: 10px; background: #333; border: 1px solid #555; color: white; border-radius: 4px; }
    .checkbox-list { overflow-y: auto; flex-grow: 1; border: 1px solid #333; }
    .checkbox-item { display: block; padding: 5px 8px; border-bottom: 1px solid #333; cursor: pointer; }
    .checkbox-item:hover { background: #333; }
    .checkbox-item.checked-top { background: #2c3e50; border-left: 4px solid #3498db; font-weight: bold; }
    .form-group { margin-bottom: 15px; }
    input[type="text"], textarea, select { width: 100%; padding: 10px; background: #333; border: 1px solid #555; color: white; border-radius: 4px; box-sizing: border-box; font-family: inherit;}
    .status-group { background: #252525; padding: 15px; border-radius: 6px; margin-bottom: 20px; display: flex; gap: 30px; border: 1px solid #444; }
    .status-label { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 1.1em; }
    input[type="checkbox"].big-check { transform: scale(1.5); }
    button { background: #3498db; color: white; border: none; padding: 12px 24px; border-radius: 4px; cursor: pointer; font-size: 1em; font-weight: bold; }
    button.btn-danger { background: #c0392b; }
    table { width: 100%; border-collapse: collapse; margin-top: 10px; }
    th, td { padding: 12px; text-align: left; border-bottom: 1px solid #444; }
    th { background-color: #333; }
    tr:hover { background-color: #2a2a2a; }
    tr.clickable-row { cursor: pointer; }
    .issue-entry { display: flex; gap: 10px; margin-bottom: 8px; }
    .issue-entry input { flex: 1; }
    .issue-entry button { padding: 0 15px; background: #c0392b; }
    .issue-layout { display: flex; gap: 30px; }
    .issue-sidebar { flex: 0 0 300px; background: #252525; padding: 20px; border-radius: 8px; height: fit-content; }
    .issue-main { flex: 1; }
    details.category-block { margin-bottom: 10px; border: 1px solid #444; border-radius: 6px; overflow: hidden; background: #252525; }
    details.category-block > summary { padding: 12px 15px; cursor: pointer; font-weight: bold; background: #333; list-style: none; display: flex; align-items: center; justify-content: space-between; }
    .category-content { padding: 10px; background: #222; border-top: 1px solid #444; }
    .issue-card { background: #2a2a2a; border: 1px solid #444; border-radius: 6px; margin-bottom: 10px; overflow: hidden; }
    .issue-summary { padding: 15px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-weight: bold; background: #2a2a2a; }
    .issue-details { padding: 20px; border-top: 1px solid #444; }
    .issue-meta { color: #888; font-size: 0.9em; margin-bottom: 15px; }
    .btn-tool { background: #444; font-size: 0.9em; padding: 8px 15px; border-radius: 4px; color: #fff; text-decoration: none; cursor: pointer; border: none; }
    .btn-tool:hover { background: #555; }
</style>
<script>
    function filterList(inputId, listId) {
        var input, filter, div, labels, txtValue;
        input = document.getElementById(inputId);
        filter = input.value.toUpperCase();
        div = document.getElementById(listId);
        labels = div.getElementsByTagName("label");
        for (var i = 0; i < labels.length; i++) {
            txtValue = labels[i].textContent || labels[i].innerText;
            if (txtValue.toUpperCase().indexOf(filter) > -1) {
                labels[i].style.display = "";
            } else {
                labels[i].style.display = "none";
            }
        }
    }
    function toggleCategories(shouldOpen) { document.querySelectorAll('details.category-block').forEach(el => { el.open = shouldOpen; }); }
    
    // CHANGED: Logic to toggle based on row click
    function toggleRow(row) {
        const wrapper = row.closest('.node-wrapper');
        const children = wrapper.querySelector('.node-children');
        const btn = row.querySelector('.toggle-tree');
        if (children) {
            children.classList.toggle('collapsed');
            if (btn) btn.classList.toggle('closed');
        }
    }

    function expandTree() { document.querySelectorAll('.node-children').forEach(el => el.classList.remove('collapsed')); document.querySelectorAll('.toggle-tree').forEach(el => el.classList.remove('closed')); }
    function collapseTree() { document.querySelectorAll('.node-children').forEach(el => el.classList.add('collapsed')); document.querySelectorAll('.toggle-tree').forEach(el => el.classList.add('closed')); }
    function filterInventory() {
        var input = document.getElementById("invSearch");
        var filter = input.value.toUpperCase();
        var tr = document.getElementById("invTable").getElementsByTagName("tr");
        for (var i = 0; i < tr.length; i++) {
            var tdTitle = tr[i].getElementsByTagName("td")[0];
            var tdType = tr[i].getElementsByTagName("td")[1];
            if (tdTitle || tdType) {
                var txtTitle = tdTitle.textContent || tdTitle.innerText;
                var txtType = tdType.textContent || tdType.innerText;
                if (txtTitle.toUpperCase().indexOf(filter) > -1 || txtType.toUpperCase().indexOf(filter) > -1) { tr[i].style.display = ""; } else { tr[i].style.display = "none"; }
            }       
        }
    }
    function addNodeIssue() {
        const input = document.getElementById('new-issue-input');
        const val = input.value.trim();
        if(!val) return;
        const container = document.getElementById('node-issue-list');
        const div = document.createElement('div');
        div.className = 'issue-entry';
        div.innerHTML = `<input type="text" name="issue_items" value="${val.replace(/"/g, '&quot;')}" required><button type="button" onclick="this.parentElement.remove()">✕</button>`;
        container.appendChild(div);
        input.value = ''; input.focus();
    }
    function handleIssueEnter(e) { if(e.key === 'Enter') { e.preventDefault(); addNodeIssue(); } }
</script>
"""

NAV_BAR = """
<div class="nav">
    <a href="/">📂 Outline View</a>
    <a href="/inventory">📦 All Nodes</a>
    <a href="/create">➕ Node Maker</a>
    <a href="/issues">🐛 Issue Tracker</a>
</div>
"""

TEMPLATE_OUTLINE = (
    """<!DOCTYPE html><html><head><title>Project Manager</title><link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">"""
    + STYLES
    + """</head><body>"""
    + NAV_BAR
    + """
    <div class="container">
        <div class="header-toolbar">
            <h1>Project Structure <span style="font-size:0.6em; vertical-align:middle">{{ project_status_icon|safe }}</span></h1>
            <div class="header-actions">
                <button class="btn-tool" onclick="expandTree()">▼ Expand All</button>
                <button class="btn-tool" onclick="collapseTree()">▶ Collapse All</button>
            </div>
        </div>
        <div class="tree-header-row"><div style="text-align:center">QA Status</div><div style="text-align:center">Issues</div><div style="padding-left:12px">Node Hierarchy</div></div>
        <div class="tree-container">{{ tree_html|safe }}</div>
        {% if not tree_html %}<p style="color:#777; margin-top:20px;"><i>Empty. Go to "Node Maker" to create pages, then add them to the "Top-Level Structure".</i></p>{% endif %}
    </div></body></html>"""
)

TEMPLATE_VIEW = (
    """<!DOCTYPE html><html><head><title>View Node</title><link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">"""
    + STYLES
    + """</head><body>"""
    + NAV_BAR
    + """
    <div class="container">
        <div class="header-toolbar"><h1>{{ node.title }}</h1><div class="header-actions"><a href="/edit/{{ node_id }}?return_to=view" class="btn-tool" style="background:#3498db; text-decoration:none; display:inline-block; text-align:center;">✏️ Edit</a></div></div>
        <div style="background:#252525; padding:20px; border-radius:8px; border:1px solid #444; margin-bottom:20px;">
            <div style="display:flex; gap:15px; align-items:center; margin-bottom:20px; flex-wrap:wrap;">
                <span class="badge-type" style="font-size:1em;">{{ node.type|default('Page')|upper }}</span>
                {% if node.todo %}<span class="badge-todo" style="font-size:1em;">TODO</span>{% endif %}
                {% if node.checked %}<span style="color:#2ecc71; font-weight:bold;">✅ QA Checked</span>{% else %}<span style="color:#e74c3c; font-weight:bold;">❌ Unchecked</span>{% endif %}
            </div>
            <div style="margin-top:20px; color:#ddd;">
                {% if node.issues %}
                    <h3 style="color:#e67e22; border-bottom:1px solid #444; padding-bottom:5px;">⚠️ Linked Issues</h3>
                    <ul style="list-style:none; padding:0;">{% for issue in node.issues %}<li style="background:#333; padding:10px; margin-bottom:5px; border-radius:4px; border-left:4px solid #e67e22;">{{ issue }}</li>{% endfor %}</ul>
                {% else %}<p style="color:#777;">No issues linked.</p>{% endif %}
            </div>
        </div>
        <div class="selection-container">
            <div class="selection-box" style="height:auto; min-height:200px;"><div class="selection-header">👇 Contains (Children)</div>{% if children_nodes %}<div class="checkbox-list" style="border:none;">{% for child in children_nodes %}<a href="/view/{{ child.id }}" class="checkbox-item" style="text-decoration:none; color:#ddd; display:block;">📄 {{ child.title }}</a>{% endfor %}</div>{% else %}<p style="padding:10px; color:#777;">No children nodes.</p>{% endif %}</div>
            <div class="selection-box" style="height:auto; min-height:200px;"><div class="selection-header">👆 Included In (Parents)</div>{% if parent_nodes %}<div class="checkbox-list" style="border:none;">{% for parent in parent_nodes %}<a href="/view/{{ parent.id }}" class="checkbox-item" style="text-decoration:none; color:#ddd; display:block;">📂 {{ parent.title }}</a>{% endfor %}</div>{% else %}<p style="padding:10px; color:#777;">No parent nodes.</p>{% endif %}</div>
        </div>
        <div style="margin-top:20px;"><a href="/" style="color:#888; text-decoration:none; font-size:0.9em;">← Back to Outline</a></div>
    </div></body></html>"""
)

TEMPLATE_INVENTORY = (
    """<!DOCTYPE html><html><head><title>Project Manager</title><link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">"""
    + STYLES
    + """</head><body>"""
    + NAV_BAR
    + """
    <div class="container">
        <h1>All Nodes Inventory <a href='/edit_root' style='background:#555; padding:5px 15px; color:white; text-decoration:none; border-radius:4px; font-size:0.6em; float:right; margin-top:5px'>⚙️ Edit Top-Level Structure</a></h1>
        <div class="inv-search-container"><span style="font-size:1.2em">🔍</span><input type="text" id="invSearch" class="inv-search-input" onkeyup="filterInventory()" placeholder="Search by Title or Type..."></div>
        <table id="invTable"><thead><tr><th>Title</th><th>Type</th><th>Status</th><th>Used In</th></tr></thead>
            <tbody>{% for n_id, node in nodes.items() %}{% if n_id != root_id %}
            <tr class="clickable-row" onclick="window.location.href='/edit/{{ n_id }}?return_to=inventory'">
                <td>{{ node.title }}</td><td><span class="badge-type" style="background:#555">{{ node.type|default('Page') }}</span></td>
                <td>{% if node.todo %}<span class="badge-todo">TODO</span>{% endif %}{% if node.checked %}<span style="color:#2ecc71">✅ Checked</span>{% else %}<span style="color:#e74c3c">❌ Unchecked</span>{% endif %}{% if node.issues %}<span style="color:#e67e22; font-weight:bold; margin-left:10px">⚠️ {{ node.issues|length }} Issues</span>{% endif %}</td>
                <td style="color:#888; font-size:0.9em">{{ parent_counts.get(n_id, 0) }} places</td>
            </tr>{% endif %}{% endfor %}</tbody>
        </table></div></body></html>"""
)

TEMPLATE_EDITOR = (
    """<!DOCTYPE html><html><head><title>Node Maker</title><link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">"""
    + STYLES
    + """</head><body>"""
    + NAV_BAR
    + """
    <div class="container">
        <div class="header-toolbar"><h1>{{ 'Edit Node' if node_id else 'Create New Node' }}</h1><div class="header-actions"><button type="submit" form="node-form" style="background:#27ae60; padding: 10px 20px;">{{ '💾 Save Changes' if node_id else '➕ Add New Node' }}</button></div></div>
        <form id="node-form" method="POST" action="/save">
            <input type="hidden" name="node_id" value="{{ node_id or '' }}"><input type="hidden" name="return_to" value="{{ return_to }}">
            <div class="form-group"><label>Title</label><input type="text" name="title" value="{{ node.title if node else '' }}" required placeholder="e.g. Dashboard Page"></div>
            <div class="status-group" style="align-items: center;">
                <div style="display: flex; align-items: center; gap: 10px; margin-right: auto;">
                    <label style="font-weight:bold; color:#aaa; font-size:0.9em; white-space:nowrap;">Node Type:</label>
                    <select name="type" style="width: auto;">
                        <option value="page" {% if node and node.type == 'page' %}selected{% endif %}>Page</option>
                        <option value="modal" {% if node and node.type == 'modal' %}selected{% endif %}>Modal</option>
                        <option value="integrated modal" {% if node and node.type == 'integrated modal' %}selected{% endif %}>Integrated Modal</option>
                        <option value="functionality" {% if node and node.type == 'functionality' %}selected{% endif %}>Functionality</option>
                    </select>
                </div>
                <label class="status-label"><input type="checkbox" class="big-check" name="todo" {% if node and node.todo %}checked{% endif %}>🔥 Mark as TODO</label>
                <label class="status-label"><input type="checkbox" class="big-check" name="checked" {% if node and node.checked %}checked{% endif %}>✅ QA Checked</label>
            </div>
            <div class="form-group" style="background: #252525; padding: 15px; border-radius: 6px; border: 1px solid #444;">
                <label style="display:block; margin-bottom:10px; font-weight:bold;">Linked Issues</label>
                <div id="node-issue-list">{% if node and node.issues %}{% for issue in node.issues %}<div class="issue-entry"><input type="text" name="issue_items" value="{{ issue }}" required><button type="button" onclick="this.parentElement.remove()">✕</button></div>{% endfor %}{% endif %}</div>
                <div style="display:flex; gap:10px; margin-top:10px;"><input type="text" id="new-issue-input" placeholder="Type a new issue description..." onkeypress="handleIssueEnter(event)"><button type="button" onclick="addNodeIssue()" style="background:#27ae60;">+ Add Issue</button></div>
            </div>
            <div class="selection-container">
                <div class="selection-box"><div class="selection-header">👇 Contains (This node uses...)</div><input type="text" class="search-bar" id="searchChildren" onkeyup="filterList('searchChildren', 'listChildren')" placeholder="Search...">
                    <div class="checkbox-list" id="listChildren">
                        {% for n_id, n_data in all_nodes.items() %}{% if n_id != node_id and n_id != root_id and (node and n_id in node.children) %}<label class="checkbox-item checked-top"><input type="checkbox" name="children" value="{{ n_id }}" checked> {{ n_data.title }}</label>{% endif %}{% endfor %}
                        {% for n_id, n_data in all_nodes.items() %}{% if n_id != node_id and n_id != root_id and (not node or n_id not in node.children) %}<label class="checkbox-item"><input type="checkbox" name="children" value="{{ n_id }}"> {{ n_data.title }}</label>{% endif %}{% endfor %}
                    </div>
                </div>
                <div class="selection-box"><div class="selection-header">👆 Included In (Used by...)</div><input type="text" class="search-bar" id="searchParents" onkeyup="filterList('searchParents', 'listParents')" placeholder="Search...">
                    <div class="checkbox-list" id="listParents">
                        {% for n_id, n_data in all_nodes.items() %}{% if n_id != node_id and n_id in current_parents %}<label class="checkbox-item checked-top"><input type="checkbox" name="parents" value="{{ n_id }}" checked> {{ n_data.title }}</label>{% endif %}{% endfor %}
                        {% for n_id, n_data in all_nodes.items() %}{% if n_id != node_id and n_id not in current_parents %}<label class="checkbox-item"><input type="checkbox" name="parents" value="{{ n_id }}"> {{ n_data.title }}</label>{% endif %}{% endfor %}
                    </div>
                </div>
            </div>
            {% if node_id and node_id != root_id %}<a href="/delete/{{node_id}}" style="color: #e74c3c; margin-left: 20px; text-decoration: none; float:right; margin-top:12px;">🗑 Delete Node</a>{% endif %}
        </form></div></body></html>"""
)

TEMPLATE_ISSUES = (
    """<!DOCTYPE html><html><head><title>Project Manager</title><link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">"""
    + STYLES
    + """</head><body>"""
    + NAV_BAR
    + """
    <div class="container">
        <div class="header-toolbar"><h1>🐛 Issue Tracker</h1><div class="header-actions"><span style="color:#888; font-size:0.9em; margin-right:15px; align-self:center">Total: <b>{{ stats.total }}</b> (Nodes: {{ stats.node_issues|default(0) }} | CSV: {{ stats.total - stats.node_issues|default(0) }})</span>{% if grouped_issues %}<button class="btn-tool" onclick="toggleCategories(true)">▼ Expand Groups</button><button class="btn-tool" onclick="toggleCategories(false)">▶ Collapse Groups</button>{% endif %}</div></div>
        <div class="issue-layout">
            <div class="issue-sidebar"><h3>Add General Issue</h3><p style="color:#777; font-size:0.8em; margin-bottom:15px">Use this for general bugs not attached to specific nodes.</p><datalist id="category-list">{% for cat in all_categories %}<option value="{{ cat }}">{% endfor %}</datalist>
                <form method="POST" action="/issues/add"><div class="form-group"><label>Category*</label><input type="text" name="category" required placeholder="e.g. Bug, Feature, UI" list="category-list" autocomplete="off"></div><div class="form-group"><label>Title*</label><input type="text" name="title" required placeholder="Issue Title"></div><div class="form-group"><label>Description</label><textarea name="description" rows="4"></textarea></div><button type="submit" style="width:100%">Add Issue</button></form>
            </div>
            <div class="issue-main">
                {% if not grouped_issues %}<div style="padding:40px; text-align:center; color:#777; border: 2px dashed #444; border-radius:10px"><h3>No issues found</h3><p>Everything is clean!</p></div>{% else %}
                    {% for category, issues in grouped_issues.items() %}<details class="category-block"><summary><span>{% if category == '🚨 Active Node Issues' %}{{ category }}{% else %}📁 {{ category }}{% endif %}<span style="font-weight:normal; color:#888; font-size:0.9em; margin-left:8px">({{ issues|length }})</span></span></summary><div class="category-content">
                        {% for issue in issues %}{% if issue.is_node_issue %}
                            <div class="issue-card" style="border-left: 4px solid #e67e22; background: #2f2b25;"><div class="issue-summary" onclick="window.location.href='/view/{{ issue.id }}'" style="cursor: pointer; background:transparent;"><span style="color:#e67e22; text-decoration: underline;">📄 {{ issue.title }}</span><span style="font-size:0.8em; background:#e67e22; color:white; padding:2px 8px; border-radius:10px;">{{ issue.count }} Items</span></div><div class="issue-details" style="padding-top:0;"><p style="color:#aaa; font-size:0.9em; margin-top:0;"><i>Click title above to go to node view.</i></p><ul style="margin:0; padding-left:20px; color:#ddd;">{% for problem in issue.node_issues_list %}<li style="margin-bottom:5px;">{{ problem }}</li>{% endfor %}</ul></div></div>
                        {% else %}
                            <details class="issue-card"><summary class="issue-summary"><span>{{ issue.title }}</span> <span style="font-size:0.8em; color:#555">{{ issue.status }}</span></summary><div class="issue-details"><form method="POST" action="/issues/update"><input type="hidden" name="issue_id" value="{{ issue.id }}"><div class="issue-meta">Created: {{ issue.created_date }} | Updated: {{ issue.last_updated }}</div><div class="form-group"><label>Description</label><textarea name="description" rows="3" style="width:100%">{{ issue.description }}</textarea></div><div style="display:flex; gap:20px;"><div class="form-group" style="flex:1"><label>Title</label><input type="text" name="title" value="{{ issue.title }}"></div><div class="form-group" style="flex:1"><label>Category</label><input type="text" name="category" value="{{ issue.category }}" list="category-list"></div><div class="form-group" style="flex:1"><label>Status</label><select name="status" style="width:100%; padding:10px; background:#333; color:white; border:1px solid #555; border-radius:4px"><option value="Open" {% if issue.status == 'Open' %}selected{% endif %}>Open</option><option value="In Progress" {% if issue.status == 'In Progress' %}selected{% endif %}>In Progress</option><option value="Resolved" {% if issue.status == 'Resolved' %}selected{% endif %}>Resolved</option></select></div></div><div style="display:flex; justify-content:space-between; margin-top:10px"><button type="submit">Update Issue</button><a href="/issues/delete/{{ issue.id }}" onclick="return confirm('Are you sure?')" style="background:#c0392b; color:white; padding:12px 24px; border-radius:4px; text-decoration:none; font-weight:bold">🗑️ Delete</a></div></form></div></details>
                        {% endif %}{% endfor %}</div></details>{% endfor %}{% endif %}
            </div></div></div></body></html>"""
)


# ==========================================
# ROUTING LOGIC (NO PANDAS)
# ==========================================
def generate_tree_html(data, node_id, prefix="", visited=None):
    if visited is None:
        visited = set()
    if node_id in visited:
        return f"<div class='node-wrapper'><div class='tree-row row-incomplete'><div class='qa-cell'><div class='qa-box qa-red'>⚠️</div></div><div class='issue-cell'><div class='issue-box issue-fix'>FIX</div></div><div class='content-cell'><span class='tree-lines'>{prefix}└── </span> <span style='color:#777'>{data['nodes'][node_id]['title']} 🔄</span></div></div></div>"
    visited.add(node_id)
    node = data["nodes"].get(node_id)
    if not node:
        return ""
    node_is_checked = node.get("checked", False)
    qa_box_class, qa_text = ("qa-green", "OK") if node_is_checked else ("qa-red", "QA")
    issue_html = (
        f"<div class='issue-cell'><div class='issue-box issue-fix' title='{chr(10).join(node['issues'])}'>FIX</div></div>"
        if node.get("issues")
        else f"<div class='issue-cell'><div class='qa-box qa-green'>None</div></div>"
    )
    is_complete = get_recursive_status(data, node_id)
    status_row_class = "row-complete" if is_complete else "row-incomplete"
    todo_badge = "<span class='badge-todo'>TODO</span>" if node["todo"] else ""
    type_badge = f"<span class='badge-type'>{node.get('type', 'page').upper()}</span>"
    has_children = len(node.get("children", [])) > 0

    toggle_btn = (
        f"<span class='toggle-tree closed'>▼</span>"
        if has_children
        else "<span class='toggle-spacer'></span>"
    )

    # CHANGES BELOW:
    # 1. Added style='flex-grow:1' to a new empty span at the end.
    #    This takes up the empty space. Clicking it triggers the parent row click (Toggle).
    # 2. The node-title click event (View) only triggers on the text itself.
    html = f"<div class='node-wrapper'><div class='tree-row {status_row_class}' onclick=\"toggleRow(this)\"><div class='qa-cell'><div class='qa-box {qa_box_class}'>{qa_text}</div></div>{issue_html}<div class='content-cell'><span class='tree-lines'>{prefix}</span>{toggle_btn}<span class='node-title' onclick=\"event.stopPropagation(); window.location.href='/view/{node_id}'\" style='cursor:pointer;'>{node['title']} {todo_badge}</span>{type_badge}<span style='flex-grow:1'></span></div></div>"

    if has_children:
        html += "<div class='node-children collapsed'>"
        for child_id in node.get("children", []):
            html += generate_tree_html(
                data,
                child_id,
                prefix
                + "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;",
                visited.copy(),
            )
        html += "</div>"
    html += "</div>"
    return html


def recursive_uncheck_parents(data, node_id):
    """
    Finds all parents of the given node_id.
    If a parent is currently 'checked', uncheck it and recurse upwards.
    """
    # Find all nodes that have this node_id in their 'children' list
    parents = [
        pid for pid, n in data["nodes"].items() if node_id in n.get("children", [])
    ]

    for pid in parents:
        parent_node = data["nodes"][pid]
        # Only recurse if the parent was actually checked (to stop redundant processing)
        if parent_node.get("checked", False):
            parent_node["checked"] = False
            recursive_uncheck_parents(data, pid)


@app.route("/")
def outline():
    data = load_data()
    root_id = data["root_id"]
    full_html = "".join(
        [
            generate_tree_html(data, child_id)
            for child_id in data["nodes"][root_id]["children"]
        ]
    )
    return render_template_string(
        TEMPLATE_OUTLINE,
        tree_html=full_html,
        project_status_icon="🟢" if get_recursive_status(data, root_id) else "🔴",
    )


@app.route("/inventory")
def inventory():
    data = load_data()
    parent_counts = {}
    for node in data["nodes"].values():
        for child in node["children"]:
            parent_counts[child] = parent_counts.get(child, 0) + 1
    return render_template_string(
        TEMPLATE_INVENTORY,
        nodes=data["nodes"],
        root_id=data["root_id"],
        parent_counts=parent_counts,
    )


@app.route("/create")
def create():
    return render_template_string(
        TEMPLATE_EDITOR,
        node=None,
        node_id=None,
        all_nodes=load_data()["nodes"],
        root_id=load_data()["root_id"],
        current_parents=[],
        return_to=request.args.get("return_to", "outline"),
    )


@app.route("/view/<node_id>")
def view_node(node_id):
    data = load_data()
    node = data["nodes"].get(node_id)
    if not node:
        return redirect(url_for("outline"))
    return render_template_string(
        TEMPLATE_VIEW,
        node=node,
        node_id=node_id,
        children_nodes=[
            data["nodes"][cid]
            for cid in node.get("children", [])
            if cid in data["nodes"]
        ],
        parent_nodes=[
            n for n in data["nodes"].values() if node_id in n.get("children", [])
        ],
    )


@app.route("/edit/<node_id>")
def edit(node_id):
    data = load_data()
    return render_template_string(
        TEMPLATE_EDITOR,
        node=data["nodes"].get(node_id),
        node_id=node_id,
        all_nodes=data["nodes"],
        root_id=data["root_id"],
        current_parents=[
            pid for pid, n in data["nodes"].items() if node_id in n.get("children", [])
        ],
        return_to=request.args.get("return_to", "outline"),
    )


@app.route("/save", methods=["POST"])
def save():
    data = load_data()
    node_id = request.form.get("node_id")

    # Generate ID if new
    if not node_id:
        node_id = str(uuid.uuid4())
        data["nodes"][node_id] = {"id": node_id, "children": []}

    # --- LOGIC START: Determine if we need to force-uncheck this node ---

    # 1. Get current state (before update) to identify NEW children
    old_node = data["nodes"].get(node_id)
    old_children = set(old_node.get("children", [])) if old_node else set()

    # 2. Get form data
    title = request.form.get("title")
    ntype = request.form.get("type")
    new_children_list = request.form.getlist("children")
    new_children_set = set(new_children_list)
    parents = request.form.getlist("parents")
    # 'issues' list is non-empty if the user added/kept issues
    issues = [x.strip() for x in request.form.getlist("issue_items") if x.strip()]

    # 3. Check triggers
    should_force_uncheck = False

    # Trigger A: If issues exist (Requirement: "if i add a fix... remove its QA")
    if issues:
        should_force_uncheck = True

    # Trigger B: If a NEW child was added that is currently UNCHECKED
    # (Requirement: "if we add a new child that does not have QA")
    added_children = new_children_set - old_children
    for child_id in added_children:
        child_node = data["nodes"].get(child_id)
        # If the added child exists and is NOT checked
        if child_node and not child_node.get("checked", False):
            should_force_uncheck = True
            break

    # 4. Determine final 'checked' status
    if should_force_uncheck:
        is_checked = False
    else:
        # Otherwise, trust the user's manual checkbox
        is_checked = "checked" in request.form

    # --- LOGIC END ---

    # Update the node data
    data["nodes"][node_id].update(
        {
            "title": title,
            "type": ntype,
            "todo": "todo" in request.form,
            "checked": is_checked,
            "children": new_children_list,
            "issues": issues,
        }
    )

    # Update Parent Relationships
    for other_id, other_node in data["nodes"].items():
        if other_id != node_id:
            if other_id in parents and node_id not in other_node["children"]:
                other_node["children"].append(node_id)
            elif other_id not in parents and node_id in other_node["children"]:
                other_node["children"].remove(node_id)

    # 5. Finally, if the current node ended up UNCHECKED (either forced or manual),
    #    recursively uncheck all its parents.
    if not is_checked:
        recursive_uncheck_parents(data, node_id)

    save_data(data)

    # Redirect logic
    return redirect(
        url_for(
            (
                "inventory"
                if request.form.get("return_to") == "inventory"
                else (
                    "view_node"
                    if request.form.get("return_to") == "view"
                    else "outline"
                )
            ),
            node_id=node_id,
        )
    )


@app.route("/delete/<node_id>")
def delete(node_id):
    data = load_data()
    if node_id != data["root_id"] and node_id in data["nodes"]:
        del data["nodes"][node_id]
        for n in data["nodes"].values():
            if node_id in n["children"]:
                n["children"].remove(node_id)
        save_data(data)
    return redirect(url_for("inventory"))


@app.route("/issues")
def issues():
    df_issues, data = load_issues(), load_data()
    grouped = {}
    node_issues = [
        {
            "id": nid,
            "title": n["title"],
            "node_issues_list": n["issues"],
            "is_node_issue": True,
            "count": len(n["issues"]),
        }
        for nid, n in data["nodes"].items()
        if n.get("issues")
    ]
    if node_issues:
        grouped["🚨 Active Node Issues"] = node_issues

    csv_issues = df_issues
    cats = sorted(list(set(i["category"] for i in csv_issues if i["category"])))
    for c in cats:
        grouped[c] = [i for i in csv_issues if i["category"] == c]

    stats = {
        "total": len(csv_issues) + len(node_issues),
        "node_issues": len(node_issues),
    }
    return render_template_string(
        TEMPLATE_ISSUES, grouped_issues=grouped, stats=stats, all_categories=cats
    )


@app.route("/issues/add", methods=["POST"])
def add_issue():
    issues = load_issues()
    new_id = max([i["id"] for i in issues] + [0]) + 1
    issues.append(
        {
            "id": new_id,
            "title": request.form.get("title"),
            "description": request.form.get("description"),
            "category": request.form.get("category"),
            "status": "Open",
            "created_date": datetime.now().strftime("%Y-%m-%d %H:%M:%S"),
            "last_updated": datetime.now().strftime("%Y-%m-%d %H:%M:%S"),
        }
    )
    save_issues(issues)
    return redirect(url_for("issues"))


@app.route("/issues/update", methods=["POST"])
def update_issue():
    issues, iid = load_issues(), int(request.form.get("issue_id"))
    for i in issues:
        if i["id"] == iid:
            i.update(
                {
                    "title": request.form.get("title"),
                    "description": request.form.get("description"),
                    "category": request.form.get("category"),
                    "status": request.form.get("status"),
                    "last_updated": datetime.now().strftime("%Y-%m-%d %H:%M:%S"),
                }
            )
    save_issues(issues)
    return redirect(url_for("issues"))


@app.route("/issues/delete/<int:iid>")
def delete_issue(iid):
    save_issues([i for i in load_issues() if i["id"] != iid])
    return redirect(url_for("issues"))


def run_flask():
    app.run(debug=False, port=5432)


if __name__ == "__main__":
    t = threading.Thread(target=run_flask)
    t.daemon = True
    t.start()
    webview.create_window(
        "Project Manager",
        "http://127.0.0.1:5432",
        width=1280,
        height=800,
        resizable=True,
    )
    webview.start(icon=resource_path("static/favicon.ico"))