---
import { getDatabase, schema } from "@/db";
import BaseLayout from "@/layouts/BaseLayout.astro";
import { desc, eq, sql, count } from "drizzle-orm";
import {
  Compass,
  Search,
  BookMarked,
  Star,
  GitFork,
  ChevronLeft,
  ChevronRight,
  Plus
} from "lucide-react";

const db = getDatabase();

// Pagination
const page = parseInt(Astro.url.searchParams.get("page") || "1");
const perPage = 12;
const offset = (page - 1) * perPage;

// Get total count
let totalCount = 0;
try {
  const [countResult] = await (db as any)
    .select({ count: count() })
    .from(schema.repositories)
    .where(eq(schema.repositories.visibility, "public"));
  totalCount = countResult?.count || 0;
} catch (e) {}

const totalPages = Math.ceil(totalCount / perPage);

// Fetch public repositories
const repos = await db.query.repositories.findMany({
  where: eq(schema.repositories.visibility, "public"),
  orderBy: [desc(schema.repositories.updatedAt)],
  with: {
    owner: {
      columns: { id: true, username: true, avatarUrl: true, displayName: true },
    },
  },
  limit: perPage,
  offset: offset,
});

// Org-owned repos have a null `owner` relation — resolve org names in one pass
const orgIds = repos
  .filter((r) => (r as any).ownerType === "organization")
  .map((r) => r.ownerId);
const orgNameById = new Map<string, string>();
if (orgIds.length > 0) {
  const orgs = await db.query.organizations.findMany({
    where: (t, { inArray }) => inArray(t.id, orgIds),
    columns: { id: true, name: true },
  });
  for (const o of orgs) orgNameById.set(o.id, o.name);
}

function timeAgo(date: string | Date) {
  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 `${Math.floor(seconds / 2592000)}mo ago`;
}

const langColors: Record<string, string> = {
  JavaScript: "bg-[#f1e05a]",
  TypeScript: "bg-[#3178c6]",
  Python: "bg-[#3572A5]",
  Rust: "bg-[#dea584]",
  Go: "bg-[#00ADD8]",
  Java: "bg-[#b07219]",
  Ruby: "bg-[#701516]",
  "C++": "bg-[#f34b7d]",
  C: "bg-[#555555]",
  PHP: "bg-[#4F5D95]",
  HTML: "bg-[#e34c26]",
  CSS: "bg-[#563d7c]",
  Vue: "bg-[#41b883]",
  Astro: "bg-[#ff5a03]",
  Shell: "bg-[#89e051]",
  Dockerfile: "bg-[#384d54]",
};
---

