"use client";

import { NotificationFeedStack } from "./index";

export interface DemoProps {
  accent?: string;
  interval?: number;
  maxVisible?: number;
  pauseOnHover?: boolean;
}

/** Demo props mirror meta.json controls; defaults must match the control defaults. */
export default function Demo({ accent = "#FF6A1F", interval = 1200, maxVisible = 4, pauseOnHover = true }: DemoProps) {
  return (
    <div className="flex w-full items-center justify-center p-6">
      <NotificationFeedStack accent={accent} interval={interval} maxVisible={maxVisible} pauseOnHover={pauseOnHover} />
    </div>
  );
}

1d:T23f2, 1e:T1a329,

<script setup lang="ts">
import { ref, computed, watch, onMounted, onBeforeUnmount } from "vue";

interface Props {
  accent?: string;
  interval?: number;
  maxVisible?: number;
  pauseOnHover?: boolean;
}
const props = withDefaults(defineProps<Props>(), {
  accent: "#FF6A1F",
  interval: 1200,
  maxVisible: 4,
  pauseOnHover: true,
});

type Kind = "message" | "payment" | "deploy" | "comment" | "alert" | "signup" | "file" | "milestone";

interface Template {
  kind: Kind;
  title: string;
  subtitle: string;
  time: string;
}

interface Item extends Template {
  uid: number;
  justArrived: boolean;
}

const TEMPLATES: Template[] = [
  { kind: "message", title: "New message from Priya Nair", subtitle: "Can we push the launch to Thursday?", time: "Just now" },
  { kind: "payment", title: "Payment received", subtitle: "$1,240.00 from Bluewave Retail", time: "2m ago" },
  { kind: "deploy", title: "Deploy succeeded", subtitle: "checkout-service v2.4.1 is live", time: "4m ago" },
  { kind: "comment", title: "New comment on Q3 roadmap", subtitle: "Diego left feedback on the timeline", time: "6m ago" },
  { kind: "alert", title: "Latency spike resolved", subtitle: "api.orders is back under 200ms", time: "9m ago" },
  { kind: "signup", title: "New team member", subtitle: "Aisha Khan joined the Growth workspace", time: "12m ago" },
  { kind: "file", title: "File shared with you", subtitle: "Marcus Lee sent Q3-roadmap.pdf", time: "15m ago" },
  { kind: "milestone", title: "Milestone reached", subtitle: "10,000 active users this week", time: "18m ago" },
  { kind: "message", title: "New message from Elena Cruz", subtitle: "Approved the copy changes", time: "21m ago" },
  { kind: "payment", title: "Invoice paid", subtitle: "$430.00 from Northstar Labs", time: "24m ago" },
];

const CARD_HEIGHT = 76;
const CARD_GAP = 10;

const visible = ref<Item[]>([]);
const hovering = ref(false);
const reducedMotion = ref(false);
let cursor = 0;
let uid = 0;
let timer: number | undefined;

const clampedMax = computed(() => Math.min(6, Math.max(2, Math.round(props.maxVisible))));
const containerHeight = computed(() => clampedMax.value * CARD_HEIGHT + (clampedMax.value - 1) * CARD_GAP);
const exitTop = computed(() => containerHeight.value - CARD_HEIGHT);

function ringStyle(item: Item) {
  return item.justArrived ? `0 0 0 1px ${props.accent}66, 0 6px 24px -8px ${props.accent}80` : "0 0 0 1px transparent";
}

function pushNext() {
  const template = TEMPLATES[cursor % TEMPLATES.length];
  cursor += 1;
  const id = uid++;
  const item: Item = { ...template, uid: id, justArrived: !reducedMotion.value };
  visible.value = [item, ...visible.value].slice(0, clampedMax.value);
  if (!reducedMotion.value) {
    window.setTimeout(() => {
      const found = visible.value.find((entry) => entry.uid === id);
      if (found) found.justArrived = false;
    }, 900);
  }
}

function restartTimer() {
  if (timer) window.clearInterval(timer);
  if (props.pauseOnHover && hovering.value) return;
  timer = window.setInterval(pushNext, Math.max(200, props.interval));
}

onMounted(() => {
  const query = window.matchMedia("(prefers-reduced-motion: reduce)");
  reducedMotion.value = query.matches;
  query.addEventListener("change", (event) => {
    reducedMotion.value = event.matches;
  });
  pushNext();
  restartTimer();
});

onBeforeUnmount(() => {
  if (timer) window.clearInterval(timer);
});

watch([() => props.interval, () => props.pauseOnHover, hovering], restartTimer);
watch(clampedMax, () => {
  visible.value = visible.value.slice(0, clampedMax.value);
});
</script>

