/* global React, WTi18n */
const { useEffect, useState } = React;

const NEWS_ITEMS = [
  { date: 'news.item5.date', title: 'news.item5.title', ts: new Date('2026-06-01').getTime() },
  { date: 'news.item1.date', title: 'news.item1.title', ts: new Date('2025-05-28').getTime() },
  { date: 'news.item2.date', title: 'news.item2.title', ts: new Date('2025-05-20').getTime() },
  { date: 'news.item3.date', title: 'news.item3.title', ts: new Date('2025-05-15').getTime() },
  { date: 'news.item4.date', title: 'news.item4.title', ts: new Date('2025-05-05').getTime() },
];

const STORAGE_KEY = 'wotrafa.news.lastSeen';
const NEWEST_TS = Math.max(...NEWS_ITEMS.map(i => i.ts));

function NewsPanel() {
  const [locale, setLocale] = useState(() => (window.WTi18n && WTi18n.current) || 'ru');
  const [isOpen, setIsOpen] = useState(false);
  const [isMobile, setIsMobile] = useState(() => window.innerWidth <= 1100);

  useEffect(() => {
    const onResize = () => setIsMobile(window.innerWidth <= 1100);
    window.addEventListener('resize', onResize);
    return () => window.removeEventListener('resize', onResize);
  }, []);

  // true если есть новости новее последнего открытия панели
  const [hasNew, setHasNew] = useState(() => {
    try {
      const lastSeen = parseInt(localStorage.getItem(STORAGE_KEY) || '0', 10);
      return NEWEST_TS > lastSeen;
    } catch (_) { return true; }
  });

  useEffect(() => {
    const onLocale = (e) => setLocale(e.detail.locale);
    window.addEventListener('wt:locale', onLocale);
    return () => window.removeEventListener('wt:locale', onLocale);
  }, []);

  // При открытии панели — отмечаем всё как просмотренное
  useEffect(() => {
    if (isOpen && hasNew) {
      try { localStorage.setItem(STORAGE_KEY, Date.now().toString()); } catch (_) {}
      setHasNew(false);
    }
  }, [isOpen]);

  // Когда бургер открывается — закрываем новостную панель
  useEffect(() => {
    const onBurgerOpen = () => setIsOpen(false);
    window.addEventListener('wt:burger-open', onBurgerOpen);
    return () => window.removeEventListener('wt:burger-open', onBurgerOpen);
  }, []);

  const t = (key) => window.WTi18n ? WTi18n.t(key) : key;

  return (
    <aside
      className={'wt-news-panel' + (isOpen ? '' : ' is-collapsed')}
      aria-label={t('news.header')}
    >
      <div className="wt-news-panel__header">
        <span className="wt-news-panel__eyebrow">{t('news.header')}</span>
        <span className="wt-news-panel__dot" aria-hidden="true" />
      </div>
      <div className="wt-news-panel__list">
        {NEWS_ITEMS.map((item, i) => (
          <div key={i} className="wt-news-panel__item">
            <span className="wt-news-panel__date">{t(item.date)}</span>
            <span className="wt-news-panel__title">{t(item.title)}</span>
          </div>
        ))}
      </div>

      <button
        className={'wt-news-panel__toggle' + (hasNew ? ' has-new' : '')}
        onClick={() => {
          const opening = !isOpen;
          if (opening) window.dispatchEvent(new CustomEvent('wt:news-open'));
          setIsOpen(opening);
        }}
        aria-label={isOpen ? 'Свернуть' : 'Развернуть'}
      >
        <span className="wt-news-panel__toggle-arrows">
          {isMobile ? (isOpen ? '▽' : '△') : (isOpen ? '◁' : '▷')}
        </span>
      </button>
    </aside>
  );
}

window.NewsPanel = NewsPanel;