import 'package:auto_route/auto_route.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';

import '../../../../../../application/auth/auth_bloc.dart';
import '../../../../../../common/theme/theme.dart';
import '../../../../../router/app_router.gr.dart';

class HomePointCard extends StatelessWidget {
  final String point;
  const HomePointCard({super.key, required this.point});

  @override
  Widget build(BuildContext context) {
    return BlocBuilder<AuthBloc, AuthState>(
      builder: (context, state) {
        return GestureDetector(
          onTap: () => state.isAuthenticated
              ? context.router.push(PoinRoute())
              : context.router.push(OnboardingRoute()),
          child: Container(
            decoration: BoxDecoration(
              color: AppColor.white,
              borderRadius: BorderRadius.circular(16),
              boxShadow: [
                BoxShadow(
                  color: AppColor.textLight.withOpacity(0.15),
                  spreadRadius: 0,
                  blurRadius: 20,
                  offset: const Offset(0, 8),
                ),
              ],
            ),
            child: Stack(
              children: [
                _buildCoinPattern(),
                Padding(
                  padding: const EdgeInsets.all(16),
                  child: Column(
                    children: [
                      Row(
                        children: [
                          !state.isAuthenticated
                              ? Expanded(
                                  child: Text(
                                    'Hi, Selamat Datang Di Enaklo',
                                    style: AppStyle.md.copyWith(
                                      color: AppColor.primary,
                                      fontWeight: FontWeight.w600,
                                    ),
                                  ),
                                )
                              : Expanded(
                                  child: Column(
                                    crossAxisAlignment:
                                        CrossAxisAlignment.start,
                                    children: [
                                      Container(
                                        padding: const EdgeInsets.symmetric(
                                          horizontal: 16,
                                          vertical: 10,
                                        ),
                                        decoration: BoxDecoration(
                                          color: AppColor.primary,
                                          borderRadius: BorderRadius.circular(
                                            25,
                                          ),
                                        ),
                                        child: Row(
                                          mainAxisSize: MainAxisSize.min,
                                          children: [
                                            Icon(
                                              Icons.stars,
                                              color: AppColor.white,
                                              size: 18,
                                            ),
                                            SizedBox(width: 8),
                                            Text(
                                              '$point Poin',
                                              style: AppStyle.md.copyWith(
                                                color: AppColor.white,
                                                fontWeight: FontWeight.w600,
                                              ),
                                            ),
                                          ],
                                        ),
                                      ),
                                      const SizedBox(height: 4),
                                      Text(
                                        'Kamu punya $point poin',
                                        style: AppStyle.sm.copyWith(
                                          color: AppColor.textSecondary,
                                          fontSize: 11,
                                        ),
                                      ),
                                    ],
                                  ),
                                ),

                          SizedBox(
                            width: 120,
                            height: 40,
                            child: Stack(
                              children: [
                                _buildCoin(
                                  right: 0,
                                  top: 0,
                                  size: 24,
                                  color: Colors.amber,
                                ),
                                _buildCoin(
                                  right: 20,
                                  top: 8,
                                  size: 20,
                                  color: Colors.orange,
                                ),
                                _buildCoin(
                                  right: 40,
                                  top: 4,
                                  size: 18,
                                  color: Colors.amber,
                                ),
                                _buildCoin(
                                  right: 60,
                                  top: 12,
                                  size: 16,
                                  color: Colors.orange,
                                ),
                                _buildCoin(
                                  right: 80,
                                  top: 8,
                                  size: 14,
                                  color: Colors.amber,
                                ),
                              ],
                            ),
                          ),
                        ],
                      ),
                      const SizedBox(height: 12),
                      Row(
                        children: [
                          Text(
                            state.isAuthenticated
                                ? 'Tukarkan poinmu dengan hadiah menarik'
                                : 'Silahkan login untuk tukarkan poinmu',
                            style: AppStyle.sm.copyWith(
                              color: AppColor.textPrimary,
                              fontSize: 13,
                              fontWeight: FontWeight.w500,
                            ),
                          ),
                          const Spacer(),
                          Icon(
                            Icons.arrow_forward_ios,
                            color: AppColor.textSecondary,
                            size: 16,
                          ),
                        ],
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        );
      },
    );
  }

  Widget _buildCoinPattern() {
    return Positioned.fill(
      child: ClipRRect(
        borderRadius: BorderRadius.circular(16),
        child: Stack(
          children: [
            Positioned(
              right: -20,
              top: -10,
              child: Container(
                width: 60,
                height: 60,
                decoration: BoxDecoration(
                  color: Colors.amber.withOpacity(0.1),
                  shape: BoxShape.circle,
                ),
              ),
            ),
            Positioned(
              right: 40,
              top: 30,
              child: Container(
                width: 20,
                height: 20,
                decoration: BoxDecoration(
                  color: Colors.orange.withOpacity(0.15),
                  shape: BoxShape.circle,
                ),
              ),
            ),
            Positioned(
              left: -15,
              bottom: -20,
              child: Container(
                width: 40,
                height: 40,
                decoration: BoxDecoration(
                  color: Colors.amber.withOpacity(0.08),
                  shape: BoxShape.circle,
                ),
              ),
            ),
            Positioned(
              left: 60,
              bottom: 10,
              child: Container(
                width: 15,
                height: 15,
                decoration: BoxDecoration(
                  color: Colors.orange.withOpacity(0.12),
                  shape: BoxShape.circle,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildCoin({
    required double right,
    required double top,
    required double size,
    required Color color,
  }) {
    return Positioned(
      right: right,
      top: top,
      child: Container(
        width: size,
        height: size,
        decoration: BoxDecoration(color: color, shape: BoxShape.circle),
        child: Center(
          child: Text(
            '\$',
            style: TextStyle(
              color: Colors.white,
              fontSize: size * 0.5,
              fontWeight: FontWeight.bold,
            ),
          ),
        ),
      ),
    );
  }
}
