import type { DynamicConfig, GlobalConfig, ErrorType } from "../types";
import { ERROR_TYPES } from "../types";
import { Toggle } from "./Toggle";

interface Props {
  config: DynamicConfig | null;
  onUpdate: (updates: Partial<GlobalConfig>) => void;
}

export function FailureModes({ config, onUpdate }: Props) {
  if (!config) {
    return (
      <div className="rounded-lg border border-gray-700 bg-gray-800 p-3">
        <h2 className="mb-2 text-sm font-medium">Failure Injection</h2>
        <div className="text-xs text-gray-500">Waiting for config...</div>
      </div>
    );
  }

  const { global } = config;
  const errorRate = global.errorRate;
  const errorTypes = global.errorTypes || [];
  const streamInterruptRate = global.streamInterruptRate || 0;
  const loadDegradationEnabled = global.loadDegradationEnabled || false;
  const loadDegradationFactor = global.loadDegradationFactor || 2.0;

  const toggleErrorType = (type: ErrorType) => {
    const newTypes = errorTypes.includes(type)
      ? errorTypes.filter((t) => t !== type)
      : [...errorTypes, type];
    onUpdate({ errorTypes: newTypes });
  };

  return (
    <div className="rounded-lg border border-gray-700 bg-gray-800 p-3">
      <h2 className="mb-2 text-sm font-medium">Failure Injection</h2>
      <div className="space-y-2">
        <div>
          <div className="mb-0.5 flex justify-between text-xs">
            <span className="text-gray-500">Error Rate</span>
            <span className="font-mono text-gray-300">
              {Math.round(errorRate * 100)}%
            </span>
          </div>
          <input
            type="range"
            min={0}
            max={100}
            step={5}
            value={errorRate * 100}
            onChange={(e) =>
              onUpdate({ errorRate: Number(e.target.value) / 100 })
            }
            className="h-1.5 w-full cursor-pointer appearance-none rounded bg-gray-700 accent-red-500"
          />
        </div>

        {errorRate > 0 && (
          <div className="flex flex-wrap gap-1">
            {ERROR_TYPES.map(({ id, label }) => (
              <ErrorTypeButton
                key={id}
                label={label}
                active={errorTypes.includes(id)}
                onClick={() => toggleErrorType(id)}
              />
            ))}
          </div>
        )}

        <div>
          <div className="mb-0.5 flex justify-between text-xs">
            <span className="text-gray-500">Stream Interrupt Rate</span>
            <span className="font-mono text-gray-300">
              {Math.round(streamInterruptRate * 100)}%
            </span>
          </div>
          <input
            type="range"
            min={0}
            max={100}
            step={5}
            value={streamInterruptRate * 100}
            onChange={(e) =>
              onUpdate({ streamInterruptRate: Number(e.target.value) / 100 })
            }
            className="h-1.5 w-full cursor-pointer appearance-none rounded bg-gray-700 accent-orange-500"
          />
        </div>

        <div className="border-t border-gray-700 pt-2">
          <div className="flex items-center justify-between">
            <span className="text-xs text-gray-500">Load Degradation</span>
            <Toggle
              enabled={loadDegradationEnabled}
              onChange={(enabled) =>
                onUpdate({ loadDegradationEnabled: enabled })
              }
              color="purple"
            />
          </div>
          {loadDegradationEnabled && (
            <div className="mt-1">
              <div className="mb-0.5 flex justify-between text-xs">
                <span className="text-gray-500">Max Slowdown Factor</span>
                <span className="font-mono text-gray-300">
                  {loadDegradationFactor.toFixed(1)}x
                </span>
              </div>
              <input
                type="range"
                min={1}
                max={10}
                step={0.5}
                value={loadDegradationFactor}
                onChange={(e) =>
                  onUpdate({ loadDegradationFactor: Number(e.target.value) })
                }
                className="h-1.5 w-full cursor-pointer appearance-none rounded bg-gray-700 accent-purple-500"
              />
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

function ErrorTypeButton({
  label,
  active,
  onClick,
}: {
  label: string;
  active: boolean;
  onClick: () => void;
}) {
  return (
    <button
      onClick={onClick}
      className={`rounded px-1.5 py-0.5 text-xs transition-colors ${active ? "bg-red-600 text-white" : "bg-gray-700 text-gray-400 hover:bg-gray-600"}`}
    >
      {label}
    </button>
  );
}
