<template>
  <div class="mx-auto max-w-7xl space-y-6">
    <header class="flex flex-wrap items-center justify-between gap-3">
      <div>
        <h1 class="text-2xl font-semibold">Notification Center</h1>
        <p class="text-sm text-text-secondary">Track reminders, mentions, approvals, and team activity in one place.</p>
      </div>
      <div class="flex gap-2">
        <button class="btn-ghost">Notification Settings</button>
        <button class="btn-primary">Mark all as read</button>
      </div>
    </header>

    <section class="grid gap-4 xl:grid-cols-[1.4fr_1fr]">
      <article class="card p-4 sm:p-5">
        <div class="mb-4 flex flex-wrap items-center justify-between gap-3">
          <div class="flex gap-2">
            <button
              v-for="filter in filters"
              :key="filter.id"
              class="rounded-xl px-3 py-2 text-sm transition"
              :class="activeFilter === filter.id ? 'bg-brand-50 text-brand-700' : 'bg-white text-text-secondary hover:bg-brand-50/70 hover:text-text-primary dark:bg-slate-900/50'"
              @click="activeFilter = filter.id"
            >
              {{ filter.label }}
            </button>
          </div>
          <p class="text-xs text-text-secondary">{{ filteredNotifications.length }} notifications</p>
        </div>

        <div class="space-y-3">
          <article
            v-for="n in filteredNotifications"
            :key="n.id"
            class="card-muted cursor-pointer p-4 transition hover:-translate-y-0.5 hover:border-brand-300"
            @click="selectedId = n.id"
          >
            <div class="flex items-start justify-between gap-3">
              <div class="min-w-0">
                <div class="mb-1 flex items-center gap-2">
                  <span class="h-2.5 w-2.5 rounded-full" :class="n.isUnread ? 'bg-brand-500' : 'bg-slate-300 dark:bg-slate-700'"></span>
                  <p class="truncate font-semibold">{{ n.title }}</p>
                  <span class="chip">{{ n.type }}</span>
                  <span
                    class="rounded-full px-2 py-0.5 text-[11px] font-medium"
                    :class="n.priority === 'High' ? 'bg-red-50 text-red-700 dark:bg-red-500/20 dark:text-red-300' : 'bg-slate-100 text-slate-600 dark:bg-slate-800 dark:text-slate-300'"
                  >
                    {{ n.priority }}
                  </span>
                </div>
                <p class="text-sm text-text-secondary">{{ n.desc }}</p>
                <div class="mt-2 flex flex-wrap items-center gap-3 text-xs text-text-secondary">
                  <span>{{ n.division }}</span>
                  <span>{{ n.createdAt }}</span>
                  <span>{{ n.timeAgo }}</span>
                </div>
              </div>
              <button class="text-xs text-brand-700">Open</button>
            </div>
          </article>
        </div>
      </article>

      <aside class="card p-4 sm:p-5">
        <h2 class="text-lg font-semibold">Notification Detail</h2>
        <template v-if="selectedNotification">
          <div class="mt-4 space-y-4">
            <div>
              <p class="text-sm font-semibold">{{ selectedNotification.title }}</p>
              <p class="mt-1 text-sm text-text-secondary">{{ selectedNotification.desc }}</p>
            </div>
            <div class="grid gap-2 text-sm">
              <div class="card-muted flex items-center justify-between px-3 py-2">
                <span class="text-text-secondary">Category</span>
                <span>{{ selectedNotification.type }}</span>
              </div>
              <div class="card-muted flex items-center justify-between px-3 py-2">
                <span class="text-text-secondary">Division</span>
                <span>{{ selectedNotification.division }}</span>
              </div>
              <div class="card-muted flex items-center justify-between px-3 py-2">
                <span class="text-text-secondary">Created</span>
                <span>{{ selectedNotification.createdAt }}</span>
              </div>
              <div class="card-muted flex items-center justify-between px-3 py-2">
                <span class="text-text-secondary">Priority</span>
                <span>{{ selectedNotification.priority }}</span>
              </div>
            </div>
            <div class="flex gap-2">
              <button class="btn-primary flex-1">Take Action</button>
              <button class="btn-ghost flex-1">Archive</button>
            </div>
          </div>
        </template>
        <template v-else>
          <div class="mt-4 rounded-xl border border-dashed border-surface-border p-6 text-center text-sm text-text-secondary">
            Select a notification to view details.
          </div>
        </template>
      </aside>
    </section>
  </div>
</template>

<script setup lang="ts">
type NotificationItem = {
  id: string;
  title: string;
  desc: string;
  type: "Reminder" | "Mention" | "Approval" | "System";
  division: string;
  priority: "High" | "Normal";
  createdAt: string;
  timeAgo: string;
  isUnread: boolean;
};

const notifications: NotificationItem[] = [
  {
    id: "n1",
    title: "Daily report reminder",
    desc: "Please submit today's report before 17:00 to keep completion rate healthy.",
    type: "Reminder",
    division: "All Divisions",
    priority: "High",
    createdAt: "May 13, 2026 · 16:15",
    timeAgo: "Now",
    isUnread: true
  },
  {
    id: "n2",
    title: "Mention by Operations Manager",
    desc: "You were mentioned in Operations weekly thread regarding API blocker status.",
    type: "Mention",
    division: "Operations",
    priority: "Normal",
    createdAt: "May 13, 2026 · 15:58",
    timeAgo: "12m ago",
    isUnread: true
  },
  {
    id: "n3",
    title: "Finance report approved",
    desc: "Your cost-allocation update has been reviewed and approved by Finance lead.",
    type: "Approval",
    division: "Finance",
    priority: "Normal",
    createdAt: "May 13, 2026 · 15:30",
    timeAgo: "42m ago",
    isUnread: false
  },
  {
    id: "n4",
    title: "Attendance sync completed",
    desc: "Attendance records for shift B have been synchronized successfully.",
    type: "System",
    division: "HR",
    priority: "Normal",
    createdAt: "May 13, 2026 · 14:45",
    timeAgo: "1h ago",
    isUnread: false
  }
];

const filters = [
  { id: "all", label: "All" },
  { id: "unread", label: "Unread" },
  { id: "mentions", label: "Mentions" },
  { id: "approvals", label: "Approvals" }
];

const activeFilter = ref("all");
const selectedId = ref("n1");

const filteredNotifications = computed(() => {
  if (activeFilter.value === "unread") return notifications.filter((n) => n.isUnread);
  if (activeFilter.value === "mentions") return notifications.filter((n) => n.type === "Mention");
  if (activeFilter.value === "approvals") return notifications.filter((n) => n.type === "Approval");
  return notifications;
});

const selectedNotification = computed(() => notifications.find((n) => n.id === selectedId.value));
</script>
