import React, { useState, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { categoryService } from '../services/api';
import { useToast } from '../components/Toast';
import { ConfirmModal } from '../components/Modal';
import IconSelector from '../components/IconSelector';

const Categories = () => {
  const { t } = useTranslation();
  const toast = useToast();
  const [categories, setCategories] = useState([]);
  const [flatCategories, setFlatCategories] = useState([]);
  const [loading, setLoading] = useState(true);
  const [showModal, setShowModal] = useState(false);
  const [showDeleteModal, setShowDeleteModal] = useState(false);
  const [selectedItem, setSelectedItem] = useState(null);
  const [saving, setSaving] = useState(false);
  const [newKeyword, setNewKeyword] = useState('');
  const [filter, setFilter] = useState({ type: '' });
  const [expandedCategories, setExpandedCategories] = useState({});
  
  // Estados para categorização em lote
  const [showBatchModal, setShowBatchModal] = useState(false);
  const [batchPreview, setBatchPreview] = useState(null);
  const [loadingBatch, setLoadingBatch] = useState(false);
  const [executingBatch, setExecutingBatch] = useState(false);

  const [formData, setFormData] = useState({
    name: '',
    parent_id: '',
    type: 'expense',
    description: '',
    color: '#3B82F6',
    icon: 'bi-tag',
    is_active: true,
    keywords: [],
  });

  const categoryTypes = categoryService.types;

  useEffect(() => {
    loadCategories();
  }, [filter]);

  const loadCategories = async () => {
    try {
      setLoading(true);
      const params = {};
      if (filter.type) params.type = filter.type;
      
      // Carregar hierárquicas
      const response = await categoryService.getAll(params);
      if (response.success) {
        setCategories(response.data);
      }

      // Carregar flat para o select de parent
      const flatResponse = await categoryService.getAll({ flat: true });
      if (flatResponse.success) {
        setFlatCategories(flatResponse.data.filter(c => !c.parent_id)); // Apenas categorias raiz
      }
    } catch (error) {
      toast.error(t('categories.loadError'));
    } finally {
      setLoading(false);
    }
  };

  const toggleExpand = (categoryId) => {
    setExpandedCategories(prev => ({
      ...prev,
      [categoryId]: !prev[categoryId],
    }));
  };

  const handleOpenModal = (item = null, parentId = null) => {
    if (item) {
      setSelectedItem(item);
      setFormData({
        name: item.name || '',
        parent_id: item.parent_id?.toString() || '',
        type: item.type || 'expense',
        description: item.description || '',
        color: item.color || '#3B82F6',
        icon: item.icon || 'bi-tag',
        is_active: item.is_active ?? true,
        keywords: item.keywords?.map(k => k.keyword) || [],
      });
    } else {
      setSelectedItem(null);
      setFormData({
        name: '',
        parent_id: parentId?.toString() || '',
        type: 'expense',
        description: '',
        color: '#3B82F6',
        icon: 'bi-tag',
        is_active: true,
        keywords: [],
      });
    }
    setNewKeyword('');
    setShowModal(true);
  };

  const handleCloseModal = () => {
    setShowModal(false);
    setSelectedItem(null);
    setNewKeyword('');
  };

  // Funções de categorização em lote
  const handleOpenBatchModal = async () => {
    setShowBatchModal(true);
    setLoadingBatch(true);
    try {
      const response = await categoryService.categorizeBatchPreview(true, 50);
      if (response.success) {
        setBatchPreview(response.data);
      }
    } catch (error) {
      toast.error(t('categories.batchPreviewError') || 'Erro ao carregar preview');
    } finally {
      setLoadingBatch(false);
    }
  };

  const handleCloseBatchModal = () => {
    setShowBatchModal(false);
    setBatchPreview(null);
  };

  const handleExecuteBatch = async () => {
    setExecutingBatch(true);
    try {
      const response = await categoryService.categorizeBatch(true);
      if (response.success) {
        toast.success(
          `${t('categories.batchSuccess') || 'Categorização concluída'}: ${response.data.categorized} ${t('categories.categorized') || 'categorizadas'}`
        );
        handleCloseBatchModal();
      }
    } catch (error) {
      toast.error(t('categories.batchError') || 'Erro ao categorizar');
    } finally {
      setExecutingBatch(false);
    }
  };

  const handleChange = (e) => {
    const { name, value, type, checked } = e.target;
    setFormData(prev => ({
      ...prev,
      [name]: type === 'checkbox' ? checked : value,
    }));
  };

  const handleAddKeyword = () => {
    const keyword = newKeyword.trim();
    if (keyword && !formData.keywords.includes(keyword)) {
      setFormData(prev => ({
        ...prev,
        keywords: [...prev.keywords, keyword],
      }));
      setNewKeyword('');
    }
  };

  const handleRemoveKeyword = (keyword) => {
    setFormData(prev => ({
      ...prev,
      keywords: prev.keywords.filter(k => k !== keyword),
    }));
  };

  const handleKeywordKeyPress = (e) => {
    if (e.key === 'Enter') {
      e.preventDefault();
      handleAddKeyword();
    }
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    
    if (!formData.name.trim()) {
      toast.error(t('validation.required'));
      return;
    }

    setSaving(true);
    try {
      const data = {
        ...formData,
        parent_id: formData.parent_id ? parseInt(formData.parent_id) : null,
      };

      let response;
      if (selectedItem) {
        response = await categoryService.update(selectedItem.id, data);
      } else {
        response = await categoryService.create(data);
      }

      if (response.success) {
        toast.success(selectedItem ? t('categories.updateSuccess') : t('categories.createSuccess'));
        handleCloseModal();
        loadCategories();
      }
    } catch (error) {
      toast.error(error.response?.data?.message || t('categories.createError'));
    } finally {
      setSaving(false);
    }
  };

  const handleDeleteClick = (item) => {
    setSelectedItem(item);
    setShowDeleteModal(true);
  };

  const handleDeleteConfirm = async () => {
    if (!selectedItem) return;

    setSaving(true);
    try {
      const response = await categoryService.delete(selectedItem.id);
      if (response.success) {
        toast.success(t('categories.deleteSuccess'));
        setShowDeleteModal(false);
        setSelectedItem(null);
        loadCategories();
      }
    } catch (error) {
      toast.error(error.response?.data?.message || t('categories.deleteError'));
    } finally {
      setSaving(false);
    }
  };

  const getTypeColor = (type) => {
    switch (type) {
      case 'income': return 'success';
      case 'expense': return 'danger';
      case 'both': return 'info';
      default: return 'secondary';
    }
  };

  const renderCategory = (category, level = 0, parentColor = null) => {
    const hasChildren = category.children && category.children.length > 0;
    const isExpanded = expandedCategories[category.id];
    // Subcategorias herdam a cor da categoria pai
    const displayColor = level > 0 && parentColor ? parentColor : category.color;

    return (
      <div key={category.id}>
        <div 
          className={`d-flex align-items-center p-3 ${level > 0 ? 'ms-4' : ''}`}
          style={{ 
            borderBottom: '1px solid #334155',
            backgroundColor: level > 0 ? '#1a2332' : 'transparent',
          }}
        >
          {/* Expand Button */}
          <div style={{ width: '30px' }}>
            {hasChildren && (
              <button
                className="btn btn-link text-slate-400 p-0"
                onClick={() => toggleExpand(category.id)}
              >
                <i className={`bi ${isExpanded ? 'bi-chevron-down' : 'bi-chevron-right'}`}></i>
              </button>
            )}
          </div>

          {/* Icon & Name */}
          <div className="d-flex align-items-center flex-grow-1">
            <div 
              className="rounded-circle d-flex align-items-center justify-content-center me-3"
              style={{ 
                width: '35px', 
                height: '35px', 
                backgroundColor: displayColor + '25',
              }}
            >
              <i className={`bi ${category.icon}`} style={{ color: displayColor }}></i>
            </div>
            <div>
              <div className="text-white fw-medium">{category.name}</div>
              {category.keywords && category.keywords.length > 0 && (
                <small className="text-slate-500">
                  {category.keywords.length} {t('categories.keywords')}
                </small>
              )}
            </div>
          </div>

          {/* Type Badge */}
          <div className="me-3">
            <span className={`badge bg-${getTypeColor(category.type)} bg-opacity-25 text-${getTypeColor(category.type)}`}>
              {categoryTypes[category.type]}
            </span>
          </div>

          {/* Status */}
          <div className="me-3">
            {category.is_active ? (
              <span className="badge bg-success bg-opacity-25 text-success">{t('common.active')}</span>
            ) : (
              <span className="badge bg-secondary bg-opacity-25 text-secondary">{t('common.inactive')}</span>
            )}
          </div>

          {/* Actions */}
          <div className="d-flex gap-1">
            <button
              className="btn btn-link text-success p-1"
              onClick={() => handleOpenModal(null, category.id)}
              title={t('categories.createSubcategory')}
            >
              <i className="bi bi-plus-circle"></i>
            </button>
            <button
              className="btn btn-link text-info p-1"
              onClick={() => handleOpenModal(category)}
              title={t('common.edit')}
            >
              <i className="bi bi-pencil"></i>
            </button>
            {!category.is_system && (
              <button
                className="btn btn-link text-danger p-1"
                onClick={() => handleDeleteClick(category)}
                title={t('common.delete')}
              >
                <i className="bi bi-trash"></i>
              </button>
            )}
          </div>
        </div>

        {/* Children */}
        {hasChildren && isExpanded && (
          <div>
            {category.children.map(child => renderCategory(child, level + 1, category.color))}
          </div>
        )}
      </div>
    );
  };

  return (
    <div>
      {/* Header */}
      <div className="d-flex justify-content-between align-items-center mb-4">
        <div>
          <h2 className="text-white mb-1">
            <i className="bi bi-tags me-2 text-info"></i>
            {t('nav.categories')}
          </h2>
          <p className="text-slate-400 mb-0">
            {t('categories.title')}
          </p>
        </div>
        <div className="d-flex gap-2">
          <button className="btn btn-outline-warning" onClick={handleOpenBatchModal}>
            <i className="bi bi-lightning-charge me-2"></i>
            {t('categories.batchCategorize') || 'Categorizar em Lote'}
          </button>
          <button className="btn btn-info" onClick={() => handleOpenModal()}>
            <i className="bi bi-plus-lg me-2"></i>
            {t('categories.newCategory')}
          </button>
        </div>
      </div>

      {/* Summary Cards */}
      <div className="row mb-4">
        <div className="col-md-4">
          <div className="card border-0" style={{ background: '#1e293b' }}>
            <div className="card-body">
              <div className="d-flex align-items-center">
                <div className="rounded-circle bg-danger bg-opacity-25 p-3 me-3">
                  <i className="bi bi-arrow-down-circle text-danger fs-4"></i>
                </div>
                <div>
                  <p className="text-slate-400 mb-0 small">{t('categories.types.expense')}</p>
                  <h3 className="mb-0 text-white">
                    {flatCategories.filter(c => c.type === 'expense' || c.type === 'both').length}
                  </h3>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div className="col-md-4">
          <div className="card border-0" style={{ background: '#1e293b' }}>
            <div className="card-body">
              <div className="d-flex align-items-center">
                <div className="rounded-circle bg-success bg-opacity-25 p-3 me-3">
                  <i className="bi bi-arrow-up-circle text-success fs-4"></i>
                </div>
                <div>
                  <p className="text-slate-400 mb-0 small">{t('categories.types.income')}</p>
                  <h3 className="mb-0 text-white">
                    {flatCategories.filter(c => c.type === 'income' || c.type === 'both').length}
                  </h3>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div className="col-md-4">
          <div className="card border-0" style={{ background: '#1e293b' }}>
            <div className="card-body">
              <div className="d-flex align-items-center">
                <div className="rounded-circle bg-info bg-opacity-25 p-3 me-3">
                  <i className="bi bi-tags text-info fs-4"></i>
                </div>
                <div>
                  <p className="text-slate-400 mb-0 small">{t('common.total')}</p>
                  <h3 className="mb-0 text-white">{flatCategories.length}</h3>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Filters */}
      <div className="card border-0 mb-4" style={{ background: '#1e293b' }}>
        <div className="card-body">
          <div className="row g-3">
            <div className="col-md-4">
              <label className="form-label text-slate-400 small">{t('categories.filterByType')}</label>
              <select 
                className="form-select bg-dark text-white border-secondary"
                value={filter.type}
                onChange={(e) => setFilter(prev => ({ ...prev, type: e.target.value }))}
              >
                <option value="">{t('common.all')}</option>
                {Object.entries(categoryTypes).map(([key, label]) => (
                  <option key={key} value={key}>{label}</option>
                ))}
              </select>
            </div>
          </div>
        </div>
      </div>

      {/* Categories List */}
      <div className="card border-0" style={{ background: '#1e293b' }}>
        {loading ? (
          <div className="card-body text-center py-5">
            <div className="spinner-border text-primary" role="status">
              <span className="visually-hidden">{t('common.loading')}</span>
            </div>
          </div>
        ) : categories.length === 0 ? (
          <div className="card-body text-center py-5">
            <i className="bi bi-tags display-1 text-slate-600"></i>
            <p className="text-slate-400 mt-3">{t('categories.noCategories')}</p>
            <button className="btn btn-info" onClick={() => handleOpenModal()}>
              <i className="bi bi-plus-lg me-2"></i>
              {t('categories.newCategory')}
            </button>
          </div>
        ) : (
          <div className="card-body p-0">
            {categories.map(category => renderCategory(category))}
          </div>
        )}
      </div>

      {/* Modal de Criar/Editar */}
      {showModal && (
        <div className="modal show d-block" style={{ backgroundColor: 'rgba(0,0,0,0.7)' }}>
          <div className="modal-dialog modal-lg modal-dialog-centered">
            <div className="modal-content" style={{ background: '#1e293b' }}>
              <div className="modal-header border-bottom" style={{ borderColor: '#334155 !important' }}>
                <h5 className="modal-title text-white">
                  <i className={`bi ${selectedItem ? 'bi-pencil' : 'bi-plus-circle'} me-2`}></i>
                  {selectedItem ? t('categories.editCategory') : formData.parent_id ? t('categories.createSubcategory') : t('categories.newCategory')}
                </h5>
                <button type="button" className="btn-close btn-close-white" onClick={handleCloseModal}></button>
              </div>
              <form onSubmit={handleSubmit}>
                <div className="modal-body">
                  <div className="row g-3">
                    {/* Nome */}
                    <div className="col-md-6">
                      <label className="form-label text-slate-300">{t('common.name')} *</label>
                      <input
                        type="text"
                        className="form-control bg-dark text-white border-secondary"
                        name="name"
                        value={formData.name}
                        onChange={handleChange}
                        placeholder="Ex: Alimentação, Moradia..."
                        required
                      />
                    </div>

                    {/* Tipo */}
                    <div className="col-md-3">
                      <label className="form-label text-slate-300">{t('common.type')} *</label>
                      <select
                        className="form-select bg-dark text-white border-secondary"
                        name="type"
                        value={formData.type}
                        onChange={handleChange}
                        required
                      >
                        {Object.entries(categoryTypes).map(([key, label]) => (
                          <option key={key} value={key}>{label}</option>
                        ))}
                      </select>
                    </div>

                    {/* Categoria Pai */}
                    <div className="col-md-3">
                      <label className="form-label text-slate-300">{t('categories.parentCategory')}</label>
                      <select
                        className="form-select bg-dark text-white border-secondary"
                        name="parent_id"
                        value={formData.parent_id}
                        onChange={handleChange}
                      >
                        <option value="">{t('categories.noParent')}</option>
                        {flatCategories
                          .filter(c => c.id !== selectedItem?.id)
                          .map((cat) => (
                            <option key={cat.id} value={cat.id}>{cat.name}</option>
                          ))}
                      </select>
                    </div>

                    {/* Cor */}
                    <div className="col-md-3">
                      <label className="form-label text-slate-300">{t('common.color')}</label>
                      <input
                        type="color"
                        className="form-control form-control-color bg-dark border-secondary w-100"
                        name="color"
                        value={formData.color}
                        onChange={handleChange}
                      />
                    </div>

                    {/* Ícone */}
                    <div className="col-md-5">
                      <label className="form-label text-slate-300">{t('common.icon')}</label>
                      <IconSelector
                        value={formData.icon}
                        onChange={(icon) => setFormData(prev => ({ ...prev, icon }))}
                        type="category"
                      />
                    </div>

                    {/* Status */}
                    <div className="col-md-4">
                      <label className="form-label text-slate-300">&nbsp;</label>
                      <div className="form-check mt-2">
                        <input
                          type="checkbox"
                          className="form-check-input"
                          id="is_active"
                          name="is_active"
                          checked={formData.is_active}
                          onChange={handleChange}
                        />
                        <label className="form-check-label text-slate-300" htmlFor="is_active">
                          {t('common.active')}
                        </label>
                      </div>
                    </div>

                    {/* Descrição */}
                    <div className="col-12">
                      <label className="form-label text-slate-300">{t('common.description')}</label>
                      <textarea
                        className="form-control bg-dark text-white border-secondary"
                        name="description"
                        value={formData.description}
                        onChange={handleChange}
                        rows="2"
                        placeholder="Descreva esta categoria..."
                      ></textarea>
                    </div>

                    {/* Palavras-chave */}
                    <div className="col-12">
                      <label className="form-label text-slate-300">
                        <i className="bi bi-key me-1"></i>
                        {t('categories.keywordHelp')}
                      </label>
                      <div className="input-group mb-2">
                        <input
                          type="text"
                          className="form-control bg-dark text-white border-secondary"
                          value={newKeyword}
                          onChange={(e) => setNewKeyword(e.target.value)}
                          onKeyPress={handleKeywordKeyPress}
                          placeholder="Digite uma palavra-chave e pressione Enter..."
                        />
                        <button 
                          type="button" 
                          className="btn btn-outline-info"
                          onClick={handleAddKeyword}
                        >
                          <i className="bi bi-plus"></i>
                        </button>
                      </div>
                      <div className="d-flex flex-wrap gap-2">
                        {formData.keywords.map((keyword, index) => (
                          <span 
                            key={index}
                            className="badge d-flex align-items-center"
                            style={{ 
                              backgroundColor: formData.color + '25',
                              color: formData.color,
                            }}
                          >
                            {keyword}
                            <button
                              type="button"
                              className="btn-close btn-close-white ms-2"
                              style={{ fontSize: '8px' }}
                              onClick={() => handleRemoveKeyword(keyword)}
                            ></button>
                          </span>
                        ))}
                        {formData.keywords.length === 0 && (
                          <small className="text-slate-500">
                            {t('common.noData')}
                          </small>
                        )}
                      </div>
                      <small className="text-slate-500 mt-2 d-block">
                        Ex: "RESTAURANTE", "PIZZA", "HAMBURGUER" - Para a categoria Alimentação
                      </small>
                    </div>
                  </div>
                </div>
                <div className="modal-footer border-top" style={{ borderColor: '#334155 !important' }}>
                  <button type="button" className="btn btn-outline-light" onClick={handleCloseModal}>
                    {t('common.cancel')}
                  </button>
                  <button type="submit" className="btn btn-info" disabled={saving}>
                    {saving ? (
                      <>
                        <span className="spinner-border spinner-border-sm me-2"></span>
                        {t('common.loading')}
                      </>
                    ) : (
                      <>
                        <i className="bi bi-check-lg me-2"></i>
                        {selectedItem ? t('common.save') : t('common.create')}
                      </>
                    )}
                  </button>
                </div>
              </form>
            </div>
          </div>
        </div>
      )}

      {/* Modal de Confirmação de Exclusão */}
      <ConfirmModal
        show={showDeleteModal}
        onHide={() => setShowDeleteModal(false)}
        onConfirm={handleDeleteConfirm}
        title={t('categories.deleteCategory')}
        message={t('categories.deleteConfirm')}
        confirmText={t('common.delete')}
        loading={saving}
      />

      {/* Modal de Categorização em Lote */}
      {showBatchModal && (
        <div className="modal show d-block" style={{ backgroundColor: 'rgba(0,0,0,0.7)' }}>
          <div className="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
            <div className="modal-content border-0" style={{ background: '#1e293b' }}>
              <div className="modal-header border-secondary">
                <h5 className="modal-title text-white">
                  <i className="bi bi-lightning-charge me-2 text-warning"></i>
                  {t('categories.batchCategorize') || 'Categorização em Lote'}
                </h5>
                <button type="button" className="btn-close btn-close-white" onClick={handleCloseBatchModal}></button>
              </div>
              <div className="modal-body">
                {loadingBatch ? (
                  <div className="text-center py-5">
                    <div className="spinner-border text-info" role="status">
                      <span className="visually-hidden">Loading...</span>
                    </div>
                    <p className="text-slate-400 mt-3">{t('common.loading') || 'Carregando...'}</p>
                  </div>
                ) : batchPreview ? (
                  <>
                    {/* Resumo */}
                    <div className="row mb-4">
                      <div className="col-md-3">
                        <div className="card border-0" style={{ background: '#0f172a' }}>
                          <div className="card-body text-center">
                            <h3 className="text-warning mb-1">{batchPreview.total_uncategorized}</h3>
                            <small className="text-slate-400">{t('categories.uncategorized') || 'Sem categoria'}</small>
                          </div>
                        </div>
                      </div>
                      <div className="col-md-3">
                        <div className="card border-0" style={{ background: '#0f172a' }}>
                          <div className="card-body text-center">
                            <h3 className="text-success mb-1">{batchPreview.would_categorize}</h3>
                            <small className="text-slate-400">{t('categories.willCategorize') || 'Serão categorizadas'}</small>
                          </div>
                        </div>
                      </div>
                      <div className="col-md-3">
                        <div className="card border-0" style={{ background: '#0f172a' }}>
                          <div className="card-body text-center">
                            <h3 className="text-secondary mb-1">{batchPreview.would_skip}</h3>
                            <small className="text-slate-400">{t('categories.willSkip') || 'Sem correspondência'}</small>
                          </div>
                        </div>
                      </div>
                      <div className="col-md-3">
                        <div className="card border-0" style={{ background: '#0f172a' }}>
                          <div className="card-body text-center">
                            <h3 className="text-info mb-1">{batchPreview.total_keywords}</h3>
                            <small className="text-slate-400">{t('categories.totalKeywords') || 'Palavras-chave'}</small>
                          </div>
                        </div>
                      </div>
                    </div>

                    {/* Preview */}
                    {batchPreview.preview.length > 0 ? (
                      <>
                        <h6 className="text-white mb-3">
                          <i className="bi bi-eye me-2"></i>
                          {t('categories.previewTitle') || 'Preview das categorizações'}
                        </h6>
                        <div className="table-responsive" style={{ maxHeight: '300px' }}>
                          <table className="table table-dark table-striped table-hover mb-0">
                            <thead style={{ position: 'sticky', top: 0, background: '#1e293b' }}>
                              <tr>
                                <th>{t('transactions.description') || 'Descrição'}</th>
                                <th>{t('categories.matchedKeyword') || 'Keyword'}</th>
                                <th>{t('categories.category') || 'Categoria'}</th>
                              </tr>
                            </thead>
                            <tbody>
                              {batchPreview.preview.map((item, index) => (
                                <tr key={index}>
                                  <td className="text-truncate" style={{ maxWidth: '300px' }}>
                                    {item.description}
                                  </td>
                                  <td>
                                    <span className="badge bg-warning text-dark">{item.matched_keyword}</span>
                                  </td>
                                  <td className="text-info">{item.category_name}</td>
                                </tr>
                              ))}
                            </tbody>
                          </table>
                        </div>
                      </>
                    ) : (
                      <div className="alert alert-warning">
                        <i className="bi bi-exclamation-triangle me-2"></i>
                        {t('categories.noMatchesFound') || 'Nenhuma transação corresponde às palavras-chave configuradas'}
                      </div>
                    )}
                  </>
                ) : (
                  <div className="alert alert-danger">
                    {t('categories.previewError') || 'Erro ao carregar preview'}
                  </div>
                )}
              </div>
              <div className="modal-footer border-secondary">
                <button type="button" className="btn btn-outline-secondary" onClick={handleCloseBatchModal}>
                  {t('common.cancel') || 'Cancelar'}
                </button>
                <button
                  type="button"
                  className="btn btn-warning"
                  onClick={handleExecuteBatch}
                  disabled={executingBatch || !batchPreview || batchPreview.would_categorize === 0}
                >
                  {executingBatch ? (
                    <>
                      <span className="spinner-border spinner-border-sm me-2" role="status"></span>
                      {t('common.processing') || 'Processando...'}
                    </>
                  ) : (
                    <>
                      <i className="bi bi-lightning-charge me-2"></i>
                      {t('categories.executeBatch') || 'Executar Categorização'}
                    </>
                  )}
                </button>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default Categories;
