"use client";

import { Input } from "@/components/ui/input";
import type { NavigationConditionDefinition } from "@/lib/funnel/types";

interface UnleashConditionEditorProps {
  condition: NavigationConditionDefinition;
  onChange: (condition: NavigationConditionDefinition) => void;
}

/**
 * Редактор для Unleash AB тестов
 * Позволяет настроить флаг и ожидаемые варианты
 */
export function UnleashConditionEditor({
  condition,
  onChange,
}: UnleashConditionEditorProps) {
  const unleashFlag = condition.unleashFlag ?? "";
  const unleashVariants = condition.unleashVariants ?? [];
  const operator = condition.operator ?? "includesAny";

  const handleFlagChange = (newFlag: string) => {
    onChange({
      ...condition,
      unleashFlag: newFlag,
    });
  };

  const handleVariantsChange = (variantsStr: string) => {
    // Парсим строку вариантов: "v1,v2,v3" -> ["v1", "v2", "v3"]
    const variants = variantsStr
      .split(",")
      .map((v) => v.trim())
      .filter((v) => v.length > 0);

    onChange({
      ...condition,
      unleashVariants: variants,
    });
  };

  const handleOperatorChange = (
    newOperator: "includesAny" | "includesAll" | "includesExactly" | "equals"
  ) => {
    onChange({
      ...condition,
      operator: newOperator,
    });
  };

  return (
    <div className="space-y-3">
      {/* Название флага */}
      <div className="space-y-1">
        <label className="text-xs font-medium text-muted-foreground">
          Название флага
        </label>
        <Input
          type="text"
          value={unleashFlag}
          onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleFlagChange(e.target.value)}
          placeholder="trial-button-test"
          className="text-sm"
        />
        <p className="text-xs text-muted-foreground">
          Название Unleash feature flag
        </p>
      </div>

      {/* Оператор */}
      <div className="space-y-1">
        <label className="text-xs font-medium text-muted-foreground">
          Условие проверки
        </label>
        <select
          value={operator}
          onChange={(e) =>
            handleOperatorChange(
              e.target.value as
                | "includesAny"
                | "includesAll"
                | "includesExactly"
                | "equals"
            )
          }
          className="w-full rounded-lg border border-border bg-background px-3 py-2 text-sm"
        >
          <option value="includesAny">Любой из вариантов (OR)</option>
          <option value="includesAll">Все варианты (AND)</option>
          <option value="includesExactly">Точно эти варианты</option>
          <option value="equals">Равен (один вариант)</option>
        </select>
      </div>

      {/* Варианты */}
      <div className="space-y-1">
        <label className="text-xs font-medium text-muted-foreground">
          Ожидаемые варианты
        </label>
        <Input
          type="text"
          value={unleashVariants.join(", ")}
          onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleVariantsChange(e.target.value)}
          placeholder="v1, v2, v3"
          className="text-sm"
        />
        <p className="text-xs text-muted-foreground">
          Через запятую: v0, v1, v2
        </p>
      </div>

      {/* Подсказка */}
      <div className="rounded-lg bg-blue-50 p-3 text-xs text-blue-900">
        <strong>Пример:</strong> Флаг &quot;trial-button-test&quot; с вариантами &quot;v1, v2&quot;
        будет активен если пользователь в группе v1 или v2
      </div>
    </div>
  );
}
