kuaishai2/lib/features/program_detail/pages/program_detail_page.dart

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 '../providers/steps_provider.dart';
import '../widgets/step_list.dart';
import '../widgets/step_form.dart';
import '../../programs/providers/programs_provider.dart';

/// 程序详情页面
/// 左侧步骤列表 + 右侧参数表单
class ProgramDetailPage extends ConsumerStatefulWidget {
  final String programId;

  const ProgramDetailPage({super.key, required this.programId});

  @override
  ConsumerState<ProgramDetailPage> createState() => _ProgramDetailPageState();
}

class _ProgramDetailPageState extends ConsumerState<ProgramDetailPage> {
  late int _programIdInt;

  @override
  void initState() {
    super.initState();
    _programIdInt = int.tryParse(widget.programId) ?? 0;
  }

  @override
  Widget build(BuildContext context) {
    final l10n = AppLocalizations.of(context);
    final programsState = ref.watch(programsProvider);
    final program = programsState.programs.where((p) => p.id == _programIdInt).firstOrNull;
    final stepsState = ref.watch(stepsProvider(_programIdInt));

    return Scaffold(
      body: Container(
        color: AppTheme.backgroundColor,
        child: Column(
          children: [
            // 顶部导航栏
            Container(
              height: 60,
              padding: const EdgeInsets.symmetric(horizontal: 24),
              decoration: BoxDecoration(
                color: Colors.white,
                boxShadow: [
                  BoxShadow(
                    color: Colors.black.withValues(alpha: 0.1),
                    blurRadius: 4,
                    offset: const Offset(0, 2),
                  ),
                ],
              ),
              child: Row(
                children: [
                  // 返回按钮
                  IconButton(
                    icon: const Icon(Icons.arrow_back),
                    onPressed: () => context.go('/programs'),
                  ),
                  const SizedBox(width: 16),
                  // 程序名称
                  Text(
                    program?.name ?? (l10n?.detail ?? '程序详情'),
                    style: const TextStyle(
                      fontSize: 20,
                      fontWeight: FontWeight.w600,
                    ),
                  ),
                  const Spacer(),
                  // 保存按钮
                  CommonButton(
                    text: l10n?.save ?? '保存',
                    icon: Icons.save,
                    type: ButtonType.primary,
                    onPressed: () {
                      ScaffoldMessenger.of(context).showSnackBar(
                        SnackBar(
                          content: Text('已保存'),
                          backgroundColor: AppTheme.successColor,
                        ),
                      );
                    },
                  ),
                ],
              ),
            ),

            // 主内容区域
            Expanded(
              child: stepsState.isLoading
                  ? const Center(child: CircularProgressIndicator())
                  : Row(
                      children: [
                        // 左侧：步骤列表
                        SizedBox(
                          width: 400,
                          child: StepList(
                            programId: _programIdInt,
                            steps: stepsState.steps,
                            selectedStepId: stepsState.selectedStepId,
                            onStepSelected: (stepId) {
                              ref.read(stepsProvider(_programIdInt).notifier).selectStep(stepId);
                            },
                            onAddStep: () => _showAddStepDialog(context, ref),
                            onReorder: (oldIndex, newIndex) {
                              ref.read(stepsProvider(_programIdInt).notifier).reorderSteps(oldIndex, newIndex);
                            },
                            onDeleteSteps: (stepIds) {
                              ref.read(stepsProvider(_programIdInt).notifier).deleteSteps(stepIds);
                            },
                          ),
                        ),

                        // 分隔线
                        Container(
                          width: 1,
                          color: AppTheme.idleColor.withValues(alpha: 0.3),
                        ),

                        // 右侧：步骤参数表单
                        Expanded(
                          child: stepsState.selectedStep != null
                              ? StepForm(
                                  programId: _programIdInt,
                                  step: stepsState.selectedStep!,
                                  onSave: (step) async {
                                    final success = await ref
                                        .read(stepsProvider(_programIdInt).notifier)
                                        .updateStep(step);
                                    if (success) {
                                      ScaffoldMessenger.of(context).showSnackBar(
                                        SnackBar(
                                          content: Text('步骤已更新'),
                                          backgroundColor: AppTheme.successColor,
                                        ),
                                      );
                                    }
                                  },
                                )
                              : Center(
                                  child: Column(
                                    mainAxisAlignment: MainAxisAlignment.center,
                                    children: [
                                      Icon(
                                        Icons.edit_note,
                                        size: 64,
                                        color: AppTheme.idleColor,
                                      ),
                                      const SizedBox(height: 16),
                                      Text(
                                        '请选择或添加步骤',
                                        style: TextStyle(
                                          color: AppTheme.textSecondary,
                                          fontSize: 16,
                                        ),
                                      ),
                                    ],
                                  ),
                                ),
                        ),
                      ],
                    ),
            ),
          ],
        ),
      ),
    );
  }

  /// 显示添加步骤对话框
  void _showAddStepDialog(BuildContext context, WidgetRef ref) {
    showDialog(
      context: context,
      builder: (context) => Dialog(
        child: Container(
          width: 600,
          padding: const EdgeInsets.all(24),
          child: StepForm(
            programId: _programIdInt,
            isNew: true,
            onSave: (step) async {
              final success = await ref
                  .read(stepsProvider(_programIdInt).notifier)
                  .addStep(step);
              if (success) {
                Navigator.of(context).pop();
              }
            },
          ),
        ),
      ),
    );
  }
}