"use client";

import { AnimatePresence, motion } from "framer-motion";
import { cn } from "@/lib/utils";
import type { VariableState } from "@/lib/visualizations/types";

interface VariableInspectorProps {
  variables: VariableState[];
  className?: string;
}

export function VariableInspector({
  variables,
  className,
}: VariableInspectorProps) {
  return (
    <div
      className={cn(
        "h-40 overflow-y-auto rounded-lg border border-[var(--border)] bg-[var(--card)] p-4",
        className
      )}
    >
      <div className="mb-3 text-xs font-medium uppercase tracking-wide text-[var(--muted-foreground)]">
        Variables
      </div>
      <div className="flex min-h-10 flex-wrap gap-3">
        <AnimatePresence mode="popLayout">
          {variables.length === 0 && (
            <span className="text-sm text-[var(--muted-foreground)]/50">
              No variables yet
            </span>
          )}
          {variables.map((variable) => (
            <motion.div
              key={variable.id}
              layout
              initial={{ opacity: 0, scale: 0.9 }}
              animate={{ opacity: 1, scale: 1 }}
              exit={{ opacity: 0, scale: 0.9 }}
              className="flex items-center gap-2 rounded-md border border-[var(--border)] bg-[var(--muted)] px-3 py-2"
            >
              <span className="font-mono text-sm text-[var(--muted-foreground)]">
                {variable.name}
              </span>
              <span className="text-[var(--muted-foreground)]">=</span>
              <motion.span
                key={`${variable.id}-${variable.value}`}
                initial={{ scale: 1.2, color: "var(--primary)" }}
                animate={{ scale: 1, color: "var(--foreground)" }}
                transition={{ duration: 0.3 }}
                className="font-mono text-sm font-medium"
              >
                {String(variable.value)}
              </motion.span>
              {variable.previousValue !== undefined &&
                variable.previousValue !== variable.value && (
                  <span className="ml-1 text-xs text-[var(--muted-foreground)] line-through">
                    {String(variable.previousValue)}
                  </span>
                )}
              {variable.derivation && (
                <span className="ml-1 text-xs text-[var(--muted-foreground)]">
                  ({variable.derivation})
                </span>
              )}
            </motion.div>
          ))}
        </AnimatePresence>
      </div>
    </div>
  );
}
