"use client";

import { useState, useCallback } from "react";
import { Card } from "@/components/ui/card";
import { StepControls } from "./step-controls";

type RoundTarget = "whole" | "1dp" | "2dp" | "1sf" | "2sf" | "3sf";

interface Step {
  label: string;
  digits: DigitInfo[];
  resultText?: string;
}

interface DigitInfo {
  char: string;
  state: "normal" | "target" | "decider" | "dim" | "significant";
}

function getDigits(value: string): string[] {
  return value.split("");
}

// ── Decimal place rounding steps ─────────────────────────────────────────────
function buildDPSteps(rawValue: string, target: "whole" | "1dp" | "2dp"): Step[] {
  const value = parseFloat(rawValue);
  const digits = getDigits(rawValue);
  const dotIndex = digits.indexOf(".");
  const steps: Step[] = [];

  function makeDigits(
    targetIdx: number | null,
    deciderIdx: number | null,
  ): DigitInfo[] {
    return digits.map((ch, i) => ({
      char: ch,
      state:
        ch === "."
          ? "normal"
          : i === targetIdx
            ? "target"
            : i === deciderIdx
              ? "decider"
              : "normal",
    }));
  }

  let targetDigitIdx: number;
  let roundedValue: number;
  let targetLabel: string;

  if (target === "whole") {
    targetDigitIdx = dotIndex === -1 ? digits.length - 1 : dotIndex - 1;
    roundedValue = Math.round(value);
    targetLabel = "ones (whole number)";
  } else if (target === "1dp") {
    targetDigitIdx = dotIndex + 1;
    roundedValue = Math.round(value * 10) / 10;
    targetLabel = "1 decimal place (tenths)";
  } else {
    targetDigitIdx = dotIndex + 2;
    roundedValue = Math.round(value * 100) / 100;
    targetLabel = "2 decimal places (hundredths)";
  }

  // Compute decider index (skip over decimal point if needed)
  const nextIdx = targetDigitIdx + 1;
  const deciderIdx =
    nextIdx < digits.length && digits[nextIdx] === "."
      ? nextIdx + 1
      : nextIdx;

  // Step 0: Show the number
  steps.push({
    label: `Rounding ${rawValue} to ${targetLabel}`,
    digits: makeDigits(null, null),
  });

  // Step 1: Identify target
  steps.push({
    label: `Identify the target digit (${targetLabel})`,
    digits: makeDigits(targetDigitIdx, null),
  });

  // Step 2: Identify decider
  if (deciderIdx < digits.length) {
    steps.push({
      label: "Look at the digit to the right (the decider)",
      digits: makeDigits(targetDigitIdx, deciderIdx),
    });

    const deciderDigit = parseInt(digits[deciderIdx]);
    const roundsUp = deciderDigit >= 5;
    steps.push({
      label: roundsUp
        ? `Decider is ${deciderDigit} (≥ 5) → round UP`
        : `Decider is ${deciderDigit} (< 5) → round DOWN`,
      digits: makeDigits(targetDigitIdx, deciderIdx),
    });
  } else {
    steps.push({
      label: "No digit to the right — no rounding needed",
      digits: makeDigits(targetDigitIdx, null),
    });
  }

  // Step 3: Result
  const resultStr =
    target === "whole"
      ? roundedValue.toString()
      : target === "1dp"
        ? roundedValue.toFixed(1)
        : roundedValue.toFixed(2);

  const resultDigits = getDigits(resultStr);
  steps.push({
    label: `Result: ${resultStr}`,
    digits: resultDigits.map((ch) => ({
      char: ch,
      state: "normal" as const,
    })),
    resultText: resultStr,
  });

  return steps;
}

