import 'package:flutter/material.dart';

class DeliveryUpdatesPage extends StatefulWidget {
  final String orderId;
  final String initialStatus;
  const DeliveryUpdatesPage({super.key, required this.orderId, required this.initialStatus});

  @override
  State<DeliveryUpdatesPage> createState() => _DeliveryUpdatesPageState();
}

class _DeliveryUpdatesPageState extends State<DeliveryUpdatesPage> {
  List<String> statuses = [
    "Tanker reached source",
    "Water filling started",
    "Water filling completed",
    "Tanker started to customer location",
    "Offloading water started",
    "Offloading water completed",
    "Payment completed",
    "Delivery completed"
  ];

  int currentStep = 0;

  @override
  void initState() {
    super.initState();
    // Example: Get live updates from backend (MQTT, WebSocket, Firestore, etc.)
    _simulateStatusUpdates();
  }

  void _simulateStatusUpdates() async {
    // ⚡ This is just simulation — replace with your listener
    for (int i = 0; i < statuses.length; i++) {
      await Future.delayed(const Duration(seconds: 3));
      setState(() {
        currentStep = i;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Track Order"),
        backgroundColor: const Color(0XFF0A9E04),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            Expanded(
              child: ListView.builder(
                itemCount: statuses.length,
                itemBuilder: (context, index) {
                  final isCompleted = index <= currentStep;

                  return Row(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Column(
                        children: [
                          // Circle with tanker icon or checkmark
                          Container(
                            width: 30,
                            height: 30,
                            decoration: BoxDecoration(
                              color: isCompleted ? Colors.green : Colors.grey[300],
                              shape: BoxShape.circle,
                            ),
                            child: Center(
                              child: index == currentStep
                                  ? const Icon(Icons.local_shipping)
                                  : Icon(
                                isCompleted
                                    ? Icons.check
                                    : Icons.circle_outlined,
                                size: 16,
                                color: isCompleted ? Colors.white : Colors.grey,
                              ),
                            ),
                          ),
                          if (index != statuses.length - 1)
                            Container(
                              width: 4,
                              height: 50,
                              color: index < currentStep ? Colors.green : Colors.grey[300],
                            ),
                        ],
                      ),
                      const SizedBox(width: 12),
                      Expanded(
                        child: Padding(
                          padding: const EdgeInsets.only(top: 4),
                          child: Text(
                            statuses[index],
                            style: TextStyle(
                              fontSize: 14,
                              fontWeight: isCompleted ? FontWeight.w600 : FontWeight.w400,
                              color: isCompleted ? Colors.black : Colors.grey[600],
                            ),
                          ),
                        ),
                      )
                    ],
                  );
                },
              ),
            ),

            // 🔸 Current status shown at bottom
            Container(
              width: double.infinity,
              padding: const EdgeInsets.all(12),
              decoration: BoxDecoration(
                color: Colors.green.withOpacity(0.1),
                borderRadius: BorderRadius.circular(8),
              ),
              child: Text(
                "Current Status: ${statuses[currentStep]}",
                style: const TextStyle(fontSize: 15, fontWeight: FontWeight.w600),
              ),
            ),
          ],
        ),
      ),
    );
  }
}