import React, { useState, useEffect, useLayoutEffect, useMemo, useCallback, memo, createContext, useContext, useRef } from 'react';
import { ProgressSpinner } from 'primereact/progressspinner';
import { authFetch } from '@/utils/authFetch';

// ============================================================================

// Image modal context for child components to trigger modal
const ImageModalContext = createContext(null);

// Trusted domains that can be embedded directly without server-side proxy
const TRUSTED_DOMAINS = new Set([
    'youtube.com', 'www.youtube.com', 'youtu.be',
    'instagram.com', 'www.instagram.com',
    'twitter.com', 'x.com', 'www.twitter.com',
    'twitch.tv', 'www.twitch.tv', 'clips.twitch.tv',
    'spotify.com', 'open.spotify.com',
    'soundcloud.com', 'www.soundcloud.com',
    'vimeo.com', 'www.vimeo.com',
    'imgur.com', 'i.imgur.com',
    'giphy.com', 'media.giphy.com',
    'tenor.com', 'media.tenor.com',
    'gfycat.com',
    'reddit.com', 'www.reddit.com', 'v.redd.it', 'i.redd.it',
    'github.com', 'gist.github.com',
    'raw.githubusercontent.com', 'avatars.githubusercontent.com',
    'user-images.githubusercontent.com', 'camo.githubusercontent.com',
    'opengraph.githubassets.com',
    'codepen.io', 'codesandbox.io',
    'streamable.com', 'medal.tv',
    'discord.com', 'cdn.discordapp.com', 'media.discordapp.net',
    // Common image CDNs
    'picsum.photos', 'images.unsplash.com', 'unsplash.com',
    'pbs.twimg.com', 'abs.twimg.com',
    'img.youtube.com', 'i.ytimg.com',
    'w3schools.com', 'www.w3schools.com', // for demo video
]);

// Image extensions
const IMAGE_EXTENSIONS = /\.(jpg|jpeg|png|gif|webp|svg|bmp|ico)(\?.*)?$/i;
// Video extensions
const VIDEO_EXTENSIONS = /\.(mp4|webm|mov|avi|mkv|m4v)(\?.*)?$/i;
// Audio extensions
const AUDIO_EXTENSIONS = /\.(mp3|wav|ogg|flac|m4a|aac)(\?.*)?$/i;

/**
 * Check if URL is from a trusted domain
 */
function isTrustedDomain(url) {
    try {
        const parsed = new URL(url);
        return TRUSTED_DOMAINS.has(parsed.hostname);
    } catch {
        return false;
    }
}

/**
 * Check if a URL is already a proxy URL (from our server)
 */
function isProxyUrl(url) {
    if (!url) return false;
    return url.startsWith('/api/image-proxy');
}

/**
 * Extract YouTube video ID
 */
function getYouTubeId(url) {
    try {
        const parsed = new URL(url);
        if (parsed.hostname === 'youtu.be') {
            return parsed.pathname.slice(1);
        }
        if (parsed.hostname.includes('youtube.com')) {
            return parsed.searchParams.get('v') || parsed.pathname.split('/').pop();
        }
    } catch {
        return null;
    }
    return null;
}

/**
 * Format file size
 */
function formatFileSize(bytes) {
    if (!bytes) return '';
    const units = ['B', 'KB', 'MB', 'GB'];
    let size = bytes;
    let unitIndex = 0;
    while (size >= 1024 && unitIndex < units.length - 1) {
        size /= 1024;
        unitIndex++;
    }
    return `${size.toFixed(1)} ${units[unitIndex]}`;
}

/**
 * Format Discord timestamp
 */
function formatTimestamp(timestamp, format = 'full') {
    const date = new Date(timestamp);
    const now = new Date();
    const isToday = date.toDateString() === now.toDateString();
    const isYesterday = new Date(now - 86400000).toDateString() === date.toDateString();

    const time = date.toLocaleTimeString('en-US', {
        hour: 'numeric',
        minute: '2-digit',
        hour12: true
    });

    if (format === 'time') return time;

    if (isToday) return `Today at ${time}`;
    if (isYesterday) return `Yesterday at ${time}`;

    return date.toLocaleDateString('en-US', {
        month: 'short',
        day: 'numeric',
        year: date.getFullYear() !== now.getFullYear() ? 'numeric' : undefined
    }) + ` at ${time}`;
}

/**
 * Format date for divider
 */
function formatDateDivider(timestamp) {
    const date = new Date(timestamp);
    return date.toLocaleDateString('en-US', {
        weekday: 'long',
        month: 'long',
        day: 'numeric',
        year: 'numeric'
    });
}

/**
 * Parse archived messages from #dds-archive channel
 * These messages were re-sent by a bot with this format:
 * 
 * **Topic/Category**
 * **YYYY-MM-DD HH:MM:SS.ssssss+00:00 (UTC)
 * username**: message content
 * 
 * Note: The ** wraps from the timestamp line through the username
 * Some messages are nested (archive of an archive) and need recursive parsing
 * 
 * Returns { originalAuthor, originalTimestamp, originalContent, topic } or null if not parseable
 */
function parseArchivedMessage(content, depth = 0) {
    if (!content || depth > 3) return null; // Prevent infinite recursion

    // The format is:
    // **Topic**
    // **Timestamp (UTC)
    // username**: content

    // Username cannot contain * or : characters, and ends with **:
    // This prevents matching nested archive content
    const boldPattern = /^\*\*(.+?)\*\*\s*\n\*\*(\d{4}-\d{2}-\d{2}\s+\d{2}:\d{2}:\d{2}(?:\.\d+)?(?:[+-]\d{2}:\d{2})?)\s*\(UTC\)\s*\n([^*:]+)\*\*:\s*([\s\S]*)$/;
    const boldMatch = content.match(boldPattern);

    if (boldMatch) {
        const topic = boldMatch[1].trim();
        const timestampStr = boldMatch[2].trim();
        let originalAuthor = boldMatch[3].trim();
        let originalContent = boldMatch[4].trim();

        // Parse the timestamp
        let originalTimestamp;
        try {
            const tsString = timestampStr.replace(' ', 'T');
            originalTimestamp = new Date(tsString);
            if (isNaN(originalTimestamp.getTime())) {
                originalTimestamp = new Date(tsString + 'Z');
            }
        } catch {
            return null;
        }

        if (isNaN(originalTimestamp.getTime())) {
            return null;
        }

        // Check if the content is itself another archive format (nested archive)
        // Pattern: **Topic**\n**username**: content (simpler format without timestamp)
        const nestedPattern = /^\*\*(.+?)\*\*\s*\n\*\*([^*:]+)\*\*:\s*([\s\S]*)$/;
        const nestedMatch = originalContent.match(nestedPattern);
        if (nestedMatch) {
            // This is a nested archive - use the inner author and content
            originalAuthor = nestedMatch[2].trim();
            originalContent = nestedMatch[3].trim();
        }

        // Also try recursive parsing for deeply nested archives
        const recursiveParsed = parseArchivedMessage(originalContent, depth + 1);
        if (recursiveParsed) {
            return {
                originalAuthor: recursiveParsed.originalAuthor,
                originalTimestamp: recursiveParsed.originalTimestamp || originalTimestamp.toISOString(),
                originalContent: recursiveParsed.originalContent,
                topic: recursiveParsed.topic || topic
            };
        }

        return {
            originalAuthor,
            originalTimestamp: originalTimestamp.toISOString(),
            originalContent,
            topic
        };
    }

    // Try simpler format: **Topic**\n**username**: content (no timestamp)
    const simplePattern = /^\*\*(.+?)\*\*\s*\n\*\*([^*:]+)\*\*:\s*([\s\S]*)$/;
    const simpleMatch = content.match(simplePattern);
    if (simpleMatch) {
        const topic = simpleMatch[1].trim();
        const originalAuthor = simpleMatch[2].trim();
        const originalContent = simpleMatch[3].trim();

        return {
            originalAuthor,
            originalTimestamp: null, // No timestamp in this format
            originalContent,
            topic
        };
    }

    // Fallback: try without bold markers (plain text format)
    const lines = content.split('\n');
    if (lines.length < 3) return null;

    const topic = lines[0].replace(/^\*\*|\*\*$/g, '').trim();
    const timestampLine = lines[1].replace(/^\*\*/, '').trim();

    // Parse timestamp - format: "2024-11-08 18:41:34.031000+00:00 (UTC)"
    const timestampMatch = timestampLine.match(/^(\d{4}-\d{2}-\d{2}\s+\d{2}:\d{2}:\d{2}(?:\.\d+)?(?:[+-]\d{2}:\d{2})?)\s*(?:\(UTC\))?$/);
    if (!timestampMatch) return null;

    // Get the rest as author**: message or author: message
    const messagePart = lines.slice(2).join('\n').trim();

    // Parse "author**: message" or "author: message" - author cannot contain * or :
    const authorMatch = messagePart.match(/^([^*:]+)\*?\*?:\s*([\s\S]*)$/);
    if (!authorMatch) return null;

    const originalAuthor = authorMatch[1].trim();
    const originalContent = authorMatch[2].trim();

    // Parse the timestamp
    let originalTimestamp;
    try {
        const tsString = timestampMatch[1].replace(' ', 'T');
        originalTimestamp = new Date(tsString);
        if (isNaN(originalTimestamp.getTime())) {
            originalTimestamp = new Date(timestampMatch[1].replace(' ', 'T') + 'Z');
        }
    } catch {
        return null;
    }

    if (isNaN(originalTimestamp.getTime())) {
        return null;
    }

    return {
        originalAuthor,
        originalTimestamp: originalTimestamp.toISOString(),
        originalContent,
        topic
    };
}

/**
 * Hardcoded user data for archived messages
 * Since these users may not be mentioned in current messages, we store their data directly
 * This includes avatar URLs, display names, and colors from the database
 */
const ARCHIVE_USERS = {
    // kriegerin -> cyberkriegerin (user_id: 992437729927376996)
    'kriegerin': {
        id: '992437729927376996',
        username: 'cyberkriegerin',
        displayName: 'kriegerin',
        avatar: 'https://cdn.discordapp.com/avatars/992437729927376996/3c4030cf3a210db4a180eab76e559ea2.png?size=1024',
        color: null,
    },
    // codey/Chris -> gizmo_a (user_id: 1172340700663255091)
    'codey': {
        id: '1172340700663255091',
        username: 'gizmo_a',
        displayName: 'Chris',
        avatar: 'https://cdn.discordapp.com/avatars/1172340700663255091/05b2a61faeba2363943a175df4ecb701.png?size=1024',
        color: null,
    },
    'Chris': {
        id: '1172340700663255091',
        username: 'gizmo_a',
        displayName: 'Chris',
        avatar: 'https://cdn.discordapp.com/avatars/1172340700663255091/05b2a61faeba2363943a175df4ecb701.png?size=1024',
        color: null,
    },
    // Havoc bot (user_id: 1175471063438737519)
    'Havoc': {
        id: '1175471063438737519',
        username: 'Havoc',
        displayName: 'Havoc',
        avatar: 'https://cdn.discordapp.com/avatars/1175471063438737519/5e70b92d710a8584d27ca76220f93d67.png?size=1024',
        color: null,
        bot: true,
    },
    // Deleted User / slip (user_id: 456226577798135808)
    'Deleted User': {
        id: '456226577798135808',
        username: 'slip',
        displayName: 'poopboy',
        avatar: 'https://codey.lol/images/456226577798135808.png',
        color: null,
    },
};

/**
 * Look up a real user from an archived username
 * First checks hardcoded ARCHIVE_USERS, then falls back to usersMap
 * If members data is provided, looks up color from there
 * Returns user data if found, otherwise returns a basic object with just the username
 */
