// src/js/tools/carInfoTool.js
import BaseTool from '../baseTool.js';
import i18n from '../i18n.js';

class CarInfoTool extends BaseTool {
    constructor() {
        super('car-info', '车辆信息查询');
        this.dom = {};
        this.apiUrl = 'https://api.jkyai.top/API/clxxcx.php';
    }

    render() {
        return `
            <div class="page-container car-info-tool-container" style="display: flex; flex-direction: column; height: 100%;">
                <div class="content-area" style="padding: 20px; flex-grow: 1; display: flex; flex-direction: column; gap: 20px; overflow-y: auto;">
                    
                    <div class="settings-section" style="position: relative;">
                        <button id="back-to-toolbox-btn" class="back-btn ripple" style="position: absolute; top: 0; left: 0; z-index: 10;">
                            <i class="fas fa-arrow-left"></i> ${i18n.t('common.backToToolbox', '返回工具箱')}
                        </button>
                        <div style="text-align: center; margin-bottom: 20px;">
                            <h2><i class="fas fa-car"></i> ${i18n.t('tool.carInfo.title', '车辆信息查询')}</h2>
                            <p style="color: var(--text-secondary); margin-top: 8px;">${i18n.t('tool.carInfo.description', '查询车辆品牌、系列、价格等详细信息')}</p>
                        </div>
                        
                        <div class="query-section" style="background: rgba(var(--card-background-rgb), 0.5); padding: 24px; border-radius: 12px; margin-bottom: 24px;">
                            <form id="car-info-query-form">
                                <div class="form-row" style="display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap;">
                                    <div class="form-group" style="flex: 1; min-width: 300px;">
                                        <label for="car-info-msg" class="form-label" style="display: block; font-size: 14px; font-weight: 600; color: var(--text-primary); margin-bottom: 8px;">${i18n.t('tool.carInfo.vehicleName', '车辆名称/品牌')}</label>
                                        <input type="text" id="car-info-msg" name="msg" class="form-input" placeholder="${i18n.t('tool.carInfo.vehicleNamePlaceholder', '请输入车辆名称或品牌，例如：问界、比亚迪')}" required style="width: 100%; padding: 12px 16px; border: 1px solid var(--border-color); border-radius: 8px; font-size: 16px; font-weight: 500; box-sizing: border-box; height: 48px; background: var(--input-bg); color: var(--text-primary);">
                                    </div>
                                    <button type="submit" class="action-btn ripple" id="car-info-query-btn" style="min-width: 120px; height: 48px;">
                                        <i class="fas fa-search"></i> ${i18n.t('tool.carInfo.query', '查询车辆信息')}
                                    </button>
                                </div>
                            </form>
                        </div>
                        
                        <div class="error-container" id="car-info-error-container" style="display: none; background: rgba(220, 53, 69, 0.1); border: 1px solid rgba(220, 53, 69, 0.3); border-radius: 8px; padding: 20px; color: #dc3545; margin-bottom: 30px;">
                            <div class="error-message" id="car-info-error-message"></div>
                        </div>
                    </div>
                    
                    <div class="settings-section" id="car-info-result-section" style="display: none;">
                        <h2><i class="fas fa-list"></i> ${i18n.t('tool.carInfo.results', '查询结果')}</h2>
                        <div class="car-grid" id="car-info-car-grid" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; margin-bottom: 30px;"></div>
                    </div>
                    
                    <div class="loading-container" id="car-info-loading-container" style="display: none; text-align: center; padding: 60px 0; color: var(--text-secondary);">
                        <div class="loading-spinner" style="display: inline-block; width: 40px; height: 40px; border: 3px solid rgba(var(--primary-rgb), 0.1); border-radius: 50%; border-top-color: var(--primary-color); animation: spin 1s ease-in-out infinite; margin-bottom: 16px;"></div>
                        <p>${i18n.t('tool.carInfo.loading', '正在查询车辆信息，请稍候...')}</p>
                    </div>
                </div>
            </div>
        `;
    }

    init() {
        this._log('车辆信息工具初始化');

        this.dom = {
            queryForm: document.getElementById('car-info-query-form'),
            msgInput: document.getElementById('car-info-msg'),
            queryBtn: document.getElementById('car-info-query-btn'),
            resultSection: document.getElementById('car-info-result-section'),
            carGrid: document.getElementById('car-info-car-grid'),
            loadingContainer: document.getElementById('car-info-loading-container'),
            errorContainer: document.getElementById('car-info-error-container'),
            errorMessage: document.getElementById('car-info-error-message')
        };

        this.dom.queryForm.addEventListener('submit', (e) => {
            e.preventDefault();
            this.queryCarInfo();
        });

        // 返回工具箱按钮
        document.getElementById('back-to-toolbox-btn')?.addEventListener('click', () => {
            window.mainPage.navigateTo('toolbox');
            window.mainPage.updateActiveNavButton(document.getElementById('toolbox-btn'));
        });
    }

