---
import BaseLayout from "@/layouts/BaseLayout.astro";
import { getDatabase, schema } from "@/db";
import { eq, desc, and } from "drizzle-orm";
import {
  Bell,
  Check,
  Settings,
  AtSign,
  UserCheck,
  GitPullRequest,
  MessageSquare,
  AlertCircle,
  CheckCircle2,
  Star,
  Inbox,
  Archive
} from "lucide-react";

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

const db = getDatabase();
const filter = Astro.url.searchParams.get("filter") || "unread";

// Fetch notifications for the user
let notifications: any[] = [];
try {
  const conditions: any[] = [eq(schema.notifications.userId, user.id)];
  
  if (filter === "unread") {
    conditions.push(eq(schema.notifications.isRead, false));
  } else if (filter === "read") {
    conditions.push(eq(schema.notifications.isRead, true));
  }
  
  if (filter !== "archived") {
    conditions.push(eq(schema.notifications.isArchived, false));
  } else {
    conditions.push(eq(schema.notifications.isArchived, true));
  }

  notifications = await db.query.notifications.findMany({
    where: and(...conditions),
    orderBy: [desc(schema.notifications.createdAt)],
    limit: 50,
    with: {
      actor: true,
      repository: true,
    },
  });
} catch (e) {
  console.error("Failed to fetch notifications:", e);
}

// Count unread
let unreadCount = 0;
try {
  const unread = await db.query.notifications.findMany({
    where: and(
      eq(schema.notifications.userId, user.id),
      eq(schema.notifications.isRead, false),
      eq(schema.notifications.isArchived, false)
    ),
  });
  unreadCount = unread.length;
} catch (e) {}