function resolveArchivedUser(archivedUsername, usersMap, members) {
    // First check hardcoded archive users
    if (ARCHIVE_USERS[archivedUsername]) {
        const archivedUser = ARCHIVE_USERS[archivedUsername];
        // Look up color from members data if available
        let color = archivedUser.color;
        if (!color && members?.groups && archivedUser.id) {
            for (const group of members.groups) {
                const member = group.members?.find(m => m.id === archivedUser.id);
                if (member?.color) {
                    color = member.color;
                    break;
                }
            }
        }
        return {
            ...archivedUser,
            color,
            isArchiveResolved: true,
        };
    }

    // Fall back to usersMap lookup by username match
    if (usersMap) {
        for (const [userId, userData] of Object.entries(usersMap)) {
            if (userData.username === archivedUsername || userData.displayName === archivedUsername) {
                // Look up color from members data if not in usersMap
                let color = userData.color;
                if (!color && members?.groups) {
                    for (const group of members.groups) {
                        const member = group.members?.find(m => m.id === userId);
                        if (member?.color) {
                            color = member.color;
                            break;
                        }
                    }
                }
                return {
                    ...userData,
                    id: userId,
                    color,
                    isArchiveResolved: true,
                };
            }
        }
    }

    // Return basic user object if not found
    return {
        username: archivedUsername,
        displayName: archivedUsername,
        id: `archive-${archivedUsername}`,
        isArchiveResolved: false,
    };
}

/**
 * Parse Discord markdown-like formatting
 * @param {string} text - The text to parse
 * @param {Object} options - Options for parsing
 * @param {Map} options.channelMap - Map of channel IDs to channel objects
 * @param {Object} options.usersMap - Map of user IDs to user objects { displayName, username, color }
 * @param {Function} options.onChannelClick - Callback when channel is clicked
 */
function parseDiscordMarkdown(text, options = {}) {
    if (!text) return '';

    const { channelMap = new Map(), usersMap = {}, onChannelClick } = options;

    // Escape HTML first
    let parsed = text
        .replace(/&/g, '&amp;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;');

    // Code blocks (``` ```) - add data-lenis-prevent for independent scrolling
    // Must be processed first to prevent other formatting inside code
    parsed = parsed.replace(/```(\w+)?\n?([\s\S]*?)```/g, (_, lang, code) => {
        return `<pre class="discord-code-block" data-lenis-prevent><code>${code.trim()}</code></pre>`;
    });

    // Inline code (`) - must be early to prevent formatting inside code
    parsed = parsed.replace(/`([^`]+)`/g, '<code>$1</code>');

    // Blockquotes (> at start of line) - process before newline conversion
    // Group consecutive > lines into a single blockquote
    parsed = parsed.replace(/(^|\n)((?:&gt; .+(?:\n|$))+)/gm, (_, before, block) => {
        const content = block
            .split('\n')
            .map(line => line.replace(/^&gt; /, ''))
            .join('\n');
        return `${before}<blockquote class="discord-blockquote" data-lenis-prevent>${content}</blockquote>`;
    });

    // Headings (# ## ###) - must be at start of line
    // Process before other inline formatting
    parsed = parsed.replace(/(^|\n)### (.+?)(?=\n|$)/gm, (_, before, content) => {
        return `${before}<span class="discord-heading discord-heading-3">${content}</span>`;
    });
    parsed = parsed.replace(/(^|\n)## (.+?)(?=\n|$)/gm, (_, before, content) => {
        return `${before}<span class="discord-heading discord-heading-2">${content}</span>`;
    });
    parsed = parsed.replace(/(^|\n)# (.+?)(?=\n|$)/gm, (_, before, content) => {
        return `${before}<span class="discord-heading discord-heading-1">${content}</span>`;
    });

    // Subtext/small text (-# at start of line) - process before newline conversion
    parsed = parsed.replace(/(^|\n)-# (.+?)(?=\n|$)/gm, (_, before, content) => {
        return `${before}<span class="discord-subtext">${content}</span>`;
    });

    // Unordered lists (- or * at start of line, but not ---)
    parsed = parsed.replace(/(^|\n)[-*] (.+?)(?=\n|$)/gm, (_, before, content) => {
        return `${before}<span class="discord-list-item">• ${content}</span>`;
    });

    // Ordered lists (1. 2. etc at start of line)
    parsed = parsed.replace(/(^|\n)(\d+)\. (.+?)(?=\n|$)/gm, (_, before, num, content) => {
        return `${before}<span class="discord-list-item">${num}. ${content}</span>`;
    });

    // Bold + Italic + Underline combinations (most specific first)
    // ___***text***___ or ***___text___***
    parsed = parsed.replace(/(\*\*\*|___)(\*\*\*|___)([^*_]+)\2\1/g, '<strong><em><u>$3</u></em></strong>');

    // Bold + Italic (***text***)
    parsed = parsed.replace(/\*\*\*([^*]+)\*\*\*/g, '<strong><em>$1</em></strong>');

    // Bold + Underline (__**text**__ or **__text__**)
    parsed = parsed.replace(/__\*\*([^*_]+)\*\*__/g, '<u><strong>$1</strong></u>');
    parsed = parsed.replace(/\*\*__([^*_]+)__\*\*/g, '<strong><u>$1</u></strong>');

    // Italic + Underline (__*text*__ or *__text__* or ___text___)
    parsed = parsed.replace(/__\*([^*_]+)\*__/g, '<u><em>$1</em></u>');
    parsed = parsed.replace(/\*__([^*_]+)__\*/g, '<em><u>$1</u></em>');
    parsed = parsed.replace(/___([^_]+)___/g, '<u><em>$1</em></u>');

    // Bold (**)
    parsed = parsed.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');

    // Underline (__) - must come before italic _ handling
    parsed = parsed.replace(/__([^_]+)__/g, '<u>$1</u>');

    // Italic (* or _)
    parsed = parsed.replace(/\*([^*]+)\*/g, '<em>$1</em>');
    parsed = parsed.replace(/\b_([^_]+)_\b/g, '<em>$1</em>');

    // Strikethrough (~~)
    parsed = parsed.replace(/~~([^~]+)~~/g, '<del>$1</del>');

    // Spoiler (||)
    parsed = parsed.replace(/\|\|([^|]+)\|\|/g, '<span class="discord-spoiler">$1</span>');

    // Discord Timestamps (<t:1234567890:F>)
    parsed = parsed.replace(/&lt;t:(\d+)(?::([tTdDfFR]))?&gt;/g, (_, timestamp, format) => {
        const date = new Date(parseInt(timestamp) * 1000);
        let formatted;
        switch (format) {
            case 't': // Short time (9:30 PM)
                formatted = date.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' });
                break;
            case 'T': // Long time (9:30:00 PM)
                formatted = date.toLocaleTimeString();
                break;
            case 'd': // Short date (11/28/2024)
                formatted = date.toLocaleDateString();
                break;
            case 'D': // Long date (November 28, 2024)
                formatted = date.toLocaleDateString([], { dateStyle: 'long' });
                break;
            case 'f': // Short date/time (November 28, 2024 9:30 PM)
            default:
                formatted = date.toLocaleString([], { dateStyle: 'long', timeStyle: 'short' });
                break;
            case 'F': // Long date/time (Thursday, November 28, 2024 9:30 PM)
                formatted = date.toLocaleString([], { dateStyle: 'full', timeStyle: 'short' });
                break;
            case 'R': // Relative (2 hours ago)
                const now = Date.now();
                const diff = now - date.getTime();
                const seconds = Math.floor(Math.abs(diff) / 1000);
                const minutes = Math.floor(seconds / 60);
                const hours = Math.floor(minutes / 60);
                const days = Math.floor(hours / 24);
                const months = Math.floor(days / 30);
                const years = Math.floor(days / 365);

                if (diff < 0) {
                    // Future
                    if (years > 0) formatted = `in ${years} year${years > 1 ? 's' : ''}`;
                    else if (months > 0) formatted = `in ${months} month${months > 1 ? 's' : ''}`;
                    else if (days > 0) formatted = `in ${days} day${days > 1 ? 's' : ''}`;
                    else if (hours > 0) formatted = `in ${hours} hour${hours > 1 ? 's' : ''}`;
                    else if (minutes > 0) formatted = `in ${minutes} minute${minutes > 1 ? 's' : ''}`;
                    else formatted = `in ${seconds} second${seconds > 1 ? 's' : ''}`;
                } else {
                    // Past
                    if (years > 0) formatted = `${years} year${years > 1 ? 's' : ''} ago`;
                    else if (months > 0) formatted = `${months} month${months > 1 ? 's' : ''} ago`;
                    else if (days > 0) formatted = `${days} day${days > 1 ? 's' : ''} ago`;
                    else if (hours > 0) formatted = `${hours} hour${hours > 1 ? 's' : ''} ago`;
                    else if (minutes > 0) formatted = `${minutes} minute${minutes > 1 ? 's' : ''} ago`;
                    else formatted = `${seconds} second${seconds > 1 ? 's' : ''} ago`;
                }
                break;
        }
        return `<span class="discord-timestamp" title="${date.toLocaleString()}">${formatted}</span>`;
    });

    // User mentions (<@123456789>)
    parsed = parsed.replace(/&lt;@!?(\d+)&gt;/g, (_, userId) => {
        const user = usersMap[userId];
        const displayName = user?.displayName || user?.username || 'User';
        const colorStyle = user?.color ? ` style="color: ${user.color}"` : '';
        return `<span class="discord-mention"${colorStyle}>@${displayName}</span>`;
    });

    // @everyone and @here mentions
    parsed = parsed.replace(/@(everyone|here)/g, '<span class="discord-mention discord-mention-everyone">@$1</span>');

    // Channel mentions (<#123456789>)
    parsed = parsed.replace(/&lt;#(\d+)&gt;/g, (_, channelId) => {
        const channel = channelMap.get(channelId);
        const channelName = channel?.name || 'channel';
        if (channel) {
            return `<a href="#" class="discord-mention discord-channel-link" data-channel-id="${channelId}">#${channelName}</a>`;
        }
        return `<span class="discord-mention">#${channelName}</span>`;
    });

    // Role mentions (<@&123456789>)
    parsed = parsed.replace(/&lt;@&amp;(\d+)&gt;/g, '<span class="discord-mention">@role</span>');

    // Slash command mentions (</command:123456789>)
    parsed = parsed.replace(/&lt;\/([^:]+):(\d+)&gt;/g, '<span class="discord-slash-command">/$1</span>');

    // Custom emoji (<:name:123456789> or <a:name:123456789>)
    parsed = parsed.replace(/&lt;(a)?:(\w+):(\d+)&gt;/g, (_, animated, name, id) => {
        const ext = animated ? 'gif' : 'png';
        return `<img class="discord-emoji" src="https://cdn.discordapp.com/emojis/${id}.${ext}" alt=":${name}:" title=":${name}:">`;
    });

    // Unicode emoji (keep as-is, they render natively)

    // Masked/Markdown links [text](url) or [text](url "title") - process before bare URL detection
    parsed = parsed.replace(
        /\[([^\]]+)\]\((https?:\/\/[^\s)"]+)(?:\s+"([^"]+)")?\)/g,
        (_, text, url, title) => {
            const titleAttr = title ? ` title="${title}"` : '';
            return `<a href="${url}" target="_blank" rel="noopener noreferrer" class="discord-link"${titleAttr}>${text}</a>`;
        }
    );

    // Links (URLs) - use negative lookbehind to skip URLs in HTML attributes (src=", href=")
    // Match URLs that are NOT preceded by =" or ='
    parsed = parsed.replace(
        /(?<![="'])(?<![=]["'])(https?:\/\/[^\s<>"']+)/g,
        '<a href="$1" target="_blank" rel="noopener noreferrer" class="discord-link">$1</a>'
    );

    // Newlines
    parsed = parsed.replace(/\n/g, '<br>');

    // Unescape Discord markdown escape sequences (\_  \*  \~  \`  \|  \\)
    // Must be done after all markdown processing
    parsed = parsed.replace(/\\([_*~`|\\])/g, '$1');

    return parsed;
}

/**
 * Extract URLs from text
 */
function extractUrls(text) {
    if (!text) return [];
    const urlRegex = /(https?:\/\/[^\s<]+)/g;
    const matches = text.match(urlRegex);
    return matches || [];
}

// ============================================================================
// Link Preview Component
// ============================================================================

const LinkPreview = memo(function LinkPreview({ url, cachedPreview, onPreviewLoad }) {
    const [preview, setPreview] = useState(cachedPreview || null);
    const [loading, setLoading] = useState(!cachedPreview);
    const [error, setError] = useState(false);
    const [imageError, setImageError] = useState(false);

    useEffect(() => {
        if (cachedPreview) {
            setPreview(cachedPreview);
            setLoading(false);
            return;
        }

        // For direct media URLs, only allow trusted domains
        if (IMAGE_EXTENSIONS.test(url)) {
            if (isTrustedDomain(url)) {
                const previewData = { url, type: 'image', image: url, trusted: true };
                setPreview(previewData);
                setLoading(false);
                onPreviewLoad?.(url, previewData);
            } else {
                // Fetch through server to get metadata without exposing user IP
                fetchPreviewFromServer();
            }
            return;
        }
        if (VIDEO_EXTENSIONS.test(url)) {
            if (isTrustedDomain(url)) {
                const previewData = { url, type: 'video', video: url, trusted: true };
                setPreview(previewData);
                setLoading(false);
                onPreviewLoad?.(url, previewData);
            } else {
                // Don't show untrusted video embeds - too risky
                setError(true);
                setLoading(false);
            }
            return;
        }

        // Check for YouTube - trusted domain, can embed directly
        const ytId = getYouTubeId(url);
        if (ytId) {
            const previewData = {
                url,
                type: 'youtube',
                videoId: ytId,
                title: 'YouTube Video',
                siteName: 'YouTube',
                themeColor: '#FF0000',
                trusted: true,
            };
            setPreview(previewData);
            setLoading(false);
            onPreviewLoad?.(url, previewData);
            return;
        }

        // All other URLs: fetch preview from server
        fetchPreviewFromServer();

        async function fetchPreviewFromServer() {
            try {
                const response = await authFetch(`/api/link-preview?url=${encodeURIComponent(url)}`);
                if (!response.ok) throw new Error('Failed to fetch');
                const data = await response.json();
                if (data.error) throw new Error(data.error);
                setPreview(data);
                onPreviewLoad?.(url, data);
            } catch (err) {
                console.warn('Failed to fetch link preview:', url, err);
                setError(true);
            } finally {
                setLoading(false);
            }
        }
    }, [url, cachedPreview, onPreviewLoad]);

    if (loading) {
        return (
            <div className="discord-embed discord-embed-loading">
                <ProgressSpinner style={{ width: '20px', height: '20px' }} strokeWidth="4" />
            </div>
        );
    }

    if (error || !preview) {
        return null; // Don't show anything for failed previews
    }

    // YouTube embed - trusted, use iframe
    if (preview.type === 'youtube' && preview.videoId) {
        return (
            <div className="discord-embed discord-embed-video" style={{ borderColor: preview.themeColor || '#FF0000' }}>
                <div className="discord-embed-content">
                    <div className="discord-embed-provider">YouTube</div>
                    {preview.title && (
                        <a href={url} target="_blank" rel="noopener noreferrer" className="discord-embed-title">
                            {preview.title}
                        </a>
                    )}
                </div>
                <div className="discord-embed-video-container">
                    <iframe
                        src={`https://www.youtube.com/embed/${preview.videoId}`}
                        title={preview.title || 'YouTube video'}
                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                        allowFullScreen
                        className="discord-embed-iframe"
                    />
                </div>
            </div>
        );
    }

    // Direct video - only show if trusted
    if (preview.type === 'video' || preview.video) {
        const videoUrl = preview.video || url;
        if (!isTrustedDomain(videoUrl)) {
            return null; // Don't embed untrusted videos
        }
        return (
            <div className="discord-embed discord-embed-video" style={{ borderColor: preview.themeColor || '#5865f2' }}>
                <video
                    src={videoUrl}
                    controls
                    className="discord-embed-video-player"
                    preload="metadata"
                />
            </div>
        );
    }

    // Direct image - server already returns safe (proxied) URLs
    if (preview.type === 'image') {
        const imageUrl = preview.image || url;
        return (
            <div className="discord-attachment-image-wrapper">
                <img
                    src={imageUrl}
                    alt="Linked image"
                    className="discord-attachment-image"
                    loading="lazy"
                    onError={(e) => e.target.style.display = 'none'}
                />
            </div>
        );
    }

    // Standard link preview - server already returns safe (proxied) image URLs
    const hasLargeImage = preview.image && !preview.thumbnail;

    return (
        <div
            className="discord-embed"
            style={{ borderColor: preview.themeColor || '#5865f2' }}
        >
            <div className="discord-embed-content-wrapper">
                <div className="discord-embed-content">
                    {preview.siteName && (
                        <div className="discord-embed-provider">{preview.siteName}</div>
                    )}
                    {preview.title && (
                        <a
                            href={url}
                            target="_blank"
                            rel="noopener noreferrer"
                            className="discord-embed-title"
                        >
                            {preview.title}
                        </a>
                    )}
                    {preview.description && (
                        <div className="discord-embed-description">
                            {preview.description.length > 300
                                ? preview.description.slice(0, 300) + '...'
                                : preview.description}
                        </div>
                    )}
                </div>
                {preview.image && !hasLargeImage && !imageError && (
                    <img
                        src={preview.image}
                        alt=""
                        className="discord-embed-thumbnail"
                        loading="lazy"
                        onError={() => setImageError(true)}
                    />
                )}
            </div>
            {preview.image && hasLargeImage && !imageError && (
                <img
                    src={preview.image}
                    alt=""
                    className="discord-embed-image"
                    loading="lazy"
                    onError={() => setImageError(true)}
                />
            )}
        </div>
    );
});

