import 'package:flutter/material.dart';
import 'package:get/get.dart';
import '../../../constant/finance_design_system.dart';
import '../../../controller/home/journal/schedule_controller.dart';

class SchedulePage extends StatelessWidget {
  SchedulePage({super.key});
  final ScheduleController controller = Get.put(ScheduleController());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: FinanceDesignSystem.backgroundColor,
      appBar: AppBar(
        title: Text('My Schedule'.tr,
            style: TextStyle(
                fontWeight: FontWeight.bold,
                color: FinanceDesignSystem.primaryDark)),
        backgroundColor: Colors.transparent,
        elevation: 0,
        centerTitle: true,
        leading: IconButton(
            icon: Icon(Icons.arrow_back_ios_new_rounded,
                color: FinanceDesignSystem.primaryDark, size: 20),
            onPressed: () => Get.back()),
      ),
      body: GetBuilder<ScheduleController>(builder: (sc) {
        return SingleChildScrollView(
          padding: const EdgeInsets.all(16),
          child:
              Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
            // Summary Card
            Container(
              padding: const EdgeInsets.all(20),
              decoration: BoxDecoration(
                gradient: FinanceDesignSystem.balanceGradient,
                borderRadius:
                    BorderRadius.circular(FinanceDesignSystem.cardRadius),
              ),
              child: Row(children: [
                Expanded(
                    child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                      Text('Weekly Plan'.tr,
                          style: TextStyle(
                              color: Colors.white.withValues(alpha: 0.7),
                              fontSize: 14)),
                      const SizedBox(height: 8),
                      Text('${sc.totalWeeklyHours.toStringAsFixed(1)}h',
                          style: const TextStyle(
                              fontSize: 32,
                              fontWeight: FontWeight.w900,
                              color: Colors.white)),
                      Text('${sc.activeDays} ${'Days'.tr}',
                          style: TextStyle(
                              color: Colors.white.withValues(alpha: 0.6),
                              fontSize: 13)),
                    ])),
                Container(
                  padding: const EdgeInsets.all(14),
                  decoration: BoxDecoration(
                      color: Colors.white.withValues(alpha: 0.15),
                      borderRadius: BorderRadius.circular(14)),
                  child: const Icon(Icons.calendar_today_rounded,
                      color: Colors.white, size: 28),
                ),
              ]),
            ),
            const SizedBox(height: 24),

            Text('Work Days'.tr, style: FinanceDesignSystem.headingStyle),
            const SizedBox(height: 12),

            ...sc.schedule.map((slot) => _buildDayCard(context, slot, sc)),
          ]),
        );
      }),
    );
  }

  Widget _buildDayCard(
      BuildContext context, WorkSlot slot, ScheduleController sc) {
    final isAr = Get.locale?.languageCode == 'ar';
    return Container(
      margin: const EdgeInsets.only(bottom: 10),
      padding: const EdgeInsets.all(14),
      decoration: BoxDecoration(
        color: slot.isActive ? Colors.white : Colors.grey.shade50,
        borderRadius: BorderRadius.circular(14),
        boxShadow: slot.isActive
            ? [
                BoxShadow(
                    color: Colors.black.withValues(alpha: 0.03),
                    blurRadius: 8,
                    offset: const Offset(0, 3))
              ]
            : null,
      ),
      child: Row(children: [
        // Toggle
        GestureDetector(
          onTap: () => sc.toggleDay(slot.dayOfWeek),
          child: AnimatedContainer(
            duration: const Duration(milliseconds: 200),
            width: 44,
            height: 44,
            decoration: BoxDecoration(
              color: slot.isActive
                  ? FinanceDesignSystem.accentBlue.withValues(alpha: 0.1)
                  : Colors.grey.shade200,
              borderRadius: BorderRadius.circular(12),
            ),
            child: Center(
                child: Text(
              isAr ? slot.dayNameAr.substring(0, 2) : slot.dayName,
              style: TextStyle(
                  fontSize: 12,
                  fontWeight: FontWeight.bold,
                  color: slot.isActive
                      ? FinanceDesignSystem.accentBlue
                      : Colors.grey.shade400),
            )),
          ),
        ),
        const SizedBox(width: 14),
        // Day name
        Expanded(
            child:
                Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
          Text(isAr ? slot.dayNameAr : slot.dayName.tr,
              style: TextStyle(
                  fontSize: 14,
                  fontWeight: FontWeight.w600,
                  color: slot.isActive
                      ? FinanceDesignSystem.primaryDark
                      : Colors.grey.shade400)),
          if (slot.isActive)
            Text(slot.timeRange,
                style: TextStyle(fontSize: 12, color: Colors.grey.shade500)),
          if (!slot.isActive)
            Text('Day Off'.tr,
                style: TextStyle(
                    fontSize: 12,
                    color: Colors.grey.shade400,
                    fontStyle: FontStyle.italic)),
        ])),
        // Time pickers
        if (slot.isActive) ...[
          _timePicker(context, slot.startTime,
              (t) => sc.updateStartTime(slot.dayOfWeek, t)),
          Padding(
              padding: const EdgeInsets.symmetric(horizontal: 4),
              child: Text('-', style: TextStyle(color: Colors.grey.shade400))),
          _timePicker(context, slot.endTime,
              (t) => sc.updateEndTime(slot.dayOfWeek, t)),
        ],
        // Toggle switch
        Switch(
          value: slot.isActive,
          onChanged: (_) => sc.toggleDay(slot.dayOfWeek),
          activeThumbColor: FinanceDesignSystem.accentBlue,
        ),
      ]),
    );
  }

  Widget _timePicker(
      BuildContext context, TimeOfDay time, Function(TimeOfDay) onChanged) {
    return GestureDetector(
      onTap: () async {
        final picked =
            await showTimePicker(context: context, initialTime: time);
        if (picked != null) onChanged(picked);
      },
      child: Container(
        padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
        decoration: BoxDecoration(
            color: Colors.grey.shade100,
            borderRadius: BorderRadius.circular(8)),
        child: Text(
            '${time.hour.toString().padLeft(2, '0')}:${time.minute.toString().padLeft(2, '0')}',
            style: TextStyle(
                fontSize: 12,
                fontWeight: FontWeight.w600,
                color: FinanceDesignSystem.primaryDark)),
      ),
    );
  }
}