/*
 * F-B6 라이브 공지 피드 위젯 (공개·관람객) — GET /api/public/events/{eventId}/live-notices.
 * 고정(pinned) 상단·긴급(URGENT) 강조·30초 폴링. 게시분만(백엔드가 published 만 반환).
 * 공지가 없으면 self-hide(null 반환) → 행사 상세·visitor 트랙 어디에 두어도 안전.
 * Nifty 문자 그대로: kxp-livefeed/kxp-lnbadge + kx 토큰(publicExtras.css). 하드코딩 0.
 */
import { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { publicApi, type LiveNoticeCategory, type LiveNoticeDto } from './publicApi';
import { IconBell, IconPin } from './publicIcons';
import './publicExtras.css';

/** 카테고리 → 배지 클래스 접미 + i18n 키. 조직자 화면과 공유. */
export const LIVE_NOTICE_CATEGORY_META: Record<
  LiveNoticeCategory,
  { cls: string; i18n: string; fallback: string }
> = {
  URGENT: { cls: 'kxp-lnbadge--urgent', i18n: 'liveNotice.cat.urgent', fallback: '긴급' },
  PROGRAM: { cls: 'kxp-lnbadge--program', i18n: 'liveNotice.cat.program', fallback: '프로그램' },
  INFO: { cls: 'kxp-lnbadge--info', i18n: 'liveNotice.cat.info', fallback: '안내' },
  GENERAL: { cls: 'kxp-lnbadge--general', i18n: 'liveNotice.cat.general', fallback: '일반' },
};

function catMeta(category: string) {
  return LIVE_NOTICE_CATEGORY_META[(category as LiveNoticeCategory)] ?? LIVE_NOTICE_CATEGORY_META.GENERAL;
}

/** 라이브 공지 카테고리 배지 — 공개·조직자 공용. */
export function LiveNoticeBadge({ category }: { category: string }) {
  const { t } = useTranslation();
  const meta = catMeta(category);
  return <span className={`kxp-lnbadge ${meta.cls}`}>{t(meta.i18n, { defaultValue: meta.fallback })}</span>;
}

function fmt(iso: string | null): string {
  if (!iso) return '';
  const d = new Date(iso);
  return Number.isNaN(d.getTime())
    ? ''
    : d.toLocaleString('ko-KR', { dateStyle: 'short', timeStyle: 'short' });
}

const POLL_MS = 30_000;

/**
 * @param eventId  공지 대상 행사 (없으면 렌더 안 함)
 * @param limit    최대 건수(기본 20 — 위젯)
 */
export function LiveNoticeFeed({ eventId, limit = 20 }: { eventId: string | null | undefined; limit?: number }) {
  const { t } = useTranslation();
  const [items, setItems] = useState<LiveNoticeDto[]>([]);
  const [loaded, setLoaded] = useState(false);

  useEffect(() => {
    if (!eventId) return;
    let alive = true;
    const load = () => {
      publicApi
        .listLiveNotices(eventId, limit)
        .then((list) => {
          if (alive) {
            setItems(list);
            setLoaded(true);
          }
        })
        .catch(() => {
          if (alive) setLoaded(true); // 실패 시 조용히 숨김(공개 부가 위젯)
        });
    };
    load();
    const id = window.setInterval(load, POLL_MS);
    return () => {
      alive = false;
      window.clearInterval(id);
    };
  }, [eventId, limit]);

  // self-hide: 대상 없음 / 로딩 전 / 게시 공지 없음.
  if (!eventId || !loaded || items.length === 0) return null;

  return (
    <section className="kxp-livefeed" aria-label={t('liveNotice.feedTitle', { defaultValue: '라이브 공지' })}>
      <div className="kxp-livefeed__head">
        <IconBell width={18} height={18} />
        <h3 className="kxp-livefeed__title">
          {t('liveNotice.feedTitle', { defaultValue: '라이브 공지' })}
        </h3>
        <span className="kxp-livefeed__live">
          <span className="kxp-livefeed__dot" aria-hidden />
          {t('liveNotice.live', { defaultValue: 'LIVE' })}
        </span>
      </div>
      <ul className="kxp-livefeed__list">
        {items.map((n) => {
          const urgent = n.category === 'URGENT';
          return (
            <li
              key={n.id}
              className={`kxp-livenotice${n.pinned ? ' is-pinned' : ''}${urgent ? ' is-urgent' : ''}`}
            >
              <div className="kxp-livenotice__main">
                <div className="kxp-livenotice__top">
                  {n.pinned && (
                    <span className="kxp-lnpin">
                      <IconPin width={13} height={13} />
                      {t('liveNotice.pinned', { defaultValue: '고정' })}
                    </span>
                  )}
                  <LiveNoticeBadge category={n.category} />
                </div>
                <p className="kxp-livenotice__title">{n.title}</p>
                {n.body && <p className="kxp-livenotice__body">{n.body}</p>}
                <p className="kxp-livenotice__meta">
                  {[n.authorName, fmt(n.updatedAt ?? n.createdAt)].filter(Boolean).join(' · ')}
                </p>
              </div>
            </li>
          );
        })}
      </ul>
    </section>
  );
}
