// Frequency word list (root groups + expandable variants).
const { useState } = React;

function Triangle({ open }) {
  return (
    <svg
      width="9" height="9" viewBox="0 0 10 10"
      style={{
        transform: open ? "rotate(90deg)" : "rotate(0deg)",
        transition: "transform 120ms ease",
        flex: "0 0 auto",
      }}
    >
      <path d="M3 1.5 L7 5 L3 8.5 Z" fill="currentColor" />
    </svg>
  );
}

function VariantRow({ variant, onHover, onLock, isHovered, isLocked }) {
  return (
    <div
      className={
        "variant-row"
        + (isHovered ? " is-hovered" : "")
        + (isLocked ? " is-locked" : "")
      }
      onMouseEnter={() => onHover(variant.form)}
      onMouseLeave={() => onHover(null)}
      onClick={() => onLock({ kind: "variant", form: variant.form })}
      style={{ cursor: "pointer" }}
    >
      <span className="variant-bar" aria-hidden />
      <span className="variant-form">{variant.form}</span>
      <span className="variant-count">{variant.count}</span>
    </div>
  );
}

function WordRow({ group, expanded, onToggle, hover, locked, onHover, onLock, rank }) {
  const showExpander = group.variants.length > 1;
  const isRootHovered = hover && hover.kind === "root" && hover.id === group.id;
  const isRootLocked = locked && locked.kind === "root" && locked.id === group.id;

  const handleRowClick = () => onLock({ kind: "root", id: group.id });
  const handleTriClick = (e) => {
    e.stopPropagation();
    onToggle(group.id);
  };

  return (
    <div className="word-row-wrap">
      <div
        className={
          "word-row"
          + (isRootHovered ? " is-hovered" : "")
          + (isRootLocked ? " is-locked" : "")
        }
        onClick={handleRowClick}
        onMouseEnter={() => onHover({ kind: "root", id: group.id })}
        onMouseLeave={() => onHover(null)}
        style={{ cursor: "pointer" }}
      >
        <span className="row-rank">{String(rank).padStart(2, "0")}</span>
        <span
          className={"row-tri" + (showExpander ? "" : " row-tri-empty")}
          onClick={showExpander ? handleTriClick : undefined}
          style={showExpander ? { cursor: "pointer" } : undefined}
        >
          {showExpander ? <Triangle open={expanded} /> : null}
        </span>
        <span className="row-root">{group.root}</span>
        <span className="row-count">{group.total}</span>
        <span className="row-meter" aria-hidden>
          <span className="row-meter-fill" style={{ width: group._barPct + "%" }} />
        </span>
      </div>
      {showExpander && expanded && (
        <div className="variants">
          {group.variants.map((v) => (
            <VariantRow
              key={v.form}
              variant={v}
              isHovered={hover && hover.kind === "variant" && hover.form === v.form}
              isLocked={locked && locked.kind === "variant" && locked.form === v.form}
              onHover={(form) => onHover(form ? { kind: "variant", form } : null)}
              onLock={onLock}
            />
          ))}
        </div>
      )}
    </div>
  );
}

function WordList({ groups, hover, locked, onHover, onLock }) {
  const [expanded, setExpanded] = useState(() => new Set());

  const toggle = (id) => {
    setExpanded((prev) => {
      const next = new Set(prev);
      if (next.has(id)) next.delete(id);
      else next.add(id);
      return next;
    });
  };

  if (!groups.length) {
    return (
      <div className="empty-list">
        <div className="empty-rule" />
        <div className="empty-msg">Click <em>Analyze</em> to see word frequencies.</div>
      </div>
    );
  }

  const max = groups[0].total;
  groups.forEach((g) => (g._barPct = (g.total / max) * 100));

  const totalCount = groups.reduce((a, b) => a + b.total, 0);

  return (
    <div className="word-list">
      <div className="list-meta">
        <span>{groups.length.toLocaleString()} root words</span>
        <span className="dot">·</span>
        <span>{totalCount.toLocaleString()} total occurrences</span>
        <span className="dot">·</span>
        <span>click a row to lock the highlight</span>
      </div>
      <div className="list-rows">
        {groups.map((g, i) => (
          <WordRow
            key={g.id}
            group={g}
            rank={i + 1}
            expanded={expanded.has(g.id)}
            onToggle={toggle}
            hover={hover}
            locked={locked}
            onHover={onHover}
            onLock={onLock}
          />
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { WordList });