---
import BaseLayout from "@/layouts/BaseLayout.astro";
import { getDatabase, schema } from "@/db";
import { eq, desc, and, like } from "drizzle-orm";
import {
  BookMarked,
  Star,
  GitFork,
  Plus,
  Search,
  Lock,
  Globe,
  GitBranch
} from "lucide-react";

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

const db = getDatabase();
const q = Astro.url.searchParams.get("q") || "";
const typeFilter = Astro.url.searchParams.get("type") || "all";

// Fetch user's repositories with search
const allUserRepos = await db.query.repositories.findMany({
  where: eq(schema.repositories.ownerId, user.id),
  orderBy: [desc(schema.repositories.updatedAt)],
});

const repos = allUserRepos.filter((r) => {
  const matchesQ = !q || r.name.toLowerCase().includes(q.toLowerCase()) || (r.description && r.description.toLowerCase().includes(q.toLowerCase()));
  const matchesType = typeFilter === "all" || (typeFilter === "public" && r.visibility === "public") || (typeFilter === "private" && r.visibility === "private");
  return matchesQ && matchesType;
});

const publicCount = allUserRepos.filter(r => r.visibility === "public").length;
const privateCount = allUserRepos.filter(r => r.visibility === "private").length;

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]",
};

function timeAgo(date: 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`;
}
---

<BaseLayout title="Your Repositories · 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">
          <BookMarked className="h-6 w-6 text-foreground" />
          <span>Your Repositories</span>
          <span class="rounded-full bg-secondary px-2.5 py-0.5 text-xs font-semibold text-muted-foreground border border-border/60">
            {allUserRepos.length}
          </span>
        </h1>
        <p class="text-sm text-muted-foreground mt-1">Manage and browse your personal codebase</p>
      </div>
      <a
        href="/new"
        class="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-md bg-[#238636] hover:bg-[#2ea043] text-white text-sm font-medium transition-colors shadow-sm self-start sm:self-auto"
      >
        <Plus className="h-4 w-4" />
        <span>New repository</span>
      </a>
    </div>

    <!-- Search & Type Filter 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" />
        <form method="GET" action="/repositories">
          <input
            type="search"
            name="q"
            value={q}
            placeholder="Find a repository..."
            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"
          />
        </form>
      </div>

      <div class="inline-flex items-center gap-1 p-1 rounded-lg border border-border/80 bg-card/60 self-start sm:self-auto">
        <a
          href={`/repositories?q=${encodeURIComponent(q)}&type=all`}
          class:list={[
            "px-3 py-1 text-xs font-medium rounded-md transition-colors",
            typeFilter === "all" ? "bg-secondary text-foreground font-semibold shadow-sm" : "text-muted-foreground hover:text-foreground"
          ]}
        >
          All ({allUserRepos.length})
        </a>
        <a
          href={`/repositories?q=${encodeURIComponent(q)}&type=public`}
          class:list={[
            "px-3 py-1 text-xs font-medium rounded-md transition-colors",
            typeFilter === "public" ? "bg-secondary text-foreground font-semibold shadow-sm" : "text-muted-foreground hover:text-foreground"
          ]}
        >
          Public ({publicCount})
        </a>
        <a
          href={`/repositories?q=${encodeURIComponent(q)}&type=private`}
          class:list={[
            "px-3 py-1 text-xs font-medium rounded-md transition-colors",
            typeFilter === "private" ? "bg-secondary text-foreground font-semibold shadow-sm" : "text-muted-foreground hover:text-foreground"
          ]}
        >
          Private ({privateCount})
        </a>
      </div>
    </div>

    <!-- Repositories List Card -->
    <div class="rounded-xl border border-border/80 bg-card/60 backdrop-blur-sm overflow-hidden shadow-sm">
      {repos.length > 0 ? (
        <div class="divide-y divide-border/60">
          {repos.map((repo) => (
            <div class="flex flex-col sm:flex-row sm:items-start justify-between gap-4 p-5 hover:bg-accent/40 transition-colors">
              <div class="space-y-1.5 flex-1 min-w-0">
                <div class="flex items-center gap-2.5 flex-wrap">
                  <a
                    href={`/${user.username}/${repo.name}`}
                    class="text-base font-semibold text-primary hover:underline truncate"
                  >
                    {repo.name}
                  </a>
                  <span class="inline-flex items-center rounded-full border border-border/70 bg-muted/40 px-2 py-0.5 text-[11px] font-medium text-muted-foreground">
                    {repo.visibility === "public" ? "Public" : "Private"}
                  </span>
                </div>

                {repo.description && (
                  <p class="text-xs sm:text-sm text-muted-foreground line-clamp-2 leading-relaxed">
                    {repo.description}
                  </p>
                )}

                <div class="flex items-center gap-4 text-xs text-muted-foreground pt-1 flex-wrap">
                  {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">
                    <Star className="h-3.5 w-3.5 text-muted-foreground" />
                    <span>{repo.starCount || 0}</span>
                  </div>
                  <div class="flex items-center gap-1">
                    <GitFork className="h-3.5 w-3.5 text-muted-foreground" />
                    <span>{repo.forkCount || 0}</span>
                  </div>
                  <span>·</span>
                  <span>Updated {timeAgo(new Date(repo.updatedAt))}</span>
                </div>
              </div>

              <div class="flex items-center gap-2 self-start">
                <a
                  href={`/${user.username}/${repo.name}`}
                  class="inline-flex items-center justify-center px-3 py-1.5 rounded-md border border-border bg-secondary/80 text-xs font-medium text-foreground hover:bg-accent transition-colors shadow-sm"
                >
                  View
                </a>
              </div>
            </div>
          ))}
        </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">
            <BookMarked className="h-6 w-6" />
          </div>
          <h3 class="text-base font-semibold text-foreground mb-1">No repositories found</h3>
          <p class="text-sm text-muted-foreground max-w-sm mx-auto mb-6">
            {q
              ? "No repositories match your search criteria."
              : "You haven't created any repositories yet."}
          </p>
          {!q && (
            <a
              href="/new"
              class="inline-flex items-center gap-2 px-4 py-2 rounded-md bg-[#238636] hover:bg-[#2ea043] text-white text-sm font-medium transition-colors shadow-sm"
            >
              <Plus className="h-4 w-4" />
              Create your first repository
            </a>
          )}
        </div>
      )}
    </div>
  </div>
</BaseLayout>