// ============================================================================
// Attachment Component
// ============================================================================

const Attachment = memo(function Attachment({ attachment }) {
    const { filename, url, size, content_type, width, height } = attachment;
    const openImageModal = useContext(ImageModalContext);

    const isImage = content_type?.startsWith('image/') || IMAGE_EXTENSIONS.test(filename || url);
    const isVideo = content_type?.startsWith('video/') || VIDEO_EXTENSIONS.test(filename || url);
    const isAudio = content_type?.startsWith('audio/') || AUDIO_EXTENSIONS.test(filename || url);

    if (isImage) {
        return (
            <div className="discord-attachment-image-wrapper">
                <img
                    src={url}
                    alt={filename || 'Image'}
                    className="discord-attachment-image"
                    onClick={() => openImageModal?.({ url, alt: filename || 'Image' })}
                    style={{
                        cursor: 'pointer',
                        ...(width && height ? {
                            maxWidth: Math.min(width, 400),
                            aspectRatio: `${width} / ${height}`
                        } : {})
                    }}
                />
            </div>
        );
    }

    if (isVideo) {
        return (
            <div className="discord-attachment-video-wrapper">
                <video
                    src={url}
                    controls
                    className="discord-attachment-video"
                    preload="metadata"
                    style={width && height ? {
                        maxWidth: Math.min(width, 400),
                        aspectRatio: `${width} / ${height}`
                    } : undefined}
                >
                    <source src={url} type={content_type} />
                    Your browser does not support the video tag.
                </video>
            </div>
        );
    }

    if (isAudio) {
        return (
            <div className="discord-attachment-audio-wrapper">
                <div className="discord-attachment-file">
                    <svg className="discord-attachment-icon" viewBox="0 0 24 24" fill="currentColor">
                        <path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z" />
                    </svg>
                    <div className="discord-attachment-info">
                        <a href={url} target="_blank" rel="noopener noreferrer" className="discord-attachment-name">
                            {filename || 'Audio file'}
                        </a>
                        {size && <div className="discord-attachment-size">{formatFileSize(size)}</div>}
                    </div>
                </div>
                <audio src={url} controls className="discord-attachment-audio" preload="metadata">
                    Your browser does not support the audio tag.
                </audio>
            </div>
        );
    }

    // Generic file
    return (
        <div className="discord-attachment-file">
            <svg className="discord-attachment-icon" viewBox="0 0 24 24" fill="currentColor">
                <path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z" />
            </svg>
            <div className="discord-attachment-info">
                <a href={url} target="_blank" rel="noopener noreferrer" className="discord-attachment-name">
                    {filename || 'File'}
                </a>
                {size && <div className="discord-attachment-size">{formatFileSize(size)}</div>}
            </div>
        </div>
    );
});

// ============================================================================
// Message Component
// ============================================================================

