---
import { resolveOrgOwners } from "@/lib/repo-owner";
import { getDatabase, schema } from "@/db";
import BaseLayout from "@/layouts/BaseLayout.astro";
import { desc, eq, sql } from "drizzle-orm";
import {
  GitPullRequest,
  GitMerge,
  CircleDot,
  CheckCircle2,
  XCircle,
  Clock,
  ArrowRight,
  Filter,
  Plus
} from "lucide-react";

const db = getDatabase();

// Get filter from query params
const filter = Astro.url.searchParams.get("filter") || "open";
const sort = Astro.url.searchParams.get("sort") || "newest";

// Fetch pull requests from public repos
let pullRequests: any[] = [];
let openCount = 0;
let mergedCount = 0;
let closedCount = 0;

try {
  const rawPRs = await db.query.pullRequests.findMany({
    where: filter === "closed" 
      ? eq(schema.pullRequests.state, "closed")
      : filter === "merged"
        ? eq(schema.pullRequests.state, "merged")
        : filter === "all"
          ? undefined
          : eq(schema.pullRequests.state, "open"),
    orderBy: sort === "oldest" 
      ? [schema.pullRequests.createdAt]
      : [desc(schema.pullRequests.createdAt)],
    limit: 50,
    with: {
      repository: {
        with: {
          owner: true,
        },
      },
      author: true,
    },
  });

  // Filter to only public repos
  pullRequests = (await resolveOrgOwners(rawPRs)).filter(pr => 
    pr.repository?.visibility === "public"
  );

  // Fetch counts for badges
  const allPublicPRs = await db.query.pullRequests.findMany({
    columns: { state: true },
    with: {
      repository: {
        columns: { visibility: true }
      }
    }
  });
  const publicOnly = allPublicPRs.filter(p => p.repository?.visibility === "public");
  openCount = publicOnly.filter(p => p.state === "open").length;
  mergedCount = publicOnly.filter(p => p.state === "merged").length;
  closedCount = publicOnly.filter(p => p.state === "closed").length;
} catch (e) {
  console.error("Error fetching pull requests:", e);
}

function timeAgo(date: string | number | Date) {
  if (!date) return "";
  const seconds = Math.floor(
    (new Date().getTime() - new Date(date).getTime()) / 1000
  );
  if (seconds < 60) return "just now";
  if (seconds < 3600) return `${Math.floor(seconds / 60)}m ago`;
  if (seconds < 86400) return `${Math.floor(seconds / 3600)}h ago`;
  if (seconds < 604800) return `${Math.floor(seconds / 86400)}d ago`;
  return new Date(date).toLocaleDateString();
}
---

