import type { 
  ScreenDefinition, 
  ScreenVariantDefinition, 
  ListOptionDefinition,
  NavigationConditionDefinition 
} from "@/lib/funnel/types";
import { formatOverridePath, listOverridePaths } from "@/lib/admin/builder/variants";
import { getOptionLabel } from "./utils";
import { OPERATOR_LABELS } from "./constants";

export interface VariantSummaryProps {
  screen: ScreenDefinition;
  screenTitleMap: Record<string, string>;
  listOptionsMap: Record<string, ListOptionDefinition[]>;
}

export function VariantSummary({
  screen,
  screenTitleMap,
  listOptionsMap,
}: VariantSummaryProps) {
  const variants = (
    screen as ScreenDefinition & {
      variants?: ScreenVariantDefinition<ScreenDefinition>[];
    }
  ).variants;

  if (!variants || variants.length === 0) {
    return null;
  }

  return (
    <div className="space-y-3">
      <div className="flex items-center gap-2">
        <span className="text-xs font-semibold uppercase text-muted-foreground">Варианты</span>
        <div className="h-px flex-1 bg-border/60" />
        <span className="text-[11px] uppercase text-muted-foreground/70">{variants.length}</span>
      </div>

      <div className="space-y-3">
        {variants.map((variant, index) => {
          const [condition] = variant.conditions ?? [];
          const controllingScreenId = condition?.screenId;
          const controllingScreenTitle = controllingScreenId
            ? screenTitleMap[controllingScreenId] ?? controllingScreenId
            : "Не выбрано";

          const options = controllingScreenId ? listOptionsMap[controllingScreenId] ?? [] : [];
          const optionSummaries = (condition?.optionIds ?? []).map((optionId) => ({
            id: optionId,
            label: getOptionLabel(options, optionId),
          }));

          const operatorKey = condition?.operator as
            | Exclude<NavigationConditionDefinition["operator"], undefined>
            | undefined;
          const operatorLabel = operatorKey ? OPERATOR_LABELS[operatorKey] ?? operatorKey : "includesAny";

          const overrideHighlights = listOverridePaths(variant.overrides ?? {});

          return (
            <div
              key={`${index}-${controllingScreenId ?? "none"}`}
              className="space-y-3 rounded-xl border border-primary/20 bg-primary/5 p-3"
            >
              <div className="flex items-center justify-between gap-3">
                <span className="text-xs font-semibold uppercase tracking-wide text-primary">Вариант {index + 1}</span>
                <span className="rounded-full bg-white/60 px-2 py-0.5 text-[10px] uppercase tracking-wide text-primary">
                  {operatorLabel}
                </span>
              </div>

              <div className="space-y-1 text-xs text-primary/90">
                <div>
                  <span className="font-semibold">Экран:</span> {controllingScreenTitle}
                </div>
                {optionSummaries.length > 0 ? (
                  <div className="flex flex-wrap gap-1.5">
                    {optionSummaries.map((option) => (
                      <span key={option.id} className="rounded-full bg-white/60 px-2 py-0.5 text-[11px] font-medium">
                        {option.label}
                      </span>
                    ))}
                  </div>
                ) : (
                  <div className="text-primary/70">Нет выбранных ответов</div>
                )}
              </div>

              <div className="space-y-1 text-xs text-primary/90">
                <span className="font-semibold">Изменяет:</span>
                <div className="flex flex-wrap gap-1.5">
                  {(overrideHighlights.length > 0 ? overrideHighlights : ["Без изменений"]).map((highlight) => (
                    <span
                      key={highlight}
                      className="rounded-lg bg-primary/10 px-2 py-0.5 text-[11px] font-medium text-primary"
                    >
                      {highlight === "Без изменений" ? highlight : formatOverridePath(highlight)}
                    </span>
                  ))}
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}
