// lib/shared/widgets/progress_steps.dart
// Barra de 4 pasos del servicio. Sin mapa ni coordenadas.
// Los pasos mapean a los eventos de positionId del backend:
//   0 = pendiente, 1 = ROUTE_START (pos 2), 2 = TRUCK_PROXIMITY (pos 4), 3 = ROUTE_COMPLETED (pos 8)
 
import 'package:flutter/material.dart';
 
class ProgressSteps extends StatelessWidget {
  /// 0 = pendiente, 1 = en camino, 2 = cerca, 3 = completado
  final int stepIndex;
 
  const ProgressSteps({super.key, required this.stepIndex});
 
  static const _steps = [
    _StepData('Servicio pendiente', Icons.access_time_rounded),
    _StepData('Salió al sector', Icons.arrow_forward_rounded),
    _StepData('Cerca (~15 min)', Icons.local_shipping_rounded),
    _StepData('Finalizado', Icons.check_circle_outline_rounded),
  ];
 
  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        color: Theme.of(context).colorScheme.surface,
        borderRadius: BorderRadius.circular(12),
        border: Border.all(
          color: Theme.of(context).colorScheme.outlineVariant,
        ),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Padding(
            padding: const EdgeInsets.fromLTRB(14, 10, 14, 8),
            child: Row(
              children: [
                const Icon(Icons.route_rounded,
                    size: 16, color: Color(0xFF1D9E75)),
                const SizedBox(width: 6),
                Text(
                  'Progreso del servicio',
                  style: TextStyle(
                    fontSize: 13,
                    fontWeight: FontWeight.w500,
                    color: Theme.of(context).colorScheme.onSurface,
                  ),
                ),
              ],
            ),
          ),
          const Divider(height: 1, thickness: 0.5),
          ...List.generate(_steps.length, (i) {
            final status = _stepStatus(i);
            return _StepRow(
              data: _steps[i],
              status: status,
              isLast: i == _steps.length - 1,
            );
          }),
        ],
      ),
    );
  }
 
  _Status _stepStatus(int i) {
    if (i < stepIndex) return _Status.done;
    if (i == stepIndex) return _Status.active;
    return _Status.pending;
  }
}
 
enum _Status { done, active, pending }
 
class _StepData {
  final String label;
  final IconData icon;
  const _StepData(this.label, this.icon);
}
 
class _StepRow extends StatelessWidget {
  final _StepData data;
  final _Status status;
  final bool isLast;
 
  const _StepRow({
    required this.data,
    required this.status,
    required this.isLast,
  });
 
  @override
  Widget build(BuildContext context) {
    Color iconBg;
    Color iconColor;
    IconData displayIcon;
 
    switch (status) {
      case _Status.done:
        iconBg = const Color(0xFFE1F5EE);
        iconColor = const Color(0xFF1D9E75);
        displayIcon = Icons.check_rounded;
        break;
      case _Status.active:
        iconBg = const Color(0xFFFAEEDA);
        iconColor = const Color(0xFFBA7517);
        displayIcon = data.icon;
        break;
      case _Status.pending:
        iconBg = Theme.of(context).colorScheme.surfaceContainerLow;
        iconColor = Theme.of(context).colorScheme.onSurfaceVariant;
        displayIcon = Icons.radio_button_unchecked_rounded;
        break;
    }
 
    return Container(
      decoration: BoxDecoration(
        border: isLast
            ? null
            : Border(
                bottom: BorderSide(
                  color: Theme.of(context).colorScheme.outlineVariant,
                  width: 0.5,
                ),
              ),
      ),
      child: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 10),
        child: Row(
          children: [
            Container(
              width: 30,
              height: 30,
              decoration: BoxDecoration(
                color: iconBg,
                shape: BoxShape.circle,
              ),
              child: Icon(displayIcon, size: 15, color: iconColor),
            ),
            const SizedBox(width: 12),
            Expanded(
              child: Text(
                data.label,
                style: TextStyle(
                  fontSize: 13,
                  color: status == _Status.pending
                      ? Theme.of(context).colorScheme.onSurfaceVariant
                      : Theme.of(context).colorScheme.onSurface,
                ),
              ),
            ),
            if (status == _Status.active)
              Container(
                padding:
                    const EdgeInsets.symmetric(horizontal: 8, vertical: 3),
                decoration: BoxDecoration(
                  color: const Color(0xFFFAEEDA),
                  borderRadius: BorderRadius.circular(100),
                ),
                child: const Text(
                  'Ahora',
                  style: TextStyle(
                    fontSize: 11,
                    fontWeight: FontWeight.w500,
                    color: Color(0xFF633806),
                  ),
                ),
              ),
          ],
        ),
      ),
    );
  }
}