import 'package:flutter/material.dart';
import 'package:glowwheels/helpers/shopid_helper.dart';
import 'package:glowwheels/provider/shop_profile_provider.dart';
import 'package:glowwheels/provider/shop_provider.dart';
import 'package:glowwheels/screens/login_screen.dart';
import 'package:provider/provider.dart';

import 'package:glowwheels/widgets/profile_header.dart';
import 'package:glowwheels/screens/profile_details_screen.dart';
import 'package:glowwheels/screens/privacy_policy_screen.dart';
import 'package:glowwheels/screens/terms_condition_screen.dart';

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

  @override
  State<AccountScreen> createState() => _AccountScreenState();
}

class _AccountScreenState extends State<AccountScreen> {
  bool _isInit = true;

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    if (_isInit) {
      // Fetch the shop profile once when screen loads
      final shopId=getShopId(context);
      Provider.of<ShopProfileProvider>(context, listen: false).fetchShopProfile(shopId!);
      _isInit = false;
    }
  }

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

    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        centerTitle: true,
        elevation: 0,
        backgroundColor: Colors.white,
        title: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: const [
            ImageIcon(AssetImage("assets/icon/account_icon.png")),
            SizedBox(width: 8),
            Text(
              "Account",
              style: TextStyle(color: Colors.black),
            ),
          ],
        ),
      ),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: [
            // Profile Info (shows shimmer skeleton if loading)
            ProfileHeader(shopProfile: shopProfile),
            const SizedBox(height: 24),

            // Section Title
            Align(
              alignment: Alignment.centerLeft,
              child: Text(
                "Options",
                style: const TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
              ),
            ),
            const SizedBox(height: 12),

            // Option Cards
            OptionTile(
              icon: "assets/icon/account_icon.png",
              title: "Profile Details",
              onTap: () {
                Navigator.of(context).push(
                  MaterialPageRoute(builder: (_) =>  ServiceCenterDetailsScreen()),
                );
              },
            ),
            OptionTile(
              icon: "assets/icon/terms_icon.png",
              title: "Terms and Conditions",
              onTap: () {
                Navigator.of(context).push(
                  MaterialPageRoute(builder: (_) =>  TermsOfServiceScreen()),
                );
              },
            ),
            OptionTile(
              icon: "assets/icon/privacy_icon.png",
              title: "Privacy Policy",
              onTap: () {
                Navigator.of(context).push(
                  MaterialPageRoute(builder: (_) =>  PrivacyPolicyScreen()),
                );
              },
            ),
            OptionTile(
              icon: "assets/icon/logout_icon.png",
              title: "Log Out",
              onTap: () async{
                await Provider.of<ShopProvider>(context, listen: false).logout();

                Navigator.of(context, rootNavigator: true).pushAndRemoveUntil(
                  MaterialPageRoute(builder: (context) =>  LoginScreen()),
                      (route) => false,
                );
              },
              isDestructive: true,
            ),
          ],
        ),
      ),
    );
  }
}

class OptionTile extends StatelessWidget {
  final String icon;
  final String title;
  final VoidCallback onTap;
  final bool isDestructive;

  const OptionTile({
    super.key,
    required this.icon,
    required this.title,
    required this.onTap,
    this.isDestructive = false,
  });

  @override
  Widget build(BuildContext context) {
    return Card(
      color: Colors.white,
      elevation: 0.5,
      margin: const EdgeInsets.symmetric(vertical: 6),
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
      child: ListTile(
        leading: ImageIcon(AssetImage(icon), color: const Color.fromRGBO(25, 25, 112, 1)),
        title: Text(
          title,
          style: const TextStyle(
            fontSize: 14,
            color: Color.fromRGBO(41, 45, 50, 1),
            fontWeight: FontWeight.w500,
          ),
        ),
        trailing: const Icon(Icons.arrow_forward_ios, size: 16),
        onTap: onTap,
      ),
    );
  }
}