import 'package:flutter/material.dart';

import '../../../l10n/app_localizations.dart';
import '../../theme/app_color_palette.dart';
import '../../theme/design_tokens.dart';

class DivinationGuideImage extends StatelessWidget {
  const DivinationGuideImage({super.key, required this.path});

  final String path;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: AppSpacing.lg),
      child: Image.asset(path, fit: BoxFit.contain),
    );
  }
}

class DivinationInstructionCard extends StatelessWidget {
  const DivinationInstructionCard({
    super.key,
    required this.text,
    required this.onTap,
  });

  final String text;
  final VoidCallback onTap;

  @override
  Widget build(BuildContext context) {
    final palette = Theme.of(context).extension<AppColorPalette>()!;
    return InkWell(
      onTap: onTap,
      borderRadius: BorderRadius.circular(AppRadius.md),
      child: Container(
        width: double.infinity,
        padding: const EdgeInsets.all(AppSpacing.md),
        decoration: BoxDecoration(
          color: palette.warningContainer,
          borderRadius: BorderRadius.circular(AppRadius.md),
        ),
        child: Row(
          children: [
            Expanded(
              child: Text(
                text,
                style: Theme.of(context).textTheme.bodyMedium?.copyWith(
                  color: palette.warning,
                  fontWeight: FontWeight.w600,
                ),
              ),
            ),
            const SizedBox(width: AppSpacing.sm),
            Text(
              '▶',
              style: Theme.of(context).textTheme.bodyLarge?.copyWith(
                color: palette.warning,
                fontWeight: FontWeight.w700,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class DivinationGuideDialog extends StatelessWidget {
  const DivinationGuideDialog({
    super.key,
    required this.title,
    required this.guideImages,
    required this.instructionText,
  });

  final String title;
  final List<String> guideImages;
  final String instructionText;

  @override
  Widget build(BuildContext context) {
    final l10n = AppLocalizations.of(context)!;
    return Dialog(
      child: SizedBox(
        width: 360,
        height: 560,
        child: Column(
          children: [
            const SizedBox(height: AppSpacing.lg),
            Text(
              title,
              style: Theme.of(context).textTheme.titleLarge?.copyWith(
                color: Theme.of(context).colorScheme.primary,
                fontWeight: FontWeight.w700,
              ),
            ),
            const SizedBox(height: AppSpacing.md),
            Expanded(
              child: PageView(
                children: guideImages
                    .map((path) => DivinationGuideImage(path: path))
                    .toList(),
              ),
            ),
            Padding(
              padding: const EdgeInsets.all(AppSpacing.lg),
              child: Text(instructionText),
            ),
            Padding(
              padding: const EdgeInsets.fromLTRB(
                AppSpacing.lg,
                0,
                AppSpacing.lg,
                AppSpacing.lg,
              ),
              child: SizedBox(
                width: double.infinity,
                child: FilledButton(
                  onPressed: () => Navigator.of(context).pop(),
                  child: Text(l10n.divinationIAcknowledge),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}