---
import { getDatabase, schema } from "@/db";
import BaseLayout from "@/layouts/BaseLayout.astro";
import { desc, eq } from "drizzle-orm";

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[] = [];
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 = rawPRs.filter(pr => 
    pr.repository?.visibility === "public"
  );
} 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 py-8 max-w-5xl">
    <!-- Header -->
    <div class="flex items-center justify-between mb-8">
      <div>
        <h1 class="text-3xl font-bold text-foreground flex items-center gap-3">
          <div class="p-2 rounded-lg bg-gradient-to-br from-primary/20 to-secondary/20 border border-primary/30">
            <svg class="h-7 w-7 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"></path>
            </svg>
          </div>
          Pull Requests
        </h1>
        <p class="text-muted-foreground mt-2">Browse pull requests across all public repositories</p>
      </div>
    </div>

    <!-- Filters -->
    <div class="relative mb-6">
      <div class="absolute -inset-[1px] bg-gradient-to-r from-primary/20 via-transparent to-secondary/20 rounded-xl opacity-50"></div>
      <div class="relative rounded-xl border border-border bg-card/80 backdrop-blur-sm p-4">
        <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
          <!-- Filter Tabs -->
          <div class="flex items-center gap-1">
            <a
              href="/pulls?filter=open"
              class:list={[
                "inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-all",
                filter === "open"
                  ? "bg-success/20 text-success border border-success/30"
                  : "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
              ]}
            >
              <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"></path>
              </svg>
              Open
            </a>
            <a
              href="/pulls?filter=merged"
              class:list={[
                "inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-all",
                filter === "merged"
                  ? "bg-primary/20 text-primary border border-primary/30"
                  : "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
              ]}
            >
              <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z"></path>
              </svg>
              Merged
            </a>
            <a
              href="/pulls?filter=closed"
              class:list={[
                "inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-all",
                filter === "closed"
                  ? "bg-destructive/20 text-destructive border border-destructive/30"
                  : "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
              ]}
            >
              <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
              </svg>
              Closed
            </a>
            <a
              href="/pulls?filter=all"
              class:list={[
                "inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-all",
                filter === "all"
                  ? "bg-primary/20 text-primary border border-primary/30"
                  : "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
              ]}
            >
              All
            </a>
          </div>

          <!-- Sort -->
          <div class="flex items-center gap-2">
            <span class="text-sm text-muted-foreground">Sort:</span>
            <select
              id="sort-select"
              class="rounded-lg border border-border bg-secondary/50 px-3 py-1.5 text-sm text-foreground focus:outline-none focus:border-primary/50"
            >
              <option value="newest" selected={sort === "newest"}>Newest</option>
              <option value="oldest" selected={sort === "oldest"}>Oldest</option>
            </select>
          </div>
        </div>
      </div>
    </div>

    <!-- Pull Requests List -->
    <div class="relative">
      <div class="absolute -inset-[1px] bg-gradient-to-r from-primary/20 via-transparent to-secondary/20 rounded-xl opacity-50"></div>
      <div class="relative rounded-xl border border-border bg-card/80 backdrop-blur-sm overflow-hidden">
        {pullRequests.length > 0 ? (
          <div class="divide-y divide-border">
            {pullRequests.map((pr) => (
              <a
                href={`/${pr.repository?.owner?.username}/${pr.repository?.name}/pulls/${pr.number}`}
                class="block p-4 hover:bg-accent/50 transition-colors group"
              >
                <div class="flex items-start gap-3">
                  <!-- Status Icon -->
                  <div class:list={[
                    "p-2 rounded-lg mt-0.5",
                    pr.state === "open" 
                      ? "bg-success/10 text-success" 
                      : pr.state === "merged"
                        ? "bg-primary/10 text-primary"
                        : "bg-destructive/10 text-destructive"
                  ]}>
                    {pr.state === "open" ? (
                      <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"></path>
                      </svg>
                    ) : pr.state === "merged" ? (
                      <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z"></path>
                      </svg>
                    ) : (
                      <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                      </svg>
                    )}
                  </div>

                  <div class="flex-1 min-w-0">
                    <!-- Repo & Number -->
                    <div class="flex items-center gap-2 mb-1">
                      <span class="text-xs text-muted-foreground font-medium">
                        {pr.repository?.owner?.username}/{pr.repository?.name}
                      </span>
                      <span class="text-muted-foreground/80">#{pr.number}</span>
                    </div>
                    <h3 class="font-semibold text-foreground group-hover:text-primary transition-colors truncate">
                      {pr.title}
                    </h3>
                    
                    <!-- Branch Info -->
                    <div class="flex items-center gap-2 mt-1 text-xs text-muted-foreground">
                      <span class="px-2 py-0.5 rounded bg-secondary/50 font-mono">
                        {pr.headBranch}
                      </span>
                      <svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
                      </svg>
                      <span class="px-2 py-0.5 rounded bg-secondary/50 font-mono">
                        {pr.baseBranch}
                      </span>
                    </div>
                    
                    <!-- Meta -->
                    <div class="flex items-center gap-3 mt-2 text-xs text-muted-foreground">
                      <span>
                        opened {timeAgo(pr.createdAt)} by {pr.author?.username || "unknown"}
                      </span>
                      {pr.state === "merged" && pr.mergedAt && (
                        <span class="text-primary">
                          merged {timeAgo(pr.mergedAt)}
                        </span>
                      )}
                    </div>
                  </div>

                  <!-- Avatar -->
                  <div class="hidden sm:block">
                    {pr.author?.avatarUrl ? (
                      <img
                        src={pr.author.avatarUrl}
                        alt={pr.author.username}
                        class="w-8 h-8 rounded-full ring-2 ring-border"
                      />
                    ) : (
                      <div class="w-8 h-8 rounded-full bg-gradient-to-br from-primary to-secondary flex items-center justify-center text-xs font-bold text-primary-foreground ring-2 ring-border">
                        {pr.author?.username?.[0]?.toUpperCase() || "?"}
                      </div>
                    )}
                  </div>
                </div>
              </a>
            ))}
          </div>
        ) : (
          <div class="text-center py-16">
            <div class="relative inline-block mb-4">
              <svg class="h-16 w-16 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"></path>
              </svg>
              <div class="absolute inset-0 bg-primary blur-2xl opacity-20"></div>
            </div>
            <h3 class="text-lg font-semibold text-foreground mb-2">No pull requests found</h3>
            <p class="text-muted-foreground">
              {filter === "open" 
                ? "No open pull requests at the moment." 
                : filter === "merged"
                  ? "No merged pull requests yet."
                  : filter === "closed"
                    ? "No closed pull requests."
                    : "No pull requests have been created yet."}
            </p>
          </div>
        )}
      </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>