import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:im_app/features/chat/presentation/chat_db_test_view_model.dart';

import '../../../core/ui/components/app_button.dart';

class ChatDbTestPage extends ConsumerStatefulWidget {
  const ChatDbTestPage({super.key});

  @override
  ConsumerState<ChatDbTestPage> createState() => _ChatDbTestPageState();
}

class _ChatDbTestPageState extends ConsumerState<ChatDbTestPage> {
  final _scrollController = ScrollController();

  @override
  void initState() {
    super.initState();
    _scrollController.addListener(_onScroll);
  }

  @override
  void dispose() {
    _scrollController.dispose();
    super.dispose();
  }

  void _onScroll() {
    if (_scrollController.position.pixels >=
        _scrollController.position.maxScrollExtent - 300) {
      ref.read(chatDbTestViewModelProvider.notifier).loadMore();
    }
  }

  @override
  Widget build(BuildContext context) {
    final vm = ref.read(chatDbTestViewModelProvider.notifier);
    final testStarted = ref.watch(
      chatDbTestViewModelProvider.select((s) => s.testStarted),
    );
    final currentState = ref.watch(
      chatDbTestViewModelProvider.select((s) => s.currentState),
    );
    final users = ref.watch(chatDbTestViewModelProvider.select((s) => s.users));
    final hasMore = ref.watch(
      chatDbTestViewModelProvider.select((s) => s.hasMore),
    );
    final totalCount = ref.watch(
      chatDbTestViewModelProvider.select((s) => s.totalCount),
    );

    return Scaffold(
      appBar: AppBar(title: Text('测试数据库 ($totalCount)')),
      body: Column(
        mainAxisSize: MainAxisSize.max,
        spacing: 16,
        children: [
          const SizedBox(height: 4),
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 8),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                AppButton.inverse(
                  label: testStarted ? '结束' : '开始',
                  onPressed: () => testStarted
                      ? vm.stopDBTest(context)
                      : vm.startDBTest(context),
                ),
                const SizedBox(width: 8),
                Expanded(child: Text(currentState, textAlign: TextAlign.end)),
              ],
            ),
          ),
          Expanded(
            child: ListView.builder(
              controller: _scrollController,
              itemCount: users.length + (hasMore ? 1 : 0),
              cacheExtent: 500,
              itemBuilder: (context, index) {
                if (index == users.length) {
                  return const Padding(
                    padding: EdgeInsets.all(16),
                    child: Center(child: CircularProgressIndicator()),
                  );
                }
                final user = users[index];
                return _UserTile(uid: user.uid, nickname: user.nickname);
              },
            ),
          ),
        ],
      ),
    );
  }
}

class _UserTile extends StatelessWidget {
  final int uid;
  final String? nickname;

  const _UserTile({required this.uid, required this.nickname});

  @override
  Widget build(BuildContext context) {
    return ListTile(
      titleAlignment: ListTileTitleAlignment.center,
      title: Text(nickname ?? '-'),
      subtitle: Text('uid: $uid'),
    );
  }
}
