import 'package:auto_route/auto_route.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.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(
      appBar: AppBar(
        title: state.when(
          data: (data) => TextField(
            controller: TextEditingController(text: data.plan.name)
              ..selection = TextSelection.fromPosition(
                TextPosition(offset: data.plan.name.length),
              ),
            decoration: const InputDecoration(
              border: InputBorder.none,
              hintText: 'Plan Name',
            ),
            style: Theme.of(context).textTheme.titleLarge,
            onChanged: controller.updatePlanName,
          ),
          error: (_, __) => const Text('Error'),
          loading: () => const Text('Loading...'),
        ),
        actions: [
          state.maybeWhen(
            data: (data) => IconButton(
              icon: Icon(
                Icons.save,
                color: data.isDirty ? Theme.of(context).primaryColor : null,
              ),
              onPressed: data.isDirty ? () => controller.save() : null,
            ),
            orElse: () => const SizedBox.shrink(),
          ),
        ],
      ),
      body: state.when(
        data: (data) => ListView.builder(
          padding: const EdgeInsets.all(16),
          itemCount: data.plan.sections.length + 1,
          itemBuilder: (context, index) {
            if (index == data.plan.sections.length) {
              return Center(
                child: Padding(
                  padding: const EdgeInsets.symmetric(vertical: 16),
                  child: ElevatedButton.icon(
                    onPressed: controller.addSection,
                    icon: const Icon(Icons.add),
                    label: const Text('Add Section'),
                  ),
                ),
              );
            }
            final section = data.plan.sections[index];
            return PlanSectionCard(
              section: section,
              sectionIndex: index,
              plan: data.plan,
              availableExercises: data.availableExercises,
            );
          },
        ),
        error: (e, s) => Center(child: Text('Error: $e')),
        loading: () => const Center(child: CircularProgressIndicator()),
      ),
    );
  }
}