// The middle of the table: the cards just played, discarded, judged or shown, each flown in from its seat and captioned
// (谁 → 谁), fading out as 无名杀's do; and the lines from a card's user to its targets.
import { useLayoutEffect, useRef, useState, useEffect } from 'react';
import type { CenterCard, Line, Word } from './useFx';
import { Card, type Face } from './Card';
import { scale, handOrigin } from './flyCards';

function center(sel: string): { x: number; y: number } | null {
  const r = document.querySelector(sel)?.getBoundingClientRect();
  return r && r.width ? { x: r.left + r.width / 2, y: r.top + r.height / 2 } : null;
}

function Played({ item }: { item: CenterCard }) {
  const ref = useRef<HTMLDivElement>(null);
  useLayoutEffect(() => {
    const el = ref.current;
    const from = (item.cardId && handOrigin.get(item.cardId)) || (item.from === null ? center('[data-zone-anchor="deck"]') : center(`[data-seat-index="${item.from}"]`));
    if (!el || !from || !el.animate) return;
    const r = el.getBoundingClientRect();
    const s = scale();
    const dx = (from.x - (r.left + r.width / 2)) / s;
    const dy = (from.y - (r.top + r.height / 2)) / s;
    el.animate([{ transform: `translate(${dx}px, ${dy}px) scale(0.55)`, opacity: 0.4 }, { transform: 'none', opacity: 1 }], { duration: 420, easing: 'cubic-bezier(.2,.7,.3,1)' });
  }, []); // eslint-disable-line react-hooks/exhaustive-deps
  return (
    <div className="nm-played" ref={ref}>
      <Card face={item.face} />
      <div className="nm-played-caption">{item.caption}</div>
    </div>
  );
}

export function Center({ items, reveal }: { items: CenterCard[]; reveal: { face: Face; caption: string } | null }) {
  return (
    <div className="nm-center">
      <div className="nm-played-row">
        {items.map((it) => (
          <Played key={it.id} item={it} />
        ))}
        {reveal && (
          <div className="nm-played shown">
            <Card face={reveal.face} />
            <div className="nm-played-caption">{reveal.caption}</div>
          </div>
        )}
      </div>
      <div className="nm-discard" data-zone-anchor="discard" />
    </div>
  );
}

/** Lines between seats and the words on them, drawn in the canvas's own coordinates. */
export function Lines({ lines, words }: { lines: Line[]; words: Word[] }) {
  const ref = useRef<SVGSVGElement>(null);
  const [, redraw] = useState(0);
  useEffect(() => redraw((x) => x + 1), [lines, words]);
  const svg = ref.current?.getBoundingClientRect();
  const s = scale();
  const at = (i: number) => {
    const c = center(`[data-seat-index="${i}"] .nm-avatar`) ?? center(`[data-seat-index="${i}"]`);
    return c && svg ? { x: (c.x - svg.left) / s, y: (c.y - svg.top) / s } : null;
  };
  return (
    <>
    {words.map((w) => {
      const c = at(w.seat);
      return c ? (
        <div key={w.id} className={`nm-cardeffect ${w.text === '杀' || w.text.endsWith('杀') ? 'sha' : ''}`} style={{ left: c.x, top: c.y }}>
          {w.text}
        </div>
      ) : null;
    })}
    <svg className="nm-lines" ref={ref}>
      {lines.map((l) => {
        const a = at(l.from);
        const b = at(l.to);
        if (!a || !b) return null;
        const len = Math.hypot(b.x - a.x, b.y - a.y);
        return (
          <g key={l.id} className={`nm-line ${l.kind}`} style={{ ['--len' as string]: `${len}` }}>
            <line x1={a.x} y1={a.y} x2={b.x} y2={b.y} strokeDasharray={len} />
            <circle cx={b.x} cy={b.y} r="6" />
          </g>
        );
      })}
    </svg>
    </>
  );
}