---
import { getDatabase, schema } from "@/db";
import { getInboxItems } from "@/lib/inbox";
import BaseLayout from "@/layouts/BaseLayout.astro";
import { and, desc, eq, inArray, or } from "drizzle-orm";
import {
  BookMarked,
  Star,
  GitFork,
  Plus,
  Search,
  GitPullRequest,
  CircleDot,
  Layers,
  Inbox,
  Clock,
  Compass,
  ArrowRight
} from "lucide-react";

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

const db = getDatabase();

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

const inboxItems = await getInboxItems(user.id);

// Calculate stats
const totalStars = repos.reduce((sum, r) => sum + (r.starCount || 0), 0);
const totalForks = repos.reduce((sum, r) => sum + (r.forkCount || 0), 0);

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`;
  return `${Math.floor(seconds / 86400)}d ago`;
}

// Fetch Activity Feed
const following = await db.query.userFollowers.findMany({
  where: eq(schema.userFollowers.followerId, user.id),
});
const followingIds = following.map((f) => f.followeeId);

const activities = await db.query.activities.findMany({
  where: or(
    eq(schema.activities.userId, user.id),
    followingIds.length > 0
      ? inArray(schema.activities.userId, followingIds)
      : undefined,
  ),
  orderBy: [desc(schema.activities.createdAt)],
  limit: 20,
  with: {
    user: true,
    repository: true,
  },
});
---

<BaseLayout title="Dashboard · OpenCodeHub">
  <div class="container max-w-[1280px] mx-auto py-8 px-4 sm:px-6 space-y-8">
    <!-- Top Welcome Header -->
    <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 pb-6 border-b border-border">
      <div class="flex items-center gap-4">
        {user.avatarUrl ? (
          <img
            src={user.avatarUrl}
            alt={user.username}
            class="h-14 w-14 rounded-full border-2 border-border/80 object-cover flex-shrink-0 shadow-sm"
          />
        ) : (
          <div class="h-14 w-14 rounded-full bg-secondary border-2 border-border/80 flex items-center justify-center text-xl font-bold text-foreground flex-shrink-0 shadow-sm">
            {user.username[0]?.toUpperCase()}
          </div>
        )}
        <div>
          <h1 class="text-2xl font-bold text-foreground tracking-tight">
            Welcome back, {user.displayName || user.username}
          </h1>
          <p class="text-xs sm:text-sm text-muted-foreground mt-0.5">
            Your personal hub for repositories, reviews, and activity
          </p>
        </div>
      </div>

      <div class="flex items-center gap-2.5 flex-wrap self-start sm:self-auto">
        <a
          href="/stacks"
          class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-md border border-border bg-card text-xs font-medium text-foreground hover:bg-accent transition-colors shadow-sm"
        >
          <Layers className="h-3.5 w-3.5" />
          <span>Stacks</span>
        </a>
        <a
          href="/new"
          class="inline-flex items-center gap-1.5 px-3.5 py-1.5 rounded-md bg-[#238636] hover:bg-[#2ea043] text-white text-xs sm:text-sm font-medium transition-colors shadow-sm"
        >
          <Plus className="h-4 w-4" />
          <span>New repository</span>
        </a>
      </div>
    </div>

    <!-- Quick Stats Row -->
    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
      <div class="rounded-xl border border-border/80 bg-card/60 backdrop-blur-sm p-4 shadow-sm">
        <div class="flex items-center justify-between">
          <span class="text-xs font-medium text-muted-foreground">Repositories</span>
          <BookMarked className="h-4 w-4 text-muted-foreground" />
        </div>
        <div class="text-2xl font-bold text-foreground mt-2">{repos.length}</div>
      </div>
      <div class="rounded-xl border border-border/80 bg-card/60 backdrop-blur-sm p-4 shadow-sm">
        <div class="flex items-center justify-between">
          <span class="text-xs font-medium text-muted-foreground">Total Stars</span>
          <Star className="h-4 w-4 text-amber-400" />
        </div>
        <div class="text-2xl font-bold text-foreground mt-2">{totalStars}</div>
      </div>
      <div class="rounded-xl border border-border/80 bg-card/60 backdrop-blur-sm p-4 shadow-sm">
        <div class="flex items-center justify-between">
          <span class="text-xs font-medium text-muted-foreground">Total Forks</span>
          <GitFork className="h-4 w-4 text-purple-400" />
        </div>
        <div class="text-2xl font-bold text-foreground mt-2">{totalForks}</div>
      </div>
    </div>

    <!-- Main Content Grid -->
    <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">
      <!-- Left Sidebar: Repositories list & Navigation shortcuts -->
      <aside class="lg:col-span-4 space-y-6">
        <!-- Repositories Card -->
        <div class="rounded-xl border border-border/80 bg-card/60 backdrop-blur-sm overflow-hidden shadow-sm">
          <div class="p-3.5 border-b border-border/80 bg-muted/30 flex items-center justify-between">
            <h2 class="text-xs font-bold text-foreground uppercase tracking-wider">
              Top Repositories
            </h2>
            <a
              href="/new"
              class="inline-flex items-center gap-1 text-xs font-medium text-primary hover:underline"
            >
              <Plus className="h-3 w-3" />
              <span>New</span>
            </a>
          </div>

          <div class="p-3 border-b border-border/60">
            <div class="relative group">
              <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground group-focus-within:text-foreground" />
              <input
                type="text"
                id="sidebar-repo-search"
                placeholder="Find a repository..."
                class="w-full h-8 rounded-md border border-border/70 bg-background/80 pl-8 pr-3 text-xs text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-primary"
              />
            </div>
          </div>

          <div class="max-h-[380px] overflow-y-auto divide-y divide-border/40" id="sidebar-repo-list">
            {repos.length > 0 ? (
              repos.slice(0, 15).map((repo) => (
                <a
                  href={`/${user.username}/${repo.name}`}
                  class="sidebar-repo-item flex items-center justify-between p-3 hover:bg-accent/40 transition-colors group"
                  data-name={repo.name.toLowerCase()}
                >
                  <div class="flex items-center gap-2 min-w-0">
                    <BookMarked className="h-3.5 w-3.5 text-muted-foreground flex-shrink-0" />
                    <span class="text-xs font-medium text-foreground group-hover:text-primary transition-colors truncate">
                      {user.username}/<span class="font-semibold">{repo.name}</span>
                    </span>
                  </div>
                  <span class="rounded-full border border-border/60 px-1.5 py-0.2 text-[10px] text-muted-foreground">
                    {repo.visibility}
                  </span>
                </a>
              ))
            ) : (
              <div class="p-6 text-center text-xs text-muted-foreground">
                No repositories created yet.
              </div>
            )}
          </div>

          {repos.length > 15 && (
            <div class="p-2.5 text-center border-t border-border/60 bg-muted/20">
              <a href="/repositories" class="text-xs font-medium text-primary hover:underline">
                View all {repos.length} repositories
              </a>
            </div>
          )}
        </div>

        <!-- Quick Shortcuts -->
        <div class="rounded-xl border border-border/80 bg-card/60 backdrop-blur-sm p-4 space-y-2 shadow-sm">
          <h3 class="text-xs font-bold text-muted-foreground uppercase tracking-wider mb-2">Shortcuts</h3>
          <a href="/pulls" class="flex items-center justify-between py-1.5 text-xs text-foreground hover:text-primary transition-colors">
            <span class="flex items-center gap-2">
              <GitPullRequest className="h-3.5 w-3.5 text-muted-foreground" />
              <span>Pull Requests</span>
            </span>
            <ArrowRight className="h-3 w-3 text-muted-foreground" />
          </a>
          <a href="/issues" class="flex items-center justify-between py-1.5 text-xs text-foreground hover:text-primary transition-colors">
            <span class="flex items-center gap-2">
              <CircleDot className="h-3.5 w-3.5 text-muted-foreground" />
              <span>Issues</span>
            </span>
            <ArrowRight className="h-3 w-3 text-muted-foreground" />
          </a>
          <a href="/stars" class="flex items-center justify-between py-1.5 text-xs text-foreground hover:text-primary transition-colors">
            <span class="flex items-center gap-2">
              <Star className="h-3.5 w-3.5 text-muted-foreground" />
              <span>Your Stars</span>
            </span>
            <ArrowRight className="h-3 w-3 text-muted-foreground" />
          </a>
          <a href="/explore" class="flex items-center justify-between py-1.5 text-xs text-foreground hover:text-primary transition-colors">
            <span class="flex items-center gap-2">
              <Compass className="h-3.5 w-3.5 text-muted-foreground" />
              <span>Explore Repositories</span>
            </span>
            <ArrowRight className="h-3 w-3 text-muted-foreground" />
          </a>
        </div>
      </aside>

      <!-- Main Column: Activity & Inbox -->
      <main class="lg:col-span-8 space-y-6">
        <!-- Inbox Section (if any) -->
        {inboxItems.length > 0 && (
          <div class="rounded-xl border border-border/80 bg-card/60 backdrop-blur-sm overflow-hidden shadow-sm">
            <div class="p-4 border-b border-border/80 bg-muted/30 flex items-center justify-between">
              <div class="flex items-center gap-2">
                <Inbox className="h-4 w-4 text-foreground" />
                <h2 class="text-sm font-bold text-foreground">Review Inbox</h2>
                <span class="rounded-full bg-primary/10 border border-primary/20 px-2 py-0.2 text-xs font-semibold text-primary">
                  {inboxItems.length}
                </span>
              </div>
            </div>
            <div class="divide-y divide-border/60">
              {inboxItems.map((item) => (
                <a
                  href={`/${item.repository.owner}/${item.repository.name}/pulls/${item.number}`}
                  class="flex items-center justify-between gap-4 p-4 hover:bg-accent/40 transition-colors group"
                >
                  <div class="min-w-0">
                    <div class="flex items-center gap-2 mb-1">
                      <span class="text-xs font-semibold text-muted-foreground">
                        {item.repository.owner}/{item.repository.name}
                      </span>
                      <span class="text-xs text-muted-foreground font-mono">#{item.number}</span>
                    </div>
                    <h3 class="text-sm font-semibold text-foreground group-hover:text-primary transition-colors truncate">
                      {item.title}
                    </h3>
                  </div>
                  <span class="text-xs text-muted-foreground flex-shrink-0">
                    {timeAgo(item.updatedAt)}
                  </span>
                </a>
              ))}
            </div>
          </div>
        )}

        <!-- Activity Feed Section -->
        <div class="rounded-xl border border-border/80 bg-card/60 backdrop-blur-sm overflow-hidden shadow-sm">
          <div class="p-4 border-b border-border/80 bg-muted/30 flex items-center justify-between">
            <div class="flex items-center gap-2">
              <Clock className="h-4 w-4 text-foreground" />
              <h2 class="text-sm font-bold text-foreground">Recent Activity</h2>
            </div>
            <a href="/explore" class="text-xs font-medium text-primary hover:underline">
              Explore feed
            </a>
          </div>

          {activities.length > 0 ? (
            <div class="divide-y divide-border/60">
              {activities.map((activity) => {
                const payload = activity.payload ? JSON.parse(activity.payload) : {};
                return (
                  <div class="flex items-start gap-3.5 p-4 hover:bg-accent/40 transition-colors">
                    {activity.user?.avatarUrl ? (
                      <img
                        src={activity.user.avatarUrl}
                        alt={activity.user.username}
                        class="h-7 w-7 rounded-full border border-border object-cover flex-shrink-0 mt-0.5"
                      />
                    ) : (
                      <div class="h-7 w-7 rounded-full bg-secondary border border-border flex items-center justify-center text-xs font-semibold text-foreground flex-shrink-0 mt-0.5">
                        {activity.user?.username?.[0]?.toUpperCase() || "?"}
                      </div>
                    )}
                    <div class="flex-1 min-w-0">
                      <p class="text-xs sm:text-sm text-muted-foreground leading-snug">
                        <a
                          href={`/${activity.user?.username}`}
                          class="font-semibold text-foreground hover:text-primary transition-colors"
                        >
                          @{activity.user?.username}
                        </a>{" "}
                        <span>
                          {activity.type === "create_repo" && "created repository"}
                          {activity.type === "star" && "starred"}
                          {activity.type === "fork" && "forked"}
                          {activity.type === "follow" && "started following"}
                          {activity.type === "issue" && `opened issue #${payload.number || ""} in`}
                          {activity.type === "open_pr" && `opened pull request #${payload.number || ""} in`}
                          {!["create_repo", "star", "fork", "follow", "issue", "open_pr"].includes(activity.type) && `${activity.action || ""} ${activity.type}`}
                        </span>{" "}
                        {activity.repository && (
                          <a
                            href={`/${activity.repository.ownerId || activity.user?.username}/${activity.repository.name}`}
                            class="font-semibold text-foreground hover:text-primary transition-colors"
                          >
                            {activity.repository.name}
                          </a>
                        )}
                        {!activity.repository && activity.type === "follow" && (
                          <a
                            href={`/${payload.targetUsername}`}
                            class="font-semibold text-foreground hover:text-primary transition-colors"
                          >
                            @{payload.targetUsername}
                          </a>
                        )}
                      </p>
                      <p class="text-[11px] text-muted-foreground mt-1">
                        {timeAgo(activity.createdAt)}
                      </p>
                    </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">
                <Compass className="h-6 w-6" />
              </div>
              <h3 class="text-base font-semibold text-foreground mb-1">No recent activity</h3>
              <p class="text-sm text-muted-foreground max-w-sm mx-auto mb-6">
                Follow developers and star repositories to see updates on your timeline.
              </p>
              <a
                href="/explore"
                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"
              >
                <Compass className="h-4 w-4" />
                Explore community
              </a>
            </div>
          )}
        </div>
      </main>
    </div>
  </div>
