// The game log as 无名杀 writes its history: white lines, generals in blue, cards in yellow, no panel; its newest few
// lines, or more when opened.
import { useEffect, useMemo, useRef, useState } from 'react';
import type { GameView } from '../../../src/engine/types';
import art from './art.json';

const CARDS = [...Object.keys(art.cards), '火杀', '雷杀'];
const esc = (s: string) => s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');

export function Log({ view }: { view: GameView }) {
  const [open, setOpen] = useState(false);
  const ref = useRef<HTMLDivElement>(null);
  const lines = view.log.slice(open ? -80 : -4);
  const generals = view.players.map((p) => p.character).filter(Boolean).join('|');
  const re = useMemo(() => {
    const words = [...generals.split('|').filter(Boolean), ...CARDS].sort((a, b) => b.length - a.length);
    return new RegExp(`(${words.map(esc).join('|')})`, 'g');
  }, [generals]);
  const cards = useMemo(() => new Set(CARDS), []);
  useEffect(() => {
    if (ref.current) ref.current.scrollTop = ref.current.scrollHeight;
  }, [lines.length, open]);
  return (
    <div className={`nm-log${open ? ' open' : ''}`}>
      <button className="nm-log-toggle" onClick={() => setOpen(!open)} title={open ? '收起记录' : '展开记录'}>
        记录
      </button>
      {lines.length > 0 && (
        <div className="nm-log-lines" ref={ref}>
          {lines.map((e, i) => {
            const p = view.players[e.player];
            return (
              <div key={view.log.length - lines.length + i} className="nm-log-line">
                {p && <span className="who">{p.character || p.name}</span>}
                {e.text.split(re).map((t, k) => (k % 2 ? <span key={k} className={cards.has(t) ? 'card' : 'who'}>{t}</span> : t))}
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
}