"use client";

import { cn } from "@/lib/utils";

interface FractionInputProps {
  numerator: string;
  denominator: string;
  onNumeratorChange: (value: string) => void;
  onDenominatorChange: (value: string) => void;
  disabled?: boolean;
  className?: string;
}

export function FractionInput({
  numerator,
  denominator,
  onNumeratorChange,
  onDenominatorChange,
  disabled = false,
  className,
}: FractionInputProps) {
  return (
    <div className={cn("inline-flex flex-col items-center gap-0.5", className)}>
      <input
        type="text"
        inputMode="numeric"
        pattern="[0-9-]*"
        value={numerator}
        onChange={(e) => onNumeratorChange(e.target.value)}
        disabled={disabled}
        className="w-16 rounded-lg border border-border bg-surface px-2 py-1.5 text-center text-lg font-bold focus:border-unit-1 focus:outline-none"
        placeholder="?"
        aria-label="Numerator"
      />
      <div className="h-0.5 w-16 bg-foreground" />
      <input
        type="text"
        inputMode="numeric"
        pattern="[0-9-]*"
        value={denominator}
        onChange={(e) => onDenominatorChange(e.target.value)}
        disabled={disabled}
        className="w-16 rounded-lg border border-border bg-surface px-2 py-1.5 text-center text-lg font-bold focus:border-unit-1 focus:outline-none"
        placeholder="?"
        aria-label="Denominator"
      />
    </div>
  );
}

interface DecimalInputProps {
  value: string;
  onChange: (value: string) => void;
  disabled?: boolean;
  className?: string;
}

export function DecimalInput({ value, onChange, disabled, className }: DecimalInputProps) {
  return (
    <input
      type="text"
      inputMode="decimal"
      value={value}
      onChange={(e) => onChange(e.target.value)}
      disabled={disabled}
      className={cn(
        "w-28 rounded-lg border border-border bg-surface px-3 py-2 text-center text-lg font-bold focus:border-unit-2 focus:outline-none",
        className,
      )}
      placeholder="?"
      aria-label="Answer"
    />
  );
}

interface RatioInputProps {
  parts: string[];
  onChange: (index: number, value: string) => void;
  disabled?: boolean;
  className?: string;
}

export function RatioInput({ parts, onChange, disabled, className }: RatioInputProps) {
  return (
    <div className={cn("inline-flex items-center gap-1", className)}>
      {parts.map((p, i) => (
        <span key={i} className="flex items-center gap-1">
          {i > 0 && <span className="text-lg font-bold text-muted">:</span>}
          <input
            type="text"
            inputMode="numeric"
            pattern="[0-9]*"
            value={p}
            onChange={(e) => onChange(i, e.target.value)}
            disabled={disabled}
            className="w-14 rounded-lg border border-border bg-surface px-2 py-2 text-center text-lg font-bold focus:border-unit-4 focus:outline-none"
            placeholder="?"
            aria-label={`Part ${i + 1}`}
          />
        </span>
      ))}
    </div>
  );
}