import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import Layout from '../components/Layout/Layout';
import Card, { CardHeader, CardContent } from '../components/common/Card';
import Button from '../components/common/Button';
import { useAuth } from '../contexts/AuthContext';

const SettingsPage: React.FC = () => {
  const navigate = useNavigate();
  const { logout } = useAuth();
  const [dataExported, setDataExported] = useState(false);
  
  // 导出所有数据
  const handleExportAllData = () => {
    const promptGroups = localStorage.getItem('promptGroups');
    const categories = localStorage.getItem('categories');
    
    const allData = {
      promptGroups: promptGroups ? JSON.parse(promptGroups) : [],
      categories: categories ? JSON.parse(categories) : []
    };
    
    const jsonString = JSON.stringify(allData, null, 2);
    const blob = new Blob([jsonString], { type: 'application/json' });
    const url = URL.createObjectURL(blob);
    
    const a = document.createElement('a');
    a.href = url;
    a.download = `prompt-manager-backup-${new Date().toISOString().split('T')[0]}.json`;
    document.body.appendChild(a);
    a.click();
    
    // 清理
    setTimeout(() => {
      document.body.removeChild(a);
      URL.revokeObjectURL(url);
      setDataExported(true);
      
      // 重置状态
      setTimeout(() => setDataExported(false), 3000);
    }, 0);
  };
  
  // 导入数据文件
  const handleImportData = (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0];
    if (!file) return;
    
    const reader = new FileReader();
    reader.onload = (e) => {
      try {
        const data = JSON.parse(e.target?.result as string);
        
        if (data.promptGroups && Array.isArray(data.promptGroups)) {
          localStorage.setItem('promptGroups', JSON.stringify(data.promptGroups));
        }
        
        if (data.categories && Array.isArray(data.categories)) {
          localStorage.setItem('categories', JSON.stringify(data.categories));
        }
        
        alert('数据导入成功，应用将刷新以加载新数据。');
        window.location.reload();
      } catch (error) {
        alert('导入失败，文件格式不正确。');
        console.error('导入错误:', error);
      }
    };
    reader.readAsText(file);
  };
  
  // 清除所有数据
  const handleClearAllData = () => {
    if (window.confirm('确定要清除所有数据吗？此操作不可撤销。')) {
      localStorage.removeItem('promptGroups');
      localStorage.removeItem('categories');
      alert('所有数据已清除，应用将刷新。');
      window.location.reload();
    }
  };
  
  // 退出登录
  const handleLogout = () => {
    if (window.confirm('确定要退出登录吗？')) {
      logout();
      navigate('/login');
    }
  };

  return (
    <Layout title="设置">
      <div className="space-y-4">
        {/* 账户管理卡片 */}
        <Card>
          <CardHeader title="账户管理" />
          <CardContent>
            <div className="space-y-4">
              <Button
                variant="danger"
                fullWidth
                onClick={handleLogout}
              >
                退出登录
              </Button>
            </div>
          </CardContent>
        </Card>
        
        {/* 数据管理卡片 */}
        <Card>
          <CardHeader title="数据管理" />
          <CardContent>
            <div className="space-y-4">
              <div>
                <h3 className="font-medium mb-2">备份数据</h3>
                <p className="text-gray-600 text-sm mb-2">
                  导出所有提示词组和分类数据为JSON文件，可用于备份或迁移。
                </p>
                <Button
                  variant="primary"
                  onClick={handleExportAllData}
                >
                  {dataExported ? '✓ 导出成功' : '导出所有数据'}
                </Button>
              </div>
              
              <div className="ios-divider"></div>
              
              <div>
                <h3 className="font-medium mb-2">导入数据</h3>
                <p className="text-gray-600 text-sm mb-2">
                  从之前导出的JSON文件中恢复数据。将覆盖当前所有数据。
                </p>
                <input
                  type="file"
                  id="import-file"
                  accept=".json"
                  style={{ display: 'none' }}
                  onChange={handleImportData}
                />
                <Button
                  variant="secondary"
                  onClick={() => document.getElementById('import-file')?.click()}
                >
                  导入数据
                </Button>
              </div>
              
              <div className="ios-divider"></div>
              
              <div>
                <h3 className="font-medium mb-2">清除数据</h3>
                <p className="text-gray-600 text-sm mb-2">
                  删除所有存储的提示词组和分类数据。此操作不可撤销。
                </p>
                <Button
                  variant="danger"
                  onClick={handleClearAllData}
                >
                  清除所有数据
                </Button>
              </div>
            </div>
          </CardContent>
        </Card>
        
        <Card>
          <CardHeader title="关于" />
          <CardContent>
            <h3 className="font-medium mb-2">提示词管理应用</h3>
            <p className="text-gray-600 text-sm mb-4">
              版本 1.0.0
            </p>
            <p className="text-gray-600 text-sm">
              这是一个用于管理提示词、工作流和DSL文件的本地应用。所有数据均存储在浏览器的本地存储中。
            </p>
          </CardContent>
        </Card>
      </div>
    </Layout>
  );
};

export default SettingsPage;