import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:intl/intl.dart';
import 'package:syncfusion_flutter_charts/charts.dart';
import 'package:on_field_work/model/dashboard/project_progress_model.dart';
import 'package:on_field_work/controller/dashboard/dashboard_controller.dart';
import 'package:on_field_work/helpers/widgets/my_text.dart';
import 'package:on_field_work/helpers/utils/utils.dart';

class ProjectProgressChart extends StatelessWidget {
  final List<ChartTaskData> data;
  final DashboardController controller = Get.find<DashboardController>();

  ProjectProgressChart({super.key, required this.data});

  // ================= Flat Colors =================
  static const List<Color> _flatColors = [
    Color(0xFFE57373),
    Color(0xFF64B5F6),
    Color(0xFF81C784),
    Color(0xFFFFB74D),
    Color(0xFFBA68C8),
    Color(0xFFFF8A65),
    Color(0xFF4DB6AC),
    Color(0xFFA1887F),
    Color(0xFFDCE775),
    Color(0xFF9575CD),
    Color(0xFF7986CB),
    Color(0xFFAED581),
    Color(0xFFFF7043),
    Color(0xFF4FC3F7),
    Color(0xFFFFD54F),
    Color(0xFF90A4AE),
    Color(0xFFE573BB),
    Color(0xFF81D4FA),
    Color(0xFFBCAAA4),
    Color(0xFFA5D6A7),
    Color(0xFFCE93D8),
    Color(0xFFFF8A65),
    Color(0xFF80CBC4),
    Color(0xFFFFF176),
    Color(0xFF90CAF9),
    Color(0xFFE0E0E0),
    Color(0xFFF48FB1),
    Color(0xFFA1887F),
    Color(0xFFB0BEC5),
    Color(0xFF81C784),
    Color(0xFFFFB74D),
    Color(0xFF64B5F6),
  ];

  Color _getTaskColor(String taskName) {
    final index = taskName.hashCode % _flatColors.length;
    return _flatColors[index];
  }

