// engine/design-to-spec/ui-contract-builder.ts — Build UI contract markdown from parsed design (SPEC-159)
import { getA11yRequirementsForComponent } from './ac-generator.js';
// ---------------------------------------------------------------------------
// Formatters
// ---------------------------------------------------------------------------
/** Format a component prop table in markdown */
function formatPropsTable(component) {
    if (component.props.length === 0) {
        return '_No props defined_\n';
    }
    const rows = component.props.map((p) => `| \`${p.name}\` | \`${p.type}\` | ${p.required ? 'Yes' : 'No'} | ${p.description} |`);
    return [
        '| Prop | Type | Required | Description |',
        '|------|------|----------|-------------|',
        ...rows,
    ].join('\n');
}
/** Format interaction states as a markdown list */
function formatInteractionStates(component) {
    if (component.interactionStates.length === 0) {
        return '_No interaction states defined_\n';
    }
    return component.interactionStates
        .map((s) => `- **${s.name}**: ${s.trigger} → ${s.visualChange}`)
        .join('\n');
}
/** Format a11y requirements for a component */
function formatA11yRequirements(component) {
    const reqs = getA11yRequirementsForComponent(component.type);
    if (reqs.length === 0) {
        return '_No specific a11y requirements_\n';
    }
    return reqs.map((r) => `- ${r}`).join('\n');
}
/**
 * Format a breakpoints markdown table.
 * Exported so spec-builder.ts can reuse it for the top-level responsive section.
 */
export function formatBreakpointsTable(breakpoints) {
    if (breakpoints.length === 0) {
        return '_No breakpoints defined_\n';
    }
    const rows = breakpoints.map((b) => `| ${b.name} | ${b.minWidth}px | ${b.maxWidth !== undefined ? `${b.maxWidth}px` : '∞'} | ${b.description} |`);
    return [
        '| Breakpoint | Min Width | Max Width | Description |',
        '|-----------|-----------|-----------|-------------|',
        ...rows,
    ].join('\n');
}
/** Format data bindings as markdown list */
function formatDataBindings(screen) {
    if (screen.dataBindings.length === 0) {
        return '_No data bindings defined_\n';
    }
    return screen.dataBindings
        .map((b) => `- **${b.dataSource}** → \`${b.componentId}\`\n` +
        `  - Mapping: ${b.fieldMapping}\n` +
        (b.loadingState ? `  - Loading: ${b.loadingState}\n` : '') +
        (b.errorState ? `  - Error: ${b.errorState}\n` : ''))
        .join('\n');
}
// ---------------------------------------------------------------------------
// Component section builder
// ---------------------------------------------------------------------------
function buildComponentSection(component, depth) {
    const heading = '#'.repeat(Math.min(depth + 3, 6));
    const lines = [
        `${heading} ${component.name}`,
        '',
        `**Type**: \`${component.type}\``,
        '',
        `**Description**: ${component.description}`,
        '',
        '**Props:**',
        '',
        formatPropsTable(component),
        '',
        '**Interaction States:**',
        '',
        formatInteractionStates(component),
        '',
        '**Accessibility:**',
        '',
        formatA11yRequirements(component),
        '',
    ];
    // Recurse into children
    if (component.children.length > 0) {
        lines.push(`**Children (${component.children.length}):**`, '');
        for (const child of component.children) {
            lines.push(buildComponentSection(child, depth + 1));
        }
    }
    return lines.join('\n');
}
// ---------------------------------------------------------------------------
// Screen section builder
// ---------------------------------------------------------------------------
function buildScreenSection(screen) {
    const lines = [
        `### ${screen.name}`,
        '',
        `**Description**: ${screen.description}`,
        '',
        screen.route ? `**Route**: \`${screen.route}\`` : '**Route**: _TBD_',
        '',
        '**Responsive Breakpoints:**',
        '',
        formatBreakpointsTable(screen.breakpoints),
        '',
        '**Data Bindings:**',
        '',
        formatDataBindings(screen),
        '',
        '**Components:**',
        '',
    ];
    if (screen.components.length === 0) {
        lines.push('_No components defined_', '');
    }
    else {
        for (const component of screen.components) {
            lines.push(buildComponentSection(component, 1));
        }
    }
    return lines.join('\n');
}
// ---------------------------------------------------------------------------
// Public API
// ---------------------------------------------------------------------------
/**
 * Builds a complete UI Contract markdown document from a ParsedDesign.
 * The contract covers: component hierarchy, props, interaction states,
 * data bindings, responsive breakpoints, and a11y requirements.
 */
export function buildUiContract(design) {
    const lines = [
        '## UI Contract',
        '',
        `> Generated from design description for **${design.title}** (platform: ${design.platform})`,
        '',
        '### Global Components',
        '',
    ];
    if (design.globalComponents.length === 0) {
        lines.push('_No global components identified_', '');
    }
    else {
        for (const comp of design.globalComponents) {
            lines.push(buildComponentSection(comp, 0));
        }
    }
    lines.push('### Screens', '');
    for (const screen of design.screens) {
        lines.push(buildScreenSection(screen), '');
    }
    if (design.designTokens.length > 0) {
        lines.push('### Design Tokens', '', '| Name | Category | Value |', '|------|----------|-------|', ...design.designTokens.map((t) => `| ${t.name} | ${t.category} | \`${t.value}\` |`), '');
    }
    return lines.join('\n');
}
/**
 * Generates a concise component tree summary for the spec description section.
 */
export function buildComponentTreeSummary(screens) {
    const lines = [];
    for (const screen of screens) {
        lines.push(`- **${screen.name}** (${screen.components.length} components)`);
        for (const comp of screen.components) {
            lines.push(`  - ${comp.name} (\`${comp.type}\`)`);
        }
    }
    return lines.join('\n');
}
//# sourceMappingURL=ui-contract-builder.js.map