<BaseLayout title="Pull Requests · OpenCodeHub">
  <div class="container max-w-[1280px] mx-auto py-8 px-4 sm:px-6">
    <!-- Header -->
    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 pb-6 border-b border-border mb-6">
      <div>
        <h1 class="text-2xl font-bold text-foreground tracking-tight flex items-center gap-2.5">
          <GitPullRequest className="h-6 w-6 text-foreground" />
          <span>Pull Requests</span>
        </h1>
        <p class="text-sm text-muted-foreground mt-1">Browse and review pull requests across all public repositories</p>
      </div>
    </div>

    <!-- Filter Bar -->
    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-4">
      <!-- State Filter Pills -->
      <div class="inline-flex items-center gap-1 p-1 rounded-lg border border-border/80 bg-card/60 backdrop-blur-sm self-start">
        <a
          href="/pulls?filter=open"
          class:list={[
            "inline-flex items-center gap-2 px-3 py-1.5 rounded-md text-xs sm:text-sm font-medium transition-colors",
            filter === "open"
              ? "bg-secondary text-foreground font-semibold shadow-sm"
              : "text-muted-foreground hover:text-foreground hover:bg-muted/60"
          ]}
        >
          <span class="h-2 w-2 rounded-full bg-emerald-500"></span>
          <span>Open</span>
          <span class="ml-0.5 rounded-full bg-muted px-1.5 py-0.2 text-[11px] font-semibold text-muted-foreground">
            {openCount}
          </span>
        </a>
        <a
          href="/pulls?filter=merged"
          class:list={[
            "inline-flex items-center gap-2 px-3 py-1.5 rounded-md text-xs sm:text-sm font-medium transition-colors",
            filter === "merged"
              ? "bg-secondary text-foreground font-semibold shadow-sm"
              : "text-muted-foreground hover:text-foreground hover:bg-muted/60"
          ]}
        >
          <span class="h-2 w-2 rounded-full bg-purple-500"></span>
          <span>Merged</span>
          <span class="ml-0.5 rounded-full bg-muted px-1.5 py-0.2 text-[11px] font-semibold text-muted-foreground">
            {mergedCount}
          </span>
        </a>
        <a
          href="/pulls?filter=closed"
          class:list={[
            "inline-flex items-center gap-2 px-3 py-1.5 rounded-md text-xs sm:text-sm font-medium transition-colors",
            filter === "closed"
              ? "bg-secondary text-foreground font-semibold shadow-sm"
              : "text-muted-foreground hover:text-foreground hover:bg-muted/60"
          ]}
        >
          <span class="h-2 w-2 rounded-full bg-red-500"></span>
          <span>Closed</span>
          <span class="ml-0.5 rounded-full bg-muted px-1.5 py-0.2 text-[11px] font-semibold text-muted-foreground">
            {closedCount}
          </span>
        </a>
        <a
          href="/pulls?filter=all"
          class:list={[
            "inline-flex items-center gap-2 px-3 py-1.5 rounded-md text-xs sm:text-sm font-medium transition-colors",
            filter === "all"
              ? "bg-secondary text-foreground font-semibold shadow-sm"
              : "text-muted-foreground hover:text-foreground hover:bg-muted/60"
          ]}
        >
          <span>All</span>
        </a>
      </div>

      <!-- Sort Selection -->
      <div class="flex items-center gap-2 self-end sm:self-center">
        <label for="sort-select" class="text-xs text-muted-foreground font-medium">Sort:</label>
        <select
          id="sort-select"
          class="h-8 rounded-md border border-border/70 bg-card px-2.5 py-1 text-xs text-foreground focus:outline-none focus:ring-2 focus:ring-primary/20 transition-colors"
        >
          <option value="newest" selected={sort === "newest"}>Newest</option>
          <option value="oldest" selected={sort === "oldest"}>Oldest</option>
        </select>
      </div>
    </div>

    <!-- Pull Requests List Card -->
    <div class="rounded-xl border border-border/80 bg-card/60 backdrop-blur-sm overflow-hidden shadow-sm">
      {pullRequests.length > 0 ? (
        <div class="divide-y divide-border/60">
          {pullRequests.map((pr) => {
            const ownerName = pr.repository?.owner?.username || "unknown";
            const repoName = pr.repository?.name || "repo";
            return (
              <a
                href={`/${ownerName}/${repoName}/pulls/${pr.number}`}
                class="group flex items-start gap-3.5 p-4 hover:bg-accent/40 transition-colors"
              >
                <!-- Status Icon -->
                <div class="mt-0.5 flex-shrink-0">
                  {pr.state === "open" ? (
                    <div class="h-6 w-6 rounded-full bg-emerald-500/10 text-emerald-500 flex items-center justify-center border border-emerald-500/20" title="Open pull request">
                      <GitPullRequest className="h-3.5 w-3.5" />
                    </div>
                  ) : pr.state === "merged" ? (
                    <div class="h-6 w-6 rounded-full bg-purple-500/10 text-purple-400 flex items-center justify-center border border-purple-500/20" title="Merged pull request">
                      <GitMerge className="h-3.5 w-3.5" />
                    </div>
                  ) : (
                    <div class="h-6 w-6 rounded-full bg-red-500/10 text-red-400 flex items-center justify-center border border-red-500/20" title="Closed pull request">
                      <XCircle className="h-3.5 w-3.5" />
                    </div>
                  )}
                </div>

                <div class="flex-1 min-w-0">
                  <div class="flex items-baseline gap-2 flex-wrap mb-1">
                    <span class="text-xs font-semibold text-muted-foreground hover:text-foreground">
                      {ownerName}/{repoName}
                    </span>
                    <span class="text-xs text-muted-foreground/80 font-mono">#{pr.number}</span>
                  </div>
                  
                  <h3 class="text-sm font-semibold text-foreground group-hover:text-primary transition-colors leading-snug break-words">
                    {pr.title}
                  </h3>

                  <!-- Branches & Meta Info -->
                  <div class="flex items-center gap-2.5 mt-2 flex-wrap text-xs text-muted-foreground">
                    <div class="flex items-center gap-1 font-mono text-[11px] bg-secondary/80 text-foreground px-2 py-0.5 rounded border border-border/50">
                      <span>{pr.headBranch}</span>
                      <ArrowRight className="h-2.5 w-2.5 text-muted-foreground" />
                      <span>{pr.baseBranch}</span>
                    </div>

                    <span>·</span>

                    <span>
                      opened {timeAgo(pr.createdAt)} by <span class="text-foreground font-medium">@{pr.author?.username || "unknown"}</span>
                    </span>

                    {pr.state === "merged" && pr.mergedAt && (
                      <>
                        <span>·</span>
                        <span class="text-purple-400 font-medium">
                          merged {timeAgo(pr.mergedAt)}
                        </span>
                      </>
                    )}
                  </div>
                </div>

                <!-- Author Avatar -->
                <div class="hidden sm:block flex-shrink-0">
                  {pr.author?.avatarUrl ? (
                    <img
                      src={pr.author.avatarUrl}
                      alt={pr.author.username}
                      class="h-7 w-7 rounded-full border border-border/80 object-cover"
                    />
                  ) : (
                    <div class="h-7 w-7 rounded-full bg-secondary border border-border/80 flex items-center justify-center text-xs font-medium text-foreground">
                      {pr.author?.username?.[0]?.toUpperCase() || "?"}
                    </div>
                  )}
                </div>
              </a>
            );
          })}
        </div>
      ) : (
        <div class="text-center py-16 px-4">
          <div class="w-12 h-12 rounded-full bg-secondary/80 border border-border flex items-center justify-center mx-auto mb-3 text-muted-foreground">
            <GitPullRequest className="h-6 w-6" />
          </div>
          <h3 class="text-base font-semibold text-foreground mb-1">No pull requests found</h3>
          <p class="text-sm text-muted-foreground max-w-sm mx-auto">
            {filter === "open" 
              ? "There are no open pull requests in public repositories right now." 
              : filter === "merged"
                ? "No merged pull requests yet."
                : filter === "closed"
                  ? "No closed pull requests."
                  : "No pull requests have been created yet."}
          </p>
        </div>
      )}
    </div>
  </div>
</BaseLayout>

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