import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:intl/intl.dart';
import '../providers/dashboard_providers.dart';
import '../../../widgets/status_badge.dart';
import '../../../widgets/error_view.dart';

class CustomerDetailScreen extends ConsumerWidget {
  final String id;

  const CustomerDetailScreen({super.key, required this.id});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final async = ref.watch(customerDetailProvider(id));

    return async.when(
      loading: () =>
          const Scaffold(body: Center(child: CircularProgressIndicator())),
      error: (e, _) => Scaffold(
        appBar: AppBar(),
        body: ErrorView(
          message: 'Could not load customer',
          onRetry: () => ref.invalidate(customerDetailProvider(id)),
        ),
      ),
      data: (customer) {
        final fmt = DateFormat('MMM d, yyyy');
        return Scaffold(
          appBar: AppBar(title: Text(customer.fullName)),
          body: ListView(
            padding: const EdgeInsets.all(16),
            children: [
              Center(
                child: Column(
                  children: [
                    CircleAvatar(
                      radius: 40,
                      backgroundColor: customer.isFlagged
                          ? const Color(0xFFFDE8E8)
                          : const Color(0xFFE1EFFE),
                      child: Text(
                        customer.firstName.substring(0, 1).toUpperCase(),
                        style: TextStyle(
                          fontSize: 32,
                          color: customer.isFlagged
                              ? const Color(0xFFE02424)
                              : const Color(0xFF1A56DB),
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                    ),
                    const SizedBox(height: 12),
                    Text(
                      customer.fullName,
                      style: const TextStyle(
                        fontSize: 20,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                    const SizedBox(height: 6),
                    StatusBadge(status: customer.licenseStatus),
                    if (customer.isFlagged) ...[
                      const SizedBox(height: 8),
                      Container(
                        padding: const EdgeInsets.symmetric(
                            horizontal: 12, vertical: 6),
                        decoration: BoxDecoration(
                          color: const Color(0xFFFDE8E8),
                          borderRadius: BorderRadius.circular(8),
                        ),
                        child: Row(
                          mainAxisSize: MainAxisSize.min,
                          children: [
                            const Icon(Icons.flag,
                                size: 14, color: Color(0xFFE02424)),
                            const SizedBox(width: 6),
                            Text(
                              customer.flagReason ?? 'Flagged',
                              style: const TextStyle(
                                  color: Color(0xFF9B1C1C), fontSize: 13),
                            ),
                          ],
                        ),
                      ),
                    ],
                  ],
                ),
              ),
              const SizedBox(height: 24),
              Card(
                child: Padding(
                  padding: const EdgeInsets.all(16),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      const Text(
                        'Contact Information',
                        style: TextStyle(
                          fontWeight: FontWeight.bold,
                          color: Color(0xFF6B7280),
                          fontSize: 12,
                        ),
                      ),
                      const SizedBox(height: 12),
                      if (customer.email != null)
                        _InfoRow(
                            icon: Icons.email_outlined,
                            value: customer.email!),
                      if (customer.phone != null)
                        _InfoRow(
                            icon: Icons.phone_outlined,
                            value: customer.phone!),
                      if (customer.nationality != null)
                        _InfoRow(
                            icon: Icons.flag_outlined,
                            value: customer.nationality!),
                      if (customer.dateOfBirth != null)
                        _InfoRow(
                          icon: Icons.cake_outlined,
                          value: fmt.format(customer.dateOfBirth!),
                        ),
                      _InfoRow(
                        icon: Icons.calendar_today_outlined,
                        value: 'Joined ${fmt.format(customer.createdAt)}',
                      ),
                    ],
                  ),
                ),
              ),
            ],
          ),
        );
      },
    );
  }
}

class _InfoRow extends StatelessWidget {
  final IconData icon;
  final String value;

  const _InfoRow({required this.icon, required this.value});

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 6),
      child: Row(
        children: [
          Icon(icon, size: 18, color: const Color(0xFF6B7280)),
          const SizedBox(width: 10),
          Expanded(
            child: Text(value,
                style: const TextStyle(fontSize: 14)),
          ),
        ],
      ),
    );
  }
}