import 'package:flutter/material.dart';

import '../infrastructure/media_repository.dart';
import 'widgets/highlight_card.dart';
import 'widgets/social_link_card.dart';

/// Top-level Media screen. Promotes community social presence above the fold
/// and a feed of highlight reels below. Data is read directly from
/// [MediaRepository] static getters — no Riverpod state since the content is
/// hardcoded for the MVP.
class MediaScreen extends StatelessWidget {
  const MediaScreen({super.key});

  static const double _maxContentWidth = 760;

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    final socialLinks = MediaRepository.socialLinks;
    final highlights = MediaRepository.highlights;

    return Scaffold(
      appBar: AppBar(title: const Text('Media')),
      body: SafeArea(
        child: Center(
          child: ConstrainedBox(
            constraints: const BoxConstraints(maxWidth: _maxContentWidth),
            child: SingleChildScrollView(
              padding: const EdgeInsets.fromLTRB(16, 16, 16, 32),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: <Widget>[
                  _SectionHeader(
                    title: 'Follow Us',
                    subtitle: 'Stay connected on your favorite platform',
                    textTheme: theme.textTheme,
                  ),
                  const SizedBox(height: 8),
                  ListView.separated(
                    shrinkWrap: true,
                    physics: const NeverScrollableScrollPhysics(),
                    itemCount: socialLinks.length,
                    separatorBuilder: (context, index) =>
                        const SizedBox(height: 8),
                    itemBuilder: (context, index) {
                      return SocialLinkCard(link: socialLinks[index]);
                    },
                  ),
                  const SizedBox(height: 24),
                  const Divider(),
                  const SizedBox(height: 16),
                  _SectionHeader(
                    title: 'Highlights',
                    subtitle: 'Recent reels and top moments',
                    textTheme: theme.textTheme,
                  ),
                  const SizedBox(height: 8),
                  ListView.separated(
                    shrinkWrap: true,
                    physics: const NeverScrollableScrollPhysics(),
                    itemCount: highlights.length,
                    separatorBuilder: (context, index) =>
                        const SizedBox(height: 12),
                    itemBuilder: (context, index) {
                      return HighlightCard(highlight: highlights[index]);
                    },
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

class _SectionHeader extends StatelessWidget {
  const _SectionHeader({
    required this.title,
    required this.subtitle,
    required this.textTheme,
  });

  final String title;
  final String subtitle;
  final TextTheme textTheme;

  @override
  Widget build(BuildContext context) {
    final scheme = Theme.of(context).colorScheme;
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 4, vertical: 4),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          Text(
            title,
            style: textTheme.titleMedium?.copyWith(
              fontWeight: FontWeight.w700,
            ),
          ),
          const SizedBox(height: 2),
          Text(
            subtitle,
            style: textTheme.bodySmall?.copyWith(
              color: scheme.onSurfaceVariant,
            ),
          ),
        ],
      ),
    );
  }
}