"use client";

import { useMemo } from "react";
import { AgeSelector } from "../forms/AgeSelector";
import { ZodiacSelector } from "../forms/ZodiacSelector";
import { EmailDomainSelector } from "../forms/EmailDomainSelector";
import type { NavigationConditionDefinition, ListOptionDefinition, DateScreenDefinition } from "@/lib/funnel/types";
import type { BuilderScreen } from "@/lib/admin/builder/types";

interface VariableMappingConditionEditorProps {
  condition: NavigationConditionDefinition;
  allScreens: BuilderScreen[];
  onChange: (condition: NavigationConditionDefinition) => void;
}

/**
 * Редактор условия для правила подстановки переменной
 * Переиспользует ту же логику что и VariantConditionEditor
 */
export function VariableMappingConditionEditor({
  condition,
  allScreens,
  onChange,
}: VariableMappingConditionEditorProps) {
  // Находим выбранный экран (может быть ID экрана или storageKey для zodiac)
  const selectedScreen = useMemo(() => {
    // Сначала ищем по ID экрана
    let screen = allScreens.find((s) => s.id === condition.screenId);
    if (screen) return screen;
    
    // Если не нашли, ищем date экран где storageKey === condition.screenId
    screen = allScreens.find((s) => {
      if (s.template === "date") {
        const dateScreen = s as DateScreenDefinition;
        const zodiacSettings = dateScreen.dateInput?.zodiac;
        return zodiacSettings?.enabled && zodiacSettings.storageKey?.trim() === condition.screenId;
      }
      return false;
    });
    
    return screen;
  }, [allScreens, condition.screenId]);

  // Определяем опции для условия (если это list экран)
  // Собираем опции из базового экрана + из всех вариантов
  const conditionOptions = useMemo<ListOptionDefinition[]>(() => {
    if (!selectedScreen || selectedScreen.template !== "list") {
      return [];
    }
    
    const listScreen = selectedScreen as BuilderScreen & { 
      template: "list"; 
      list: { options: ListOptionDefinition[] };
      variants?: Array<{ overrides?: { list?: { options?: ListOptionDefinition[] } } }>;
    };
    
    // Начинаем с базовых опций
    const optionsMap = new Map<string, ListOptionDefinition>();
    listScreen.list.options.forEach(opt => {
      optionsMap.set(opt.id, opt);
    });
    
    // Добавляем опции из всех вариантов
    if (listScreen.variants) {
      listScreen.variants.forEach(variant => {
        const variantOptions = variant.overrides?.list?.options;
        if (variantOptions) {
          variantOptions.forEach(opt => {
            // Проверяем что опция валидна (имеет id)
            if (opt && opt.id) {
              // Добавляем или переопределяем опцию
              optionsMap.set(opt.id, opt as ListOptionDefinition);
            }
          });
        }
      });
    }
    
    // Возвращаем все уникальные опции
    return Array.from(optionsMap.values());
  }, [selectedScreen]);

  // Определяем тип селектора на основе экрана
  const selectorType = useMemo(() => {
    if (!selectedScreen) return null;

    // Специальные селекторы по ID экрана
    if (selectedScreen.id === "zodiac-sign" || selectedScreen.id === "zodiac") {
      return "zodiac";
    }
    if (selectedScreen.id === "email") {
      return "email";
    }
    if (selectedScreen.id === "age" || selectedScreen.id === "crush-age" || selectedScreen.id === "current-partner-age") {
      return "age";
    }

    // Date экран с zodiac - проверяем что condition.screenId === storageKey
    if (selectedScreen.template === "date") {
      const dateScreen = selectedScreen as DateScreenDefinition;
      const zodiacSettings = dateScreen.dateInput?.zodiac;
      const storageKey = zodiacSettings?.storageKey?.trim();
      // Показываем zodiac селектор если:
      // 1. zodiac включен
      // 2. storageKey совпадает с condition.screenId
      if (zodiacSettings?.enabled && storageKey === condition.screenId) {
        return "zodiac";
      }
      if (selectedScreen.id.includes("age") || selectedScreen.id.includes("birth")) {
        return "age";
      }
    }

    // List экран
    if (selectedScreen.template === "list" && conditionOptions.length > 0) {
      return "list";
    }

    return null;
  }, [selectedScreen, conditionOptions.length, condition.screenId]);

  // Обработчики
  const handleToggleValue = (value: string) => {
    const currentValues = condition.values || [];
    const nextValues = currentValues.includes(value)
      ? currentValues.filter((v) => v !== value)
      : [...currentValues, value];
    onChange({ ...condition, values: nextValues });
  };

  const handleAddCustomValue = (value: string) => {
    const currentValues = condition.values || [];
    if (!currentValues.includes(value)) {
      onChange({ ...condition, values: [...currentValues, value] });
    }
  };

  return (
    <div className="space-y-3">
      {/* Выбор экрана */}
      <div>
        <label className="block text-sm font-medium text-muted-foreground mb-1">
          Экран
        </label>
        <select
          value={condition.screenId}
          onChange={(e) => onChange({ ...condition, screenId: e.target.value, values: [] })}
          className="w-full h-9 rounded-md border border-border bg-background px-3 text-sm"
        >
          {allScreens.flatMap((screen) => {
            const options = [];
            
            // Для date экранов с zodiac добавляем отдельную опцию для storageKey
            if (screen.template === "date") {
              const dateScreen = screen as DateScreenDefinition;
              const zodiacSettings = dateScreen.dateInput?.zodiac;
              const storageKey = zodiacSettings?.storageKey?.trim();
              if (zodiacSettings?.enabled && storageKey) {
                options.push(
                  <option key={`${screen.id}-zodiac`} value={storageKey}>
                    {screen.id} (zodiac → {storageKey})
                  </option>
                );
              }
            }
            
            // Обычный экран (всегда)
            options.push(
              <option key={screen.id} value={screen.id}>
                {screen.id} ({screen.template})
              </option>
            );
            
            return options;
          })}
        </select>
      </div>

      {/* Оператор (только для list экранов с несколькими опциями) */}
      {selectorType === "list" && conditionOptions.length > 1 && (
        <div>
          <label className="block text-sm font-medium text-muted-foreground mb-1">
            Оператор
          </label>
          <select
            value={condition.operator || "includesAny"}
            onChange={(e) =>
              onChange({
                ...condition,
                operator: e.target.value as "includesAny" | "includesAll",
              })
            }
            className="w-full h-9 rounded-md border border-border bg-background px-3 text-sm"
          >
            <option value="includesAny">Любое из (OR)</option>
            <option value="includesAll">Все из (AND)</option>
          </select>
        </div>
      )}

      {/* Zodiac Selector */}
      {selectorType === "zodiac" && (
        <div>
          <label className="block text-sm font-medium text-muted-foreground mb-1">
            Знаки зодиака
          </label>
          <ZodiacSelector
            selectedValues={condition.values || []}
            onToggleValue={handleToggleValue}
            onAddCustomValue={handleAddCustomValue}
          />
        </div>
      )}

      {/* Email Domain Selector */}
      {selectorType === "email" && (
        <div>
          <label className="block text-sm font-medium text-muted-foreground mb-1">
            Email домены
          </label>
          <EmailDomainSelector
            selectedValues={condition.values || []}
            onToggleValue={handleToggleValue}
            onAddCustomValue={handleAddCustomValue}
          />
        </div>
      )}

      {/* Age Selector */}
      {selectorType === "age" && (
        <div>
          <label className="block text-sm font-medium text-muted-foreground mb-1">
            Возраст
          </label>
          <AgeSelector
            selectedValues={condition.values || []}
            onToggleValue={handleToggleValue}
            onAddCustomValue={handleAddCustomValue}
          />
        </div>
      )}

      {/* Опции для обычных list экранов */}
      {selectorType === "list" && (
        <div>
          <label className="block text-sm font-medium text-muted-foreground mb-1">
            Значения
          </label>
          <div className="space-y-1 max-h-48 overflow-y-auto border border-border rounded-md p-2">
            {conditionOptions.map((opt) => (
              <label
                key={opt.id}
                className="flex items-center gap-2 p-2 rounded hover:bg-muted/50 cursor-pointer"
              >
                <input
                  type="checkbox"
                  checked={(condition.values || []).includes(opt.id)}
                  onChange={() => handleToggleValue(opt.id)}
                  className="rounded border-border"
                />
                <span className="text-sm">
                  {opt.emoji && <span className="mr-1">{opt.emoji}</span>}
                  {opt.label}
                </span>
              </label>
            ))}
          </div>
        </div>
      )}

      {/* Если тип экрана не поддерживается */}
      {!selectorType && selectedScreen && (
        <div className="text-sm text-muted-foreground bg-muted/30 rounded-lg p-3">
          ⚠️ Экран <strong>{selectedScreen.template}</strong> не поддерживает автоматический выбор значений.
          Выберите другой экран (list, date с zodiac, age, email).
        </div>
      )}
    </div>
  );
}
