marco.pms.mobileapp/lib/view/layouts/layout.dart

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:marco/controller/layout/layout_controller.dart';
import 'package:marco/helpers/widgets/my_responsive.dart';
import 'package:marco/helpers/widgets/my_text.dart';
import 'package:marco/helpers/services/storage/local_storage.dart';
import 'package:marco/model/employee_info.dart';
import 'package:marco/helpers/services/api_endpoints.dart';
import 'package:marco/images.dart';
import 'package:marco/controller/project_controller.dart';
import 'package:marco/view/layouts/user_profile_right_bar.dart';

class Layout extends StatefulWidget {
  final Widget? child;
  final Widget? floatingActionButton;

  const Layout({super.key, this.child, this.floatingActionButton});

  @override
  State<Layout> createState() => _LayoutState();
}

class _LayoutState extends State<Layout> {
  final LayoutController controller = LayoutController();
  final EmployeeInfo? employeeInfo = LocalStorage.getEmployeeInfo();
  final bool isBetaEnvironment = ApiEndpoints.baseUrl.contains("stage");
  final projectController = Get.find<ProjectController>();

  @override
  Widget build(BuildContext context) {
    return MyResponsive(builder: (context, _, screenMT) {
      return GetBuilder(
        init: controller,
        builder: (_) {
          return (screenMT.isMobile || screenMT.isTablet)
              ? _buildScaffold(context, isMobile: true)
              : _buildScaffold(context);
        },
      );
    });
  }

  Widget _buildScaffold(BuildContext context, {bool isMobile = false}) {
    return Scaffold(
      key: controller.scaffoldKey,
      endDrawer: UserProfileBar(),
      floatingActionButton: widget.floatingActionButton,
      body: SafeArea(
        child: Stack(
          children: [
            Column(
              children: [
                _buildHeader(context, isMobile),
                Expanded(
                  child: SingleChildScrollView(
                    key: controller.scrollKey,
                    padding: EdgeInsets.symmetric(
                        horizontal: 0, vertical: isMobile ? 16 : 32),
                    child: widget.child,
                  ),
                ),
              ],
            ),
            // Overlay project list below header
            Obx(() {
              if (!projectController.isProjectSelectionExpanded.value) {
                return const SizedBox.shrink();
              }
              return Positioned(
                top: 95, // Adjust based on header card height
                left: 16,
                right: 16,
                child: Material(
                  elevation: 4,
                  borderRadius: BorderRadius.circular(12),
                  child: Container(
                    decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(12),
                    ),
                    padding: const EdgeInsets.all(10),
                    child: _buildProjectList(context, isMobile),
                  ),
                ),
              );
            }),
          ],
        ),
      ),
    );
  }

  Widget _buildHeader(BuildContext context, bool isMobile) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 6),
      child: Obx(() {
        final isExpanded = projectController.isProjectSelectionExpanded.value;
        final selectedProjectId = projectController.selectedProjectId?.value;
        final selectedProject = projectController.projects.firstWhereOrNull(
          (p) => p.id == selectedProjectId,
        );

        if (selectedProject == null && projectController.projects.isNotEmpty) {
          projectController
              .updateSelectedProject(projectController.projects.first.id);
        }

        return Card(
          elevation: 4,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(12),
          ),
          margin: EdgeInsets.zero,
          clipBehavior: Clip.antiAlias, // important for overlap inside card
          child: Stack(
            children: [
              Padding(
                padding: const EdgeInsets.all(10),
                child: Row(
                  children: [
                    ClipRRect(
                      borderRadius: BorderRadius.circular(8),
                      child: Image.asset(
                        Images.logoDark,
                        height: 50,
                        width: 50,
                        fit: BoxFit.contain,
                      ),
                    ),
                    const SizedBox(width: 12),
                    Expanded(
                      child: GestureDetector(
                        onTap: () => projectController
                            .isProjectSelectionExpanded
                            .toggle(),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Row(
                              children: [
                                Expanded(
                                  child: Row(
                                    children: [
                                      Expanded(
                                        child: MyText.bodyLarge(
                                          selectedProject?.name ??
                                              "Select Project",
                                          fontWeight: 700,
                                          maxLines: 1,
                                          overflow: TextOverflow.ellipsis,
                                        ),
                                      ),
                                      Icon(
                                        isExpanded
                                            ? Icons.arrow_drop_up_outlined
                                            : Icons.arrow_drop_down_outlined,
                                        color: Colors.black,
                                      ),
                                    ],
                                  ),
                                ),
                              ],
                            ),
                            MyText.bodyMedium(
                              "Hi, ${employeeInfo?.firstName ?? ''}",
                              color: Colors.black54,
                            ),
                          ],
                        ),
                      ),
                    ),
                    if (isBetaEnvironment)
                      Container(
                        margin: const EdgeInsets.only(left: 8),
                        padding: const EdgeInsets.symmetric(
                            horizontal: 8, vertical: 2),
                        decoration: BoxDecoration(
                          color: Colors.deepPurple,
                          borderRadius: BorderRadius.circular(6),
                        ),
                        child: MyText.bodySmall(
                          'BETA',
                          color: Colors.white,
                          fontWeight: 700,
                        ),
                      ),
                    IconButton(
                      icon: const Icon(Icons.menu),
                      onPressed: () =>
                          controller.scaffoldKey.currentState?.openEndDrawer(),
                    ),
                  ],
                ),
              ),

              /// Expanded Project List inside card
              if (isExpanded)
                Positioned(
                  top: 70, // slightly below the row
                  left: 0,
                  right: 0,
                  child: Container(
                    padding: const EdgeInsets.all(10),
                    color: Colors.white,
                    child: _buildProjectList(context, isMobile),
                  ),
                ),
            ],
          ),
        );
      }),
    );
  }

  Widget _buildProjectList(BuildContext context, bool isMobile) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        MyText.titleSmall("Switch Project", fontWeight: 600),
        const SizedBox(height: 4),
        ConstrainedBox(
          constraints: BoxConstraints(
            maxHeight:
                isMobile ? MediaQuery.of(context).size.height * 0.4 : 400,
          ),
          child: ListView.builder(
            shrinkWrap: true,
            itemCount: projectController.projects.length,
            itemBuilder: (context, index) {
              final project = projectController.projects[index];
              final selectedId = projectController.selectedProjectId?.value;
              final isSelected = project.id == selectedId;

              return RadioListTile<String>(
                value: project.id,
                groupValue: selectedId,
                onChanged: (value) {
                  projectController.updateSelectedProject(value!);
                  projectController.isProjectSelectionExpanded.value = false;
                },
                title: Text(
                  project.name,
                  style: TextStyle(
                    fontWeight:
                        isSelected ? FontWeight.bold : FontWeight.normal,
                    color: isSelected ? Colors.blueAccent : Colors.black87,
                  ),
                ),
                contentPadding: const EdgeInsets.symmetric(horizontal: 0),
                activeColor: Colors.blueAccent,
                tileColor: isSelected
                    ? Colors.blueAccent.withOpacity(0.1)
                    : Colors.transparent,
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(6),
                ),
                visualDensity: const VisualDensity(vertical: -4),
              );
            },
          ),
        ),
      ],
    );
  }
}