import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:flutter_svg/flutter_svg.dart';
import '../../../../core/theme/app_colors.dart';
import '../providers/receiver_providers.dart';
import 'tv_player_screen.dart';


class TVHomeScreen extends ConsumerStatefulWidget {
  const TVHomeScreen({super.key});

  @override
  ConsumerState<TVHomeScreen> createState() => _TVHomeScreenState();
}

class _TVHomeScreenState extends ConsumerState<TVHomeScreen> {
  @override
  void initState() {
    super.initState();
    // Start the server as soon as the TV home opens
    Future.microtask(() => ref.read(receiverProvider.notifier).startServer());
  }

  @override
  Widget build(BuildContext context) {
    final receiverState = ref.watch(receiverProvider);

    ref.listen(receiverProvider, (previous, next) {
      final video = next.currentVideo;
      if (video != null) {
        final url = video['url'] as String;
        final title = video['title'] as String?;
        Navigator.of(context).push(
          MaterialPageRoute(
            builder: (context) => TVPlayerScreen(url: url, title: title),
          ),
        );
      }
    });

    return Scaffold(

      body: Container(
        width: double.infinity,
        decoration: const BoxDecoration(
          gradient: AppColors.backgroundGradient,
        ),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Spacer(),
            // Glowing Logo Animation Placeholder
            TweenAnimationBuilder<double>(
              tween: Tween(begin: 0.8, end: 1.0),
              duration: const Duration(seconds: 2),
              curve: Curves.easeInOut,
              builder: (context, value, child) {
                return Transform.scale(
                  scale: value,
                  child: Opacity(
                    opacity: 0.5 + (value - 0.8) * 2.5,
                    child: child,
                  ),
                );
              },
              onEnd: () {}, // Could loop it
              child: SvgPicture.asset(
                'assets/logo/fastwatcher-logo.svg',
                height: 180,
              ),
            ),
            const SizedBox(height: 48),
            Text(
              'Waiting for connection...',
              style: Theme.of(context).textTheme.displaySmall?.copyWith(
                color: Colors.white.withOpacity(0.9),
                fontWeight: FontWeight.w300,
              ),
            ),
            const SizedBox(height: 16),
            Text(
              'Open FastWatcher on your phone to start casting',
              style: Theme.of(context).textTheme.bodyLarge?.copyWith(
                color: AppColors.textSecondary,
              ),
            ),
            const Spacer(),
            // Connection Info Footer
            Padding(
              padding: const EdgeInsets.all(48.0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  _InfoItem(
                    label: 'DEVICE NAME',
                    value: 'FastWatcher TV',
                  ),
                  if (receiverState.isRunning)
                    _InfoItem(
                      label: 'SERVER PORT',
                      value: '${receiverState.port}',
                    ),
                  _InfoItem(
                    label: 'IP ADDRESS',
                    value: receiverState.ipAddress ?? 'Detecting...',
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class _InfoItem extends StatelessWidget {
  final String label;
  final String value;

  const _InfoItem({required this.label, required this.value});

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          label,
          style: Theme.of(context).textTheme.labelSmall?.copyWith(
            color: AppColors.primary,
            letterSpacing: 2,
            fontWeight: FontWeight.bold,
          ),
        ),
        const SizedBox(height: 4),
        Text(
          value,
          style: Theme.of(context).textTheme.titleMedium?.copyWith(
            fontFamily: 'monospace',
          ),
        ),
      ],
    );
  }
}