import 'package:flutter/material.dart';
import '../../models/post.dart';
import '../../theme/app_theme.dart';
import '../media/signed_media_image.dart';
import 'post_view_mode.dart';

/// Post media widget with view-mode-aware sizing.
///
/// Logic:
/// - feed: BoxFit.cover with fixed height (300)
/// - detail: Full height (unconstrained)
/// - compact: Smaller height (200)
class PostMedia extends StatelessWidget {
  final Post? post;
  final Widget? child;
  final PostViewMode mode;

  const PostMedia({
    super.key,
    this.post,
    this.child,
    this.mode = PostViewMode.feed,
  });

  /// Get image height based on view mode
  double get _imageHeight {
    switch (mode) {
      case PostViewMode.feed:
        return 300.0;
      case PostViewMode.detail:
        return 500.0; // Full height for detail view
      case PostViewMode.compact:
        return 200.0; // Smaller for profile lists
    }
  }

  @override
  Widget build(BuildContext context) {
    if (post != null && post!.imageUrl != null && post!.imageUrl!.isNotEmpty) {
      return Padding(
        padding: const EdgeInsets.only(top: AppTheme.spacingSm),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            SizedBox(
              height: _imageHeight,
              width: double.infinity,
              child: ClipRRect(
                borderRadius: BorderRadius.circular(AppTheme.radiusMd),
                child: SignedMediaImage(
                  url: post!.imageUrl!,
                  fit: mode == PostViewMode.feed ? BoxFit.cover : BoxFit.contain,
                  loadingBuilder: (context) => Container(
                    color: AppTheme.queenPink.withValues(alpha: 0.3),
                    child: const Center(child: CircularProgressIndicator()),
                  ),
                  errorBuilder: (context, error, stackTrace) => Container(
                    color: Colors.red.withValues(alpha: 0.3),
                    child: Center(
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          const Icon(Icons.broken_image,
                              size: 48, color: Colors.white),
                          const SizedBox(height: 8),
                          Text('Error: $error',
                              style: const TextStyle(
                                  color: Colors.white, fontSize: 10)),
                        ],
                      ),
                    ),
                  ),
                ),
              ),
            ),
          ],
        ),
      );
    }

    if (child == null) {
      return const SizedBox.shrink();
    }

    return Padding(
      padding: const EdgeInsets.only(top: AppTheme.spacingSm),
      child: ClipRRect(
        borderRadius: BorderRadius.circular(AppTheme.radiusMd),
        child: child,
      ),
    );
  }
}