const DiscordMessage = memo(function DiscordMessage({
    message,
    isFirstInGroup,
    showTimestamp,
    previewCache,
    onPreviewLoad,
    channelMap,
    usersMap,
    members,
    onChannelSelect,
    channelName,
    onReactionClick,
    onContextMenu
}) {
    const {
        id,
        author,
        content,
        timestamp,
        attachments = [],
        embeds = [],
        stickers = [],
        reactions = [],
        referenced_message,
        type
    } = message;

    // Check if this is an archived message from #dds-archive
    const isArchiveChannel = channelName === 'dds-archive';
    const archivedMessage = useMemo(() => {
        if (!isArchiveChannel) return null;
        return parseArchivedMessage(content);
    }, [isArchiveChannel, content]);

    // Use original data if this is a parsed archive message
    // Try to resolve the archived username to a real user
    const displayAuthor = useMemo(() => {
        if (!archivedMessage) return author;
        return resolveArchivedUser(archivedMessage.originalAuthor, usersMap, members);
    }, [archivedMessage, author, usersMap, members]);
    const displayContent = archivedMessage ? archivedMessage.originalContent : content;
    const displayTimestamp = archivedMessage ? (archivedMessage.originalTimestamp || timestamp) : timestamp;

    // Extract URLs from content for link previews
    const urls = useMemo(() => extractUrls(displayContent), [displayContent]);

    // Filter URLs that don't already have embeds
    const urlsToPreview = useMemo(() => {
        const embedUrls = new Set(embeds?.map(e => e.url).filter(Boolean));
        return urls.filter(url => !embedUrls.has(url));
    }, [urls, embeds]);

    const parsedContent = useMemo(() => parseDiscordMarkdown(displayContent, { channelMap, usersMap }), [displayContent, channelMap, usersMap]);

    // Handle channel link clicks
    const handleContentClick = useCallback((e) => {
        const channelLink = e.target.closest('.discord-channel-link');
        if (channelLink) {
            e.preventDefault();
            const channelId = channelLink.dataset.channelId;
            if (channelId && onChannelSelect) {
                const channel = channelMap?.get(channelId);
                if (channel) {
                    onChannelSelect(channel);
                }
            }
        }
    }, [channelMap, onChannelSelect]);

    // For archived messages, use the resolved user's avatar if available
    // Avatar might be a full URL or just a hash - handle both cases
    const avatarUrl = useMemo(() => {
        const avatarSource = displayAuthor?.avatar || displayAuthor?.avatarUrl;
        if (!avatarSource) return null;
        if (avatarSource.startsWith('http')) return avatarSource;
        return `https://cdn.discordapp.com/avatars/${displayAuthor.id}/${avatarSource}.png?size=80`;
    }, [displayAuthor]);

    const getInitial = (name) => (name || 'U')[0].toUpperCase();

    // System messages (join, boost, etc.)
    if (type && type !== 0 && type !== 19) {
        return (
            <div className="discord-message discord-system-message">
                <div className="discord-system-icon">
                    <svg viewBox="0 0 24 24" fill="currentColor" width="16" height="16">
                        <path d="M18.5 12c0-1.77-.77-3.37-2-4.47V4.5h-2v1.98A5.96 5.96 0 0 0 12 6c-.97 0-1.89.23-2.71.63L7.11 4.45 5.64 5.92l2.18 2.18A5.96 5.96 0 0 0 6 12c0 3.31 2.69 6 6 6s6-2.69 6-6zm-6 4c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4z" />
                    </svg>
                </div>
                <span className="discord-system-content">
                    <span className="discord-username" style={displayAuthor?.color ? { color: displayAuthor.color } : undefined}>
                        {displayAuthor?.displayName || displayAuthor?.username || 'Unknown'}
                    </span>
                    {' '}
                    <span dangerouslySetInnerHTML={{ __html: parsedContent }} />
                </span>
                <span className="discord-timestamp">{formatTimestamp(displayTimestamp)}</span>
            </div>
        );
    }

    return (
        <>
            {/* Reply context */}
            {referenced_message && (
                <div className="discord-reply-context">
                    <img
                        src={referenced_message.author?.avatar
                            ? (referenced_message.author.avatar.startsWith('http')
                                ? referenced_message.author.avatar
                                : `https://cdn.discordapp.com/avatars/${referenced_message.author.id}/${referenced_message.author.avatar}.png?size=32`)
                            : 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"/>'
                        }
                        alt=""
                        className="discord-reply-avatar"
                    />
                    <span className="discord-reply-username">
                        {referenced_message.author?.displayName || referenced_message.author?.username || 'Unknown'}
                    </span>
                    <span className="discord-reply-content">
                        {referenced_message.content?.slice(0, 100) || 'Click to see attachment'}
                        {referenced_message.content?.length > 100 ? '...' : ''}
                    </span>
                </div>
            )}

            <div
                id={`message-${id}`}
                className={`discord-message ${isFirstInGroup ? 'first-in-group' : ''}`}
                onContextMenu={(e) => onContextMenu?.(e, id, content)}
            >
                {isFirstInGroup ? (
                    <div className="discord-avatar-wrapper">
                        {avatarUrl ? (
                            <img src={avatarUrl} alt="" className="discord-avatar" />
                        ) : (
                            <div className="discord-avatar-placeholder">
                                {getInitial(displayAuthor?.username)}
                            </div>
                        )}
                    </div>
                ) : (
                    <div className="discord-timestamp-gutter">
                        <span className="discord-hover-timestamp">
                            {formatTimestamp(displayTimestamp, 'time')}
                        </span>
                    </div>
                )}

                <div className="discord-message-content">
                    {isFirstInGroup && (
                        <div className="discord-message-header">
                            {/* Tags appear BEFORE the name */}
                            {displayAuthor?.isServerForwarded && (
                                <span className="discord-server-tag">SERVER</span>
                            )}
                            {(displayAuthor?.bot || displayAuthor?.isWebhook) && !displayAuthor?.isServerForwarded && (
                                <span className="discord-bot-tag">APP</span>
                            )}
                            {archivedMessage && (
                                <span className="discord-archive-tag" title={archivedMessage.topic}>
                                    ARCHIVED
                                </span>
                            )}
                            <span
                                className={`discord-username ${(displayAuthor?.bot || displayAuthor?.isWebhook) ? 'discord-bot-user' : ''}`}
                                style={displayAuthor?.color ? { color: displayAuthor.color } : undefined}
                            >
                                {displayAuthor?.displayName || displayAuthor?.username || 'Unknown User'}
                            </span>
                            <span className="discord-timestamp">{formatTimestamp(displayTimestamp)}</span>
                        </div>
                    )}

                    {displayContent && (
                        <div
                            className="discord-text"
                            dangerouslySetInnerHTML={{ __html: parsedContent }}
                            onClick={handleContentClick}
                        />
                    )}

                    {/* Attachments */}
                    {attachments?.length > 0 && (
                        <div className="discord-attachments">
                            {attachments.map((att, idx) => (
                                <Attachment key={att.id || idx} attachment={att} />
                            ))}
                        </div>
                    )}

                    {/* Stickers */}
                    {stickers?.length > 0 && (
                        <div className="discord-stickers">
                            {stickers.map((sticker) => (
                                <div key={sticker.id} className="discord-sticker" title={sticker.name}>
                                    {sticker.formatType === 3 ? (
                                        // Lottie stickers - show placeholder or name
                                        <div className="discord-sticker-lottie">
                                            <span>{sticker.name}</span>
                                        </div>
                                    ) : (
                                        <img
                                            src={sticker.url}
                                            alt={sticker.name}
                                            className="discord-sticker-image"
                                            loading="lazy"
                                        />
                                    )}
                                </div>
                            ))}
                        </div>
                    )}

                    {/* Original embeds from Discord */}
                    {embeds?.map((embed, idx) => (
                        <div
                            key={idx}
                            className="discord-embed"
                            style={{ borderColor: embed.color ? `#${embed.color.toString(16).padStart(6, '0')}` : '#5865f2' }}
                        >
                            <div className="discord-embed-content-wrapper">
                                <div className="discord-embed-content">
                                    {embed.author && (
                                        <div className="discord-embed-author">
                                            {embed.author.icon_url && (
                                                <img src={embed.author.icon_url} alt="" className="discord-embed-author-icon" />
                                            )}
                                            <span className="discord-embed-author-name">{embed.author.name}</span>
                                        </div>
                                    )}
                                    {embed.title && (
                                        embed.url ? (
                                            <a
                                                href={embed.url}
                                                target="_blank"
                                                rel="noopener noreferrer"
                                                className="discord-embed-title"
                                            >
                                                {embed.title}
                                            </a>
                                        ) : (
                                            <div className="discord-embed-title">{embed.title}</div>
                                        )
                                    )}
                                    {embed.description && (
                                        <div
                                            className="discord-embed-description"
                                            dangerouslySetInnerHTML={{
                                                __html: parseDiscordMarkdown(embed.description, { channelMap, usersMap })
                                            }}
                                        />
                                    )}
                                    {/* Embed fields */}
                                    {embed.fields?.length > 0 && (
                                        <div className="discord-embed-fields">
                                            {embed.fields.map((field, fieldIdx) => (
                                                <div
                                                    key={fieldIdx}
                                                    className={`discord-embed-field ${field.inline ? 'inline' : ''}`}
                                                >
                                                    {field.name && (
                                                        <div className="discord-embed-field-name">{field.name}</div>
                                                    )}
                                                    {field.value && (
                                                        <div
                                                            className="discord-embed-field-value"
                                                            dangerouslySetInnerHTML={{
                                                                __html: parseDiscordMarkdown(field.value, { channelMap, usersMap })
                                                            }}
                                                        />
                                                    )}
                                                </div>
                                            ))}
                                        </div>
                                    )}
                                </div>
                                {embed.thumbnail?.url && embed.thumbnail.url.trim() && (
                                    <img
                                        src={embed.thumbnail.url}
                                        alt=""
                                        className="discord-embed-thumbnail"
                                        onError={(e) => e.target.style.display = 'none'}
                                    />
                                )}
                            </div>
                            {embed.image?.url && (
                                <img src={embed.image.url} alt="" className="discord-embed-image" />
                            )}
                            {embed.video?.url && (
                                <video src={embed.video.url} controls className="discord-embed-video-player" />
                            )}
                            {embed.footer && (
                                <div className="discord-embed-footer">
                                    {embed.footer.icon_url && (
                                        <img src={embed.footer.icon_url} alt="" className="discord-embed-footer-icon" />
                                    )}
                                    <span>{embed.footer.text}</span>
                                    {embed.timestamp && (
                                        <>
                                            <span className="discord-embed-footer-separator">•</span>
                                            <span>{formatTimestamp(embed.timestamp, 'short')}</span>
                                        </>
                                    )}
                                </div>
                            )}
                        </div>
                    ))}

                    {/* Link previews for URLs in content */}
                    {urlsToPreview.map((url) => (
                        <LinkPreview
                            key={url}
                            url={url}
                            cachedPreview={previewCache?.[url]}
                            onPreviewLoad={onPreviewLoad}
                        />
                    ))}

                    {/* Reactions */}
                    {reactions?.length > 0 && (
                        <div className="discord-reactions">
                            {reactions.map((reaction, idx) => (
                                <button
                                    key={idx}
                                    className={`discord-reaction ${reaction.me ? 'reacted' : ''}`}
                                    onClick={(e) => {
                                        e.stopPropagation();
                                        onReactionClick?.(e, id, reaction);
                                    }}
                                    title="Click to see who reacted"
                                >
                                    {reaction.emoji.id ? (
                                        <img
                                            src={`https://cdn.discordapp.com/emojis/${reaction.emoji.id}.${reaction.emoji.animated ? 'gif' : 'png'}`}
                                            alt={reaction.emoji.name}
                                            className="discord-reaction-emoji"
                                        />
                                    ) : (
                                        <span>{reaction.emoji.name}</span>
                                    )}
                                    <span>{reaction.count}</span>
                                </button>
                            ))}
                        </div>
                    )}
                </div>
            </div>
        </>
    );
});

// ============================================================================
// Main DiscordLogs Component
// ============================================================================

