/**
 * @license
 * SPDX-License-Identifier: Apache-2.0
 */

import React, { useState, useEffect } from 'react';
import {
  ShoppingBag,
  Truck,
  CheckCircle2,
  Clock,
  UserCheck,
  MapPin,
  TrendingUp,
  Plus,
  ChevronRight,
  Package,
  ArrowRight,
  AlertCircle,
  Clock4,
  Search,
  Check,
  Calendar,
  X
} from 'lucide-react';
import { CustomerOrder } from '../types';
import {
  useFiestaDeliveries,
  useFiestaDeliverySummary,
  useFiestaRiders,
} from '../services/fiestaQueries';
import { FIESTA_TENANT_ID, num as fnum, str as fstr, ymd } from '../services/fiestaApi';
import { deliveryRowToOrder } from '../services/fiestaMappers';

interface OrdersDeliveriesViewProps {
  searchQuery?: string;
  isCoimbatoreView?: boolean;
  locationid?: number;
}

interface DeliveryExecutive {
  id: string;
  name: string;
  phone: string;
  status: 'Active Duty' | 'Idle' | 'Offline';
  rating: number;
  completedToday: number;
  currentZone: string;
  avatar: string;
}

const RIDER_AVATARS = [
  'https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&w=150&q=80',
  'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=150&q=80',
  'https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&w=150&q=80',
];

function riderRowToExecutive(row: Record<string, unknown>, idx: number): DeliveryExecutive {
  return {
    id: `DE-${fstr(row.userid) || idx}`,
    name: fstr(row.fullname) || `${fstr(row.firstname)} ${fstr(row.lastname)}`.trim() || 'Rider',
    phone: fstr(row.contactno) || '—',
    status: fstr(row.starttime) ? 'Active Duty' : 'Idle',
    rating: 4.7,
    completedToday: fnum(row.completed) || fnum(row.deliverycount),
    currentZone: fstr(row.city) || fstr(row.vehiclename) || fstr(row.vehicleno) || 'Coimbatore',
    avatar: RIDER_AVATARS[idx % RIDER_AVATARS.length],
  };
}

