import React from "react";
import { Input } from "../ui/input";
import { Label } from "../ui/label";
import { Checkbox } from "../ui/checkbox";
import type { NutritionManualFieldSpec } from "../../lib/nutritionManualEntry";

function isTruthyNutritionFlag(raw: string): boolean {
  const v = String(raw ?? "").trim().toLowerCase();
  return v === "true" || v === "1" || v === "yes" || v === "on";
}

export function NutritionManualFieldControl({
  spec,
  value,
  onChange,
  inputClassName,
  showLabel = true,
}: {
  spec: NutritionManualFieldSpec;
  value: string;
  onChange: (next: string) => void;
  inputClassName?: string;
  showLabel?: boolean;
}) {
  if (spec.inputType === "checkbox") {
    return (
      <div className="flex items-center gap-2 min-h-10">
        <Checkbox
          id={`nut-${spec.subKey}`}
          checked={isTruthyNutritionFlag(value)}
          onCheckedChange={(checked) => onChange(checked ? "true" : "false")}
        />
        {showLabel ? (
          <Label htmlFor={`nut-${spec.subKey}`} className="text-sm font-normal cursor-pointer">
            {spec.columnLabel}
          </Label>
        ) : null}
      </div>
    );
  }

  return (
    <div className="space-y-1.5 w-full min-w-0">
      {showLabel ? <Label className="block">{spec.columnLabel}</Label> : null}
      <Input
        className={inputClassName ?? "h-10 w-full min-w-0 box-border"}
        value={value}
        onChange={(e) => onChange(e.target.value)}
        placeholder={`Enter ${spec.columnLabel}`}
      />
    </div>
  );
}