import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_modular/flutter_modular.dart' hide ModularWatchExtension;
import 'package:intl/intl.dart';
import 'package:lucide_icons/lucide_icons.dart';

import '../blocs/availability_bloc.dart';
import '../blocs/availability_event.dart';
import '../blocs/availability_state.dart';
import 'package:krow_domain/krow_domain.dart';

class AvailabilityPage extends StatefulWidget {
  const AvailabilityPage({super.key});

  @override
  State<AvailabilityPage> createState() => _AvailabilityPageState();
}

class _AvailabilityPageState extends State<AvailabilityPage> {
  final AvailabilityBloc _bloc = Modular.get<AvailabilityBloc>();

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

  void _calculateInitialWeek() {
    final today = DateTime.now();
    final day = today.weekday; // Mon=1, Sun=7
    final diff = day - 1; // Assuming Monday start
    DateTime currentWeekStart = today.subtract(Duration(days: diff));
    currentWeekStart = DateTime(
      currentWeekStart.year,
      currentWeekStart.month,
      currentWeekStart.day,
    );
    _bloc.add(LoadAvailability(currentWeekStart));
  }

  @override
  Widget build(BuildContext context) {
    return BlocProvider.value(
      value: _bloc,
      child: Scaffold(
        backgroundColor: AppColors.krowBackground,
        body: BlocBuilder<AvailabilityBloc, AvailabilityState>(
          builder: (context, state) {
            if (state is AvailabilityLoading) {
              return const Center(child: CircularProgressIndicator());
            } else if (state is AvailabilityLoaded) {
              return SingleChildScrollView(
                padding: const EdgeInsets.only(bottom: 100),
                child: Column(
                  children: [
                    _buildHeader(),
                    Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 20),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.stretch,
                        children: [
                          _buildQuickSet(context),
                          const SizedBox(height: 24),
                          _buildWeekNavigation(context, state),
                          const SizedBox(height: 24),
                          _buildSelectedDayAvailability(
                            context,
                            state.selectedDayAvailability,
                          ),
                          const SizedBox(height: 24),
                          _buildInfoCard(),
                        ],
                      ),
                    ),
                  ],
                ),
              );
            } else if (state is AvailabilityError) {
              return Center(child: Text('Error: ${state.message}'));
            }
            return const SizedBox.shrink();
          },
        ),
      ),
    );
  }

  Widget _buildHeader() {
    return Container(
      padding: const EdgeInsets.fromLTRB(20, 60, 20, 20),
      child: Column(
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Row(
                children: [
                  IconButton(
                    icon: const Icon(
                      LucideIcons.arrowLeft,
                      color: AppColors.krowCharcoal,
                    ),
                    onPressed: () => Modular.to.pop(),
                  ),
                  const SizedBox(width: 12),
                  Row(
                    children: [
                      Container(
                        width: 40,
                        height: 40,
                        decoration: BoxDecoration(
                          border: Border.all(
                            color: AppColors.krowBlue.withOpacity(0.2),
                            width: 2,
                          ),
                          shape: BoxShape.circle,
                        ),
                        child: Center(
                          child: CircleAvatar(
                            backgroundColor: AppColors.krowBlue.withOpacity(
                              0.1,
                            ),
                            radius: 18,
                            child: const Text(
                              'K', // Mock initial
                              style: TextStyle(
                                color: AppColors.krowBlue,
                                fontWeight: FontWeight.bold,
                                fontSize: 14,
                              ),
                            ),
                          ),
                        ),
                      ),
                      const SizedBox(width: 12),
                      const Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(
                            'My Availability',
                            style: TextStyle(
                              fontSize: 20,
                              fontWeight: FontWeight.bold,
                              color: AppColors.krowCharcoal,
                            ),
                          ),
                          Text(
                            'Set when you can work',
                            style: TextStyle(
                              fontSize: 14,
                              color: AppColors.krowMuted,
                            ),
                          ),
                        ],
                      ),
                    ],
                  ),
                ],
              ),
              Container(
                width: 40,
                height: 40,
                decoration: BoxDecoration(
                  color: AppColors.krowBlue.withOpacity(0.1),
                  shape: BoxShape.circle,
                ),
                child: const Icon(
                  LucideIcons.calendar,
                  color: AppColors.krowBlue,
                  size: 20,
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }

  Widget _buildQuickSet(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(16),
      decoration: BoxDecoration(
        color: AppColors.krowBlue.withOpacity(0.1),
        borderRadius: BorderRadius.circular(16),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const Text(
            'Quick Set Availability',
            style: TextStyle(
              fontSize: 14,
              fontWeight: FontWeight.w500,
              color: Color(0xFF333F48),
            ),
          ),
          const SizedBox(height: 12),
          Row(
            children: [
              Expanded(
                child: _buildQuickSetButton(
                  context,
                  'All Week',
                  'all',
                ),
              ),
              const SizedBox(width: 8),
              Expanded(
                child: _buildQuickSetButton(
                  context,
                  'Weekdays',
                  'weekdays',
                ),
              ),
              const SizedBox(width: 8),
              Expanded(
                child: _buildQuickSetButton(
                  context,
                  'Weekends',
                  'weekends',
                ),
              ),
              const SizedBox(width: 8),
              Expanded(
                child: _buildQuickSetButton(
                  context,
                  'Clear All',
                  'clear',
                  isDestructive: true,
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }

  Widget _buildQuickSetButton(
    BuildContext context,
    String label,
    String type, {
    bool isDestructive = false,
  }) {
    return SizedBox(
      height: 32,
      child: OutlinedButton(
        onPressed: () => context.read<AvailabilityBloc>().add(PerformQuickSet(type)),
        style: OutlinedButton.styleFrom(
          padding: EdgeInsets.zero,
          side: BorderSide(
            color: isDestructive
                ? Colors.red.withOpacity(0.2)
                : AppColors.krowBlue.withOpacity(0.2),
          ),
          backgroundColor: Colors.transparent, 
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(12),
          ),
          foregroundColor: isDestructive ? Colors.red : AppColors.krowBlue,
        ),
        child: Text(
          label,
          style: const TextStyle(fontSize: 10, fontWeight: FontWeight.w500),
          maxLines: 1,
          overflow: TextOverflow.ellipsis,
        ),
      ),
    );
  }

  Widget _buildWeekNavigation(BuildContext context, AvailabilityLoaded state) {
    // Middle date for month display
    final middleDate = state.currentWeekStart.add(const Duration(days: 3));
    final monthYear = DateFormat('MMMM yyyy').format(middleDate);

    return Container(
      padding: const EdgeInsets.all(16),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(16),
        border: Border.all(color: Colors.grey.shade100),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.05),
            blurRadius: 2,
            offset: const Offset(0, 1),
          ),
        ],
      ),
      child: Column(
        children: [
          // Nav Header
          Padding(
            padding: const EdgeInsets.only(bottom: 16),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                _buildNavButton(
                  LucideIcons.chevronLeft,
                  () => context.read<AvailabilityBloc>().add(const NavigateWeek(-1)),
                ),
                Text(
                  monthYear,
                  style: const TextStyle(
                    fontSize: 16,
                    fontWeight: FontWeight.w600,
                    color: AppColors.krowCharcoal,
                  ),
                ),
                _buildNavButton(
                  LucideIcons.chevronRight,
                  () => context.read<AvailabilityBloc>().add(const NavigateWeek(1)),
                ),
              ],
            ),
          ),
          // Days Row
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: state.days.map((day) => _buildDayItem(context, day, state.selectedDate)).toList(),
          ),
        ],
      ),
    );
  }

  Widget _buildNavButton(IconData icon, VoidCallback onTap) {
    return GestureDetector(
      onTap: onTap,
      child: Container(
        width: 32,
        height: 32,
        decoration: const BoxDecoration(
          color: Color(0xFFF1F5F9), // slate-100
          shape: BoxShape.circle,
        ),
        child: Icon(icon, size: 20, color: AppColors.krowMuted),
      ),
    );
  }

  Widget _buildDayItem(BuildContext context, DayAvailability day, DateTime selectedDate) {
    final isSelected = AvailabilityLoaded.isSameDay(day.date, selectedDate);
    final isAvailable = day.isAvailable;
    final isToday = AvailabilityLoaded.isSameDay(day.date, DateTime.now());

    return Expanded(
      child: GestureDetector(
        onTap: () => context.read<AvailabilityBloc>().add(SelectDate(day.date)),
        child: Container(
          margin: const EdgeInsets.symmetric(horizontal: 2),
          padding: const EdgeInsets.symmetric(vertical: 12),
          decoration: BoxDecoration(
            color: isSelected
                ? AppColors.krowBlue
                : (isAvailable
                      ? const Color(0xFFECFDF5)
                      : const Color(0xFFF8FAFC)), // emerald-50 or slate-50
            borderRadius: BorderRadius.circular(16),
            border: Border.all(
              color: isSelected
                  ? AppColors.krowBlue
                  : (isAvailable
                        ? const Color(0xFFA7F3D0)
                        : Colors.transparent), // emerald-200
            ),
            boxShadow: isSelected
                ? [
                    BoxShadow(
                      color: AppColors.krowBlue.withOpacity(0.3),
                      blurRadius: 8,
                      offset: const Offset(0, 4),
                    ),
                  ]
                : null,
          ),
          child: Stack(
            clipBehavior: Clip.none,
            alignment: Alignment.center,
            children: [
              Column(
                children: [
                  Text(
                    day.date.day.toString().padLeft(2, '0'),
                    style: TextStyle(
                      fontSize: 18,
                      fontWeight: FontWeight.bold,
                      color: isSelected
                          ? Colors.white
                          : (isAvailable
                                ? const Color(0xFF047857)
                                : AppColors.krowMuted), // emerald-700
                    ),
                  ),
                  const SizedBox(height: 2),
                  Text(
                     DateFormat('EEE').format(day.date),
                    style: TextStyle(
                      fontSize: 10,
                      color: isSelected
                          ? Colors.white.withOpacity(0.8)
                          : (isAvailable
                                ? const Color(0xFF047857)
                                : AppColors.krowMuted),
                    ),
                  ),
                ],
              ),
              if (isToday && !isSelected)
                Positioned(
                  bottom: -8,
                  child: Container(
                    width: 6,
                    height: 6,
                    decoration: const BoxDecoration(
                      color: AppColors.krowBlue,
                      shape: BoxShape.circle,
                    ),
                  ),
                ),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildSelectedDayAvailability(
    BuildContext context,
    DayAvailability day,
  ) {
    final dateStr = DateFormat('EEEE, MMM d').format(day.date);
    final isAvailable = day.isAvailable;

    return Container(
      padding: const EdgeInsets.all(20),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(16),
        border: Border.all(color: Colors.grey.shade100),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.05),
            blurRadius: 2,
            offset: const Offset(0, 1),
          ),
        ],
      ),
      child: Column(
        children: [
          // Header Row
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    dateStr,
                    style: const TextStyle(
                      fontSize: 16,
                      fontWeight: FontWeight.w600,
                      color: AppColors.krowCharcoal,
                    ),
                  ),
                  Text(
                    isAvailable ? 'You are available' : 'Not available',
                    style: const TextStyle(
                      fontSize: 14,
                      color: AppColors.krowMuted,
                    ),
                  ),
                ],
              ),
              Switch(
                value: isAvailable,
                onChanged: (val) => context.read<AvailabilityBloc>().add(ToggleDayStatus(day)),
                activeColor: AppColors.krowBlue,
              ),
            ],
          ),

          const SizedBox(height: 16),

          // Time Slots (only from Domain)
          ...day.slots.map((slot) {
            // Get UI config for this slot ID
            final uiConfig = _getSlotUiConfig(slot.id);
            
            return _buildTimeSlotItem(context, day, slot, uiConfig);
          }).toList(),
        ],
      ),
    );
  }
  
  Map<String, dynamic> _getSlotUiConfig(String slotId) {
    switch (slotId) {
      case 'morning':
        return {
          'icon': LucideIcons.sunrise,
          'bg': const Color(0xFFE6EBF9), // bg-[#0032A0]/10
          'iconColor': const Color(0xFF0032A0),
        };
      case 'afternoon':
        return {
          'icon': LucideIcons.sun,
          'bg': const Color(0xFFCCD6EC), // bg-[#0032A0]/20
          'iconColor': const Color(0xFF0032A0),
        };
      case 'evening':
        return {
          'icon': LucideIcons.moon,
          'bg': const Color(0xFFEBEDEE), // bg-[#333F48]/10
          'iconColor': const Color(0xFF333F48),
        };
      default:
        return {
          'icon': LucideIcons.clock,
          'bg': Colors.grey.shade100,
          'iconColor': Colors.grey,
        };
    }
  }

  Widget _buildTimeSlotItem(
    BuildContext context, 
    DayAvailability day, 
    AvailabilitySlot slot, 
    Map<String, dynamic> uiConfig
  ) {
    // Determine styles based on state
    final isEnabled = day.isAvailable; 
    final isActive = slot.isAvailable;
    
    // Container style
    Color bgColor;
    Color borderColor;

    if (!isEnabled) {
      bgColor = const Color(0xFFF8FAFC); // slate-50
      borderColor = const Color(0xFFF1F5F9); // slate-100
    } else if (isActive) {
      bgColor = AppColors.krowBlue.withOpacity(0.05);
      borderColor = AppColors.krowBlue.withOpacity(0.2);
    } else {
      bgColor = const Color(0xFFF8FAFC); // slate-50
      borderColor = const Color(0xFFE2E8F0); // slate-200
    }

    // Text colors
    final titleColor = (isEnabled && isActive)
        ? AppColors.krowCharcoal
        : AppColors.krowMuted;
    final subtitleColor = (isEnabled && isActive)
        ? AppColors.krowMuted
        : Colors.grey.shade400;

    return GestureDetector(
      onTap: isEnabled ? () => context.read<AvailabilityBloc>().add(ToggleSlotStatus(day, slot.id)) : null,
      child: AnimatedContainer(
        duration: const Duration(milliseconds: 200),
        margin: const EdgeInsets.only(bottom: 12),
        padding: const EdgeInsets.all(16),
        decoration: BoxDecoration(
          color: bgColor,
          borderRadius: BorderRadius.circular(12),
          border: Border.all(color: borderColor, width: 2),
        ),
        child: Row(
          children: [
            // Icon
            Container(
              width: 40,
              height: 40,
              decoration: BoxDecoration(
                color: uiConfig['bg'],
                borderRadius: BorderRadius.circular(12),
              ),
              child: Icon(
                uiConfig['icon'],
                color: uiConfig['iconColor'],
                size: 20,
              ),
            ),
            const SizedBox(width: 12),
            // Text
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    slot.label,
                    style: TextStyle(
                      fontSize: 14,
                      fontWeight: FontWeight.w500,
                      color: titleColor,
                    ),
                  ),
                  Text(
                    slot.timeRange,
                    style: TextStyle(
                      fontSize: 12,
                      color: subtitleColor,
                    ),
                  ),
                ],
              ),
            ),
            // Checkbox indicator
            if (isEnabled && isActive)
              Container(
                width: 24,
                height: 24,
                decoration: const BoxDecoration(
                  color: AppColors.krowBlue,
                  shape: BoxShape.circle,
                ),
                child: const Icon(
                  LucideIcons.check,
                  size: 16,
                  color: Colors.white,
                ),
              )
            else if (isEnabled && !isActive)
              Container(
                width: 24,
                height: 24,
                decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  border: Border.all(
                    color: const Color(0xFFCBD5E1),
                    width: 2,
                  ), // slate-300
                ),
              ),
          ],
        ),
      ),
    );
  }

  Widget _buildInfoCard() {
    return Container(
      padding: const EdgeInsets.all(16),
      decoration: BoxDecoration(
        color: AppColors.krowBlue.withOpacity(0.05),
        borderRadius: BorderRadius.circular(12),
      ),
      child: const Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Icon(LucideIcons.clock, size: 20, color: AppColors.krowBlue),
          SizedBox(width: 12),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  'Auto-Match uses your availability',
                  style: TextStyle(
                    fontSize: 14,
                    fontWeight: FontWeight.w500,
                    color: AppColors.krowCharcoal,
                  ),
                ),
                SizedBox(height: 2),
                Text(
                  "When enabled, you'll only be matched with shifts during your available times.",
                  style: TextStyle(fontSize: 12, color: AppColors.krowMuted),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

class AppColors {
  static const Color krowBlue = Color(0xFF0A39DF);
  static const Color krowYellow = Color(0xFFFFED4A);
  static const Color krowCharcoal = Color(0xFF121826);
  static const Color krowMuted = Color(0xFF6A7382);
  static const Color krowBorder = Color(0xFFE3E6E9);
  static const Color krowBackground = Color(0xFFFAFBFC);

  static const Color white = Colors.white;
  static const Color black = Colors.black;
}
