import 'package:design_system/design_system.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:functions/src/features/activity_meter/presentation/screens/activity_chart_screen.dart';
import 'package:functions/src/features/activity_meter/presentation/screens/activity_settings_screen.dart';
import 'package:functions/src/features/activity_meter/presentation/state/activity_meter_view_model.dart';
import 'package:legacy_shared/legacy_shared.dart';
import 'package:navigation/navigation.dart';
import 'package:sf_localizations/sf_localizations.dart';
import 'package:utils/utils.dart';

class ActivityMeterScreen extends ConsumerWidget {
  final NavigationContract navigationContract;

  const ActivityMeterScreen({super.key, required this.navigationContract});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final theme = ref.watch(themePortProvider);

    final viewModel = ref.read(activityMeterViewModelProvider.notifier);
    final viewState = ref.watch(activityMeterViewModelProvider);

    return PageLayout(
      title: context.translate(I18n.activityMeter),
      body: SingleChildScrollView(child: Container(
        padding: SizeUtils.getByScreen(
          small: EdgeInsets.symmetric(horizontal: 22),
          big: EdgeInsets.symmetric(horizontal: 21)
        ),
        child: Column(
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Row(
                  children: [
                    Icon(SFIcons.functions, size: SizeUtils.getByScreen(small: 28, big: 26)),
                    SizedBox(width: SizeUtils.getByScreen(small: 14, big: 12)),
                    Text('Activar/desactivar'),
                  ],
                ),
                Switch(value: viewState.enabled, onChanged: viewModel.toggleEnabled)
              ],
            ),
            SingleChildScrollView(child: Column(
              children: [
                GestureDetector(
                  onTap: (){
                    Navigator.push(
                      context,
                      MaterialPageRoute(
                        builder: (_) => ActivityChartScreen(),
                      ),
                    );
                  },
                  child: Container(
                    padding: SizeUtils.getByScreen(
                      small: EdgeInsets.symmetric(horizontal: 22, vertical: 16),
                      big: EdgeInsets.symmetric(horizontal: 21, vertical: 14)
                    ),
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.all(Radius.circular(SizeUtils.getByScreen(small: 12, big: 18))),
                      color: Color(0xFF588EA5),
                    ),
                    child: Row(
                      children: [
                        Container(
                          decoration: BoxDecoration(
                            shape: BoxShape.circle,
                            color: theme.getColorFor(ThemeCode.backgroundPrimary),
                          ),
                          height: 68,
                          width: 68,
                          padding: EdgeInsets.all(SizeUtils.getByScreen(small: 4, big: 12)),
                          child: Icon(SFIcons.barChart,
                            size: SizeUtils.getByScreen(small: 36, big: 34),
                            color: Color(0xFF588EA5),
                            weight: 30,
                          ),
                        ),
                        SizedBox(width: SizeUtils.getByScreen(small: 16, big: 15)),
                        Expanded(
                          child: Text(context.translate('Ver tus datos semanales'),
                            style: TextStyle(
                              fontSize: SizeUtils.getByScreen(small: 18, big: 19),
                              fontWeight: FontWeight.w500,
                              color: Colors.white
                            )
                          )
                        )
                      ],
                    ),
                  )
                ),
                SizedBox(height: SizeUtils.getByScreen(small: 8, big: 6)),
                AppSectionButton(
                  onPressed: (){
                    Navigator.push(
                      context,
                      MaterialPageRoute(
                        builder: (_) => ActivitySettingsScreen(),
                      ),
                    );
                  },
                  icon: SFIcons.steps,
                  iconSize: SizeUtils.getByScreen(small: 46, big: 44),
                  text: 'Movimiento',
                  amount: viewState.selectedActivity?.totalSteps ?? 0,
                  unit: 'Pasos'
                ),
                SizedBox(height: SizeUtils.getByScreen(small: 8, big: 6)),
                AppSectionButton(
                  onPressed: (){
                    Navigator.push(
                      context,
                      MaterialPageRoute(
                        builder: (_) => ActivitySettingsScreen(),
                      ),
                    );
                  },
                  icon: Icons.directions_run_rounded,
                  iconSize: SizeUtils.getByScreen(small: 46, big: 44),
                  text: 'Ejercicio',
                  amount: viewState.selectedActivity?.totalSteps ?? 0,
                  unit: 'Calorías'
                ),
                SizedBox(height: SizeUtils.getByScreen(small: 8, big: 6)),
                AppSectionButton(
                  onPressed: (){
                    Navigator.push(
                      context,
                      MaterialPageRoute(
                        builder: (_) => ActivitySettingsScreen(),
                      ),
                    );
                  },
                  icon: SFIcons.distance,
                  iconSize: SizeUtils.getByScreen(small: 46, big: 44),
                  text: 'Distancia',
                  amount: viewState.selectedActivity?.totalSteps ?? 0,
                  unit: 'Metros'
                ),
                SizedBox(height: SizeUtils.getByScreen(small: 8, big: 6)),
                AppSectionButton(
                  onPressed: (){},
                  icon: SFIcons.sleep,
                  iconSize: SizeUtils.getByScreen(small: 30, big: 28),
                  text: 'Movimiento dormido',
                  amount: viewState.selectedActivity?.totalSteps ?? 0,
                  unit: 'Veces'
                ),
              ],
            ))
          ],
        ),
      )),
      footer: IconButton(
        onPressed: () async {
          viewModel.pickDate(context);
        },
        icon: Icon(
          SFIcons.calendarCircle,
          size: SizeUtils.getByScreen(small: 66, big: 64),
          color: Color(0xFF588EA5),
        )
      ),
    );
  }
}

