<?php
// ── DB migrations ─────────────────────────────────────────────────────────────
try { $pdo->exec("ALTER TABLE notes ADD COLUMN color TEXT DEFAULT NULL"); } catch(Exception $e) {}
try { $pdo->exec("ALTER TABLE notes ADD COLUMN image_path TEXT DEFAULT NULL"); } catch(Exception $e) {}
try { $pdo->exec("ALTER TABLE notes ADD COLUMN updated_at DATETIME DEFAULT NULL"); } catch(Exception $e) {}
try { $pdo->exec("ALTER TABLE notes ADD COLUMN label_name TEXT DEFAULT NULL"); } catch(Exception $e) {}
try {
    $pdo->exec("CREATE TABLE IF NOT EXISTS notes (
        id INTEGER PRIMARY KEY AUTOINCREMENT,
        title TEXT,
        content TEXT,
        owner_id INTEGER,
        color TEXT DEFAULT NULL,
        image_path TEXT DEFAULT NULL,
        created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
        updated_at DATETIME DEFAULT NULL,
        FOREIGN KEY (owner_id) REFERENCES users(id) ON DELETE CASCADE
    )");
} catch(Exception $e) {}
try {
    $pdo->exec("CREATE TABLE IF NOT EXISTS note_shares (
        id INTEGER PRIMARY KEY AUTOINCREMENT,
        note_id INTEGER,
        share_type TEXT,
        share_id INTEGER,
        FOREIGN KEY (note_id) REFERENCES notes(id) ON DELETE CASCADE
    )");
} catch(Exception $e) {}

// ── Handle POST ───────────────────────────────────────────────────────────────
if($_SERVER['REQUEST_METHOD'] === 'POST') {

    if(isset($_POST['create_note'])) {
        $image_path = null;
        if(isset($_FILES['note_image']) && $_FILES['note_image']['error'] === 0) {
            $allowed = ['image/jpeg','image/png','image/gif','image/webp'];
            if(in_array($_FILES['note_image']['type'], $allowed)) {
                $ext = pathinfo($_FILES['note_image']['name'], PATHINFO_EXTENSION);
                $fname = 'note_' . $user_id . '_' . time() . '.' . $ext;
                $dest = 'uploads/' . $fname;
                if(move_uploaded_file($_FILES['note_image']['tmp_name'], $dest)) $image_path = $dest;
            }
        }
        $stmt = $pdo->prepare("INSERT INTO notes (title, content, owner_id, color, image_path, label_name) VALUES (?, ?, ?, ?, ?, ?)");
        $stmt->execute([$_POST['title'] ?? 'Untitled', $_POST['content'], $user_id, $_POST['color'] ?? null, $image_path, trim($_POST['label_name'] ?? '') ?: null]);
        // Note creation only notifies owner in UI, but we can trigger a WAHA self-alert if they have it enabled
        notify_user($user_id, "You created a new note: " . ($_POST['title'] ?? 'Untitled'), ['action'=>'Created', 'module'=>'Note', 'item'=>$_POST['title']??'Untitled']);
    }

    if(isset($_POST['update_note'])) {
        $n = query("SELECT owner_id, image_path FROM notes WHERE id=?", [$_POST['note_id']])->fetch();
        if($n && $n['owner_id'] == $user_id) {
            $image_path = $n['image_path'];
            if(isset($_FILES['note_image']) && $_FILES['note_image']['error'] === 0) {
                $allowed = ['image/jpeg','image/png','image/gif','image/webp'];
                if(in_array($_FILES['note_image']['type'], $allowed)) {
                    $ext = pathinfo($_FILES['note_image']['name'], PATHINFO_EXTENSION);
                    $fname = 'note_' . $user_id . '_' . time() . '.' . $ext;
                    $dest = 'uploads/' . $fname;
                    if(move_uploaded_file($_FILES['note_image']['tmp_name'], $dest)) {
                        if($image_path && file_exists($image_path)) @unlink($image_path);
                        $image_path = $dest;
                    }
                }
            }
            if(isset($_POST['remove_image']) && $_POST['remove_image']) {
                if($image_path && file_exists($image_path)) @unlink($image_path);
                $image_path = null;
            }
            $stmt = $pdo->prepare("UPDATE notes SET title=?, content=?, color=?, image_path=?, label_name=?, updated_at=CURRENT_TIMESTAMP WHERE id=? AND owner_id=?");
            $stmt->execute([$_POST['title'] ?? 'Untitled', $_POST['content'], $_POST['color'] ?? null, $image_path, trim($_POST['label_name'] ?? '') ?: null, $_POST['note_id'], $user_id]);
            
            $ctx = ['action'=>'Updated', 'module'=>'Note', 'item'=>$_POST['title']??'Untitled'];
            // Notify owner
            notify_user($user_id, "Note '{$_POST['title']}' updated.", $ctx);
            // Notify anyone this note is shared with
            $shares = query("SELECT share_type, share_id FROM note_shares WHERE note_id=?", [$_POST['note_id']])->fetchAll();
            foreach($shares as $sh) {
                if($sh['share_type'] === 'user') notify_user($sh['share_id'], "Shared note '{$_POST['title']}' updated.", $ctx);
                else notify_group($sh['share_id'], "Shared group note '{$_POST['title']}' updated.", $ctx);
            }
        }
    }

    if(isset($_POST['delete_note'])) {
        $n = query("SELECT owner_id, image_path, title FROM notes WHERE id=?", [$_POST['note_id']])->fetch();
        if($n && $n['owner_id'] == $user_id) {
            if($n['image_path'] && file_exists($n['image_path'])) @unlink($n['image_path']);
            $ctx = ['action'=>'Deleted', 'module'=>'Note', 'item'=>$n['title']??'Untitled'];
            // Notify anyone it was shared with before deleting
            $shares = query("SELECT share_type, share_id FROM note_shares WHERE note_id=?", [$_POST['note_id']])->fetchAll();
            foreach($shares as $sh) {
                if($sh['share_type'] === 'user') notify_user($sh['share_id'], "Shared note '{$n['title']}' has been deleted.", $ctx);
                else notify_group($sh['share_id'], "Shared group note '{$n['title']}' has been deleted.", $ctx);
            }
            query("DELETE FROM notes WHERE id=? AND owner_id=?", [$_POST['note_id'], $user_id]);
            notify_user($user_id, "Note '{$n['title']}' has been deleted.", $ctx);
        }
    }

    if(isset($_POST['share_note'])) {
        $n_id = $_POST['note_id'];
        $share = $_POST['share_target'];
        $parts = explode('_', $share, 2);
        if(count($parts)===2) {
            $stmt = $pdo->prepare("INSERT INTO note_shares (note_id, share_type, share_id) VALUES (?, ?, ?)");
            $stmt->execute([$n_id, $parts[0], $parts[1]]);
            $n = query("SELECT title FROM notes WHERE id=?", [$n_id])->fetch();
            $msg = "A note '{$n['title']}' has been shared with you.";
            $ctx = ['action'=>'Shared', 'module'=>'Note', 'item'=>$n['title']??'Untitled', 'user'=>$_SESSION['username']??'System'];
            if($parts[0] === 'user') notify_user($parts[1], $msg, $ctx);
            else notify_group($parts[1], $msg, $ctx);
        }
    }

    if(isset($_POST['remove_note_share'])) {
        $share_id = (int)$_POST['share_id'];
        $chk = query("SELECT ns.id FROM note_shares ns JOIN notes n ON ns.note_id=n.id WHERE ns.id=? AND n.owner_id=?", [$share_id, $user_id])->fetch();
        if($chk) {
            $pdo->prepare("DELETE FROM note_shares WHERE id=?")->execute([$share_id]);
        }
    }
}

