const TestRunner = {
    oninit(vnode) {
        this.function_id = vnode.attrs.function_id;
        this.function_name = vnode.attrs.function_name;
        this.tests = [];
        this.testResults = {};
        this.loading = true;
        this.runningTests = false;
        this.showCreateModal = false;
        this.selectedTestForEdit = null;
        
        // New test form data
        this.newTest = {
            name: '',
            description: '',
            request_method: 'POST',
            request_headers: '{}',
            request_body: '{}',
            expected_status: 'SUCCESS',
            expected_output: '{}',
            assertions: []
        };
        
        // Load tests
        this.loadTests();
    },
    
    async loadTests() {
        this.loading = true;
        try {
            const response = await m.request({
                method: 'GET',
                url: `/tests/http/tests/${this.function_id}`
            });
            this.tests = response.tests || [];
        } catch (err) {
            Alert.show('Error loading tests: ' + err.message, 'error');
        } finally {
            this.loading = false;
            m.redraw();
        }
    },
    
    async createTest() {
        try {
            const response = await m.request({
                method: 'POST',
                url: `/tests/http/tests/${this.function_id}`,
                body: {
                    name: this.newTest.name,
                    description: this.newTest.description,
                    request_method: this.newTest.request_method,
                    request_headers: JSON.parse(this.newTest.request_headers),
                    request_body: JSON.parse(this.newTest.request_body),
                    expected_status: this.newTest.expected_status,
                    expected_output: this.newTest.expected_output ? JSON.parse(this.newTest.expected_output) : null,
                    assertions: this.newTest.assertions
                }
            });
            
            Alert.show('Test created successfully', 'success');
            this.showCreateModal = false;
            this.resetNewTestForm();
            await this.loadTests();
        } catch (err) {
            Alert.show('Error creating test: ' + err.message, 'error');
        }
    },
    
    async deleteTest(testId) {
        if (!confirm('Are you sure you want to delete this test?')) return;
        
        try {
            await m.request({
                method: 'DELETE',
                url: `/tests/http/tests/test/${testId}`
            });
            
            Alert.show('Test deleted', 'success');
            await this.loadTests();
        } catch (err) {
            Alert.show('Error deleting test: ' + err.message, 'error');
        }
    },
    
    async runSingleTest(testId) {
        try {
            this.runningTests = true;
            m.redraw();
            
            const result = await m.request({
                method: 'POST',
                url: `/tests/http/tests/run/${testId}`
            });
            
            this.testResults[testId] = result;
            m.redraw();
        } catch (err) {
            Alert.show('Error running test: ' + err.message, 'error');
        } finally {
            this.runningTests = false;
            m.redraw();
        }
    },
    
    async runAllTests() {
        try {
            this.runningTests = true;
            this.testResults = {};
            m.redraw();
            
            const response = await m.request({
                method: 'POST',
                url: `/tests/http/tests/run-all/${this.function_id}`
            });
            
            // Map results by test_id
            response.results.forEach(result => {
                this.testResults[result.test_id] = result;
            });
            
            const summary = response.summary;
            Alert.show(`Tests completed: ${summary.passed}/${summary.total} passed`, summary.passed === summary.total ? 'success' : 'error');
        } catch (err) {
            Alert.show('Error running tests: ' + err.message, 'error');
        } finally {
            this.runningTests = false;
            m.redraw();
        }
    },
    
    resetNewTestForm() {
        this.newTest = {
            name: '',
            description: '',
            request_method: 'POST',
            request_headers: '{}',
            request_body: '{}',
            expected_status: 'SUCCESS',
            expected_output: '{}',
            assertions: []
        };
    },
    
    addAssertion() {
        this.newTest.assertions.push({
            type: 'field_exists',
            path: '',
            description: ''
        });
    },
    
    removeAssertion(index) {
        this.newTest.assertions.splice(index, 1);
    },
    
    view(vnode) {
        const passedCount = Object.values(this.testResults).filter(r => r.passed).length;
        const totalTests = this.tests.length;
        const hasResults = Object.keys(this.testResults).length > 0;
        
        return m('div.p-6', [
            // Header
            m('div.flex.justify-between.items-center.mb-6', [
                m('div', [
                    m('h2.text-2xl.font-bold.text-gray-900.dark:text-white', `Tests for ${this.function_name}`),
                    hasResults && m('p.text-sm.text-gray-600.dark:text-gray-400.mt-1', 
                        `${passedCount}/${Object.keys(this.testResults).length} tests passed`
                    )
                ]),
                m('div.flex.gap-2', [
                    m('button.px-4.py-2.bg-blue-500.text-white.rounded-lg.hover:bg-blue-600.disabled:opacity-50', {
                        onclick: () => this.showCreateModal = true
                    }, '+ New Test'),
                    m('button.px-4.py-2.bg-green-500.text-white.rounded-lg.hover:bg-green-600.disabled:opacity-50', {
                        onclick: () => this.runAllTests(),
                        disabled: this.runningTests || this.tests.length === 0
                    }, this.runningTests ? 'Running...' : '▶ Run All Tests')
                ])
            ]),
            
            // Tests List
            this.loading 
                ? m('div.text-center.py-12', m('div.animate-spin.h-8.w-8.border-4.border-blue-500.border-t-transparent.rounded-full.mx-auto'))
                : this.tests.length === 0
                ? m('div.text-center.py-12', [
                    m('p.text-gray-600.dark:text-gray-400', 'No tests yet'),
                    m('p.text-sm.text-gray-500.dark:text-gray-500.mt-2', 'Create your first test to ensure your function works as expected')
                ])
                : m('div.space-y-3', this.tests.map(test => {
                    const result = this.testResults[test.id];
                    const isPassed = result?.passed === true;
                    const isFailed = result?.passed === false;
                    
                    return m('div.bg-white.dark:bg-gray-800.border.rounded-lg.p-4', {
                        class: isPassed ? 'border-green-500' : isFailed ? 'border-red-500' : 'border-gray-200 dark:border-gray-700'
                    }, [
                        m('div.flex.justify-between.items-start', [
                            m('div.flex-1', [
                                m('div.flex.items-center.gap-2', [
                                   result && m('span.text-2xl', isPassed ? '✓' : '✗'),
                                    m('h3.text-lg.font-semibold.text-gray-900.dark:text-white', test.name),
                                    m('span.text-xs.px-2.py-1.rounded.bg-gray-100.dark:bg-gray-700', test.request_method)
                                ]),
                                test.description && m('p.text-sm.text-gray-600.dark:text-gray-400.mt-1', test.description),
                                
                                // Test Results
                                result && m('div.mt-3.space-y-2', [
                                    // Show assertion results if they exist
                                    result.assertions && result.assertions.length > 0 ? [
                                        m('div.text-sm.font-medium.mb-2', `Assertions: ${result.assertions.filter(a => a.passed).length}/${result.assertions.length} passed`),
                                        result.assertions.map(assertion =>
                                            m('div.text-xs.p-2.rounded.border', {
                                                class: assertion.passed 
                                                    ? 'bg-green-50.dark:bg-green-900/20.border-green-200.dark:border-green-800'
                                                    : 'bg-red-50.dark:bg-red-900/20.border-red-200.dark:border-red-800'
                                            }, [
                                                m('div.flex.items-center.gap-2', [
                                                    m('span', assertion.passed ? '✓' : '✗'),
                                                    m('span.font-medium', assertion.description || `${assertion.type}: ${assertion.path}`)
                                                ]),
                                                m('p.text-gray-600.dark:text-gray-400.mt-1', assertion.message)
                                            ])
                                        )
                                    ] : [
                                        // Fallback to old output comparison
                                        isFailed && m('div.bg-red-50.dark:bg-red-900/20.border.border-red-200.dark:border-red-800.rounded.p-3', [
                                            m('p.text-sm.font-medium.text-red-800.dark:text-red-300', 'Test Failed'),
                                            result.error && m('p.text-xs.text-red-600.dark:text-red-400.mt-1', `Error: ${result.error}`),
                                            result.actual_output !== result.expected_output && m('div.mt-2', [
                                                m('div.grid.grid-cols-2.gap-2.text-xs', [
                                                    m('div', [
                                                        m('p.font-medium.text-gray-700.dark:text-gray-300', 'Expected:'),
                                                        m('pre.bg-white.dark:bg-gray-900.p-2.rounded.mt-1.overflow-auto', 
                                                            JSON.stringify(result.expected_output, null, 2))
                                                    ]),
                                                    m('div', [
                                                        m('p.font-medium.text-gray-700.dark:text-gray-300', 'Actual:'),
                                                        m('pre.bg-white.dark:bg-gray-900.p-2.rounded.mt-1.overflow-auto', 
                                                            JSON.stringify(result.actual_output, null, 2))
                                                    ])
                                                ])
                                            ])
                                        ]),
                                        isPassed && m('div.bg-green-50.dark:bg-green-900/20.border.border-green-200.dark:border-green-800.rounded.p-3', [
                                            m('p.text-sm.font-medium.text-green-800.dark:text-green-300', '✓ Test Passed')
                                        ])
                                    ]
                                ])
                            ]),
                            m('div.flex.gap-2', [
                                m('button.px-3.py-1.text-sm.bg-blue-500.text-white.rounded.hover:bg-blue-600', {
                                    onclick: () => this.runSingleTest(test.id),
                                    disabled: this.runningTests
                                }, '▶ Run'),
                                m('button.px-3.py-1.text-sm.bg-red-500.text-white.rounded.hover:bg-red-600', {
                                    onclick: () => this.deleteTest(test.id)
                                }, 'Delete')
                            ])
                        ])
                    ]);
                })),
            
            // Create Test Modal
            this.showCreateModal && m('div.fixed.inset-0.bg-black.bg-opacity-50.flex.items-center.justify-center.z-50', {
                onclick: () => this.showCreateModal = false
            }, [
                m('div.bg-white.dark:bg-gray-800.rounded-lg.p-6.max-w-2xl.w-full.overflow-y-auto', {
                    onclick: (e) => e.stopPropagation(),
                    style: 'max-height: 90vh;'
                }, [
                    m('h3.text-xl.font-bold.mb-4.text-gray-900.dark:text-white', 'Create New Test'),
                    m('form', {
                        onsubmit: (e) => {
                            e.preventDefault();
                            this.createTest();
                        }
                    }, [
                        m('div.space-y-4', [
                            m('div', [
                                m('label.block.text-sm.font-medium.mb-1', 'Test Name'),
                                m('input.w-full.p-2.border.rounded.dark:bg-gray-700.dark:border-gray-600', {
                                    value: this.newTest.name,
                                    oninput: (e) => this.newTest.name = e.target.value,
                                    required: true,
                                    placeholder: 'Valid user creation'
                                })
                            ]),
                            m('div', [
                                m('label.block.text-sm.font-medium.mb-1', 'Description'),
                                m('textarea.w-full.p-2.border.rounded.dark:bg-gray-700.dark:border-gray-600', {
                                    value: this.newTest.description,
                                    oninput: (e) => this.newTest.description = e.target.value,
                                    rows: 2
                                })
                            ]),
                            m('div.grid.grid-cols-2.gap-4', [
                                m('div', [
                                    m('label.block.text-sm.font-medium.mb-1', 'Method'),
                                    m('select.w-full.p-2.border.rounded.dark:bg-gray-700.dark:border-gray-600', {
                                        value: this.newTest.request_method,
                                        onchange: (e) => this.newTest.request_method = e.target.value
                                    }, [
                                        m('option', {value: 'GET'}, 'GET'),
                                        m('option', {value: 'POST'}, 'POST'),
                                        m('option', {value: 'PUT'}, 'PUT'),
                                        m('option', {value: 'DELETE'}, 'DELETE')
                                    ])
                                ]),
                                m('div', [
                                    m('label.block.text-sm.font-medium.mb-1', 'Expected Status'),
                                    m('select.w-full.p-2.border.rounded.dark:bg-gray-700.dark:border-gray-600', {
                                        value: this.newTest.expected_status,
                                        onchange: (e) => this.newTest.expected_status = e.target.value
                                    }, [
                                        m('option', {value: 'SUCCESS'}, 'SUCCESS'),
                                        m('option', {value: 'ERROR'}, 'ERROR')
                                    ])
                                ])
                            ]),
                            m('div', [
                                m('label.block.text-sm.font-medium.mb-1', 'Request Headers (JSON)'),
                                m('textarea.w-full.p-2.border.rounded.font-mono.text-sm.dark:bg-gray-700.dark:border-gray-600', {
                                    value: this.newTest.request_headers,
                                    oninput: (e) => this.newTest.request_headers = e.target.value,
                                    rows: 3
                                })
                            ]),
                            m('div', [
                                m('label.block.text-sm.font-medium.mb-1', 'Request Body (JSON)'),
                                m('textarea.w-full.p-2.border.rounded.font-mono.text-sm.dark:bg-gray-700.dark:border-gray-600', {
                                    value: this.newTest.request_body,
                                    oninput: (e) => this.newTest.request_body = e.target.value,
                                    rows: 4
                                })
                            ]),
                            m('div', [
                                m('label.block.text-sm.font-medium.mb-1', 'Expected Output (JSON)'),
                                m('textarea.w-full.p-2.border.rounded.font-mono.text-sm.dark:bg-gray-700.dark:border-gray-600', {
                                    value: this.newTest.expected_output,
                                    oninput: (e) => this.newTest.expected_output = e.target.value,
                                    rows: 4
                                })
                            ]),
                            // Assertions Section
                            m('div.border-t.pt-4.mt-4', [
                                m('div.flex.justify-between.items-center.mb-3', [
                                    m('label.block.text-sm.font-medium', 'Assertions (Advanced)'),
                                    m('button.text-sm.px-3.py-1.bg-green-500.text-white.rounded.hover:bg-green-600', {
                                        type: 'button',
                                        onclick: () => this.addAssertion()
                                    }, '+ Add Assertion')
                                ]),
                                this.newTest.assertions.length === 0 
                                    ? m('p.text-sm.text-gray-500.dark:text-gray-400', 'No assertions yet. Add assertions to validate specific fields in the response.')
                                    : m('div.space-y-3', this.newTest.assertions.map((assertion, idx) => 
                                        m('div.p-3.border.rounded.dark:border-gray-600.bg-gray-50.dark:bg-gray-900', [
                                            m('div.flex.justify-between.items-start.mb-2', [
                                                m('span.text-xs.font-medium.text-gray-700.dark:text-gray-300', `Assertion ${idx + 1}`),
                                                m('button.text-red-500.hover:text-red-700.text-xs', {
                                                    type: 'button',
                                                    onclick: () => this.removeAssertion(idx)
                                                }, '✕ Remove')
                                            ]),
                                            m('div.grid.grid-cols-2.gap-2', [
                                                m('div', [
                                                    m('label.block.text-xs.mb-1', 'Type'),
                                                    m('select.w-full.p-1.text-sm.border.rounded.dark:bg-gray-700.dark:border-gray-600', {
                                                        value: assertion.type,
                                                        onchange: (e) => assertion.type = e.target.value
                                                    }, [
                                                        m('option', {value: 'field_exists'}, 'Field Exists'),
                                                        m('option', {value: 'field_equals'}, 'Field Equals'),
                                                        m('option', {value: 'field_type'}, 'Field Type'),
                                                        m('option', {value: 'field_contains'}, 'Field Contains')
                                                    ])
                                                ]),
                                                m('div', [
                                                    m('label.block.text-xs.mb-1', 'Path'),
                                                    m('input.w-full.p-1.text-sm.border.rounded.dark:bg-gray-700.dark:border-gray-600', {
                                                        value: assertion.path,
                                                        oninput: (e) => assertion.path = e.target.value,
                                                        placeholder: 'e.g., user.email'
                                                    })
                                                ])
                                            ]),
                                            // Conditional fields based on assertion type
                                            (assertion.type === 'field_equals' || assertion.type === 'field_type' || assertion.type === 'field_contains') && m('div.mt-2', [
                                                m('label.block.text-xs.mb-1', 
                                                    assertion.type === 'field_equals' ? 'Expected Value' :
                                                    assertion.type === 'field_type' ? 'Expected Type' : 'Substring'),
                                                m('input.w-full.p-1.text-sm.border.rounded.dark:bg-gray-700.dark:border-gray-600', {
                                                    value: assertion.type === 'field_equals' ? assertion.value :
                                                           assertion.type === 'field_type' ? assertion.expectedType :
                                                           assertion.substring,
                                                    oninput: (e) => {
                                                        if (assertion.type === 'field_equals') assertion.value = e.target.value;
                                                        else if (assertion.type === 'field_type') assertion.expectedType = e.target.value;
                                                        else assertion.substring = e.target.value;
                                                    },
                                                    placeholder: assertion.type === 'field_type' ? 'str, int, bool, etc.' : ''
                                                })
                                            ]),
                                            m('div.mt-2', [
                                                m('label.block.text-xs.mb-1', 'Description (Optional)'),
                                                m('input.w-full.p-1.text-sm.border.rounded.dark:bg-gray-700.dark:border-gray-600', {
                                                    value: assertion.description,
                                                    oninput: (e) => assertion.description = e.target.value,
                                                    placeholder: 'Describe this check'
                                                })
                                            ])
                                        ])
                                    ))
                            ])
                        ]),
                        m('div.flex.justify-end.gap-2.mt-6', [
                            m('button.px-4.py-2.border.rounded.hover:bg-gray-100.dark:hover:bg-gray-700', {
                                type: 'button',
                                onclick: () => this.showCreateModal = false
                            }, 'Cancel'),
                            m('button.px-4.py-2.bg-blue-500.text-white.rounded.hover:bg-blue-600', {
                                type: 'submit'
                            }, 'Create Test')
                        ])
                    ])
                ])
            ])
        ]);
    }
};