import 'dart:convert';
import 'dart:typed_data';
import 'package:flutter/material.dart';
import '../screens/promo_detail_screen.dart';

/// Horizontal scrollable row of promo highlight cards.
/// Tapping a card opens the full detail screen with rich text content.
class PromoCardRow extends StatelessWidget {
  final List<dynamic> promos;

  const PromoCardRow({super.key, required this.promos});

  @override
  Widget build(BuildContext context) {
    if (promos.isEmpty) return const SizedBox.shrink();

    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Padding(
          padding: const EdgeInsets.fromLTRB(16, 0, 16, 12),
          child: Text(
            'Promo Highlights',
            style: Theme.of(context).textTheme.titleMedium,
          ),
        ),
        SizedBox(
          height: 180,
          child: ListView.builder(
            scrollDirection: Axis.horizontal,
            padding: const EdgeInsets.symmetric(horizontal: 16),
            itemCount: promos.length,
            itemBuilder: (context, index) {
              final promo = promos[index];
              return _PromoCard(promo: promo);
            },
          ),
        ),
      ],
    );
  }
}

class _PromoCard extends StatelessWidget {
  final dynamic promo;
  const _PromoCard({required this.promo});

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    final colorScheme = theme.colorScheme;
    final base64Img = promo['image_128'] as String?;
    final title = promo['name'] as String? ?? '';

    Widget imageWidget;
    if (base64Img != null && base64Img.isNotEmpty) {
      try {
        final Uint8List bytes = base64Decode(base64Img);
        imageWidget = Image.memory(bytes, fit: BoxFit.cover,
            width: double.infinity, height: 110);
      } catch (_) {
        imageWidget = _imagePlaceholder(colorScheme);
      }
    } else {
      imageWidget = _imagePlaceholder(colorScheme);
    }

    return GestureDetector(
      onTap: () {
        Navigator.push(
          context,
          MaterialPageRoute(builder: (_) => PromoDetailScreen(promo: promo)),
        );
      },
      child: Container(
        width: 140,
        margin: const EdgeInsets.only(right: 12, bottom: 6),
        decoration: BoxDecoration(
          color: colorScheme.surfaceContainerLowest,
          borderRadius: BorderRadius.circular(16),
          border: Border.all(
            color: colorScheme.outline.withValues(alpha: 0.3),
            width: 1,
          ),
          boxShadow: [
            BoxShadow(
              color: Colors.black.withValues(alpha: 0.03),
              blurRadius: 6,
              offset: const Offset(0, 3),
            ),
          ],
        ),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            SizedBox(
              height: 110,
              width: double.infinity,
              child: ClipRRect(
                borderRadius: const BorderRadius.vertical(top: Radius.circular(15)),
                child: imageWidget,
              ),
            ),
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: Text(
                title,
                style: theme.textTheme.labelLarge?.copyWith(
                  color: colorScheme.onSurface,
                  fontWeight: FontWeight.bold,
                  fontSize: 11,
                ),
                maxLines: 2,
                overflow: TextOverflow.ellipsis,
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _imagePlaceholder(ColorScheme colorScheme) {
    return Container(
      color: colorScheme.surfaceContainer,
      child: Center(
        child: Icon(Icons.local_offer_rounded, size: 32, color: colorScheme.outline),
      ),
    );
  }
}