// ── Fetch Notes ───────────────────────────────────────────────────────────────
$user_groups = get_user_groups($user_id);
$my_group_ids = array_column($user_groups, 'id');
$group_in = implode(',', array_fill(0, count($my_group_ids), '?')) ?: '0';

$sql = "SELECT n.*, (n.owner_id = ?) as is_mine, u.username as owner_name FROM notes n 
        LEFT JOIN note_shares ns ON n.id = ns.note_id
        LEFT JOIN users u ON n.owner_id = u.id
        WHERE n.owner_id = ? 
        OR (ns.share_type='user' AND ns.share_id = ?) 
        OR (ns.share_type='group' AND ns.share_id IN ($group_in))
        GROUP BY n.id ORDER BY n.updated_at DESC, n.created_at DESC";
$params = array_merge([$user_id, $user_id, $user_id], $my_group_ids);
$stmt = $pdo->prepare($sql);
$stmt->execute($params);
$notes = $stmt->fetchAll();

$all_users = query("SELECT id, username FROM users WHERE id != ?", [$user_id])->fetchAll();
$all_groups = query("SELECT * FROM groups")->fetchAll();
$label_names = [];
foreach($notes as $n) {
    $lbls = explode(',', (string)($n['label_name'] ?? ''));
    foreach($lbls as $lbl) {
        $lbl = trim($lbl);
        if($lbl !== '') $label_names[strtolower($lbl)] = $lbl;
    }
}
natcasesort($label_names);

