import { BaseLayout } from "../views/layout";
import { AuroraClient } from "@/lib/BotClient";

export function dashboardRoute(): Response {
    // Gather real data where possible, mock where not
    const guildCount = AuroraClient.guilds.cache.size;
    const userCount = AuroraClient.guilds.cache.reduce((acc, guild) => acc + guild.memberCount, 0); // Approximation
    const commandCount = AuroraClient.commands.size;
    const ping = AuroraClient.ws.ping;

    // In a real app, these would be dynamic charts or lists
    const mockedActivity = [
        { time: "10:42:01", type: "info", message: "User 'Syntax' ran /profile" },
        { time: "10:41:55", type: "success", message: "Task 'HourlyCleanup' completed" },
        { time: "10:40:12", type: "warning", message: "API Latency spike detected (150ms)" },
        { time: "10:39:00", type: "info", message: "Bot connected to Gateway" },
    ];

    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">
                        ${mockedActivity.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">Waiting for events...</span></li>
                    </ul>
                </div>

                <div class="panel metrics-panel">
                    <div class="panel-header">
                        <h2>System Metrics</h2>
                    </div>
                    <div class="mock-chart-container">
                        <div class="mock-chart-bar" style="height: 40%"></div>
                        <div class="mock-chart-bar" style="height: 60%"></div>
                        <div class="mock-chart-bar" style="height: 30%"></div>
                        <div class="mock-chart-bar" style="height: 80%"></div>
                        <div class="mock-chart-bar" style="height: 50%"></div>
                        <div class="mock-chart-bar" style="height: 90%"></div>
                        <div class="mock-chart-bar" style="height: 45%"></div>
                    </div>
                    <div class="metrics-legend">
                        <span>CPU Load (Mock)</span>
                    </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" },
    });
}