// ── Significant figures rounding steps ───────────────────────────────────────
function buildSFSteps(rawValue: string, sfCount: number): Step[] {
  const value = parseFloat(rawValue);
  const digits = getDigits(rawValue);
  const steps: Step[] = [];

  // Step 0: Show the number
  steps.push({
    label: `Rounding ${rawValue} to ${sfCount} significant figure${sfCount > 1 ? "s" : ""}`,
    digits: digits.map((ch) => ({ char: ch, state: "normal" as const })),
  });

  // Step 1: Identify which digits are significant
  // Rule: significant figures start at the first non-zero digit
  const sigDigitIndices: number[] = [];
  let foundFirstNonZero = false;
  for (let i = 0; i < digits.length; i++) {
    if (digits[i] === ".") continue;
    if (!foundFirstNonZero && digits[i] === "0") continue;
    foundFirstNonZero = true;
    sigDigitIndices.push(i);
  }

  // Build display: highlight all significant digits found
  const sigSet = new Set(sigDigitIndices);
  steps.push({
    label: `Identify significant figures — start from the first non-zero digit`,
    digits: digits.map((ch, i) => ({
      char: ch,
      state:
        ch === "."
          ? "normal"
          : sigSet.has(i)
            ? "significant"
            : "dim",
    })),
  });

  // Count and label the sig figs we need
  const sigLabel = sigDigitIndices.slice(0, sfCount).map((idx, n) => {
    return `${ordinal(n + 1)} s.f. = ${digits[idx]}`;
  });
  const targetIdx = sigDigitIndices[sfCount - 1]; // the last sig fig we keep

  if (targetIdx === undefined) {
    // Not enough significant figures in the number
    steps.push({
      label: `The number only has ${sigDigitIndices.length} significant figure${sigDigitIndices.length !== 1 ? "s" : ""} — already rounded`,
      digits: digits.map((ch, i) => ({
        char: ch,
        state:
          ch === "."
            ? "normal"
            : sigSet.has(i)
              ? "significant"
              : "dim",
      })),
      resultText: rawValue,
    });
    return steps;
  }

  // Step 2: Show which sig figs we're keeping
  const keepSet = new Set(sigDigitIndices.slice(0, sfCount));
  steps.push({
    label: `Keep ${sfCount} sig fig${sfCount > 1 ? "s" : ""}: ${sigLabel.join(", ")}`,
    digits: digits.map((ch, i) => ({
      char: ch,
      state:
        ch === "."
          ? "normal"
          : keepSet.has(i)
            ? "target"
            : sigSet.has(i)
              ? "normal"
              : "dim",
    })),
  });

  // Step 3: Identify the decider
  const deciderCandidateIdx = sigDigitIndices[sfCount]; // next sig fig after the ones we keep
  // But the decider could also be after a decimal point
  let deciderIdx: number | null = null;
  if (deciderCandidateIdx !== undefined) {
    deciderIdx = deciderCandidateIdx;
  } else {
    // Look for any digit after the target
    for (let i = targetIdx + 1; i < digits.length; i++) {
      if (digits[i] !== ".") {
        deciderIdx = i;
        break;
      }
    }
  }

  if (deciderIdx !== null && deciderIdx < digits.length) {
    steps.push({
      label: `Look at the next digit: ${digits[deciderIdx]} (the decider)`,
      digits: digits.map((ch, i) => ({
        char: ch,
        state:
          ch === "."
            ? "normal"
            : i === deciderIdx
              ? "decider"
              : keepSet.has(i)
                ? "target"
                : "dim",
      })),
    });

    // Step 4: Round decision
    const deciderDigit = parseInt(digits[deciderIdx]);
    const roundsUp = deciderDigit >= 5;
    steps.push({
      label: roundsUp
        ? `Decider is ${deciderDigit} (≥ 5) → round UP the last kept digit`
        : `Decider is ${deciderDigit} (< 5) → round DOWN (keep it the same)`,
      digits: digits.map((ch, i) => ({
        char: ch,
        state:
          ch === "."
            ? "normal"
            : i === deciderIdx
              ? "decider"
              : keepSet.has(i)
                ? "target"
                : "dim",
      })),
    });
  } else {
    steps.push({
      label: "No digit to the right — no rounding needed",
      digits: digits.map((ch, i) => ({
        char: ch,
        state:
          ch === "."
            ? "normal"
            : keepSet.has(i)
              ? "target"
              : "dim",
      })),
    });
  }

  // Step 5: Compute and show result
  let roundedValue: number;
  if (value === 0) {
    roundedValue = 0;
  } else {
    const magnitude = Math.floor(Math.log10(Math.abs(value)));
    const factor = Math.pow(10, sfCount - 1 - magnitude);
    roundedValue = Math.round(value * factor) / factor;
  }

  // Format result with correct sig figs (preserve trailing zeros)
  const resultStr = formatSigFigs(roundedValue, sfCount);
  const resultDigits = getDigits(resultStr);

  // Step: explain what happens to remaining digits
  const dotIdx = rawValue.indexOf(".");
  const hasIntegerPart = dotIdx === -1 || dotIdx > 0;
  if (hasIntegerPart && sigDigitIndices.length > sfCount) {
    // Some trailing digits in the integer part get replaced with zeros
    steps.push({
      label: "Replace remaining digits with zeros (to keep the place value)",
      digits: resultDigits.map((ch) => ({
        char: ch,
        state: "normal" as const,
      })),
    });
  }

  steps.push({
    label: `Result: ${resultStr} (${sfCount} significant figure${sfCount > 1 ? "s" : ""})`,
    digits: resultDigits.map((ch) => ({
      char: ch,
      state: "normal" as const,
    })),
    resultText: resultStr,
  });

  return steps;
}

