const { useState } = React;

window.AdminAcademyUpgrades = function({ lang, isTemplate, setToast }) {
  const [items, setItems] = useState([...(window.GAME_CONTENT.xpUpgrades || (!isTemplate ? window.XP_UPGRADES : []))]);
  const [editingIndex, setEditingIndex] = useState(null);
  const [showExportModal, setShowExportModal] = useState(false);
  const [selectedItems, setSelectedItems] = useState(new Set());
  const [deleteTarget, setDeleteTarget] = useState(null);
  const [showBulkDeleteModal, setShowBulkDeleteModal] = useState(false);
  const [editLang, setEditLang] = useState('es');
  const [searchTerm, setSearchTerm] = useState('');
  const [saveStatus, setSaveStatus] = useState(false);
  const generators = window.GAME_CONTENT.generators || [];
  
  const [formData, setFormData] = useState({
    id: '',
    name: { es: '', en: '' },
    description: { es: '', en: '' },
    reqLevel: 1,
    baseCost: 0,
    reqGeneratorId: '',
    passiveMult: 0,
    clickMult: 0,
    globalMult: 0,
    xpMult: 0,
    xpMultType: 'both',
    genProdMult: 0,
    iconUrl: '',
    icon: ''
  });

  const descriptionRef = React.useRef(null);

  const adjustHeight = (el) => {
    if (!el) return;
    el.style.setProperty('height', 'auto', 'important');
    el.style.setProperty('height', Math.max(60, el.scrollHeight) + 'px', 'important');
    el.style.setProperty('overflow', 'hidden', 'important');
  };

  React.useEffect(() => {
    if (descriptionRef.current) {
      adjustHeight(descriptionRef.current);
    }
  }, [formData.description, editLang, editingIndex]);

  const saveToGlobal = (newItems) => {
    setItems(newItems);
    window.GAME_CONTENT.xpUpgrades = newItems;
    window.XP_UPGRADES = newItems;
  };

  const handleBenefitBlur = (overrides = {}) => {
    const actualOverrides = (overrides && !overrides.target && !overrides.type) ? overrides : {};
    const currentData = { ...formData, ...actualOverrides };

    let desc_es = (currentData.description?.es || '').trim();
    let desc_en = (currentData.description?.en || '').trim();

    const isAutoGenerated = (text) => {
      if (!text) return true;
      const lines = text.split('\n');
      return lines.every(line => line.trim().startsWith('- +') || line.trim() === '');
    };

    if (isAutoGenerated(desc_es) || isAutoGenerated(desc_en)) {
      const benefits_es = [];
      const benefits_en = [];

      if (Number(currentData.passiveMult) > 0) {
        benefits_es.push(`+${currentData.passiveMult}% prod. pasiva`);
        benefits_en.push(`+${currentData.passiveMult}% passive prod.`);
      }
      if (Number(currentData.clickMult) > 0) {
        benefits_es.push(`+${currentData.clickMult}% poder de click`);
        benefits_en.push(`+${currentData.clickMult}% click power`);
      }
      if (Number(currentData.globalMult) > 0) {
        benefits_es.push(`+${currentData.globalMult}% prod. global`);
        benefits_en.push(`+${currentData.globalMult}% global prod.`);
      }
      if (Number(currentData.xpMult) > 0) {
        const t = currentData.xpMultType || 'both';
        const tEs = t === 'click' ? ' (Click)' : t === 'passive' ? ' (Pasiva)' : ' (Pasiva y click)';
        const tEn = t === 'click' ? ' (Click)' : t === 'passive' ? ' (Passive)' : ' (Passive and click)';
        benefits_es.push(`+${currentData.xpMult}% gen. XP${tEs}`);
        benefits_en.push(`+${currentData.xpMult}% XP gen.${tEn}`);
      }
      if (Number(currentData.genProdMult) > 0 && currentData.reqGeneratorId) {
        const gen = (window.GENERATORS || []).find(g => g.id === currentData.reqGeneratorId);
        const gNameEs = gen ? (gen.name?.es || gen.es || gen.name) : '(?)';
        const gNameEn = gen ? (gen.name?.en || gen.en || gen.name) : '(?)';
        benefits_es.push(`+${currentData.genProdMult}% prod. ${gNameEs}`);
        benefits_en.push(`+${currentData.genProdMult}% prod. ${gNameEn}`);
      }

      const newDescEs = benefits_es.length > 0 ? benefits_es.map(b => `- ${b}`).join('\n') : '';
      const newDescEn = benefits_en.length > 0 ? benefits_en.map(b => `- ${b}`).join('\n') : '';

      if ((isAutoGenerated(desc_es) && desc_es !== newDescEs) || (isAutoGenerated(desc_en) && desc_en !== newDescEn)) {
        setFormData(prev => ({
          ...prev,
          description: {
            es: isAutoGenerated(desc_es) ? newDescEs : prev.description?.es,
            en: isAutoGenerated(desc_en) ? newDescEn : prev.description?.en
          }
        }));
      }
    }
  };

  const handleEdit = (index) => {
    setEditingIndex(index);
    const item = items[index];
    setFormData({
      id: item.id || `academy_${Date.now()}`,
      name: { es: item.name?.es || (typeof item.name === 'string' ? item.name : '') || item.es || '', en: item.name?.en || (typeof item.name === 'string' ? item.name : '') || item.en || '' },
      description: { es: item.description?.es || (typeof item.description === 'string' ? item.description : '') || item.desc_es || '', en: item.description?.en || (typeof item.description === 'string' ? item.description : '') || item.desc_en || '' },
      reqLevel: item.reqLevel || 1,
      baseCost: item.baseCost || item.costXP || 0,
      reqGeneratorId: item.reqGeneratorId || '',
      reqGenQty: item.reqGenQty || '',
      reqAchievementId: item.reqAchievementId || '',
      passiveMult: item.passiveMult || 0,
      clickMult: item.clickMult || 0,
      globalMult: item.globalMult || 0,
      xpMult: item.xpMult || 0,
      xpMultType: item.xpMultType || 'both',
      genProdMult: item.genProdMult || 0,
      iconUrl: item.iconUrl || (item.icon && (item.icon.startsWith('http') || item.icon.startsWith('data:')) ? item.icon : '') || '',
      icon: item.icon && !item.icon.startsWith('http') && !item.icon.startsWith('data:') ? item.icon : ''
    });
  };

  const handleAdd = () => {
    setEditingIndex('new');
    setFormData({
      id: `academy_${Date.now()}`,
      name: { es: '', en: '' },
      description: { es: '', en: '' },
      reqLevel: '',
      baseCost: '',
      reqGeneratorId: '',
      reqGenQty: '',
      reqAchievementId: '',
      passiveMult: '',
      clickMult: '',
      globalMult: '',
      xpMult: '',
      xpMultType: 'both',
      genProdMult: '',
      iconUrl: '',
      icon: ''
    });
  };

  const handleDelete = (index) => {
    setDeleteTarget(index);
  };

  const confirmDelete = () => {
    if (deleteTarget !== null) {
      const newItems = [...items];
      newItems.splice(deleteTarget, 1);
      saveToGlobal(newItems);
      if (editingIndex === deleteTarget) setEditingIndex(null);
      setDeleteTarget(null);
      
      const newSelected = new Set();
      selectedItems.forEach(i => {
        if (i < deleteTarget) newSelected.add(i);
        else if (i > deleteTarget) newSelected.add(i - 1);
      });
      setSelectedItems(newSelected);
    }
  };

  const handleToggleSelect = (index) => {
    const newSet = new Set(selectedItems);
    if (newSet.has(index)) newSet.delete(index);
    else newSet.add(index);
    setSelectedItems(newSet);
  };

  const handleSelectAll = (e) => {
    if (e.target.checked) {
      setSelectedItems(new Set(items.map((_, i) => i)));
    } else {
      setSelectedItems(new Set());
    }
  };

  const confirmBulkDelete = () => {
    const newItems = items.filter((_, i) => !selectedItems.has(i));
    saveToGlobal(newItems);
    setSelectedItems(new Set());
    setShowBulkDeleteModal(false);
    setEditingIndex(null);
  };

  const handleSaveForm = () => {
    let desc_es = (formData.description.es || '').trim();
    let desc_en = (formData.description.en || '').trim();

    if (!desc_es || !desc_en) {
      const benefits_es = [];
      const benefits_en = [];

      if (Number(formData.passiveMult) > 0) {
        benefits_es.push(`+${formData.passiveMult}% prod. pasiva`);
        benefits_en.push(`+${formData.passiveMult}% passive prod.`);
      }
      if (Number(formData.clickMult) > 0) {
        benefits_es.push(`+${formData.clickMult}% poder de click`);
        benefits_en.push(`+${formData.clickMult}% click power`);
      }
      if (Number(formData.globalMult) > 0) {
        benefits_es.push(`+${formData.globalMult}% prod. global`);
        benefits_en.push(`+${formData.globalMult}% global prod.`);
      }
      if (Number(formData.xpMult) > 0) {
        const t = formData.xpMultType || 'both';
        const tEs = t === 'click' ? ' (Click)' : t === 'passive' ? ' (Pasiva)' : ' (Pasiva y click)';
        const tEn = t === 'click' ? ' (Click)' : t === 'passive' ? ' (Passive)' : ' (Passive and click)';
        benefits_es.push(`+${formData.xpMult}% gen. XP${tEs}`);
        benefits_en.push(`+${formData.xpMult}% XP gen.${tEn}`);
      }
      if (Number(formData.genProdMult) > 0 && formData.reqGeneratorId) {
        const gen = (window.GENERATORS || []).find(g => g.id === formData.reqGeneratorId);
        const gNameEs = gen ? (gen.name?.es || gen.es || gen.name) : '(?)';
        const gNameEn = gen ? (gen.name?.en || gen.en || gen.name) : '(?)';
        benefits_es.push(`+${formData.genProdMult}% prod. ${gNameEs}`);
        benefits_en.push(`+${formData.genProdMult}% prod. ${gNameEn}`);
      }

      if (!desc_es && benefits_es.length > 0) {
        desc_es = benefits_es.map(b => `- ${b}`).join('\n');
      }
      if (!desc_en && benefits_en.length > 0) {
        desc_en = benefits_en.map(b => `- ${b}`).join('\n');
      }
    }

    const newItem = {
      ...(editingIndex !== 'new' ? items[editingIndex] : {}),
      id: formData.id,
      name: formData.name,
      description: { es: desc_es, en: desc_en },
      es: formData.name.es,
      en: formData.name.en,
      desc_es: desc_es,
      desc_en: desc_en,
      reqLevel: Number(formData.reqLevel) || 1,
      levelReq: Number(formData.reqLevel) || 1,
      baseCost: Number(formData.baseCost) || 0,
      costXP: Number(formData.baseCost) || 0,
      reqGeneratorId: formData.reqGeneratorId,
      reqGenQty: Number(formData.reqGenQty) || 0,
      reqAchievementId: formData.reqAchievementId,
      passiveMult: Number(formData.passiveMult) || 0,
      clickMult: Number(formData.clickMult) || 0,
      globalMult: Number(formData.globalMult) || 0,
      xpMult: Number(formData.xpMult) || 0,
      xpMultType: formData.xpMultType || 'both',
      genProdMult: Number(formData.genProdMult) || 0,
      iconUrl: formData.iconUrl,
      icon: formData.icon || 'fa-solid fa-image'
    };

    const newItems = [...items];
    let newEditingIndex = editingIndex;
    if (editingIndex === 'new') {
      newItems.push(newItem);
      newEditingIndex = newItems.length - 1;
      setEditingIndex(newEditingIndex);
    } else {
      newItems[editingIndex] = newItem;
    }
    
    saveToGlobal(newItems);
    setSaveStatus(true);
    setTimeout(() => setSaveStatus(false), 2000);
  };

  const getGenName = (id) => {
    if (!id) return 'Ninguno';
    const gen = generators.find(g => g.id === id);
    if (!gen) return 'Desconocido';
    return gen.name?.es || gen.es || (typeof gen.name === 'string' ? gen.name : '(Sin nombre)');
  };

  const filteredItems = items.map((item, index) => ({ item, index })).filter(({ item }) => {
    if (!searchTerm) return true;
    const term = searchTerm.toLowerCase();
    const nameEs = (item.name?.es || item.es || (typeof item.name === 'string' ? item.name : '')).toLowerCase();
    const nameEn = (item.name?.en || item.en || '').toLowerCase();
    const costStr = String(item.baseCost || item.costXP || 0);
    return nameEs.includes(term) || nameEn.includes(term) || costStr.includes(term);
  });

  return (
    <div style={{ padding: 24, display: 'flex', gap: 24, alignItems: 'flex-start' }}>
      {/* List */}
      <div style={{ flex: 1, background: 'var(--bg-2)', padding: 16, borderRadius: 12, border: '1px solid var(--border)' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <input 
              type="checkbox" 
              checked={items.length > 0 && selectedItems.size === items.length}
              onChange={handleSelectAll}
              style={{ cursor: 'pointer', width: 16, height: 16 }}
            />
            <h2 style={{ margin: 0, fontSize: 18 }}>Mejoras de Academia ({items.length})</h2>
          </div>
          <div style={{ display: 'flex', gap: 8 }}>
            {selectedItems.size > 0 && (
              <button className="app-btn" onClick={() => setShowBulkDeleteModal(true)} style={{ background: 'var(--warning-i10)', color: 'var(--warning-i100)' }}>
                <i className="fa-solid fa-trash"></i> Eliminar ({selectedItems.size})
              </button>
            )}
            <button className="app-btn" onClick={() => setShowExportModal(true)} style={{ background: 'var(--bg-3)', border: '1px solid var(--border)' }}>
              <i className="fa-solid fa-copy"></i> {lang === 'es' ? 'Exportar' : 'Export'}
            </button>
            <button className="app-btn" onClick={handleAdd} style={{ background: 'var(--primary-i100)', color: '#fff' }}>
              <i className="fa-solid fa-plus"></i> Nueva
            </button>
          </div>
        </div>
        
        <div style={{ marginBottom: 16 }}>
          <div style={{ position: 'relative' }}>
            <i className="fa-solid fa-search" style={{ position: 'absolute', left: 12, top: 12, color: 'var(--fg-3)' }}></i>
            <input 
              type="text" 
              placeholder={lang === 'es' ? 'Buscar por nombre o costo...' : 'Search by name or cost...'}
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              style={{
                width: '100%',
                padding: '10px 10px 10px 36px',
                borderRadius: 8,
                border: '1px solid var(--border)',
                background: 'var(--bg-1)',
                color: 'var(--fg-1)',
                fontFamily: 'inherit',
                boxSizing: 'border-box'
              }}
            />
          </div>
        </div>
        
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          {filteredItems.length === 0 ? (
            <div style={{ textAlign: 'center', padding: '40px 20px', background: 'var(--bg-1)', borderRadius: 8, border: '1px dashed var(--border)' }}>
              <div style={{ fontSize: 40, color: 'var(--fg-4)', marginBottom: 16 }}><i className="fa-solid fa-graduation-cap"></i></div>
              <h3 style={{ margin: '0 0 8px 0', color: 'var(--fg-1)' }}>{searchTerm ? 'No se encontraron resultados' : 'Sin mejoras de academia'}</h3>
              <p style={{ margin: '0 0 16px 0', color: 'var(--fg-3)', fontSize: 14 }}>{searchTerm ? 'Prueba con otro nombre.' : 'Aún no has creado ninguna mejora.'}</p>
              {!searchTerm && (
                <button className="app-btn" onClick={handleAdd} style={{ background: 'var(--primary-i100)', color: '#fff', padding: '8px 16px' }}>
                  <i className="fa-solid fa-plus"></i> Crear primera mejora
                </button>
              )}
            </div>
          ) : filteredItems.map(({ item, index: i }) => (
            <div key={i} className={`admin-list-row ${editingIndex === i ? 'editing' : ''}`} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: 12, background: 'var(--bg-1)', borderRadius: 8, border: '1px solid var(--border)' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <input 
                  type="checkbox" 
                  checked={selectedItems.has(i)}
                  onChange={() => handleToggleSelect(i)}
                  style={{ cursor: 'pointer', width: 16, height: 16 }}
                />
                <div style={{ fontWeight: 'bold', color: 'var(--fg-3)', minWidth: 24 }}>{i + 1}.</div>
                {item.iconUrl ? (
                  <img src={item.iconUrl} style={{ width: 32, height: 32, objectFit: 'contain' }} onError={(e) => { e.target.onerror = null; e.target.style.display = 'none'; }} />
                ) : item.icon ? (
                  <i className={`fa-solid ${item.icon?.replace('fa-solid ', '')}`} style={{ width: 32, height: 32, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 24, color: 'var(--fg-2)' }}></i>
                ) : (
                  <i className="fa-solid fa-image" style={{ width: 32, height: 32, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 24, color: 'var(--fg-2)' }}></i>
                )}
                <div>
                  <div style={{ fontWeight: 'bold' }}>{item.name?.es || item.es || (typeof item.name === 'string' ? item.name : '(Sin nombre)')}</div>
                  <div style={{ fontSize: 12, color: 'var(--fg-3)' }}>Nivel: {item.reqLevel} | Costo: {window.formatNum ? window.formatNum(item.baseCost || item.costXP || 0) : (item.baseCost || item.costXP || 0)} | Gen: {getGenName(item.reqGeneratorId)}</div>
                  <div style={{ fontSize: 11, color: 'var(--success-i100)' }}>
                    {item.passiveMult ? `+${item.passiveMult}% Pasiva ` : ''}
                    {item.clickMult ? `+${item.clickMult}% Click ` : ''}
                    {item.globalMult ? `+${item.globalMult}% Global ` : ''}
                    {item.xpMult ? `+${item.xpMult}% XP ` : ''}
                    {item.genProdMult ? `+${item.genProdMult}% Prod. en ${getGenName(item.reqGeneratorId)}` : ''}
                  </div>
                </div>
              </div>
              <div className="row-actions" style={{ display: 'flex', gap: 8 }}>
                <button className="btn-edit-text" onClick={() => handleEdit(i)}>Editar</button>
                <button className="btn-delete-icon" onClick={() => handleDelete(i)}>
                  <i className="fa-solid fa-trash"></i>
                </button>
              </div>
            </div>
          ))}
        </div>
      </div>

      {showExportModal && <window.AdminExportNamesModal items={items} lang={lang} onClose={() => setShowExportModal(false)} setToast={setToast} />}
      {/* Editor */}
      {editingIndex !== null && (
        <window.AdminEditorSidebar 
          title={editingIndex === 'new' ? 'Nueva Mejora' : 'Editar Mejora'}
          onClose={() => setEditingIndex(null)}
        >

          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            <div style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
              <window.AdminImageUpload 
                currentImage={formData.iconUrl} 
                onImageChange={(url) => setFormData({...formData, iconUrl: url})} 
                size={72} style={{ marginBottom: 0 }}
              />
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 4 }}>
                  <label style={{ fontSize: 12, fontWeight: 'bold', color: 'var(--fg-3)' }}>Nombre</label>
                  <div style={{ display: 'flex', background: 'var(--bg-3)', borderRadius: 6, padding: 2, border: '1px solid var(--border)' }}>
                    <button type="button" onClick={() => setEditLang('es')} style={{ padding: '2px 8px', fontSize: 11, borderRadius: 4, background: editLang === 'es' ? 'var(--primary-i100)' : 'transparent', color: editLang === 'es' ? '#fff' : 'var(--fg-3)', border: 'none', cursor: 'pointer', fontWeight: 'bold' }}>ES</button>
                    <button type="button" onClick={() => setEditLang('en')} style={{ padding: '2px 8px', fontSize: 11, borderRadius: 4, background: editLang === 'en' ? 'var(--primary-i100)' : 'transparent', color: editLang === 'en' ? '#fff' : 'var(--fg-3)', border: 'none', cursor: 'pointer', fontWeight: 'bold' }}>EN</button>
                  </div>
                </div>
                <input type="text" className="app-input" value={formData.name[editLang] || ''} onChange={e => setFormData({...formData, name: {...formData.name, [editLang]: e.target.value}})} style={{ width: '100%' }} />
              </div>
            </div>

            <div>
              <label style={{ fontSize: 12, fontWeight: 'bold', color: 'var(--fg-3)' }}>Descripción</label>
              <textarea 
                ref={descriptionRef} 
                className="app-input" 
                value={formData.description[editLang] || ''} 
                onChange={e => setFormData({...formData, description: {...formData.description, [editLang]: e.target.value}})} 
                onInput={e => adjustHeight(e.target)}
                style={{ width: '100%', resize: 'none' }} 
              />
            </div>


            <div style={{ display: 'flex', gap: 12 }}>
              <div style={{ flex: 1 }}>
                <label style={{ fontSize: 12, fontWeight: 'bold', color: 'var(--fg-3)' }}>Nivel Requerido</label>
                <window.AdminNumberInput className="app-input" value={formData.reqLevel || ''} placeholder="1" onChange={e => setFormData({...formData, reqLevel: e.target.value})} style={{ width: '100%' }} />
              </div>
              <div style={{ flex: 1 }}>
                <label style={{ fontSize: 12, fontWeight: 'bold', color: 'var(--fg-3)' }}>Costo</label>
                <window.AdminNumberInput className="app-input" value={formData.baseCost || ''} placeholder="0" onChange={e => setFormData({...formData, baseCost: e.target.value})} style={{ width: '100%' }} />
              </div>
            </div>
            
            <div>
              <label style={{ fontSize: 12, fontWeight: 'bold', color: 'var(--fg-3)' }}>Requisito de Generador (Opcional)</label>
              <div style={{ display: 'flex', gap: 8, marginTop: 4 }}>
                <div style={{ flex: 1 }}>
                  <window.Dropdown 
                    value={formData.reqGeneratorId} 
                    onChange={val => setFormData({...formData, reqGeneratorId: val})}
                    style={{ width: '100%' }}
                    options={[
                      { value: "", label: "Ninguno" },
                      ...generators.map(g => ({ value: g.id, label: g.name?.es || g.es || (typeof g.name === 'string' ? g.name : '(Sin nombre)') }))
                    ]}
                  />
                </div>
                <div style={{ width: 100, flexShrink: 0 }}>
                  <input 
                    type="number"
                    className="app-input" 
                    value={formData.reqGenQty === 0 ? '' : formData.reqGenQty} 
                    onChange={e => setFormData({...formData, reqGenQty: Number(e.target.value) || 0})} 
                    placeholder="Cant."
                  />
                </div>
              </div>
              
              {formData.reqGeneratorId && (
                <div style={{ marginTop: 8 }}>
                  <label style={{ fontSize: 12, fontWeight: 'bold', color: 'var(--fg-3)' }}>Prod. del generador (%)</label>
                  <div style={{ fontSize: 10, color: 'var(--fg-4)', marginBottom: 4 }}>Incrementa la producción de este generador en específico.</div>
                  <window.AdminNumberInput step="0.1" className="app-input" value={formData.genProdMult || ''} placeholder="0" onChange={e => setFormData({...formData, genProdMult: e.target.value})} onBlur={handleBenefitBlur} style={{ width: '100%', opacity: Number(formData.globalMult) > 0 ? 0.5 : 1, pointerEvents: Number(formData.globalMult) > 0 ? 'none' : 'auto' }} disabled={Number(formData.globalMult) > 0} />
                </div>
              )}
            </div>

            <div>
              <label style={{ fontSize: 12, fontWeight: 'bold', color: 'var(--fg-3)' }}>Logro Requerido (Opcional)</label>
              <window.Dropdown 
                value={formData.reqAchievementId || ''} 
                onChange={val => setFormData({...formData, reqAchievementId: val})}
                style={{ width: '100%', marginTop: 4 }}
                options={[
                  { value: "", label: "Ninguno" },
                  ...(window.ACHIEVEMENTS || []).map(a => ({ value: a.id, label: a.name?.es || a.es || (typeof a.name === 'string' ? a.name : '(Sin nombre)') }))
                ]}
              />
            </div>

            <div style={{ borderTop: '1px solid var(--border)', paddingTop: 12, marginTop: 4 }}>
              <div style={{ fontSize: 12, fontWeight: 'bold', color: 'var(--fg-3)', marginBottom: 8 }}>Beneficios (%)</div>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 8, marginBottom: 8 }}>
                <div>
                  <label style={{ fontSize: 10, color: 'var(--fg-3)' }}>Pasiva</label>
                  <window.AdminNumberInput step="0.1" className="app-input" value={formData.passiveMult || ''} placeholder="0" onChange={e => setFormData({...formData, passiveMult: e.target.value})} onBlur={handleBenefitBlur} style={{ width: '100%', opacity: Number(formData.globalMult) > 0 ? 0.5 : 1, pointerEvents: Number(formData.globalMult) > 0 ? 'none' : 'auto' }} disabled={Number(formData.globalMult) > 0} />
                </div>
                <div>
                  <label style={{ fontSize: 10, color: 'var(--fg-3)' }}>Click</label>
                  <window.AdminNumberInput step="0.1" className="app-input" value={formData.clickMult || ''} placeholder="0" onChange={e => setFormData({...formData, clickMult: e.target.value})} onBlur={handleBenefitBlur} style={{ width: '100%', opacity: Number(formData.globalMult) > 0 ? 0.5 : 1, pointerEvents: Number(formData.globalMult) > 0 ? 'none' : 'auto' }} disabled={Number(formData.globalMult) > 0} />
                </div>
                <div>
                  <label style={{ fontSize: 10, color: 'var(--fg-3)' }}>Global</label>
                  <window.AdminNumberInput step="0.1" className="app-input" value={formData.globalMult || ''} placeholder="0" onChange={e => {
                    const isGlobal = Number(e.target.value) > 0;
                    setFormData(prev => ({
                      ...prev,
                      globalMult: e.target.value,
                      ...(isGlobal && {
                        passiveMult: 0,
                        clickMult: 0,
                        xpMult: 0,
                        xpMultType: 'both',
                        genProdMult: 0
                      })
                    }));
                  }} onBlur={handleBenefitBlur} style={{ width: '100%' }} />
                </div>
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8, opacity: Number(formData.globalMult) > 0 ? 0.5 : 1, pointerEvents: Number(formData.globalMult) > 0 ? 'none' : 'auto' }}>
                <div>
                  <label style={{ fontSize: 10, color: 'var(--fg-3)' }}>Gen XP (%)</label>
                  <window.AdminNumberInput step="0.1" className="app-input" value={formData.xpMult || ''} placeholder="0" onChange={e => setFormData({...formData, xpMult: e.target.value})} onBlur={handleBenefitBlur} style={{ width: '100%' }} disabled={Number(formData.globalMult) > 0} />
                </div>
                <div>
                  <label style={{ fontSize: 10, color: 'var(--fg-3)' }}>Aplica a</label>
                  <window.Dropdown 
                    value={formData.xpMultType || 'both'} 
                    onChange={val => { setFormData({...formData, xpMultType: val}); handleBenefitBlur({ xpMultType: val }); }} 
                    options={[
                      { value: 'both', label: 'Ambos (Pasiva y Click)' },
                      { value: 'passive', label: 'Solo Pasiva' },
                      { value: 'click', label: 'Solo Click' }
                    ]}
                    disabled={Number(formData.globalMult) > 0}
                  />
                </div>
              </div>
            </div>

            <button className="app-btn" onClick={handleSaveForm} style={{ width: '100%', background: saveStatus ? 'var(--positive-i100)' : 'var(--primary-i100)', color: '#fff', marginTop: 8, transition: 'background 0.2s' }}>
              {saveStatus ? <><i className="fa-solid fa-check"></i> ¡Guardado!</> : 'Guardar'}
            </button>
          </div>
        </window.AdminEditorSidebar>
      )}

      {/* Individual Delete Modal */}
      {deleteTarget !== null && (
        <window.Modal onClose={() => setDeleteTarget(null)} maxWidth={400} persistent={false}>
          <div style={{ textAlign: 'center', padding: '20px 10px' }}>
            <div style={{ fontSize: 40, color: 'var(--warning-i100)', marginBottom: 16 }}><i className="fa-solid fa-triangle-exclamation"></i></div>
            <h2 style={{ margin: '0 0 12px 0', fontSize: 20, color: 'var(--fg-1)' }}>¿Eliminar Mejora?</h2>
            <p style={{ margin: '0 0 24px 0', color: 'var(--fg-3)', fontSize: 14 }}>Esta acción no se puede deshacer. ¿Estás seguro de que quieres eliminar esta mejora de academia?</p>
            <div style={{ display: 'flex', gap: 12, justifyContent: 'center' }}>
              <button className="app-btn" onClick={() => setDeleteTarget(null)} style={{ flex: 1, padding: '10px 16px', background: 'var(--bg-3)', color: 'var(--fg-1)' }}>Cancelar</button>
              <button className="app-btn" onClick={confirmDelete} style={{ flex: 1, padding: '10px 16px', background: 'var(--warning-i100)', color: '#fff' }}>Eliminar</button>
            </div>
          </div>
        </window.Modal>
      )}

      {/* Bulk Delete Modal */}
      {showBulkDeleteModal && (
        <window.Modal onClose={() => setShowBulkDeleteModal(false)} maxWidth={400} persistent={false}>
          <div style={{ textAlign: 'center', padding: '20px 10px' }}>
            <div style={{ fontSize: 40, color: 'var(--warning-i100)', marginBottom: 16 }}><i className="fa-solid fa-trash-can"></i></div>
            <h2 style={{ margin: '0 0 12px 0', fontSize: 20, color: 'var(--fg-1)' }}>¿Eliminar {selectedItems.size} Mejora(s)?</h2>
            <p style={{ margin: '0 0 24px 0', color: 'var(--fg-3)', fontSize: 14 }}>Esta acción eliminará todas las mejoras seleccionadas y no se puede deshacer.</p>
            <div style={{ display: 'flex', gap: 12, justifyContent: 'center' }}>
              <button className="app-btn" onClick={() => setShowBulkDeleteModal(false)} style={{ flex: 1, padding: '10px 16px', background: 'var(--bg-3)', color: 'var(--fg-1)' }}>Cancelar</button>
              <button className="app-btn" onClick={confirmBulkDelete} style={{ flex: 1, padding: '10px 16px', background: 'var(--warning-i100)', color: '#fff' }}>Eliminar Todas</button>
            </div>
          </div>
        </window.Modal>
      )}
    </div>
  );
};