// Define note colors — Google Keep inspired
$note_colors = [
    ''        => ['bg'=>'var(--surface)', 'label'=>'Default',    'hex'=>'#ffffff'],
    '#fff9c4' => ['bg'=>'#fff9c4',        'label'=>'Yellow',     'hex'=>'#fff9c4'],
    '#ccff90' => ['bg'=>'#ccff90',        'label'=>'Lime',       'hex'=>'#ccff90'],
    '#d4edda' => ['bg'=>'#d4edda',        'label'=>'Sage',       'hex'=>'#d4edda'],
    '#80cbc4' => ['bg'=>'#80cbc4',        'label'=>'Teal',       'hex'=>'#80cbc4'],
    '#b3e5fc' => ['bg'=>'#b3e5fc',        'label'=>'Sky',        'hex'=>'#b3e5fc'],
    '#cce5ff' => ['bg'=>'#cce5ff',        'label'=>'Blue',       'hex'=>'#cce5ff'],
    '#e2d9f3' => ['bg'=>'#e2d9f3',        'label'=>'Lavender',   'hex'=>'#e2d9f3'],
    '#f3e5f5' => ['bg'=>'#f3e5f5',        'label'=>'Orchid',     'hex'=>'#f3e5f5'],
    '#f8d7da' => ['bg'=>'#f8d7da',        'label'=>'Rose',       'hex'=>'#f8d7da'],
    '#ef9a9a' => ['bg'=>'#ef9a9a',        'label'=>'Red',        'hex'=>'#ef9a9a'],
    '#ffcc80' => ['bg'=>'#ffcc80',        'label'=>'Peach',      'hex'=>'#ffcc80'],
    '#fde8d8' => ['bg'=>'#fde8d8',        'label'=>'Orange',     'hex'=>'#fde8d8'],
    '#d7ccc8' => ['bg'=>'#d7ccc8',        'label'=>'Sand',       'hex'=>'#d7ccc8'],
    '#f5f5f5' => ['bg'=>'#f5f5f5',        'label'=>'Stone',      'hex'=>'#f5f5f5'],
    '#e8f5e9' => ['bg'=>'#e8f5e9',        'label'=>'Mint',       'hex'=>'#e8f5e9'],
    '#fff3e0' => ['bg'=>'#fff3e0',        'label'=>'Apricot',    'hex'=>'#fff3e0'],
    '#fce4ec' => ['bg'=>'#fce4ec',        'label'=>'Pink',       'hex'=>'#fce4ec'],
    '#ede7f6' => ['bg'=>'#ede7f6',        'label'=>'Violet',     'hex'=>'#ede7f6'],
    '#e0f7fa' => ['bg'=>'#e0f7fa',        'label'=>'Cyan',       'hex'=>'#e0f7fa'],
    '#fffde7' => ['bg'=>'#fffde7',        'label'=>'Butter',     'hex'=>'#fffde7'],
];
?>

<div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem; gap:0.75rem; flex-wrap:wrap;">
    <button class="btn" onclick="document.getElementById('new-note-modal').classList.add('active')">
        <i class="fa fa-plus"></i> New Note
    </button>
    <div style="display:flex; align-items:center; gap:0.5rem; flex-wrap:wrap;">
        <input type="text" id="notes-search-input" class="form-control" placeholder="Search notes..." style="width:200px; padding:0.45rem 0.6rem; font-size:0.84rem;" oninput="filterNotes()">
        <select id="notes-label-filter" class="form-control" style="width:180px; padding:0.45rem 0.6rem; font-size:0.84rem;" onchange="filterNotes()">
            <option value="">All labels</option>
            <?php foreach($label_names as $lbl): ?>
                <option value="<?= htmlspecialchars(strtolower($lbl)) ?>"><?= htmlspecialchars($lbl) ?></option>
            <?php endforeach; ?>
        </select>
    </div>
</div>

<!-- ── New Note Modal ─────────────────────────────────────────────────────── -->
<div class="modal-overlay" id="new-note-modal">
    <div class="modal-content note-modal-compact" style="max-width:760px; max-height:92vh; overflow-y:auto;">
        <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem;">
            <h3 style="font-size:1rem; font-weight:700;">New Note</h3>
            <button type="button" style="background:none;border:none;color:var(--text-light);cursor:pointer;font-size:1.2rem;" onclick="document.getElementById('new-note-modal').classList.remove('active')">×</button>
        </div>
        <form method="POST" enctype="multipart/form-data" id="new-note-form">
            <input type="hidden" name="create_note" value="1">
            <div class="note-modal-top-fields" style="display:grid; grid-template-columns:2fr 1fr; gap:0.75rem;">
                <div class="form-group">
                    <input type="text" name="title" class="form-control" placeholder="Title..." id="new-note-title" style="font-weight:600; font-size:1rem;">
                </div>
                <div class="form-group">
                    <label style="font-size:0.8rem; color:var(--text-light); margin-bottom:0.25rem; display:block;">Tags</label>
                    <input type="text" name="label_name" class="form-control tagify-input" id="new-note-label" placeholder="Add tags...">
                </div>
            </div>
            <!-- WYSIWYG Toolbar -->
            <div class="note-editor-toolbar" id="new-note-toolbar">
                <button type="button" class="note-toolbar-btn" onclick="formatNote('new-note-content','bold')" title="Bold"><b>B</b></button>
                <button type="button" class="note-toolbar-btn" onclick="formatNote('new-note-content','italic')" title="Italic"><i>I</i></button>
                <button type="button" class="note-toolbar-btn" onclick="insertMarkdown('new-note-content','# ')" title="H1">H1</button>
                <button type="button" class="note-toolbar-btn" onclick="insertMarkdown('new-note-content','## ')" title="H2">H2</button>
                <button type="button" class="note-toolbar-btn" onclick="insertMarkdown('new-note-content','### ')" title="H3">H3</button>
                <button type="button" class="note-toolbar-btn" onclick="insertMarkdown('new-note-content','- ')" title="Bullet">• List</button>
                <button type="button" class="note-toolbar-btn" onclick="insertMarkdown('new-note-content','1. ')" title="Numbered">1. List</button>
                <button type="button" class="note-toolbar-btn" onclick="insertMarkdown('new-note-content','- [ ] ')" title="Todo">☑ Todo</button>
                <button type="button" class="note-toolbar-btn" onclick="wrapMarkdown('new-note-content','`','`')" title="Code"><code>Code</code></button>
                <button type="button" class="note-toolbar-btn" onclick="wrapMarkdown('new-note-content','```\n','\n```')" title="Code Block">{ } Block</button>
                <button type="button" class="note-toolbar-btn" onclick="insertMarkdown('new-note-content','> ')" title="Quote">❝ Quote</button>
                <button type="button" class="note-toolbar-btn" onclick="insertMarkdown('new-note-content','---\n')" title="Divider">─ Line</button>
                <button type="button" class="note-toolbar-btn" id="new-preview-btn" onclick="togglePreview('new-note-content','new-note-preview','new-preview-btn')">👁 Preview</button>
            </div>
            <div class="form-group">
                <textarea name="content" id="new-note-content" class="note-content-area" placeholder="Write your note... (Markdown supported)" rows="8"></textarea>
                <div id="new-note-preview" class="markdown-body" style="display:none; min-height:160px; border:1px solid var(--border); border-radius:0.5rem; padding:0.75rem; background:var(--bg); font-size:0.9rem;"></div>
            </div>
            <!-- Color picker -->
            <div class="form-group">
                <label style="font-size:0.8rem; color:var(--text-light);">Note Color</label>
                <div class="note-color-palette" id="new-note-colors">
                    <?php foreach($note_colors as $hex => $info): ?>
                    <div class="color-swatch <?= !$hex ? 'selected' : '' ?>" 
                        style="background:<?= $hex ?: '#fff' ?>; border:2px solid var(--border);"
                        onclick="selectColor(this,'new-note-color-input','<?= $hex ?>')"
                        title="<?= $info['label'] ?>"></div>
                    <?php endforeach; ?>
                </div>
                <input type="hidden" name="color" id="new-note-color-input" value="">
            </div>
            <!-- Image upload -->
            <div class="form-group">
                <label style="font-size:0.8rem; color:var(--text-light);">Attach Image (optional)</label>
                <input type="file" name="note_image" accept="image/*" class="form-control">
            </div>
            <div style="display:flex; gap:0.5rem; justify-content:flex-end; margin-top:1rem;">
                <button type="button" class="btn btn-secondary" onclick="document.getElementById('new-note-modal').classList.remove('active')">Cancel</button>
                <button type="submit" class="btn"><i class="fa fa-save"></i> Save Note</button>
            </div>
        </form>
    </div>
