/**
 * UI Generate Preview Tool
 * Generate compare.html and index.html for UI prototypes
 */
import { readdirSync, existsSync, readFileSync, writeFileSync } from 'fs';
import { resolve, basename } from 'path';
/**
 * Auto-detect matrix dimensions from file patterns
 * Pattern: {target}-style-{s}-layout-{l}.html
 */
function detectMatrixDimensions(prototypesDir) {
    const files = readdirSync(prototypesDir).filter(f => f.match(/.*-style-\d+-layout-\d+\.html$/));
    const styles = new Set();
    const layouts = new Set();
    const targets = new Set();
    files.forEach(file => {
        const styleMatch = file.match(/-style-(\d+)-/);
        const layoutMatch = file.match(/-layout-(\d+)\.html/);
        const targetMatch = file.match(/^(.+)-style-/);
        if (styleMatch)
            styles.add(parseInt(styleMatch[1]));
        if (layoutMatch)
            layouts.add(parseInt(layoutMatch[1]));
        if (targetMatch)
            targets.add(targetMatch[1]);
    });
    return {
        styles: Math.max(...Array.from(styles)),
        layouts: Math.max(...Array.from(layouts)),
        targets: Array.from(targets).sort()
    };
}
/**
 * Load template from file
 */
function loadTemplate(templatePath) {
    const defaultPath = resolve(process.env.HOME || process.env.USERPROFILE, '.claude/workflows/_template-compare-matrix.html');
    const path = templatePath || defaultPath;
    if (!existsSync(path)) {
        // Return minimal fallback template
        return `<!DOCTYPE html>
<html>
<head><title>UI Prototypes Comparison</title></head>
<body>
<h1>UI Prototypes Matrix</h1>
<p>Styles: {{style_variants}} | Layouts: {{layout_variants}}</p>
<p>Pages: {{pages_json}}</p>
<p>Generated: {{timestamp}}</p>
</body>
</html>`;
    }
    return readFileSync(path, 'utf8');
}
/**
 * Generate compare.html from template
 */
function generateCompareHtml(template, metadata) {
    const { runId, sessionId, timestamp, styles, layouts, targets } = metadata;
    const pagesJson = JSON.stringify(targets);
    return template
        .replace(/\{\{run_id\}\}/g, runId)
        .replace(/\{\{session_id\}\}/g, sessionId)
        .replace(/\{\{timestamp\}\}/g, timestamp)
        .replace(/\{\{style_variants\}\}/g, styles.toString())
        .replace(/\{\{layout_variants\}\}/g, layouts.toString())
        .replace(/\{\{pages_json\}\}/g, pagesJson);
}
/**
 * Generate index.html
 */
function generateIndexHtml(metadata) {
    const { styles, layouts, targets } = metadata;
    const total = styles * layouts * targets.length;
    return `<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>UI Prototypes Index</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            max-width: 1200px;
            margin: 0 auto;
            padding: 40px 20px;
            background: #f5f5f5;
        }
        h1 { margin-bottom: 10px; color: #333; }
        .subtitle { color: #666; margin-bottom: 30px; }
        .cta {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 30px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }
        .cta h2 { margin-bottom: 10px; }
        .cta a {
            display: inline-block;
            background: white;
            color: #667eea;
            padding: 10px 20px;
            border-radius: 6px;
            text-decoration: none;
            font-weight: 600;
            margin-top: 10px;
        }
        .stats {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
            margin-bottom: 30px;
        }
        .stat {
            background: white;
            padding: 15px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .stat-label { font-size: 0.85em; color: #666; margin-bottom: 5px; }
        .stat-value { font-size: 1.5em; font-weight: bold; color: #333; }
        .files {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .files h2 { margin-bottom: 15px; color: #333; }
        .file-list { list-style: none; }
        .file-list li {
            padding: 8px 0;
            border-bottom: 1px solid #eee;
        }
        .file-list li:last-child { border-bottom: none; }
        .file-list a {
            color: #667eea;
            text-decoration: none;
        }
        .file-list a:hover { text-decoration: underline; }
    </style>
</head>
<body>
    <h1>UI Prototypes</h1>
    <p class="subtitle">Interactive design exploration matrix</p>

    <div class="cta">
        <h2>📊 Interactive Comparison</h2>
        <p>View all prototypes side-by-side with synchronized scrolling</p>
        <a href="compare.html">Open Comparison Matrix →</a>
    </div>

    <div class="stats">
        <div class="stat">
            <div class="stat-label">Style Variants</div>
            <div class="stat-value">${styles}</div>
        </div>
        <div class="stat">
            <div class="stat-label">Layout Variants</div>
            <div class="stat-value">${layouts}</div>
        </div>
        <div class="stat">
            <div class="stat-label">Pages/Components</div>
            <div class="stat-value">${targets.length}</div>
        </div>
        <div class="stat">
            <div class="stat-label">Total Prototypes</div>
            <div class="stat-value">${total}</div>
        </div>
    </div>

    <div class="files">
        <h2>Individual Prototypes</h2>
        <ul class="file-list">
${targets.map(target => {
        const items = [];
        for (let s = 1; s <= styles; s++) {
            for (let l = 1; l <= layouts; l++) {
                const filename = `${target}-style-${s}-layout-${l}.html`;
                items.push(`            <li><a href="${filename}">${filename}</a></li>`);
            }
        }
        return items.join('\n');
    }).join('\n')}
        </ul>
    </div>
</body>
</html>`;
}
/**
 * Generate PREVIEW.md
 */
