import 'package:flutter/material.dart';
import 'package:glowwheels/helpers/shopid_helper.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:provider/provider.dart';
import 'package:shimmer/shimmer.dart';
import '../provider/shop_profile_provider.dart';

class ServiceCenterDetailsScreen extends StatefulWidget {
  const ServiceCenterDetailsScreen({super.key});

  @override
  State<ServiceCenterDetailsScreen> createState() => _ServiceCenterDetailsScreenState();
}

class _ServiceCenterDetailsScreenState extends State<ServiceCenterDetailsScreen> {
  bool _isInit = true;

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    if (_isInit) {
      final shopId = getShopId(context);
      Provider.of<ShopProfileProvider>(context, listen: false).fetchShopProfile(shopId!);
      _isInit = false;
    }
  }

  @override
  Widget build(BuildContext context) {
    final provider = Provider.of<ShopProfileProvider>(context);
    final shop = provider.shopProfile;

    return Scaffold(
      backgroundColor: const Color(0xFFEAF5FF),
      body: SafeArea(
        child: Container(
          decoration: const BoxDecoration(
            gradient: LinearGradient(
              colors: [Color.fromRGBO(208, 235, 255, 1), Colors.white],
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
            ),
          ),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              // AppBar with back icon and title
              Padding(
                padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 16),
                child: Row(
                  children: [
                    GestureDetector(
                      onTap: () => Navigator.pop(context),
                      child: const Icon(Icons.arrow_back_ios, color: Colors.black),
                    ),
                    const SizedBox(width: 25),
                    Expanded(
                      child: Padding(
                        padding: const EdgeInsets.only(top: 15.0),
                        child: Text(
                          'SERVICE CENTER DETAILS',
                          textAlign: TextAlign.center,
                          style: GoogleFonts.inter(
                            fontSize: 32,
                            color: Color.fromRGBO(25, 25, 112, 0.87),
                            fontWeight: FontWeight.w600,
                          ),
                        ),
                      ),
                    ),
                    const SizedBox(width: 24),
                  ],
                ),
              ),

              Expanded(
                child: provider.isLoading
                    ? _buildShimmer()
                    : shop == null
                    ? const Center(child: Text('Failed to load shop details'))
                    : SingleChildScrollView(
                  child: Center(
                    child: Container(
                      margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 10),
                      padding: const EdgeInsets.all(8),
                      decoration: BoxDecoration(
                        color: Colors.white,
                        borderRadius: BorderRadius.circular(16),
                        boxShadow: const [
                          BoxShadow(
                            color: Colors.black12,
                            blurRadius: 10,
                            offset: Offset(0, 4),
                          ),
                        ],
                      ),
                      child: Column(
                        children: [
                          ClipRRect(
                            borderRadius: BorderRadius.circular(12),
                            child: shop.images != null && shop.images!.isNotEmpty
                                ? Image.network(
                              shop.images[0]!,
                              height: 230,
                              width: double.infinity,
                              fit: BoxFit.cover,
                              errorBuilder: (context, error, stackTrace) =>
                              const Icon(Icons.broken_image, size: 100),
                              loadingBuilder: (context, child, loadingProgress) {
                                if (loadingProgress == null) return child;
                                return Container(
                                  height: 230,
                                  width: double.infinity,
                                  color: Colors.grey[300],
                                  child:
                                  const Center(child: CircularProgressIndicator()),
                                );
                              },
                            )
                                : Image.asset(
                              "assets/images/shop_image.jpg",
                              height: 230,
                              width: double.infinity,
                              fit: BoxFit.cover,
                            ),
                          ),

                          const SizedBox(height: 16),
                          Text(
                            shop.name ?? 'No Shop Name',
                            style: GoogleFonts.inter(
                              fontSize: 24,
                              color: Colors.black,
                              fontWeight: FontWeight.w600,
                            ),
                          ),
                          const SizedBox(height: 16),
                          InfoRow(
                            icon: "assets/icon/location_icon.png",
                            text: shop.address ?? 'Address not available',
                          ),
                          InfoRow(
                            icon: "assets/icon/contact_icon.png",
                            text: shop.phone ?? 'Phone not available',
                          ),
                          InfoRow(
                            icon: "assets/icon/Message_icon.png",
                            text: shop.email ?? 'Email not available',
                          ),
                        ],
                      ),
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildShimmer() {
    final baseColor = Colors.grey.shade300;
    final highlightColor = Colors.grey.shade100;

    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 10),
      child: Shimmer.fromColors(
        baseColor: baseColor,
        highlightColor: highlightColor,
        child: Container(
          padding: const EdgeInsets.all(8),
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(16),
          ),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              // Image placeholder (same size & rounded corners)
              Container(
                height: 230,
                decoration: BoxDecoration(
                  color: baseColor,
                  borderRadius: BorderRadius.circular(12),
                ),
              ),
              const SizedBox(height: 16),

              // Shop name placeholder (matching width and height)
              Container(
                height: 30,
                width: 220,
                color: baseColor,
                margin: const EdgeInsets.only(left: 8),
              ),
              const SizedBox(height: 16),

              // Location info row shimmer
              _shimmerInfoRow(width: 200, baseColor: baseColor),

              // Phone info row shimmer
              _shimmerInfoRow(width: 140, baseColor: baseColor),

              // Email info row shimmer
              _shimmerInfoRow(width: 180, baseColor: baseColor),
            ],
          ),
        ),
      ),
    );
  }

  Widget _shimmerInfoRow({required double width, required Color baseColor}) {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 8.0, horizontal: 15),
      child: Row(
        children: [
          Container(
            width: 24,
            height: 24,
            decoration: BoxDecoration(
              color: baseColor,
              borderRadius: BorderRadius.circular(4),
            ),
          ),
          const SizedBox(width: 10),
          Container(
            height: 16,
            width: width,
            color: baseColor,
          ),
        ],
      ),
    );
  }
}

class InfoRow extends StatelessWidget {
  final String icon;
  final String text;

  const InfoRow({
    super.key,
    required this.icon,
    required this.text,
  });

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 8.0, horizontal: 15),
      child: Center(
        child: Row(
          children: [
            ImageIcon(AssetImage(icon)),
            const SizedBox(width: 10),
            Expanded(
              child: Text(
                text,
                style: GoogleFonts.inter(
                  fontSize: 14,
                  color: Colors.black,
                  fontWeight: FontWeight.w400,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}