import React from "react";
import type { ParamDef } from "../scenarios/types";

interface ParamControlsProps<P extends Record<string, number>> {
  paramsDef: Record<keyof P, ParamDef<P>>;
  values: P;
  onChange: (key: keyof P, value: number) => void;
  onReset: () => void;
}

export function ParamControls<P extends Record<string, number>>({
  paramsDef,
  values,
  onChange,
  onReset,
}: ParamControlsProps<P>): React.JSX.Element {
  const paramKeys = (Object.keys(paramsDef) as (keyof P)[]).filter((key) => {
    const spec = paramsDef[key];
    if (!spec) return false;
    if (spec.hidden) return false;
    if (spec.visibleWhen && !spec.visibleWhen(values)) return false;
    return true;
  });

  return (
    <div className="rounded-xl border border-slate-200 bg-white p-4 shadow-xs">
      <div className="mb-3 flex items-center justify-between border-b border-slate-100 pb-2">
        <h4 className="text-xs font-bold uppercase tracking-wider text-slate-700">
          Điều khiển thông số mô phỏng
        </h4>
        <button
          type="button"
          onClick={onReset}
          className="rounded-md border border-slate-200 bg-slate-50 px-2.5 py-1 text-xs font-semibold text-slate-600 transition-colors hover:bg-slate-100 hover:text-slate-900"
        >
          Đặt lại mặc định
        </button>
      </div>

      <div className="space-y-4">
        {paramKeys.map((key) => {
          const def = paramsDef[key];
          const val = values[key] ?? def.default;

          return (
            <div key={String(key)} className="space-y-1.5">
              <div className="flex items-center justify-between text-xs">
                <label
                  htmlFor={`param-${String(key)}`}
                  className="font-semibold text-slate-700"
                >
                  {def.label}
                  {def.symbol && (
                    <span className="ml-1 text-slate-500 font-normal">
                      ({def.symbol})
                    </span>
                  )}
                </label>
                <span className="rounded-md bg-indigo-50 px-2 py-0.5 font-mono font-bold text-indigo-700">
                  {val} {def.unit ?? ""}
                </span>
              </div>

              <input
                id={`param-${String(key)}`}
                type="range"
                min={def.min}
                max={def.max}
                step={def.step}
                value={val}
                onChange={(e) => onChange(key, parseFloat(e.target.value))}
                className="w-full accent-indigo-600 cursor-pointer h-2 bg-slate-200 rounded-lg"
              />

              {def.marks && def.marks.length > 0 ? (
                <div className="flex justify-between text-[10px] text-slate-400 font-medium px-0.5">
                  {def.marks.map((m, idx) => (
                    <span key={idx} className="text-center">
                      {m.label}
                    </span>
                  ))}
                </div>
              ) : (
                <div className="flex justify-between text-[10px] text-slate-400 font-mono px-0.5">
                  <span>
                    Min: {def.min} {def.unit ?? ""}
                  </span>
                  <span>
                    Mặc định: {def.default} {def.unit ?? ""}
                  </span>
                  <span>
                    Max: {def.max} {def.unit ?? ""}
                  </span>
                </div>
              )}

              {def.description && (
                <p className="text-[11px] text-slate-500 mt-1">
                  {def.description}
                </p>
              )}
            </div>
          );
        })}
      </div>
    </div>
  );
}