class AppSectionButton extends ConsumerWidget {

  final GestureTapCallback onPressed;
  final IconData icon;
  final double iconSize;
  final String text;
  final int amount;
  final String unit;

  const AppSectionButton({
    required this.onPressed,
    required this.icon,
    required this.iconSize,
    required this.text,
    required this.amount,
    required this.unit,
  });

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final theme = ref.read(themePortProvider);

    return GestureDetector(
      onTap: onPressed,
      child: Container(
        padding: SizeUtils.getByScreen(
          small: EdgeInsets.only(left: 22, top: 16, bottom: 16),
          big: EdgeInsets.only(left: 21, top: 14, bottom: 14)
        ),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.all(Radius.circular(SizeUtils.getByScreen(small: 12, big: 18))),
          color: theme.getColorFor(ThemeCode.backgroundSecondary),
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Expanded(child: Row(
              children: [
                Container(
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    color: theme.getColorFor(ThemeCode.backgroundPrimary),
                  ),
                  height: 68,
                  width: 68,
                  padding: EdgeInsets.all(SizeUtils.getByScreen(small: 8, big: 12)),
                  child: Icon(icon,
                    size: iconSize,
                    color: Color(0xFF588EA5),
                    weight: 30,
                  ),
                ),
                SizedBox(width: SizeUtils.getByScreen(small: 16, big: 15)),
                Expanded(
                  child: Text(context.translate(text),
                    style: TextStyle(
                      fontSize: SizeUtils.getByScreen(small: 18, big: 17),
                      fontWeight: FontWeight.w500
                    )
                  )
                )
              ],
            )),
            Row(
              children: [
                Column(
                  children: [
                    Text(amount.toString(),
                      style: TextStyle(
                        fontSize: SizeUtils.getByScreen(small: 28, big: 26),
                        fontWeight: FontWeight.w500
                      )
                    ),
                    Text(unit)
                  ],
                ),
                Icon(Icons.arrow_forward_ios_rounded,
                  size: SizeUtils.getByScreen(small: 48, big: 46),
                )
              ],
            )
          ],
        )
      )
    );
  }
}