  @override
  Widget build(BuildContext context) {
    final screenWidth = MediaQuery.of(context).size.width;

    return Obx(() {
      final isChartView = controller.projectIsChartView.value;
      final selectedRange = controller.projectSelectedRange.value;

      return Container(
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(5),
          boxShadow: [
            BoxShadow(
              color: Colors.grey.withOpacity(0.04),
              blurRadius: 6,
              spreadRadius: 1,
              offset: const Offset(0, 2),
            ),
          ],
        ),
        padding: EdgeInsets.symmetric(
          vertical: 16,
          horizontal: screenWidth < 600 ? 8 : 24,
        ),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            _buildHeader(selectedRange, isChartView, screenWidth),
            const SizedBox(height: 14),
            Expanded(
              child: LayoutBuilder(
                builder: (context, constraints) => AnimatedSwitcher(
                  duration: const Duration(milliseconds: 300),
                  child: data.isEmpty
                      ? _buildNoDataMessage()
                      : isChartView
                          ? _buildChart(constraints.maxHeight)
                          : _buildTable(constraints.maxHeight, screenWidth),
                ),
              ),
            ),
          ],
        ),
      );
    });
  }

  // ================= HEADER =================
  Widget _buildHeader(
      String selectedRange, bool isChartView, double screenWidth) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Row(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  MyText.bodyMedium('Project Progress', fontWeight: 700),
                  MyText.bodySmall('Planned vs Completed',
                      color: Colors.grey.shade700),
                ],
              ),
            ),
            ToggleButtons(
              borderRadius: BorderRadius.circular(5),
              borderColor: Colors.grey,
              fillColor: Colors.blueAccent.withOpacity(0.15),
              selectedBorderColor: Colors.blueAccent,
              selectedColor: Colors.blueAccent,
              color: Colors.grey,
              constraints: BoxConstraints(
                minHeight: 30,
                minWidth: screenWidth < 400 ? 28 : 36,
              ),
              isSelected: [isChartView, !isChartView],
              onPressed: (index) {
                controller.projectIsChartView.value = index == 0;
              },
              children: const [
                Icon(Icons.bar_chart_rounded, size: 15),
                Icon(Icons.table_chart, size: 15),
              ],
            ),
          ],
        ),
        const SizedBox(height: 6),
        Row(
          children: [
            _buildRangeButton("7D", selectedRange),
            _buildRangeButton("15D", selectedRange),
            _buildRangeButton("30D", selectedRange),
            _buildRangeButton("3M", selectedRange),
            _buildRangeButton("6M", selectedRange),
          ],
        ),
      ],
    );
  }

  Widget _buildRangeButton(String label, String selectedRange) {
    return Padding(
      padding: const EdgeInsets.only(right: 4.0),
      child: ChoiceChip(
        label: Text(label, style: const TextStyle(fontSize: 12)),
        padding: const EdgeInsets.symmetric(horizontal: 5, vertical: 0),
        materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
        visualDensity: VisualDensity.compact,
        selected: selectedRange == label,
        onSelected: (_) => controller.updateProjectRange(label),
        selectedColor: Colors.blueAccent.withOpacity(0.15),
        backgroundColor: Colors.grey.shade200,
        labelStyle: TextStyle(
          color: selectedRange == label ? Colors.blueAccent : Colors.black87,
          fontWeight:
              selectedRange == label ? FontWeight.w600 : FontWeight.normal,
        ),
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(5),
          side: BorderSide(
            color: selectedRange == label
                ? Colors.blueAccent
                : Colors.grey.shade300,
          ),
        ),
      ),
    );
  }

  // ================= CHART =================
  Widget _buildChart(double height) {
    final nonZeroData =
        data.where((d) => d.planned != 0 || d.completed != 0).toList();

    if (nonZeroData.isEmpty) return _buildNoDataContainer(height);

    return Container(
      height: height > 280 ? 280 : height,
      padding: const EdgeInsets.all(6),
      decoration: BoxDecoration(
        color: Colors.transparent,
        borderRadius: BorderRadius.circular(5),
      ),
      child: SfCartesianChart(
        tooltipBehavior: TooltipBehavior(
          enable: true,
          builder: (data, point, series, pointIndex, seriesIndex) {
            final task = data as ChartTaskData;
            final value = seriesIndex == 0 ? task.planned : task.completed;
            return Container(
              padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 6),
              decoration: BoxDecoration(
                color: Colors.blueAccent,
                borderRadius: BorderRadius.circular(4),
              ),
              child: Text(
                Utils.formatCurrency(value),
                style: const TextStyle(color: Colors.white),
              ),
            );
          },
        ),
        legend: Legend(isVisible: true, position: LegendPosition.bottom),
        primaryXAxis: CategoryAxis(
          majorGridLines: const MajorGridLines(width: 0),
          axisLine: const AxisLine(width: 0),
          labelRotation: 45,
        ),
        primaryYAxis: NumericAxis(
          axisLine: const AxisLine(width: 0),
          majorGridLines: const MajorGridLines(width: 0),
          labelFormat: '{value}',
          numberFormat: NumberFormat.compact(),
        ),
        series: <ColumnSeries<ChartTaskData, String>>[
          ColumnSeries<ChartTaskData, String>(
            name: 'Planned',
            dataSource: nonZeroData,
            xValueMapper: (d, _) => DateFormat('d MMM').format(d.date),
            yValueMapper: (d, _) => d.planned,
            color: _getTaskColor('Planned'),
            dataLabelSettings: DataLabelSettings(
              isVisible: true,
              builder: (data, _, __, ___, ____) {
                final value = (data as ChartTaskData).planned;
                return Text(
                  Utils.formatCurrency(value),
                  style: const TextStyle(fontSize: 11),
                );
              },
            ),
          ),
          ColumnSeries<ChartTaskData, String>(
            name: 'Completed',
            dataSource: nonZeroData,
            xValueMapper: (d, _) => DateFormat('d MMM').format(d.date),
            yValueMapper: (d, _) => d.completed,
            color: _getTaskColor('Completed'),
            dataLabelSettings: DataLabelSettings(
              isVisible: true,
              builder: (data, _, __, ___, ____) {
                final value = (data as ChartTaskData).completed;
                return Text(
                  Utils.formatCurrency(value),
                  style: const TextStyle(fontSize: 11),
                );
              },
            ),
          ),
        ],
      ),
    );
  }

  // ================= TABLE =================
  Widget _buildTable(double maxHeight, double screenWidth) {
    final containerHeight = maxHeight > 300 ? 300.0 : maxHeight;
    final nonZeroData =
        data.where((d) => d.planned != 0 || d.completed != 0).toList();

    if (nonZeroData.isEmpty) return _buildNoDataContainer(containerHeight);

    return Container(
      height: containerHeight,
      padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 4),
      decoration: BoxDecoration(
        border: Border.all(color: Colors.grey.shade300),
        borderRadius: BorderRadius.circular(5),
        color: Colors.white,
      ),
      child: Scrollbar(
        thumbVisibility: true,
        trackVisibility: true,
        child: SingleChildScrollView(
          scrollDirection: Axis.horizontal,
          child: ConstrainedBox(
            constraints: BoxConstraints(minWidth: screenWidth),
            child: SingleChildScrollView(
              scrollDirection: Axis.vertical,
              child: DataTable(
                headingRowHeight: 44,
                dataRowHeight: 40,
                columnSpacing: screenWidth < 600 ? 16 : 36,
                headingRowColor: MaterialStateProperty.all(
                    Colors.blueAccent.withOpacity(0.08)),
                headingTextStyle: const TextStyle(
                    fontWeight: FontWeight.bold, color: Colors.black87),
                columns: const [
                  DataColumn(label: Text('Date')),
                  DataColumn(label: Text('Planned')),
                  DataColumn(label: Text('Completed')),
                ],
                rows: nonZeroData.map((task) {
                  return DataRow(
                    cells: [
                      // Date aligned left
                      DataCell(
                        Align(
                          alignment: Alignment.centerLeft,
                          child: Text(
                            DateFormat('d MMM').format(task.date),
                            style: const TextStyle(fontSize: 14),
                          ),
                        ),
                      ),
                      // Planned centered
                      DataCell(
                        SizedBox(
                          width: 60, // ensures proper centering
                          child: Align(
                            alignment: Alignment.center,
                            child: Text(
                              Utils.formatCurrency(task.planned),
                              style: TextStyle(
                                fontSize: 14,
                                color: _getTaskColor('Planned'),
                                fontWeight: FontWeight.w500,
                              ),
                            ),
                          ),
                        ),
                      ),
                      // Completed centered
                      DataCell(
                        SizedBox(
                          width: 60, // ensures proper centering
                          child: Align(
                            alignment: Alignment.center,
                            child: Text(
                              Utils.formatCurrency(task.completed),
                              style: TextStyle(
                                fontSize: 14,
                                color: _getTaskColor('Completed'),
                                fontWeight: FontWeight.w500,
                              ),
                            ),
                          ),
                        ),
                      ),
                    ],
                  );
                }).toList(),
              ),
            ),
          ),
        ),
      ),
    );
  }

  // ================= NO DATA WIDGETS =================
  Widget _buildNoDataContainer(double height) {
    return Container(
      height: height > 280 ? 280 : height,
      decoration: BoxDecoration(
        color: Colors.transparent,
        borderRadius: BorderRadius.circular(5),
      ),
      child: const Center(
        child: Text(
          'No project progress data for the selected range.',
          style: TextStyle(fontSize: 14, color: Colors.grey),
          textAlign: TextAlign.center,
        ),
      ),
    );
  }

  Widget _buildNoDataMessage() {
    return SizedBox(
      height: 180,
      child: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Icon(Icons.info_outline, color: Colors.grey.shade400, size: 54),
            const SizedBox(height: 10),
            MyText.bodyMedium(
              'No project progress data available for the selected range.',
              textAlign: TextAlign.center,
              color: Colors.grey.shade500,
            ),
          ],
        ),
      ),
    );
  }
}
