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';

/// 运行完成提示页面
///
/// 页面提供两种返回设备控制页的方式：
/// 1. 顶部 AppBar 的返回箭头
/// 2. 卡片底部的「完成」主按钮
///
/// 内部使用 [SingleChildScrollView] 包裹，避免在父级高度受限时按钮被裁切。
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);

    /// 完成并返回设备控制页
    void finishAndGoHome() {
      runNotifier.reset();
      context.go('/');
    }

    return Scaffold(
      backgroundColor: AppTheme.backgroundColor,
      appBar: AppBar(
        backgroundColor: AppTheme.backgroundColor,
        elevation: 0,
        leading: IconButton(
          icon: const Icon(Icons.arrow_back),
          color: AppTheme.textPrimary,
          tooltip: l10n?.complete ?? '完成',
          onPressed: finishAndGoHome,
        ),
        title: Text(
          l10n?.runComplete ?? '运行完成',
          style: TextStyle(
            color: AppTheme.textPrimary,
            fontSize: 18,
            fontWeight: FontWeight.w600,
          ),
        ),
      ),
      body: SafeArea(
        child: Center(
          child: ConstrainedBox(
            constraints: const BoxConstraints(maxWidth: 600),
            child: SingleChildScrollView(
              padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 16),
              child: Container(
                padding: const EdgeInsets.all(32),
                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: 80,
                      height: 80,
                      decoration: BoxDecoration(
                        color: AppTheme.successColor.withValues(alpha: 0.1),
                        shape: BoxShape.circle,
                      ),
                      child: Icon(
                        Icons.check_circle,
                        size: 48,
                        color: AppTheme.successColor,
                      ),
                    ),

                    const SizedBox(height: 16),

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

                    const SizedBox(height: 12),

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

                    const SizedBox(height: 20),

                    // 操作示意图
                    _buildOperationGuide(context),

                    const SizedBox(height: 24),

                    // 按钮区域：完成（主按钮）+ 重新运行（次按钮）
                    Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        // 完成按钮 - 主操作，返回设备控制页
                        CommonButton(
                          text: l10n?.complete ?? '完成',
                          icon: Icons.check_circle,
                          type: ButtonType.primary,
                          onPressed: finishAndGoHome,
                        ),
                        const SizedBox(width: 16),

                        // 重新运行按钮
                        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('/');
                            } else {
                              finishAndGoHome();
                            }
                          },
                        ),
                      ],
                    ),
                  ],
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }

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

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