---
import BaseLayout from "@/layouts/BaseLayout.astro";
import { getDatabase, schema } from "@/db";
import { eq, desc, and, gte, sql } from "drizzle-orm";
import {
  BarChart3,
  TrendingUp,
  Clock,
  GitPullRequest,
  Users,
  Calendar,
  Download,
  ChevronDown
} from "lucide-react";

const user = Astro.locals.user;
if (!user) {
  return Astro.redirect("/login");
}

const db = getDatabase();
const period = Astro.url.searchParams.get("period") || "4w";
const view = Astro.url.searchParams.get("view") || "personal";

// Calculate date range
const now = new Date();
let startDate: Date;
switch (period) {
  case "1w":
    startDate = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000);
    break;
  case "4w":
    startDate = new Date(now.getTime() - 28 * 24 * 60 * 60 * 1000);
    break;
  case "3m":
    startDate = new Date(now.getTime() - 90 * 24 * 60 * 60 * 1000);
    break;
  case "1y":
    startDate = new Date(now.getTime() - 365 * 24 * 60 * 60 * 1000);
    break;
  default:
    startDate = new Date(now.getTime() - 28 * 24 * 60 * 60 * 1000);
}

// Fetch user metrics
let myMetrics = {
  prsOpened: 0,
  prsMerged: 0,
  reviewsGiven: 0,
  avgTimeToMerge: 0,
  avgReviewTime: 0,
};

let weeklyTrends: { week: string; opened: number; merged: number; reviewed: number }[] = [];
let topContributors: { username: string; avatarUrl?: string; prs: number; reviews: number }[] = [];
let reviewStats = { approvals: 0, changesRequested: 0, comments: 0 };

try {
  // Get user's PRs
  const myPrs = await db.query.pullRequests.findMany({
    where: and(
      eq(schema.pullRequests.authorId, user.id),
      gte(schema.pullRequests.createdAt, startDate)
    ),
  });
  
  myMetrics.prsOpened = myPrs.length;
  myMetrics.prsMerged = myPrs.filter(pr => pr.mergedAt).length;
  
  // Calculate avg time to merge (in hours)
  const mergedPrs = myPrs.filter(pr => pr.mergedAt && pr.createdAt);
  if (mergedPrs.length > 0) {
    const totalTime = mergedPrs.reduce((acc, pr) => {
      const created = new Date(pr.createdAt).getTime();
      const merged = new Date(pr.mergedAt!).getTime();
      return acc + (merged - created);
    }, 0);
    myMetrics.avgTimeToMerge = Math.round(totalTime / mergedPrs.length / (1000 * 60 * 60));
  }
  
  // Get reviews given
  const myReviews = await db.query.pullRequestReviews.findMany({
    where: and(
      eq(schema.pullRequestReviews.reviewerId, user.id),
      gte(schema.pullRequestReviews.createdAt, startDate)
    ),
  });
  
  myMetrics.reviewsGiven = myReviews.length;
  reviewStats.approvals = myReviews.filter(r => r.state === "approved").length;
  reviewStats.changesRequested = myReviews.filter(r => r.state === "changes_requested").length;
  reviewStats.comments = myReviews.filter(r => r.state === "commented").length;
  
  // Generate weekly trends (last 4 weeks)
  for (let i = 3; i >= 0; i--) {
    const weekStart = new Date(now.getTime() - (i + 1) * 7 * 24 * 60 * 60 * 1000);
    const weekEnd = new Date(now.getTime() - i * 7 * 24 * 60 * 60 * 1000);
    const weekLabel = weekStart.toLocaleDateString("en-US", { month: "short", day: "numeric" });
    
    const weekPrs = myPrs.filter(pr => {
      const created = new Date(pr.createdAt);
      return created >= weekStart && created < weekEnd;
    });
    
    const weekMerged = myPrs.filter(pr => {
      if (!pr.mergedAt) return false;
      const merged = new Date(pr.mergedAt);
      return merged >= weekStart && merged < weekEnd;
    });
    
    const weekReviews = myReviews.filter(r => {
      const created = new Date(r.createdAt);
      return created >= weekStart && created < weekEnd;
    });
    
    weeklyTrends.push({
      week: weekLabel,
      opened: weekPrs.length,
      merged: weekMerged.length,
      reviewed: weekReviews.length,
    });
  }

  if (view === "team") {
    const allPrs = await db.query.pullRequests.findMany({
      where: gte(schema.pullRequests.createdAt, startDate),
      with: { author: true },
      limit: 100,
    });
    
    const contributorMap = new Map<string, { username: string; avatarUrl?: string; prs: number; reviews: number }>();
    
    for (const pr of allPrs) {
      if (pr.author) {
        const existing = contributorMap.get(pr.author.id) || { 
          username: pr.author.username, 
          avatarUrl: pr.author.avatarUrl || undefined, 
          prs: 0, 
          reviews: 0 
        };
        existing.prs++;
        contributorMap.set(pr.author.id, existing);
      }
    }
    
    topContributors = Array.from(contributorMap.values())
      .sort((a, b) => b.prs - a.prs)
      .slice(0, 10);
  }
} catch (e) {
  console.error("Failed to fetch metrics:", e);
}