</div>

<!-- ── View Note Modal ────────────────────────────────────────────────────── -->
<div class="modal-overlay" id="view-note-modal">
    <div class="modal-content note-modal-compact" style="max-width:760px; max-height:92vh; overflow-y:auto; padding:0; background:var(--bg);">
        <div id="view-note-header" style="padding:1.5rem; border-bottom:1px solid var(--border); background:var(--surface); position:sticky; top:0; z-index:10;">
            <div style="display:flex; justify-content:space-between; align-items:flex-start; gap:1rem;">
                <div style="flex:1; min-width:0;">
                    <h2 id="view-note-title" style="margin:0 0 0.5rem 0; font-size:1.4rem; font-weight:800; line-height:1.3; color:var(--text); word-wrap:break-word;"></h2>
                    <div style="display:flex; align-items:center; gap:0.5rem; flex-wrap:wrap;">
                        <span id="view-note-label-container" style="display:none; align-items:center; gap:0.35rem; padding:3px 8px; border-radius:999px; background:rgba(var(--primary-rgb),0.12); color:var(--primary); font-size:0.75rem; font-weight:600;">
                            <i class="fa fa-tag" style="font-size:0.7rem;"></i> <span id="view-note-label"></span>
                        </span>
                        <span id="view-note-date" style="font-size:0.8rem; color:var(--text-light);"></span>
                        <span id="view-note-shared-badge" class="note-card-shared-badge" style="display:none;">Shared</span>
                    </div>
                </div>
                <div style="display:flex; align-items:center; gap:0.5rem; flex-shrink:0;">
                    <button class="btn btn-sm btn-secondary" id="view-note-edit-btn" onclick="transToEditNote()"><i class="fa fa-pencil"></i> Edit</button>
                    <button type="button" style="background:none;border:none;color:var(--text-light);cursor:pointer;font-size:1.6rem; line-height:1; padding:0 4px;" onclick="document.getElementById('view-note-modal').classList.remove('active')">×</button>
                </div>
            </div>
            <div id="view-note-image-container" style="display:none; margin-top:1.25rem; border-radius:0.75rem; overflow:hidden; border:1px solid var(--border);">
                <img id="view-note-image" src="" style="width:100%; max-height:450px; object-fit:cover; display:block;">
            </div>
        </div>
        <div style="padding:1.5rem;">
            <div id="view-note-content" class="markdown-body" style="font-size:1rem; line-height:1.7; color:var(--text);"></div>
        </div>
    </div>
</div>