function formatSigFigs(value: number, sfCount: number): string {
  if (value === 0) return "0";

  const magnitude = Math.floor(Math.log10(Math.abs(value)));

  if (magnitude >= sfCount - 1) {
    // Integer result — no decimal point needed
    return Math.round(value / Math.pow(10, magnitude - sfCount + 1))
      * Math.pow(10, magnitude - sfCount + 1) + "";
  }

  // Decimal result — need to show enough places
  const decimalPlaces = sfCount - 1 - magnitude;
  return value.toFixed(decimalPlaces);
}

function ordinal(n: number): string {
  if (n === 1) return "1st";
  if (n === 2) return "2nd";
  if (n === 3) return "3rd";
  return `${n}th`;
}

// ── Main step builder ────────────────────────────────────────────────────────
function buildSteps(rawValue: string, target: RoundTarget): Step[] {
  if (target === "whole" || target === "1dp" || target === "2dp") {
    return buildDPSteps(rawValue, target);
  }
  const sfCount = target === "1sf" ? 1 : target === "2sf" ? 2 : 3;
  return buildSFSteps(rawValue, sfCount);
}

// ── Digit box component ─────────────────────────────────────────────────────
function DigitBox({ char, state }: DigitInfo) {
  if (char === ".") {
    return (
      <div className="flex h-[88px] w-6 items-end justify-center pb-2 max-sm:h-[70px]">
        <div className="h-3 w-3 rounded-full bg-foreground" />
      </div>
    );
  }

  const styles: Record<DigitInfo["state"], string> = {
    normal: "border-border bg-surface text-foreground",
    target: "border-unit-2 bg-unit-2-light text-foreground ring-2 ring-unit-2/30",
    decider: "border-hint bg-hint-light text-foreground ring-2 ring-hint/30",
    significant: "border-unit-4 bg-unit-4-light text-foreground ring-2 ring-unit-4/30",
    dim: "border-border/40 bg-background text-muted/30",
  };

  return (
    <div
      className={`flex h-[88px] w-[68px] shrink-0 select-none items-center justify-center rounded-xl border-2 text-[3.2rem] font-bold transition-all duration-300 max-sm:h-[70px] max-sm:w-[52px] max-sm:text-[2.4rem] ${styles[state]}`}
    >
      {char}
    </div>
  );
}

