marco.pms.mobileapp/lib/view/dashboard/dashboard_screen.dart

import 'package:flutter/material.dart';
import 'package:flutter_lucide/flutter_lucide.dart';
import 'package:get/get.dart';
import 'package:marco/helpers/utils/mixins/ui_mixin.dart';
import 'package:marco/helpers/utils/my_shadow.dart';
import 'package:marco/helpers/widgets/my_card.dart';
import 'package:marco/helpers/widgets/my_container.dart';
import 'package:marco/helpers/widgets/my_spacing.dart';
import 'package:marco/helpers/widgets/my_text.dart';
import 'package:marco/view/layouts/layout.dart';
import 'package:marco/helpers/services/storage/local_storage.dart';
import 'package:marco/helpers/widgets/my_button.dart';

class DashboardScreen extends StatefulWidget {
  const DashboardScreen({super.key});
  static const String dashboardRoute = "/dashboard";
  static const String employeesRoute = "/dashboard/employees";
  static const String projectsRoute = "/dashboard";
  static const String attendanceRoute = "/dashboard/attendance";
  static const String tasksRoute = "/dashboard/daily-task";
  static const String dailyTasksRoute = "/dashboard/daily-task-planing";
  static const String dailyTasksProgressRoute =
      "/dashboard/daily-task-progress";

  @override
  State<DashboardScreen> createState() => _DashboardScreenState();
}

class _DashboardScreenState extends State<DashboardScreen> with UIMixin {
  bool hasMpin = true;

  @override
  void initState() {
    super.initState();
    _checkMpinStatus();
  }

  Future<void> _checkMpinStatus() async {
    final bool mpinStatus = await LocalStorage.getIsMpin();
    setState(() {
      hasMpin = mpinStatus;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Layout(
      child: SingleChildScrollView(
        padding: const EdgeInsets.all(12),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            MyText.titleMedium("Dashboard", fontWeight: 600),
            MySpacing.height(12),
            _buildDashboardStats(),
            MySpacing.height(350),
            if (!hasMpin) ...[
              MyCard(
                borderRadiusAll: 12,
                paddingAll: 16,
                shadow: MyShadow(elevation: 2),
                color: Colors.red.withOpacity(0.05),
                child: Row(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Icon(Icons.warning_amber_rounded,
                        color: Colors.redAccent, size: 28),
                    MySpacing.width(12),
                    Expanded(
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          MyText.bodyMedium(
                            "MPIN Not Generated",
                            color: Colors.redAccent,
                            fontWeight: 700,
                          ),
                          MySpacing.height(4),
                          MyText.bodySmall(
                            "To secure your account, please generate your MPIN now.",
                            color: contentTheme.onBackground.withOpacity(0.8),
                          ),
                          MySpacing.height(10),
                          Align(
                            alignment: Alignment.center,
                            child: MyButton.rounded(
                              onPressed: () {
                                Get.toNamed("/auth/mpin-auth");
                              },
                              backgroundColor: contentTheme.brandRed,
                              padding: const EdgeInsets.symmetric(
                                  horizontal: 20, vertical: 10),
                              child: Row(
                                mainAxisSize: MainAxisSize.min,
                                children: [
                                  Icon(Icons.lock_outline,
                                      size: 18, color: Colors.white),
                                  MySpacing.width(8),
                                  MyText.bodyMedium(
                                    "Generate MPIN",
                                    color: Colors.white,
                                    fontWeight: 600,
                                  ),
                                ],
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ],
        ),
      ),
    );
  }

  Widget _buildDashboardStats() {
    final stats = [
      _StatItem(LucideIcons.scan_face, "Attendance", contentTheme.success,
          DashboardScreen.attendanceRoute),
      _StatItem(LucideIcons.users, "Employees", contentTheme.warning,
          DashboardScreen.employeesRoute),
      _StatItem(LucideIcons.logs, "Daily Task Planing", contentTheme.info,
          DashboardScreen.dailyTasksRoute),
      _StatItem(LucideIcons.list_todo, "Daily Task Progress", contentTheme.info,
          DashboardScreen.dailyTasksProgressRoute),
    ];

    return LayoutBuilder(
      builder: (context, constraints) {
        double maxWidth = constraints.maxWidth;
        int crossAxisCount = (maxWidth / 100).floor().clamp(2, 4);
        double cardWidth =
            (maxWidth - (crossAxisCount - 1) * 10) / crossAxisCount;

        return Wrap(
          spacing: 10,
          runSpacing: 10,
          children:
              stats.map((stat) => _buildStatCard(stat, cardWidth)).toList(),
        );
      },
    );
  }

  Widget _buildStatCard(_StatItem statItem, double width) {
    return InkWell(
      onTap: () => Get.toNamed(statItem.route),
      borderRadius: BorderRadius.circular(10),
      child: MyCard.bordered(
        width: width,
        height: 100,
        paddingAll: 5,
        borderRadiusAll: 10,
        border: Border.all(color: Colors.grey.withOpacity(0.15)),
        shadow: MyShadow(elevation: 1.5, position: MyShadowPosition.bottom),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            _buildStatCardIcon(statItem),
            MySpacing.height(8),
            MyText.labelSmall(
              statItem.title,
              maxLines: 2,
              overflow: TextOverflow.visible,
              textAlign: TextAlign.center,
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildStatCardIcon(_StatItem statItem) {
    return MyContainer.rounded(
      paddingAll: 10,
      color: statItem.color.withOpacity(0.1),
      child: Icon(statItem.icon, size: 18, color: statItem.color),
    );
  }
}

class _StatItem {
  final IconData icon;
  final String title;
  final Color color;
  final String route;

  _StatItem(this.icon, this.title, this.color, this.route);
}