// Figma API integration for design token extraction
class FigmaDesignSystem {
    constructor(personalAccessToken) {
        this.token = personalAccessToken;
        this.baseURL = 'https://api.figma.com/v1';
        this.headers = {
            'X-Figma-Token': this.token
        };
    }
    
    async getFileData(fileKey) {
        try {
            const response = await fetch(`${this.baseURL}/files/${fileKey}`, {
                headers: this.headers
            });
            
            if (!response.ok) {
                throw new Error(`Figma API error: ${response.status}`);
            }
            
            const data = await response.json();
            return data;
        } catch (error) {
            console.error('Failed to fetch Figma file:', error);
            throw new Error('Figma API request failed');
        }
    }
    
    async extractDesignTokens(fileKey) {
        try {
            const fileData = await this.getFileData(fileKey);
            const styles = fileData.styles || {};
            
            const tokens = {
                colors: {},
                typography: {},
                spacing: {},
                components: {}
            };
            
            // Extract color tokens from Figma styles
            for (const [styleId, styleData] of Object.entries(styles)) {
                if (styleData.styleType === 'FILL') {
                    // Get detailed style information
                    const styleDetail = await this.getStyle(styleId);
                    tokens.colors[styleData.name] = {
                        value: this.extractColorFromFill(styleDetail),
                        type: 'color',
                        description: styleData.description || ''
                    };
                }
                
                if (styleData.styleType === 'TEXT') {
                    const styleDetail = await this.getStyle(styleId);
                    tokens.typography[styleData.name] = {
                        fontFamily: styleDetail.fontFamily,
                        fontSize: styleDetail.fontSize,
                        fontWeight: styleDetail.fontWeight,
                        lineHeight: styleDetail.lineHeightPx,
                        letterSpacing: styleDetail.letterSpacing
                    };
                }
            }
            
            // Extract components information
            await this.extractComponents(fileData.document, tokens.components);
            
            return tokens;
        } catch (error) {
            console.error('Design token extraction failed:', error);
            throw new Error('Unable to extract design tokens from Figma');
        }
    }
    
    async getStyle(styleId) {
        try {
            const response = await fetch(`${this.baseURL}/styles/${styleId}`, {
                headers: this.headers
            });
            
            const data = await response.json();
            return data.meta;
        } catch (error) {
            console.error('Failed to fetch style details:', error);
            return {};
        }
    }
    
    extractColorFromFill(styleData) {
        // Convert Figma color format to CSS
        if (styleData.fills && styleData.fills.length > 0) {
            const fill = styleData.fills[0];
            if (fill.type === 'SOLID' && fill.color) {
                const { r, g, b } = fill.color;
                const opacity = fill.opacity || 1;
                
                if (opacity === 1) {
                    return `rgb(${Math.round(r * 255)}, ${Math.round(g * 255)}, ${Math.round(b * 255)})`;
                } else {
                    return `rgba(${Math.round(r * 255)}, ${Math.round(g * 255)}, ${Math.round(b * 255)}, ${opacity})`;
                }
            }
        }
        return '#000000';
    }
    
    async extractComponents(node, components) {
        if (node.type === 'COMPONENT') {
            components[node.name] = {
                id: node.id,
                description: node.description || '',
                width: node.absoluteBoundingBox?.width || 0,
                height: node.absoluteBoundingBox?.height || 0,
                constraints: node.constraints || {},
                componentPropertyDefinitions: node.componentPropertyDefinitions || {}
            };
        }
        
        if (node.children) {
            for (const child of node.children) {
                await this.extractComponents(child, components);
            }
        }
    }
    
    async exportAssets(fileKey, nodeIds, format = 'svg', scale = 1) {
        try {
            const params = new URLSearchParams({
                ids: nodeIds.join(','),
                format: format,
                scale: scale.toString()
            });
            
            const response = await fetch(
                `${this.baseURL}/images/${fileKey}?${params}`,
                { headers: this.headers }
            );
            
            const data = await response.json();
            
            if (data.error) {
                throw new Error(`Export failed: ${data.error}`);
            }
            
            return data.images;
        } catch (error) {
            console.error('Asset export failed:', error);
            throw new Error('Unable to export assets from Figma');
        }
    }
    
