import { ElementorElement, GenerationResult } from '../types/elementor';
import { getVersionDefinition, getLatestVersion, VersionDefinition } from './versionRegistry';

// Adapt a generated template to a specific target version.
// Currently handles the main structural difference: container vs section/column layout.
export function adaptToVersion(
  result: GenerationResult,
  targetVersion: string
): GenerationResult {
  const def = getVersionDefinition(targetVersion) ?? getLatestVersion();
  const currentDef = getVersionDefinition(result.targetVersion) ?? getLatestVersion();

  if (def.version === currentDef.version) return result;

  const warnings = [...result.warnings];
  let content = result.template.content;

  // Downgrade: containers → sections/columns
  if (!def.useContainers && currentDef.useContainers) {
    content = content.map((el) => downgradeContainerToSection(el, warnings));
    warnings.push(
      `Target version ${targetVersion} does not support Flexbox Containers. ` +
        'Layout was converted to legacy Section → Column structure. ' +
        'Some flex alignment settings may be lost.'
    );
  }

  // Upgrade: sections/columns → containers (no structural change needed, containers are additive)

  // Remove features unsupported by the target version
  if (!def.features.loopGrid) {
    const removed = removeWidgetType(content, 'loop-grid');
    if (removed.count > 0) {
      warnings.push(`loop-grid widget removed: not supported in v${targetVersion}.`);
      content = removed.content;
    }
  }

  if (!def.features.atomicForms) {
    for (const type of ['form', 'atomic-form']) {
      const removed = removeWidgetType(content, type);
      if (removed.count > 0) {
        warnings.push(`${type} widget removed: Atomic Forms require v4.0.0+.`);
        content = removed.content;
      }
    }
  }

  if (!def.features.components) {
    const removed = removeWidgetType(content, 'global-widget');
    if (removed.count > 0) {
      warnings.push(`Components (global-widget) removed: not supported before v4.0.0.`);
      content = removed.content;
    }
  }

  return {
    ...result,
    targetVersion,
    template: { ...result.template, content },
    warnings,
    metadata: {
      ...result.metadata,
      usesContainers: def.useContainers,
    },
  };
}

export function validateAgainstVersion(
  result: GenerationResult,
  versionDef: VersionDefinition
): string[] {
  const issues: string[] = [];

  if (!versionDef.useContainers) {
    const hasContainers = result.template.content.some((el) => el.elType === 'container');
    if (hasContainers) {
      issues.push(`Containers are not supported in v${versionDef.version}. Use the version adapter to downgrade.`);
    }
  }

  return issues;
}

function downgradeContainerToSection(
  el: ElementorElement,
  warnings: string[]
): ElementorElement {
  if (el.elType !== 'container') {
    return {
      ...el,
      elements: el.elements.map((child) => downgradeContainerToSection(child, warnings)),
    };
  }

  // Convert container → section with single full-width column
  const settings = el.settings as Record<string, unknown>;

  const sectionSettings: Record<string, unknown> = {
    layout: 'boxed',
    structure: '10',
    padding: settings.padding ?? {
      top: '60', right: '0', bottom: '60', left: '0', unit: 'px', isLinked: false,
    },
    background_color: settings.background_color,
    background_background: settings.background_background,
    background_image: settings.background_image,
  };

  // Wrap child widgets into a single column
  const column: ElementorElement = {
    id: generateId(),
    elType: 'column',
    settings: { _column_size: 100, content_position: 'top' },
    elements: el.elements.map((child) =>
      child.elType === 'container'
        ? downgradeContainerToSection(child, warnings)
        : child
    ),
    isInner: false,
  };

  return {
    id: el.id,
    elType: 'section',
    settings: sectionSettings,
    elements: [column],
    isInner: false,
  };
}

function removeWidgetType(
  content: ElementorElement[],
  widgetType: string
): { content: ElementorElement[]; count: number } {
  let count = 0;
  const filtered = content
    .filter((el) => {
      if (el.elType === 'widget' && el.widgetType === widgetType) {
        count++;
        return false;
      }
      return true;
    })
    .map((el) => {
      const result = removeWidgetType(el.elements, widgetType);
      count += result.count;
      return { ...el, elements: result.content };
    });
  return { content: filtered, count };
}

function generateId(): string {
  return Math.random().toString(36).substring(2, 10);
}