import { t, i18n } from '../../i18n.js';
import { router } from '../../router.js';

class PageCreate extends HTMLElement {
    constructor() {
        super();
        this.formData = {
            title: '',
            description: '',
            price: '',
            category: '',
            location: ''
        };
    }

    connectedCallback() {
        this.render();
        this.unsubscribe = i18n.subscribe(() => this.render());
    }

    disconnectedCallback() {
        if (this.unsubscribe) this.unsubscribe();
    }

    render() {
        this.innerHTML = /* html */ `
            <div class="create-page">
                <h1 data-i18n="create.title">${t('create.title')}</h1>
                
                <form id="create-form" class="create-form">
                    <div class="form-group">
                        <label class="label" for="title" data-i18n="create.listingTitle">${t('create.listingTitle')}</label>
                        <input 
                            type="text" 
                            class="input" 
                            id="title" 
                            name="title"
                            value="${this.escapeHtml(this.formData.title)}"
                            required
                            data-i18n-placeholder="create.titlePlaceholder"
                            placeholder="${t('create.titlePlaceholder')}"
                        >
                    </div>
                    
                    <div class="form-group">
                        <label class="label" for="category" data-i18n="create.category">${t('create.category')}</label>
                        <select class="input" id="category" name="category" required>
                            <option value="">${t('create.selectCategory')}</option>
                            <option value="electronics" ${this.formData.category === 'electronics' ? 'selected' : ''}>${t('categories.electronics')}</option>
                            <option value="furniture" ${this.formData.category === 'furniture' ? 'selected' : ''}>${t('categories.furniture')}</option>
                            <option value="clothing" ${this.formData.category === 'clothing' ? 'selected' : ''}>${t('categories.clothing')}</option>
                            <option value="vehicles" ${this.formData.category === 'vehicles' ? 'selected' : ''}>${t('categories.vehicles')}</option>
                            <option value="sports" ${this.formData.category === 'sports' ? 'selected' : ''}>${t('categories.sports')}</option>
                            <option value="books" ${this.formData.category === 'books' ? 'selected' : ''}>${t('categories.books')}</option>
                            <option value="garden" ${this.formData.category === 'garden' ? 'selected' : ''}>${t('categories.garden')}</option>
                            <option value="other" ${this.formData.category === 'other' ? 'selected' : ''}>${t('categories.other')}</option>
                        </select>
                    </div>
                    
                    <div class="form-group">
                        <label class="label" for="price" data-i18n="create.price">${t('create.price')}</label>
                        <input 
                            type="number" 
                            class="input" 
                            id="price" 
                            name="price"
                            value="${this.formData.price}"
                            min="0"
                            step="0.01"
                            required
                            placeholder="0.00"
                        >
                    </div>
                    
                    <div class="form-group">
                        <label class="label" for="location" data-i18n="create.location">${t('create.location')}</label>
                        <input 
                            type="text" 
                            class="input" 
                            id="location" 
                            name="location"
                            value="${this.escapeHtml(this.formData.location)}"
                            required
                            data-i18n-placeholder="create.locationPlaceholder"
                            placeholder="${t('create.locationPlaceholder')}"
                        >
                    </div>
                    
                    <div class="form-group">
                        <label class="label" for="description" data-i18n="create.description">${t('create.description')}</label>
                        <textarea 
                            class="input" 
                            id="description" 
                            name="description"
                            rows="5"
                            required
                            data-i18n-placeholder="create.descriptionPlaceholder"
                            placeholder="${t('create.descriptionPlaceholder')}"
                        >${this.escapeHtml(this.formData.description)}</textarea>
                    </div>
                    
                    <div class="form-group">
                        <label class="label" data-i18n="create.images">${t('create.images')}</label>
                        <div class="image-upload">
                            <input type="file" id="images" name="images" accept="image/*" multiple hidden>
                            <label for="images" class="upload-area">
                                <span class="upload-icon">📷</span>
                                <span data-i18n="create.uploadImages">${t('create.uploadImages')}</span>
                            </label>
                        </div>
                    </div>
                    
                    <div class="form-actions">
                        <button type="button" class="btn btn-outline btn-lg" id="cancel-btn">
                            ${t('create.cancel')}
                        </button>
                        <button type="submit" class="btn btn-primary btn-lg">
                            ${t('create.publish')}
                        </button>
                    </div>
                </form>
            </div>
        `;

        this.setupEventListeners();
    }

    setupEventListeners() {
        const form = this.querySelector('#create-form');
        const cancelBtn = this.querySelector('#cancel-btn');

        form.addEventListener('submit', (e) => this.handleSubmit(e));
        cancelBtn.addEventListener('click', () => router.back());

        form.querySelectorAll('input, textarea, select').forEach(input => {
            input.addEventListener('input', (e) => {
                this.formData[e.target.name] = e.target.value;
            });
        });
    }

    async handleSubmit(e) {
        e.preventDefault();
        
        const form = e.target;
        const submitBtn = form.querySelector('[type="submit"]');
        submitBtn.disabled = true;
        submitBtn.textContent = t('create.publishing');
        
        await new Promise(resolve => setTimeout(resolve, 1000));
        
        console.log('Creating listing:', this.formData);
        
        router.navigate('/');
    }

    escapeHtml(text) {
        const div = document.createElement('div');
        div.textContent = text;
        return div.innerHTML;
    }
}

customElements.define('page-create', PageCreate);

const style = document.createElement('style');
style.textContent = /* css */ `
    page-create .create-page {
        max-width: 600px;
        margin: 0 auto;
    }
    
    page-create .create-page h1 {
        margin-bottom: var(--space-xl);
    }
    
    page-create .create-form .form-group {
        margin-bottom: var(--space-lg);
    }
    
    page-create textarea.input {
        resize: vertical;
        min-height: 120px;
    }
    
    page-create .image-upload {
        border: 2px dashed var(--color-border);
        border-radius: var(--radius-lg);
        overflow: hidden;
    }
    
    page-create .upload-area {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: var(--space-2xl);
        cursor: pointer;
        transition: background-color var(--transition-fast);
    }
    
    page-create .upload-area:hover {
        background-color: var(--color-bg-secondary);
    }
    
    page-create .upload-icon {
        font-size: 2rem;
        margin-bottom: var(--space-sm);
    }
    
    page-create .form-actions {
        display: flex;
        gap: var(--space-md);
        justify-content: flex-end;
        margin-top: var(--space-xl);
    }
`;
document.head.appendChild(style);