<!-- ── Edit Note Modal ────────────────────────────────────────────────────── -->
<div class="modal-overlay" id="edit-note-modal">
    <div class="modal-content note-modal-compact" style="max-width:760px; max-height:90vh; overflow-y:auto;">
        <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem;">
            <h3 style="margin:0;">Edit Note</h3>
            <button type="button" style="background:none;border:none;color:var(--text-light);cursor:pointer;font-size:1.2rem;" onclick="document.getElementById('edit-note-modal').classList.remove('active')">×</button>
        </div>
        <form method="POST" enctype="multipart/form-data" id="edit-note-form">
            <input type="hidden" name="update_note" value="1">
            <input type="hidden" name="note_id" id="edit-note-id">
            <div class="note-modal-top-fields" style="display:grid; grid-template-columns:2fr 1fr; gap:0.75rem;">
                <div class="form-group">
                    <input type="text" name="title" id="edit-note-title" class="form-control" placeholder="Title..." style="font-weight:600; font-size:1rem;">
                </div>
                <div class="form-group">
                    <label style="font-size:0.8rem; color:var(--text-light); margin-bottom:0.25rem; display:block;">Tags</label>
                    <input type="text" name="label_name" id="edit-note-label" class="form-control tagify-input" placeholder="Add tags...">
                </div>
            </div>
            <div class="note-editor-toolbar">
                <button type="button" class="note-toolbar-btn" onclick="formatNote('edit-note-content','bold')"><b>B</b></button>
                <button type="button" class="note-toolbar-btn" onclick="formatNote('edit-note-content','italic')"><i>I</i></button>
                <button type="button" class="note-toolbar-btn" onclick="insertMarkdown('edit-note-content','# ')">H1</button>
                <button type="button" class="note-toolbar-btn" onclick="insertMarkdown('edit-note-content','## ')">H2</button>
                <button type="button" class="note-toolbar-btn" onclick="insertMarkdown('edit-note-content','### ')">H3</button>
                <button type="button" class="note-toolbar-btn" onclick="insertMarkdown('edit-note-content','- ')">• List</button>
                <button type="button" class="note-toolbar-btn" onclick="insertMarkdown('edit-note-content','1. ')">1. List</button>
                <button type="button" class="note-toolbar-btn" onclick="insertMarkdown('edit-note-content','- [ ] ')">☑ Todo</button>
                <button type="button" class="note-toolbar-btn" onclick="wrapMarkdown('edit-note-content','`','`')"><code>Code</code></button>
                <button type="button" class="note-toolbar-btn" onclick="wrapMarkdown('edit-note-content','```\n','\n```')">{ } Block</button>
                <button type="button" class="note-toolbar-btn" onclick="insertMarkdown('edit-note-content','> ')">❝ Quote</button>
                <button type="button" class="note-toolbar-btn" id="edit-preview-btn" onclick="togglePreview('edit-note-content','edit-note-preview','edit-preview-btn')">👁 Preview</button>
            </div>
            <div class="form-group">
                <textarea name="content" id="edit-note-content" class="note-content-area" rows="8"></textarea>
                <div id="edit-note-preview" class="markdown-body" style="display:none; min-height:160px; border:1px solid var(--border); border-radius:0.5rem; padding:0.75rem; background:var(--bg); font-size:0.9rem;"></div>
            </div>
            <div class="form-group">
                <label style="font-size:0.8rem; color:var(--text-light);">Note Color</label>
                <div class="note-color-palette" id="edit-note-colors">
                    <?php foreach($note_colors as $hex => $info): ?>
                    <div class="color-swatch" 
                        style="background:<?= $hex ?: '#fff' ?>; border:2px solid var(--border);"
                        onclick="selectColor(this,'edit-note-color-input','<?= $hex ?>')"
                        title="<?= $info['label'] ?>"></div>
                    <?php endforeach; ?>
                </div>
                <input type="hidden" name="color" id="edit-note-color-input" value="">
            </div>
            <div id="edit-current-image" style="display:none; margin-bottom:0.75rem;">
                <label style="font-size:0.8rem; color:var(--text-light);">Current Image:</label>
                <div style="display:flex; align-items:center; gap:0.5rem; margin-top:0.25rem;">
                    <img id="edit-current-img-preview" src="" alt="Current" style="height:60px; border-radius:0.5rem; object-fit:cover;">
                    <label style="display:flex; align-items:center; gap:0.25rem; font-size:0.8rem; cursor:pointer;">
                        <input type="checkbox" name="remove_image" value="1"> Remove image
                    </label>
                </div>
            </div>
            <div class="form-group">
                <label style="font-size:0.8rem; color:var(--text-light);">Replace Image (optional)</label>
                <input type="file" name="note_image" accept="image/*" class="form-control">
            </div>

            <!-- Share section (only for owner) -->
            <div id="edit-share-section" style="border-top:1px solid var(--border); padding-top:0.75rem; margin-top:0.5rem;">
                <label style="font-size:0.8rem; color:var(--text-light); margin-bottom:0.4rem; display:block;">Shared with</label>
                <div id="note-shares-list" style="display:flex; flex-wrap:wrap; gap:0.35rem; margin-bottom:0.75rem;"></div>
                <div style="display:flex; gap:0.5rem; flex-wrap:wrap;">
                    <select name="share_target" id="edit-share-target" class="form-control" style="flex:1; min-width:150px; padding:0.4rem;">
                        <?php foreach($all_users as $u): ?>
                            <option value="user_<?= $u['id'] ?>">👤 <?= htmlspecialchars($u['username']) ?></option>
                        <?php endforeach; ?>
                        <?php foreach($all_groups as $g): ?>
                            <option value="group_<?= $g['id'] ?>">👥 <?= htmlspecialchars($g['name']) ?></option>
                        <?php endforeach; ?>
                    </select>
                    <button type="submit" name="share_note" value="1" class="btn btn-sm" onclick="this.form.action=''; document.querySelector('[name=update_note]').disabled=true; this.form.onsubmit=null;" formaction="">
                        <i class="fa fa-share-nodes"></i> Share
                    </button>
                </div>
            </div>

            <div style="display:flex; gap:0.5rem; justify-content:space-between; margin-top:1rem; flex-wrap:wrap;">
                <button type="button" class="btn btn-danger btn-sm" onclick="deleteNote(document.getElementById('edit-note-id').value)"><i class="fa fa-trash"></i> Delete</button>
                <div style="display:flex; gap:0.5rem;">
                    <button type="button" class="btn btn-secondary" onclick="document.getElementById('edit-note-modal').classList.remove('active')">Cancel</button>
                    <button type="submit" class="btn"><i class="fa fa-save"></i> Save Changes</button>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- Delete Note Form -->
