import 'package:flutter/material.dart';
import 'package:kasy_kit/components/components.dart';
import 'package:kasy_kit/core/theme/theme.dart';
import 'package:kasy_kit/i18n/translations.g.dart';

/// Shows a modal bottom sheet displaying app update information
Future<void> showUpdateBottomSheet({
  required BuildContext context,
  required String version,
  bool useRootNavigator = true,
}) async {
  await showModalBottomSheet(
    context: context,
    useSafeArea: true,
    useRootNavigator: useRootNavigator,
    barrierColor: context.colors.background.withValues(alpha: 0.90),
    isScrollControlled: true,
    builder: (context) => _UpdateBottomSheet(version: version),
  );
}

class _UpdateBottomSheet extends StatelessWidget {
  final String version;

  const _UpdateBottomSheet({required this.version});

  @override
  Widget build(BuildContext context) {
    final translations = Translations.of(context).update_bottom_sheet;

    return Container(
      decoration: BoxDecoration(
        color: context.colors.surface,
        borderRadius: const BorderRadius.only(
          topLeft: Radius.circular(KasyRadius.xl),
          topRight: Radius.circular(KasyRadius.xl),
        ),
        border: Border.all(
          color: context.colors.primary.withValues(alpha: 0.2),
          strokeAlign: BorderSide.strokeAlignOutside,
          width: 2,
        ),
      ),
      child: SafeArea(
        minimum: const EdgeInsets.only(bottom: KasySpacing.md),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Flexible(
              flex: 0,
              child: Align(
                child: ClipRRect(
                  borderRadius: const BorderRadius.only(
                    topLeft: Radius.circular(KasyRadius.xl),
                    topRight: Radius.circular(KasyRadius.xl),
                  ),
                  child: Image.asset(
                    'assets/images/update.png',
                    fit: BoxFit.cover,
                  ),
                ),
              ),
            ),
            Padding(
              padding: const EdgeInsets.fromLTRB(
                KasySpacing.lg,
                KasySpacing.lg,
                KasySpacing.md,
                0,
              ),
              child: Row(
                children: [
                  Container(
                    width: 48,
                    height: 48,
                    decoration: BoxDecoration(
                      color: context.colors.primary.withValues(alpha: 0.1),
                      borderRadius: KasyRadius.mdBorderRadius,
                    ),
                    child: Icon(
                      KasyIcons.star,
                      color: context.colors.primary,
                      size: 24,
                    ),
                  ),
                  const SizedBox(width: KasySpacing.md),
                  Expanded(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          translations.title,
                          style: context.textTheme.headlineSmall?.copyWith(
                            color: context.colors.onSurface,
                            fontWeight: FontWeight.w700,
                          ),
                        ),
                        Text(
                          "Version $version",
                          style: context.textTheme.bodyMedium?.copyWith(
                            color: context.colors.muted,
                            fontWeight: FontWeight.w500,
                          ),
                        ),
                      ],
                    ),
                  ),
                  KasyButton.iconOnly(
                    icon: KasyIcons.close,
                    variant: KasyButtonVariant.ghost,
                    foregroundColor: context.colors.muted,
                    onPressed: () => Navigator.of(context).pop(),
                    semanticLabel: translations.title,
                  ),
                ],
              ),
            ),
            const SizedBox(height: KasySpacing.lg),
            Flexible(
              child: ConstrainedBox(
                constraints: BoxConstraints(
                  maxHeight: MediaQuery.of(context).size.height * 0.6,
                ),
                child: ListView.separated(
                  shrinkWrap: true,
                  padding: const EdgeInsets.symmetric(
                    horizontal: KasySpacing.lg,
                  ),
                  itemBuilder: (context, index) {
                    final highlight = translations.highlights[index];
                    return _UpdateHighlightTile(highlight: highlight);
                  },
                  separatorBuilder: (context, index) =>
                      const SizedBox(height: KasySpacing.sm),
                  itemCount: translations.highlights.length,
                ),
              ),
            ),
            const SizedBox(height: KasySpacing.xl),
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: KasySpacing.lg),
              child: SizedBox(
                width: double.infinity,
                child: KasyButton(
                label: translations.continue_button,
                expand: true,
                onPressed: () => Navigator.of(context).pop(),
              ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class _UpdateHighlightTile extends StatelessWidget {
  final String highlight;

  const _UpdateHighlightTile({required this.highlight});

  @override
  Widget build(BuildContext context) {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Container(
          width: KasySpacing.xs + 2,
          height: KasySpacing.xs + 2,
          margin: const EdgeInsets.only(top: KasySpacing.sm),
          decoration: BoxDecoration(
            color: context.colors.primary,
            shape: BoxShape.circle,
          ),
        ),
        const SizedBox(width: KasySpacing.md),
        Expanded(
          child: Text(
            highlight,
            style: context.textTheme.bodyMedium?.copyWith(
              color: context.colors.onSurface,
              fontWeight: FontWeight.w500,
              height: 1.4,
            ),
          ),
        ),
      ],
    );
  }
}
