import { adjointFormula, formatNumber, tangentFormula } from "./formula";
import { expressionOf } from "./layout";
import MathText from "./MathText";
import type { Graph, Mode, State } from "./types";

// z-10 keeps it above the rows' subscripts, which sit in their own layer
const headerClass = "sticky top-0 z-10 whitespace-nowrap bg-white pb-2 text-xs font-semibold uppercase tracking-widest text-ink-muted";

// Rounded for reading; a cell's title holds the full value
function NumberCell({ value, className }: { value: number | undefined; className: string }) {
  return (
    <td className={`py-1 ${className}`} title={value === undefined ? undefined : String(value)}>
      {value === undefined ? "—" : formatNumber(value)}
    </td>
  );
}

export default function EvaluationTable({
  graph,
  state,
  mode,
  seed,
}: {
  graph: Graph;
  state: State | undefined;
  mode: Mode;
  seed: string;
}) {
  const forward = mode === "forward";
  const symbolName = forward ? "Tangent" : "Adjoint";
  return (
    <div className="max-h-[45%] shrink-0 overflow-auto">
      <table className="w-full border-collapse text-sm">
        <thead>
          <tr>
            <th aria-label="Node" className={`${headerClass} pr-4 text-left`} />
            <th className={`${headerClass} pr-4 text-left`}>Definition</th>
            <th className={`${headerClass} pr-6 text-right`}>Value</th>
            <th aria-label={symbolName} className={`${headerClass} border-l border-grid pl-6 pr-4 text-left`} />
            <th className={`${headerClass} text-left`}>Rule</th>
            <th className={`${headerClass} pl-6 text-left`}>Value</th>
          </tr>
        </thead>
        <tbody className="font-mono">
          {graph.nodes.map((node) => {
            const [derivative, rule] = (forward ? tangentFormula(graph, node, seed) : adjointFormula(graph, node)).split(" = ");
            return (
            <tr
              key={node.id}
              data-row={node.id}
              ref={node.id === state?.step?.node ? (row) => row?.scrollIntoView({ block: "nearest" }) : undefined}
              className={`scroll-mt-8 border-t border-grid ${node.id === state?.step?.node ? "bg-marker-soft" : ""}`}
            >
              <td className={`py-1 pr-4 ${node.id === graph.output ? "font-medium" : ""}`}><MathText text={node.id} /></td>
              <td className="py-1 pr-4 text-ink-muted"><MathText text={expressionOf(node)} /></td>
              <NumberCell value={state?.values[node.id]} className="pr-6 text-right" />
              <td className="border-l border-grid py-1 pl-6 pr-4"><MathText text={derivative} /></td>
              <td className="py-1 text-ink-muted"><MathText text={rule} /></td>
              <NumberCell value={state?.derivatives[node.id]} className="pl-6 text-left" />
            </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
}