// import 'package:flutter/cupertino.dart';
// import 'package:flutter/material.dart';
// import 'package:flutter/src/widgets/framework.dart';
// import 'package:flutter_riverpod/flutter_riverpod.dart';
// import 'package:google_fonts/google_fonts.dart';
//
// import 'package:flutter_reorderable_grid_view/widgets/reorderable_builder.dart';
//
// import '../../../../data/models/bar_data.dart';
// import '../../../../models/chart_item.dart';
// import '../../../providers/chart_provider.dart';
// import '../../../themes/charts/barChart.dart';
//
// enum ReorderableType {
//   gridView,
//   gridViewCount,
//   gridViewExtent,
//   gridViewBuilder,
// }
//
// class BussinessDashboard extends ConsumerStatefulWidget {
//   const BussinessDashboard({super.key});
//
//   @override
//   ConsumerState<BussinessDashboard> createState() => _BussinessDashboardState();
// }
//
// class _BussinessDashboardState extends ConsumerState<BussinessDashboard> {
//   // final GlobalKey<SliverReorderableGridState> _gridKey = GlobalKey();
//   final GlobalKey _gridKey = GlobalKey();
//   ReorderableType reorderableType = ReorderableType.gridViewBuilder;
//
//   final ScrollController _scrollController = ScrollController();
//
//   List<String> items = ['A', 'B', 'C', 'D', 'E'];
//
//   @override
//   Widget build(BuildContext context) {
//     List<ChartItem> chartItems = ref.watch(chartLayoutProvider);
//
//     final charts = ref.watch(chartLayoutProvider);
//     final notifier = ref.read(chartLayoutProvider.notifier);
//     // void reorder(List<String> newItems) {
//     //   setState(() {
//     //     // final removed = items.removeAt(oldIndex);
//     //     items.insert(newItems);
//     //   });
//     // }
//
//     // void reorder(List<String> newItems) {
//     //   state = newItems; // or whatever logic you use
//     // }
//
//     final children = items
//         .map(
//           (e) => Container(
//             key: ValueKey(e),
//             color: Colors.blueAccent,
//             child: Center(
//               child: Text(
//                 e,
//                 style: TextStyle(color: Colors.white, fontSize: 24),
//               ),
//             ),
//           ),
//         )
//         .toList();
//
//     // Determine the current layout based on the number of items
//     // Since you only have 3 items, you will have to create a separate state
//     // to track the 1x3 (default) vs the custom 2-stacked + 1 layout
//     // after the drag action.
//
//     // For this example, we will stick to a reorderable grid/row layout.
//
//     return Container(
//       margin: EdgeInsets.all(10),
//       child: Column(
//         crossAxisAlignment: CrossAxisAlignment.start,
//         children: [
//           Container(
//             height: 400, // fixed height to allow drag detection
//             padding: EdgeInsets.all(12),
//             child: ReorderableBuilder<ChartItem>(
//               enableLongPress: true,
//               enableDraggable: true,
//               children: chartItems
//                   .map(
//                     (item) => Container(
//                       key: ValueKey(item.id),
//                       margin: EdgeInsets.all(4),
//                       color: Colors.blueAccent,
//                       alignment: Alignment.center,
//                       child: Text(
//                         item.title,
//                         style: TextStyle(color: Colors.white, fontSize: 24),
//                       ),
//                     ),
//                   )
//                   .toList(),
//               onReorder: (reorderCallback) {
//                 final newList = reorderCallback(chartItems).cast<ChartItem>();
//                 ref.read(chartLayoutProvider.notifier).state = newList;
//               },
//               builder: (children) {
//                 return GridView.count(
//                   crossAxisCount: 2,
//                   mainAxisSpacing: 8,
//                   crossAxisSpacing: 8,
//                   children: children,
//                   shrinkWrap: true,
//                   physics: NeverScrollableScrollPhysics(),
//                 );
//               },
//             ),
//           ),
//
//           // Container(
//           //   height: 400,
//           //   child: ReorderableBuilder<ChartItem>(
//           //     scrollController: _scrollController,
//           //     enableLongPress: true, // ✅ enable drag on long press
//           //     enableDraggable: true,
//           //     children: chartItems
//           //         .map(
//           //           (item) => Container(
//           //             key: ValueKey(item.id),
//           //             color: Colors.blueAccent,
//           //             child: Center(
//           //               child: Text(
//           //                 item.title, // show chart name
//           //                 style: TextStyle(color: Colors.white, fontSize: 24),
//           //               ),
//           //             ),
//           //           ),
//           //         )
//           //         .toList(),
//           //     onReorder: (reorderCallback) {
//           //       final newList = reorderCallback(chartItems).cast<ChartItem>();
//           //       ref.read(chartLayoutProvider.notifier).state = newList;
//           //     },
//           //     builder: (children) {
//           //       return GridView.count(
//           //         crossAxisCount: 2,
//           //         mainAxisSpacing: 8,
//           //         crossAxisSpacing: 8,
//           //         padding: const EdgeInsets.all(12),
//           //         children: children,
//           //       );
//           //     },
//           //   ),
//           // ),
//         ],
//       ),
//     );
//   }
// }
//
// // Placeholder for your chart widget
// class CustomBarChart extends StatelessWidget {
//   final List<BarData> dataList;
//   final List<String> labels;
//
//   const CustomBarChart({required this.dataList, required this.labels, Key? key})
//     : super(key: key);
//
//   @override
//   Widget build(BuildContext context) {
//     // Implement your chart rendering here
//     return Center(child: Text("Chart: ${dataList[0].value}"));
//   }
// }
//
// final _headerStyle2 = GoogleFonts.poppins(
//   fontSize: 12,
//   color: Colors.black,
//   fontWeight: FontWeight.w500,
// );