import { BaseLayout } from "../views/layout";

import { AuroraClient } from "@/lib/BotClient";
import { getRecentLogs } from "@/lib/logger";

export function dashboardRoute(): Response {

    // Gather real data
    const guildCount = AuroraClient.guilds.cache.size;
    const userCount = AuroraClient.guilds.cache.reduce((acc, guild) => acc + guild.memberCount, 0);
    const commandCount = AuroraClient.commands.size;
    const ping = AuroraClient.ws.ping;

    // Real system metrics
    const memUsage = process.memoryUsage();
    const memoryUsage = (memUsage.heapUsed / 1024 / 1024).toFixed(2);
    const memoryTotal = (memUsage.rss / 1024 / 1024).toFixed(1);
    const uptimeSeconds = process.uptime();
    const uptime = new Date(uptimeSeconds * 1000).toISOString().substr(11, 8); // HH:MM:SS
    const startTimestamp = Date.now() - (uptimeSeconds * 1000);

    // Real activity logs
    const activityLogs = getRecentLogs();

    const memPercent = Math.min(100, (memUsage.heapUsed / memUsage.rss) * 100).toFixed(1);

    // Get top guilds
    const topGuilds = AuroraClient.guilds.cache
        .sort((a, b) => b.memberCount - a.memberCount)
        .first(5);

    const content = `
        <div class="dashboard-grid">
            <!-- Top Stats Row -->
            <div class="stat-card">
                 <div class="stat-header">
                    <h3>Members</h3>
                    <i data-lucide="users" style="width: 14px; height: 14px; color: var(--accents-5)"></i>
                </div>
                <div id="stat-users" class="stat-value">${userCount.toLocaleString()}</div>
                <div class="stat-trend">
                     <span>Total user reach</span>
                </div>
            </div>
            <div class="stat-card">
                 <div class="stat-header">
                    <h3>Guilds</h3>
                    <i data-lucide="server" style="width: 14px; height: 14px; color: var(--accents-5)"></i>
                </div>
                <div id="stat-servers" class="stat-value">${guildCount}</div>
                <div class="stat-trend">
                     <span>Active connections</span>
                </div>
            </div>
            <div class="stat-card">
                 <div class="stat-header">
                    <h3>Latency</h3>
                    <i data-lucide="activity" style="width: 14px; height: 14px; color: var(--accents-5)"></i>
                </div>
                <div id="stat-ping" class="stat-value">${ping < 0 ? "?" : ping}ms</div>
                <div id="stat-ping-trend" class="stat-trend ${ping < 100 ? "up" : "down"}">
                     <i data-lucide="${ping < 100 ? "check-circle" : "alert-circle"}" style="width: 12px; height: 12px"></i>
                     <span>${ping < 100 ? "Stable" : "High"}</span>
                </div>
            </div>

            <!-- Main Content Area -->
            <div class="dashboard-main">
                <div class="panel activity-panel">
                    <div class="panel-header" style="display: flex; justify-content: space-between; align-items: center;">
                        <h2>Activity Flow</h2>
                        <span class="badge live">Live</span>
                    </div>
                    <ul class="activity-feed">
                        ${activityLogs.length > 0 ? activityLogs.map(log => `
                            <li class="activity-item">
                                <span class="time">${log.time}</span>
                                <span class="message">${log.message}</span>
                            </li>
                        `).join('') : `
                            <li class="activity-item">
                                <span class="message" style="color: var(--accents-5)">Listening for activity...</span>
                            </li>
                        `}
                    </ul>
                </div>

                <div class="panel" style="display: flex; flex-direction: column; gap: 24px;">
                    <div>
                        <div class="panel-header">
                            <h2>Health</h2>
                        </div>
                        <div class="metrics-grid">
                            <div class="metric-card">
                                <div class="metric-header">
                                    <span class="metric-label">Memory</span>
                                    <span id="stat-memory" class="metric-value">${memoryUsage} MB</span>
                                </div>
                                <div class="progress-bar-bg">
                                    <div id="stat-memory-bar" class="progress-bar-fill" style="width: ${memPercent}%"></div>
                                </div>
                            </div>
                            
                            <div class="metric-card">
                                 <div class="metric-header">
                                    <span class="metric-label">Uptime</span>
                                    <span id="stat-uptime" class="metric-value uptime-display" data-start-timestamp="${Math.floor(startTimestamp)}">${uptime}</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div>
                        <div class="panel-header">
                            <h2>Top Guilds</h2>
                        </div>
                        <div class="guild-list" style="display: flex; flex-direction: column; gap: 12px;">
                            ${topGuilds.map(g => `
                                <div style="display: flex; justify-content: space-between; align-items: center; font-size: 0.875rem;">
                                    <span style="font-weight: 500;">${g.name}</span>
                                    <span style="color: var(--accents-5); font-family: var(--font-mono);">${g.memberCount} members</span>
                                </div>
                            `).join('')}
                        </div>
                    </div>
                </div>
            </div>

            <!-- Control Panel -->
            <div class="panel control-panel">
                <div class="panel-header">
                    <h2>Quick Actions</h2>
                </div>
                <div class="action-buttons">
                    <button class="btn" data-action="clear_cache">
                        Clear Cache
                    </button>
                    <button class="btn" data-action="reload_commands">
                        Reload Commands
                    </button>
                    <button class="btn btn-danger" data-action="restart_bot">
                        Restart Bot
                    </button>
                </div>
            </div>
        </div>
    `;

    const html = BaseLayout({ title: "Dashboard", content });

    return new Response(html, {
        headers: { "Content-Type": "text/html" },
    });
}