export default function DiscordLogs() {
    const messagesContainerRef = useRef(null);
    const pendingTargetMessageRef = useRef(null); // For deep-linking - used in fetch, cleared after scroll
    const scrollToBottomRef = useRef(false); // Flag to trigger scroll to bottom after initial load
    const [channels, setChannels] = useState([]);
    const [channelsByGuild, setChannelsByGuild] = useState({});
    const [guilds, setGuilds] = useState([]);
    const [selectedGuild, setSelectedGuild] = useState(null);
    const [selectedChannel, setSelectedChannel] = useState(null);
    const [messages, setMessages] = useState([]);
    const [usersMap, setUsersMap] = useState({}); // Map of user ID -> { displayName, username, color }
    const [members, setMembers] = useState(null); // { groups: [...], roles: [...] }
    const [loadingMembers, setLoadingMembers] = useState(false);
    const [memberListExpanded, setMemberListExpanded] = useState(false); // Default to collapsed
    const [linkCopied, setLinkCopied] = useState(false);
    const [loading, setLoading] = useState(true);
    const [loadingMessages, setLoadingMessages] = useState(false);
    const [loadingMore, setLoadingMore] = useState(false);
    const [hasMoreMessages, setHasMoreMessages] = useState(true);
    const [error, setError] = useState(null);
    const [searchQuery, setSearchQuery] = useState('');
    const [searchResults, setSearchResults] = useState(null); // Server-side search results
    const [searchLoading, setSearchLoading] = useState(false);
    const [previewCache, setPreviewCache] = useState({});
    const [imageModal, setImageModal] = useState(null); // { url, alt }
    const [reactionPopup, setReactionPopup] = useState(null); // { x, y, emoji, users, loading }
    const [contextMenu, setContextMenu] = useState(null); // { x, y, messageId, content }
    const [channelContextMenu, setChannelContextMenu] = useState(null); // { x, y, channel }
    const [topicExpanded, setTopicExpanded] = useState(false); // Show full channel topic

    // Debounced server-side search
    useEffect(() => {
        if (!searchQuery.trim() || searchQuery.length < 2 || !selectedChannel) {
            setSearchResults(null);
            return;
        }

        const timeoutId = setTimeout(async () => {
            setSearchLoading(true);
            try {
                const response = await authFetch(
                    `/api/discord/search?channelId=${selectedChannel.id}&q=${encodeURIComponent(searchQuery)}&limit=50`
                );
                if (response.ok) {
                    const data = await response.json();
                    // Normalize the search results
                    const normalizedMessages = (data.messages || []).map(msg => ({
                        ...msg,
                        referenced_message: msg.referencedMessage || msg.referenced_message,
                        attachments: (msg.attachments || []).map(att => ({
                            ...att,
                            content_type: att.contentType || att.content_type,
                        })),
                    }));
                    setSearchResults(normalizedMessages);
                }
            } catch (err) {
                console.error('Search failed:', err);
            } finally {
                setSearchLoading(false);
            }
        }, 300); // 300ms debounce

        return () => clearTimeout(timeoutId);
    }, [searchQuery, selectedChannel]);

    // Open image modal
    const openImageModal = useCallback((imageData) => {
        setImageModal(imageData);
    }, []);

    // Close image modal
    const closeImageModal = useCallback(() => {
        setImageModal(null);
    }, []);

    // Handle reaction click - fetch users who reacted
    const handleReactionClick = useCallback(async (e, messageId, reaction) => {
        const rect = e.target.getBoundingClientRect();
        const x = rect.left + rect.width / 2;
        const y = rect.top;

        // Show loading state
        setReactionPopup({
            x,
            y,
            emoji: reaction.emoji,
            users: [],
            loading: true,
        });

        try {
            const params = new URLSearchParams({
                messageId,
                emojiName: reaction.emoji.name,
            });
            if (reaction.emoji.id) {
                params.append('emojiId', reaction.emoji.id);
            }

            const response = await authFetch(`/api/discord/reaction-users?${params}`);
            if (!response.ok) throw new Error('Failed to fetch');
            const users = await response.json();

            setReactionPopup(prev => prev ? {
                ...prev,
                users,
                loading: false,
            } : null);
        } catch (err) {
            console.error('Failed to fetch reaction users:', err);
            setReactionPopup(null);
        }
    }, []);

    // Close reaction popup
    const closeReactionPopup = useCallback(() => {
        setReactionPopup(null);
    }, []);

    // Handle message context menu (right-click)
    const handleMessageContextMenu = useCallback((e, messageId, content) => {
        e.preventDefault();
        setContextMenu({
            x: e.clientX,
            y: e.clientY,
            messageId,
            content,
        });
    }, []);

    // Copy message link to clipboard
    const copyMessageLink = useCallback(() => {
        if (!contextMenu || !selectedGuild || !selectedChannel) return;
        const url = `${window.location.origin}${window.location.pathname}#${selectedGuild.id}/${selectedChannel.id}/${contextMenu.messageId}`;
        navigator.clipboard.writeText(url);
        setContextMenu(null);
    }, [contextMenu, selectedGuild, selectedChannel]);

    // Copy message content to clipboard
    const copyMessageContent = useCallback(() => {
        if (!contextMenu?.content) return;
        navigator.clipboard.writeText(contextMenu.content);
        setContextMenu(null);
    }, [contextMenu]);

    // Copy message ID to clipboard
    const copyMessageId = useCallback(() => {
        if (!contextMenu?.messageId) return;
        navigator.clipboard.writeText(contextMenu.messageId);
        setContextMenu(null);
    }, [contextMenu]);

    // Handle channel context menu (right-click)
    const handleChannelContextMenu = useCallback((e, channel) => {
        e.preventDefault();
        setChannelContextMenu({
            x: e.clientX,
            y: e.clientY,
            channel,
        });
    }, []);

    // Copy channel link to clipboard
    const copyChannelLink = useCallback(() => {
        if (!channelContextMenu?.channel || !selectedGuild) return;
        const url = `${window.location.origin}${window.location.pathname}#${selectedGuild.id}/${channelContextMenu.channel.id}`;
        navigator.clipboard.writeText(url);
        setChannelContextMenu(null);
    }, [channelContextMenu, selectedGuild]);

    // Copy channel ID to clipboard
    const copyChannelId = useCallback(() => {
        if (!channelContextMenu?.channel) return;
        navigator.clipboard.writeText(channelContextMenu.channel.id);
        setChannelContextMenu(null);
    }, [channelContextMenu]);

    // Copy channel name to clipboard
    const copyChannelName = useCallback(() => {
        if (!channelContextMenu?.channel) return;
        navigator.clipboard.writeText(channelContextMenu.channel.name);
        setChannelContextMenu(null);
    }, [channelContextMenu]);

    // Handle escape key to close modal
    useEffect(() => {
        const handleKeyDown = (e) => {
            if (e.key === 'Escape') {
                if (imageModal) closeImageModal();
                if (reactionPopup) closeReactionPopup();
                if (contextMenu) setContextMenu(null);
                if (channelContextMenu) setChannelContextMenu(null);
            }
        };
        const handleClickOutside = (e) => {
            if (reactionPopup && !e.target.closest('.discord-reaction-popup')) {
                closeReactionPopup();
            }
            if (contextMenu && !e.target.closest('.discord-context-menu')) {
                setContextMenu(null);
            }
            if (channelContextMenu && !e.target.closest('.discord-context-menu')) {
                setChannelContextMenu(null);
            }
        };
        window.addEventListener('keydown', handleKeyDown);
        window.addEventListener('click', handleClickOutside);
        return () => {
            window.removeEventListener('keydown', handleKeyDown);
            window.removeEventListener('click', handleClickOutside);
        };
    }, [imageModal, reactionPopup, contextMenu, closeImageModal, closeReactionPopup]);

    // Update URL hash when guild/channel changes
    useEffect(() => {
        if (selectedGuild && selectedChannel) {
            const newHash = `#${selectedGuild.id}/${selectedChannel.id}`;
            if (window.location.hash !== newHash) {
                window.history.replaceState(null, '', newHash);
            }
        }
    }, [selectedGuild, selectedChannel]);

    // Copy shareable link to clipboard
    const copyShareLink = useCallback((messageId = null) => {
        let url = window.location.origin + window.location.pathname;
        if (selectedGuild && selectedChannel) {
            url += `#${selectedGuild.id}/${selectedChannel.id}`;
            if (messageId) {
                url += `/${messageId}`;
            }
        }
        navigator.clipboard.writeText(url).then(() => {
            setLinkCopied(true);
            setTimeout(() => setLinkCopied(false), 2000);
        });
    }, [selectedGuild, selectedChannel]);

    // Create channel lookup map for mentions
    const channelMap = useMemo(() => {
        const map = new Map();
        channels.forEach(channel => {
            map.set(channel.id, {
                id: channel.id,
                name: channel.name,
                guildId: channel.guildId,
                guildName: channel.guildName,
                guildIcon: channel.guildIcon,
            });
        });
        return map;
    }, [channels]);

    // Handle channel selection from mentions
    const handleChannelSelect = useCallback((channel) => {
        // Find the full channel object with guild info
        const guildId = channel.guildId || channelMap.get(channel.id)?.guildId;
        if (guildId) {
            const guild = guilds.find(g => g.id === guildId);
            if (guild) {
                setSelectedGuild(guild);
            }
            const channelList = channelsByGuild[guildId];
            const fullChannel = channelList?.find(c => c.id === channel.id);
            if (fullChannel) {
                setSelectedChannel(fullChannel);
            }
        }
    }, [guilds, channelsByGuild, channelMap]);

    // Load channels from API
    useEffect(() => {
        async function fetchChannels() {
            try {
                const response = await authFetch('/api/discord/channels');
                if (!response.ok) throw new Error('Failed to fetch channels');
                const data = await response.json();

                // Separate categories (type 4) from text channels (type 0)
                const categories = {};
                const textChannels = [];

                data.forEach(channel => {
                    if (channel.type === 4) {
                        categories[channel.id] = {
                            id: channel.id,
                            name: channel.name,
                            position: channel.position,
                            guildId: channel.guildId,
                        };
                    } else {
                        textChannels.push(channel);
                    }
                });

                // Group channels by guild
                const byGuild = {};
                const guildMap = {};

                textChannels.forEach(channel => {
                    const guildId = channel.guildId || 'unknown';
                    if (!byGuild[guildId]) {
                        byGuild[guildId] = [];
                        guildMap[guildId] = {
                            id: guildId,
                            name: channel.guildName || 'Discord Archive',
                            icon: channel.guildIcon || null,
                        };
                    }
                    const categoryName = channel.parentId ? categories[channel.parentId]?.name : null;
                    const categoryPosition = channel.parentId ? categories[channel.parentId]?.position : -1;

                    byGuild[guildId].push({
                        id: channel.id,
                        name: channel.name,
                        type: channel.type,
                        position: channel.position,
                        topic: channel.topic,
                        parentId: channel.parentId,
                        categoryName,
                        categoryPosition,
                        guild: guildMap[guildId],
                        messageCount: channel.messageCount || 0,
                    });
                });

                // Sort guilds - put "no place like ::1" first
                const guildList = Object.values(guildMap).sort((a, b) => {
                    if (a.name === 'no place like ::1') return -1;
                    if (b.name === 'no place like ::1') return 1;
                    return a.name.localeCompare(b.name);
                });

                // Sort channels within each guild by category position, then channel position
                Object.keys(byGuild).forEach(guildId => {
                    byGuild[guildId].sort((a, b) => {
                        // First sort by category position (no category = -1, comes first)
                        if (a.categoryPosition !== b.categoryPosition) {
                            return a.categoryPosition - b.categoryPosition;
                        }
                        // Then by channel position within category
                        return (a.position || 0) - (b.position || 0);
                    });
                });

                setGuilds(guildList);
                setChannelsByGuild(byGuild);
                setChannels(data);

                // Check URL hash for deep linking
                const hash = window.location.hash.slice(1); // Remove #
                const [hashGuildId, hashChannelId, hashMessageId] = hash.split('/');

                let initialGuild = null;
                let initialChannel = null;

                // Set target message ID for scrolling after messages load
                if (hashMessageId) {
                    pendingTargetMessageRef.current = hashMessageId;
                }

                // Try to find guild/channel from hash
                if (hashGuildId && guildMap[hashGuildId]) {
                    initialGuild = guildMap[hashGuildId];
                    if (hashChannelId && byGuild[hashGuildId]) {
                        initialChannel = byGuild[hashGuildId].find(c => c.id === hashChannelId && c.messageCount > 0);
                    }
                }

                // Fall back to first guild/channel if hash doesn't match
                if (!initialGuild && guildList.length > 0) {
                    initialGuild = guildList[0];
                }
                if (!initialChannel && initialGuild && byGuild[initialGuild.id]?.length > 0) {
                    // Pick first channel with messages
                    initialChannel = byGuild[initialGuild.id].find(c => c.type !== 4 && c.messageCount > 0);
                }

                if (initialGuild) {
                    setSelectedGuild(initialGuild);
                }
                if (initialChannel) {
                    setSelectedChannel(initialChannel);
                }
            } catch (err) {
                console.error('Failed to fetch channels:', err);
                setError('Failed to load channels');
            } finally {
                setLoading(false);
            }
        }

        // Wait for auth to be ready before fetching
        fetchChannels();
    }, []);

    // Load members when guild or channel changes
    useEffect(() => {
        if (!selectedGuild) return;

        async function fetchMembers() {
            setLoadingMembers(true);
            try {
                // Include channelId to filter members by channel visibility
                let url = `/api/discord/members?guildId=${selectedGuild.id}`;
                if (selectedChannel?.id) {
                    url += `&channelId=${selectedChannel.id}`;
                }
                const response = await authFetch(url);
                if (!response.ok) throw new Error('Failed to fetch members');
                const data = await response.json();
                setMembers(data);
            } catch (err) {
                console.error('Failed to fetch members:', err);
                setMembers(null);
            } finally {
                setLoadingMembers(false);
            }
        }

        fetchMembers();
    }, [selectedGuild, selectedChannel]);

    // Load messages from API when channel changes
    useEffect(() => {
        if (!selectedChannel) return;

        // Reset topic expanded state when channel changes
        setTopicExpanded(false);

        // Set loading immediately to prevent flash of "no messages" state
        setLoadingMessages(true);

        async function fetchMessages() {
            setMessages([]);
            setUsersMap({});
            setHasMoreMessages(true);

            // Capture target message ID from ref (for deep-linking)
            const targetMessageId = pendingTargetMessageRef.current;

            try {
                // If we have a target message ID, use 'around' to fetch messages centered on it
                let url = `/api/discord/messages?channelId=${selectedChannel.id}&limit=50`;
                if (targetMessageId) {
                    url += `&around=${targetMessageId}`;
                }

                const response = await authFetch(url);
                if (!response.ok) throw new Error('Failed to fetch messages');
                const data = await response.json();

                // Handle new response format { messages, users }
                const messagesData = data.messages || data;
                const usersData = data.users || {};

                // Normalize field names from API to component expectations
                const normalizedMessages = messagesData.map(msg => ({
                    ...msg,
                    referenced_message: msg.referencedMessage || msg.referenced_message,
                    attachments: (msg.attachments || []).map(att => ({
                        ...att,
                        content_type: att.contentType || att.content_type,
                    })),
                }));

                // When using 'around', messages come back in ASC order already
                // When using default (no around), they come DESC so reverse them
                const orderedMessages = targetMessageId
                    ? normalizedMessages
                    : normalizedMessages.reverse();

                setMessages(orderedMessages);
                setUsersMap(usersData);
                setHasMoreMessages(messagesData.length === 50);

                // Set flag to scroll after render (handled by useLayoutEffect)
                if (targetMessageId) {
                    // Keep the target in pendingTargetMessageRef for useLayoutEffect
                } else {
                    scrollToBottomRef.current = true;
                }
            } catch (err) {
                console.error('Failed to fetch messages:', err);
                setMessages([]);
            } finally {
                setLoadingMessages(false);
            }
        }

        fetchMessages();
        // Only re-fetch when channel ID changes
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [selectedChannel?.id]);

    // Handle scroll positioning after messages are rendered
    useLayoutEffect(() => {
        if (messages.length === 0) return;

        const container = messagesContainerRef.current;
        if (!container) return;

        // Handle target message (deep-linking)
        const targetMessageId = pendingTargetMessageRef.current;
        if (targetMessageId) {
            // Use requestAnimationFrame to ensure DOM is fully painted
            requestAnimationFrame(() => {
                const targetElement = document.getElementById(`message-${targetMessageId}`);
                if (targetElement) {
                    targetElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
                    // Highlight the message with pulse + fade animation
                    targetElement.classList.add('discord-message-highlight');
                    setTimeout(() => {
                        targetElement.classList.remove('discord-message-highlight');
                    }, 5000); // 3 pulses (1.5s) + 3s fade
                }
                pendingTargetMessageRef.current = null;
            });
            return;
        }

        // Handle scroll to bottom on initial channel load
        if (scrollToBottomRef.current) {
            scrollToBottomRef.current = false;
            container.scrollTop = container.scrollHeight;
        }
    }, [messages]);

    // Load more messages (pagination)
    const loadMoreMessages = useCallback(async () => {
        if (loadingMore || !hasMoreMessages || messages.length === 0) return;

        setLoadingMore(true);
        try {
            // Get the oldest message ID for pagination (messages are in ASC order, so first = oldest)
            const oldestMessage = messages[0];
            const response = await authFetch(
                `/api/discord/messages?channelId=${selectedChannel.id}&limit=50&before=${oldestMessage.id}`
            );
            if (!response.ok) throw new Error('Failed to fetch more messages');
            const data = await response.json();

            // Handle new response format { messages, users }
            const messagesData = data.messages || data;
            const usersData = data.users || {};

            const normalizedMessages = messagesData.map(msg => ({
                ...msg,
                referenced_message: msg.referencedMessage || msg.referenced_message,
                attachments: (msg.attachments || []).map(att => ({
                    ...att,
                    content_type: att.contentType || att.content_type,
                })),
            }));

            // Prepend older messages (reversed to maintain ASC order)
            setMessages(prev => [...normalizedMessages.reverse(), ...prev]);
            // Merge new users into existing usersMap
            setUsersMap(prev => ({ ...prev, ...usersData }));
            setHasMoreMessages(messagesData.length === 50);
        } catch (err) {
            console.error('Failed to load more messages:', err);
        } finally {
            setLoadingMore(false);
        }
    }, [loadingMore, hasMoreMessages, messages, selectedChannel]);

    // Infinite scroll: load more when scrolling near the top
    useEffect(() => {
        const container = messagesContainerRef.current;
        if (!container) return;

        const handleScroll = () => {
            // Don't load more when viewing search results
            if (searchQuery.trim().length >= 2 && searchResults !== null) return;

            // Load more when within 200px of the top
            if (container.scrollTop < 200 && hasMoreMessages && !loadingMore) {
                // Save scroll position before loading
                const scrollHeightBefore = container.scrollHeight;
                loadMoreMessages().then(() => {
                    // Restore scroll position after new messages are prepended
                    requestAnimationFrame(() => {
                        const scrollHeightAfter = container.scrollHeight;
                        container.scrollTop = scrollHeightAfter - scrollHeightBefore;
                    });
                });
            }
        };

        container.addEventListener('scroll', handleScroll);
        return () => container.removeEventListener('scroll', handleScroll);
    }, [hasMoreMessages, loadingMore, loadMoreMessages, searchQuery, searchResults]);

    // Poll for new messages every 5 seconds
    useEffect(() => {
        if (!selectedChannel || loadingMessages || messages.length === 0) return;
        // Don't poll when viewing search results - it would add messages that aren't in search
        if (searchQuery.trim().length >= 2 && searchResults !== null) return;

        const pollInterval = setInterval(async () => {
            try {
                // Get the newest message ID (messages are in ASC order, so last = newest)
                const newestMessage = messages[messages.length - 1];
                const response = await authFetch(
                    `/api/discord/messages?channelId=${selectedChannel.id}&limit=50&after=${newestMessage.id}`
                );
                if (!response.ok) return;
                const data = await response.json();

                const messagesData = data.messages || data;
                const usersData = data.users || {};

                if (messagesData.length === 0) return;

                const normalizedMessages = messagesData.map(msg => ({
                    ...msg,
                    referenced_message: msg.referencedMessage || msg.referenced_message,
                    attachments: (msg.attachments || []).map(att => ({
                        ...att,
                        content_type: att.contentType || att.content_type,
                    })),
                }));

                // Check if user is scrolled near bottom before adding new messages
                const container = messagesContainerRef.current;
                const isNearBottom = container &&
                    (container.scrollHeight - container.scrollTop - container.clientHeight < 100);

                // Append new messages (already in ASC order from API)
                setMessages(prev => [...prev, ...normalizedMessages]);
                setUsersMap(prev => ({ ...prev, ...usersData }));

                // Auto-scroll to bottom if user was already near bottom
                if (isNearBottom && container) {
                    setTimeout(() => {
                        container.scrollTop = container.scrollHeight;
                    }, 50);
                }
            } catch (err) {
                console.error('Polling failed:', err);
            }
        }, 5000);

        return () => clearInterval(pollInterval);
    }, [selectedChannel, loadingMessages, messages, searchQuery, searchResults]);

    // Poll for channel/guild updates every 5 seconds
    useEffect(() => {
        if (loading) return; // Don't poll during initial load

        const pollInterval = setInterval(async () => {
            try {
                const response = await authFetch('/api/discord/channels');
                if (!response.ok) return;
                const data = await response.json();

                // Separate categories from text channels
                const categories = {};
                const textChannels = [];

                data.forEach(channel => {
                    if (channel.type === 4) {
                        categories[channel.id] = {
                            id: channel.id,
                            name: channel.name,
                            position: channel.position,
                            guildId: channel.guildId,
                        };
                    } else {
                        textChannels.push(channel);
                    }
                });

                // Rebuild guild/channel maps
                const byGuild = {};
                const guildMap = {};

                textChannels.forEach(channel => {
                    const guildId = channel.guildId || 'unknown';
                    if (!byGuild[guildId]) {
                        byGuild[guildId] = [];
                        guildMap[guildId] = {
                            id: guildId,
                            name: channel.guildName || 'Discord Archive',
                            icon: channel.guildIcon || null,
                        };
                    }
                    const categoryName = channel.parentId ? categories[channel.parentId]?.name : null;
                    const categoryPosition = channel.parentId ? categories[channel.parentId]?.position : -1;

                    byGuild[guildId].push({
                        id: channel.id,
                        name: channel.name,
                        type: channel.type,
                        position: channel.position,
                        topic: channel.topic,
                        parentId: channel.parentId,
                        categoryName,
                        categoryPosition,
                        guild: guildMap[guildId],
                        messageCount: channel.messageCount || 0,
                    });
                });

                // Sort guilds
                const guildList = Object.values(guildMap).sort((a, b) => {
                    if (a.name === 'no place like ::1') return -1;
                    if (b.name === 'no place like ::1') return 1;
                    return a.name.localeCompare(b.name);
                });

                // Sort channels within each guild
                Object.keys(byGuild).forEach(guildId => {
                    byGuild[guildId].sort((a, b) => {
                        if (a.categoryPosition !== b.categoryPosition) {
                            return a.categoryPosition - b.categoryPosition;
                        }
                        return (a.position || 0) - (b.position || 0);
                    });
                });

                setGuilds(guildList);
                setChannelsByGuild(byGuild);
                setChannels(data);
                // Note: We don't update selectedChannel here to avoid triggering message reload
                // The channel list will show updated message counts from channelsByGuild
            } catch (err) {
                console.error('Channel polling failed:', err);
            }
        }, 5000);

        return () => clearInterval(pollInterval);
    }, [loading]);

    // Poll for member updates every 5 seconds
    useEffect(() => {
        if (!selectedGuild) return;

        const pollInterval = setInterval(async () => {
            try {
                // Include channelId to filter members by channel visibility
                let url = `/api/discord/members?guildId=${selectedGuild.id}`;
                if (selectedChannel?.id) {
                    url += `&channelId=${selectedChannel.id}`;
                }
                const response = await authFetch(url);
                if (!response.ok) return;
                const data = await response.json();
                setMembers(data);
            } catch (err) {
                console.error('Member polling failed:', err);
            }
        }, 5000);

        return () => clearInterval(pollInterval);
    }, [selectedGuild?.id, selectedChannel?.id]);

    // Handle preview cache updates
    const handlePreviewLoad = useCallback((url, preview) => {
        setPreviewCache(prev => ({ ...prev, [url]: preview }));
    }, []);

    // Filter messages by search - use server results if available, otherwise filter locally
    const filteredMessages = useMemo(() => {
        // If we have server-side search results, use those
        if (searchQuery.trim().length >= 2 && searchResults !== null) {
            return searchResults;
        }

        // No search query - return all messages
        if (!searchQuery.trim()) return messages;

        // Local filtering for short queries or while waiting for server results
        const query = searchQuery.toLowerCase();
        return messages.filter(msg => {
            // Check message content
            if (msg.content?.toLowerCase().includes(query)) return true;

            // Check author username/displayName
            if (msg.author?.username?.toLowerCase().includes(query)) return true;
            if (msg.author?.displayName?.toLowerCase().includes(query)) return true;

            // Check embed content
            if (msg.embeds?.length > 0) {
                for (const embed of msg.embeds) {
                    if (embed.title?.toLowerCase().includes(query)) return true;
                    if (embed.description?.toLowerCase().includes(query)) return true;
                    if (embed.author?.name?.toLowerCase().includes(query)) return true;
                    if (embed.footer?.text?.toLowerCase().includes(query)) return true;
                    // Check embed fields
                    if (embed.fields?.length > 0) {
                        for (const field of embed.fields) {
                            if (field.name?.toLowerCase().includes(query)) return true;
                            if (field.value?.toLowerCase().includes(query)) return true;
                        }
                    }
                }
            }

            return false;
        });
    }, [messages, searchQuery, searchResults]);

    // Check if current channel is dds-archive
    const isArchiveChannel = selectedChannel?.name === 'dds-archive';

    // Group messages by author and time window (5 minutes)
    // Messages are in ASC order (oldest first, newest at bottom), so we group accordingly
    // For archive channel, parse messages to get real author/timestamp for grouping
    const groupedMessages = useMemo(() => {
        const groups = [];
        let currentGroup = null;
        let lastDate = null;

        filteredMessages.forEach((message) => {
            // For archive channel, parse to get real author and timestamp
            let effectiveAuthor = message.author;
            let effectiveTimestamp = message.timestamp;

            if (isArchiveChannel) {
                const parsed = parseArchivedMessage(message.content);
                if (parsed) {
                    // Use resolved user for proper grouping by real user ID
                    const resolvedUser = resolveArchivedUser(parsed.originalAuthor, usersMap, members);
                    effectiveAuthor = resolvedUser;
                    effectiveTimestamp = parsed.originalTimestamp;
                }
            }

            const messageDate = new Date(effectiveTimestamp).toDateString();

            // Check if we need a date divider (date changed from previous message)
            if (messageDate !== lastDate) {
                if (currentGroup) groups.push(currentGroup);
                groups.push({ type: 'divider', date: effectiveTimestamp });
                currentGroup = null;
                lastDate = messageDate;
            }

            // For ASC order: check time diff from the LAST message in current group
            // (which is the most recent since we're iterating oldest to newest)
            const shouldStartNewGroup = !currentGroup ||
                currentGroup.effectiveAuthor?.id !== effectiveAuthor?.id ||
                Math.abs(new Date(currentGroup.messages[currentGroup.messages.length - 1].effectiveTimestamp) - new Date(effectiveTimestamp)) > 5 * 60 * 1000;

            if (shouldStartNewGroup) {
                if (currentGroup) groups.push(currentGroup);
                currentGroup = {
                    type: 'messages',
                    author: effectiveAuthor,
                    effectiveAuthor,
                    messages: [{ ...message, effectiveTimestamp }],
                };
            } else {
                currentGroup.messages.push({ ...message, effectiveTimestamp });
            }
        });

        if (currentGroup) groups.push(currentGroup);
        return groups;
    }, [filteredMessages, isArchiveChannel, usersMap, members]);

    if (loading) {
        return (
            <div className="discord-logs-container">
                <div className="discord-loading">
                    <ProgressSpinner style={{ width: '40px', height: '40px' }} strokeWidth="4" />
                    <span className="discord-loading-text">Loading Discord archive...</span>
                </div>
            </div>
        );
    }

    if (error) {
        return (
            <div className="discord-logs-container">
                <div className="discord-empty">
                    <svg viewBox="0 0 24 24" fill="currentColor">
                        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z" />
                    </svg>
                    <h3 className="discord-empty-title">Error</h3>
                    <p className="discord-empty-description">{error}</p>
                </div>
            </div>
        );
    }

    return (
        <ImageModalContext.Provider value={openImageModal}>
            <div className="discord-logs-container">
                {/* Header */}
                {selectedChannel && (
                    <div className="discord-header">
                        {selectedChannel.guild?.icon && (
                            <img
                                src={selectedChannel.guild.icon}
                                alt=""
                                className="discord-server-icon"
                            />
                        )}
                        <div className="discord-header-info">
                            <h2 className="discord-server-name">
                                {selectedChannel.guild?.name || 'Discord Archive'}
                            </h2>
                            <div className="discord-channel-name">
                                <svg viewBox="0 0 24 24" fill="currentColor">
                                    <path d="M5.88657 21C5.57547 21 5.3399 20.7189 5.39427 20.4126L6.00001 17H2.59511C2.28449 17 2.04905 16.7198 2.10259 16.4138L2.27759 15.4138C2.31946 15.1746 2.52722 15 2.77011 15H6.35001L7.41001 9H4.00511C3.69449 9 3.45905 8.71977 3.51259 8.41381L3.68759 7.41381C3.72946 7.17456 3.93722 7 4.18011 7H7.76001L8.39677 3.41262C8.43914 3.17391 8.64664 3 8.88907 3H9.87344C10.1845 3 10.4201 3.28107 10.3657 3.58738L9.76001 7H15.76L16.3968 3.41262C16.4391 3.17391 16.6466 3 16.8891 3H17.8734C18.1845 3 18.4201 3.28107 18.3657 3.58738L17.76 7H21.1649C21.4755 7 21.711 7.28023 21.6574 7.58619L21.4824 8.58619C21.4406 8.82544 21.2328 9 20.9899 9H17.41L16.35 15H19.7549C20.0655 15 20.301 15.2802 20.2474 15.5862L20.0724 16.5862C20.0306 16.8254 19.8228 17 19.5799 17H16L15.3632 20.5874C15.3209 20.8261 15.1134 21 14.8709 21H13.8866C13.5755 21 13.3399 20.7189 13.3943 20.4126L14 17H8.00001L7.36325 20.5874C7.32088 20.8261 7.11337 21 6.87094 21H5.88657ZM9.41045 9L8.35045 15H14.3504L15.4104 9H9.41045Z" />
                                </svg>
                                {selectedChannel.name}
                                {selectedChannel.topic && (
                                    <>
                                        <span className="discord-topic-divider">|</span>
                                        <span
                                            className={`discord-channel-topic ${topicExpanded ? 'expanded' : ''}`}
                                            onClick={() => setTopicExpanded(!topicExpanded)}
                                            title={topicExpanded ? 'Click to collapse' : 'Click to expand'}
                                            dangerouslySetInnerHTML={{
                                                __html: parseDiscordMarkdown(selectedChannel.topic, { channelMap, usersMap })
                                            }}
                                        />
                                    </>
                                )}
                            </div>
                        </div>
                        <div className="discord-header-actions">
                            <span className="discord-message-count">
                                {selectedChannel.messageCount?.toLocaleString() || messages.length} messages
                            </span>
                            <button
                                className={`discord-copy-link-btn ${linkCopied ? 'copied' : ''}`}
                                onClick={() => copyShareLink()}
                                title={linkCopied ? 'Copied!' : 'Copy link to channel'}
                            >
                                {linkCopied ? (
                                    <svg viewBox="0 0 24 24" fill="currentColor" width="16" height="16">
                                        <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" />
                                    </svg>
                                ) : (
                                    <svg viewBox="0 0 24 24" fill="currentColor" width="16" height="16">
                                        <path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z" />
                                    </svg>
                                )}
                            </button>
                            <button
                                className={`discord-member-toggle-btn ${memberListExpanded ? 'active' : ''}`}
                                onClick={() => setMemberListExpanded(!memberListExpanded)}
                                title={memberListExpanded ? 'Hide member list' : 'Show member list'}
                            >
                                <svg viewBox="0 0 24 24" fill="currentColor" width="20" height="20">
                                    <path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z" />
                                </svg>
                                {members?.totalMembers && (
                                    <span className="discord-member-count">{members.totalMembers}</span>
                                )}
                            </button>
                        </div>
                    </div>
                )}

                {/* Main layout: sidebar + content */}
                <div className="discord-main-layout">
                    {/* Sidebar with Guild and Channel selector */}
                    <div className="discord-sidebar">
                        {/* Guild tabs */}
                        {guilds.length > 1 && (
                            <div className="discord-guild-list">
                                {guilds.map((guild) => (
                                    <button
                                        key={guild.id}
                                        className={`discord-guild-btn ${selectedGuild?.id === guild.id ? 'active' : ''}`}
                                        onClick={() => {
                                            setSelectedGuild(guild);
                                            const guildChannels = channelsByGuild[guild.id];
                                            // Select first channel with messages
                                            const firstAccessible = guildChannels?.find(c => c.messageCount > 0);
                                            if (firstAccessible) {
                                                setSelectedChannel(firstAccessible);
                                            }
                                        }}
                                        title={guild.name}
                                    >
                                        {guild.icon ? (
                                            <img
                                                src={guild.icon}
                                                alt={guild.name}
                                                className="discord-guild-icon"
                                            />
                                        ) : (
                                            <span className="discord-guild-initial">
                                                {guild.name.charAt(0).toUpperCase()}
                                            </span>
                                        )}
                                    </button>
                                ))}
                            </div>
                        )}

                        {/* Channel list for selected guild */}
                        {selectedGuild && channelsByGuild[selectedGuild.id]?.length > 0 && (
                            <div className="discord-channel-list" data-lenis-prevent>
                                <div className="discord-channel-list-header">
                                    {selectedGuild.name}
                                </div>
                                {(() => {
                                    let lastCategory = null;
                                    // Filter out channels with no messages (no access)
                                    const accessibleChannels = channelsByGuild[selectedGuild.id].filter(c => c.messageCount > 0);
                                    return accessibleChannels.map((channel) => {
                                        const showCategoryHeader = channel.categoryName !== lastCategory;
                                        lastCategory = channel.categoryName;
                                        return (
                                            <React.Fragment key={channel.id}>
                                                {showCategoryHeader && channel.categoryName && (
                                                    <div className="discord-category-header">
                                                        <svg viewBox="0 0 24 24" fill="currentColor" width="12" height="12">
                                                            <path d="M5.3 9.3a1 1 0 0 1 1.4 0l5.3 5.29 5.3-5.3a1 1 0 1 1 1.4 1.42l-6 6a1 1 0 0 1-1.4 0l-6-6a1 1 0 0 1 0-1.42Z" />
                                                        </svg>
                                                        {channel.categoryName}
                                                    </div>
                                                )}
                                                <button
                                                    className={`discord-channel-btn ${channel.categoryName ? 'has-category' : ''} ${selectedChannel?.id === channel.id ? 'active' : ''}`}
                                                    onClick={() => setSelectedChannel(channel)}
                                                    onContextMenu={(e) => handleChannelContextMenu(e, channel)}
                                                    title={channel.name}
                                                >
                                                    <svg viewBox="0 0 24 24" fill="currentColor" width="16" height="16">
                                                        <path d="M5.88657 21C5.57547 21 5.3399 20.7189 5.39427 20.4126L6.00001 17H2.59511C2.28449 17 2.04905 16.7198 2.10259 16.4138L2.27759 15.4138C2.31946 15.1746 2.52722 15 2.77011 15H6.35001L7.41001 9H4.00511C3.69449 9 3.45905 8.71977 3.51259 8.41381L3.68759 7.41381C3.72946 7.17456 3.93722 7 4.18011 7H7.76001L8.39677 3.41262C8.43914 3.17391 8.64664 3 8.88907 3H9.87344C10.1845 3 10.4201 3.28107 10.3657 3.58738L9.76001 7H15.76L16.3968 3.41262C16.4391 3.17391 16.6466 3 16.8891 3H17.8734C18.1845 3 18.4201 3.28107 18.3657 3.58738L17.76 7H21.1649C21.4755 7 21.711 7.28023 21.6574 7.58619L21.4824 8.58619C21.4406 8.82544 21.2328 9 20.9899 9H17.41L16.35 15H19.7549C20.0655 15 20.301 15.2802 20.2474 15.5862L20.0724 16.5862C20.0306 16.8254 19.8228 17 19.5799 17H16L15.3632 20.5874C15.3209 20.8261 15.1134 21 14.8709 21H13.8866C13.5755 21 13.3399 20.7189 13.3943 20.4126L14 17H8.00001L7.36325 20.5874C7.32088 20.8261 7.11337 21 6.87094 21H5.88657ZM9.41045 9L8.35045 15H14.3504L15.4104 9H9.41045Z" />
                                                    </svg>
                                                    <span>{channel.name}</span>
                                                </button>
                                            </React.Fragment>
                                        );
                                    });
                                })()}
                            </div>
                        )}
                    </div>

                    {/* Content area: search + messages */}
                    <div className="discord-content-area">
                        {/* Search bar */}
                        <div className="discord-search-bar">
                            <input
                                type="text"
                                className="discord-search-input"
                                placeholder="Search messages..."
                                value={searchQuery}
                                onChange={(e) => setSearchQuery(e.target.value)}
                            />
                            {searchLoading && (
                                <div className="discord-search-loading">
                                    <ProgressSpinner style={{ width: '16px', height: '16px' }} strokeWidth="4" />
                                </div>
                            )}
                        </div>

                        {/* Search info banner */}
                        {searchQuery.trim().length >= 2 && searchResults !== null && (
                            <div className="discord-search-info">
                                Found {searchResults.length} result{searchResults.length !== 1 ? 's' : ''} across all messages
                                <button
                                    className="discord-search-clear"
                                    onClick={() => setSearchQuery('')}
                                >
                                    Clear search
                                </button>
                            </div>
                        )}

                        {/* Messages */}
                        {loadingMessages ? (
                            <div className="discord-loading">
                                <ProgressSpinner style={{ width: '30px', height: '30px' }} strokeWidth="4" />
                                <span className="discord-loading-text">Loading messages...</span>
                            </div>
                        ) : filteredMessages.length === 0 ? (
                            <div className="discord-empty">
                                <svg viewBox="0 0 24 24" fill="currentColor">
                                    <path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H5.17L4 17.17V4h16v12z" />
                                </svg>
                                <h3 className="discord-empty-title">No messages found</h3>
                                <p className="discord-empty-description">
                                    {searchQuery ? 'No messages match your search. Try different keywords.' : 'This channel has no archived messages'}
                                </p>
                            </div>
                        ) : (
                            <div className="discord-messages" data-lenis-prevent ref={messagesContainerRef}>
                                {/* Loading indicator at top when fetching older messages */}
                                {loadingMore && (
                                    <div className="discord-loading-more">
                                        <ProgressSpinner style={{ width: '20px', height: '20px' }} strokeWidth="4" />
                                    </div>
                                )}
                                {groupedMessages.map((group, groupIdx) => {
                                    if (group.type === 'divider') {
                                        return (
                                            <div key={`divider-${groupIdx}`} className="discord-date-divider">
                                                <span>{formatDateDivider(group.date)}</span>
                                            </div>
                                        );
                                    }

                                    return (
                                        <div key={`group-${groupIdx}`} className="discord-message-group">
                                            {group.messages.map((message, msgIdx) => (
                                                <DiscordMessage
                                                    key={message.id}
                                                    message={message}
                                                    isFirstInGroup={msgIdx === 0}
                                                    previewCache={previewCache}
                                                    onPreviewLoad={handlePreviewLoad}
                                                    channelMap={channelMap}
                                                    usersMap={usersMap}
                                                    members={members}
                                                    onChannelSelect={handleChannelSelect}
                                                    channelName={selectedChannel?.name}
                                                    onReactionClick={handleReactionClick}
                                                    onContextMenu={handleMessageContextMenu}
                                                />
                                            ))}
                                        </div>
                                    );
                                })}
                            </div>
                        )}
                    </div>

                    {/* Member list panel */}
                    {memberListExpanded && (
                        <div className="discord-member-list" data-lenis-prevent>
                            {loadingMembers ? (
                                <div className="discord-member-list-loading">
                                    <ProgressSpinner style={{ width: '24px', height: '24px' }} strokeWidth="4" />
                                </div>
                            ) : members?.groups?.length > 0 ? (
                                <>
                                    {members.groups.map((group) => (
                                        <div key={group.role.id} className="discord-member-group">
                                            <div
                                                className="discord-member-group-header"
                                                style={group.role.color ? { color: group.role.color } : undefined}
                                            >
                                                {group.role.name} — {group.members.length}
                                            </div>
                                            {group.members.map((member) => (
                                                <div key={member.id} className="discord-member-item">
                                                    {member.avatar ? (
                                                        <img
                                                            src={member.avatar}
                                                            alt=""
                                                            className="discord-member-avatar"
                                                        />
                                                    ) : (
                                                        <div className="discord-member-avatar-placeholder">
                                                            {(member.displayName || member.username || 'U')[0].toUpperCase()}
                                                        </div>
                                                    )}
                                                    <span
                                                        className="discord-member-name"
                                                        style={member.color ? { color: member.color } : undefined}
                                                    >
                                                        {member.displayName || member.username}
                                                    </span>
                                                    {member.isBot && <span className="discord-bot-tag">APP</span>}
                                                </div>
                                            ))}
                                        </div>
                                    ))}
                                </>
                            ) : (
                                <div className="discord-member-list-empty">No members found</div>
                            )}
                        </div>
                    )}
                </div>
            </div>

            {/* Image Modal */}
            {imageModal && (
                <div className="discord-image-modal-overlay" onClick={closeImageModal}>
                    <div className="discord-image-modal" onClick={(e) => e.stopPropagation()}>
                        <button className="discord-image-modal-close" onClick={closeImageModal}>
                            <svg viewBox="0 0 24 24" fill="currentColor" width="24" height="24">
                                <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
                            </svg>
                        </button>
                        <img
                            src={imageModal.url}
                            alt={imageModal.alt}
                            className="discord-image-modal-img"
                        />
                        <a
                            href={imageModal.url}
                            target="_blank"
                            rel="noopener noreferrer"
                            className="discord-image-modal-link"
                        >
                            Open original
                        </a>
                    </div>
                </div>
            )}

            {/* Reaction Users Popup */}
            {reactionPopup && (
                <div
                    className="discord-reaction-popup"
                    style={{
                        position: 'fixed',
                        left: reactionPopup.x,
                        top: reactionPopup.y,
                        transform: 'translate(-50%, -100%) translateY(-8px)',
                    }}
                    onClick={(e) => e.stopPropagation()}
                >
                    <div className="discord-reaction-popup-header">
                        {reactionPopup.emoji.id ? (
                            <img
                                src={`https://cdn.discordapp.com/emojis/${reactionPopup.emoji.id}.${reactionPopup.emoji.animated ? 'gif' : 'png'}`}
                                alt={reactionPopup.emoji.name}
                                className="discord-reaction-popup-emoji"
                            />
                        ) : (
                            <span className="discord-reaction-popup-emoji">{reactionPopup.emoji.name}</span>
                        )}
                        <span className="discord-reaction-popup-count">{reactionPopup.users?.length || 0}</span>
                    </div>
                    <div className="discord-reaction-popup-users">
                        {reactionPopup.loading ? (
                            <div className="discord-reaction-popup-loading">
                                <ProgressSpinner style={{ width: '20px', height: '20px' }} strokeWidth="4" />
                            </div>
                        ) : reactionPopup.users?.length > 0 ? (
                            reactionPopup.users.map((user) => (
                                <div key={user.id} className="discord-reaction-popup-user">
                                    <img
                                        src={user.avatar || `https://cdn.discordapp.com/embed/avatars/0.png`}
                                        alt=""
                                        className="discord-reaction-popup-avatar"
                                    />
                                    <span className="discord-reaction-popup-name">{user.displayName}</span>
                                </div>
                            ))
                        ) : (
                            <div className="discord-reaction-popup-empty">No users found</div>
                        )}
                    </div>
                </div>
            )}

            {/* Message Context Menu */}
            {contextMenu && (
                <div
                    className="discord-context-menu"
                    style={{
                        position: 'fixed',
                        left: contextMenu.x,
                        top: contextMenu.y,
                    }}
                    onClick={(e) => e.stopPropagation()}
                >
                    <button className="discord-context-menu-item" onClick={copyMessageLink}>
                        <svg viewBox="0 0 24 24" fill="currentColor" width="18" height="18">
                            <path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z" />
                        </svg>
                        Copy Message Link
                    </button>
                    <button className="discord-context-menu-item" onClick={copyMessageContent}>
                        <svg viewBox="0 0 24 24" fill="currentColor" width="18" height="18">
                            <path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z" />
                        </svg>
                        Copy Text
                    </button>
                    <button className="discord-context-menu-item" onClick={copyMessageId}>
                        <svg viewBox="0 0 24 24" fill="currentColor" width="18" height="18">
                            <path d="M20 9H4v2h16V9zM4 15h16v-2H4v2z" />
                        </svg>
                        Copy Message ID
                    </button>
                </div>
            )}

            {/* Channel Context Menu */}
            {channelContextMenu && (
                <div
                    className="discord-context-menu"
                    style={{
                        position: 'fixed',
                        left: channelContextMenu.x,
                        top: channelContextMenu.y,
                    }}
                    onClick={(e) => e.stopPropagation()}
                >
                    <button className="discord-context-menu-item" onClick={copyChannelLink}>
                        <svg viewBox="0 0 24 24" fill="currentColor" width="18" height="18">
                            <path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z" />
                        </svg>
                        Copy Channel Link
                    </button>
                    <button className="discord-context-menu-item" onClick={copyChannelName}>
                        <svg viewBox="0 0 24 24" fill="currentColor" width="18" height="18">
                            <path d="M5.88657 21C5.57547 21 5.3399 20.7189 5.39427 20.4126L6.00001 17H2.59511C2.28449 17 2.04905 16.7198 2.10259 16.4138L2.27759 15.4138C2.31946 15.1746 2.52722 15 2.77011 15H6.35001L7.41001 9H4.00511C3.69449 9 3.45905 8.71977 3.51259 8.41381L3.68759 7.41381C3.72946 7.17456 3.93722 7 4.18011 7H7.76001L8.39677 3.41262C8.43914 3.17391 8.64664 3 8.88907 3H9.87344C10.1845 3 10.4201 3.28107 10.3657 3.58738L9.76001 7H15.76L16.3968 3.41262C16.4391 3.17391 16.6466 3 16.8891 3H17.8734C18.1845 3 18.4201 3.28107 18.3657 3.58738L17.76 7H21.1649C21.4755 7 21.711 7.28023 21.6574 7.58619L21.4824 8.58619C21.4406 8.82544 21.2328 9 20.9899 9H17.41L16.35 15H19.7549C20.0655 15 20.301 15.2802 20.2474 15.5862L20.0724 16.5862C20.0306 16.8254 19.8228 17 19.5799 17H16L15.3632 20.5874C15.3209 20.8261 15.1134 21 14.8709 21H13.8866C13.5755 21 13.3399 20.7189 13.3943 20.4126L14 17H8.00001L7.36325 20.5874C7.32088 20.8261 7.11337 21 6.87094 21H5.88657ZM9.41045 9L8.35045 15H14.3504L15.4104 9H9.41045Z" />
                        </svg>
                        Copy Channel Name
                    </button>
                    <button className="discord-context-menu-item" onClick={copyChannelId}>
                        <svg viewBox="0 0 24 24" fill="currentColor" width="18" height="18">
                            <path d="M20 9H4v2h16V9zM4 15h16v-2H4v2z" />
                        </svg>
                        Copy Channel ID
                    </button>
                </div>
            )}
        </ImageModalContext.Provider>
    );
}