// ── Explorer component ──────────────────────────────────────────────────────
export function RoundingExplorer() {
  const [input, setInput] = useState("3.4567");
  const [target, setTarget] = useState<RoundTarget>("1dp");
  const [error, setError] = useState("");

  const [steps, setSteps] = useState<Step[] | null>(null);
  const [currentStep, setCurrentStep] = useState(0);
  const [isPlaying, setIsPlaying] = useState(false);

  const done = steps ? currentStep >= steps.length - 1 : false;

  function handleGo() {
    setError("");
    const trimmed = input.trim();
    const val = parseFloat(trimmed);
    if (isNaN(val)) {
      setError("Enter a valid number.");
      return;
    }
    if (val < 0) {
      setError("Enter a positive number.");
      return;
    }
    if (trimmed.length > 16) {
      setError("Number too long.");
      return;
    }
    if (!trimmed.includes(".") && (target === "1dp" || target === "2dp")) {
      setError("Enter a decimal number for decimal place rounding.");
      return;
    }
    try {
      const s = buildSteps(trimmed, target);
      setSteps(s);
      setCurrentStep(0);
      setIsPlaying(false);
    } catch {
      setError("Could not process. Check your input.");
    }
  }

  const stepForward = useCallback(() => {
    if (!steps || currentStep >= steps.length - 1) return;
    setCurrentStep((s) => s + 1);
    if (currentStep + 1 >= steps.length - 1) setIsPlaying(false);
  }, [steps, currentStep]);

  const stepBack = useCallback(() => {
    if (currentStep <= 0) return;
    setCurrentStep((s) => s - 1);
  }, [currentStep]);

  const togglePlay = useCallback(() => setIsPlaying((p) => !p), []);

  const reset = useCallback(() => {
    setSteps(null);
    setCurrentStep(0);
    setIsPlaying(false);
  }, []);

  const step = steps ? steps[currentStep] : null;

  const targetLabels: Record<RoundTarget, string> = {
    whole: "Whole Number",
    "1dp": "1 d.p.",
    "2dp": "2 d.p.",
    "1sf": "1 s.f.",
    "2sf": "2 s.f.",
    "3sf": "3 s.f.",
  };

  return (
    <div className="space-y-4">
      {/* Target tabs */}
      <div className="flex flex-wrap gap-2">
        {(["whole", "1dp", "2dp", "1sf", "2sf", "3sf"] as RoundTarget[]).map((t) => (
          <button
            key={t}
            onClick={() => {
              setTarget(t);
              reset();
            }}
            className={`rounded-full border-2 px-4 py-2 text-sm font-semibold transition-colors ${
              target === t
                ? "border-unit-2 bg-unit-2 text-white"
                : "border-unit-2/40 text-unit-2 hover:bg-unit-2-light"
            }`}
          >
            {targetLabels[t]}
          </button>
        ))}
      </div>

      {/* Input */}
      <Card>
        <p className="mb-3 text-xs font-bold uppercase tracking-wider text-unit-2">
          Enter a number
        </p>
        <div className="flex flex-wrap items-center gap-2.5">
          <input
            type="text"
            value={input}
            onChange={(e) => setInput(e.target.value)}
            onKeyDown={(e) => e.key === "Enter" && handleGo()}
            placeholder="e.g. 3.4567 or 0.00456"
            maxLength={18}
            autoComplete="off"
            className="max-w-[240px] rounded-lg border-2 border-border bg-surface px-3.5 py-2.5 text-lg font-medium outline-none transition-colors focus:border-unit-2"
          />
          <button
            onClick={handleGo}
            className="rounded-lg bg-unit-2 px-6 py-2.5 text-sm font-bold text-white transition-colors hover:bg-unit-2-dark"
          >
            Round →
          </button>
        </div>
        {error && <p className="mt-2 text-sm text-incorrect">{error}</p>}
      </Card>

      {/* Display */}
      <Card className="flex min-h-[220px] flex-col items-center justify-center gap-4 p-6">
        {!step ? (
          <p className="text-muted/50">
            Enter a number above and click <strong>Round</strong>
          </p>
        ) : (
          <>
            <p className="text-sm font-medium text-muted">{step.label}</p>
            <div className="flex flex-wrap items-end justify-center gap-2">
              {step.digits.map((d, i) => (
                <DigitBox key={i} {...d} />
              ))}
            </div>
            {/* Legend */}
            <div className="flex flex-wrap items-center justify-center gap-4 text-xs text-muted">
              <span className="flex items-center gap-1">
                <span className="inline-block h-3 w-3 rounded border-2 border-unit-2 bg-unit-2-light" />
                Target digit
              </span>
              <span className="flex items-center gap-1">
                <span className="inline-block h-3 w-3 rounded border-2 border-hint bg-hint-light" />
                Decider digit
              </span>
              <span className="flex items-center gap-1">
                <span className="inline-block h-3 w-3 rounded border-2 border-unit-4 bg-unit-4-light" />
                Significant
              </span>
              <span className="flex items-center gap-1">
                <span className="inline-block h-3 w-3 rounded border-2 border-border/40 bg-background" />
                Not significant
              </span>
            </div>
          </>
        )}
      </Card>

      {/* Controls */}
      <Card className="p-4">
        <StepControls
          currentStep={currentStep + 1}
          totalSteps={steps?.length ?? 0}
          isPlaying={isPlaying}
          onStepForward={stepForward}
          onStepBack={stepBack}
          onTogglePlay={togglePlay}
          onReset={reset}
          canStepForward={!!steps && !done}
          canStepBack={!!steps && currentStep > 0}
        />
      </Card>

      {/* Result */}
      <Card className="flex min-h-[80px] flex-col items-center justify-center gap-1.5 text-center">
        {!done || !step?.resultText ? (
          <p className="text-sm text-muted/40">Result will appear here when steps are complete</p>
        ) : (
          <>
            <p className="text-xs uppercase tracking-wider text-muted">Rounded Value</p>
            <p className="text-3xl font-extrabold text-foreground max-sm:text-2xl">
              {step.resultText}
            </p>
          </>
        )}
      </Card>
    </div>
  );
}