rely/lib/features/sync/sync_view.dart

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:relationship_saver/core/config/app_theme.dart';
import 'package:relationship_saver/features/shared/frosted_card.dart';
import 'package:relationship_saver/features/sync/sync_coordinator.dart';
import 'package:relationship_saver/features/sync/sync_queue_repository.dart';
import 'package:relationship_saver/features/sync/sync_state.dart';

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

  @override
  ConsumerState<SyncView> createState() => _SyncViewState();
}

class _SyncViewState extends ConsumerState<SyncView> {
  bool _busy = false;
  String _status = 'Ready. Local-first mode keeps app usable without sync.';

  @override
  Widget build(BuildContext context) {
    final AsyncValue<SyncState> syncState = ref.watch(
      syncQueueRepositoryProvider,
    );

    return Padding(
      padding: const EdgeInsets.fromLTRB(28, 24, 28, 28),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Text('Sync', style: Theme.of(context).textTheme.headlineMedium),
          const SizedBox(height: 6),
          Text(
            'Queue local changes, then push and pull when network is available.',
            style: Theme.of(
              context,
            ).textTheme.bodyLarge?.copyWith(color: AppTheme.textSecondary),
          ),
          const SizedBox(height: 16),
          Expanded(
            child: syncState.when(
              data: (SyncState state) => _buildBody(context, state),
              loading: () => const Center(child: CircularProgressIndicator()),
              error: (Object error, StackTrace stackTrace) {
                return Center(
                  child: Text(
                    'Unable to load sync state. $error',
                    style: Theme.of(context).textTheme.bodyMedium?.copyWith(
                      color: AppTheme.textSecondary,
                    ),
                  ),
                );
              },
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildBody(BuildContext context, SyncState state) {
    return ListView(
      children: <Widget>[
        FrostedCard(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Wrap(
                spacing: 10,
                runSpacing: 10,
                children: <Widget>[
                  FilledButton.icon(
                    onPressed: _busy ? null : _syncNow,
                    icon: const Icon(Icons.sync_rounded),
                    label: const Text('Sync Now'),
                  ),
                  OutlinedButton.icon(
                    onPressed: _busy ? null : _pushPending,
                    icon: const Icon(Icons.upload_rounded),
                    label: const Text('Push Pending'),
                  ),
                  OutlinedButton.icon(
                    onPressed: _busy ? null : _pullChanges,
                    icon: const Icon(Icons.download_rounded),
                    label: const Text('Pull Changes'),
                  ),
                  TextButton.icon(
                    onPressed: _busy ? null : _clearQueue,
                    icon: const Icon(Icons.clear_all_rounded),
                    label: const Text('Clear Queue'),
                  ),
                ],
              ),
              const SizedBox(height: 16),
              Text(
                _status,
                style: Theme.of(
                  context,
                ).textTheme.bodyLarge?.copyWith(color: AppTheme.textSecondary),
              ),
            ],
          ),
        ),
        const SizedBox(height: 16),
        FrostedCard(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Text(
                'Queue Status',
                style: Theme.of(context).textTheme.titleMedium,
              ),
              const SizedBox(height: 10),
              _infoRow('Pending changes', '${state.pendingChanges.length}'),
              _infoRow('Cursor', state.cursor ?? 'not set'),
              _infoRow('Last sync', _formatDateTime(state.lastSyncAt)),
              _infoRow('Last attempt', _formatDateTime(state.lastAttemptAt)),
              _infoRow('Last rejected count', '${state.lastRejected.length}'),
              _infoRow('Last error', state.lastError ?? 'none'),
            ],
          ),
        ),
        const SizedBox(height: 16),
        FrostedCard(
          child: Text(
            'Sync policy\n• Core usage never blocks on backend\n• Local changes queue first and remain safe offline\n• Pull applies backend envelopes into local state',
            style: Theme.of(context).textTheme.bodyLarge,
          ),
        ),
      ],
    );
  }

  Widget _infoRow(String label, String value) {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 2),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          SizedBox(width: 150, child: Text(label)),
          Expanded(
            child: Text(
              value,
              style: Theme.of(
                context,
              ).textTheme.bodyMedium?.copyWith(color: AppTheme.textSecondary),
            ),
          ),
        ],
      ),
    );
  }

  String _formatDateTime(DateTime? value) {
    if (value == null) {
      return 'never';
    }

    final DateTime local = value.toLocal();
    final String month = local.month.toString().padLeft(2, '0');
    final String day = local.day.toString().padLeft(2, '0');
    final String hour = local.hour.toString().padLeft(2, '0');
    final String minute = local.minute.toString().padLeft(2, '0');
    return '${local.year}-$month-$day $hour:$minute';
  }

  Future<void> _syncNow() async {
    await _run((SyncCoordinator coordinator) => coordinator.syncNow());
  }

  Future<void> _pushPending() async {
    await _run((SyncCoordinator coordinator) => coordinator.pushPending());
  }

  Future<void> _pullChanges() async {
    await _run((SyncCoordinator coordinator) => coordinator.pullRemote());
  }

  Future<void> _clearQueue() async {
    setState(() {
      _busy = true;
    });

    try {
      await ref.read(syncQueueRepositoryProvider.notifier).clearQueue();
      setState(() {
        _status = 'Cleared pending sync queue.';
      });
    } finally {
      if (mounted) {
        setState(() {
          _busy = false;
        });
      }
    }
  }

  Future<void> _run(
    Future<SyncRunResult> Function(SyncCoordinator coordinator) action,
  ) async {
    setState(() {
      _busy = true;
      _status = 'Running sync operation...';
    });

    try {
      final SyncRunResult result = await action(
        ref.read(syncCoordinatorProvider),
      );
      setState(() {
        _status = result.message;
      });
    } catch (error) {
      setState(() {
        _status = 'Sync operation failed unexpectedly. ($error)';
      });
    } finally {
      if (mounted) {
        setState(() {
          _busy = false;
        });
      }
    }
  }
}