import type { Settings, ZElement } from './types';
import { createElement } from './document';

/**
 * Section structures: the column layouts offered by the "+" between sections and by the container's
 * Structure control. A structure is a list of column widths in percent; `1` means a plain section with
 * no inner columns.
 */
export interface StructurePreset {
  id: string;
  label: string;
  /** Column widths in percent (sum ≈ 100). Empty = no columns. */
  columns: number[];
}

/** Twelve presets: a 4×3 grid in the picker. */
export const STRUCTURES: StructurePreset[] = [
  { id: '1', label: '1 column', columns: [] },
  { id: '2', label: '2 columns', columns: [50, 50] },
  { id: '3', label: '3 columns', columns: [33.33, 33.34, 33.33] },
  { id: '4', label: '4 columns', columns: [25, 25, 25, 25] },
  { id: '1-2', label: '⅓ + ⅔', columns: [33.33, 66.67] },
  { id: '2-1', label: '⅔ + ⅓', columns: [66.67, 33.33] },
  { id: '1-3', label: '¼ + ¾', columns: [25, 75] },
  { id: '3-1', label: '¾ + ¼', columns: [75, 25] },
  { id: '1-2-1', label: '¼ + ½ + ¼', columns: [25, 50, 25] },
  { id: '1-1-2', label: '¼ + ¼ + ½', columns: [25, 25, 50] },
  { id: '2-1-1', label: '½ + ¼ + ¼', columns: [50, 25, 25] },
  { id: '5', label: '5 columns', columns: [20, 20, 20, 20, 20] },
];

export function getStructure(id: string): StructurePreset | undefined {
  return STRUCTURES.find((s) => s.id === id);
}

/** Settings that turn a container into a horizontal section row (stacked on mobile). */
export function sectionRowSettings(hasColumns: boolean): Settings {
  return hasColumns
    ? { direction: 'row', align: 'stretch', wrap: 'nowrap', 'direction@mobile': 'column' }
    : { direction: 'column' };
}

/** Settings for one column of a section. */
export function columnSettings(percent: number): Settings {
  return {
    direction: 'column',
    _width: { size: round2(percent), unit: '%' },
    '_width@mobile': { size: 100, unit: '%' },
  };
}

/** Builds one column container for a section. */
export function buildColumn(percent: number, base: Settings = {}): ZElement {
  return createElement('container', { ...base, ...columnSettings(percent) });
}

/** Builds a fresh section element (container with optional column containers) for a preset. */
export function buildSection(preset: StructurePreset, base: Settings = {}, columnBase: Settings = {}): ZElement {
  const section = createElement('container', { ...base, ...sectionRowSettings(preset.columns.length > 0) });
  section.children = preset.columns.map((pct) => createElement('container', { ...columnBase, ...columnSettings(pct) }));
  return section;
}

/** Which preset (if any) matches a container's current column widths. */
export function detectStructure(children: ZElement[]): string | null {
  if (!children.length) return '1';
  if (children.some((c) => c.type !== 'container')) return null;
  const widths = children.map((c) => {
    const w = c.settings._width as { size?: number | string; unit?: string } | undefined;
    return w && w.unit === '%' && w.size !== '' && w.size !== undefined ? Number(w.size) : NaN;
  });
  if (widths.some((w) => Number.isNaN(w))) return null;
  for (const s of STRUCTURES) {
    if (s.columns.length !== widths.length) continue;
    if (s.columns.every((pct, i) => Math.abs(pct - widths[i]) < 1)) return s.id;
  }
  return null;
}

function round2(n: number): number {
  return Math.round(n * 100) / 100;
}