</BaseLayout>

<script>
  import { realtime } from "@/lib/realtime-client";
  import { toast } from "sonner";

  // Repos search
  const searchInput = document.getElementById("sidebar-repo-search") as HTMLInputElement;
  const repoItems = document.querySelectorAll(".sidebar-repo-item");
  searchInput?.addEventListener("input", () => {
    const q = searchInput.value.toLowerCase().trim();
    repoItems.forEach((item) => {
      const el = item as HTMLElement;
      const name = el.dataset.name || "";
      if (!q || name.includes(q)) {
        el.style.display = "flex";
      } else {
        el.style.display = "none";
      }
    });
  });

  // Connect to realtime events
  realtime.connect();

  realtime.on("inbox:refresh", (data: any) => {
    if (data.connected) return;
    toast.message("Inbox Updated", {
      description: "New items available in your inbox.",
      action: {
        label: "Refresh",
        onClick: () => window.location.reload(),
      },
    });
  });

  realtime.on("pr:updated", (data: any) => {
    toast.info(`PR Updated: #${data.prNumber} ${data.title}`, {
      description: "Pull request has been updated.",
    });
  });

  realtime.on("notification:new", (data: any) => {
    toast.success(data.title, {
      description: data.body,
      action: data.url
        ? {
            label: "View",
            onClick: () => (window.location.href = data.url),
          }
        : undefined,
    });
  });
</script>