<form method="POST" id="delete-note-form" style="display:none;">
    <input type="hidden" name="delete_note" value="1">
    <input type="hidden" name="note_id" id="delete-note-id">
</form>

<!-- Share Note Form (separate POST for share_note) -->
<form method="POST" id="share-note-standalone-form" style="display:none;">
    <input type="hidden" name="share_note" value="1">
    <input type="hidden" name="note_id" id="share-note-standalone-id">
    <input type="hidden" name="share_target" id="share-note-standalone-target">
</form>

<form method="POST" id="remove-note-share-form" style="display:none;">
    <input type="hidden" name="remove_note_share" value="1">
    <input type="hidden" name="share_id" id="remove-note-share-id">
</form>

<!-- Markdown Libs -->
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>

<!-- ── Notes Grid ─────────────────────────────────────────────────────────── -->
<?php if(empty($notes)): ?>
    <div style="text-align:center; padding:4rem 2rem; color:var(--text-light);">
        <div style="font-size:3rem; margin-bottom:1rem;">📝</div>
        <h3 style="margin-bottom:0.5rem;">No notes yet</h3>
        <p>Click <strong>New Note</strong> to start writing something.</p>
    </div>
<?php else: ?>
<div class="notes-grid">
    <?php foreach($notes as $n):
        $bg = $n['color'] ?: 'var(--surface)';
        $preview = strip_tags(isset($n['content']) ? (function_exists('marked') ? $n['content'] : $n['content']) : '');
        $preview = mb_substr($preview, 0, 120) . (mb_strlen($preview) > 120 ? '...' : '');
        $note_shares = [];
        if($n['is_mine']) {
            $note_shares = query("SELECT ns.id, ns.share_type, ns.share_id, u.username, u.profile_pic as upic, g.name as gname, g.profile_pic as gpic FROM note_shares ns LEFT JOIN users u ON (ns.share_type='user' AND ns.share_id=u.id) LEFT JOIN groups g ON (ns.share_type='group' AND ns.share_id=g.id) WHERE ns.note_id=?", [$n['id']])->fetchAll();
        }
        $shares_json = htmlspecialchars(json_encode($note_shares), ENT_QUOTES, 'UTF-8');
    ?>
    <div class="note-card note-filter-item" 
        style="background:<?= htmlspecialchars($bg) ?>;" 
        data-id="<?= $n['id'] ?>"
        data-title="<?= htmlspecialchars(addslashes((string)$n['title'])) ?>"
        data-content="<?= htmlspecialchars(addslashes((string)$n['content'])) ?>"
        data-label="<?= htmlspecialchars(strtolower(trim((string)($n['label_name'] ?? '')))) ?>"
        data-label-raw="<?= htmlspecialchars(trim((string)($n['label_name'] ?? ''))) ?>"
        data-color="<?= htmlspecialchars((string)$n['color']) ?>"
        data-image="<?= htmlspecialchars((string)($n['image_path'] ?? '')) ?>"
        data-shares="<?= $shares_json ?>"
        data-mine="<?= $n['is_mine'] ?>"
        data-updated="<?= date('M j, Y, H:i', strtotime($n['updated_at'] ?: $n['created_at'])) ?>"
        onclick="viewNote(this)">
        <?php if($n['image_path'] && file_exists($n['image_path'])): ?>
            <img src="<?= htmlspecialchars($n['image_path']) ?>" alt="Note image" class="note-card-img">
        <?php endif; ?>
        <?php if($n['title']): ?>
            <div class="note-card-title"><?= htmlspecialchars($n['title']) ?></div>
        <?php endif; ?>
        <?php if(!empty($n['label_name'])): ?>
            <div style="display:flex; flex-wrap:wrap; gap:0.35rem; margin-bottom:0.5rem;">
                <?php foreach(explode(',', $n['label_name']) as $lbl): $lbl=trim($lbl); if(!$lbl) continue; ?>
                <div style="display:inline-flex; align-items:center; gap:0.35rem; padding:3px 8px; border-radius:999px; background:rgba(var(--primary-rgb),0.12); color:var(--primary); font-size:0.7rem; font-weight:600;">
                    <i class="fa fa-tag" style="font-size:0.65rem;"></i> <?= htmlspecialchars($lbl) ?>
                </div>
                <?php endforeach; ?>
            </div>
        <?php endif; ?>
        <div class="note-card-preview"><?= htmlspecialchars($preview) ?></div>
        <div class="note-card-footer">
            <div style="display:flex; align-items:center; gap:0.4rem;">
                <?php if($n['color']): ?><div class="note-color-dot" style="background:<?= htmlspecialchars($n['color']) ?>;"></div><?php endif; ?>
                <span style="font-size:0.7rem; color:var(--text-light);"><?= date('M j', strtotime($n['updated_at'] ?: $n['created_at'])) ?></span>
                <?php if(!$n['is_mine']): ?>
                    <span class="note-card-shared-badge">Shared</span>
                <?php endif; ?>
            </div>
            <div class="note-card-actions" onclick="event.stopPropagation()">
                <?php if($n['is_mine']): ?>
                <button class="btn btn-sm btn-danger" style="padding:3px 7px;" onclick="deleteNote(<?= $n['id'] ?>)" title="Delete"><i class="fa fa-trash"></i></button>
                <?php endif; ?>
            </div>
        </div>
    </div>
    <?php endforeach; ?>
