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 memoryUsage = (process.memoryUsage().heapUsed / 1024 / 1024).toFixed(2);
    const uptimeSeconds = process.uptime();
    const uptime = new Date(uptimeSeconds * 1000).toISOString().substr(11, 8); // HH:MM:SS

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

    const content = `
        <div class="dashboard-grid">
            <!-- Top Stats Row -->
            <div class="stat-card">
                <h3>Servers</h3>
                <div class="stat-value">${guildCount}</div>
            </div>
            <div class="stat-card">
                <h3>Users</h3>
                <div class="stat-value">${userCount}</div>
            </div>
            <div class="stat-card">
                <h3>Commands</h3>
                <div class="stat-value">${commandCount}</div>
            </div>
            <div class="stat-card">
                <h3>Ping</h3>
                <div class="stat-value">${ping < 0 ? "?" : ping}ms</div>
            </div>

            <!-- Main Content Area -->
            <div class="dashboard-main">
                <div class="panel activity-panel">
                    <div class="panel-header">
                        <h2>Live Activity</h2>
                        <span class="badge live">LIVE</span>
                    </div>
                    <ul class="activity-feed">
                        ${activityLogs.length > 0 ? activityLogs.map(log => `
                            <li class="activity-item ${log.type}">
                                <span class="time">${log.time}</span>
                                <span class="message">${log.message}</span>
                            </li>
                        `).join('') : `
                            <li class="activity-item info"><span class="time">--:--:--</span> <span class="message">No recent activity.</span></li>
                        `}
                    </ul>
                </div>

                <div class="panel metrics-panel">
                    <div class="panel-header">
                        <h2>System Health</h2>
                    </div>
                    <div class="metrics-grid">
                        <div class="metric-item">
                            <span class="metric-label">Uptime</span>
                            <span class="metric-value">${uptime}</span>
                        </div>
                        <div class="metric-item">
                            <span class="metric-label">Memory (Heap)</span>
                            <span class="metric-value">${memoryUsage} MB</span>
                        </div>
                         <div class="metric-item">
                            <span class="metric-label">Node Version</span>
                            <span class="metric-value">${process.version}</span>
                        </div>
                         <div class="metric-item">
                            <span class="metric-label">Platform</span>
                            <span class="metric-value">${process.platform}</span>
                        </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 btn-secondary" disabled>Clear Cache</button>
                    <button class="btn btn-secondary" disabled>Reload Commands</button>
                    <button class="btn btn-danger" disabled>Restart Bot</button>
                </div>
            </div>
        </div>
    `;

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

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