"use client";

import { useState } from "react";
import { Breadcrumbs } from "@/components/layout/breadcrumbs";
import { QuaternaryToDenaryExplorer } from "@/components/explorers/quaternary-to-denary-explorer";
import { DenaryToQuaternaryExplorer } from "@/components/explorers/denary-to-quaternary-explorer";

type Mode = "quaternary-to-denary" | "denary-to-quaternary";

const MODES: { key: Mode; label: string }[] = [
  { key: "quaternary-to-denary", label: "Quaternary → Denary" },
  { key: "denary-to-quaternary", label: "Denary → Quaternary" },
];

export default function QuaternaryPage() {
  const [mode, setMode] = useState<Mode>("quaternary-to-denary");

  return (
    <div className="space-y-8">
      <Breadcrumbs
        items={[
          { label: "Lessons", href: "/lessons" },
          { label: "Unit 6: Number System", href: "/lessons/unit-6-number-system" },
          { label: "Quaternary" },
        ]}
      />

      <div>
        <h1 className="text-3xl font-bold tracking-tight">
          {mode === "quaternary-to-denary"
            ? "Quaternary → Denary Converter"
            : "Denary → Quaternary Converter"}
        </h1>
        <p className="mt-2 text-muted">
          {mode === "quaternary-to-denary"
            ? "Same shape, different base — explore place value in powers of 4."
            : "Divide by 4. Track the remainder. Read bottom-up."}
        </p>
      </div>

      <div className="flex flex-wrap gap-2">
        {MODES.map((m) => (
          <button
            key={m.key}
            onClick={() => setMode(m.key)}
            className={`rounded-full border-2 px-4 py-2 text-sm font-semibold transition-colors ${
              mode === m.key
                ? "border-unit-6 bg-unit-6 text-white"
                : "border-unit-6/40 text-unit-6 hover:bg-unit-6-light"
            }`}
          >
            {m.label}
          </button>
        ))}
      </div>

      {mode === "quaternary-to-denary" ? (
        <QuaternaryToDenaryExplorer />
      ) : (
        <DenaryToQuaternaryExplorer />
      )}
    </div>
  );
}