</div>
<?php endif; ?>

<script>
// ── WYSIWYG Markdown Tools ────────────────────────────────────────────────────
function formatNote(textareaId, cmd) {
    const ta = document.getElementById(textareaId);
    const start = ta.selectionStart, end = ta.selectionEnd;
    const sel = ta.value.substring(start, end);
    let wrap = cmd === 'bold' ? '**' : '_';
    const replacement = `${wrap}${sel || 'text'}${wrap}`;
    ta.value = ta.value.substring(0, start) + replacement + ta.value.substring(end);
    ta.focus();
    ta.selectionStart = start + wrap.length;
    ta.selectionEnd = start + wrap.length + (sel || 'text').length;
}

function insertMarkdown(textareaId, prefix) {
    const ta = document.getElementById(textareaId);
    const start = ta.selectionStart;
    // Go to start of line
    const before = ta.value.substring(0, start);
    const lineStart = before.lastIndexOf('\n') + 1;
    ta.value = ta.value.substring(0, lineStart) + prefix + ta.value.substring(lineStart);
    ta.focus();
    const newPos = lineStart + prefix.length + (start - lineStart);
    ta.selectionStart = ta.selectionEnd = newPos;
}

function wrapMarkdown(textareaId, before, after) {
    const ta = document.getElementById(textareaId);
    const start = ta.selectionStart, end = ta.selectionEnd;
    const sel = ta.value.substring(start, end);
    ta.value = ta.value.substring(0, start) + before + (sel || 'code') + after + ta.value.substring(end);
    ta.focus();
}

function togglePreview(contentId, previewId, btnId) {
    const content = document.getElementById(contentId);
    const preview = document.getElementById(previewId);
    const btn = document.getElementById(btnId);
    if(preview.style.display === 'none') {
        preview.innerHTML = marked.parse(content.value || '');
        preview.style.display = 'block';
        content.style.display = 'none';
        btn.textContent = '✏️ Edit';
    } else {
        preview.style.display = 'none';
        content.style.display = 'block';
        btn.textContent = '👁 Preview';
    }
}

function selectColor(el, inputId, color) {
    el.closest('.note-color-palette').querySelectorAll('.color-swatch').forEach(s => s.classList.remove('selected'));
    el.classList.add('selected');
    document.getElementById(inputId).value = color;
}