function formatDuration(hours: number): string {
  if (hours < 1) return "< 1h";
  if (hours < 24) return `${hours}h`;
  return `${Math.round(hours / 24)}d`;
}
---

<BaseLayout title="Insights · OpenCodeHub">
  <div class="container max-w-[1280px] mx-auto py-8 px-4 sm:px-6 space-y-6">
    <!-- Header -->
    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 pb-6 border-b border-border">
      <div>
        <h1 class="text-2xl font-bold text-foreground tracking-tight flex items-center gap-2.5">
          <BarChart3 className="h-6 w-6 text-foreground" />
          <span>Engineering Insights</span>
        </h1>
        <p class="text-sm text-muted-foreground mt-1">Track productivity, review velocity, and development cadence</p>
      </div>
      
      <div class="flex items-center gap-2.5 flex-wrap self-start sm:self-auto">
        <!-- View Toggle -->
        <div class="inline-flex items-center gap-1 p-1 rounded-lg border border-border/80 bg-card/60">
          <a
            href={`/insights?period=${period}&view=personal`}
            class:list={[
              "px-3 py-1 text-xs font-medium rounded-md transition-colors",
              view === "personal" 
                ? "bg-secondary text-foreground font-semibold shadow-sm" 
                : "text-muted-foreground hover:text-foreground"
            ]}
          >
            Personal
          </a>
          <a
            href={`/insights?period=${period}&view=team`}
            class:list={[
              "px-3 py-1 text-xs font-medium rounded-md transition-colors",
              view === "team" 
                ? "bg-secondary text-foreground font-semibold shadow-sm" 
                : "text-muted-foreground hover:text-foreground"
            ]}
          >
            Team
          </a>
        </div>
        
        <!-- Period Selector -->
        <div class="relative">
          <select
            id="period-select"
            class="h-8 rounded-md border border-border/70 bg-card px-3 text-xs text-foreground focus:outline-none focus:ring-2 focus:ring-primary/20 transition-colors"
          >
            <option value="1w" selected={period === "1w"}>Last 7 days</option>
            <option value="4w" selected={period === "4w"}>Last 4 weeks</option>
            <option value="3m" selected={period === "3m"}>Last 3 months</option>
            <option value="1y" selected={period === "1y"}>Last year</option>
          </select>
        </div>
      </div>
    </div>

    <!-- Key Metrics Cards -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
      <div class="rounded-xl border border-border/80 bg-card/60 backdrop-blur-sm p-5 shadow-sm">
        <div class="flex items-center justify-between mb-2">
          <span class="text-xs font-medium text-muted-foreground">PRs Opened</span>
          <GitPullRequest className="h-4 w-4 text-muted-foreground" />
        </div>
        <div class="text-2xl font-bold text-foreground">{myMetrics.prsOpened}</div>
      </div>

      <div class="rounded-xl border border-border/80 bg-card/60 backdrop-blur-sm p-5 shadow-sm">
        <div class="flex items-center justify-between mb-2">
          <span class="text-xs font-medium text-muted-foreground">PRs Merged</span>
          <GitPullRequest className="h-4 w-4 text-emerald-500" />
        </div>
        <div class="text-2xl font-bold text-foreground">{myMetrics.prsMerged}</div>
        <div class="text-[11px] text-muted-foreground mt-1">
          {myMetrics.prsOpened > 0 ? Math.round((myMetrics.prsMerged / myMetrics.prsOpened) * 100) : 0}% merge rate
        </div>
      </div>

      <div class="rounded-xl border border-border/80 bg-card/60 backdrop-blur-sm p-5 shadow-sm">
        <div class="flex items-center justify-between mb-2">
          <span class="text-xs font-medium text-muted-foreground">Reviews Given</span>
          <Users className="h-4 w-4 text-muted-foreground" />
        </div>
        <div class="text-2xl font-bold text-foreground">{myMetrics.reviewsGiven}</div>
      </div>

      <div class="rounded-xl border border-border/80 bg-card/60 backdrop-blur-sm p-5 shadow-sm">
        <div class="flex items-center justify-between mb-2">
          <span class="text-xs font-medium text-muted-foreground">Avg Time to Merge</span>
          <Clock className="h-4 w-4 text-muted-foreground" />
        </div>
        <div class="text-2xl font-bold text-foreground">{formatDuration(myMetrics.avgTimeToMerge)}</div>
      </div>
    </div>

    <!-- Charts Row -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
      <!-- Weekly Trend Chart -->
      <div class="rounded-xl border border-border/80 bg-card/60 backdrop-blur-sm p-5 shadow-sm">
        <h3 class="text-sm font-bold text-foreground mb-4 flex items-center gap-2">
          <TrendingUp className="h-4 w-4 text-muted-foreground" />
          Weekly Velocity
        </h3>
        
        <div class="space-y-4">
          {weeklyTrends.map((week) => {
            const maxValue = Math.max(...weeklyTrends.flatMap(w => [w.opened, w.merged, w.reviewed]), 1);
            return (
              <div class="space-y-1.5">
                <div class="flex items-center justify-between text-xs">
                  <span class="font-medium text-foreground">{week.week}</span>
                  <div class="flex items-center gap-3 text-muted-foreground text-[11px]">
                    <span class="text-emerald-500 font-semibold">{week.opened} opened</span>
                    <span class="text-purple-400 font-semibold">{week.merged} merged</span>
                    <span class="text-primary font-semibold">{week.reviewed} reviewed</span>
                  </div>
                </div>
                <div class="flex gap-1 h-3 rounded bg-secondary/60 p-0.5 overflow-hidden">
                  <div 
                    class="bg-emerald-500 rounded-sm transition-all"
                    style={`width: ${(week.opened / maxValue) * 100}%`}
                  ></div>
                  <div 
                    class="bg-purple-500 rounded-sm transition-all"
                    style={`width: ${(week.merged / maxValue) * 100}%`}
                  ></div>
                  <div 
                    class="bg-primary rounded-sm transition-all"
                    style={`width: ${(week.reviewed / maxValue) * 100}%`}
                  ></div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
      
      <!-- Review Breakdown -->
      <div class="rounded-xl border border-border/80 bg-card/60 backdrop-blur-sm p-5 shadow-sm">
        <h3 class="text-sm font-bold text-foreground mb-4 flex items-center gap-2">
          <Users className="h-4 w-4 text-muted-foreground" />
          Review Breakdown
        </h3>
        
        <div class="flex items-center justify-around py-6">
          <div class="text-center">
            <div class="w-16 h-16 rounded-full border-2 border-emerald-500/40 bg-emerald-500/10 flex items-center justify-center mx-auto mb-2">
              <span class="text-xl font-bold text-emerald-500">{reviewStats.approvals}</span>
            </div>
            <span class="text-xs font-medium text-muted-foreground">Approvals</span>
          </div>
          <div class="text-center">
            <div class="w-16 h-16 rounded-full border-2 border-amber-500/40 bg-amber-500/10 flex items-center justify-center mx-auto mb-2">
              <span class="text-xl font-bold text-amber-500">{reviewStats.changesRequested}</span>
            </div>
            <span class="text-xs font-medium text-muted-foreground">Changes</span>
          </div>
          <div class="text-center">
            <div class="w-16 h-16 rounded-full border-2 border-primary/40 bg-primary/10 flex items-center justify-center mx-auto mb-2">
              <span class="text-xl font-bold text-primary">{reviewStats.comments}</span>
            </div>
            <span class="text-xs font-medium text-muted-foreground">Comments</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</BaseLayout>

<script>
  const periodSelect = document.getElementById("period-select") as HTMLSelectElement;
  periodSelect?.addEventListener("change", () => {
    const url = new URL(window.location.href);
    url.searchParams.set("period", periodSelect.value);
    window.location.href = url.toString();
  });
</script>