function generatePreviewMd(metadata) {
    const { styles, layouts, targets } = metadata;
    return `# UI Prototypes Preview

## Matrix Dimensions

- **Style Variants**: ${styles}
- **Layout Variants**: ${layouts}
- **Pages/Components**: ${targets.join(', ')}
- **Total Prototypes**: ${styles * layouts * targets.length}

## Quick Start

1. **Interactive Comparison**: Open \`compare.html\` for side-by-side view with synchronized scrolling
2. **Browse Index**: Open \`index.html\` for a navigable list of all prototypes
3. **Individual Files**: Access specific prototypes directly (e.g., \`${targets[0]}-style-1-layout-1.html\`)

## File Naming Convention

\`\`\`
{page}-style-{s}-layout-{l}.html
\`\`\`

- **page**: Component/page name (${targets.join(', ')})
- **s**: Style variant number (1-${styles})
- **l**: Layout variant number (1-${layouts})

## Tips

- Use compare.html for quick visual comparison across all variants
- Synchronized scrolling helps identify consistency issues
- Check responsive behavior across different layout variants
`;
}
/**
 * Main execute function
 */
async function execute(params) {
    const { prototypesDir = '.', template: templatePath, runId: runIdParam, sessionId: sessionIdParam, timestamp: timestampParam, } = params;
    const targetPath = resolve(process.cwd(), prototypesDir);
    if (!existsSync(targetPath)) {
        throw new Error(`Directory not found: ${targetPath}`);
    }
    // Auto-detect matrix dimensions
    const { styles, layouts, targets } = detectMatrixDimensions(targetPath);
    if (styles === 0 || layouts === 0 || targets.length === 0) {
        throw new Error('No prototype files found matching pattern {target}-style-{s}-layout-{l}.html');
    }
    const now = new Date();
    const runId = runIdParam || `run-${now.toISOString().replace(/[:.]/g, '-').slice(0, -5)}`;
    const sessionId = sessionIdParam || 'standalone';
    const timestamp = timestampParam || now.toISOString();
    // Generate metadata
    const metadata = {
        runId,
        sessionId,
        timestamp,
        styles,
        layouts,
        targets
    };
    // Load template
    const template = loadTemplate(templatePath);
    // Generate files
    const compareHtml = generateCompareHtml(template, metadata);
    const indexHtml = generateIndexHtml(metadata);
    const previewMd = generatePreviewMd(metadata);
    // Write files
    writeFileSync(resolve(targetPath, 'compare.html'), compareHtml, 'utf8');
    writeFileSync(resolve(targetPath, 'index.html'), indexHtml, 'utf8');
    writeFileSync(resolve(targetPath, 'PREVIEW.md'), previewMd, 'utf8');
    return {
        success: true,
        prototypes_dir: prototypesDir,
        styles,
        layouts,
        targets,
        total_prototypes: styles * layouts * targets.length,
        files_generated: ['compare.html', 'index.html', 'PREVIEW.md']
    };
}
/**
 * Tool Definition
 */
export const uiGeneratePreviewTool = {
    name: 'ui_generate_preview',
    description: `Generate interactive preview files for UI prototypes.
Generates:
- compare.html: Interactive matrix view with synchronized scrolling
- index.html: Navigation and statistics
- PREVIEW.md: Usage guide

Auto-detects matrix dimensions from file pattern: {target}-style-{s}-layout-{l}.html`,
    parameters: {
        type: 'object',
        properties: {
            prototypesDir: {
                type: 'string',
                description: 'Prototypes directory path (default: current directory)',
                default: '.'
            },
            template: {
                type: 'string',
                description: 'Optional path to compare.html template'
            },
            runId: {
                type: 'string',
                description: 'Optional run identifier to inject into compare.html (defaults to generated timestamp-based run id)'
            },
            sessionId: {
                type: 'string',
                description: 'Optional session identifier to inject into compare.html (default: standalone)'
            },
            timestamp: {
                type: 'string',
                description: 'Optional ISO timestamp to inject into compare.html (defaults to current time)'
            }
        },
        required: []
    },
    execute
};
//# sourceMappingURL=ui-generate-preview.js.map