export default function OrdersDeliveriesView({ searchQuery = '', isCoimbatoreView = false, locationid }: OrdersDeliveriesViewProps) {
  // ── Live deliveries / fleet (Fiesta) ──────────────────────────────────────
  // Order feed + dispatch controls run off the live deliveries board; the KPI
  // strip uses the delivery summary; the fleet panel uses the active riders.
  // A date-range filter lets the user view orders/deliveries day-wise.
  const today = new Date();
  const monthStart = new Date(today.getFullYear(), today.getMonth(), 1);
  const [fromdate, setFromdate] = useState<string>(ymd(monthStart));
  const [todate, setTodate] = useState<string>(ymd(today));

  // Quick-range presets (computed off the current day; no Date.now in render path).
  const dayOffset = (n: number) => {
    const d = new Date();
    d.setDate(d.getDate() - n);
    return ymd(d);
  };
  const presets: Array<{ key: string; label: string; from: string; to: string }> = [
    { key: 'today', label: 'Today', from: ymd(today), to: ymd(today) },
    { key: 'yesterday', label: 'Yesterday', from: dayOffset(1), to: dayOffset(1) },
    { key: '7d', label: 'Last 7 Days', from: dayOffset(6), to: ymd(today) },
    { key: '30d', label: 'Last 30 Days', from: dayOffset(29), to: ymd(today) },
    { key: 'month', label: 'This Month', from: ymd(monthStart), to: ymd(today) },
  ];
  const activePreset = presets.find((p) => p.from === fromdate && p.to === todate)?.key ?? 'custom';

  const deliveriesQ = useFiestaDeliveries({ tenantid: FIESTA_TENANT_ID, fromdate, todate });
  const summaryQ = useFiestaDeliverySummary({ tenantid: FIESTA_TENANT_ID, fromdate, todate });
  const ridersQ = useFiestaRiders({ tenantid: FIESTA_TENANT_ID });

  const [orders, setOrders] = useState<CustomerOrder[]>([]);
  const [executives, setExecutives] = useState<DeliveryExecutive[]>([]);
  const [selectedOrder, setSelectedOrder] = useState<CustomerOrder | null>(null);
  const [filterStatus, setFilterStatus] = useState<string>('ALL');
  const [localSearch, setLocalSearch] = useState('');

  // Seed local state once live data arrives so existing dispatch/create handlers
  // continue to mutate in-session.
  useEffect(() => {
    if (deliveriesQ.data) {
      const mapped = deliveriesQ.data.map(deliveryRowToOrder);
      setOrders(mapped);
      // Keep the current selection only if it's still in the new range; otherwise
      // fall back to the first order so the detail panel stays in sync.
      setSelectedOrder((prev) =>
        (prev && mapped.some((o) => o.id === prev.id)) ? prev : mapped[0] ?? null,
      );
    }
  }, [deliveriesQ.data]);

  useEffect(() => {
    if (ridersQ.data) setExecutives(ridersQ.data.map(riderRowToExecutive));
  }, [ridersQ.data]);

  const summary = summaryQ.data;

  // Local filtered list of orders
  const storeOrders = locationid ? orders.filter(o => o.locationid === locationid) : orders;

  const filteredOrdersList = storeOrders.filter(o => {
    const term = (localSearch || searchQuery).toLowerCase();
    const matchesSearch = o.id.toLowerCase().includes(term) ||
                          o.customerName.toLowerCase().includes(term) ||
                          o.address.toLowerCase().includes(term);
    const matchesFilter = filterStatus === 'ALL' || o.status === filterStatus;
    return matchesSearch && matchesFilter;
  });

  // Calculate dynamic stats for metrics cards based on filtered storeOrders
  const totalDeliveriesCount = storeOrders.length;
  const pendingFulfillmentCount = storeOrders.filter(o => o.status === 'PROCESSING' || o.status === 'CONFIRMED').length;
  const activeDispatchCount = storeOrders.filter(o => o.status === 'OUT_FOR_DELIVERY').length;
  const completedDeliveriesCount = storeOrders.filter(o => o.status === 'DELIVERED').length;

  const MOCK_NAMES = ['Aravind Swamy', 'Karthik Raja', 'Priya Mani', 'Meera Jasmine', 'Sanjay Dutt', 'Divya Spandana', 'Vijay Sethupathi', 'Nayan Thara'];
  const MOCK_STREETS = ['Avarampalayam Rd', 'DB Road', 'Cross Cut Road', 'Avinashi Road', 'Trichy Road', 'NSR Road', 'Sathy Road', 'Marudhamalai Road'];
  const MOCK_ITEMS = [
    { name: 'Tata Salt Premium Iodized 1kg', price: 28 },
    { name: 'Gold Winner Sunflower Oil 1L', price: 145 },
    { name: 'Britannia Marie Gold Biscuit 250g', price: 35 },
    { name: 'MTR Sambar Powder 200g', price: 85 },
    { name: 'Aavin Salted Butter 500g', price: 260 },
    { name: 'Ponni Boiled Rice 5kg', price: 380 },
    { name: 'Fresh Ooty Carrots 500g', price: 45 },
    { name: 'Nescafe Classic Coffee 100g', price: 185 },
  ];

  const handleCreateMockOrder = () => {
    const randomName = MOCK_NAMES[Math.floor(Math.random() * MOCK_NAMES.length)];
    const randomStreet = MOCK_STREETS[Math.floor(Math.random() * MOCK_STREETS.length)];
    const numItems = Math.floor(Math.random() * 3) + 1; // 1 to 3 items
    const selectedItems = [];
    let amount = 0;
    for (let k = 0; k < numItems; k++) {
      const it = MOCK_ITEMS[Math.floor(Math.random() * MOCK_ITEMS.length)];
      const qty = Math.floor(Math.random() * 2) + 1;
      selectedItems.push({ name: it.name, quantity: qty, price: it.price });
      amount += it.price * qty;
    }
    const newId = `ORD-${Math.floor(100000 + Math.random() * 900000)}`;
    const newOrder: CustomerOrder = {
      id: newId,
      customerName: randomName,
      phone: `9${Math.floor(100000000 + Math.random() * 900000000)}`,
      address: `${Math.floor(10 + Math.random() * 190)}, ${randomStreet}, Coimbatore`,
      items: selectedItems,
      amount,
      time: new Date().toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' }),
      status: 'PROCESSING',
      assignedRider: 'Pending Assignment',
      hub: locationid ? `Outlet Node #${locationid}` : 'Coimbatore Hub',
      locationid: locationid ?? 1097,
    };
    setOrders(prev => [newOrder, ...prev]);
    setSelectedOrder(newOrder);
  };

  const handleUpdateStatus = (newStatus: CustomerOrder['status']) => {
    if (!selectedOrder) return;
    setOrders(prev => prev.map(o => {
      if (o.id === selectedOrder.id) {
        const updated = { ...o, status: newStatus };
        setSelectedOrder(updated);
        return updated;
      }
      return o;
    }));
  };

  const handleAssignRider = (riderName: string) => {
    if (!selectedOrder) return;
    setOrders(prev => prev.map(o => {
      if (o.id === selectedOrder.id) {
        const updated = { 
          ...o, 
          assignedRider: riderName,
          status: o.status === 'PROCESSING' ? 'CONFIRMED' : o.status
        };
        setSelectedOrder(updated);
        return updated;
      }
      return o;
    }));
  };

  return (
    <div className="space-y-lg animate-in fade-in duration-500">
      
      {/* View Header with Statistics Overview */}
      <div className="flex flex-col md:flex-row md:items-center justify-between gap-md border-b border-[#e2e8f0] pb-xl">
        <div>
          <h1 className="font-sans font-bold text-2xl tracking-tight text-[#0f172a]">
            Orders & Delivery Operations
          </h1>
          <p className="text-zinc-500 font-sans text-xs mt-1">
            Real-time tracking of app orders, dispatch queues, and active delivery partners across Coimbatore regional sub-hubs.
          </p>
          <div className="mt-1.5">
            {deliveriesQ.isLoading ? (
              <span className="inline-flex items-center gap-1 text-[10px] font-semibold text-zinc-400 uppercase tracking-wide">
                <span className="w-1.5 h-1.5 rounded-full bg-zinc-300 animate-pulse" /> Loading live deliveries…
              </span>
            ) : deliveriesQ.isError ? (
              <span className="inline-flex items-center gap-1 text-[10px] font-semibold text-rose-600 uppercase tracking-wide">
                <span className="w-1.5 h-1.5 rounded-full bg-rose-500" /> Live data unavailable
              </span>
            ) : (
              <span className="inline-flex items-center gap-1 text-[10px] font-semibold text-emerald-600 uppercase tracking-wide">
                <span className="w-1.5 h-1.5 rounded-full bg-emerald-500" /> Live · {orders.length} deliveries · {executives.length} riders
              </span>
            )}
          </div>
        </div>
      </div>

      {/* Top Level Delivery Performance Indicators */}
      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-gutter font-sans">
        
        <div className="bg-white border border-[#e2e8f0] p-md rounded-xl flex items-center gap-md shadow-sm">
          <div className="p-2 bg-purple-50 text-[#581c87] rounded-lg">
            <ShoppingBag size={20} />
          </div>
          <div>
            <p className="text-[10px] text-zinc-400 uppercase tracking-wider font-bold">Deliveries in Range</p>
            <p className="font-sans font-bold text-lg text-zinc-800">{totalDeliveriesCount.toLocaleString('en-IN')} total</p>
            <p className="text-[10px] text-emerald-600 font-semibold mt-0.5">{fromdate === todate ? fromdate : `${fromdate} → ${todate}`}</p>
          </div>
        </div>

        <div className="bg-white border border-[#e2e8f0] p-md rounded-xl flex items-center gap-md shadow-sm">
          <div className="p-2 bg-amber-50 text-amber-600 rounded-lg">
            <Clock size={20} />
          </div>
          <div>
            <p className="text-[10px] text-zinc-400 uppercase tracking-wider font-bold">Pending Fulfilment</p>
            <p className="font-sans font-bold text-lg text-zinc-800">
              {pendingFulfillmentCount + activeDispatchCount} active
            </p>
            <p className="text-[10px] text-amber-600 font-semibold mt-0.5">Awaiting dispatch / in transit</p>
          </div>
        </div>

        <div className="bg-white border border-[#e2e8f0] p-md rounded-xl flex items-center gap-md shadow-sm">
          <div className="p-2 bg-emerald-50 text-emerald-600 rounded-lg">
            <Truck size={20} />
          </div>
          <div>
            <p className="text-[10px] text-zinc-400 uppercase tracking-wider font-bold">Successful Deliveries</p>
            <p className="font-sans font-bold text-lg text-zinc-800">
              {completedDeliveriesCount} done
            </p>
            <p className="text-[10px] text-[#581c87] font-semibold mt-0.5">{locationid ? 'At this location' : 'Across all locations'}</p>
          </div>
        </div>

        <div className="bg-white border border-[#e2e8f0] p-md rounded-xl flex items-center gap-md shadow-sm">
          <div className="p-2 bg-purple-50 text-purple-600 rounded-lg">
            <UserCheck size={20} />
          </div>
          <div>
            <p className="text-[10px] text-zinc-400 uppercase tracking-wider font-bold">Active Delivery Fleet</p>
            <p className="font-sans font-bold text-lg text-zinc-800">
              {executives.filter(e => e.status !== 'Offline').length} partners
            </p>
            <p className="text-[10px] text-purple-600 font-semibold mt-0.5">{executives.length} riders registered</p>
          </div>
        </div>

      </div>

      {/* Day-wise date filter — drives the live deliveries + summary queries */}
      <div className="bg-white border border-[#e2e8f0] rounded-xl p-md shadow-sm flex flex-col lg:flex-row lg:items-center justify-between gap-md">
        <div className="flex items-center gap-sm flex-wrap">
          <span className="flex items-center gap-1.5 text-[10px] font-bold text-zinc-400 uppercase tracking-widest pr-1">
            <Calendar size={13} className="text-[#581c87]" /> View
          </span>
          {presets.map((p) => (
            <button
              key={p.key}
              onClick={() => { setFromdate(p.from); setTodate(p.to); }}
              className={`px-3 py-1.5 rounded-lg text-[11px] font-bold transition-all border cursor-pointer ${
                activePreset === p.key
                  ? 'bg-[#581c87] text-white border-[#581c87] shadow-sm'
                  : 'bg-white text-zinc-600 border-[#e2e8f0] hover:bg-zinc-50'
              }`}
            >
              {p.label}
            </button>
          ))}
        </div>

        <div className="flex items-center gap-sm text-xs">
          <div className="flex items-center gap-1.5">
            <label className="text-[10px] font-bold text-zinc-400 uppercase tracking-wider">From</label>
            <input
              type="date"
              value={fromdate}
              max={todate}
              onChange={(e) => setFromdate(e.target.value)}
              className="border border-[#e2e8f0] rounded-lg px-2 py-1.5 text-zinc-700 font-medium outline-none focus:ring-1 focus:ring-[#581c87] cursor-pointer"
            />
          </div>
          <span className="text-zinc-300">→</span>
          <div className="flex items-center gap-1.5">
            <label className="text-[10px] font-bold text-zinc-400 uppercase tracking-wider">To</label>
            <input
              type="date"
              value={todate}
              min={fromdate}
              max={ymd(today)}
              onChange={(e) => setTodate(e.target.value)}
              className="border border-[#e2e8f0] rounded-lg px-2 py-1.5 text-zinc-700 font-medium outline-none focus:ring-1 focus:ring-[#581c87] cursor-pointer"
            />
          </div>
        </div>
      </div>

      {/* Main interactive segment splits */}
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-gutter text-xs font-sans">
        
        {/* Left List of Customer App Orders */}
        <div className="lg:col-span-2 space-y-md">
          <div className="bg-white border border-[#e2e8f0] rounded-xl shadow-sm overflow-hidden flex flex-col justify-between">
            <div>
              <div className="p-md border-b border-[#e2e8f0] bg-[#f8fafc] flex flex-col gap-md">
                <div className="flex flex-col sm:flex-row justify-between sm:items-center gap-sm">
                  <div>
                    <h4 className="font-sans font-bold text-sm text-[#0f172a]">
                      Customer Orders Feed ({filteredOrdersList.length})
                    </h4>
                    <p className="text-[10px] text-zinc-400 font-medium mt-0.5">Interactive list of customer purchases made via client app</p>
                  </div>

                  <button
                    onClick={handleCreateMockOrder}
                    className="bg-[#581c87] text-white px-3 py-1.5 rounded-lg text-[10px] font-bold uppercase tracking-wider flex items-center justify-center gap-1 cursor-pointer hover:bg-purple-800 transition shadow-sm"
                  >
                    <Plus size={12} />
                    Create Simulated Order
                  </button>
                </div>

                <div className="flex flex-col sm:flex-row items-center gap-sm w-full">
                  {/* Local Search Input */}
                  <div className="relative w-full sm:max-w-xs">
                    <Search size={13} className="absolute left-3 top-1/2 -translate-y-1/2 text-zinc-400" />
                    <input
                      type="text"
                      placeholder="Search orders by customer, street, ID..."
                      value={localSearch}
                      onChange={(e) => setLocalSearch(e.target.value)}
                      className="w-full pl-8 pr-4 py-1.5 border border-[#e2e8f0] rounded-lg text-[11px] outline-none bg-white focus:ring-1 focus:ring-[#581c87] transition-all"
                    />
                  </div>

                  {/* Filter Status buttons */}
                  <div className="flex gap-1 overflow-x-auto w-full sm:w-auto">
                    {['ALL', 'PROCESSING', 'CONFIRMED', 'OUT_FOR_DELIVERY', 'DELIVERED'].map((st) => (
                      <button
                        key={st}
                        onClick={() => setFilterStatus(st)}
                        className={`px-2 py-1.5 rounded text-[9px] font-bold uppercase transition-all border outline-none cursor-pointer whitespace-nowrap ${
                          filterStatus === st 
                            ? 'bg-[#581c87] text-white border-[#581c87] shadow-sm' 
                            : 'bg-white text-zinc-500 border-[#e2e8f0] hover:bg-zinc-50'
                        }`}
                      >
                        {st.replace(/_/g, ' ')}
                      </button>
                    ))}
                  </div>
                </div>
              </div>

              {/* Order item rows */}
              <div className="divide-y divide-[#f1f5f9] max-h-[480px] overflow-y-auto">
                {filteredOrdersList.length === 0 ? (
                  <div className="p-xl text-center text-zinc-400 font-medium">
                    No orders matching status filter found. Try another query or place a mock delivery item.
                  </div>
                ) : (
                  filteredOrdersList.map(order => (
                    <div 
                      key={order.id}
                      onClick={() => setSelectedOrder(order)}
                      className={`p-md flex items-center justify-between hover:bg-zinc-50 border-l-4 transition-all cursor-pointer ${
                        selectedOrder?.id === order.id ? 'bg-[#faf5ff]/50 border-[#581c87]' : 'border-transparent'
                      }`}
                    >
                      <div className="space-y-1">
                        <div className="flex items-center gap-sm">
                          <span className="font-bold text-zinc-700">{order.customerName}</span>
                          <span className="text-[10px] text-zinc-400">• {order.time}</span>
                        </div>
                        <p className="text-zinc-500 truncate max-w-[24rem]">{order.address}</p>
                        <div className="flex gap-sm py-1 items-center">
                          <span className="bg-[#f1f5f9] px-1.5 py-0.5 rounded text-[9px] font-bold text-zinc-500 uppercase">{order.hub}</span>
                          <span className="text-[9px] text-[#581c87] font-bold">{order.itemCount ?? order.items.length} Items</span>
                        </div>
                      </div>

                      <div className="text-right space-y-1">
                        <p className="font-bold font-mono text-sm text-[#0f172a]">₹{order.amount.toLocaleString()}</p>
                        <span className={`px-2 py-0.5 rounded text-[9px] font-bold tracking-wider inline-block uppercase ${
                          order.status === 'DELIVERED'
                            ? 'bg-emerald-50 text-emerald-600 border border-emerald-100'
                            : order.status === 'OUT_FOR_DELIVERY'
                            ? 'bg-purple-50 text-purple-700 border border-purple-100'
                            : order.status === 'CONFIRMED'
                            ? 'bg-amber-50 text-amber-600 border border-amber-100 animate-pulse'
                            : 'bg-zinc-100 text-zinc-650 border border-zinc-200'
                        }`}>
                          {order.status.replace(/_/g, ' ')}
                        </span>
                      </div>
                    </div>
                  ))
                )}
              </div>
            </div>
          </div>

          {/* Delivery Executives Fleet Section */}
          <div className="bg-white border border-[#e2e8f0] p-md rounded-xl shadow-sm">
            <span className="text-[10px] font-sans font-bold text-zinc-400 uppercase tracking-widest block pb-xs mb-md border-b border-[#f1f5f9]">
              Coimbatore Delivery Executive Fleet status
            </span>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-sm">
              {executives.map((ex) => (
                <div key={ex.id} className="p-sm border border-[#e2e8f0]/80 rounded-xl bg-[#f8fafc]/40 flex justify-between items-center">
                  <div className="flex items-center gap-sm">
                    <img 
                      src={ex.avatar} 
                      alt={ex.name} 
                      referrerPolicy="no-referrer"
                      className="w-10 h-10 rounded-full object-cover border border-zinc-200 shrink-0"
                    />
                    <div>
                      <p className="font-semibold text-zinc-800">{ex.name}</p>
                      <p className="text-[10px] text-zinc-400 font-medium">Zone: <strong>{ex.currentZone}</strong> • Rated ★{ex.rating}</p>
                    </div>
                  </div>

                  <div className="text-right">
                    <span className={`px-1.5 py-0.5 rounded text-[9px] font-bold uppercase inline-block ${
                      ex.status === 'Active Duty' ? 'bg-sky-50 text-sky-600 border border-sky-100' : ex.status === 'Idle' ? 'bg-emerald-50 text-emerald-600 border border-emerald-100' : 'bg-zinc-100 text-zinc-400'
                    }`}>
                      {ex.status}
                    </span>
                    <p className="text-[10px] text-zinc-500 font-semibold mt-1">Completed: {ex.completedToday}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
             {selectedOrder ? (
            <div className="bg-white border border-[#e2e8f0] rounded-xl p-md shadow-sm space-y-md animate-in zoom-in-95 duration-150">
              <span className="text-[10px] font-sans font-bold text-zinc-400 uppercase tracking-widest block pb-xs border-b border-[#f1f5f9]">
                Order Details: {selectedOrder.id}
              </span>

              {/* Customer summary */}
              <div className="p-sm bg-[#f8fafc] rounded-lg border border-[#e2e8f0]/50 space-y-xs">
                <div className="flex justify-between font-semibold">
                  <span>Customer Name</span>
                  <span className="text-zinc-700">{selectedOrder.customerName}</span>
                </div>
                <div className="flex justify-between font-semibold">
                  <span>Contact info</span>
                  <span className="text-zinc-600 font-mono">{selectedOrder.phone}</span>
                </div>
                <div>
                  <span className="text-[10px] text-zinc-400 font-bold uppercase block mt-1">Delivery Address</span>
                  <p className="text-zinc-700 mt-0.5 leading-relaxed font-medium">{selectedOrder.address}</p>
                </div>
              </div>

              {/* Category items description list */}
              <div>
                <span className="text-[10px] text-zinc-400 font-bold uppercase tracking-wide block mb-sm">Ordered Grocery basket Items:</span>
                <div className="divide-y divide-[#f1f5f9] bg-zinc-50/50 p-2.5 rounded-lg border border-[#e2e8f0]/40">
                  {selectedOrder.items.length === 0 && (
                    <div className="py-2 flex justify-between items-center text-xs text-zinc-500">
                      <span className="font-medium">{selectedOrder.itemCount ?? 0} line item(s)</span>
                      <span className="text-[10px] text-zinc-400">Detail lines not loaded on board view</span>
                    </div>
                  )}
                  {selectedOrder.items.map((item, idx) => (
                    <div key={idx} className="py-2 flex justify-between items-center text-xs">
                      <div>
                        <p className="font-bold text-[#0f172a]">{item.name}</p>
                        <p className="text-[10px] text-zinc-400">Qty: {item.quantity} x ₹{item.price}</p>
                      </div>
                      <span className="font-bold font-mono text-zinc-700">₹{(item.price * Number(item.quantity))}</span>
                    </div>
                  ))}
                  <div className="pt-2 flex justify-between items-center font-bold text-sm text-[#581c87] border-t border-dashed border-[#e2e8f0]">
                    <span>Grand Total Invoice</span>
                    <span className="font-mono">₹{selectedOrder.amount.toLocaleString()}</span>
                  </div>
                </div>
              </div>

              {/* Interactive Status advancement controls */}
              <div className="pt-xs space-y-sm">
                <span className="text-[9px] font-sans font-bold text-zinc-400 uppercase tracking-widest block pb-xs border-b border-[#f1f5f9]">OPERATIONAL CONTROL</span>
                {selectedOrder.status === 'PROCESSING' && (
                  <button
                    onClick={() => handleUpdateStatus('CONFIRMED')}
                    className="w-full bg-amber-500 hover:bg-amber-600 text-white font-bold text-[11px] py-2 rounded-xl transition duration-150 shadow-sm flex items-center justify-center gap-1 cursor-pointer border-none"
                  >
                    <Check size={14} /> Pack & Bag Order
                  </button>
                )}
                {selectedOrder.status === 'CONFIRMED' && (
                  <button
                    onClick={() => {
                      if (selectedOrder.assignedRider === 'Pending Assignment') {
                        alert('Please assign a delivery partner from the fleet roster first.');
                        return;
                      }
                      handleUpdateStatus('OUT_FOR_DELIVERY');
                    }}
                    className="w-full bg-purple-600 hover:bg-purple-700 text-white font-bold text-[11px] py-2 rounded-xl transition duration-150 shadow-sm flex items-center justify-center gap-1 cursor-pointer border-none"
                  >
                    <Truck size={14} /> Dispatch Rider
                  </button>
                )}
                {selectedOrder.status === 'OUT_FOR_DELIVERY' && (
                  <button
                    onClick={() => handleUpdateStatus('DELIVERED')}
                    className="w-full bg-emerald-600 hover:bg-emerald-700 text-white font-bold text-[11px] py-2 rounded-xl transition duration-150 shadow-sm flex items-center justify-center gap-1 cursor-pointer border-none"
                  >
                    <CheckCircle2 size={14} /> Verify Delivery Handover
                  </button>
                )}
                {selectedOrder.status === 'DELIVERED' && (
                  <div className="bg-emerald-50 border border-emerald-250 text-emerald-800 font-bold text-[10px] py-2.5 rounded-xl text-center flex items-center justify-center gap-1 select-none">
                    <CheckCircle2 size={13} className="text-emerald-600" /> Order Completed Successfully
                  </div>
                )}
              </div>

              {/* Active Rider Assignment (only if not delivered) */}
              {selectedOrder.status !== 'DELIVERED' && (
                <div className="space-y-sm pt-xs">
                  <div className="flex justify-between items-center border-b border-[#f1f5f9] pb-xs">
                    <span className="text-[9px] font-sans font-bold text-zinc-400 uppercase tracking-widest">ASSIGN DELIVERY EXECUTIVE</span>
                    <span className="text-[9px] text-[#581c87] font-bold">Fleet Roster</span>
                  </div>
                  <div className="space-y-1.5 max-h-[140px] overflow-y-auto pr-1">
                    {executives.length === 0 ? (
                      <p className="text-[10px] text-zinc-405">No riders currently available.</p>
                    ) : (
                      executives.map(ex => {
                        const isAssigned = selectedOrder.assignedRider === ex.name;
                        return (
                          <button
                            key={ex.id}
                            type="button"
                            onClick={() => handleAssignRider(ex.name)}
                            className={`w-full p-2 border rounded-xl flex items-center justify-between text-left transition-all cursor-pointer ${
                              isAssigned 
                                ? 'bg-purple-50 border-[#581c87] text-[#581c87] font-semibold' 
                                : 'bg-[#f8fafc]/50 hover:bg-zinc-55 border-[#e2e8f0] text-zinc-700'
                            }`}
                          >
                            <div className="flex items-center gap-2">
                              <img src={ex.avatar} alt={ex.name} referrerPolicy="no-referrer" className="w-6 h-6 rounded-full object-cover border border-zinc-200" />
                              <div>
                                <p className="text-[10px] font-bold leading-tight">{ex.name}</p>
                                <p className="text-[9px] text-zinc-450 leading-none">{ex.currentZone} • ★{ex.rating}</p>
                              </div>
                            </div>
                            <span className={`text-[8px] font-bold uppercase px-1.5 py-0.5 rounded ${
                              isAssigned 
                                ? 'bg-[#581c87] text-white' 
                                : 'bg-zinc-200 text-zinc-650'
                            }`}>
                              {isAssigned ? 'Assigned' : 'Assign'}
                            </span>
                          </button>
                        );
                      })
                    )}
                  </div>
                </div>
              )}

              {/* Simulated GPS map tracking path */}
              {selectedOrder.status === 'OUT_FOR_DELIVERY' && (
                <div className="space-y-xs pt-xs">
                  <span className="text-[9px] font-sans font-bold text-zinc-400 uppercase tracking-widest block">
                    LIVE GPS ROUTE TRACKER
                  </span>
                  <div className="relative overflow-hidden rounded-xl border border-zinc-200 bg-zinc-950 p-4 h-40 text-white flex flex-col justify-between font-sans shadow-inner select-none">
                    {/* Grid background lines */}
                    <div className="absolute inset-0 opacity-10 bg-[linear-gradient(to_right,#808080_1px,transparent_1px),linear-gradient(to_bottom,#808080_1px,transparent_1px)] bg-[size:12px_18px]" />
                    
                    <svg className="absolute inset-0 w-full h-full" xmlns="http://www.w3.org/2000/svg">
                      <defs>
                        <linearGradient id="route-grad" x1="0%" y1="0%" x2="100%" y2="100%">
                          <stop offset="0%" stopColor="#c084fc" />
                          <stop offset="100%" stopColor="#818cf8" />
                        </linearGradient>
                      </defs>
                      {/* Route path line */}
                      <path 
                        d="M 30 110 C 60 70, 110 110, 160 40" 
                        fill="none" 
                        stroke="#1e293b" 
                        strokeWidth="4" 
                        strokeLinecap="round" 
                      />
                      <path 
                        d="M 30 110 C 60 70, 110 110, 160 40" 
                        fill="none" 
                        stroke="url(#route-grad)" 
                        strokeWidth="4" 
                        strokeLinecap="round" 
                        strokeDasharray="200"
                        strokeDashoffset="200"
                        style={{
                          animation: 'dash 6s linear infinite'
                        }}
                      />
                      {/* Hub Marker */}
                      <circle cx="30" cy="110" r="5" fill="#c084fc" className="animate-pulse" />
                      <circle cx="30" cy="110" r="3" fill="#a855f7" />
                      {/* Destination Marker */}
                      <circle cx="160" cy="40" r="5" fill="#f43f5e" className="animate-ping" />
                      <circle cx="160" cy="40" r="3" fill="#e11d48" />
                    </svg>

                    <style dangerouslySetInnerHTML={{__html: `
                      @keyframes dash {
                        to {
                          stroke-dashoffset: 0;
                        }
                      }
                    `}} />

                    {/* Map overlays */}
                    <div className="z-10 flex justify-between items-start">
                      <div className="bg-zinc-900/90 backdrop-blur-md px-2 py-0.5 rounded border border-zinc-800 text-[8px] font-bold text-zinc-300">
                        GPS ACTIVE: IN TRANSIT
                      </div>
                      <div className="bg-zinc-900/90 backdrop-blur-md px-2 py-0.5 rounded border border-zinc-800 text-[8px] font-bold text-[#c084fc] flex items-center gap-1">
                        <span className="w-1 h-1 rounded-full bg-purple-500 animate-ping" />
                        ETA 9 MINS
                      </div>
                    </div>

                    <div className="z-10 bg-zinc-900/95 backdrop-blur-md p-2 rounded-lg border border-zinc-800 flex items-center justify-between">
                      <div>
                        <p className="text-[8px] text-zinc-400 font-bold uppercase tracking-wider">Executive</p>
                        <p className="text-[10px] font-bold text-white leading-tight">{selectedOrder.assignedRider}</p>
                      </div>
                      <div className="text-right">
                        <p className="text-[8px] text-zinc-400 font-bold uppercase tracking-wider">Distance</p>
                        <p className="text-[10px] font-bold text-[#c084fc] font-mono leading-tight">1.2 km left</p>
                      </div>
                    </div>
                  </div>
                </div>
              )}

              {/* Delivery tracking visual roadmap layout */}
              <div className="bg-zinc-50 border border-[#e2e8f0]/60 rounded-xl p-md">
                <span className="text-[9px] font-sans font-bold text-zinc-400 uppercase tracking-widest block pb-xs mb-sm border-b border-[#f1f5f9]">
                  Live Dispatch Timeline Tracker
                </span>

                <div className="space-y-xs pt-1 relative text-[11px]">
                  <div className="flex gap-md items-start relative group">
                    <span className="text-emerald-500 mt-0.5"><CheckCircle2 size={12} /></span>
                    <div>
                      <h5 className="font-semibold text-zinc-800">Order Received ({selectedOrder.time})</h5>
                      <p className="text-[10px] text-zinc-400">Placed via customer app cart checkout successfully.</p>
                    </div>
                  </div>

                  <div className="flex gap-md items-start pt-3">
                    <span className={['CONFIRMED', 'OUT_FOR_DELIVERY', 'DELIVERED'].includes(selectedOrder.status) ? 'text-emerald-500 mt-0.5' : 'text-zinc-300 mt-0.5'}><CheckCircle2 size={12} /></span>
                    <div>
                      <h5 className="font-semibold text-zinc-800">Assortment Packaged & Bagged</h5>
                      <p className="text-[10px] text-zinc-400">Verified fresh produce items in-stock levels.</p>
                    </div>
                  </div>

                  <div className="flex gap-md items-start pt-3">
                    <span className={['OUT_FOR_DELIVERY', 'DELIVERED'].includes(selectedOrder.status) ? 'text-emerald-500 mt-0.5' : 'text-zinc-300 mt-0.5'}><CheckCircle2 size={12} /></span>
                    <div>
                      <h5 className="font-semibold text-zinc-800">Out for Delivery</h5>
                      <p className="text-[10px] text-zinc-400">Dispatched with executive partner on bike route.</p>
                    </div>
                  </div>

                  <div className="flex gap-md items-start pt-3">
                    <span className={selectedOrder.status === 'DELIVERED' ? 'text-emerald-500 mt-0.5' : 'text-zinc-300 mt-0.5'}><CheckCircle2 size={12} /></span>
                    <div>
                      <h5 className="font-semibold text-zinc-800">Handover Verified</h5>
                      <p className="text-[10px] text-zinc-400">Delivered directly to door step location.</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          ) : (
            <div className="p-xl bg-white border border-[#e2e8f0] rounded-xl text-center text-zinc-400 font-medium">
              Select any customer order from the feed to view its details.
            </div>
          )}
        </div>

      </div>
    </div>
  );
}