import 'package:easy_localization/easy_localization.dart';
import 'package:fl_heatmap/fl_heatmap.dart';
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:gap/gap.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:island/models/heatmap.dart';
import '../services/responsive.dart';

/// A reusable heatmap widget for displaying activity data in GitHub-style layout.
/// Shows exactly 365 days (wide screen) or 90 days (non-wide screen) of data ending at the current date.
class ActivityHeatmapWidget extends HookConsumerWidget {
  final SnHeatmap heatmap;

  const ActivityHeatmapWidget({super.key, required this.heatmap});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final selectedItem = useState<HeatmapItem?>(null);

    final now = DateTime.now();

    final isWide = isWideScreen(context);
    final days = isWide ? 365 : 90;

    // Start from exactly the selected days ago
    final startDate = now.subtract(Duration(days: days));
    // End at current date
    final endDate = now;

    // Find monday of the week containing start date
    final startMonday = startDate.subtract(
      Duration(days: startDate.weekday - 1),
    );
    // Find sunday of the week containing end date
    final endSunday = endDate.add(Duration(days: 7 - endDate.weekday));

    // Generate weeks to cover the selected date range
    final weeks = <DateTime>[];
    var current = startMonday;
    while (current.isBefore(endSunday) || current.isAtSameMomentAs(endSunday)) {
      weeks.add(current);
      current = current.add(const Duration(days: 7));
    }

    // Create data map for all dates in the range
    final dataMap = <DateTime, double>{};
    for (final week in weeks) {
      for (var i = 0; i < 7; i++) {
        final date = week.add(Duration(days: i));
        // Only include dates within our selected range
        if (date.isAfter(startDate.subtract(const Duration(days: 1))) &&
            date.isBefore(endDate.add(const Duration(days: 1)))) {
          final item = heatmap.items.firstWhere(
            (e) =>
                e.date.year == date.year &&
                e.date.month == date.month &&
                e.date.day == date.day,
            orElse: () => SnHeatmapItem(date: date, count: 0),
          );
          dataMap[date] = item.count.toDouble();
        }
      }
    }

    // Generate month labels for the top
    final monthLabels = <String>[];
    final monthPositions = <int>[];
    final processedMonths =
        <String>{}; // Track processed months to avoid duplicates

    for (final week in weeks) {
      final monthKey = '${week.year}-${week.month.toString().padLeft(2, '0')}';

      // Only process each month once
      if (!processedMonths.contains(monthKey)) {
        processedMonths.add(monthKey);

        // Find which week this month starts in
        final firstDayOfMonth = DateTime(week.year, week.month, 1);
        final monthStartMonday = firstDayOfMonth.subtract(
          Duration(days: firstDayOfMonth.weekday - 1),
        );

        final monthStartWeekIndex = weeks.indexWhere(
          (w) =>
              w.year == monthStartMonday.year &&
              w.month == monthStartMonday.month &&
              w.day == monthStartMonday.day,
        );

        if (monthStartWeekIndex != -1) {
          monthLabels.add(_getMonthAbbreviation(week.month));
          monthPositions.add(monthStartWeekIndex);
        }
      }
    }

    final heatmapData = HeatmapData(
      rows: [
        'Mon',
        'Tue',
        'Wed',
        'Thu',
        'Fri',
        'Sat',
        'Sun',
      ], // Days of week vertically
      columns:
          weeks
              .map(
                (w) =>
                    '${w.year}-${w.month.toString().padLeft(2, '0')}-${w.day.toString().padLeft(2, '0')}',
              )
              .toList(), // Weeks horizontally
      items: [
        for (int day = 0; day < 7; day++) // For each day of week (Mon-Sun)
          for (final week in weeks) // For each week
            HeatmapItem(
              value: dataMap[week.add(Duration(days: day))] ?? 0.0,
              unit: heatmap.unit,
              xAxisLabel:
                  '${week.year}-${week.month.toString().padLeft(2, '0')}-${week.day.toString().padLeft(2, '0')}',
              yAxisLabel:
                  day == 0
                      ? 'Mon'
                      : day == 1
                      ? 'Tue'
                      : day == 2
                      ? 'Wed'
                      : day == 3
                      ? 'Thu'
                      : day == 4
                      ? 'Fri'
                      : day == 5
                      ? 'Sat'
                      : 'Sun',
            ),
      ],
    );

    return Card(
      margin: EdgeInsets.zero,
      child: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              'activityHeatmap',
              style: Theme.of(context).textTheme.titleMedium,
            ).tr(),
            const Gap(8),
            // Month labels row
            Row(
              children: [
                const SizedBox(width: 30), // Space for day labels
                ...monthLabels.asMap().entries.map((entry) {
                  final month = entry.value;

                  return Expanded(
                    child: Container(
                      alignment: Alignment.center,
                      child: Text(
                        month,
                        style: Theme.of(context).textTheme.bodySmall,
                        textAlign: TextAlign.center,
                      ),
                    ),
                  );
                }),
              ],
            ),
            const Gap(4),
            Heatmap(
              heatmapData: heatmapData,
              rowsVisible: 7,
              showXAxisLabels: false,
              onItemSelectedListener: (item) {
                selectedItem.value = item;
              },
            ),
            const Gap(8),
            // Legend
            Row(
              children: [
                if (selectedItem.value != null)
                  RichText(
                    text: TextSpan(
                      children: [
                        TextSpan(
                          text: selectedItem.value!.value.toInt().toString(),
                          style: Theme.of(context).textTheme.bodySmall
                              ?.copyWith(fontWeight: FontWeight.bold),
                        ),
                        TextSpan(
                          text: ' activities on ',
                          style: Theme.of(context).textTheme.bodySmall,
                        ),
                        TextSpan(
                          text: _formatDate(
                            selectedItem.value!.xAxisLabel ?? '',
                          ),
                          style: Theme.of(context).textTheme.bodySmall,
                        ),
                      ],
                    ),
                  ),
                const Spacer(),
                Text(
                  'Less',
                  style: Theme.of(context).textTheme.bodySmall?.copyWith(
                    color: Theme.of(context).colorScheme.onSurfaceVariant,
                  ),
                ),
                const Gap(4),
                // Color indicators (light to dark green)
                ...[
                  Colors.green.withOpacity(0.2),
                  Colors.green.withOpacity(0.4),
                  Colors.green.withOpacity(0.6),
                  Colors.green.withOpacity(0.8),
                  Colors.green,
                ].map(
                  (color) => Container(
                    width: 8,
                    height: 8,
                    margin: const EdgeInsets.symmetric(horizontal: 1),
                    decoration: BoxDecoration(
                      color: color,
                      borderRadius: BorderRadius.circular(2),
                    ),
                  ),
                ),
                const Gap(4),
                Text(
                  'More',
                  style: Theme.of(context).textTheme.bodySmall?.copyWith(
                    color: Theme.of(context).colorScheme.onSurfaceVariant,
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }

  String _getMonthAbbreviation(int month) {
    const monthNames = [
      'Jan',
      'Feb',
      'Mar',
      'Apr',
      'May',
      'Jun',
      'Jul',
      'Aug',
      'Sep',
      'Oct',
      'Nov',
      'Dec',
    ];
    return monthNames[month - 1];
  }

  String _formatDate(String dateString) {
    try {
      final date = DateTime.parse(dateString);
      final monthAbbrev = _getMonthAbbreviation(date.month);
      return '$monthAbbrev ${date.day}, ${date.year}';
    } catch (e) {
      return dateString; // Fallback to original string if parsing fails
    }
  }
}