<BaseLayout title="Explore · 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">
          <Compass className="h-6 w-6 text-foreground" />
          <span>Explore</span>
          {totalCount > 0 && (
            <span class="rounded-full bg-secondary px-2.5 py-0.5 text-xs font-semibold text-muted-foreground border border-border/60">
              {totalCount}
            </span>
          )}
        </h1>
        <p class="text-sm text-muted-foreground mt-1">Discover public repositories and open source projects from the community</p>
      </div>
      <a
        href="/new"
        class="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-md bg-foreground text-background text-sm font-medium hover:bg-foreground/90 transition-colors shadow-sm self-start sm:self-auto"
      >
        <Plus className="h-4 w-4" />
        <span>New repository</span>
      </a>
    </div>

    <!-- Search & Filters Bar -->
    <div class="flex flex-col sm:flex-row gap-3 mb-6">
      <div class="relative flex-1 group">
        <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground group-focus-within:text-foreground transition-colors" />
        <input
          type="search"
          id="repo-search"
          placeholder="Search repositories..."
          class="w-full h-9 rounded-md border border-border/70 bg-card/60 pl-9 pr-4 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary/40 focus:bg-background transition-all"
        />
      </div>
      <div class="flex gap-2">
        <select
          id="lang-filter"
          aria-label="Filter by language"
          class="h-9 rounded-md border border-border/70 bg-card/60 px-3 text-xs text-foreground focus:outline-none focus:ring-2 focus:ring-primary/20 transition-colors"
        >
          <option value="">All languages</option>
          <option value="javascript">JavaScript</option>
          <option value="typescript">TypeScript</option>
          <option value="python">Python</option>
          <option value="rust">Rust</option>
          <option value="go">Go</option>
          <option value="astro">Astro</option>
        </select>
        <select
          id="sort-select"
          aria-label="Sort by"
          class="h-9 rounded-md border border-border/70 bg-card/60 px-3 text-xs text-foreground focus:outline-none focus:ring-2 focus:ring-primary/20 transition-colors"
        >
          <option value="updated">Recently updated</option>
          <option value="stars">Most stars</option>
          <option value="forks">Most forks</option>
          <option value="newest">Newest</option>
        </select>
      </div>
    </div>

    <!-- Results count subtext -->
    {totalCount > 0 && (
      <div class="mb-4 text-xs font-medium text-muted-foreground">
        Showing {offset + 1}–{Math.min(offset + perPage, totalCount)} of {totalCount} repositories
      </div>
    )}

    <!-- Repository Grid -->
    {repos.length === 0 ? (
      <div class="rounded-xl border border-border/80 bg-card/60 backdrop-blur-sm p-16 text-center shadow-sm">
        <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">
          <BookMarked className="h-6 w-6" />
        </div>
        <h2 class="text-base font-semibold text-foreground mb-1">No repositories found</h2>
        <p class="text-sm text-muted-foreground max-w-sm mx-auto mb-6">
          Be the first to share your project with the OpenCodeHub community!
        </p>
        <a
          href="/new"
          class="inline-flex items-center gap-2 px-4 py-2 rounded-md bg-foreground text-background text-sm font-medium hover:bg-foreground/90 transition-colors shadow-sm"
        >
          <Plus className="h-4 w-4" />
          Create repository
        </a>
      </div>
    ) : (
      <div id="repo-grid" class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
        {repos.map((repo) => {
          const ownerName =
            (repo as any).owner?.username ??
            orgNameById.get((repo as any).ownerId) ??
            "unknown";
          return (
            <a
              href={`/${ownerName}/${repo.name}`}
              class="repo-card group rounded-xl border border-border/80 bg-card/60 backdrop-blur-sm p-5 hover:border-border hover:bg-accent/40 transition-all shadow-sm flex flex-col justify-between"
              data-name={`${ownerName}/${repo.name}`.toLowerCase()}
              data-desc={(repo.description || "").toLowerCase()}
              data-lang={(repo.language || "").toLowerCase()}
            >
              <div>
                <!-- Card Header with Avatar & Name -->
                <div class="flex items-start gap-3 mb-3">
                  {(repo as any).owner?.avatarUrl ? (
                    <img
                      src={(repo as any).owner.avatarUrl}
                      alt=""
                      class="h-7 w-7 rounded-full border border-border/80 object-cover flex-shrink-0"
                    />
                  ) : (
                    <div class="h-7 w-7 rounded-full bg-secondary border border-border/80 flex items-center justify-center text-xs font-semibold text-foreground flex-shrink-0">
                      {ownerName[0]?.toUpperCase() || "?"}
                    </div>
                  )}
                  <div class="flex-1 min-w-0">
                    <h3 class="font-semibold text-sm text-foreground group-hover:text-primary transition-colors truncate">
                      {ownerName}/<span class="font-bold">{repo.name}</span>
                    </h3>
                    <p class="text-[11px] text-muted-foreground">
                      Updated {timeAgo(repo.updatedAt)}
                    </p>
                  </div>
                </div>

                <!-- Description -->
                <p class="text-xs text-muted-foreground line-clamp-2 mb-4 leading-relaxed">
                  {repo.description || "No description provided."}
                </p>
              </div>

              <!-- Footer Meta -->
              <div class="flex items-center gap-4 text-xs text-muted-foreground pt-3 border-t border-border/60">
                {repo.language && (
                  <div class="flex items-center gap-1.5 font-medium">
                    <span
                      class={`h-2.5 w-2.5 rounded-full ${langColors[repo.language] || "bg-muted-foreground"}`}
                    />
                    <span>{repo.language}</span>
                  </div>
                )}
                <div class="flex items-center gap-1 hover:text-foreground transition-colors">
                  <Star className="h-3.5 w-3.5 text-muted-foreground" />
                  <span>{repo.starCount || 0}</span>
                </div>
                <div class="flex items-center gap-1 hover:text-foreground transition-colors">
                  <GitFork className="h-3.5 w-3.5 text-muted-foreground" />
                  <span>{repo.forkCount || 0}</span>
                </div>
              </div>
            </a>
          );
        })}
      </div>
    )}

    <!-- Pagination -->
    {totalPages > 1 && (
      <div class="mt-8 flex items-center justify-center gap-2">
        {page > 1 && (
          <a
            href={`/explore?page=${page - 1}`}
            class="inline-flex items-center gap-1 px-3 py-1.5 rounded-md border border-border/80 bg-card text-xs font-medium text-foreground hover:bg-accent transition-colors shadow-sm"
          >
            <ChevronLeft className="h-4 w-4" />
            Previous
          </a>
        )}

        <span class="px-3 py-1.5 text-xs text-muted-foreground font-medium">
          Page {page} of {totalPages}
        </span>

        {page < totalPages && (
          <a
            href={`/explore?page=${page + 1}`}
            class="inline-flex items-center gap-1 px-3 py-1.5 rounded-md border border-border/80 bg-card text-xs font-medium text-foreground hover:bg-accent transition-colors shadow-sm"
          >
            Next
            <ChevronRight className="h-4 w-4" />
          </a>
        )}
      </div>
    )}
  </div>
</BaseLayout>

<script>
  const searchInput = document.getElementById("repo-search") as HTMLInputElement;
  const langFilter = document.getElementById("lang-filter") as HTMLSelectElement;
  const cards = document.querySelectorAll(".repo-card");

  function filterCards() {
    const q = (searchInput?.value || "").toLowerCase().trim();
    const lang = (langFilter?.value || "").toLowerCase();

    cards.forEach((card) => {
      const el = card as HTMLElement;
      const name = el.dataset.name || "";
      const desc = el.dataset.desc || "";
      const cardLang = el.dataset.lang || "";

      const matchesQuery = !q || name.includes(q) || desc.includes(q);
      const matchesLang = !lang || cardLang === lang;

      if (matchesQuery && matchesLang) {
        el.style.display = "flex";
      } else {
        el.style.display = "none";
      }
    });
  }

  searchInput?.addEventListener("input", filterCards);
  langFilter?.addEventListener("change", filterCards);
</script>