import React from 'react';

const Settings = () => {
  const handleExport = async () => {
    if (window.electronAPI) {
      const servers = await window.electronAPI.loadServers();
      const passwords = await window.electronAPI.loadPasswords();
      const templates = await window.electronAPI.loadCommandTemplates();

      const data = {
        servers: servers.success ? servers.servers : [],
        passwords: passwords.success ? passwords.passwords : [],
        templates: templates.success ? templates.templates : [],
        exportDate: new Date().toISOString()
      };

      const result = await window.electronAPI.exportData(data);
      if (result.success) {
        alert('Данные успешно экспортированы!');
      } else {
        alert(`Ошибка экспорта: ${result.error}`);
      }
    }
  };

  const handleImport = async () => {
    if (window.electronAPI) {
      const result = await window.electronAPI.importData();
      if (result.success) {
        const data = result.data;
        
        if (data.servers) {
          await window.electronAPI.saveServers(data.servers);
        }
        if (data.passwords) {
          await window.electronAPI.savePasswords(data.passwords);
        }
        if (data.templates) {
          await window.electronAPI.saveCommandTemplates(data.templates);
        }
        
        alert('Данные успешно импортированы! Перезагрузите приложение.');
      } else {
        alert(`Ошибка импорта: ${result.error}`);
      }
    }
  };

  return (
    <div className="p-6">
      <div className="mb-6">
        <h1 className="text-2xl font-bold text-white">Настройки</h1>
        <p className="text-gray-400">Управление данными приложения</p>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div className="bg-gray-800 rounded-lg p-6">
          <h3 className="text-lg font-semibold text-white mb-4">Экспорт данных</h3>
          <p className="text-gray-400 mb-4">Сохраните все данные в файл для резервного копирования</p>
          <button
            onClick={handleExport}
            className="w-full bg-primary-600 text-white py-2 px-4 rounded-lg hover:bg-primary-700 transition-colors"
          >
            Экспортировать данные
          </button>
        </div>

        <div className="bg-gray-800 rounded-lg p-6">
          <h3 className="text-lg font-semibold text-white mb-4">Импорт данных</h3>
          <p className="text-gray-400 mb-4">Восстановите данные из ранее созданного файла</p>
          <button
            onClick={handleImport}
            className="w-full bg-primary-600 text-white py-2 px-4 rounded-lg hover:bg-primary-700 transition-colors"
          >
            Импортировать данные
          </button>
        </div>
      </div>

      <div className="mt-6 bg-gray-800 rounded-lg p-6">
        <h3 className="text-lg font-semibold text-white mb-4">Информация о приложении</h3>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
          <div>
            <span className="text-gray-400">Версия:</span>
            <span className="text-white ml-2">2.0</span>
          </div>
          <div>
            <span className="text-gray-400">Платформа:</span>
            <span className="text-white ml-2">{navigator.platform}</span>
          </div>
          <div>
            <span className="text-gray-400">Electron:</span>
            <span className="text-white ml-2">✓</span>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Settings;