---
import AdminLayout from "@/layouts/AdminLayout.astro";
import { getDatabase, schema } from "@/db";
import { sql, desc, gte } from "drizzle-orm";
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { 
  BarChart3, 
  Users, 
  GitBranch, 
  HardDrive, 
  Activity,
  TrendingUp,
  Server,
  Database
} from "lucide-react";

const user = Astro.locals.user;

// Only admins can access
if (!user?.isAdmin) {
  return Astro.redirect('/');
}

const db = getDatabase();
const thirtyDaysAgo = new Date();
thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30);

// Gather metrics
const [
  totalUsers,
  totalRepos,
  totalIssues,
  totalPRs,
  totalCommits,
  recentActivities,
  reposByLanguage,
  recentUsers
] = await Promise.all([
  db.select({ count: sql<number>`count(*)` }).from(schema.users).get(),
  db.select({ count: sql<number>`count(*)` }).from(schema.repositories).get(),
  db.select({ count: sql<number>`count(*)` }).from(schema.issues).get(),
  db.select({ count: sql<number>`count(*)` }).from(schema.pullRequests).get(),
  db.select({ count: sql<number>`count(*)` }).from(schema.commits).get(),
  db.query.activities.findMany({ 
    orderBy: [desc(schema.activities.createdAt)], 
    limit: 10,
    with: { user: { columns: { username: true } } }
  }),
  db.select({ 
    language: schema.repositories.language, 
    count: sql<number>`count(*)` 
  })
    .from(schema.repositories)
    .groupBy(schema.repositories.language)
    .limit(10)
    .all(),
  db.query.users.findMany({
    where: gte(schema.users.createdAt, thirtyDaysAgo),
    columns: { createdAt: true },
  })
]);

const userGrowthMap = new Map<string, number>();
for (let i = 0; i < 30; i++) {
  const d = new Date();
  d.setDate(d.getDate() - i);
  const key = d.toISOString().split("T")[0];
  userGrowthMap.set(key, 0);
}
for (const u of recentUsers) {
  const key = u.createdAt.toISOString().split("T")[0];
  userGrowthMap.set(key, (userGrowthMap.get(key) || 0) + 1);
}
const userGrowth = Array.from(userGrowthMap.entries())
  .map(([date, count]) => ({ date, count }))
  .sort((a, b) => a.date.localeCompare(b.date));

// Storage estimate (count repos * average size)
const storageKB = await db.select({ total: sql<number>`sum(size)` })
  .from(schema.repositories)
  .get();

const storageMB = Math.round((storageKB?.total || 0) / 1024);
const storageGB = (storageMB / 1024).toFixed(2);

// Calculate some rates
const today = new Date().toISOString().split('T')[0];
const todayUsers = userGrowth.find(u => u.date === today)?.count || 0;
---