function openNote(card) {
    const id = card.dataset.id;
    const title = card.dataset.title;
    const content = card.dataset.content;
    const color = card.dataset.color;
    const label = card.dataset.labelRaw || '';
    const image = card.dataset.image;
    const isMine = card.dataset.mine === '1';

    document.getElementById('edit-note-id').value = id;
    document.getElementById('edit-note-title').value = title;
    document.getElementById('edit-note-content').value = content;
    document.getElementById('edit-note-label').value = label;
    document.getElementById('edit-note-color-input').value = color;
    document.getElementById('edit-note-preview').style.display = 'none';
    document.getElementById('edit-note-content').style.display = 'block';
    document.getElementById('edit-preview-btn').innerHTML = '👁 Preview';

    // Color swatches
    document.querySelectorAll('#edit-note-colors .color-swatch').forEach(s => {
        s.classList.remove('selected');
        const swatchColor = s.getAttribute('onclick').match(/'([^']*)'/g);
        if(swatchColor && swatchColor[1] && swatchColor[1].replace(/'/g,'') === color) s.classList.add('selected');
        if(!color && s.title === 'Default') s.classList.add('selected');
    });

    // Image preview
    const imgBlock = document.getElementById('edit-current-image');
    if(image) {
        imgBlock.style.display = 'block';
        document.getElementById('edit-current-img-preview').src = image;
    } else {
        imgBlock.style.display = 'none';
    }

    // Share section
    document.getElementById('edit-share-section').style.display = isMine ? 'block' : 'none';
    if(isMine) {
        renderNoteShares(card.dataset.shares || '[]');
    }

    // Wire up share button
    const shareBtn = document.querySelector('#edit-note-form button[name="share_note"]');
    if(shareBtn) {
        shareBtn.onclick = (e) => {
            e.preventDefault();
            const target = document.getElementById('edit-share-target').value;
            document.getElementById('share-note-standalone-id').value = id;
            document.getElementById('share-note-standalone-target').value = target;
            document.getElementById('share-note-standalone-form').submit();
        };
    }

    document.getElementById('edit-note-modal').classList.add('active');
}

let currentViewedCard = null;

function viewNote(card) {
    currentViewedCard = card;
    const title = card.dataset.title || 'Untitled Note';
    const content = card.dataset.content || '';
    const label = card.dataset.labelRaw || '';
    const image = card.dataset.image;
    const updatedAt = card.dataset.updated;
    const isMine = card.dataset.mine === '1';
    
    document.getElementById('view-note-title').textContent = title;
    
    
    // Clear old tags
    document.getElementById('view-note-label-container').innerHTML = '';
    
    if(label) {
        document.getElementById('view-note-label-container').style.display = 'flex';
        const lbls = label.split(',');
        lbls.forEach(l => {
            const span = document.createElement('span');
            span.style.cssText = 'display:inline-flex; align-items:center; gap:0.35rem; padding:3px 8px; border-radius:999px; background:rgba(var(--primary-rgb),0.12); color:var(--primary); font-size:0.75rem; font-weight:600;';
            span.innerHTML = `<i class="fa fa-tag" style="font-size:0.7rem;"></i> ${l.trim()}`;
            document.getElementById('view-note-label-container').appendChild(span);
        });
    } else {
        document.getElementById('view-note-label-container').style.display = 'none';
    }
    
    document.getElementById('view-note-date').textContent = 'Updated ' + updatedAt;
    document.getElementById('view-note-shared-badge').style.display = !isMine ? 'inline-block' : 'none';
    
    if(image) {
        document.getElementById('view-note-image-container').style.display = 'block';
        document.getElementById('view-note-image').src = image;
    } else {
        document.getElementById('view-note-image-container').style.display = 'none';
    }
    
    document.getElementById('view-note-content').innerHTML = marked.parse(content);
    
    document.getElementById('view-note-edit-btn').style.display = isMine ? 'inline-flex' : 'none';
    
    document.getElementById('view-note-modal').classList.add('active');
}

function transToEditNote() {
    if(currentViewedCard) {
        document.getElementById('view-note-modal').classList.remove('active');
        openNote(currentViewedCard);
    }
}

function renderNoteShares(jsonShares) {
    const list = document.getElementById('note-shares-list');
    list.innerHTML = '';
    let shares = [];
    try { shares = JSON.parse(jsonShares || '[]'); } catch(e) { shares = []; }
    if(shares.length === 0) return;
    shares.forEach(sh => {
        const pic = sh.share_type === 'user' ? sh.upic : sh.gpic;
        const name = sh.share_type === 'user' ? (sh.username || 'User') : (sh.gname || 'Group');
        const icon = sh.share_type === 'user' ? '👤' : '👥';
        
        const chip = document.createElement('div');
        chip.className = 'share-chip';
        chip.style.display = 'inline-flex';
        chip.style.alignItems = 'center';
        chip.style.gap = '0.4rem';
        chip.style.fontSize = '0.72rem';
        chip.style.padding = '2px 8px 2px 2px';
        chip.style.borderRadius = '999px';
        chip.style.background = 'rgba(var(--primary-rgb),0.1)';
        chip.style.color = 'var(--primary)';
        chip.style.border = '1px solid rgba(var(--primary-rgb),0.2)';
        
        let avatarHtml = `<div style="width:20px; height:20px; border-radius:50%; background:var(--primary); color:white; display:flex; align-items:center; justify-content:center; font-size:0.6rem; font-weight:700; overflow:hidden;">${name.charAt(0).toUpperCase()}</div>`;
        if(pic) {
            avatarHtml = `<img src="${pic}" style="width:20px; height:20px; border-radius:50%; object-fit:cover;">`;
        }

        chip.innerHTML = `${avatarHtml}<span style="font-weight:600;">${name}</span><button type="button" style="border:none;background:transparent;color:inherit;cursor:pointer;line-height:1;margin-left:2px;font-size:0.9rem;" title="Unshare" onclick="removeNoteShare(${Number(sh.id)})">×</button>`;
        list.appendChild(chip);
    });
}

function removeNoteShare(shareId) {
    if(!shareId) return;
    appConfirm('Unshare this note access?').then(y => {
        if(y) {
            document.getElementById('remove-note-share-id').value = String(shareId);
            document.getElementById('remove-note-share-form').submit();
        }
    });
}

function filterNotes() {
    const q = (document.getElementById('notes-search-input')?.value || '').toLowerCase().trim();
    const lbl = (document.getElementById('notes-label-filter')?.value || '').trim();
    document.querySelectorAll('.note-filter-item').forEach(card => {
        const t = (card.dataset.title || '').toLowerCase();
        const c = (card.dataset.content || '').toLowerCase();
        // data-label is now comma separated
        const cardLabels = (card.dataset.label || '').split(',').map(s=>s.trim());
        const okText = !q || t.includes(q) || c.includes(q) || cardLabels.join(' ').includes(q);
        const okLabel = !lbl || cardLabels.includes(lbl);
        card.style.display = (okText && okLabel) ? '' : 'none';
    });
}

function deleteNote(id) {
    appConfirm('Delete this note permanently?').then(y => {
        if(y) {
            document.getElementById('delete-note-id').value = id;
            document.getElementById('delete-note-form').submit();
        }
    });
}

// Fix note card colors in dark mode
function applyDarkNoteColors() {
    const isDark = document.body.classList.contains('dark-mode');
    document.querySelectorAll('.note-card').forEach(card => {
        const origColor = card.dataset.color;
        if(!origColor && isDark) {
            card.style.background = 'var(--surface)';
        }
    });
}
const observer = new MutationObserver(applyDarkNoteColors);
observer.observe(document.body, {attributes: true, attributeFilter: ['class']});
applyDarkNoteColors();
</script>