winded/lib/features/media/presentation/widgets/highlight_card.dart

import 'package:flutter/material.dart';
import 'package:intl/intl.dart';

import '../../domain/highlight.dart';

/// Card for one highlight reel. Renders:
///   * a 160px thumbnail area (placeholder until [Highlight.thumbnailUrl] is
///     populated — Phase 2 will swap to `Image.network`)
///   * the title, description (clipped to 2 lines), and published date
///   * a "Watch on YouTube" outlined button that surfaces a snackbar
///     placeholder; real launching ships with the `url_launcher` package.
class HighlightCard extends StatelessWidget {
  const HighlightCard({super.key, required this.highlight});

  final Highlight highlight;

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    final scheme = theme.colorScheme;
    final formattedDate = DateFormat.yMMMMd().format(highlight.publishedAt);

    return Card(
      clipBehavior: Clip.antiAlias,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          _Thumbnail(thumbnailUrl: highlight.thumbnailUrl),
          Padding(
            padding: const EdgeInsets.fromLTRB(16, 12, 16, 16),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                Text(
                  highlight.title,
                  style: theme.textTheme.titleMedium?.copyWith(
                    fontWeight: FontWeight.w700,
                  ),
                ),
                const SizedBox(height: 6),
                Text(
                  highlight.description,
                  maxLines: 2,
                  overflow: TextOverflow.ellipsis,
                  style: theme.textTheme.bodyMedium?.copyWith(
                    color: scheme.onSurfaceVariant,
                  ),
                ),
                const SizedBox(height: 10),
                Row(
                  children: <Widget>[
                    Icon(
                      Icons.calendar_today_outlined,
                      size: 14,
                      color: scheme.onSurfaceVariant,
                    ),
                    const SizedBox(width: 6),
                    Text(
                      formattedDate,
                      style: theme.textTheme.bodySmall?.copyWith(
                        color: scheme.onSurfaceVariant,
                      ),
                    ),
                  ],
                ),
                const SizedBox(height: 12),
                Align(
                  alignment: Alignment.centerLeft,
                  child: OutlinedButton.icon(
                    onPressed: () => _handleWatch(context),
                    icon: const Icon(Icons.play_arrow, size: 18),
                    label: const Text('Watch on YouTube'),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  void _handleWatch(BuildContext context) {
    ScaffoldMessenger.of(context)
      ..hideCurrentSnackBar()
      ..showSnackBar(
        const SnackBar(
          content: Text('Opening YouTube...'),
          duration: Duration(seconds: 2),
        ),
      );
  }
}

class _Thumbnail extends StatelessWidget {
  const _Thumbnail({required this.thumbnailUrl});

  final String? thumbnailUrl;

  @override
  Widget build(BuildContext context) {
    final scheme = Theme.of(context).colorScheme;

    if (thumbnailUrl == null) {
      return Container(
        height: 160,
        width: double.infinity,
        color: scheme.surfaceContainerHighest,
        alignment: Alignment.center,
        child: Icon(
          Icons.play_circle_outline,
          size: 48,
          color: scheme.primary,
        ),
      );
    }

    return SizedBox(
      height: 160,
      width: double.infinity,
      child: Image.network(
        thumbnailUrl!,
        fit: BoxFit.cover,
        errorBuilder: (context, error, stackTrace) => Container(
          color: scheme.surfaceContainerHighest,
          alignment: Alignment.center,
          child: Icon(
            Icons.broken_image_outlined,
            size: 36,
            color: scheme.onSurfaceVariant,
          ),
        ),
        loadingBuilder: (context, child, progress) {
          if (progress == null) return child;
          return Container(
            color: scheme.surfaceContainerHighest,
            alignment: Alignment.center,
            child: const SizedBox(
              width: 24,
              height: 24,
              child: CircularProgressIndicator(strokeWidth: 2),
            ),
          );
        },
      ),
    );
  }
}