// Archive — список вопросов с фильтром по категориям и избранному
// Changes from v1:
//  - "В избранное (в боте)" заменён на настоящий toggle /api/couple/favorite
//  - Добавлен фильтр «⭐ Избранное» (показывает только favorite=true)

window.ArchiveScreen = function ArchiveScreen({ setScreen, data, reload }) {
  const { useState } = React;
  const D = data;
  const [filter, setFilter] = useState('all');
  const [openId, setOpenId] = useState(D.history.length ? D.history[0].id : null);
  const [copiedId, setCopiedId] = useState(null);
  const [busyId, setBusyId] = useState(null);
  // Local favorite overrides (optimistic)
  const [favOverrides, setFavOverrides] = useState({});

  function isFav(item) {
    if (favOverrides[item.id] !== undefined) return favOverrides[item.id];
    return !!item.favorite;
  }

  const filtered = filter === 'all'
    ? D.history
    : filter === '_favorites'
      ? D.history.filter(h => isFav(h))
      : D.history.filter(h => h.category === filter);

  const presentCats = {};
  D.history.forEach(h => { presentCats[h.category] = (presentCats[h.category] || 0) + 1; });
  const favCount = D.history.filter(h => isFav(h)).length;

  if (!D.history.length) {
    return (
      <div className="fade-in">
        <div className="page-head">
          <div>
            <h1 className="page-head__title">Архив вопросов</h1>
            <div className="page-head__sub">Пока пусто — ответьте на первый вопрос вместе</div>
          </div>
        </div>
        <div className="surface" style={{padding: 40, textAlign: 'center'}}>
          <div style={{fontSize: 42, marginBottom: 10}}>📖</div>
          <div style={{color: 'var(--text-3)'}}>Здесь появятся вопросы, на которые вы оба ответили.</div>
        </div>
      </div>
    );
  }

  const h = D.history.find(x => x.id === openId) || D.history[0];
  const dcat = h.cat_meta;
  const hFav = isFav(h);

  function copy(text) {
    try {
      navigator.clipboard && navigator.clipboard.writeText(text);
      setCopiedId(h.id);
      setTimeout(() => setCopiedId(null), 1500);
    } catch (e) { /* ignore */ }
  }

  async function toggleFavorite(item) {
    if (busyId) return;
    const prev = isFav(item);
    const next = !prev;
    setFavOverrides(o => ({ ...o, [item.id]: next }));
    setBusyId(item.id);
    try {
      await window.API.setFavorite(item.db_id || item.id, next);
      if (reload) reload();
    } catch (e) {
      setFavOverrides(o => ({ ...o, [item.id]: prev }));
      alert('Не удалось сохранить: ' + (e.message || 'ошибка'));
    } finally {
      setBusyId(null);
    }
  }

  // Filter row: "Все", categories present in history, "⭐ Избранное"
  const chips = [
    { key: 'all', meta: { ru: 'Все', emoji: '🗂', color: 'var(--text-2)' }, count: D.history.length },
    ...Object.keys(presentCats).map(c => ({
      key: c,
      meta: D.cats[c] || D.cats._default,
      count: presentCats[c] || 0
    })),
    { key: '_favorites', meta: { ru: 'Избранное', emoji: '⭐', color: 'oklch(0.8 0.18 70)' }, count: favCount }
  ];

  return (
    <div className="fade-in">
      <div className="page-head">
        <div>
          <h1 className="page-head__title">Архив вопросов</h1>
          <div className="page-head__sub">{D.history.length} {D.history.length === 1 ? 'ответ' : (D.history.length < 5 ? 'ответа' : 'ответов')} · с {D.pair.started_at}</div>
        </div>
      </div>

      <div className="filter-row">
        {chips.map(c => {
          const active = filter === c.key;
          return (
            <button key={c.key} className={'chip-btn' + (active ? ' chip-btn--on' : '')} onClick={() => setFilter(c.key)}>
              <span>{c.meta.emoji}</span> {c.meta.ru}
              <span className="chip-btn__count">{c.count}</span>
            </button>
          );
        })}
      </div>

      <div className="archive-grid">
        <div className="archive-list">
          {filtered.length ? filtered.map(item => {
            const cat = item.cat_meta;
            const isOpen = h.id === item.id;
            const fav = isFav(item);
            return (
              <button key={item.id} className={'arch-item' + (isOpen ? ' arch-item--on' : '')} onClick={() => setOpenId(item.id)}>
                <div className="arch-item__head">
                  <span className="arch-item__num">#{item.number}</span>
                  <span className="arch-item__date">{item.date}</span>
                  <span className="arch-item__cat" style={{color: cat.color}}>{cat.emoji} {cat.ru}</span>
                  {fav && <span style={{marginLeft: 'auto', fontSize: 13}}>⭐</span>}
                </div>
                <div className="arch-item__q">«{item.text}»</div>
              </button>
            );
          }) : (
            <div style={{padding: 20, textAlign: 'center', color: 'var(--text-3)', fontSize: 13}}>
              {filter === '_favorites' ? 'Пока нет избранных вопросов' : 'В этой категории пока пусто'}
            </div>
          )}
        </div>

        <div className="archive-detail">
          <div className="surface" style={{padding: 24}}>
            <div style={{display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14, flexWrap: 'wrap'}}>
              <span className="qcard__num">#{h.number} · {h.date}</span>
              <span className="qcard__cat" style={{background: `oklch(0.55 0.18 ${dcat.hue} / 0.16)`, borderColor: `oklch(0.55 0.18 ${dcat.hue} / 0.3)`, color: dcat.color}}>
                <span>{dcat.emoji}</span> {dcat.ru}
              </span>
              {hFav && <span style={{color: 'oklch(0.8 0.18 70)', fontSize: 13}}>⭐ в избранном</span>}
            </div>
            <h3 style={{font: '600 22px/1.3 var(--font-display)', margin: '0 0 18px', color: 'var(--text-1)'}}>«{h.text}»</h3>
            <div style={{display: 'grid', gridTemplateColumns: '1fr', gap: 12}}>
              <div className="answer-mini answer-mini--you">
                <div className="answer-mini__name"><span className="me-dot"></span>{D.me.name}</div>
                <div className="answer-mini__text">{h.you || <span style={{color:'var(--text-4)'}}>—</span>}</div>
              </div>
              <div className="answer-mini answer-mini--p">
                <div className="answer-mini__name"><span className="p-dot"></span>{D.partner.name}</div>
                <div className="answer-mini__text">{h.partner || <span style={{color:'var(--text-4)'}}>—</span>}</div>
              </div>
            </div>
            {(h.you_reaction || h.partner_reaction) && (
              <div style={{display: 'flex', gap: 16, marginTop: 14, fontSize: 12, color: 'var(--text-3)'}}>
                {h.you_reaction && <span>Вы: <span style={{fontSize: 16}}>{h.you_reaction}</span></span>}
                {h.partner_reaction && <span>{D.partner.name}: <span style={{fontSize: 16}}>{h.partner_reaction}</span></span>}
              </div>
            )}
            <div style={{display: 'flex', gap: 8, marginTop: 16, paddingTop: 14, borderTop: '1px solid var(--ink-3)', flexWrap: 'wrap'}}>
              <button
                className={hFav ? 'btn-primary' : 'btn-ghost'}
                onClick={() => toggleFavorite(h)}
                disabled={busyId === h.id}
                style={{padding: '8px 14px', minHeight: 34}}
              >
                <window.Icon name="heart" size={13}/>
                {hFav ? 'В избранном' : 'В избранное'}
              </button>
              <button className="btn-ghost" onClick={() => copy(`${h.text}\n\n${D.me.name}: ${h.you || '—'}\n${D.partner.name}: ${h.partner || '—'}`)} style={{padding: '8px 14px', minHeight: 34}}>
                <window.Icon name={copiedId === h.id ? 'check' : 'copy'} size={13}/>
                {copiedId === h.id ? 'Скопировано' : 'Скопировать'}
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};