/**
 * Explore: pick a mode and a layer, then read what the panel lights up.
 *
 * Angular: useState is roughly a component field plus change detection. Setting
 * it re-runs this function, so derived values are recomputed each render;
 * useMemo is the explicit opt-out when that stops being cheap.
 */
import { useMemo, useState } from "react";
import { ENTRIES } from "./domain/entries";
import { controlName } from "./domain/format";
import { CTX, CTXHINT } from "./domain/labels";
import {
  entriesByTarget,
  entriesForLayer,
  layerCounts,
  orderLayerKeys,
} from "./domain/layers";
import type { ContextCode, ControlId, Entry } from "./domain/types";
import { InfoCard } from "./ui/InfoCard";
import { Panel } from "./ui/Panel";
import styles from "./App.module.css";

const TABS = ["Explore", "Drill", "Find", "Rules"] as const;

/** Drawn, not typed: caret glyphs sit outside every Latin font subset. */
function Caret() {
  return (
    <svg width="9" height="6" viewBox="0 0 9 6" aria-hidden="true">
      <path d="M1 1l3.5 3.5L8 1" fill="none" stroke="currentColor" strokeWidth="1.6" />
    </svg>
  );
}

const layerLabel = (key: string): string =>
  key === "" ? "NO MODIFIER" : key.split("+").map(controlName).join(" + ");

export function App() {
  const [ctx, setCtx] = useState<ContextCode>("S");
  const [layer, setLayer] = useState("");
  const [selected, setSelected] = useState<Entry | null>(null);
  const [tab, setTab] = useState<(typeof TABS)[number]>("Explore");

  const counts = useMemo(() => layerCounts(ENTRIES, ctx), [ctx]);
  const layers = useMemo(() => orderLayerKeys(counts.keys()), [counts]);

  // Changing mode can strip the held layer out from under us.
  const activeLayer = counts.has(layer) ? layer : "";

  const onLayer = useMemo(
    () => entriesForLayer(ENTRIES, ctx, activeLayer),
    [ctx, activeLayer],
  );
  const lit = useMemo(() => entriesByTarget(onLayer), [onLayer]);

  const held = activeLayer === "" ? [] : activeLayer.split("+");

  /** A control can carry several functions; pressing it again cycles them. */
  function press(id: ControlId) {
    const here = lit.get(id);
    if (!here || here.length === 0) {
      setSelected(null);
      return;
    }
    const at = selected ? here.indexOf(selected) : -1;
    setSelected(here[(at + 1) % here.length]!);
  }

  function chooseCtx() {
    const order = Object.keys(CTX) as ContextCode[];
    setCtx(order[(order.indexOf(ctx) + 1) % order.length]!);
    setSelected(null);
  }

  function chooseLayer() {
    const at = layers.indexOf(activeLayer);
    setLayer(layers[(at + 1) % layers.length]!);
    setSelected(null);
  }

  return (
    <div className={styles.app}>
      <div className={styles.strip}>
        <button className={styles.picker} onClick={chooseCtx}>
          <b>{CTX[ctx].toUpperCase()}</b>
          <Caret />
        </button>

        <button className={styles.picker} onClick={chooseLayer}>
          <b>{layerLabel(activeLayer)}</b>
          <span className={styles.count}>{onLayer.length}</span>
        </button>
      </div>

      <Panel
        lit={lit}
        held={held}
        selected={selected?.tset[0] ?? null}
        onPress={press}
        screen={{
          top: CTX[ctx].toUpperCase(),
          right: layerLabel(activeLayer),
          main: selected ? selected.short : `${onLayer.length} functions`,
          chips: selected ? [] : onLayer.slice(0, 3).map((e) => e.short),
        }}
      />

      <InfoCard
        entry={selected}
        ctx={ctx}
        hint={CTXHINT[ctx]}
        count={onLayer.length}
      />

      <nav className={styles.nav}>
        {TABS.map((name) => (
          <button
            key={name}
            className={name === tab ? styles.tabOn : styles.tab}
            onClick={() => setTab(name)}
          >
            {name.toUpperCase()}
          </button>
        ))}
      </nav>
    </div>
  );
}