function timeAgo(date: string) {
  const seconds = Math.floor((Date.now() - 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="Notifications · 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">
          <Bell className="h-6 w-6 text-foreground" />
          <span>Notifications</span>
          {unreadCount > 0 && (
            <span class="rounded-full bg-primary/10 border border-primary/20 px-2.5 py-0.5 text-xs font-semibold text-primary">
              {unreadCount}
            </span>
          )}
        </h1>
        <p class="text-sm text-muted-foreground mt-1">Stay updated with reviews, mentions, and project activity</p>
      </div>

      <div class="flex items-center gap-2 self-start sm:self-auto">
        {unreadCount > 0 && (
          <button 
            id="mark-all-read-btn"
            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"
          >
            <Check className="h-3.5 w-3.5" />
            <span>Mark all as read</span>
          </button>
        )}
        <a 
          href="/settings/notifications"
          class="p-1.5 rounded-md border border-border bg-card text-muted-foreground hover:text-foreground hover:bg-accent transition-colors shadow-sm"
          title="Notification settings"
        >
          <Settings className="h-4 w-4" />
        </a>
      </div>
    </div>

    <!-- Filter Tabs -->
    <div class="inline-flex items-center gap-1 p-1 rounded-lg border border-border/80 bg-card/60 backdrop-blur-sm mb-6 self-start">
      <a 
        href="/notifications?filter=unread"
        class:list={[
          "inline-flex items-center gap-2 px-3 py-1.5 text-xs sm:text-sm font-medium rounded-md transition-colors",
          filter === "unread" 
            ? "bg-secondary text-foreground font-semibold shadow-sm" 
            : "text-muted-foreground hover:text-foreground hover:bg-muted/60"
        ]}
      >
        <Inbox className="h-3.5 w-3.5" />
        <span>Unread</span>
        {unreadCount > 0 && (
          <span class="rounded-full bg-primary/10 text-primary border border-primary/20 px-1.5 py-0.2 text-[10px] font-bold">
            {unreadCount}
          </span>
        )}
      </a>
      <a 
        href="/notifications?filter=all"
        class:list={[
          "inline-flex items-center gap-2 px-3 py-1.5 text-xs sm:text-sm font-medium rounded-md 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>
      <a 
        href="/notifications?filter=read"
        class:list={[
          "inline-flex items-center gap-2 px-3 py-1.5 text-xs sm:text-sm font-medium rounded-md transition-colors",
          filter === "read" 
            ? "bg-secondary text-foreground font-semibold shadow-sm" 
            : "text-muted-foreground hover:text-foreground hover:bg-muted/60"
        ]}
      >
        <Check className="h-3.5 w-3.5" />
        <span>Read</span>
      </a>
      <a 
        href="/notifications?filter=archived"
        class:list={[
          "inline-flex items-center gap-2 px-3 py-1.5 text-xs sm:text-sm font-medium rounded-md transition-colors",
          filter === "archived" 
            ? "bg-secondary text-foreground font-semibold shadow-sm" 
            : "text-muted-foreground hover:text-foreground hover:bg-muted/60"
        ]}
      >
        <Archive className="h-3.5 w-3.5" />
        <span>Archived</span>
      </a>
    </div>

    <!-- Notifications List Card -->
    <div class="rounded-xl border border-border/80 bg-card/60 backdrop-blur-sm overflow-hidden shadow-sm">
      {notifications.length === 0 ? (
        <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">
            <Bell className="h-6 w-6" />
          </div>
          <h3 class="text-base font-semibold text-foreground mb-1">All caught up!</h3>
          <p class="text-sm text-muted-foreground max-w-sm mx-auto">
            {filter === "unread" 
              ? "You have no unread notifications." 
              : filter === "archived" 
                ? "No archived notifications." 
                : "No notifications to display."}
          </p>
        </div>
      ) : (
        <div class="divide-y divide-border/60">
          {notifications.map((notification: any) => {
            return (
              <a 
                href={notification.url || "#"}
                class:list={[
                  "group flex items-start gap-4 p-4 transition-colors hover:bg-accent/40",
                  !notification.isRead && "bg-primary/[0.02]"
                ]}
              >
                <!-- Notification Icon -->
                <div class="flex-shrink-0 mt-0.5">
                  {notification.type === "mention" ? (
                    <div class="h-6 w-6 rounded-full bg-blue-500/10 text-blue-400 flex items-center justify-center border border-blue-500/20">
                      <AtSign className="h-3.5 w-3.5" />
                    </div>
                  ) : notification.type === "review_request" ? (
                    <div class="h-6 w-6 rounded-full bg-amber-500/10 text-amber-400 flex items-center justify-center border border-amber-500/20">
                      <GitPullRequest className="h-3.5 w-3.5" />
                    </div>
                  ) : notification.type === "ci_failed" ? (
                    <div class="h-6 w-6 rounded-full bg-red-500/10 text-red-400 flex items-center justify-center border border-red-500/20">
                      <AlertCircle className="h-3.5 w-3.5" />
                    </div>
                  ) : notification.type === "ci_success" ? (
                    <div class="h-6 w-6 rounded-full bg-emerald-500/10 text-emerald-400 flex items-center justify-center border border-emerald-500/20">
                      <CheckCircle2 className="h-3.5 w-3.5" />
                    </div>
                  ) : notification.type === "star" ? (
                    <div class="h-6 w-6 rounded-full bg-amber-500/10 text-amber-400 flex items-center justify-center border border-amber-500/20">
                      <Star className="h-3.5 w-3.5" />
                    </div>
                  ) : notification.type === "comment" ? (
                    <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">
                      <MessageSquare className="h-3.5 w-3.5" />
                    </div>
                  ) : (
                    <div class="h-6 w-6 rounded-full bg-secondary text-muted-foreground flex items-center justify-center border border-border">
                      <Bell className="h-3.5 w-3.5" />
                    </div>
                  )}
                </div>

                <!-- Content -->
                <div class="flex-1 min-w-0">
                  <div class="flex items-baseline justify-between gap-2">
                    <span class:list={[
                      "text-xs sm:text-sm font-semibold transition-colors line-clamp-1",
                      !notification.isRead ? "text-foreground" : "text-muted-foreground",
                      "group-hover:text-primary"
                    ]}>
                      {notification.title}
                    </span>
                    <span class="text-xs text-muted-foreground flex-shrink-0">
                      {timeAgo(notification.createdAt)}
                    </span>
                  </div>

                  {notification.body && (
                    <p class="text-xs text-muted-foreground mt-1 line-clamp-2 leading-relaxed">
                      {notification.body}
                    </p>
                  )}
                  
                  <div class="flex items-center gap-2.5 mt-2 text-xs text-muted-foreground">
                    {notification.repository && (
                      <span class="font-medium text-foreground">{notification.repository.name}</span>
                    )}
                    {notification.actor && (
                      <>
                        <span>·</span>
                        <div class="flex items-center gap-1.5">
                          {notification.actor.avatarUrl ? (
                            <img 
                              src={notification.actor.avatarUrl} 
                              alt=""
                              class="h-4 w-4 rounded-full border border-border"
                            />
                          ) : (
                            <div class="h-4 w-4 rounded-full bg-secondary border border-border flex items-center justify-center text-[9px] font-bold text-foreground">
                              {notification.actor.username?.[0]?.toUpperCase()}
                            </div>
                          )}
                          <span>@{notification.actor.username}</span>
                        </div>
                      </>
                    )}
                  </div>
                </div>

                <!-- Unread Blue Dot -->
                {!notification.isRead && (
                  <div class="flex-shrink-0 self-center">
                    <div class="h-2 w-2 rounded-full bg-primary" title="Unread"></div>
                  </div>
                )}
              </a>
            );
          })}
        </div>
      )}
    </div>
  </div>
</BaseLayout>

<script>
  const markAllBtn = document.getElementById('mark-all-read-btn');
  markAllBtn?.addEventListener('click', async () => {
    try {
      const res = await fetch('/api/notifications/mark-all-read', { method: 'POST' });
      if (res.ok) window.location.reload();
    } catch (e) {
      console.error('Failed to mark all as read');
    }
  });
</script>