'use client';

import { useState, useEffect } from 'react';
import { translationsApi, Translation, TranslationListResponse } from '@/lib/api';

const CATEGORY_LABELS: Record<string, string> = {
  maker: 'Maker (제조사)',
  model: 'Model (모델)',
  fuel: 'Fuel (연료)',
  transmission: 'Transmission (변속기)',
  color: 'Color (색상)',
  car_name: 'Car Name (차량명)',
  general: 'General (일반)',
};

interface TranslationStats {
  total_entries: number;
  by_category: Record<string, number>;
  translation_coverage: {
    english: { translated: number; total: number; percentage: number };
    mongolian: { translated: number; total: number; percentage: number };
    russian: { translated: number; total: number; percentage: number };
  };
}

export default function TranslationsPage() {
  const [translations, setTranslations] = useState<Translation[]>([]);
  const [categories, setCategories] = useState<string[]>([]);
  const [loading, setLoading] = useState(true);
  const [total, setTotal] = useState(0);
  const [page, setPage] = useState(1);
  const [selectedCategory, setSelectedCategory] = useState<string>('');
  const [searchTerm, setSearchTerm] = useState('');
  const [editingId, setEditingId] = useState<number | null>(null);
  const [editData, setEditData] = useState<Partial<Translation>>({});
  const [showAddModal, setShowAddModal] = useState(false);
  const [showBatchModal, setShowBatchModal] = useState(false);
  const [translatingId, setTranslatingId] = useState<number | null>(null);
  const [batchTranslating, setBatchTranslating] = useState(false);
  const [stats, setStats] = useState<TranslationStats | null>(null);
  const [batchOptions, setBatchOptions] = useState({
    category: '',
    overwriteExisting: false,
    targetLangs: ['en', 'mn', 'ru'] as string[],
  });
  const [batchResult, setBatchResult] = useState<{
    total_processed: number;
    successful: number;
    failed: number;
  } | null>(null);
  const [newTranslation, setNewTranslation] = useState({
    source_text: '',
    category: 'general',
    text_en: '',
    text_mn: '',
    text_ru: '',
  });

  const pageSize = 20;

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

  useEffect(() => {
    loadTranslations();
  }, [page, selectedCategory, searchTerm]);

  const loadCategories = async () => {
    try {
      const data = await translationsApi.getCategories();
      setCategories(data);
    } catch (err) {
      console.error('Failed to load categories:', err);
    }
  };

  const loadStats = async () => {
    try {
      const data = await translationsApi.getStats();
      setStats(data);
    } catch (err) {
      console.error('Failed to load stats:', err);
    }
  };

  const loadTranslations = async () => {
    setLoading(true);
    try {
      const data = await translationsApi.getList({
        page,
        page_size: pageSize,
        category: selectedCategory || undefined,
        search: searchTerm || undefined,
      });
      setTranslations(data.translations);
      setTotal(data.total);
    } catch (err) {
      console.error('Failed to load translations:', err);
    } finally {
      setLoading(false);
    }
  };

  const handleAutoExtract = async () => {
    try {
      const result = await translationsApi.autoExtract();
      alert(result.message);
      loadTranslations();
      loadStats();
    } catch (err) {
      console.error('Failed to auto-extract:', err);
      alert('Failed to auto-extract translations');
    }
  };

  const handleAutoTranslate = async (translation: Translation) => {
    setTranslatingId(translation.id);
    try {
      const result = await translationsApi.autoTranslate(translation.id);
      alert(`Auto-translated: ${result.message}`);
      loadTranslations();
      loadStats();
    } catch (err: any) {
      console.error('Failed to auto-translate:', err);
      alert(err.response?.data?.detail || 'Failed to auto-translate');
    } finally {
      setTranslatingId(null);
    }
  };

  const handleBatchTranslate = async () => {
    setBatchTranslating(true);
    setBatchResult(null);
    try {
      const result = await translationsApi.autoTranslateBatch(
        batchOptions.targetLangs,
        batchOptions.category || undefined,
        batchOptions.overwriteExisting
      );
      setBatchResult({
        total_processed: result.total_processed,
        successful: result.successful,
        failed: result.failed,
      });
      loadTranslations();
      loadStats();
    } catch (err: any) {
      console.error('Failed to batch translate:', err);
      alert(err.response?.data?.detail || 'Failed to batch translate');
    } finally {
      setBatchTranslating(false);
    }
  };

  const handleEdit = (translation: Translation) => {
    setEditingId(translation.id);
    setEditData({
      text_en: translation.text_en || '',
      text_mn: translation.text_mn || '',
      text_ru: translation.text_ru || '',
    });
  };

  const handleSave = async (id: number) => {
    try {
      await translationsApi.update(id, editData);
      setEditingId(null);
      loadTranslations();
      loadStats();
    } catch (err) {
      console.error('Failed to save:', err);
      alert('Failed to save translation');
    }
  };

  const handleDelete = async (id: number) => {
    if (!confirm('Delete this translation?')) return;
    try {
      await translationsApi.delete(id);
      loadTranslations();
      loadStats();
    } catch (err) {
      console.error('Failed to delete:', err);
      alert('Failed to delete translation');
    }
  };

  const handleAdd = async () => {
    if (!newTranslation.source_text.trim()) {
      alert('Source text is required');
      return;
    }
    try {
      await translationsApi.create(newTranslation);
      setShowAddModal(false);
      setNewTranslation({
        source_text: '',
        category: 'general',
        text_en: '',
        text_mn: '',
        text_ru: '',
      });
      loadTranslations();
      loadStats();
    } catch (err: any) {
      console.error('Failed to add:', err);
      alert(err.response?.data?.detail || 'Failed to add translation');
    }
  };

  const totalPages = Math.ceil(total / pageSize);

  return (
    <div>
      <div className="flex justify-between items-center mb-6">
        <h1 className="text-2xl font-bold text-gray-800">Translations Management</h1>
        <div className="flex gap-2">
          <button
            onClick={handleAutoExtract}
            className="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 flex items-center gap-2"
          >
            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
            </svg>
            Auto Extract
          </button>
          <button
            onClick={() => setShowBatchModal(true)}
            className="bg-purple-600 text-white px-4 py-2 rounded-lg hover:bg-purple-700 flex items-center gap-2"
          >
            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129" />
            </svg>
            Batch Translate
          </button>
          <button
            onClick={() => setShowAddModal(true)}
            className="bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 flex items-center gap-2"
          >
            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
            </svg>
            Add New
          </button>
        </div>
      </div>

      {/* Translation Statistics */}
      {stats && (
        <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
          <div className="bg-white rounded-xl shadow-sm p-4">
            <div className="text-sm text-gray-500">Total Entries</div>
            <div className="text-2xl font-bold text-gray-800">{stats.total_entries}</div>
          </div>
          <div className="bg-white rounded-xl shadow-sm p-4">
            <div className="text-sm text-gray-500">English Coverage</div>
            <div className="flex items-center gap-2">
              <div className="text-2xl font-bold text-blue-600">{stats.translation_coverage.english.percentage.toFixed(1)}%</div>
              <div className="text-xs text-gray-400">({stats.translation_coverage.english.translated}/{stats.translation_coverage.english.total})</div>
            </div>
            <div className="w-full bg-gray-200 rounded-full h-2 mt-2">
              <div className="bg-blue-600 h-2 rounded-full" style={{ width: `${stats.translation_coverage.english.percentage}%` }}></div>
            </div>
          </div>
          <div className="bg-white rounded-xl shadow-sm p-4">
            <div className="text-sm text-gray-500">Mongolian Coverage</div>
            <div className="flex items-center gap-2">
              <div className="text-2xl font-bold text-green-600">{stats.translation_coverage.mongolian.percentage.toFixed(1)}%</div>
              <div className="text-xs text-gray-400">({stats.translation_coverage.mongolian.translated}/{stats.translation_coverage.mongolian.total})</div>
            </div>
            <div className="w-full bg-gray-200 rounded-full h-2 mt-2">
              <div className="bg-green-600 h-2 rounded-full" style={{ width: `${stats.translation_coverage.mongolian.percentage}%` }}></div>
            </div>
          </div>
          <div className="bg-white rounded-xl shadow-sm p-4">
            <div className="text-sm text-gray-500">Russian Coverage</div>
            <div className="flex items-center gap-2">
              <div className="text-2xl font-bold text-red-600">{stats.translation_coverage.russian.percentage.toFixed(1)}%</div>
              <div className="text-xs text-gray-400">({stats.translation_coverage.russian.translated}/{stats.translation_coverage.russian.total})</div>
            </div>
            <div className="w-full bg-gray-200 rounded-full h-2 mt-2">
              <div className="bg-red-600 h-2 rounded-full" style={{ width: `${stats.translation_coverage.russian.percentage}%` }}></div>
            </div>
          </div>
        </div>
      )}

      {/* Category Stats */}
      {stats && Object.keys(stats.by_category).length > 0 && (
        <div className="bg-white rounded-xl shadow-sm p-4 mb-6">
          <h3 className="text-sm font-medium text-gray-700 mb-3">Entries by Category</h3>
          <div className="flex flex-wrap gap-2">
            {Object.entries(stats.by_category).map(([cat, count]) => (
              <span key={cat} className="px-3 py-1 bg-gray-100 text-gray-700 rounded-full text-sm">
                {CATEGORY_LABELS[cat] || cat}: {count}
              </span>
            ))}
          </div>
        </div>
      )}

      {/* Filters */}
      <div className="bg-white rounded-xl shadow-sm p-4 mb-6">
        <div className="flex flex-wrap gap-4">
          <div className="flex-1 min-w-[200px]">
            <label className="block text-sm font-medium text-gray-700 mb-1">Search</label>
            <input
              type="text"
              value={searchTerm}
              onChange={(e) => {
                setSearchTerm(e.target.value);
                setPage(1);
              }}
              placeholder="Search translations..."
              className="w-full border border-gray-300 rounded-lg px-3 py-2"
            />
          </div>
          <div className="w-48">
            <label className="block text-sm font-medium text-gray-700 mb-1">Category</label>
            <select
              value={selectedCategory}
              onChange={(e) => {
                setSelectedCategory(e.target.value);
                setPage(1);
              }}
              className="w-full border border-gray-300 rounded-lg px-3 py-2"
            >
              <option value="">All Categories</option>
              {categories.map((cat) => (
                <option key={cat} value={cat}>
                  {CATEGORY_LABELS[cat] || cat}
                </option>
              ))}
            </select>
          </div>
        </div>
      </div>

      {/* Table */}
      <div className="bg-white rounded-xl shadow-sm overflow-hidden">
        <div className="overflow-x-auto">
          <table className="w-full">
            <thead>
              <tr className="bg-gray-50 border-b border-gray-200">
                <th className="py-3 px-4 text-left text-sm font-medium text-gray-600">Category</th>
                <th className="py-3 px-4 text-left text-sm font-medium text-gray-600">Korean (Source)</th>
                <th className="py-3 px-4 text-left text-sm font-medium text-gray-600">English</th>
                <th className="py-3 px-4 text-left text-sm font-medium text-gray-600">Mongolian</th>
                <th className="py-3 px-4 text-left text-sm font-medium text-gray-600">Russian</th>
                <th className="py-3 px-4 text-left text-sm font-medium text-gray-600 w-40">Actions</th>
              </tr>
            </thead>
            <tbody>
              {loading ? (
                <tr>
                  <td colSpan={6} className="py-8 text-center">
                    <div className="flex justify-center">
                      <div className="w-8 h-8 border-4 border-primary-600 border-t-transparent rounded-full animate-spin"></div>
                    </div>
                  </td>
                </tr>
              ) : translations.length === 0 ? (
                <tr>
                  <td colSpan={6} className="py-8 text-center text-gray-500">
                    No translations found
                  </td>
                </tr>
              ) : (
                translations.map((trans) => (
                  <tr key={trans.id} className="border-b border-gray-100 hover:bg-gray-50">
                    <td className="py-3 px-4">
                      <span className="px-2 py-1 bg-blue-100 text-blue-700 rounded text-xs">
                        {CATEGORY_LABELS[trans.category] || trans.category}
                      </span>
                    </td>
                    <td className="py-3 px-4 font-medium text-gray-800">{trans.source_text}</td>
                    <td className="py-3 px-4">
                      {editingId === trans.id ? (
                        <input
                          type="text"
                          value={editData.text_en || ''}
                          onChange={(e) => setEditData({ ...editData, text_en: e.target.value })}
                          className="w-full border border-gray-300 rounded px-2 py-1 text-sm"
                        />
                      ) : (
                        <span className={trans.text_en ? 'text-gray-700' : 'text-gray-400 italic'}>
                          {trans.text_en || 'Not set'}
                        </span>
                      )}
                    </td>
                    <td className="py-3 px-4">
                      {editingId === trans.id ? (
                        <input
                          type="text"
                          value={editData.text_mn || ''}
                          onChange={(e) => setEditData({ ...editData, text_mn: e.target.value })}
                          className="w-full border border-gray-300 rounded px-2 py-1 text-sm"
                        />
                      ) : (
                        <span className={trans.text_mn ? 'text-gray-700' : 'text-gray-400 italic'}>
                          {trans.text_mn || 'Not set'}
                        </span>
                      )}
                    </td>
                    <td className="py-3 px-4">
                      {editingId === trans.id ? (
                        <input
                          type="text"
                          value={editData.text_ru || ''}
                          onChange={(e) => setEditData({ ...editData, text_ru: e.target.value })}
                          className="w-full border border-gray-300 rounded px-2 py-1 text-sm"
                        />
                      ) : (
                        <span className={trans.text_ru ? 'text-gray-700' : 'text-gray-400 italic'}>
                          {trans.text_ru || 'Not set'}
                        </span>
                      )}
                    </td>
                    <td className="py-3 px-4">
                      {editingId === trans.id ? (
                        <div className="flex gap-2">
                          <button
                            onClick={() => handleSave(trans.id)}
                            className="text-green-600 hover:text-green-700"
                            title="Save"
                          >
                            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                            </svg>
                          </button>
                          <button
                            onClick={() => setEditingId(null)}
                            className="text-gray-600 hover:text-gray-700"
                            title="Cancel"
                          >
                            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                            </svg>
                          </button>
                        </div>
                      ) : (
                        <div className="flex gap-2">
                          <button
                            onClick={() => handleAutoTranslate(trans)}
                            disabled={translatingId === trans.id}
                            className={`text-purple-600 hover:text-purple-700 ${translatingId === trans.id ? 'opacity-50' : ''}`}
                            title="Auto Translate"
                          >
                            {translatingId === trans.id ? (
                              <div className="w-5 h-5 border-2 border-purple-600 border-t-transparent rounded-full animate-spin"></div>
                            ) : (
                              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129" />
                              </svg>
                            )}
                          </button>
                          <button
                            onClick={() => handleEdit(trans)}
                            className="text-blue-600 hover:text-blue-700"
                            title="Edit"
                          >
                            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                            </svg>
                          </button>
                          <button
                            onClick={() => handleDelete(trans.id)}
                            className="text-red-600 hover:text-red-700"
                            title="Delete"
                          >
                            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                            </svg>
                          </button>
                        </div>
                      )}
                    </td>
                  </tr>
                ))
              )}
            </tbody>
          </table>
        </div>

        {/* Pagination */}
        {totalPages > 1 && (
          <div className="flex justify-center items-center gap-2 py-4 border-t border-gray-200">
            <button
              onClick={() => setPage((p) => Math.max(1, p - 1))}
              disabled={page === 1}
              className="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50"
            >
              Prev
            </button>
            <span className="px-4 text-gray-600">
              Page {page} of {totalPages} ({total} total)
            </span>
            <button
              onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
              disabled={page === totalPages}
              className="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50"
            >
              Next
            </button>
          </div>
        )}
      </div>

      {/* Add Modal */}
      {showAddModal && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
          <div className="bg-white rounded-2xl max-w-lg w-full p-6">
            <h2 className="text-xl font-bold text-gray-800 mb-4">Add Translation</h2>

            <div className="space-y-4">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  Korean (Source Text) *
                </label>
                <input
                  type="text"
                  value={newTranslation.source_text}
                  onChange={(e) => setNewTranslation({ ...newTranslation, source_text: e.target.value })}
                  className="w-full border border-gray-300 rounded-lg px-3 py-2"
                  placeholder="Enter Korean text"
                />
              </div>

              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Category</label>
                <select
                  value={newTranslation.category}
                  onChange={(e) => setNewTranslation({ ...newTranslation, category: e.target.value })}
                  className="w-full border border-gray-300 rounded-lg px-3 py-2"
                >
                  {categories.map((cat) => (
                    <option key={cat} value={cat}>
                      {CATEGORY_LABELS[cat] || cat}
                    </option>
                  ))}
                </select>
              </div>

              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">English</label>
                <input
                  type="text"
                  value={newTranslation.text_en}
                  onChange={(e) => setNewTranslation({ ...newTranslation, text_en: e.target.value })}
                  className="w-full border border-gray-300 rounded-lg px-3 py-2"
                  placeholder="English translation"
                />
              </div>

              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Mongolian</label>
                <input
                  type="text"
                  value={newTranslation.text_mn}
                  onChange={(e) => setNewTranslation({ ...newTranslation, text_mn: e.target.value })}
                  className="w-full border border-gray-300 rounded-lg px-3 py-2"
                  placeholder="Mongolian translation"
                />
              </div>

              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Russian</label>
                <input
                  type="text"
                  value={newTranslation.text_ru}
                  onChange={(e) => setNewTranslation({ ...newTranslation, text_ru: e.target.value })}
                  className="w-full border border-gray-300 rounded-lg px-3 py-2"
                  placeholder="Russian translation"
                />
              </div>
            </div>

            <div className="flex justify-end gap-3 mt-6">
              <button
                onClick={() => setShowAddModal(false)}
                className="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50"
              >
                Cancel
              </button>
              <button
                onClick={handleAdd}
                className="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700"
              >
                Add
              </button>
            </div>
          </div>
        </div>
      )}

      {/* Batch Translate Modal */}
      {showBatchModal && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
          <div className="bg-white rounded-2xl max-w-lg w-full p-6">
            <h2 className="text-xl font-bold text-gray-800 mb-4">Batch Auto-Translate</h2>

            <div className="space-y-4">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Category (Optional)</label>
                <select
                  value={batchOptions.category}
                  onChange={(e) => setBatchOptions({ ...batchOptions, category: e.target.value })}
                  className="w-full border border-gray-300 rounded-lg px-3 py-2"
                >
                  <option value="">All Categories</option>
                  {categories.map((cat) => (
                    <option key={cat} value={cat}>
                      {CATEGORY_LABELS[cat] || cat}
                    </option>
                  ))}
                </select>
                <p className="text-xs text-gray-500 mt-1">Leave empty to translate all categories</p>
              </div>

              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">Target Languages</label>
                <div className="flex gap-4">
                  <label className="flex items-center gap-2">
                    <input
                      type="checkbox"
                      checked={batchOptions.targetLangs.includes('en')}
                      onChange={(e) => {
                        if (e.target.checked) {
                          setBatchOptions({ ...batchOptions, targetLangs: [...batchOptions.targetLangs, 'en'] });
                        } else {
                          setBatchOptions({ ...batchOptions, targetLangs: batchOptions.targetLangs.filter(l => l !== 'en') });
                        }
                      }}
                      className="rounded"
                    />
                    <span>English</span>
                  </label>
                  <label className="flex items-center gap-2">
                    <input
                      type="checkbox"
                      checked={batchOptions.targetLangs.includes('mn')}
                      onChange={(e) => {
                        if (e.target.checked) {
                          setBatchOptions({ ...batchOptions, targetLangs: [...batchOptions.targetLangs, 'mn'] });
                        } else {
                          setBatchOptions({ ...batchOptions, targetLangs: batchOptions.targetLangs.filter(l => l !== 'mn') });
                        }
                      }}
                      className="rounded"
                    />
                    <span>Mongolian</span>
                  </label>
                  <label className="flex items-center gap-2">
                    <input
                      type="checkbox"
                      checked={batchOptions.targetLangs.includes('ru')}
                      onChange={(e) => {
                        if (e.target.checked) {
                          setBatchOptions({ ...batchOptions, targetLangs: [...batchOptions.targetLangs, 'ru'] });
                        } else {
                          setBatchOptions({ ...batchOptions, targetLangs: batchOptions.targetLangs.filter(l => l !== 'ru') });
                        }
                      }}
                      className="rounded"
                    />
                    <span>Russian</span>
                  </label>
                </div>
              </div>

              <div>
                <label className="flex items-center gap-2">
                  <input
                    type="checkbox"
                    checked={batchOptions.overwriteExisting}
                    onChange={(e) => setBatchOptions({ ...batchOptions, overwriteExisting: e.target.checked })}
                    className="rounded"
                  />
                  <span className="text-sm text-gray-700">Overwrite existing translations</span>
                </label>
                <p className="text-xs text-gray-500 mt-1">If unchecked, only empty translations will be filled</p>
              </div>

              {batchResult && (
                <div className="bg-gray-50 rounded-lg p-4">
                  <h3 className="font-medium text-gray-700 mb-2">Translation Results</h3>
                  <div className="grid grid-cols-3 gap-4 text-center">
                    <div>
                      <div className="text-2xl font-bold text-gray-800">{batchResult.total_processed}</div>
                      <div className="text-xs text-gray-500">Processed</div>
                    </div>
                    <div>
                      <div className="text-2xl font-bold text-green-600">{batchResult.successful}</div>
                      <div className="text-xs text-gray-500">Successful</div>
                    </div>
                    <div>
                      <div className="text-2xl font-bold text-red-600">{batchResult.failed}</div>
                      <div className="text-xs text-gray-500">Failed</div>
                    </div>
                  </div>
                </div>
              )}
            </div>

            <div className="flex justify-end gap-3 mt-6">
              <button
                onClick={() => {
                  setShowBatchModal(false);
                  setBatchResult(null);
                }}
                className="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50"
              >
                Close
              </button>
              <button
                onClick={handleBatchTranslate}
                disabled={batchTranslating || batchOptions.targetLangs.length === 0}
                className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 disabled:opacity-50 flex items-center gap-2"
              >
                {batchTranslating ? (
                  <>
                    <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
                    Translating...
                  </>
                ) : (
                  <>
                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129" />
                    </svg>
                    Start Batch Translate
                  </>
                )}
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}
