const fs = require('fs');

let content = fs.readFileSync('src/App.jsx', 'utf8');
let lines = content.split('\n');

// 1312 is index 1311.
// 1327 is index 1326.
// We want to remove from index 1311 up to (but not including) index 1326.
// Count to remove = 1326 - 1311 = 15 lines.

const newContent = `                                        <label className="flex items-center gap-3 p-4 rounded-xl border border-gray-100 dark:border-gray-800 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
                                            <input type="checkbox" name="isWishlist" defaultChecked={editingItem?.status === 'wishlist'} className="w-5 h-5 text-primary-600 focus:ring-primary-500 rounded-lg" />
                                            <div>
                                                <span className="font-bold text-sm text-inherit">{t('wishlistDesc')}</span>
                                                <p className="text-[10px] uppercase tracking-widest opacity-50">{t('addFuturePurchase')}</p>
                                            </div>
                                        </label>
                                        <div className="space-y-2">
                                            <label className="text-[10px] font-black uppercase opacity-40 tracking-widest ml-1 text-inherit">{t('color')} *</label>
                                            <div className="flex flex-wrap gap-2">
                                                {['Vermelho', 'Azul', 'Amarelo', 'Verde', 'Laranja', 'Roxo', 'Branco', 'Preto', 'Cinzento', 'Bege'].map(c => {
                                                    const translatedColor = c === 'Vermelho' ? t('colorRed') : c === 'Azul' ? t('colorBlue') : c === 'Amarelo' ? t('colorYellow') : c === 'Verde' ? t('colorGreen') : c === 'Laranja' ? t('colorOrange') : c === 'Roxo' ? t('colorPurple') : c === 'Branco' ? t('colorWhite') : c === 'Preto' ? t('colorBlack') : c === 'Cinzento' ? t('colorGray') : c === 'Bege' ? t('colorBeige') : c;
                                                    return (
                                                        <button
                                                            key={c}
                                                            type="button"
                                                            onClick={() => {
                                                                if (itemColors.includes(c)) setItemColors(itemColors.filter(color => color !== c));
                                                                else setItemColors([...itemColors, c]);
                                                            }}
                                                            className={\`px-4 py-2 rounded-xl text-xs font-bold transition-all border-2 \${itemColors.includes(c) ? 'border-primary-600 bg-primary-600 text-white shadow-lg shadow-primary-600/30' : 'border-transparent bg-gray-100 dark:bg-gray-800 text-gray-500 hover:bg-gray-200 dark:hover:bg-gray-700'}\`}
                                                        >
                                                            {translatedColor}
                                                        </button>
                                                    );
                                                })}
                                            </div>
                                            <input type="hidden" name="color" value={itemColors.join(', ')} />
                                            {itemColors.length === 0 && <p className="text-[10px] text-red-500 uppercase tracking-widest font-black mt-2">Selecione pelo menos uma cor</p>}
                                        </div>`.split('\n');

lines.splice(1311, 16, ...newContent);

fs.writeFileSync('src/App.jsx', lines.join('\n'));
console.log('App.jsx fixed successfully!');