import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:marco/helpers/widgets/custom_app_bar.dart';
import 'package:marco/helpers/widgets/my_spacing.dart';
import 'package:marco/helpers/widgets/my_text.dart';
import 'package:marco/helpers/theme/app_theme.dart';
// import 'package:marco/helpers/theme/app_notifier.dart';
// import 'package:provider/provider.dart';

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

  @override
  State<AppearancePage> createState() => _AppearancePageState();
}

class _AppearancePageState extends State<AppearancePage> {
  String selectedTheme = "Red";

  void _changeTheme(String theme) {
  setState(() => selectedTheme = theme);

  Color newColor;
  switch (theme) {
    case "Red":
      newColor = Colors.red;
      break;
    case "Green":
      newColor = Colors.green;
      break;
    case "Blue":
      newColor = Colors.blue;
      break;
    default:
      newColor = Colors.red;
  }

  // ✅ dynamically change app color
  AppTheme.updatePrimaryColor(newColor);
}


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFFF9FAFB),
      appBar: CustomAppBar(
        title: "Appearance",
        onBackPressed: () => Get.back(),
      ),
      body: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 24),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            MyText.titleMedium(
              "Change Theme",
              fontWeight: 700,
              fontSize: 18,
            ),
            MySpacing.height(8),
            MyText.bodySmall(
              "Select a color theme for your app appearance.",
              color: Colors.black54,
            ),
            MySpacing.height(20),
            _buildThemeOption("Red", Colors.red),
            _buildThemeOption("Green", Colors.green),
            _buildThemeOption("Blue", Colors.blue),
          ],
        ),
      ),
    );
  }

  Widget _buildThemeOption(String name, Color color) {
    final isSelected = selectedTheme == name;

    return GestureDetector(
      onTap: () => _changeTheme(name),
      child: Container(
        margin: const EdgeInsets.only(bottom: 14),
        decoration: BoxDecoration(
          color: isSelected ? color.withOpacity(0.08) : Colors.white,
          borderRadius: BorderRadius.circular(10),
          border: Border.all(
            color: isSelected ? color : Colors.grey.shade300,
            width: isSelected ? 1.5 : 1,
          ),
          boxShadow: [
            if (isSelected)
              BoxShadow(
                color: color.withOpacity(0.15),
                blurRadius: 6,
                offset: const Offset(0, 3),
              ),
          ],
        ),
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 16),
          child: Row(
            children: [
              CircleAvatar(
                radius: 10,
                backgroundColor: color,
              ),
              MySpacing.width(14),
              MyText.bodyMedium(
                name,
                fontWeight: 600,
                color: Colors.black87,
              ),
              const Spacer(),
              AnimatedSwitcher(
                duration: const Duration(milliseconds: 250),
                transitionBuilder: (child, anim) =>
                    ScaleTransition(scale: anim, child: child),
                child: isSelected
                    ? Icon(
                        Icons.check_circle_rounded,
                        key: ValueKey(name),
                        color: color,
                        size: 22,
                      )
                    : const SizedBox.shrink(),
              ),
            ],
          ),
        ),
      ),
    );
  }
}