<template>
  <div
    class="feed"
    @mouseenter="hovering = true"
    @mouseleave="hovering = false"
  >
    <div class="feed__mask" :style="{ height: containerHeight + 'px' }">
      <TransitionGroup tag="ol" name="notif" class="feed__list" aria-label="Recent notifications">
        <li
          v-for="item in visible"
          :key="item.uid"
          class="notif-card"
          :style="{ height: CARD_HEIGHT + 'px', boxShadow: ringStyle(item), '--exit-top': exitTop + 'px' }"
        >
          <span class="notif-card__badge" :style="{ background: accent + '29', color: accent }" aria-hidden="true">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
              <template v-if="item.kind === 'message'">
                <path d="M4.5 6.5a2 2 0 0 1 2-2h11a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H10l-4 3v-3H6.5a2 2 0 0 1-2-2v-7Z" />
              </template>
              <template v-else-if="item.kind === 'comment'">
                <path d="M4.5 6.5a2 2 0 0 1 2-2h11a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H10l-4 3v-3H6.5a2 2 0 0 1-2-2v-7Z" />
                <line x1="8" y1="8" x2="16" y2="8" />
                <line x1="8" y1="10.8" x2="13.5" y2="10.8" />
              </template>
              <template v-else-if="item.kind === 'payment'">
                <rect x="3" y="6" width="18" height="12" rx="2" />
                <line x1="3" y1="10" x2="21" y2="10" />
                <line x1="6.5" y1="14.5" x2="10" y2="14.5" />
              </template>
              <template v-else-if="item.kind === 'deploy'">
                <path d="M12 17V6" />
                <path d="M7.5 10.5 12 6l4.5 4.5" />
                <path d="M6 19h12" />
              </template>
              <template v-else-if="item.kind === 'alert'">
                <path d="M12 3.5a4 4 0 0 0-4 4v3a4.3 4.3 0 0 1-.9 2.7L6 15h12l-1.1-1.8A4.3 4.3 0 0 1 16 10.5v-3a4 4 0 0 0-4-4Z" />
                <path d="M10.2 18a1.9 1.9 0 0 0 3.6 0" />
              </template>
              <template v-else-if="item.kind === 'signup'">
                <circle cx="10" cy="8" r="3" />
                <path d="M4.5 19c.6-3 3-5 5.5-5s4.9 2 5.5 5" />
                <line x1="18" y1="8" x2="18" y2="13" />
                <line x1="15.5" y1="10.5" x2="20.5" y2="10.5" />
              </template>
              <template v-else-if="item.kind === 'file'">
                <path d="M7 3.5h6.5L18 8v11.5a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V4.5a1 1 0 0 1 1-1Z" />
                <path d="M13.5 3.5V8H18" />
                <line x1="8.5" y1="12.2" x2="15" y2="12.2" />
                <line x1="8.5" y1="15.4" x2="13" y2="15.4" />
              </template>
              <template v-else-if="item.kind === 'milestone'">
                <line x1="6" y1="3.5" x2="6" y2="20.5" />
                <path d="M6 4.5h11l-2.3 3L17 10.5H6Z" />
              </template>
            </svg>
          </span>
          <span class="notif-card__body">
            <span class="notif-card__title">{{ item.title }}</span>
            <span class="notif-card__subtitle">{{ item.subtitle }}</span>
            <span class="notif-card__time">{{ item.time }}</span>
          </span>
        </li>
      </TransitionGroup>
    </div>
  </div>
</template>

<style scoped>
.feed {
  width: 100%;
  max-width: 24rem;
}
.feed__mask {
  position: relative;
  overflow: hidden;
  mask-image: linear-gradient(to bottom, black 66%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 66%, transparent 100%);
}
.feed__list {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.notif-card {
  position: relative;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.75rem;
  padding: 0 0.875rem;
  border-radius: 1rem;
  border: 1px solid rgb(255 255 255 / 0.1);
  background: rgb(255 255 255 / 0.05);
  transition: box-shadow 700ms ease-out;
}
.notif-card__badge {
  display: flex;
  height: 2.25rem;
  width: 2.25rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
}
.notif-card__body {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.notif-card__title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.2;
  color: #fff;
  font-family: system-ui, sans-serif;
}
.notif-card__subtitle {
  margin-top: 0.125rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.75rem;
  line-height: 1.2;
  color: rgb(255 255 255 / 0.55);
  font-family: system-ui, sans-serif;
}
.notif-card__time {
  margin-top: 0.25rem;
  font-size: 0.6875rem;
  line-height: 1.2;
  color: rgb(255 255 255 / 0.4);
  font-family: system-ui, sans-serif;
}

.notif-enter-from {
  opacity: 0;
  transform: scale(0.86) translateY(-16px);
}
.notif-enter-active {
  transition: opacity 380ms cubic-bezier(0.2, 0.8, 0.2, 1), transform 380ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.notif-leave-active {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--exit-top);
  transition: opacity 320ms ease, transform 320ms ease;
}
.notif-leave-to {
  opacity: 0;
  transform: translateY(28px) scale(0.94);
}
.notif-move {
  transition: transform 380ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  .notif-enter-from,
  .notif-leave-to {
    transform: none;
  }
  .notif-enter-active,
  .notif-leave-active,
  .notif-move {
    transition-duration: 1ms;
  }
}
</style>

Nearby