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

interface PresetBarProps<P extends Record<string, number>> {
  presets?: Record<string, PresetDef<P>>;
  currentValues: P;
  onSelectPreset: (preset: PresetDef<P>) => void;
}

export function PresetBar<P extends Record<string, number>>({
  presets,
  currentValues,
  onSelectPreset,
}: PresetBarProps<P>): React.JSX.Element | null {
  if (!presets || Object.keys(presets).length === 0) return null;

  const presetList = Object.values(presets);

  return (
    <div className="rounded-xl border border-slate-200 bg-white p-3 shadow-xs">
      <div className="flex flex-col gap-2 sm:flex-row sm:items-center">
        <span className="text-xs font-bold uppercase tracking-wider text-slate-500 whitespace-nowrap">
          Kịch bản mẫu:
        </span>
        <div className="flex flex-wrap items-center gap-2">
          {presetList.map((preset) => {
            const isMatch = Object.keys(preset.params).every((k) => {
              const expected = preset.params[k];
              const actual = currentValues[k];
              return actual !== undefined && Math.abs(expected - actual) < 1e-4;
            });

            return (
              <button
                key={preset.id}
                type="button"
                onClick={() => onSelectPreset(preset)}
                className={`flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-xs font-semibold transition-all border ${
                  isMatch
                    ? "border-indigo-600 bg-indigo-600 text-white shadow-xs"
                    : "border-slate-200 bg-slate-50 text-slate-700 hover:border-slate-300 hover:bg-slate-100"
                }`}
              >
                <span>{preset.label}</span>
                {preset.badge && (
                  <span
                    className={`rounded px-1.5 py-0.2 text-[10px] font-bold ${
                      isMatch
                        ? "bg-indigo-700 text-indigo-100"
                        : "bg-slate-200 text-slate-600"
                    }`}
                  >
                    {preset.badge}
                  </span>
                )}
              </button>
            );
          })}
        </div>
      </div>
    </div>
  );
}