// tools/define-ui-contract-web/component-tree.ts — Component tree generation for web frontends
export function toPascalCase(str) {
    return str
        .split(/[-_\s]+/)
        .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
        .join('');
}
// -- Component tree generation ------------------------------------------------
export function generateComponentTree(screenNames, specContent, knowledge) {
    const framework = knowledge.framework ?? 'react';
    const isReact = framework.toLowerCase().includes('react') || framework.toLowerCase().includes('next');
    return screenNames.map((screenName) => {
        const children = generateScreenComponents(screenName, specContent, isReact);
        return {
            name: `${toPascalCase(screenName)}Page`,
            type: isReact ? 'server' : 'client',
            justification: isReact
                ? 'Page-level component can be server-rendered for SEO and initial load'
                : 'Vue/Svelte pages are client-rendered by default',
            props: [],
            children,
            stateManagement: children.some((c) => c.type === 'client')
                ? 'local + context'
                : 'server state',
            dataSource: 'server-side fetch',
        };
    });
}
function generateScreenComponents(screenName, specContent, _isReact) {
    const components = [];
    const lower = specContent.toLowerCase();
    components.push({
        name: `${toPascalCase(screenName)}Header`,
        type: 'server',
        justification: 'Static header can be server-rendered',
        props: [
            { name: 'title', type: 'string', required: true, description: 'Page title' },
            {
                name: 'breadcrumbs',
                type: 'BreadcrumbItem[]',
                required: false,
                description: 'Navigation breadcrumbs',
            },
        ],
        children: [],
    });
    if (lower.includes('form') ||
        lower.includes('input') ||
        lower.includes('submit') ||
        lower.includes('create') ||
        lower.includes('edit') ||
        lower.includes('update')) {
        components.push(generateFormComponent(screenName, specContent));
    }
    if (lower.includes('list') ||
        lower.includes('table') ||
        lower.includes('grid') ||
        lower.includes('display') ||
        lower.includes('show') ||
        lower.includes('browse')) {
        components.push(generateListComponent(screenName));
    }
    if (lower.includes('detail') ||
        lower.includes('view') ||
        lower.includes('profile') ||
        lower.includes('info') ||
        lower.includes('summary')) {
        components.push(generateDetailComponent(screenName));
    }
    if (lower.includes('action') ||
        lower.includes('button') ||
        lower.includes('save') ||
        lower.includes('delete') ||
        lower.includes('confirm')) {
        components.push({
            name: `${toPascalCase(screenName)}Actions`,
            type: 'client',
            justification: 'Action buttons require client interactivity',
            props: [
                {
                    name: 'onAction',
                    type: '(action: string) => void',
                    required: true,
                    description: 'Action handler callback',
                },
                {
                    name: 'isLoading',
                    type: 'boolean',
                    required: false,
                    description: 'Disable actions while loading',
                },
            ],
            children: [],
            stateManagement: 'local',
        });
    }
    if (components.length === 1) {
        components.push({
            name: `${toPascalCase(screenName)}Content`,
            type: 'client',
            justification: 'Main content area with interactive elements',
            props: [{ name: 'data', type: 'unknown', required: true, description: 'Content data' }],
            children: [],
            stateManagement: 'local',
        });
    }
    return components;
}
function generateFormComponent(screenName, specContent) {
    const fields = extractFormFields(specContent);
    const props = [
        {
            name: 'initialValues',
            type: 'Partial<FormValues>',
            required: false,
            description: 'Pre-filled values for edit mode',
        },
        {
            name: 'onSubmit',
            type: '(values: FormValues) => Promise<void>',
            required: true,
            description: 'Submit handler',
        },
        { name: 'isLoading', type: 'boolean', required: false, description: 'Submit loading state' },
        {
            name: 'errors',
            type: 'Record<string, string>',
            required: false,
            description: 'Field validation errors',
        },
    ];
    return {
        name: `${toPascalCase(screenName)}Form`,
        type: 'client',
        justification: 'Forms require client-side state management and validation',
        props,
        children: fields.map((field) => ({
            name: `${toPascalCase(field)}Field`,
            type: 'client',
            justification: 'Form field with validation',
            props: [
                { name: 'value', type: 'string', required: true, description: `Current ${field} value` },
                {
                    name: 'onChange',
                    type: '(value: string) => void',
                    required: true,
                    description: 'Change handler',
                },
                {
                    name: 'error',
                    type: 'string | undefined',
                    required: false,
                    description: 'Validation error',
                },
            ],
            children: [],
        })),
        stateManagement: 'form-library or local state',
        dataSource: 'user input',
    };
}
function generateListComponent(screenName) {
    return {
        name: `${toPascalCase(screenName)}List`,
        type: 'client',
        justification: 'Lists require client-side sorting, filtering, and pagination',
        props: [
            { name: 'items', type: 'Item[]', required: true, description: 'Array of items to display' },
            {
                name: 'onItemClick',
                type: '(id: string) => void',
                required: false,
                description: 'Item click handler',
            },
            { name: 'sortBy', type: 'string', required: false, description: 'Current sort field' },
            { name: 'filterQuery', type: 'string', required: false, description: 'Filter search query' },
            { name: 'isLoading', type: 'boolean', required: false, description: 'Loading state' },
            {
                name: 'emptyMessage',
                type: 'string',
                required: false,
                description: 'Message when no items',
            },
        ],
        children: [
            {
                name: `${toPascalCase(screenName)}ListItem`,
                type: 'client',
                justification: 'Individual list items with click handlers',
                props: [
                    { name: 'item', type: 'Item', required: true, description: 'Item data' },
                    { name: 'onClick', type: '() => void', required: false, description: 'Click handler' },
                ],
                children: [],
            },
        ],
        stateManagement: 'local (sort/filter state)',
        dataSource: 'API fetch',
    };
}
function generateDetailComponent(screenName) {
    return {
        name: `${toPascalCase(screenName)}Detail`,
        type: 'server',
        justification: 'Detail views can be server-rendered for faster initial load',
        props: [{ name: 'id', type: 'string', required: true, description: 'Entity ID to display' }],
        children: [
            {
                name: `${toPascalCase(screenName)}DetailContent`,
                type: 'server',
                justification: 'Static display of entity details',
                props: [{ name: 'data', type: 'EntityDetail', required: true, description: 'Entity data' }],
                children: [],
            },
        ],
        dataSource: 'server-side fetch by ID',
    };
}
function extractFormFields(content) {
    const fields = [];
    const patterns = [
        /(?:field|input|enter|provide)\s+(?:the\s+)?["']?(\w+)["']?/gi,
        /(\w+)\s+(?:field|input|box|area|selector)/gi,
    ];
    const seen = new Set();
    for (const pattern of patterns) {
        const matches = content.matchAll(pattern);
        for (const match of matches) {
            if (match[1] && match[1].length > 2 && !seen.has(match[1].toLowerCase())) {
                seen.add(match[1].toLowerCase());
                fields.push(match[1].toLowerCase());
            }
        }
    }
    if (fields.length === 0) {
        fields.push('name', 'description');
    }
    return fields.slice(0, 8);
}
//# sourceMappingURL=component-tree.js.map