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

const db = getDatabase();
const currentUser = Astro.locals.user;

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

// Fetch issues from public repos, ordered by most recent
let issues: any[] = [];
let openCount = 0;
let closedCount = 0;

try {
  // Get issues with their repositories
  const rawIssues = await db.query.issues.findMany({
    where: filter === "closed" 
      ? eq(schema.issues.state, "closed")
      : filter === "all"
        ? undefined
        : eq(schema.issues.state, "open"),
    orderBy: sort === "oldest" 
      ? [schema.issues.createdAt]
      : sort === "comments"
        ? [desc(schema.issues.commentCount)]
        : [desc(schema.issues.createdAt)],
    limit: 50,
    with: {
      repository: {
        with: {
          owner: true,
        },
      },
      author: true,
    },
  });

  // Filter to only public repos
  issues = (await resolveOrgOwners(rawIssues)).filter(issue => 
    issue.repository?.visibility === "public"
  );

  // Fetch counts for badges
  const allPublicIssues = await db.query.issues.findMany({
    columns: { state: true },
    with: {
      repository: {
        columns: { visibility: true }
      }
    }
  });
  const publicOnly = allPublicIssues.filter(i => i.repository?.visibility === "public");
  openCount = publicOnly.filter(i => i.state === "open").length;
  closedCount = publicOnly.filter(i => i.state === "closed").length;
} catch (e) {
  console.error("Error fetching issues:", 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="Issues · 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">
          <CircleDot className="h-6 w-6 text-foreground" />
          <span>Issues</span>
        </h1>
        <p class="text-sm text-muted-foreground mt-1">Track and browse issues 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="/issues?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="/issues?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-purple-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="/issues?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>
          <option value="comments" selected={sort === "comments"}>Most commented</option>
        </select>
      </div>
    </div>

    <!-- Issues List Card -->
    <div class="rounded-xl border border-border/80 bg-card/60 backdrop-blur-sm overflow-hidden shadow-sm">
      {issues.length > 0 ? (
        <div class="divide-y divide-border/60">
          {issues.map((issue) => {
            const ownerName = issue.repository?.owner?.username || "unknown";
            const repoName = issue.repository?.name || "repo";
            return (
              <a
                href={`/${ownerName}/${repoName}/issues/${issue.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">
                  {issue.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 issue">
                      <CircleDot className="h-3.5 w-3.5" />
                    </div>
                  ) : (
                    <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="Closed issue">
                      <CheckCircle2 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">#{issue.number}</span>
                  </div>
                  
                  <h3 class="text-sm font-semibold text-foreground group-hover:text-primary transition-colors leading-snug break-words">
                    {issue.title}
                  </h3>

                  <!-- Meta Info -->
                  <div class="flex items-center gap-3 mt-2 flex-wrap text-xs text-muted-foreground">
                    <span>
                      opened {timeAgo(issue.createdAt)} by <span class="text-foreground font-medium">@{issue.author?.username || "unknown"}</span>
                    </span>

                    {(issue.commentCount || 0) > 0 && (
                      <>
                        <span>·</span>
                        <span class="inline-flex items-center gap-1 text-muted-foreground hover:text-foreground">
                          <MessageSquare className="h-3 w-3" />
                          {issue.commentCount}
                        </span>
                      </>
                    )}
                  </div>
                </div>

                <!-- Author Avatar -->
                <div class="hidden sm:block flex-shrink-0">
                  {issue.author?.avatarUrl ? (
                    <img
                      src={issue.author.avatarUrl}
                      alt={issue.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">
                      {issue.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">
            <CircleDot className="h-6 w-6" />
          </div>
          <h3 class="text-base font-semibold text-foreground mb-1">No issues found</h3>
          <p class="text-sm text-muted-foreground max-w-sm mx-auto">
            {filter === "open" 
              ? "All issues are resolved! 🎉" 
              : filter === "closed"
                ? "No closed issues found."
                : "No issues 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>