import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

import '../../core/models/colonia.dart';
import 'colonias_provider.dart';

class ColoniasSelector extends ConsumerWidget {
  const ColoniasSelector({
    super.key,
    required this.onChanged,
    this.initialValue,
    this.labelText = 'Colonia',
  });

  final ValueChanged<Colonia> onChanged;
  final Colonia? initialValue;
  final String labelText;

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final coloniasAsync = ref.watch(coloniasProvider);

    return coloniasAsync.when(
      loading: () => const Card(
        child: Padding(
          padding: EdgeInsets.all(16),
          child: Row(
            children: [
              SizedBox(
                width: 18,
                height: 18,
                child: CircularProgressIndicator(strokeWidth: 2),
              ),
              SizedBox(width: 12),
              Text('Cargando colonias...'),
            ],
          ),
        ),
      ),
      error: (error, stackTrace) => _StateCard(
        icon: Icons.error_outline,
        title: 'No se pudieron cargar las colonias',
        message: error.toString(),
        actionLabel: 'Reintentar',
        onAction: () => ref.invalidate(coloniasProvider),
      ),
      data: (colonias) {
        if (colonias.isEmpty) {
          return const _StateCard(
            icon: Icons.inbox_outlined,
            title: 'Sin colonias disponibles',
            message: 'El backend no devolvió colonias todavía.',
          );
        }

        return DropdownButtonFormField<Colonia>(
          value: initialValue,
          decoration: InputDecoration(labelText: labelText),
          items: colonias
              .map(
                (colonia) => DropdownMenuItem<Colonia>(
                  value: colonia,
                  child: Text(
                    colonia.horarioEstimado == null ||
                            colonia.horarioEstimado!.isEmpty
                        ? colonia.nombre
                        : '${colonia.nombre} · ${colonia.horarioEstimado}',
                  ),
                ),
              )
              .toList(growable: false),
          onChanged: (value) {
            if (value != null) {
              onChanged(value);
            }
          },
        );
      },
    );
  }
}

class _StateCard extends StatelessWidget {
  const _StateCard({
    required this.icon,
    required this.title,
    required this.message,
    this.actionLabel,
    this.onAction,
  });

  final IconData icon;
  final String title;
  final String message;
  final String? actionLabel;
  final VoidCallback? onAction;

  @override
  Widget build(BuildContext context) {
    return Card(
      child: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Icon(icon),
            const SizedBox(height: 12),
            Text(title, style: Theme.of(context).textTheme.titleMedium),
            const SizedBox(height: 6),
            Text(message),
            if (actionLabel != null && onAction != null) ...[
              const SizedBox(height: 12),
              TextButton(onPressed: onAction, child: Text(actionLabel!)),
            ],
          ],
        ),
      ),
    );
  }
}