import 'package:auto_route/auto_route.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:trainhub_flutter/core/constants/ui_constants.dart';
import 'package:trainhub_flutter/core/theme/app_colors.dart';
import 'package:trainhub_flutter/presentation/plan_editor/plan_editor_controller.dart';
import 'package:trainhub_flutter/presentation/plan_editor/widgets/plan_section_card.dart';

@RoutePage()
class PlanEditorPage extends ConsumerWidget {
  final String planId;

  const PlanEditorPage({super.key, @PathParam('planId') required this.planId});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final state = ref.watch(planEditorControllerProvider(planId));
    final controller = ref.read(planEditorControllerProvider(planId).notifier);

    return Scaffold(
      backgroundColor: AppColors.surface,
      body: Column(
        children: [
          // --- Custom header bar ---
          Container(
            decoration: const BoxDecoration(
              color: AppColors.surfaceContainer,
              border: Border(bottom: BorderSide(color: AppColors.border)),
            ),
            padding: const EdgeInsets.symmetric(
              horizontal: UIConstants.spacing24,
              vertical: UIConstants.spacing12,
            ),
            child: Row(
              children: [
                // Back button
                Material(
                  color: AppColors.zinc800,
                  borderRadius: BorderRadius.circular(8),
                  child: InkWell(
                    onTap: () => context.router.maybePop(),
                    borderRadius: BorderRadius.circular(8),
                    child: const Padding(
                      padding: EdgeInsets.all(8),
                      child: Icon(
                        Icons.arrow_back,
                        color: AppColors.textSecondary,
                        size: 18,
                      ),
                    ),
                  ),
                ),
                const SizedBox(width: UIConstants.spacing16),

                // Plan icon badge
                Container(
                  width: 36,
                  height: 36,
                  decoration: BoxDecoration(
                    color: AppColors.accentMuted,
                    borderRadius: BorderRadius.circular(8),
                  ),
                  child: const Icon(
                    Icons.description_outlined,
                    color: AppColors.accent,
                    size: 18,
                  ),
                ),
                const SizedBox(width: UIConstants.spacing12),

                // Plan name text field
                Expanded(
                  child: state.maybeWhen(
                    data: (data) => TextField(
                      controller: TextEditingController(text: data.plan.name)
                        ..selection = TextSelection.fromPosition(
                          TextPosition(offset: data.plan.name.length),
                        ),
                      decoration: const InputDecoration(
                        border: InputBorder.none,
                        enabledBorder: InputBorder.none,
                        focusedBorder: InputBorder.none,
                        filled: false,
                        hintText: 'Untitled Plan',
                        contentPadding: EdgeInsets.zero,
                      ),
                      style: GoogleFonts.inter(
                        fontSize: 18,
                        fontWeight: FontWeight.w600,
                        color: AppColors.textPrimary,
                        letterSpacing: -0.3,
                      ),
                      onChanged: controller.updatePlanName,
                    ),
                    orElse: () => Text(
                      'Loading...',
                      style: GoogleFonts.inter(
                        fontSize: 18,
                        fontWeight: FontWeight.w600,
                        color: AppColors.textMuted,
                      ),
                    ),
                  ),
                ),

                // Unsaved changes badge + save button
                state.maybeWhen(
                  data: (data) => data.isDirty
                      ? Row(
                          children: [
                            Container(
                              padding: const EdgeInsets.symmetric(
                                horizontal: UIConstants.spacing12,
                                vertical: 4,
                              ),
                              decoration: BoxDecoration(
                                color: AppColors.warning.withValues(alpha: 0.12),
                                borderRadius: BorderRadius.circular(20),
                                border: Border.all(
                                  color: AppColors.warning.withValues(
                                    alpha: 0.3,
                                  ),
                                ),
                              ),
                              child: Text(
                                'Unsaved changes',
                                style: GoogleFonts.inter(
                                  fontSize: 12,
                                  fontWeight: FontWeight.w500,
                                  color: AppColors.warning,
                                ),
                              ),
                            ),
                            const SizedBox(width: UIConstants.spacing12),
                            FilledButton.icon(
                              onPressed: controller.save,
                              icon: const Icon(Icons.save_outlined, size: 16),
                              label: const Text('Save'),
                            ),
                          ],
                        )
                      : const SizedBox.shrink(),
                  orElse: () => const SizedBox.shrink(),
                ),
              ],
            ),
          ),

          // --- Body ---
          Expanded(
            child: state.when(
              data: (data) => ReorderableListView.builder(
                padding: const EdgeInsets.all(UIConstants.spacing24),
                onReorder: controller.reorderSection,
                footer: Center(
                  child: Padding(
                    padding: const EdgeInsets.symmetric(
                      vertical: UIConstants.spacing16,
                    ),
                    child: OutlinedButton.icon(
                      onPressed: controller.addSection,
                      icon: const Icon(Icons.add, size: 16),
                      label: const Text('Add Section'),
                      style: OutlinedButton.styleFrom(
                        foregroundColor: AppColors.textSecondary,
                        side: const BorderSide(color: AppColors.border),
                        padding: const EdgeInsets.symmetric(
                          horizontal: UIConstants.spacing24,
                          vertical: UIConstants.spacing12,
                        ),
                      ),
                    ),
                  ),
                ),
                itemCount: data.plan.sections.length,
                itemBuilder: (context, index) {
                  final section = data.plan.sections[index];
                  return PlanSectionCard(
                    key: ValueKey(section.id),
                    section: section,
                    sectionIndex: index,
                    plan: data.plan,
                    availableExercises: data.availableExercises,
                  );
                },
              ),
              error: (e, s) => Center(
                child: Text(
                  'Error: $e',
                  style: const TextStyle(color: AppColors.destructive),
                ),
              ),
              loading: () => const Center(child: CircularProgressIndicator()),
            ),
          ),
        ],
      ),
    );
  }
}