marco.pms.mobileapp/lib/helpers/theme/theme_editor_widget.dart

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:marco/helpers/widgets/my_text.dart';
import 'package:marco/helpers/widgets/wave_background.dart';
import 'package:marco/helpers/theme/admin_theme.dart';
import 'package:marco/helpers/theme/theme_customizer.dart';

class ThemeOption {
  final String label;
  final Color primary;
  final Color button;
  final Color brand;
  final ColorThemeType colorThemeType;

  ThemeOption(
      this.label, this.primary, this.button, this.brand, this.colorThemeType);
}

final List<ThemeOption> themeOptions = [
  ThemeOption(
      "Theme 1", Colors.red, Colors.red, Colors.red, ColorThemeType.red),
  ThemeOption(
    "Theme 2",
    const Color(0xFF49BF3C),
    const Color(0xFF49BF3C),
    const Color(0xFF49BF3C),
    ColorThemeType.green,
  ),
  ThemeOption(
    "Theme 3",
    const Color(0xFF3F51B5),
    const Color(0xFF3F51B5),
    const Color(0xFF3F51B5),
    ColorThemeType.blue,
  ),
  ThemeOption(
    "Theme 4",
    const Color(0xFF663399),
    const Color(0xFF663399),
    const Color(0xFF663399),
    ColorThemeType.purple,
  ),
];

class ThemeController extends GetxController {
  RxInt selectedIndex = 0.obs;
  RxBool showApplied = false.obs;

  void init() {
    final currentPrimary = AdminTheme.theme.contentTheme.primary;
    int index = themeOptions
        .indexWhere((opt) => opt.primary.value == currentPrimary.value);
    selectedIndex.value = index == -1 ? 0 : index;
  }

  void applyTheme(int index) async {
    selectedIndex.value = index;
    showApplied.value = true;

    ThemeCustomizer.instance.colorTheme = themeOptions[index].colorThemeType;

    ThemeCustomizer.applyThemeChange();

    await Future.delayed(const Duration(milliseconds: 600));
    showApplied.value = false;
  }
}

class ThemeEditorWidget extends StatefulWidget {
  final VoidCallback onClose;

  const ThemeEditorWidget({super.key, required this.onClose});

  @override
  _ThemeEditorWidgetState createState() => _ThemeEditorWidgetState();
}

class _ThemeEditorWidgetState extends State<ThemeEditorWidget> {
  final ThemeController themeController = Get.put(ThemeController());

  @override
  void initState() {
    super.initState();
    themeController.init();
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(12),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // Header row with title and close button
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              MyText.bodyLarge("Theme Customization", fontWeight: 600),
              IconButton(
                icon: const Icon(Icons.close),
                onPressed: widget.onClose,
                tooltip: "Back",
                iconSize: 20,
              ),
            ],
          ),
          const SizedBox(height: 12),

          // Theme cards wrapped in reactive Obx widget
          Center(
            child: Obx(
              () => Wrap(
                spacing: 12,
                runSpacing: 12,
                alignment: WrapAlignment.center,
                children: List.generate(themeOptions.length, (i) {
                  return ThemeCard(
                    themeOption: themeOptions[i],
                    isSelected: themeController.selectedIndex.value == i,
                    onTap: () => themeController.applyTheme(i),
                  );
                }),
              ),
            ),
          ),

          const SizedBox(height: 12),

          // Applied indicator reactive widget
          Obx(
            () => themeController.showApplied.value
                ? Padding(
                    padding: const EdgeInsets.only(top: 10),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Icon(
                          Icons.check_circle,
                          color:
                              themeOptions[themeController.selectedIndex.value]
                                  .brand,
                          size: 20,
                        ),
                        const SizedBox(width: 6),
                        Text(
                          "Theme Applied!",
                          style: TextStyle(
                            color: themeOptions[
                                    themeController.selectedIndex.value]
                                .brand,
                            fontWeight: FontWeight.w700,
                          ),
                        ),
                      ],
                    ),
                  )
                : const SizedBox(),
          ),

          const SizedBox(height: 16),
          const Text(
            "Preview and select a theme. You can change this anytime.",
            style: TextStyle(fontSize: 13, color: Colors.black54),
          ),
        ],
      ),
    );
  }
}

class ThemeCard extends StatelessWidget {
  final ThemeOption themeOption;
  final bool isSelected;
  final VoidCallback onTap;

  const ThemeCard({
    Key? key,
    required this.themeOption,
    required this.isSelected,
    required this.onTap,
  });

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 80,
      child: Material(
        color: Colors.white,
        borderRadius: BorderRadius.circular(12),
        elevation: isSelected ? 4 : 1,
        child: InkWell(
          borderRadius: BorderRadius.circular(12),
          onTap: onTap,
          child: AnimatedContainer(
            duration: const Duration(milliseconds: 250),
            curve: Curves.easeInOut,
            padding: const EdgeInsets.all(6),
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(12),
              border: Border.all(
                color: isSelected ? themeOption.brand : Colors.transparent,
                width: 2,
              ),
            ),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                SizedBox(
                  height: 80,
                  child: ClipRRect(
                    borderRadius: BorderRadius.circular(10),
                    child: Stack(
                      fit: StackFit.expand,
                      children: [
                        CustomPaint(
                            painter: RedWavePainter(themeOption.brand, 0.15)),
                        Center(
                          child: Column(
                            mainAxisSize: MainAxisSize.min,
                            children: [
                              Text(
                                "Hello, User!",
                                textAlign: TextAlign.center,
                                style: TextStyle(
                                  fontWeight: FontWeight.w600,
                                  color: themeOption.primary,
                                  fontSize: 12,
                                ),
                              ),
                              const SizedBox(height: 4),
                              SizedBox(
                                height: 18,
                                child: ElevatedButton(
                                  style: ElevatedButton.styleFrom(
                                    backgroundColor: themeOption.button,
                                    padding: const EdgeInsets.symmetric(
                                        horizontal: 8, vertical: 0),
                                    shape: RoundedRectangleBorder(
                                      borderRadius: BorderRadius.circular(4),
                                    ),
                                    elevation: 1,
                                    textStyle: const TextStyle(fontSize: 10),
                                  ),
                                  onPressed: () {},
                                  child: const Text("Welcome"),
                                ),
                              ),
                            ],
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
                const SizedBox(height: 6),
                Text(
                  themeOption.label,
                  style: TextStyle(
                    fontWeight: FontWeight.w600,
                    fontSize: 12,
                    color: Colors.grey[700],
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}