// Material Form Component for adding/editing materials
const { useState, useEffect } = React;

function MaterialForm({
    material,
    onChange,
    isEditing,
    loading,
    types,
    onOpenTypeModal,
    onOpenClassificationCodeModal,
    showAlert
}) {
    return (
        <>
            {/* Үндсэн мэдээлэл */}
            <div className="settings-section">
                <h3 className="settings-section-title" style={{ fontSize: '13px' }}>Үндсэн мэдээлэл</h3>
                <div className="settings-grid" style={{ gridTemplateColumns: 'repeat(3, 1fr)' }}>
                    <div className="settings-form-group" style={{ gridColumn: '1 / -1' }}>
                        <label>Барааны нэр <span>*</span></label>
                        <input
                            type="text"
                            className="form-input"
                            value={material.m_name}
                            onChange={(e) => onChange({...material, m_name: e.target.value})}
                            onKeyPress={(e) => {
                                if (e.key === 'Enter') {
                                    e.preventDefault();
                                    const nameValue = (material.m_name || '').toString().trim();
                                    const shortnameValue = nameValue.length > 20 ? nameValue.slice(0, 20) : nameValue;
                                    if (shortnameValue) {
                                        onChange({ ...material, shortname: shortnameValue });
                                    }
                                    setTimeout(() => {
                                        const shortnameInput = document.getElementById('materialShortnameInput');
                                        if (shortnameInput) {
                                            shortnameInput.focus();
                                            shortnameInput.select();
                                        }
                                    }, 0);
                                }
                            }}
                            placeholder="Барааны нэр"
                            disabled={loading}
                        />
                    </div>
                    <div className="settings-form-group" style={{ gridColumn: '1 / -1' }}>
                        <label>Товч нэр (shortname)</label>
                        <input
                            id="materialShortnameInput"
                            type="text"
                            className="form-input"
                            value={material.shortname || ''}
                            onChange={(e) => onChange({...material, shortname: e.target.value})}
                            placeholder="Товч нэр"
                            disabled={loading}
                        />
                    </div>
                    <div className="settings-form-group">
                        <label>Брэнд</label>
                        <input
                            type="text"
                            className="form-input"
                            value={material.brand || ''}
                            onChange={(e) => onChange({...material, brand: e.target.value})}
                            placeholder="Брэнд"
                            disabled={loading}
                        />
                    </div>
                    <div className="settings-form-group">
                        <label>Төрөл (m_type)</label>
                        <div style={{ display: 'flex', gap: '4px' }}>
                            <input
                                type="text"
                                className="form-input"
                                value={material.m_type || ''}
                                onChange={(e) => onChange({...material, m_type: e.target.value})}
                                placeholder="Төрөл бичих"
                                disabled={loading}
                                style={{ flex: 1 }}
                            />
                            <button
                                type="button"
                                className="btn btn-secondary"
                                onClick={onOpenTypeModal}
                                disabled={loading}
                                style={{ padding: '8px 12px', fontSize: '12px', whiteSpace: 'nowrap' }}
                                title="Төрөл удирдах"
                            >
                                📝
                            </button>
                        </div>
                    </div>
                    <div className="settings-form-group">
                        <label>Хэмжих нэгж (xn)</label>
                        <input
                            type="text"
                            className="form-input"
                            value={material.xn}
                            onChange={(e) => onChange({...material, xn: e.target.value})}
                            placeholder="ш, кг, л, гэх мэт"
                            disabled={loading}
                        />
                    </div>
                    <div className="settings-form-group">
                        <label>Дотоод код (dotcode) <span>*</span></label>
                        <input
                            type="text"
                            className="form-input"
                            value={material.dotcode || ''}
                            onChange={(e) => onChange({...material, dotcode: e.target.value})}
                            placeholder="Дотоод код"
                            disabled={loading}
                            required
                        />
                    </div>
                    <div className="settings-form-group">
                        <label>Баркод</label>
                        <input
                            type="text"
                            className="form-input"
                            value={material.barcode}
                            onChange={(e) => onChange({...material, barcode: e.target.value})}
                            placeholder="Баркод"
                            disabled={loading}
                        />
                    </div>
                    <div className="settings-form-group">
                        <div className="settings-checkbox-group" onClick={() => !loading && onChange({...material, nodiscount: !material.nodiscount})}>
                            <input
                                type="checkbox"
                                checked={material.nodiscount}
                                onChange={(e) => onChange({...material, nodiscount: e.target.checked})}
                                disabled={loading}
                            />
                            <label>Хөнгөлөлт үгүй (nodiscount)</label>
                        </div>
                    </div>
                </div>
            </div>

            {/* Үнэ — жижиглэн + бөөний эхлэх тоо (pcount) ба бөөний нэгж үнэ (price_big) */}
            <div className="settings-section">
                <h3 className="settings-section-title" style={{ fontSize: '13px' }}>Үнэ</h3>
                <p style={{ fontSize: '11px', color: '#555', margin: '0 0 8px 0', lineHeight: 1.4 }}>
                    Бөөний тоо (pcount) болон бөөний үнэ (price_big) нь нөөц биш: зарагдах тоо <strong>pcount-аас бага биш</strong> (pcount ≤ тоо) үед нэгж үнээр <strong>price_big</strong> хэрэглэнэ.
                </p>
                <div className="settings-grid" style={{ gridTemplateColumns: 'repeat(3, 1fr)' }}>
                    <div className="settings-form-group">
                        <label>Жижиглэнгийн үнэ (price_low)</label>
                        <input
                            id="materialPriceLowInput"
                            type="number"
                            className="form-input"
                            value={material.price_low === undefined || material.price_low === null ? '' : material.price_low}
                            onChange={(e) => onChange({...material, price_low: e.target.value})}
                            placeholder="0.00"
                            step="0.01"
                            min="0"
                            disabled={loading}
                        />
                    </div>
                    <div className="settings-form-group">
                        <label title="Зарагдах тоо ≥ pcount үед нэгж үнээр price_big ашиглана">Бөөний эхлэх тоо (pcount)</label>
                        <input
                            type="number"
                            className="form-input"
                            value={material.pcount === undefined || material.pcount === null ? '' : material.pcount}
                            onChange={(e) => onChange({...material, pcount: e.target.value})}
                            placeholder="Жишээ: 10"
                            step="0.01"
                            min="0"
                            disabled={loading}
                        />
                    </div>
                    <div className="settings-form-group">
                        <label title="Зарагдах тоо pcount-аас бага биш үед хэрэглэх нэгж үнэ">Бөөний нэгж үнэ (price_big)</label>
                        <input
                            type="number"
                            className="form-input"
                            value={material.price_big === undefined || material.price_big === null ? '' : material.price_big}
                            onChange={(e) => onChange({...material, price_big: e.target.value})}
                            placeholder="0.00"
                            step="0.01"
                            min="0"
                            disabled={loading}
                        />
                    </div>
                </div>
            </div>

            {/* Татварын мэдээлэл */}
            <div className="settings-section">
                <h3 className="settings-section-title" style={{ fontSize: '13px' }}>Татварын мэдээлэл</h3>
                <div className="settings-grid" style={{ gridTemplateColumns: 'repeat(3, 1fr)' }}>
                    <div className="settings-form-group">
                        <label>Хотын татварын хувь (ct_per)</label>
                        <input
                            type="number"
                            className="form-input"
                            value={material.ct_per}
                            onChange={(e) => onChange({...material, ct_per: e.target.value})}
                            placeholder="0.00"
                            step="0.01"
                            min="0"
                            disabled={loading}
                        />
                    </div>
                    <div className="settings-form-group">
                        <label>Merchant TIN</label>
                        <input
                            type="text"
                            className="form-input"
                            value={material.merchantTin}
                            onChange={(e) => onChange({...material, merchantTin: e.target.value})}
                            placeholder="Merchant TIN"
                            disabled={loading}
                        />
                    </div>
                    <div className="settings-form-group">
                        <label>Татварын төрөл (taxType)</label>
                        <input
                            type="text"
                            className="form-input"
                            value={material.taxType}
                            onChange={(e) => onChange({...material, taxType: e.target.value})}
                            placeholder="Татварын төрөл"
                            disabled={loading}
                        />
                    </div>
                    <div className="settings-form-group">
                        <label>Ангилалын код (classificationCode)</label>
                        <div style={{ display: 'flex', gap: '4px' }}>
                            <input
                                type="text"
                                className="form-input"
                                value={material.classificationCode || ''}
                                onChange={(e) => onChange({...material, classificationCode: e.target.value})}
                                placeholder="Ангилалын код"
                                disabled={loading}
                                style={{ flex: 1 }}
                            />
                            <button
                                type="button"
                                className="btn btn-secondary"
                                onClick={onOpenClassificationCodeModal}
                                disabled={loading}
                                style={{ padding: '8px 12px', fontSize: '12px', whiteSpace: 'nowrap' }}
                                title="Татварын системээс сонгох"
                            >
                                🔍
                            </button>
                        </div>
                    </div>
                    <div className="settings-form-group">
                        <label>Татварын бүтээгдэхүүний код (taxProductCode)</label>
                        <input
                            type="text"
                            className="form-input"
                            value={material.taxProductCode}
                            onChange={(e) => onChange({...material, taxProductCode: e.target.value})}
                            placeholder="Татварын бүтээгдэхүний код"
                            disabled={loading}
                        />
                    </div>
                </div>
            </div>
        </>
    );
}

// Make available globally for browser
if (typeof window !== 'undefined') {
    window.MaterialForm = MaterialForm;
}