// Sketch plugin development with CocoaScript
const sketch = require('sketch');
const { Document, Artboard, SymbolMaster, Text, Rectangle } = sketch;

class SketchDesignSystem {
    constructor() {
        this.document = sketch.getSelectedDocument();
        this.page = this.document.selectedPage;
    }
    
    createDesignTokens(tokens) {
        try {
            // Create color palette
            this.createColorPalette(tokens.colors);
            
            // Create typography scale
            this.createTypographyScale(tokens.typography);
            
            // Create spacing tokens
            this.createSpacingTokens(tokens.spacing);
            
            // Create component symbols
            this.createComponentSymbols(tokens.components);
            
            sketch.UI.message('Design system tokens created successfully');
        } catch (error) {
            sketch.UI.message(`Error creating design tokens: ${error.message}`);
        }
    }
    
    createColorPalette(colors) {
        const paletteArtboard = new Artboard({
            name: 'Color Palette',
            frame: { x: 0, y: 0, width: 800, height: 400 },
            parent: this.page
        });
        
        let x = 50;
        let y = 50;
        
        Object.entries(colors).forEach(([name, color]) => {
            // Create color swatch
            const swatch = new Rectangle({
                name: name,
                frame: { x, y, width: 100, height: 60 },
                style: {
                    fills: [{
                        color: color.value,
                        fillType: 'Color'
                    }]
                },
                parent: paletteArtboard
            });
            
            // Create color label
            const label = new Text({
                text: `${name}\n${color.value}`,
                frame: { x, y: y + 70, width: 100, height: 40 },
                style: {
                    fontSize: 12,
                    textColor: '#333333'
                },
                parent: paletteArtboard
            });
            
            x += 120;
            if (x > 700) {
                x = 50;
                y += 130;
            }
        });
    }
    
    createTypographyScale(typography) {
        const typographyArtboard = new Artboard({
            name: 'Typography Scale',
            frame: { x: 900, y: 0, width: 600, height: 800 },
            parent: this.page
        });
        
        let y = 50;
        
        Object.entries(typography).forEach(([name, style]) => {
            const textSample = new Text({
                text: `${name} - The quick brown fox jumps`,
                frame: { x: 50, y, width: 500, height: style.fontSize * 1.5 },
                style: {
                    fontSize: style.fontSize,
                    fontFamily: style.fontFamily,
                    fontWeight: style.fontWeight,
                    lineHeight: style.lineHeight,
                    textColor: '#333333'
                },
                parent: typographyArtboard
            });
            
            y += style.fontSize * 2;
        });
    }
    
    createSpacingTokens(spacing) {
        const spacingArtboard = new Artboard({
            name: 'Spacing System',
            frame: { x: 0, y: 500, width: 800, height: 300 },
            parent: this.page
        });
        
        let x = 50;
        
        Object.entries(spacing).forEach(([name, value]) => {
            // Create spacing visual
            const spacingBox = new Rectangle({
                name: `spacing-${name}`,
                frame: { x, y: 50, width: value, height: value },
                style: {
                    fills: [{
                        color: '#FF6B6B',
                        fillType: 'Color'
                    }],
                    borders: [{
                        color: '#333333',
                        thickness: 1
                    }]
                },
                parent: spacingArtboard
            });
            
            // Create label
            const label = new Text({
                text: `${name}\n${value}px`,
                frame: { x, y: value + 60, width: Math.max(value, 60), height: 30 },
                style: {
                    fontSize: 10,
                    textColor: '#333333',
                    alignment: 'center'
                },
                parent: spacingArtboard
            });
            
            x += Math.max(value, 60) + 20;
        });
    }
    
    createComponentSymbols(components) {
        Object.entries(components).forEach(([name, config]) => {
            const symbol = new SymbolMaster({
                name: name,
                frame: { 
                    x: 0, 
                    y: 0, 
                    width: config.width, 
                    height: config.height 
                }
            });
            
            // Add base rectangle
            const base = new Rectangle({
                frame: { x: 0, y: 0, width: config.width, height: config.height },
                style: {
                    fills: [{
                        color: config.backgroundColor || '#F5F5F5',
                        fillType: 'Color'
                    }],
                    borders: [{
                        color: config.borderColor || '#CCCCCC',
                        thickness: config.borderWidth || 1
                    }]
                },
                parent: symbol
            });
            
            // Add text if specified
            if (config.text) {
                const text = new Text({
                    text: config.text,
                    frame: { 
                        x: config.padding || 16, 
                        y: (config.height - 20) / 2, 
                        width: config.width - (config.padding || 16) * 2, 
                        height: 20 
                    },
                    style: {
                        fontSize: config.fontSize || 16,
                        fontFamily: config.fontFamily || 'SF Pro Text',
                        textColor: config.textColor || '#333333'
                    },
                    parent: symbol
                });
            }
            
            this.document.save();
        });
    }
    
    exportAssets(exportConfig) {
        const selectedLayers = this.document.selectedLayers;
        
        if (selectedLayers.length === 0) {
            sketch.UI.message('Please select layers to export');
            return;
        }
        
        selectedLayers.forEach(layer => {
            const options = {
                formats: exportConfig.formats || ['png'],
                scales: exportConfig.scales || ['1x', '2x'],
                output: exportConfig.outputPath || sketch.UI.getStringFromUser('Export path:', '~/Desktop/')
            };
            
            sketch.export(layer, options);
        });
        
        sketch.UI.message(`Exported ${selectedLayers.length} assets`);
    }
    
    createArtboardFromTemplate(templateName, data) {
        const templates = {
            'product-card': {
                width: 300,
                height: 400,
                elements: [
                    { type: 'image', x: 0, y: 0, width: 300, height: 200 },
                    { type: 'text', x: 16, y: 220, width: 268, height: 60, text: data.title },
                    { type: 'text', x: 16, y: 290, width: 100, height: 30, text: data.price }
                ]
            }
        };
        
        const template = templates[templateName];
        if (!template) {
            throw new Error(`Template ${templateName} not found`);
        }
        
        const artboard = new Artboard({
            name: `${templateName}-${Date.now()}`,
            frame: { x: 0, y: 0, width: template.width, height: template.height },
            parent: this.page
        });
        
        template.elements.forEach(element => {
            if (element.type === 'rectangle') {
                new Rectangle({
                    frame: { x: element.x, y: element.y, width: element.width, height: element.height },
                    style: element.style || {},
                    parent: artboard
                });
            } else if (element.type === 'text') {
                new Text({
                    text: element.text || 'Sample Text',
                    frame: { x: element.x, y: element.y, width: element.width, height: element.height },
                    style: element.style || { fontSize: 16, textColor: '#333333' },
                    parent: artboard
                });
            }
        });
        
        return artboard;
    }
}

// Plugin usage
const designSystem = new SketchDesignSystem();

// Create design tokens from JSON
const tokens = {
    colors: {
        'primary-500': { value: '#3B82F6' },
        'secondary-500': { value: '#EC4899' },
        'neutral-100': { value: '#F3F4F6' }
    },
    typography: {
        'heading-1': { fontSize: 32, fontFamily: 'SF Pro Display', fontWeight: 700 },
        'body-large': { fontSize: 18, fontFamily: 'SF Pro Text', fontWeight: 400 }
    },
    spacing: {
        'xs': 4, 'sm': 8, 'md': 16, 'lg': 24, 'xl': 32
    },
    components: {
        'button-primary': {
            width: 120, height: 44, backgroundColor: '#3B82F6',
            text: 'Button', textColor: '#FFFFFF', fontSize: 16
        }
    }
};

designSystem.createDesignTokens(tokens);