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 '../../data/repositories/setup_repository.dart';
import '../providers/setup_providers.dart';


class SetupScreen extends ConsumerWidget {
  const SetupScreen({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return Scaffold(
      body: Container(
        width: double.infinity,
        decoration: const BoxDecoration(
          gradient: AppColors.backgroundGradient,
        ),
        child: SafeArea(
          child: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 24.0),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                const Spacer(),
                // Logo
                Hero(
                  tag: 'logo',
                  child: SvgPicture.asset(
                    'assets/logo/fastwatcher-logo.svg',
                    height: 120,
                  ),
                ),
                const SizedBox(height: 16),
                Text(
                  'FastWatcher',
                  style: Theme.of(context).textTheme.displayMedium?.copyWith(
                    letterSpacing: -1,
                  ),
                ),
                const SizedBox(height: 8),
                Text(
                  'Choose your device role to continue',
                  style: Theme.of(context).textTheme.bodyMedium,
                ),
                const Spacer(),
                // Role Selection Cards
                _RoleCard(
                  title: 'I am a Phone',
                  subtitle: 'Send links to your TV',
                  icon: Icons.phone_android_rounded,
                  color: AppColors.primary,
                  onTap: () {
                    ref.read(deviceRoleProvider.notifier).setRole(DeviceRole.phone);
                  },
                ),
                const SizedBox(height: 16),
                _RoleCard(
                  title: 'I am a TV',
                  subtitle: 'Receive and play videos',
                  icon: Icons.tv_rounded,
                  color: AppColors.secondary,
                  onTap: () {
                    ref.read(deviceRoleProvider.notifier).setRole(DeviceRole.tv);
                  },
                ),
                const SizedBox(height: 48),
              ],
            ),
          ),
        ),
      ),
    );
  }
}


class _RoleCard extends StatelessWidget {
  final String title;
  final String subtitle;
  final IconData icon;
  final Color color;
  final VoidCallback onTap;

  const _RoleCard({
    required this.title,
    required this.subtitle,
    required this.icon,
    required this.color,
    required this.onTap,
  });

  @override
  Widget build(BuildContext context) {
    return Material(
      color: Colors.transparent,
      child: InkWell(
        onTap: onTap,
        borderRadius: BorderRadius.circular(24),
        child: Container(
          padding: const EdgeInsets.all(24),
          decoration: BoxDecoration(
            color: AppColors.surface.withOpacity(0.5),
            borderRadius: BorderRadius.circular(24),
            border: Border.all(
              color: Colors.white.withOpacity(0.05),
            ),
          ),
          child: Row(
            children: [
              Container(
                padding: const EdgeInsets.all(12),
                decoration: BoxDecoration(
                  color: color.withOpacity(0.1),
                  borderRadius: BorderRadius.circular(16),
                ),
                child: Icon(
                  icon,
                  color: color,
                  size: 32,
                ),
              ),
              const SizedBox(width: 20),
              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      title,
                      style: Theme.of(context).textTheme.titleLarge,
                    ),
                    const SizedBox(height: 4),
                    Text(
                      subtitle,
                      style: Theme.of(context).textTheme.bodyMedium,
                    ),
                  ],
                ),
              ),
              Icon(
                Icons.arrow_forward_ios_rounded,
                color: Colors.white.withOpacity(0.2),
                size: 16,
              ),
            ],
          ),
        ),
      ),
    );
  }
}