const { useState } = React;

window.AdminAchievements = function({ lang, isTemplate, setToast }) {
  // achievements in DB is an object with keys as achievement IDs
  const dbAchievements = window.GAME_CONTENT.achievements || (!isTemplate ? window.ACHIEVEMENTS : []);
  let actualAchievements = Array.isArray(dbAchievements) ? dbAchievements : [];
  const [items, setItems] = useState([...actualAchievements]);
  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 [saveStatus, setSaveStatus] = useState(false);
  const generators = window.GAME_CONTENT.generators || [];
  
  const reqTypes = [
    { id: 'level', label: 'Nivel alcanzado' },
    { id: 'prestiges', label: 'Cantidad de prestigios' },
    { id: 'total_teeth', label: 'Dientes totales históricos' },
    { id: 'specific_generator_count', label: 'Cantidad de un generador' },
    { id: 'total_generators', label: 'Total generadores comprados' },
    { id: 'store_upgrades', label: 'Mejoras de tienda compradas' },
    { id: 'academy_upgrades', label: 'Mejoras de academia compradas' },
    { id: 'playtime_minutes', label: 'Tiempo de juego (minutos)' },
    { id: 'total_clicks', label: 'Clicks totales' },
    { id: 'max_cps', label: 'Máximo CPS alcanzado' },
    { id: 'golden_teeth', label: 'Dientes de oro atrapados' },
    { id: 'correct_answers', label: 'Preguntas correctas' },
    { id: 'single_click_teeth', label: 'Dientes ganados en un solo click' }
  ];
  
  const [formData, setFormData] = useState({
    id: '',
    name: { es: '', en: '' },
    description: { es: '', en: '' },
    cat: '',
    secret: false,
    iconUrl: '',
    icon: '',
    reqType: 'total_teeth',
    reqValue: 100,
    reqTargetId: '', // For specific generator
    rewardPercent: 1
  });

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

    const isAutoGenerated = (text) => {
      if (!text) return true;
      return text.startsWith('Req:');
    };

    if (isAutoGenerated(desc_es) || isAutoGenerated(desc_en)) {
      if (formData.reqType && formData.reqValue !== undefined) {
        const reqLabelEs = reqTypes.find(t => t.id === formData.reqType)?.label || formData.reqType;
        const val = window.formatNum ? window.formatNum(formData.reqValue) : formData.reqValue;
        let newDescEs = `Req: ${reqLabelEs} (${val})`;
        if (formData.reqType === 'specific_generator_count' && formData.reqTargetId) {
          const gen = generators.find(g => g.id === formData.reqTargetId);
          if (gen) {
            const genName = gen.name?.es || gen.es || (typeof gen.name === 'string' ? gen.name : '');
            newDescEs = `Req: ${val} ${genName}`;
          }
        }
        let newDescEn = newDescEs;
        if (window.getAchReqText) {
          const generatedEn = window.getAchReqText({ reqType: formData.reqType, reqValue: formData.reqValue, reqTargetId: formData.reqTargetId }, 'en');
          if (generatedEn && !generatedEn.includes('Keep playing to discover')) {
             newDescEn = `Req: ${generatedEn}`;
          }
        }

        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 saveToGlobal = (newItems) => {
    setItems(newItems);
    window.GAME_CONTENT.achievements = newItems;
    if (typeof window.applyDynamicContent === 'function') {
      window.applyDynamicContent();
    } else {
      window.ACHIEVEMENTS = newItems;
    }
  };

  const handleCopyName = (nameObj) => {
    const nameStr = nameObj?.es || nameObj?.en || (typeof nameObj === 'string' ? nameObj : '');
    if (!nameStr) return;
    navigator.clipboard.writeText(nameStr);
    if (setToast) {
      setToast({ id: 'copy_name_' + Date.now(), es: 'Nombre copiado al portapapeles', en: 'Name copied to clipboard' });
      setTimeout(() => setToast(null), 2500);
    }
  };

  const handleEdit = (index) => {
    setEditingIndex(index);
    const item = items[index];
    setFormData({
      id: item.id || `ach_${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 || '' },
      cat: item.cat || '',
      secret: !!item.secret,
      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 : '',
      reqType: item.reqType || 'total_teeth',
      reqValue: item.reqValue || 100,
      reqTargetId: item.reqTargetId || '',
      rewardPercent: item.rewardPercent !== undefined ? item.rewardPercent : 1,
      borderColor: item.borderColor || '#ffffff',
      borderThickness: item.borderThickness || 2,
      borderStyle: item.borderStyle || 'solid',
      borderEffect: item.borderEffect || 'none'
    });
  };

  const handleAdd = () => {
    setEditingIndex('new');
    setFormData({
      id: `ach_${Date.now()}`,
      name: { es: '', en: '' },
      description: { es: '', en: '' },
      cat: '',
      secret: false,
      iconUrl: '',
      icon: '',
      reqType: 'level',
      reqValue: 1,
      reqTargetId: generators[0]?.id || '',
      rewardPercent: 1,
      borderColor: '#ffffff',
      borderThickness: 2,
      borderStyle: 'solid',
      borderEffect: 'none'
    });
  };

  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 reqLabelEs = reqTypes.find(t => t.id === formData.reqType)?.label || formData.reqType;
      const val = window.formatNum ? window.formatNum(formData.reqValue) : formData.reqValue;
      let autoEs = `Req: ${reqLabelEs} (${val})`;
      if (formData.reqType === 'specific_generator_count' && formData.reqTargetId) {
        const gen = generators.find(g => g.id === formData.reqTargetId);
        if (gen) {
          const genName = gen.name?.es || gen.es || (typeof gen.name === 'string' ? gen.name : '');
          autoEs = `Req: ${val} ${genName}`;
        }
      }
      
      let autoEn = autoEs;
      if (window.getAchReqText) {
        const generatedEn = window.getAchReqText({ reqType: formData.reqType, reqValue: formData.reqValue, reqTargetId: formData.reqTargetId }, 'en');
        if (generatedEn && !generatedEn.includes('Keep playing to discover')) {
           autoEn = `Req: ${generatedEn}`;
        }
      }
      
      if (!desc_es) desc_es = autoEs;
      if (!desc_en) desc_en = autoEn;
    }

    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,
      iconUrl: formData.iconUrl,
      icon: formData.icon || 'fa-solid fa-image',
      reqType: formData.reqType,
      reqValue: Number(formData.reqValue),
      reqTargetId: formData.reqType === 'specific_generator_count' ? formData.reqTargetId : undefined,
      rewardPercent: Number(formData.rewardPercent),
      borderColor: formData.borderColor,
      borderThickness: Number(formData.borderThickness),
      borderStyle: formData.borderStyle,
      borderEffect: formData.borderEffect
    };

    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);
  };



  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 }}>Logros ({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> Nuevo
            </button>
          </div>
        </div>
        
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          {items.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-trophy"></i></div>
              <h3 style={{ margin: '0 0 8px 0', color: 'var(--fg-1)' }}>Sin logros</h3>
              <p style={{ margin: '0 0 16px 0', color: 'var(--fg-3)', fontSize: 14 }}>Aún no has creado ningún logro.</p>
              <button className="app-btn" onClick={handleAdd} style={{ background: 'var(--primary-i100)', color: '#fff', padding: '8px 16px' }}>
                <i className="fa-solid fa-plus"></i> Crear primer logro
              </button>
            </div>
          ) : items.map((item, i) => {
            const reqLabel = reqTypes.find(t => t.id === item.reqType)?.label || item.reqType;
            return (
              <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)', cursor: 'pointer' }}
                onClick={() => handleCopyName(item.name || item)}
              >
                <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                  <input 
                    type="checkbox" 
                    checked={selectedItems.has(i)}
                    onClick={(e) => e.stopPropagation()}
                    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 || item.icon || (window.achIcon && window.achIcon(item)) ? (
                    item.iconUrl ? <img src={item.iconUrl} style={{ width: 32, height: 32, objectFit: 'contain' }} /> :
                    <i className={`fa-solid ${(item.icon || window.achIcon?.(item))?.replace('fa-solid ', '')}`} style={{ width: 32, height: 32, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 24, color: 'var(--fg-2)' }}></i>
                  ) : <div style={{ width: 32, height: 32, background: 'var(--bg-3)', borderRadius: 4, display: 'flex', alignItems: 'center', justifyContent: 'center' }}><i className="fa-solid fa-image" style={{ color: 'var(--fg-3)' }}></i></div>}
                  <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)' }}>
                      {item.reqType === 'specific_generator_count' ? `Req: ${window.formatNum(item.reqValue)} ${generators.find(g => g.id === item.reqTargetId)?.name?.es || generators.find(g => g.id === item.reqTargetId)?.es || '?'}` : `Req: ${reqLabel} (${window.formatNum(item.reqValue)})`}
                    </div>
                  </div>
                </div>
                <div className="row-actions" style={{ display: 'flex', gap: 8 }}>
                  <button className="btn-edit-text" onClick={(e) => { e.stopPropagation(); handleEdit(i); }}>Editar</button>
                  <button className="btn-delete-icon" onClick={(e) => { e.stopPropagation(); 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' ? 'Nuevo Logro' : 'Editar Logro'}
          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 className="app-input" value={formData.description[editLang] || ''} onChange={e => setFormData({...formData, description: {...formData.description, [editLang]: e.target.value}})} style={{ width: '100%', resize: 'vertical' }} />
            </div>


            <div style={{ borderTop: '1px solid var(--border)', paddingTop: 12, marginTop: 4 }}>
              <label style={{ fontSize: 12, fontWeight: 'bold', color: 'var(--fg-3)' }}>Tipo de Requisito</label>
              <window.Dropdown 
                value={formData.reqType} 
                onChange={val => { setFormData({...formData, reqType: val}); setTimeout(handleRequirementBlur, 50); }} 
                options={reqTypes.map(t => ({ value: t.id, label: t.label }))}
              />
            </div>

            {formData.reqType === 'specific_generator_count' && (
              <div>
                <label style={{ fontSize: 12, fontWeight: 'bold', color: 'var(--fg-3)' }}>Generador</label>
                <window.Dropdown 
                  value={formData.reqTargetId} 
                  onChange={val => { setFormData({...formData, reqTargetId: val}); setTimeout(handleRequirementBlur, 50); }} 
                  options={[
                    { value: "", label: "Selecciona..." },
                    ...generators.map(g => ({ value: g.id, label: g.name?.es || g.es || (typeof g.name === 'string' ? g.name : '(Sin nombre)') }))
                  ]}
                />
              </div>
            )}

            <div>
              <label style={{ fontSize: 12, fontWeight: 'bold', color: 'var(--fg-3)' }}>Valor Requerido</label>
              <window.AdminNumberInput className="app-input" value={formData.reqValue} onChange={e => setFormData({...formData, reqValue: e.target.value})} onBlur={handleRequirementBlur} style={{ width: '100%' }} />
            </div>

            <div>
              <label style={{ fontSize: 12, fontWeight: 'bold', color: 'var(--fg-3)' }}>Beneficio (Prod. global %)</label>
              <window.AdminNumberInput className="app-input" value={formData.rewardPercent} onChange={e => setFormData({...formData, rewardPercent: e.target.value})} style={{ width: '100%' }} />
            </div>

            <div style={{ borderTop: '1px solid var(--border)', paddingTop: 12, marginTop: 4 }}>
              <label style={{ fontSize: 12, fontWeight: 'bold', color: 'var(--fg-3)', marginBottom: 8, display: 'block' }}>Estilo de Borde de Notificación</label>
              
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginBottom: 10 }}>
                <div>
                  <label style={{ fontSize: 11, color: 'var(--fg-3)' }}>Color</label>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                    <input type="color" value={formData.borderColor} onChange={e => setFormData({...formData, borderColor: e.target.value})} style={{ width: 36, height: 36, padding: 0, border: 'none', borderRadius: 4, cursor: 'pointer' }} />
                    <input type="text" className="app-input" value={formData.borderColor} onChange={e => setFormData({...formData, borderColor: e.target.value})} style={{ flex: 1 }} />
                  </div>
                </div>
                <div>
                  <label style={{ fontSize: 11, color: 'var(--fg-3)' }}>Grosor (px)</label>
                  <window.AdminNumberInput className="app-input" value={formData.borderThickness} onChange={e => setFormData({...formData, borderThickness: e.target.value})} style={{ width: '100%' }} />
                </div>
              </div>

              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
                <div>
                  <label style={{ fontSize: 11, color: 'var(--fg-3)' }}>Estilo</label>
                  <window.Dropdown 
                    value={formData.borderStyle} 
                    onChange={val => setFormData({...formData, borderStyle: val})} 
                    options={[
                      { value: 'solid', label: 'Normal (Solid)' },
                      { value: 'dotted', label: 'Punteado (Dotted)' },
                      { value: 'dashed', label: 'Segmentado (Dashed)' },
                      { value: 'double', label: 'Doble (Double)' },
                      { value: 'ridge', label: 'Triple/Relieve (Ridge)' }
                    ]}
                  />
                </div>
                <div>
                  <label style={{ fontSize: 11, color: 'var(--fg-3)' }}>Efecto Especial</label>
                  <window.Dropdown 
                    value={formData.borderEffect} 
                    onChange={val => setFormData({...formData, borderEffect: val})} 
                    options={[
                      { value: 'none', label: 'Ninguno' },
                      { value: 'rainbow', label: 'Rainbow' },
                      { value: 'pulse', label: 'Pulse' }
                    ]}
                  />
                </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 Logro?</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 este logro?</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} Logro(s)?</h2>
            <p style={{ margin: '0 0 24px 0', color: 'var(--fg-3)', fontSize: 14 }}>Esta acción eliminará todos los logros seleccionados 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 Todos</button>
            </div>
          </div>
        </window.Modal>
      )}
    </div>
  );
};