    async generateTokensJSON(designTokens) {
        const tokensJSON = {
            $metadata: {
                tokenSetOrder: ['global', 'semantic']
            },
            global: {}
        };
        
        // Generate color tokens
        if (designTokens.colors) {
            tokensJSON.global.colors = {};
            for (const [name, token] of Object.entries(designTokens.colors)) {
                const tokenName = name.toLowerCase().replace(/\s+/g, '-');
                tokensJSON.global.colors[tokenName] = {
                    value: token.value,
                    type: 'color',
                    description: token.description
                };
            }
        }
        
        // Generate typography tokens
        if (designTokens.typography) {
            tokensJSON.global.typography = {};
            for (const [name, token] of Object.entries(designTokens.typography)) {
                const tokenName = name.toLowerCase().replace(/\s+/g, '-');
                tokensJSON.global.typography[tokenName] = {
                    value: {
                        fontFamily: token.fontFamily,
                        fontSize: `${token.fontSize}px`,
                        fontWeight: token.fontWeight,
                        lineHeight: token.lineHeight ? `${token.lineHeight}px` : 'normal',
                        letterSpacing: token.letterSpacing ? `${token.letterSpacing}px` : 'normal'
                    },
                    type: 'typography'
                };
            }
        }
        
        return JSON.stringify(tokensJSON, null, 2);
    }
    
    async syncWithRepository(fileKey, repositoryConfig) {
        try {
            // Extract design tokens from Figma
            const designTokens = await this.extractDesignTokens(fileKey);
            
            // Generate tokens JSON
            const tokensJSON = await this.generateTokensJSON(designTokens);
            
            // Push to GitHub repository
            const response = await fetch(
                `https://api.github.com/repos/${repositoryConfig.owner}/${repositoryConfig.repo}/contents/tokens/design-tokens.json`,
                {
                    method: 'PUT',
                    headers: {
                        'Authorization': `token ${repositoryConfig.githubToken}`,
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        message: 'Update design tokens from Figma',
                        content: btoa(tokensJSON),
                        sha: repositoryConfig.fileSha
                    })
                }
            );
            
            if (!response.ok) {
                throw new Error(`GitHub API error: ${response.status}`);
            }
            
            return await response.json();
        } catch (error) {
            console.error('Repository sync failed:', error);
            throw new Error('Unable to sync tokens with repository');
        }
    }
    
    async createDesignSystemDocumentation(fileKey, outputPath) {
        try {
            const designTokens = await this.extractDesignTokens(fileKey);
            
            let documentation = '# Design System Documentation\n\n';
            documentation += 'Generated automatically from Figma design system.\n\n';
            
            // Document colors
            if (Object.keys(designTokens.colors).length > 0) {
                documentation += '## Colors\n\n';
                for (const [name, token] of Object.entries(designTokens.colors)) {
                    documentation += `### ${name}\n`;
                    documentation += `- **Value**: \`${token.value}\`\n`;
                    if (token.description) {
                        documentation += `- **Description**: ${token.description}\n`;
                    }
                    documentation += '\n';
                }
            }
            
            // Document typography
            if (Object.keys(designTokens.typography).length > 0) {
                documentation += '## Typography\n\n';
                for (const [name, token] of Object.entries(designTokens.typography)) {
                    documentation += `### ${name}\n`;
                    documentation += `- **Font Family**: ${token.fontFamily}\n`;
                    documentation += `- **Font Size**: ${token.fontSize}px\n`;
                    documentation += `- **Font Weight**: ${token.fontWeight}\n`;
                    documentation += `- **Line Height**: ${token.lineHeight}px\n`;
                    documentation += '\n';
                }
            }
            
            // Document components
            if (Object.keys(designTokens.components).length > 0) {
                documentation += '## Components\n\n';
                for (const [name, component] of Object.entries(designTokens.components)) {
                    documentation += `### ${name}\n`;
                    documentation += `- **Size**: ${component.width}x${component.height}px\n`;
                    if (component.description) {
                        documentation += `- **Description**: ${component.description}\n`;
                    }
                    documentation += '\n';
                }
            }
            
            return documentation;
        } catch (error) {
            console.error('Documentation generation failed:', error);
            throw new Error('Unable to generate design system documentation');
        }
    }
}

// Usage example
const figmaSystem = new FigmaDesignSystem(process.env.FIGMA_PERSONAL_ACCESS_TOKEN);

async function automateDesignSystemWorkflow() {
    try {
        const fileKey = 'your-figma-file-key'; // From Figma URL
        
        // Extract design tokens
        const designTokens = await figmaSystem.extractDesignTokens(fileKey);
        console.log('Design tokens extracted:', Object.keys(designTokens));
        
        // Generate documentation
        const documentation = await figmaSystem.createDesignSystemDocumentation(fileKey);
        console.log('Documentation generated');
        
        // Export components as assets
        const componentIds = Object.values(designTokens.components).map(c => c.id);
        if (componentIds.length > 0) {
            const assets = await figmaSystem.exportAssets(fileKey, componentIds, 'svg');
            console.log('Assets exported:', Object.keys(assets).length);
        }
        
        // Sync with development repository
        await figmaSystem.syncWithRepository(fileKey, {
            owner: 'your-github-username',
            repo: 'design-system-repo',
            githubToken: process.env.GITHUB_TOKEN,
            fileSha: 'existing-file-sha-or-null'
        });
        
        console.log('Design system synchronized successfully');
    } catch (error) {
        console.error('Design system automation failed:', error);
    }
}