import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:go_router/go_router.dart';
import '../../../core/localization/app_localizations.dart';
import '../../../core/theme/app_theme.dart';
import '../../../shared/widgets/common_button.dart';
import '../../device/providers/run_state_provider.dart';

/// 运行完成提示页面
class CompletePage extends ConsumerWidget {
  const CompletePage({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final l10n = AppLocalizations.of(context);
    final runState = ref.watch(runStateProvider);
    final runNotifier = ref.read(runStateProvider.notifier);

    return Scaffold(
      body: Container(
        color: AppTheme.backgroundColor,
        child: Center(
          child: Container(
            width: 600,
            padding: const EdgeInsets.all(40),
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(16),
              boxShadow: [
                BoxShadow(
                  color: Colors.black.withValues(alpha: 0.15),
                  blurRadius: 20,
                  offset: const Offset(0, 10),
                ),
              ],
            ),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                // 成功图标
                Container(
                  width: 100,
                  height: 100,
                  decoration: BoxDecoration(
                    color: AppTheme.successColor.withValues(alpha: 0.1),
                    shape: BoxShape.circle,
                  ),
                  child: Icon(
                    Icons.check_circle,
                    size: 60,
                    color: AppTheme.successColor,
                  ),
                ),

                const SizedBox(height: 24),

                // 标题
                Text(
                  l10n?.runComplete ?? '程序运行完成',
                  style: TextStyle(
                    color: AppTheme.textPrimary,
                    fontSize: 28,
                    fontWeight: FontWeight.bold,
                  ),
                ),

                const SizedBox(height: 16),

                // 提示信息
                Container(
                  padding: const EdgeInsets.symmetric(
                    horizontal: 24,
                    vertical: 12,
                  ),
                  decoration: BoxDecoration(
                    color: AppTheme.warningColor.withValues(alpha: 0.1),
                    borderRadius: BorderRadius.circular(8),
                  ),
                  child: Text(
                    l10n?.sampleDropGuide ?? '请将样本滴入检测卡',
                    style: TextStyle(
                      color: AppTheme.warningColor,
                      fontSize: 16,
                    ),
                  ),
                ),

                const SizedBox(height: 32),

                // 操作示意图
                _buildOperationGuide(),

                const SizedBox(height: 32),

                // 按钮区域
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    // 返回首页按钮
                    CommonButton(
                      text: l10n?.backToHome ?? '返回首页',
                      icon: Icons.home,
                      type: ButtonType.primary,
                      onPressed: () {
                        runNotifier.reset();
                        context.go('/');
                      },
                    ),
                    const SizedBox(width: 24),

                    // 重新运行按钮
                    CommonButton(
                      text: l10n?.runAgain ?? '重新运行',
                      icon: Icons.refresh,
                      type: ButtonType.secondary,
                      onPressed: () {
                        final program = runState.currentProgram;
                        if (program != null) {
                          runNotifier.reset();
                          runNotifier.start(program);
                          context.go('/');
                        }
                      },
                    ),
                  ],
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }

  /// 操作指引示意图
  Widget _buildOperationGuide() {
    return Container(
      padding: const EdgeInsets.all(20),
      decoration: BoxDecoration(
        color: AppTheme.backgroundColor,
        borderRadius: BorderRadius.circular(8),
        border: Border.all(color: AppTheme.idleColor.withValues(alpha: 0.2)),
      ),
      child: Column(
        children: [
          Text(
            '操作步骤',
            style: TextStyle(
              color: AppTheme.textPrimary,
              fontSize: 14,
              fontWeight: FontWeight.w500,
            ),
          ),
          const SizedBox(height: 16),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              _buildStepItem(1, '取出样本', Icons.science),
              _buildStepItem(2, '滴入检测卡', Icons.water_drop),
              _buildStepItem(3, '等待反应', Icons.timer),
              _buildStepItem(4, '查看结果', Icons.visibility),
            ],
          ),
        ],
      ),
    );
  }

  /// 步骤项
  Widget _buildStepItem(int number, String text, IconData icon) {
    return Column(
      children: [
        Container(
          width: 50,
          height: 50,
          decoration: BoxDecoration(
            color: AppTheme.primaryColor.withValues(alpha: 0.1),
            borderRadius: BorderRadius.circular(8),
          ),
          child: Icon(icon, color: AppTheme.primaryColor, size: 24),
        ),
        const SizedBox(height: 8),
        Text(
          '$number',
          style: TextStyle(
            color: AppTheme.primaryColor,
            fontSize: 12,
            fontWeight: FontWeight.bold,
          ),
        ),
        const SizedBox(height: 4),
        Text(
          text,
          style: TextStyle(
            color: AppTheme.textSecondary,
            fontSize: 11,
          ),
        ),
      ],
    );
  }
}