import 'dart:convert';
import 'dart:typed_data';
import 'package:flutter/material.dart';
import 'package:flutter_html/flutter_html.dart';
import '../theme/app_theme.dart';
import '../utils/safe_cast.dart';

/// Promo detail screen — mirrors notification detail but for promo highlights.
/// Shows the promo image (full size), title, and rich HTML body content.
class PromoDetailScreen extends StatelessWidget {
  final dynamic promo;
  const PromoDetailScreen({super.key, required this.promo});

  @override
  Widget build(BuildContext context) {
    final title = safeString(promo['name']) ?? 'Promo';
    final bodyHtml = safeString(promo['body']) ?? '';
    final base64Img = safeString(promo['image_128']);

    return Scaffold(
      appBar: AppBar(title: Text(title)),
      body: SingleChildScrollView(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // Promo image (full width)
            if (base64Img != null && base64Img.isNotEmpty)
              _buildPromoImage(base64Img),

            Padding(
              padding: const EdgeInsets.fromLTRB(20, 20, 20, 8),
              child: Text(title, style: Theme.of(context).textTheme.titleLarge),
            ),

            if (bodyHtml.isNotEmpty)
              Padding(
                padding: const EdgeInsets.symmetric(horizontal: 12),
                child: Html(
                  data: bodyHtml,
                  style: {
                    'body': Style(
                      color: AppTheme.onSurface,
                      fontFamily: 'Manrope',
                      fontSize: FontSize(15),
                      lineHeight: const LineHeight(1.6),
                    ),
                    'p': Style(margin: Margins.only(bottom: 12)),
                    'h1': Style(
                      color: AppTheme.onSurface,
                      fontSize: FontSize(22),
                      fontWeight: FontWeight.bold,
                    ),
                    'h2': Style(
                      color: AppTheme.onSurface,
                      fontSize: FontSize(18),
                      fontWeight: FontWeight.bold,
                    ),
                    'a': Style(color: AppTheme.secondary),
                  },
                ),
              )
            else
              Padding(
                padding: const EdgeInsets.all(20),
                child: Text(
                  'No content available.',
                  style: Theme.of(context).textTheme.bodyMedium,
                ),
              ),

            const SizedBox(height: 32),
          ],
        ),
      ),
    );
  }

  Widget _buildPromoImage(String base64Img) {
    try {
      final Uint8List bytes = base64Decode(base64Img);
      return Image.memory(
        bytes,
        width: double.infinity,
        height: 220,
        fit: BoxFit.cover,
      );
    } catch (_) {
      return Container(
        height: 220,
        color: AppTheme.surfaceContainer,
        child: const Center(
          child: Icon(
            Icons.local_offer_rounded,
            size: 56,
            color: AppTheme.outlineVariant,
          ),
        ),
      );
    }
  }
}