kent_logistics_app/lib/screens/order_track_screen.dart

// lib/screens/order_track_screen.dart
import 'dart:math';
import 'package:flutter/material.dart';
import '../services/dio_client.dart';
import '../services/order_service.dart';

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

  @override
  State<OrderTrackScreen> createState() => _OrderTrackScreenState();
}

class _OrderTrackScreenState extends State<OrderTrackScreen>
    with TickerProviderStateMixin {
  bool loading = true;

  Map<String, dynamic>? shipment;
  Map<String, dynamic> trackData = {};

  late final AnimationController progressController;
  late final AnimationController shipController;
  late final AnimationController timelineController;

  @override
  void initState() {
    super.initState();

    progressController = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 900),
    );

    shipController = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 1600),
    )..repeat(reverse: true);

    timelineController = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 1200),
    );

    WidgetsBinding.instance.addPostFrameCallback((_) => _loadData());
  }

  @override
  void dispose() {
    progressController.dispose();
    shipController.dispose();
    timelineController.dispose();
    super.dispose();
  }

  // ---------------- LOAD DATA ----------------
  Future<void> _loadData() async {
    if (!mounted) return;

    setState(() => loading = true);

    try {
      final service = OrderService(DioClient.getInstance(context));

      final results = await Future.wait([
        service.getShipment(widget.orderId)
            .catchError((_) => {"success": false}),
        service.trackOrder(widget.orderId)
            .catchError((_) => {"success": false}),
      ]);

      final shipRes = results[0] as Map;
      final trackRes = results[1] as Map;

      shipment = shipRes["success"] == true
          ? Map<String, dynamic>.from(shipRes["shipment"] ?? {})
          : null;

      trackData = trackRes["success"] == true
          ? Map<String, dynamic>.from(trackRes["track"] ?? {})
          : {};
    } catch (_) {}

    final target = _computeProgress();

    if (mounted) {
      try {
        await progressController.animateTo(
          target,
          curve: Curves.easeInOutCubic,
        );
        // Animate timeline
        timelineController.forward(from: 0);
      } catch (_) {}
    }

    if (mounted) setState(() => loading = false);
  }

  // ---------------- PROGRESS LOGIC ----------------
  double _computeProgress() {
    final status =
    (trackData["shipment_status"] ?? "").toString().toLowerCase();

    if (status.contains("delivered")) return 1.0;
    if (status.contains("dispatched")) return 0.85;
    if (status.contains("transit")) return 0.65;
    if (status.contains("loading")) return 0.40;
    if (status.contains("pending")) return 0.25;

    return 0.05;
  }

  String _fmt(dynamic v) {
    if (v == null) return "-";
    try {
      final d = DateTime.parse(v.toString()).toLocal();
      return "${d.day}/${d.month}/${d.year}";
    } catch (_) {
      return v.toString();
    }
  }

  // ---------------- SHIPMENT STEPS DATA ----------------
  final List<Map<String, dynamic>> _shipmentSteps = [
    {
      'title': 'Shipment Ready',
      'status_key': 'shipment_ready',
      'icon': Icons.inventory,
    },
    {
      'title': 'Export Custom',
      'status_key': 'export_custom',
      'icon': Icons.account_balance,
    },
    {
      'title': 'International Transit',
      'status_key': 'international_transit',
      'icon': Icons.flight,
    },
    {
      'title': 'Arrived at India',
      'status_key': 'arrived_india',
      'icon': Icons.flag,
    },
    {
      'title': 'Import Custom',
      'status_key': 'import_custom',
      'icon': Icons.account_balance_outlined,
    },
    {
      'title': 'Warehouse',
      'status_key': 'warehouse',
      'icon': Icons.warehouse,
    },
    {
      'title': 'Domestic Distribution',
      'status_key': 'domestic_distribution',
      'icon': Icons.local_shipping,
    },
    {
      'title': 'Out for Delivery',
      'status_key': 'out_for_delivery',
      'icon': Icons.delivery_dining,
    },
    {
      'title': 'Delivered',
      'status_key': 'delivered',
      'icon': Icons.verified,
    },
  ];

  // ---------------- STATUS MAPPING ----------------
  Map<String, int> _statusToIndex = {
    'shipment_ready': 0,
    'export_custom': 1,
    'international_transit': 2,
    'arrived_india': 3,
    'import_custom': 4,
    'warehouse': 5,
    'domestic_distribution': 6,
    'out_for_delivery': 7,
    'delivered': 8,
  };

  int _getCurrentStepIndex() {
    final status = (trackData["shipment_status"] ?? "").toString().toLowerCase();

    // Try to match exact status key first
    for (var entry in _statusToIndex.entries) {
      if (status.contains(entry.key)) {
        return entry.value;
      }
    }

    // Fallback mappings
    if (status.contains("delivered")) return 8;
    if (status.contains("dispatch") || status.contains("out for delivery")) return 7;
    if (status.contains("distribution")) return 6;
    if (status.contains("warehouse")) return 5;
    if (status.contains("import")) return 4;
    if (status.contains("arrived") || status.contains("india")) return 3;
    if (status.contains("transit")) return 2;
    if (status.contains("export")) return 1;
    if (status.contains("ready") || status.contains("pending")) return 0;

    return 0; // Default to first step
  }

  // ---------------- UI BUILD ----------------
  @override
  Widget build(BuildContext context) {
    final width = MediaQuery.of(context).size.width;
    final scale = (width / 430).clamp(0.75, 1.25);

    return Scaffold(
      appBar: AppBar(
        title: const Text("Shipment & Tracking"),
        elevation: 0.8,
      ),
      body: loading
          ? const Center(child: CircularProgressIndicator())
          : SingleChildScrollView(
        padding: EdgeInsets.all(16 * scale),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            _headerCard(scale),
            SizedBox(height: 16 * scale),

            _shipmentSummary(scale),
            SizedBox(height: 20 * scale),

            _trackingStatus(scale),
            SizedBox(height: 16 * scale),

            // Replace horizontal progress bar with vertical timeline
            _shipmentTimeline(scale),
          ],
        ),
      ),
    );
  }

  // ---------------- HEADER ----------------
  Widget _headerCard(double scale) {
    return Container(
      padding: EdgeInsets.all(14 * scale),
      decoration: _boxDecoration(scale),
      child: Row(
        children: [
          Container(
            padding: EdgeInsets.all(10 * scale),
            decoration: BoxDecoration(
              color: Colors.blue.shade50,
              borderRadius: BorderRadius.circular(12 * scale),
            ),
            child: Icon(Icons.local_shipping,
                color: Colors.blue, size: 28 * scale),
          ),
          SizedBox(width: 12 * scale),
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                "Order #${trackData['order_id'] ?? '-'}",
                style: TextStyle(
                    fontWeight: FontWeight.bold, fontSize: 16 * scale),
              ),
              SizedBox(height: 6 * scale),
              Text(
                trackData["shipment_status"] ?? "-",
                style: TextStyle(color: Colors.black54, fontSize: 13 * scale),
              ),
            ],
          )
        ],
      ),
    );
  }

  // ---------------- SHIPMENT SUMMARY ----------------
  Widget _shipmentSummary(double scale) {
    if (shipment == null) {
      return _simpleCard(scale, "Shipment not created yet");
    }

    return Container(
      padding: EdgeInsets.all(16 * scale),
      decoration: _boxDecoration(scale),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text("Shipment Summary",
              style:
              TextStyle(fontSize: 18 * scale, fontWeight: FontWeight.bold)),
          SizedBox(height: 12 * scale),

          Container(
            padding: EdgeInsets.all(12 * scale),
            decoration: BoxDecoration(
              color: Colors.blue.shade50,
              borderRadius: BorderRadius.circular(12 * scale),
            ),
            child: Row(
              children: [
                Icon(Icons.qr_code_2, color: Colors.blue, size: 22 * scale),
                SizedBox(width: 10 * scale),
                Text("Shipment ID: ${shipment!['shipment_id']}",
                    style: TextStyle(
                        fontWeight: FontWeight.bold, fontSize: 15 * scale)),
              ],
            ),
          ),

          SizedBox(height: 14 * scale),
          _twoCol("Status", shipment!['status'], scale),
          _twoCol("Shipment Date", _fmt(shipment!['shipment_date']), scale),
          _twoCol("Origin", shipment!['origin'], scale),
          _twoCol("Destination", shipment!['destination'], scale),
        ],
      ),
    );
  }

  Widget _simpleCard(double scale, String text) {
    return Container(
      padding: EdgeInsets.all(14 * scale),
      decoration: _boxDecoration(scale),
      child: Text(text,
          style: TextStyle(fontSize: 15 * scale, color: Colors.grey.shade700)),
    );
  }

  Widget _twoCol(String title, dynamic value, double scale) {
    return Padding(
      padding: EdgeInsets.symmetric(vertical: 6 * scale),
      child: Row(
        children: [
          Expanded(
            child: Text(title,
                style: TextStyle(color: Colors.grey, fontSize: 13 * scale)),
          ),
          Expanded(
            child: Text(
              value?.toString() ?? "-",
              textAlign: TextAlign.right,
              style:
              TextStyle(fontWeight: FontWeight.bold, fontSize: 13 * scale),
            ),
          ),
        ],
      ),
    );
  }

  // ---------------- TRACKING STATUS ----------------
  Widget _trackingStatus(double scale) {
    final delivered = _computeProgress() >= 1.0;

    return Container(
      padding:
      EdgeInsets.symmetric(vertical: 10 * scale, horizontal: 14 * scale),
      decoration: BoxDecoration(
        gradient: delivered
            ? const LinearGradient(colors: [Colors.green, Colors.lightGreen])
            : const LinearGradient(colors: [Colors.blue, Colors.purple]),
        borderRadius: BorderRadius.circular(40 * scale),
      ),
      child: Row(
        mainAxisSize: MainAxisSize.min,
        children: [
          Icon(
            delivered ? Icons.verified : Icons.local_shipping,
            color: Colors.white,
            size: 16 * scale,
          ),
          SizedBox(width: 8 * scale),
          Text(
            (trackData["shipment_status"] ?? "-").toString().toUpperCase(),
            style: TextStyle(
                color: Colors.white,
                fontWeight: FontWeight.bold,
                fontSize: 13 * scale),
          ),
        ],
      ),
    );
  }

  // ---------------- VERTICAL SHIPMENT TIMELINE ----------------
  Widget _shipmentTimeline(double scale) {
    final currentStepIndex = _getCurrentStepIndex();

    return Container(
      padding: EdgeInsets.all(16 * scale),
      decoration: _boxDecoration(scale),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            children: [
              Icon(Icons.timeline, color: Colors.blue, size: 20 * scale),
              SizedBox(width: 8 * scale),
              Text(
                "Shipment Progress",
                style: TextStyle(
                  fontWeight: FontWeight.bold,
                  fontSize: 17 * scale,
                ),
              ),
            ],
          ),
          SizedBox(height: 8 * scale),
          Text(
            "Tracking your package in real-time",
            style: TextStyle(
              color: Colors.grey.shade600,
              fontSize: 13 * scale,
            ),
          ),
          SizedBox(height: 16 * scale),

          // Timeline Container
          AnimatedBuilder(
            animation: timelineController,
            builder: (context, child) {
              return Opacity(
                opacity: timelineController.value,
                child: Transform.translate(
                  offset: Offset(0, 20 * (1 - timelineController.value)),
                  child: child,
                ),
              );
            },
            child: _buildTimeline(scale, currentStepIndex),
          ),
        ],
      ),
    );
  }

  Widget _buildTimeline(double scale, int currentStepIndex) {
    return Container(
      padding: EdgeInsets.only(left: 8 * scale),
      child: ListView.builder(
        shrinkWrap: true,
        physics: const NeverScrollableScrollPhysics(),
        itemCount: _shipmentSteps.length,
        itemBuilder: (context, index) {
          final step = _shipmentSteps[index];
          final isCompleted = index < currentStepIndex;
          final isCurrent = index == currentStepIndex;
          final isLast = index == _shipmentSteps.length - 1;

          return _buildTimelineStep(
            scale: scale,
            step: step,
            index: index,
            isCompleted: isCompleted,
            isCurrent: isCurrent,
            isLast: isLast,
            currentStepIndex: currentStepIndex,
          );
        },
      ),
    );
  }

  Widget _buildTimelineStep({
    required double scale,
    required Map<String, dynamic> step,
    required int index,
    required bool isCompleted,
    required bool isCurrent,
    required bool isLast,
    required int currentStepIndex,
  }) {
    return IntrinsicHeight(
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // Timeline Column (Line + Icon)
          Column(
            children: [
              // Top connector line (except for first item)
              if (index > 0)
                Container(
                  width: 2 * scale,
                  height: 24 * scale,
                  color: isCompleted ? Colors.green : Colors.grey.shade300,
                ),

              // Step Icon with animation
              _buildStepIcon(scale, isCompleted, isCurrent, step['icon']),

              // Bottom connector line (except for last item)
              if (!isLast)
                Container(
                  width: 2 * scale,
                  height: 24 * scale,
                  color: index < currentStepIndex ? Colors.green : Colors.grey.shade300,
                ),
            ],
          ),

          SizedBox(width: 16 * scale),

          // Step Content
          Expanded(
            child: Container(
              margin: EdgeInsets.only(bottom: 20 * scale),
              padding: EdgeInsets.all(14 * scale),
              decoration: BoxDecoration(
                color: isCurrent ? Colors.blue.shade50 : Colors.transparent,
                borderRadius: BorderRadius.circular(12 * scale),
                border: isCurrent
                    ? Border.all(color: Colors.blue.shade200, width: 1.5 * scale)
                    : null,
              ),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Row(
                    children: [
                      Expanded(
                        child: Text(
                          step['title'],
                          style: TextStyle(
                            fontSize: 15 * scale,
                            fontWeight: FontWeight.w600,
                            color: isCurrent
                                ? Colors.blue.shade800
                                : isCompleted
                                ? Colors.green.shade800
                                : Colors.grey.shade800,
                          ),
                        ),
                      ),
                      if (isCompleted)
                        Icon(Icons.check_circle,
                            color: Colors.green,
                            size: 18 * scale
                        ),
                    ],
                  ),

                  SizedBox(height: 4 * scale),

                  // Optional timestamp - you can customize this with actual timestamps from API
                  _buildStepTimestamp(scale, step, isCompleted, isCurrent, index),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildStepIcon(double scale, bool isCompleted, bool isCurrent, IconData iconData) {
    // Animation for current step
    if (isCurrent) {
      return AnimatedBuilder(
        animation: shipController,
        builder: (context, child) {
          return Container(
            width: 32 * scale * (1 + 0.2 * shipController.value),
            height: 32 * scale * (1 + 0.2 * shipController.value),
            decoration: BoxDecoration(
              shape: BoxShape.circle,
              color: Colors.blue.shade50,
              border: Border.all(
                color: Colors.blue,
                width: 2 * scale,
              ),
            ),
            child: Icon(
              iconData,
              color: Colors.blue,
              size: 18 * scale,
            ),
          );
        },
      );
    }

    // Completed step
    if (isCompleted) {
      return Container(
        width: 32 * scale,
        height: 32 * scale,
        decoration: BoxDecoration(
          shape: BoxShape.circle,
          color: Colors.green.shade50,
          border: Border.all(
            color: Colors.green,
            width: 2 * scale,
          ),
        ),
        child: Icon(
          Icons.check,
          color: Colors.green,
          size: 18 * scale,
        ),
      );
    }

    // Upcoming step
    return Container(
      width: 32 * scale,
      height: 32 * scale,
      decoration: BoxDecoration(
        shape: BoxShape.circle,
        color: Colors.grey.shade100,
        border: Border.all(
          color: Colors.grey.shade400,
          width: 2 * scale,
        ),
      ),
      child: Icon(
        iconData,
        color: Colors.grey.shade600,
        size: 18 * scale,
      ),
    );
  }

  Widget _buildStepTimestamp(double scale, Map<String, dynamic> step,
      bool isCompleted, bool isCurrent, int index) {
    // You can replace this with actual timestamps from your API
    final now = DateTime.now();
    final estimatedTime = now.add(Duration(days: index));

    String statusText = isCurrent
        ? "In progress"
        : isCompleted
        ? "Completed"
        : "Estimated ${estimatedTime.day}/${estimatedTime.month}";

    Color statusColor = isCurrent
        ? Colors.blue.shade600
        : isCompleted
        ? Colors.green.shade600
        : Colors.grey.shade600;

    return Row(
      children: [
        Icon(
          isCurrent ? Icons.access_time : Icons.calendar_today,
          color: statusColor,
          size: 14 * scale,
        ),
        SizedBox(width: 4 * scale),
        Text(
          statusText,
          style: TextStyle(
            fontSize: 12 * scale,
            color: statusColor,
            fontWeight: FontWeight.w500,
          ),
        ),
      ],
    );
  }

  BoxDecoration _boxDecoration(double scale) {
    return BoxDecoration(
      color: Colors.white,
      borderRadius: BorderRadius.circular(12 * scale),
      boxShadow: [
        BoxShadow(
          color: Colors.black12.withOpacity(0.05),
          blurRadius: 10 * scale,
          offset: Offset(0, 4 * scale),
        )
      ],
    );
  }
}