    async queryCarInfo() {
        const msg = this.dom.msgInput.value.trim();

        if (!msg) {
            this.showError(i18n.t('tool.carInfo.enterVehicleName', '请输入车辆名称或品牌'));
            return;
        }

        this.showLoading();

        const startTime = Date.now();

        try {
            const params = new URLSearchParams();
            params.append('msg', msg);
            params.append('type', 'json');

            const requestUrl = `${this.apiUrl}?${params.toString()}`;

            const response = await fetch(requestUrl, {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json'
                }
            });

            if (!response.ok) {
                throw new Error(`HTTP Error! Status code: ${response.status}`);
            }

            const data = await response.json();
            const responseTime = Date.now() - startTime;

            if ((data.code === 200 || data.code === 201) && data.data) {
                this.showResults(data.data);
                this._log(`成功查询车辆信息，耗时 ${responseTime}ms`);
            } else {
                this.showError(data.message || i18n.t('tool.carInfo.queryFailed', '查询失败'));
                this._log(`查询车辆信息失败: ${data.message || '未知错误'}`);
            }
        } catch (error) {
            console.error('Query failed:', error);
            this.showError(i18n.t('tool.carInfo.queryFailed', '查询失败') + ': ' + error.message);
            this._log(`查询车辆信息失败: ${error.message}`);
        } finally {
            this.hideLoading();
        }
    }

    showResults(carList) {
        this.dom.carGrid.innerHTML = '';

        if (carList.length > 0) {
            carList.forEach(car => {
                const card = this.createCarCard(car);
                this.dom.carGrid.appendChild(card);
            });
        } else {
            this.dom.carGrid.innerHTML = `<div style="grid-column: 1 / -1; text-align: center; padding: 40px; color: var(--text-secondary);">${i18n.t('tool.carInfo.noResults', '未找到车辆信息')}</div>`;
        }

        this.dom.resultSection.style.display = 'block';
    }

    createCarCard(car) {
        const card = document.createElement('div');
        card.className = 'car-card';
        card.style.cssText = 'background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 8px; overflow: hidden; transition: all 0.3s ease;';

        card.innerHTML = `
            <img src="${car.white_pic_url || 'https://via.placeholder.com/320x200'}" alt="${car.series_name || 'Vehicle Image'}" class="car-image" style="width: 100%; height: 200px; object-fit: cover; display: block;">
            <div class="car-info" style="padding: 16px;">
                <div class="car-brand" style="font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-bottom: 4px;">${car.brand_name || i18n.t('tool.carInfo.unknownBrand', '未知品牌')}</div>
                <div class="car-name" style="font-size: 18px; font-weight: 700; color: var(--text-primary); margin-bottom: 8px;">${car.series_name || i18n.t('tool.carInfo.unknownModel', '未知型号')}</div>
                <div class="car-price" style="font-size: 16px; font-weight: 700; color: #d63031; margin-bottom: 8px;">${car.official_price || i18n.t('tool.carInfo.priceNegotiable', '价格面议')}</div>
                <div class="car-level" style="font-size: 14px; color: var(--text-secondary);">${car.level || i18n.t('tool.carInfo.unknownLevel', '未知级别')}</div>
            </div>
        `;

        card.addEventListener('mouseenter', () => {
            card.style.transform = 'translateY(-2px)';
            card.style.boxShadow = '0 4px 12px rgba(0, 0, 0, 0.1)';
            card.style.borderColor = 'var(--primary-color)';
        });

        card.addEventListener('mouseleave', () => {
            card.style.transform = 'translateY(0)';
            card.style.boxShadow = 'none';
            card.style.borderColor = 'var(--border-color)';
        });

        return card;
    }

    showLoading() {
        this.dom.queryBtn.disabled = true;
        this.dom.queryBtn.innerHTML = `<i class="fas fa-spinner fa-spin"></i> ${i18n.t('tool.carInfo.querying', '查询中...')}`;
        this.dom.loadingContainer.style.display = 'block';
        this.dom.resultSection.style.display = 'none';
        this.dom.errorContainer.style.display = 'none';
    }

    hideLoading() {
        this.dom.queryBtn.disabled = false;
        this.dom.queryBtn.innerHTML = `<i class="fas fa-search"></i> ${i18n.t('tool.carInfo.query', '查询车辆信息')}`;
        this.dom.loadingContainer.style.display = 'none';
    }

    showError(message) {
        this.dom.errorMessage.textContent = message;
        this.dom.errorContainer.style.display = 'block';
        this.dom.resultSection.style.display = 'none';
        this.dom.loadingContainer.style.display = 'none';
        this.dom.queryBtn.disabled = false;
        this.dom.queryBtn.innerHTML = `<i class="fas fa-search"></i> ${i18n.t('tool.carInfo.query', '查询车辆信息')}`;
    }
}

export default CarInfoTool;