// ============================================================
// DataManageSetting — 本地数据管理设置区块
//
// 功能：
//   - 展示本地缓存统计（任务/订单/媒体数量）
//   - [加载历史数据]：各拉首批数据（100 条任务、100 条充值订单、100 条 VIP 订单）
//   - [清理缓存]：清空当前用户本地数据
//   - [保存到磁盘]：手动触发加密落盘
//
// "下一页"逻辑在对应列表页组件中：
//   - TaskHistory → 滚动到最后一页本地数据时调 fetchMoreTasks()
//   - OrdersPage  → 滚动到最后一页本地数据时调 fetchMoreOrders()
// ============================================================

import { useState, useCallback, useEffect } from 'react';
import { Card, Button, Typography, App, Divider } from 'antd';
import { CloudDownloadOutlined, DeleteOutlined, ReloadOutlined } from '@ant-design/icons';
import {
  initStorage, getStorageStats, clearUserStorage, saveDatabase,
} from '@/infrastructure/storage';
import { fetchAndSyncTasks, fetchAndSyncRechargeOrders, fetchAndSyncVipOrders } from '@/infrastructure/storage/services/data-sync';

const { Text } = Typography;

// ---------- 组件 ----------

export function DataManageSetting() {
  const { message } = App.useApp();
  const [loading, setLoading] = useState(false);
  const [stats, setStats] = useState(() => getStorageStats());

  const refreshStats = useCallback(() => setStats(getStorageStats()), []);

  // 一键加载首批数据
  const loadAll = useCallback(async () => {
    setLoading(true);
    try {
      await Promise.allSettled([
        fetchAndSyncTasks(),
        fetchAndSyncRechargeOrders(),
        fetchAndSyncVipOrders(),
      ]);
      refreshStats();
    } finally {
      setLoading(false);
    }
  }, [refreshStats]);

  // 清理缓存
  const handleClear = useCallback(() => {
    clearUserStorage().then(async () => {
      await initStorage();
      refreshStats();
      message.success('本地缓存已清理');
    });
  }, [message, refreshStats]);

  // 保存到磁盘
  const handleSave = useCallback(() => {
    saveDatabase().then(ok => {
      message[ok ? 'success' : 'error'](ok ? '数据已保存到磁盘' : '保存失败');
    });
  }, [message]);

  useEffect(() => { refreshStats(); }, [refreshStats]);

  return (
    <Card size="small" title="数据管理" className="rounded-md!">
      <div className="flex flex-col gap-3">
        {/* ---- 统计 ---- */}
        <div className="flex flex-col gap-1">
          <Text type="secondary" className="text-xs">本地缓存概况</Text>
          <div className="flex gap-4">
            <Text className="text-xs">
              任务：<Text strong>{stats.taskCount}</Text> 条
            </Text>
            <Text className="text-xs">
              订单：<Text strong>{stats.orderCount}</Text> 条
            </Text>
            <Text className="text-xs">
              媒体：<Text strong>{stats.mediaCount}</Text> 个
            </Text>
          </div>
        </div>

        <Divider style={{ margin: '4px 0' }} />

        <Button
          size="small"
          type="primary"
          icon={<CloudDownloadOutlined />}
          onClick={loadAll}
          loading={loading}
          block
        >
          加载历史数据（每类各拉首批）
        </Button>

        <Divider style={{ margin: '4px 0' }} />

        <div className="flex gap-2">
          <Button size="small" icon={<ReloadOutlined />} onClick={handleSave}>
            保存到磁盘
          </Button>
          <Button size="small" danger icon={<DeleteOutlined />} onClick={handleClear}>
            清理缓存
          </Button>
        </div>
      </div>
    </Card>
  );
}