import 'package:flutter/material.dart';

import '../../../../application/sync/sync_bloc.dart';
import '../../../../common/theme/theme.dart';

class SyncStateWidget extends StatelessWidget {
  final SyncStep step;
  final double progress;
  final String message;
  final Animation<double> progressAnimation;
  const SyncStateWidget({
    super.key,
    required this.step,
    required this.progress,
    required this.message,
    required this.progressAnimation,
  });

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          // Progress circle
          Stack(
            alignment: Alignment.center,
            children: [
              SizedBox(
                width: 100,
                height: 100,
                child: AnimatedBuilder(
                  animation: progressAnimation,
                  builder: (context, child) {
                    return CircularProgressIndicator(
                      value: progressAnimation.value,
                      strokeWidth: 6,
                      backgroundColor: Colors.grey.shade200,
                      valueColor: AlwaysStoppedAnimation<Color>(
                        AppColor.primary,
                      ),
                    );
                  },
                ),
              ),
              Column(
                children: [
                  Icon(_getSyncIcon(step), size: 24, color: AppColor.primary),
                  SizedBox(height: 2),
                  AnimatedBuilder(
                    animation: progressAnimation,
                    builder: (context, child) {
                      return Text(
                        '${(progressAnimation.value * 100).toInt()}%',
                        style: TextStyle(
                          fontSize: 14,
                          fontWeight: FontWeight.bold,
                          color: AppColor.primary,
                        ),
                      );
                    },
                  ),
                ],
              ),
            ],
          ),

          SizedBox(height: 20),

          // Step indicator
          _buildStepIndicator(step),

          SizedBox(height: 12),

          // Current message
          Container(
            padding: EdgeInsets.symmetric(horizontal: 16, vertical: 12),
            decoration: BoxDecoration(
              color: Colors.blue.shade50,
              borderRadius: BorderRadius.circular(8),
            ),
            child: Text(
              message,
              style: TextStyle(
                color: Colors.blue.shade700,
                fontSize: 12,
                fontWeight: FontWeight.w500,
              ),
              textAlign: TextAlign.center,
            ),
          ),

          SizedBox(height: 12),

          // Sync details
          _buildSyncDetails(step, progress),
        ],
      ),
    );
  }

  Widget _buildSyncDetails(SyncStep step, double progress) {
    return Container(
      padding: EdgeInsets.all(12),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(8),
        border: Border.all(color: Colors.grey.shade200),
      ),
      child: Column(
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text(
                'Status:',
                style: TextStyle(
                  fontSize: 12,
                  fontWeight: FontWeight.w500,
                  color: Colors.grey.shade700,
                ),
              ),
              Text(
                _getStepLabel(step),
                style: TextStyle(
                  fontSize: 12,
                  fontWeight: FontWeight.w600,
                  color: AppColor.primary,
                ),
              ),
            ],
          ),
          SizedBox(height: 6),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text(
                'Progress:',
                style: TextStyle(
                  fontSize: 12,
                  fontWeight: FontWeight.w500,
                  color: Colors.grey.shade700,
                ),
              ),
              Text(
                '${(progress * 100).toInt()}%',
                style: TextStyle(
                  fontSize: 12,
                  fontWeight: FontWeight.w600,
                  color: AppColor.primary,
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }

  Widget _buildStepIndicator(SyncStep currentStep) {
    final steps = [
      ('Kategori', SyncStep.categories, Icons.category),
      ('Produk', SyncStep.products, Icons.inventory_2),
      ('Variant', SyncStep.variants, Icons.tune),
      ('Selesai', SyncStep.completed, Icons.check_circle),
    ];

    return Column(
      children: steps.map((stepData) {
        final (label, step, icon) = stepData;
        final isActive = step == currentStep;
        final isCompleted = step.index < currentStep.index;

        return Container(
          margin: EdgeInsets.symmetric(vertical: 2),
          padding: EdgeInsets.symmetric(horizontal: 8, vertical: 4),
          decoration: BoxDecoration(
            color: isActive
                ? AppColor.primary.withOpacity(0.1)
                : isCompleted
                ? Colors.green.shade50
                : Colors.grey.shade100,
            borderRadius: BorderRadius.circular(6),
          ),
          child: Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              Icon(
                isCompleted ? Icons.check : icon,
                size: 12,
                color: isActive
                    ? AppColor.primary
                    : isCompleted
                    ? Colors.green.shade600
                    : Colors.grey.shade500,
              ),
              SizedBox(width: 4),
              Text(
                label,
                style: TextStyle(
                  fontSize: 10,
                  fontWeight: isActive ? FontWeight.w600 : FontWeight.normal,
                  color: isActive
                      ? AppColor.primary
                      : isCompleted
                      ? Colors.green.shade600
                      : Colors.grey.shade600,
                ),
              ),
            ],
          ),
        );
      }).toList(),
    );
  }

  IconData _getSyncIcon(SyncStep step) {
    switch (step) {
      case SyncStep.categories:
        return Icons.category;
      case SyncStep.products:
        return Icons.inventory_2;
      case SyncStep.variants:
        return Icons.tune;
      case SyncStep.completed:
        return Icons.check_circle;
    }
  }

  String _getStepLabel(SyncStep step) {
    switch (step) {
      case SyncStep.categories:
        return 'Mengunduh Kategori';
      case SyncStep.products:
        return 'Mengunduh Produk';
      case SyncStep.variants:
        return 'Mengunduh Variant';
      case SyncStep.completed:
        return 'Selesai';
    }
  }
}