import React, { useEffect, useMemo, useRef, useState } from "react";

/**
 * Exploding Dots Addition (2→1 machine, i.e., base-2)
 * - Two input rows (top addend, bottom addend), each starting with all dots in the 1s box.
 * - User selects values (0–31). "Go" is enabled only when both are chosen AND a+b ≤ 31.
 * - On Go: rows combine into a working row, then we animate 2→1 explosions leftward until stable.
 * - Boxes: [16, 8, 4, 2, 1] (5 boxes to represent up to 31)
 */

export default function ExplodingDotsAddition() {
  const MAX = 31;
  const BOX_VALUES = [16, 8, 4, 2, 1]; // left→right
  const BOX_COUNT = BOX_VALUES.length;

  const [top, setTop] = useState<number | null>(null);
  const [bottom, setBottom] = useState<number | null>(null);

  const [stage, setStage] = useState<
    | "setup" // choosing numbers
    | "combine" // brief merge animation
    | "exploding" // step-by-step 2→1 explosions
    | "done"
  >("setup");

  // Working cells for the animation (left→right: 16..1)
  const [cells, setCells] = useState<number[]>([0, 0, 0, 0, 0]);

  // For a tiny pulse animation each time an explosion occurs
  const [explodeTick, setExplodeTick] = useState(0);

  const total = (top ?? -1) >= 0 && (bottom ?? -1) >= 0 ? (top as number) + (bottom as number) : null;
  const goEnabled = total !== null && total! <= MAX && stage === "setup";

  // Reset everything
  function resetAll() {
    setStage("setup");
    setCells([0, 0, 0, 0, 0]);
    setExplodeTick(0);
  }

  function handleGo() {
    if (!goEnabled || total === null) return;
    // Start with all dots in the ones place of the working row
    const start = [0, 0, 0, 0, 0];
    start[BOX_COUNT - 1] = total; // put all dots into the 1s box
    setCells(start);
    setStage("combine");

    // Brief pause to show the merge, then begin explosions
    setTimeout(() => setStage("exploding"), 600);
  }

  // Perform a single explosion step; returns [changed, newCells]
  function explodeStep(arr: number[]): [boolean, number[]] {
    const next = [...arr];
    // Scan from rightmost to leftmost (1s→16s)
    for (let i = BOX_COUNT - 1; i >= 1; i--) {
      if (next[i] >= 2) {
        next[i] -= 2;
        next[i - 1] += 1; // 2 in a box explode to 1 in the box to the left
        return [true, next];
      }
    }
    return [false, next];
  }

  // Run the explosion animation when stage === "exploding"
  useEffect(() => {
    if (stage !== "exploding") return;
    let cancelled = false;

    const tick = () => {
      if (cancelled) return;
      const [changed, next] = explodeStep(cells);
      if (changed) {
        setCells(next);
        setExplodeTick((t) => t + 1);
        setTimeout(tick, 500);
      } else {
        setStage("done");
      }
    };

    const t = setTimeout(tick, 500);
    return () => {
      cancelled = true;
      clearTimeout(t);
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [stage, cells]);

  // Helper: render a row of boxes with dots
  function Boxes({ counts, highlightRight = -1 }: { counts: number[]; highlightRight?: number }) {
    return (
      <div className="flex items-end gap-3">
        {counts.map((count, idx) => (
          <Box key={idx} value={BOX_VALUES[idx]} count={count} pulse={idx === highlightRight} />
        ))}
      </div>
    );
  }

  function Box({ value, count, pulse }: { value: number; count: number; pulse?: boolean }) {
    const dots = Array.from({ length: count });
    return (
      <div className={`relative w-28 min-w-28 h-32 rounded-2xl border border-black/10 bg-white shadow-sm p-2 flex flex-col`}
      >
        <div className="text-center text-xs tracking-wide text-black/60">{value}</div>
        <div className={`mt-1 grid grid-cols-5 gap-1 place-content-start place-items-center flex-1 transition-transform ${
          pulse ? "animate-pulse" : ""
        }`}>
          {dots.map((_, i) => (
            <div
              key={i}
              className="w-4 h-4 rounded-full border border-black/10 shadow-sm"
              style={{ background: "radial-gradient(circle at 30% 30%, #fff, #e5e7eb)" }}
            />
          ))}
        </div>
      </div>
    );
  }

  // Build pre-Go displays (each addend lives entirely in the ones box)
  const topRow = useMemo(() => {
    const counts = [0, 0, 0, 0, 0];
    if (top && top > 0) counts[BOX_COUNT - 1] = top;
    return counts;
  }, [top]);

  const bottomRow = useMemo(() => {
    const counts = [0, 0, 0, 0, 0];
    if (bottom && bottom > 0) counts[BOX_COUNT - 1] = bottom;
    return counts;
  }, [bottom]);

  const errorText = useMemo(() => {
    if (top === null || bottom === null) return "";
    if ((top as number) + (bottom as number) > MAX) return `Max total is ${MAX}. Reduce one of the addends.`;
    return "";
  }, [top, bottom]);

  return (
    <div className="w-full max-w-5xl mx-auto p-6">
      <header className="mb-6">
        <h1 className="text-2xl font-semibold">Exploding Dots: 2→1 (Base 2) Addition</h1>
        <p className="text-sm text-black/70 mt-1">
          Pick two numbers (0–31). Each dot is a “1.” In a 2→1 machine, any 2 dots in a box explode into 1 dot in the box to the left.
        </p>
      </header>

      {/* Selection Row */}
      <section className="grid grid-cols-1 md:grid-cols-3 gap-4 items-end mb-6">
        <NumberPicker label="Top addend" value={top} onChange={setTop} max={MAX} />
        <div className="hidden md:flex justify-center">
          <span className="text-4xl">+</span>
        </div>
        <NumberPicker label="Bottom addend" value={bottom} onChange={setBottom} max={MAX} />
      </section>

      {/* Error / hint */}
      {errorText && (
        <div className="mb-4 text-sm text-red-600 bg-red-50 border border-red-200 rounded-lg p-3">{errorText}</div>
      )}

      {/* Action Buttons */}
      <div className="flex gap-3 mb-6">
        <button
          className={`px-4 py-2 rounded-xl shadow-sm border border-black/10 ${
            goEnabled ? "bg-black text-white" : "bg-black/10 text-black/40 cursor-not-allowed"
          }`}
          onClick={handleGo}
          disabled={!goEnabled}
          aria-disabled={!goEnabled}
        >
          Go
        </button>
        <button
          className="px-4 py-2 rounded-xl shadow-sm border border-black/10 bg-white"
          onClick={resetAll}
        >
          Reset
        </button>
      </div>

      {/* Visualization */}
      <div className="space-y-5">
        {stage === "setup" && (
          <div className="space-y-4">
            <RowLabel>Top row</RowLabel>
            <Boxes counts={topRow} />
            <div className="flex items-center gap-3 text-3xl justify-center select-none">
              <span>=</span>
            </div>
            <RowLabel>Bottom row</RowLabel>
            <Boxes counts={bottomRow} />
          </div>
        )}

        {stage !== "setup" && (
          <div className="space-y-2">
            <div className="flex items-center gap-3 justify-center text-lg">
              <span className="px-3 py-1 rounded-full bg-black text-white">Working row</span>
              {stage === "combine" && <span className="text-black/60">(combining dots…)</span>}
              {stage === "exploding" && <span className="text-black/60">(exploding 2→1…)</span>}
              {stage === "done" && <span className="text-black/60">(finished)</span>}
            </div>
            <Boxes counts={cells} highlightRight={stage === "exploding" ? highlightIndex(cells) : -1} />

            {stage === "done" && (
              <ResultReadout cells={cells} />
            )}
          </div>
        )}
      </div>

      {/* Footer note */}
      <p className="mt-8 text-xs text-black/60">
        Max total is 31, which fits in five boxes: 16s, 8s, 4s, 2s, and 1s.
      </p>
    </div>
  );
}

function NumberPicker({ label, value, onChange, max }: { label: string; value: number | null; onChange: (n: number | null) => void; max: number }) {
  const safe = (n: number) => Math.max(0, Math.min(max, Math.floor(n)));
  return (
    <div className="bg-white rounded-2xl border border-black/10 shadow-sm p-4">
      <div className="text-sm text-black/70 mb-2">{label}</div>
      <div className="flex items-center gap-3">
        <input
          type="range"
          min={0}
          max={max}
          step={1}
          value={value ?? 0}
          onChange={(e) => onChange(safe(parseInt(e.target.value)))}
          className="w-full"
        />
        <input
          type="number"
          min={0}
          max={max}
          step={1}
          value={value ?? ""}
          onChange={(e) => {
            const raw = e.target.value;
            if (raw === "") onChange(null);
            else onChange(safe(parseInt(raw)));
          }}
          placeholder="?"
          className="w-20 px-3 py-2 border border-black/10 rounded-xl bg-white shadow-sm"
        />
      </div>
    </div>
  );
}

function RowLabel({ children }: { children: React.ReactNode }) {
  return <div className="text-sm text-black/70">{children}</div>;
}

function ResultReadout({ cells }: { cells: number[] }) {
  // Convert binary counts to a number
  // cells left→right: [16,8,4,2,1]
  const value = cells.reduce((sum, count, i) => sum + (count > 0 ? [16, 8, 4, 2, 1][i] * count : 0), 0);
  const binary = cells.map((c) => (c > 0 ? 1 : 0)).join("");

  return (
    <div className="mt-3 bg-white border border-black/10 rounded-2xl p-3 shadow-sm">
      <div className="text-sm">
        <span className="font-medium">Result:</span> {value} <span className="text-black/50 ml-2">(binary {binary})</span>
      </div>
    </div>
  );
}

function highlightIndex(cells: number[]) {
  // Highlight the rightmost box that still has ≥2 dots (will explode next)
  for (let i = cells.length - 1; i >= 1; i--) {
    if (cells[i] >= 2) return i;
  }
  return -1;
}