var dagcomponentfuncs = window.dashAgGridComponentFunctions = window.dashAgGridComponentFunctions || {};

dagcomponentfuncs.ModelLink = function(props) {
    if (!props.data.Model_Link) {
        return props.value;  // Just return text if no link
    }
    return React.createElement(
        'a',
        {
            href: props.data.Model_Link,
            target: '_blank',
            style: {
                color: '#007bff',
                textDecoration: 'none'
            }
        },
        props.value
    );
};

dagcomponentfuncs.PinRenderer = function(props) {
    return React.createElement(
        'div',
        {
            onClick: function() {
                const api = props.api;
                const modelId = props.data.Model_Display;
                const isPinned = props.data.pinned || false;
                
                if (isPinned) {
                    // Unpin
                    const currentPinned = api.getGridOption('pinnedTopRowData') || [];
                    const newPinnedRows = currentPinned.filter(row => row.Model_Display !== modelId);
                    api.setGridOption('pinnedTopRowData', newPinnedRows);
                } else {
                    // Pin
                    const currentPinned = api.getGridOption('pinnedTopRowData') || [];
                    const pinnedRow = {...props.data, pinned: true};
                    api.setGridOption('pinnedTopRowData', [...currentPinned, pinnedRow]);
                }
            },
            style: {
                cursor: 'pointer',
                textAlign: 'center',
                fontSize: '16px'
            }
        },
        props.data.pinned ? '📌' : '☐'
    );
};

dagcomponentfuncs.TypeRenderer = function(props) {
    const typeMap = {
        'Base': ['Base', '#ddd']
    };
    
    // Determine type from raw flags
    let type = 'Unknown';
    if (props.data['Base']) {
        type = 'Base';
    }
    
    const [letter, color] = typeMap[type] || ['', '#999'];
    
    return React.createElement('div', {
        style: {
            display: 'flex',
            alignItems: 'center',
            height: '100%'
        }
    }, 
        React.createElement('div', {
            style: {
                color: color,
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                fontWeight: 'bold',
                fontSize: '14px',
                lineHeight: '1',
                textAlign: 'center'
            }
        }, letter)
    );
};

dagcomponentfuncs.BehaviorRenderer = function(props) {
    const typeMap = {
        '10': ['10', '#6bde57'],
        '9': ['9', '#88bd11'], 
        '8': ['8', '#b0d38d'],
				'7': ['7', '#c3c669'],
				'6': ['6', '#dabe78'],
				'5': ['5', '#cb7951']
    };
    
    let type = props.data['Behavior'];
    
    const [behavior, color] = typeMap[type] || ['?', '#999'];
    
    return React.createElement('div', {
        style: {
            display: 'flex',
            alignItems: 'center',
            height: '100%'
        }
    }, 
        React.createElement('div', {
            style: {
                color: color,
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                fontWeight: 'bold',
                fontSize: '14px',
                lineHeight: '1',
                textAlign: 'center'
            }
        }, behavior)
    );
};

dagcomponentfuncs.ScoreRenderer = function(props) {
    const typeMap = {
        '10': ['#6bde57'],
        '9': ['#88bd11'], 
        '8': ['#b0d38d'],
				'7': ['#c3c669'],
				'6': ['#dabe78'],
				'5': ['#cb7951']
    };
    
    let type = 'Unknown';
    if (props.data['Score'] >= 90) {
        type = '10';
    } else if (props.data['Score'] >= 80) {
        type = '9';
    } else if (props.data['Score'] >= 70) {
        type = '8';
    } else if (props.data['Score'] >= 60) {
        type = '7';
    } else if (props.data['Score'] >= 50) {
        type = '6';
    } else if (props.data['Score'] >= 40) {
        type = '5';
    }
    
    const [score, color] = [props.data['Score'], typeMap[type]] || [props.data['Score'], '#999'];
    
    return React.createElement('div', {
        style: {
            display: 'flex',
            alignItems: 'center',
            height: '100%'
        }
    }, 
        React.createElement('div', {
            style: {
                color: color,
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                fontWeight: 'bold',
                fontSize: '14px',
                lineHeight: '1',
                textAlign: 'center'
            }
        }, score)
    );
};