"use client";

/**
 * نوار اعلان زرشکی بالای سایت: چند پیام که هر چند ثانیه با حرکت رو به بالا عوض می‌شوند
 * و یک نوار نور ملایم که از رویش رد می‌شود.
 * با نگه داشتن ماوس یا فوکوس متوقف می‌شود؛ برای کاربرانی که «کاهش حرکت» را فعال کرده‌اند بدون انیمیشن است.
 */
import Link from "next/link";
import { useEffect, useState } from "react";

export interface PromoMessage {
  title: string;
  text: string;
  cta: string;
  href: string;
}

const INTERVAL_MS = 4500;

export function AnnouncementTicker({ messages }: { messages: PromoMessage[] }) {
  const [active, setActive] = useState(0);
  const [paused, setPaused] = useState(false);

  useEffect(() => {
    if (messages.length < 2 || paused || window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
    const id = window.setInterval(() => setActive((i) => (i + 1) % messages.length), INTERVAL_MS);
    return () => window.clearInterval(id);
  }, [messages.length, paused]);

  return (
    <div
      role="region"
      aria-label="اطلاعیه‌ها"
      className="relative h-9 overflow-hidden bg-promo text-paper"
      onPointerEnter={() => setPaused(true)}
      onPointerLeave={() => setPaused(false)}
      onFocus={() => setPaused(true)}
      onBlur={() => setPaused(false)}
    >
      {/* نوار نور */}
      <span aria-hidden className="pointer-events-none absolute inset-y-0 w-1/3 animate-promo-shine bg-linear-to-r from-transparent via-white/15 to-transparent motion-reduce:hidden" />
      {messages.map((m, i) => {
        const offset = (i - active + messages.length) % messages.length;
        // پیام فعال در جای خود؛ پیام قبلی به بالا می‌رود؛ بقیه پایین منتظرند
        const pos = offset === 0 ? "translate-y-0 opacity-100" : offset === messages.length - 1 ? "-translate-y-full opacity-0" : "translate-y-full opacity-0";
        return (
          <Link
            key={m.title}
            href={m.href}
            tabIndex={offset === 0 ? 0 : -1}
            aria-hidden={offset !== 0}
            className={`container-z absolute inset-0 flex items-center justify-center gap-1.5 truncate text-[11px] transition-all duration-500 ease-out motion-reduce:transition-none sm:text-[13px] ${pos}`}
          >
            <strong className="font-bold">{m.title}</strong>
            <span className="truncate opacity-90">{m.text}</span>
            <strong className="hidden shrink-0 items-center gap-0.5 font-bold sm:inline-flex">
              {m.cta}
              <svg width="10" height="10" viewBox="0 0 10 10" aria-hidden className="fill-current">
                <path d="M7 1 2.5 5 7 9z" />
              </svg>
            </strong>
          </Link>
        );
      })}
    </div>
  );
}