import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:taxglide/consts/app_style.dart';
import 'package:taxglide/consts/app_asstes.dart';
import 'package:taxglide/consts/comman_serivce.dart';
import 'package:taxglide/controller/api_contoller.dart';
import 'package:taxglide/model/serivce_list_model.dart';

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

  @override
  ConsumerState<ListServiceScreen> createState() => _ListServiceScreenState();
}

class _ListServiceScreenState extends ConsumerState<ListServiceScreen> {
  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;
    final serviceAsync = ref.watch(serviceListProvider);
    final screenWidth = size.width;

    return Scaffold(
      body: SafeArea(
        child: Container(
          height: size.height,
          width: size.width,
          decoration: const BoxDecoration(
            image: DecorationImage(
              image: AssetImage(AppAssets.backgroundimages),
              fit: BoxFit.cover,
            ),
          ),
          child: SingleChildScrollView(
            child: Padding(
              padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 20),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Text(
                    "List of Services Offered",
                    style: AppTextStyles.semiBold.copyWith(
                      fontStyle: FontStyle.normal,
                      fontSize: 18,
                      height: 1.3,
                      letterSpacing: 0.72,
                    ),
                    textAlign: TextAlign.center,
                  ),
                  const SizedBox(height: 26),

                  /// 🔹 Service List from API
                  serviceAsync.when(
                    data: (services) {
                      if (services.isEmpty) {
                        return  Padding(
                          padding: EdgeInsets.only(top: 40),
                          child: Center(
                            child: Text(
                              "No Services Available",
                              style: AppTextStyles.regular.copyWith(
                                fontSize: 16,
                                color: Colors.black54,
                              ),
                            ),
                          ),
                        );
                      }

                      return GridView.builder(
                        shrinkWrap: true,
                        physics: const NeverScrollableScrollPhysics(),
                        itemCount: services.length,
                        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                          crossAxisCount: screenWidth < 400
                              ? 3
                              : screenWidth < 700
                                  ? 3
                                  : 4,
                          mainAxisSpacing: 16,
                          crossAxisSpacing: 12,
                          childAspectRatio: 0.75,
                        ),
                        itemBuilder: (context, index) {
                          return CommonServiceItem(
                            service: ServiceListModel(
                              id: services[index].id,
                              service: services[index].service,
                              icon: services[index].icon,
                            ),
                            sourceTabIndex: 1,
                          );
                        },
                      );
                    },
                    loading: () => const Center(
                      child: Padding(
                        padding: EdgeInsets.all(20),
                        child: CircularProgressIndicator(),
                      ),
                    ),
                    error: (err, _) => Center(
                      child: Padding(
                        padding: const EdgeInsets.all(20),
                        child: Text('Error loading services: $err'),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}