/// Page: Points Records List
///
/// Displays list of user's points records with filters.
library;

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:go_router/go_router.dart';
import 'package:intl/intl.dart';
import 'package:worker/core/constants/ui_constants.dart';
import 'package:worker/core/theme/colors.dart';
import 'package:worker/features/loyalty/domain/entities/points_record.dart';
import 'package:worker/features/loyalty/presentation/providers/points_records_provider.dart';

/// Points Records Page
class PointsRecordsPage extends ConsumerWidget {
  const PointsRecordsPage({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final recordsAsync = ref.watch(filteredPointsRecordsProvider);
    final filter = ref.watch(pointsRecordsFilterProvider);
    final selectedStatus = filter.selectedStatus;

    return Scaffold(
      backgroundColor: const Color(0xFFF4F6F8),
      appBar: AppBar(
        leading: IconButton(
          icon: const FaIcon(
            FontAwesomeIcons.arrowLeft,
            color: Colors.black,
            size: 20,
          ),
          onPressed: () => context.pop(),
        ),
        title: const Text(
          'Danh sách Ghi nhận điểm',
          style: TextStyle(color: Colors.black),
        ),
        actions: [
          IconButton(
            icon: const FaIcon(
              FontAwesomeIcons.plus,
              color: Colors.black,
              size: 20,
            ),
            onPressed: () {
              // TODO: Navigate to points record create page
              ScaffoldMessenger.of(context).showSnackBar(
                const SnackBar(
                  content: Text('Tính năng tạo ghi nhận điểm sẽ được cập nhật'),
                ),
              );
            },
          ),
          const SizedBox(width: AppSpacing.sm),
        ],
        elevation: AppBarSpecs.elevation,
        backgroundColor: AppColors.white,
        centerTitle: false,
      ),
      body: Column(
        children: [
          // Search Bar
          Padding(
            padding: const EdgeInsets.all(16),
            child: TextField(
              decoration: InputDecoration(
                hintText: 'Mã yêu cầu',
                prefixIcon: const Icon(Icons.search, color: AppColors.grey500),
                filled: true,
                fillColor: AppColors.white,
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(8),
                  borderSide: const BorderSide(color: AppColors.grey100),
                ),
                enabledBorder: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(8),
                  borderSide: const BorderSide(color: AppColors.grey100),
                ),
              ),
              onChanged: (value) {
                ref.read(pointsRecordsFilterProvider.notifier).updateSearchQuery(value);
              },
            ),
          ),

          // Status Filter Tabs
          SingleChildScrollView(
            scrollDirection: Axis.horizontal,
            padding: const EdgeInsets.symmetric(horizontal: 16),
            child: Row(
              children: [
                _buildFilterChip(
                  context,
                  ref,
                  label: 'Tất cả',
                  isSelected: selectedStatus == null,
                  onTap: () =>
                      ref.read(pointsRecordsFilterProvider.notifier).clearStatusFilter(),
                ),
                const SizedBox(width: 8),
                ...PointsStatus.values.map(
                  (status) => Padding(
                    padding: const EdgeInsets.only(right: 8),
                    child: _buildFilterChip(
                      context,
                      ref,
                      label: status.displayName,
                      isSelected: selectedStatus == status,
                      onTap: () =>
                          ref.read(pointsRecordsFilterProvider.notifier).selectStatus(status),
                    ),
                  ),
                ),
              ],
            ),
          ),

          const SizedBox(height: 16),

          // Points Records List
          Expanded(
            child: recordsAsync.when(
              data: (records) {
                if (records.isEmpty) {
                  return RefreshIndicator(
                    onRefresh: () async {
                      await ref.read(allPointsRecordsProvider.notifier).refresh();
                    },
                    child: ListView(
                      padding: const EdgeInsets.symmetric(horizontal: 16),
                      children: [
                        SizedBox(
                          height: MediaQuery.of(context).size.height * 0.5,
                          child: const Center(
                            child: Column(
                              mainAxisAlignment: MainAxisAlignment.center,
                              children: [
                                FaIcon(
                                  FontAwesomeIcons.folderOpen,
                                  size: 64,
                                  color: AppColors.grey500,
                                ),
                                SizedBox(height: 16),
                                Text(
                                  'Không có ghi nhận điểm nào',
                                  style: TextStyle(
                                    fontSize: 16,
                                    fontWeight: FontWeight.w600,
                                    color: AppColors.grey900,
                                  ),
                                ),
                                SizedBox(height: 8),
                                Text(
                                  'Không tìm thấy ghi nhận điểm phù hợp',
                                  style: TextStyle(color: AppColors.grey500),
                                ),
                              ],
                            ),
                          ),
                        ),
                      ],
                    ),
                  );
                }

                return RefreshIndicator(
                  onRefresh: () async {
                    await ref.read(allPointsRecordsProvider.notifier).refresh();
                  },
                  child: ListView.builder(
                    padding: const EdgeInsets.symmetric(horizontal: 16),
                    itemCount: records.length,
                    itemBuilder: (context, index) {
                      final record = records[index];
                      return _buildRecordCard(context, record);
                    },
                  ),
                );
              },
              loading: () => const Center(
                child: CircularProgressIndicator(),
              ),
              error: (error, stack) => RefreshIndicator(
                onRefresh: () async {
                  await ref.read(allPointsRecordsProvider.notifier).refresh();
                },
                child: ListView(
                  padding: const EdgeInsets.symmetric(horizontal: 16),
                  children: [
                    SizedBox(
                      height: MediaQuery.of(context).size.height * 0.5,
                      child: Center(
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            const Icon(
                              Icons.error_outline,
                              size: 64,
                              color: AppColors.danger,
                            ),
                            const SizedBox(height: 16),
                            const Text(
                              'Có lỗi xảy ra',
                              style: TextStyle(
                                fontSize: 16,
                                fontWeight: FontWeight.w600,
                                color: AppColors.grey900,
                              ),
                            ),
                            const SizedBox(height: 8),
                            Text(
                              error.toString(),
                              style: const TextStyle(color: AppColors.grey500),
                              textAlign: TextAlign.center,
                            ),
                            const SizedBox(height: 16),
                            const Text(
                              'Kéo xuống để thử lại',
                              style: TextStyle(color: AppColors.grey500),
                            ),
                          ],
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildFilterChip(
    BuildContext context,
    WidgetRef ref, {
    required String label,
    required bool isSelected,
    required VoidCallback onTap,
  }) {
    return GestureDetector(
      onTap: onTap,
      child: Container(
        padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
        decoration: BoxDecoration(
          color: isSelected ? AppColors.primaryBlue : AppColors.white,
          borderRadius: BorderRadius.circular(20),
          border: Border.all(
            color: isSelected ? AppColors.primaryBlue : AppColors.grey100,
          ),
        ),
        child: Text(
          label,
          style: TextStyle(
            color: isSelected ? AppColors.white : AppColors.grey900,
            fontWeight: isSelected ? FontWeight.w600 : FontWeight.normal,
          ),
        ),
      ),
    );
  }

  Widget _buildRecordCard(BuildContext context, PointsRecord record) {
    final currencyFormat = NumberFormat.currency(
      locale: 'vi_VN',
      symbol: '₫',
      decimalDigits: 0,
    );

    return Card(
      margin: const EdgeInsets.only(bottom: 12),
      elevation: 1,
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
      child: InkWell(
        onTap: () {
          // TODO: Navigate to points record detail
          ScaffoldMessenger.of(context).showSnackBar(
            SnackBar(content: Text('Chi tiết ghi nhận ${record.recordId}')),
          );
        },
        borderRadius: BorderRadius.circular(12),
        child: Container(
          padding: const EdgeInsets.all(16),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text(
                    '#${record.recordId}',
                    style: const TextStyle(
                      fontSize: 16,
                      fontWeight: FontWeight.w700,
                      color: AppColors.grey900,
                    ),
                  ),
                  _buildStatusBadge(record.status),
                ],
              ),
              const SizedBox(height: 8),
              Text(
                'Ngày gửi: ${DateFormat('dd/MM/yyyy').format(record.submittedAt)}',
                style: const TextStyle(
                  fontSize: 13,
                  color: AppColors.grey500,
                ),
              ),
              const SizedBox(height: 4),
              Text(
                'Giá trị đơn hàng: ${currencyFormat.format(record.invoiceAmount)}',
                style: const TextStyle(
                  fontSize: 14,
                  color: AppColors.grey900,
                ),
              ),
              if (record.rejectReason != null) ...[
                const SizedBox(height: 8),
                Container(
                  padding: const EdgeInsets.all(8),
                  decoration: BoxDecoration(
                    color: const Color(0xFFFEF2F2),
                    borderRadius: BorderRadius.circular(8),
                  ),
                  child: Row(
                    children: [
                      const FaIcon(
                        FontAwesomeIcons.triangleExclamation,
                        size: 14,
                        color: AppColors.danger,
                      ),
                      const SizedBox(width: 8),
                      Expanded(
                        child: Text(
                          record.rejectReason!,
                          style: const TextStyle(
                            fontSize: 12,
                            color: AppColors.danger,
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildStatusBadge(PointsStatus status) {
    final color = _getStatusColor(status);
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 4),
      decoration: BoxDecoration(
        color: color.withValues(alpha: 0.1),
        borderRadius: BorderRadius.circular(12),
      ),
      child: Text(
        status.displayName,
        style: TextStyle(
          color: color,
          fontSize: 12,
          fontWeight: FontWeight.w600,
        ),
      ),
    );
  }

  Color _getStatusColor(PointsStatus status) {
    switch (status) {
      case PointsStatus.pending:
        return AppColors.warning;
      case PointsStatus.approved:
        return AppColors.success;
      case PointsStatus.rejected:
        return AppColors.danger;
    }
  }
}
