---
import BaseLayout from "@/layouts/BaseLayout.astro";
import { getDatabase, schema } from "@/db";
import { eq, desc, and } from "drizzle-orm";

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

function getIconAndColor(type: string) {
  switch (type) {
    case "mention": return { icon: "M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207", color: "text-blue-400", bg: "bg-blue-500/10" };
    case "assign": return { icon: "M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z", color: "text-purple-400", bg: "bg-purple-500/10" };
    case "review_request": return { icon: "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4", color: "text-orange-400", bg: "bg-orange-500/10" };
    case "comment": return { icon: "M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z", color: "text-green-400", bg: "bg-green-500/10" };
    case "ci_failed": return { icon: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z", color: "text-red-400", bg: "bg-red-500/10" };
    case "ci_success": return { icon: "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z", color: "text-green-400", bg: "bg-green-500/10" };
    case "star": return { icon: "M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z", color: "text-yellow-400", bg: "bg-yellow-500/10" };
    default: return { icon: "M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9", color: "text-cyan-400", bg: "bg-cyan-500/10" };
  }
}
---

<BaseLayout title="Notifications">
  <div class="container py-8 max-w-4xl">
    <div class="flex flex-col gap-6">
      <!-- Header -->
      <div class="flex items-center justify-between">
        <div class="flex items-center gap-3">
          <div class="p-2 rounded-lg bg-gradient-to-br from-cyan-500/20 to-blue-500/20 border border-cyan-500/30">
            <svg class="h-6 w-6 text-cyan-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path>
            </svg>
          </div>
          <h1 class="text-2xl font-bold text-white">Notifications</h1>
          {unreadCount > 0 && (
            <span class="inline-flex items-center justify-center rounded-full bg-cyan-500/20 border border-cyan-500/30 px-2.5 py-0.5 text-xs font-medium text-cyan-400">
              {unreadCount}
            </span>
          )}
        </div>
        <div class="flex items-center gap-2">
          {unreadCount > 0 && (
            <button 
              id="mark-all-read-btn"
              class="inline-flex items-center gap-2 px-3 py-2 rounded-lg border border-white/10 bg-white/5 text-sm text-gray-300 hover:bg-white/10 transition-colors"
            >
              <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>
              Mark all read
            </button>
          )}
          <a 
            href="/settings/notifications"
            class="p-2 rounded-lg border border-white/10 bg-white/5 text-gray-400 hover:bg-white/10 transition-colors"
          >
            <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
            </svg>
          </a>
        </div>
      </div>

      <!-- Filter Tabs -->
      <div class="flex items-center gap-2">
        <a 
          href="/notifications?filter=unread"
          class:list={[
            "inline-flex items-center gap-1.5 px-4 py-2 text-sm font-medium rounded-lg transition-all",
            filter === "unread" 
              ? "bg-cyan-500/10 text-cyan-400 border border-cyan-500/30" 
              : "text-gray-400 hover:text-white hover:bg-white/5"
          ]}
        >
          <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path>
          </svg>
          Unread
          {unreadCount > 0 && filter !== "unread" && (
            <span class="text-xs bg-white/10 px-1.5 py-0.5 rounded-full">{unreadCount}</span>
          )}
        </a>
        <a 
          href="/notifications?filter=all"
          class:list={[
            "inline-flex items-center gap-1.5 px-4 py-2 text-sm font-medium rounded-lg transition-all",
            filter === "all" 
              ? "bg-white/10 text-white border border-white/20" 
              : "text-gray-400 hover:text-white hover:bg-white/5"
          ]}
        >
          All
        </a>
        <a 
          href="/notifications?filter=read"
          class:list={[
            "inline-flex items-center gap-1.5 px-4 py-2 text-sm font-medium rounded-lg transition-all",
            filter === "read" 
              ? "bg-green-500/10 text-green-400 border border-green-500/30" 
              : "text-gray-400 hover:text-white hover:bg-white/5"
          ]}
        >
          <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
          </svg>
          Read
        </a>
        <a 
          href="/notifications?filter=archived"
          class:list={[
            "inline-flex items-center gap-1.5 px-4 py-2 text-sm font-medium rounded-lg transition-all",
            filter === "archived" 
              ? "bg-purple-500/10 text-purple-400 border border-purple-500/30" 
              : "text-gray-400 hover:text-white hover:bg-white/5"
          ]}
        >
          <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4"></path>
          </svg>
          Archived
        </a>
      </div>

      <!-- Notifications List -->
      <div class="relative">
        <div class="absolute -inset-[1px] bg-gradient-to-r from-cyan-500/20 via-transparent to-purple-500/20 rounded-xl opacity-50"></div>
        <div class="relative rounded-xl border border-white/10 bg-[#0d1117]/80 backdrop-blur-sm overflow-hidden">
          {notifications.length === 0 ? (
            <div class="text-center py-16">
              <div class="relative inline-block mb-4">
                <svg class="h-16 w-16 text-cyan-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path>
                </svg>
                <div class="absolute inset-0 bg-cyan-500 blur-2xl opacity-20"></div>
              </div>
              <h3 class="text-lg font-semibold text-white mb-2">No notifications</h3>
              <p class="text-gray-500">
                {filter === "unread" 
                  ? "You're all caught up! No unread notifications." 
                  : filter === "archived" 
                    ? "No archived notifications." 
                    : "No notifications to display."}
              </p>
            </div>
          ) : (
            <div class="divide-y divide-white/5">
              {notifications.map((notification: any) => {
                const { icon, color, bg } = getIconAndColor(notification.type);
                return (
                  <a 
                    href={notification.url || "#"}
                    class:list={[
                      "group flex items-start gap-4 p-4 transition-all hover:bg-white/[0.02]",
                      !notification.isRead && "bg-cyan-500/[0.03]"
                    ]}
                  >
                    {/* Icon */}
                    <div class={`flex-shrink-0 p-2 rounded-lg ${bg}`}>
                      <svg class={`h-5 w-5 ${color}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d={icon}></path>
                      </svg>
                    </div>

                    {/* Content */}
                    <div class="flex-1 min-w-0">
                      <div class="flex items-start justify-between gap-2">
                        <div>
                          <span class:list={[
                            "font-medium transition-colors line-clamp-1",
                            !notification.isRead ? "text-white" : "text-gray-300",
                            "group-hover:text-cyan-400"
                          ]}>
                            {notification.title}
                          </span>
                          {notification.body && (
                            <p class="text-sm text-gray-500 mt-0.5 line-clamp-2">
                              {notification.body}
                            </p>
                          )}
                        </div>
                        <span class="text-xs text-gray-600 whitespace-nowrap">
                          {timeAgo(notification.createdAt)}
                        </span>
                      </div>
                      
                      <div class="flex items-center gap-2 mt-2 text-xs text-gray-500">
                        {notification.repository && (
                          <span class="text-purple-400">{notification.repository.name}</span>
                        )}
                        {notification.actor && (
                          <>
                            <span>•</span>
                            <div class="flex items-center gap-1">
                              {notification.actor.avatarUrl ? (
                                <img 
                                  src={notification.actor.avatarUrl} 
                                  alt=""
                                  class="h-4 w-4 rounded-full"
                                />
                              ) : (
                                <div class="h-4 w-4 rounded-full bg-gradient-to-br from-cyan-400 to-blue-500 flex items-center justify-center text-[8px] font-bold text-white">
                                  {notification.actor.username?.[0]?.toUpperCase()}
                                </div>
                              )}
                              <span>{notification.actor.username}</span>
                            </div>
                          </>
                        )}
                      </div>
                    </div>

                    {/* Unread indicator */}
                    {!notification.isRead && (
                      <div class="flex-shrink-0">
                        <div class="h-2 w-2 rounded-full bg-cyan-400"></div>
                      </div>
                    )}
                  </a>
                );
              })}
            </div>
          )}
        </div>
      </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>