<AdminLayout title="System Metrics">
  <div class="min-h-screen bg-background p-6">
    <div class="max-w-7xl mx-auto space-y-6">
      <!-- Header -->
      <div class="flex items-center justify-between">
        <div>
          <h1 class="text-2xl font-bold flex items-center gap-2">
            <BarChart3 class="h-6 w-6" />
            System Metrics
          </h1>
          <p class="text-muted-foreground">Real-time system statistics and insights</p>
        </div>
        <a href="/admin" class="text-muted-foreground hover:text-foreground">
          ← Back to Dashboard
        </a>
      </div>

      <!-- Key Metrics -->
      <div class="grid gap-4 md:grid-cols-4">
        <Card>
          <CardContent class="p-4 flex items-center gap-4">
            <div class="p-3 rounded-full bg-blue-500/10">
              <Users class="h-5 w-5 text-blue-500" />
            </div>
            <div>
              <p class="text-sm text-muted-foreground">Total Users</p>
              <p class="text-2xl font-bold">{totalUsers?.count || 0}</p>
              {todayUsers > 0 && (
                <p class="text-xs text-green-500">+{todayUsers} today</p>
              )}
            </div>
          </CardContent>
        </Card>
        
        <Card>
          <CardContent class="p-4 flex items-center gap-4">
            <div class="p-3 rounded-full bg-green-500/10">
              <GitBranch class="h-5 w-5 text-green-500" />
            </div>
            <div>
              <p class="text-sm text-muted-foreground">Repositories</p>
              <p class="text-2xl font-bold">{totalRepos?.count || 0}</p>
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardContent class="p-4 flex items-center gap-4">
            <div class="p-3 rounded-full bg-purple-500/10">
              <Activity class="h-5 w-5 text-purple-500" />
            </div>
            <div>
              <p class="text-sm text-muted-foreground">Total Commits</p>
              <p class="text-2xl font-bold">{totalCommits?.count || 0}</p>
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardContent class="p-4 flex items-center gap-4">
            <div class="p-3 rounded-full bg-orange-500/10">
              <HardDrive class="h-5 w-5 text-orange-500" />
            </div>
            <div>
              <p class="text-sm text-muted-foreground">Storage</p>
              <p class="text-2xl font-bold">{storageGB} GB</p>
            </div>
          </CardContent>
        </Card>
      </div>

      <!-- Charts Row -->
      <div class="grid gap-6 md:grid-cols-2">
        <!-- User Growth -->
        <Card>
          <CardHeader>
            <CardTitle class="flex items-center gap-2">
              <TrendingUp class="h-5 w-5" />
              User Growth (30 days)
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div class="h-48 flex items-end gap-1">
              {userGrowth.slice().reverse().map((day, i) => {
                const maxCount = Math.max(...userGrowth.map(d => d.count), 1);
                const height = (day.count / maxCount) * 100;
                return (
                  <div 
                    class="flex-1 bg-primary/80 hover:bg-primary rounded-t transition-colors"
                    style={`height: ${Math.max(height, 5)}%`}
                    title={`${day.date}: ${day.count} users`}
                  />
                );
              })}
            </div>
            <div class="flex justify-between mt-2 text-xs text-muted-foreground">
              <span>30 days ago</span>
              <span>Today</span>
            </div>
          </CardContent>
        </Card>

        <!-- Language Distribution -->
        <Card>
          <CardHeader>
            <CardTitle class="flex items-center gap-2">
              <Database class="h-5 w-5" />
              Languages
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div class="space-y-3">
              {reposByLanguage.filter(l => l.language).slice(0, 8).map((lang) => {
                const total = reposByLanguage.reduce((sum, l) => sum + l.count, 0);
                const percent = ((lang.count / total) * 100).toFixed(1);
                const colors: Record<string, string> = {
                  'TypeScript': 'bg-blue-500',
                  'JavaScript': 'bg-yellow-500',
                  'Python': 'bg-green-500',
                  'Go': 'bg-cyan-500',
                  'Rust': 'bg-orange-500',
                  'Java': 'bg-red-500',
                };
                const color = colors[lang.language || ''] || 'bg-muted-foreground';
                
                return (
                  <div class="flex items-center gap-3">
                    <div class={`w-3 h-3 rounded-full ${color}`} />
                    <span class="flex-1 text-sm">{lang.language || 'Unknown'}</span>
                    <span class="text-sm text-muted-foreground">{lang.count}</span>
                    <div class="w-20 h-2 bg-muted rounded overflow-hidden">
                      <div class={`h-full ${color}`} style={`width: ${percent}%`} />
                    </div>
                  </div>
                );
              })}
            </div>
          </CardContent>
        </Card>
      </div>

      <!-- Issue & PR Stats -->
      <div class="grid gap-6 md:grid-cols-2">
        <Card>
          <CardContent class="p-6">
            <div class="flex items-center justify-between">
              <div>
                <p class="text-sm text-muted-foreground">Open Issues</p>
                <p class="text-3xl font-bold">{totalIssues?.count || 0}</p>
              </div>
              <div class="text-right">
                <p class="text-sm text-muted-foreground">Pull Requests</p>
                <p class="text-3xl font-bold">{totalPRs?.count || 0}</p>
              </div>
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle class="flex items-center gap-2">
              <Server class="h-5 w-5" />
              System Health
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div class="grid grid-cols-2 gap-4">
              <div class="p-3 rounded-lg bg-green-500/10 text-center">
                <div class="text-green-500 font-bold">Healthy</div>
                <div class="text-xs text-muted-foreground">Database</div>
              </div>
              <div class="p-3 rounded-lg bg-green-500/10 text-center">
                <div class="text-green-500 font-bold">Online</div>
                <div class="text-xs text-muted-foreground">Git Server</div>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>

      <!-- Recent Activity -->
      <Card>
        <CardHeader>
          <CardTitle>Recent Activity</CardTitle>
        </CardHeader>
        <CardContent>
          <div class="space-y-3">
            {recentActivities.map((activity) => (
              <div class="flex items-center gap-3 text-sm">
                <Activity class="h-4 w-4 text-muted-foreground" />
                <span class="font-medium">@{activity.user?.username}</span>
                <span class="text-muted-foreground">{activity.action}</span>
                <span class="text-muted-foreground">{activity.type}</span>
                {activity.refName && (
                  <span class="font-mono text-xs bg-muted px-2 py-0.5 rounded">{activity.refName}</span>
                )}
              </div>
            ))}
          </div>
        </CardContent>
      </Card>
    </div>
  </div>
</AdminLayout>