import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:go_router/go_router.dart';
import 'package:kasy_kit/components/components.dart';
import 'package:kasy_kit/core/theme/theme.dart';
import 'package:kasy_kit/core/widgets/kasy_scroll_behavior.dart';
import 'package:kasy_kit/core/widgets/responsive_layout.dart';
import 'package:kasy_kit/features/feedbacks/providers/feedback_page_notifier.dart';
import 'package:kasy_kit/features/feedbacks/ui/component/add_feature_form.dart';
import 'package:kasy_kit/features/feedbacks/ui/widgets/feature_card.dart';
import 'package:kasy_kit/i18n/translations.g.dart';

class FeedbackPage extends ConsumerWidget {
  const FeedbackPage({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final state = ref.watch(feedbackPageProvider);
    final translations = Translations.of(context).feature_requests;

    return LargeLayoutContainer(
      child: ScrollConfiguration(
        behavior: const KasyKitScrollBehavior(),
        child: KasyOverlayScaffold(
          title: translations.title,
          appBarStyle: KasyAppBarStyle.subpageActions,
          onBack: () =>
              context.canPop() ? context.pop() : context.go('/'),
          trailing: _AddChipButton(
            label: translations.add_feature.chip_label,
            onPressed: () async {
              final success = await showAddFeatureSheet(context);
              if (success == true && context.mounted) {
                showSuccessToast(
                  context: context,
                  title: translations.add_feature.toast_success.title,
                  text: translations.add_feature.toast_success.description,
                );
              }
            },
          ),
          contentPadding: EdgeInsets.fromLTRB(
            0,
            KasySpacing.belowChromeContentGap,
            0,
            MediaQuery.paddingOf(context).bottom +
                KasySpacing.pageVerticalGutter,
          ),
          slivers: [
            state.map(
              data: (data) {
                if (data.value.featureRequests.isEmpty) {
                  return SliverToBoxAdapter(
                    child: Padding(
                      padding: const EdgeInsets.fromLTRB(
                        KasySpacing.pageHorizontalGutter,
                        KasySpacing.xl,
                        KasySpacing.pageHorizontalGutter,
                        KasySpacing.md,
                      ),
                      child: Text(
                        translations.no_requests,
                        textAlign: TextAlign.center,
                        style: context.textTheme.bodyMedium?.copyWith(
                          color: context.colors.muted,
                        ),
                      ),
                    ),
                  );
                }
                return SliverList.separated(
                  itemBuilder: (context, index) => Padding(
                    padding: const EdgeInsets.symmetric(
                      horizontal: KasySpacing.pageHorizontalGutter,
                    ),
                    child: FeatureCard(
                      title:
                          data.value.featureRequests[index].title,
                      description: data
                          .value.featureRequests[index].description,
                      votes:
                          data.value.featureRequests[index].votes,
                      onVote: () {
                        ref
                            .read(feedbackPageProvider.notifier)
                            .vote(
                              data.value.featureRequests[index],
                            );
                      },
                      voted: data.value.hasVoted(
                        data.value.featureRequests[index],
                      ),
                    ),
                  ),
                  separatorBuilder: (context, index) =>
                      const SizedBox(height: KasySpacing.smd),
                  itemCount: data.value.featureRequests.length,
                );
              },
              error: (error) => SliverFillRemaining(
                child: Center(child: Text(error.error.toString())),
              ),
              loading: (data) {
                if (!data.hasValue) {
                  return SliverFillRemaining(
                    child: Center(
                      child: CircularProgressIndicator(
                        color: context.colors.primary,
                      ),
                    ),
                  );
                }
                return SliverList.separated(
                  itemBuilder: (context, index) => Padding(
                    padding: const EdgeInsets.symmetric(
                      horizontal: KasySpacing.pageHorizontalGutter,
                    ),
                    child: FeatureCard(
                      title: data
                          .value!.featureRequests[index].title,
                      description: data
                          .value!.featureRequests[index].description,
                      votes: data
                          .value!.featureRequests[index].votes,
                      onVote: () {},
                      disabled: true,
                      voted: data.value!.hasVoted(
                        data.value!.featureRequests[index],
                      ),
                    ),
                  ),
                  separatorBuilder: (context, index) =>
                      const SizedBox(height: KasySpacing.smd),
                  itemCount: data.value!.featureRequests.length,
                );
              },
            ),
            const SliverToBoxAdapter(
              child: SizedBox(height: KasySpacing.xxxl),
            ),
          ],
        ),
      ),
    );
  }
}

class _AddChipButton extends StatelessWidget {
  final String label;
  final VoidCallback onPressed;

  const _AddChipButton({required this.label, required this.onPressed});

  @override
  Widget build(BuildContext context) {
    return KasyAppBarChromeTap(
      onPressed: onPressed,
      child: Container(
        padding: const EdgeInsets.symmetric(
          horizontal: KasySpacing.md,
          vertical: KasySpacing.sm,
        ),
        decoration: BoxDecoration(
          color: context.colors.primary.withValues(alpha: 0.1),
          borderRadius: KasyRadius.mdBorderRadius,
        ),
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            Icon(KasyIcons.add, size: 14, color: context.colors.primary),
            const SizedBox(width: KasySpacing.xs),
            Text(
              label,
              style: context.textTheme.labelMedium?.copyWith(
                color: context.colors.primary,
                fontWeight: FontWeight.w600,
              ),
            ),
          ],
        ),
      ),
    );
  }
}
