import React, { useState, useEffect } from 'react';
import {
  X,
  Search,
  Truck,
  MapPin,
  Clock,
  PackageCheck,
  Loader2,
  ExternalLink,
  CheckCircle2,
  Building,
  Calendar,
  ChevronRight,
  Phone,
  User,
  CreditCard,
  ShoppingBag,
  HelpCircle,
} from 'lucide-react';
import { subscribeToOrders, OrderRecord } from '../services/orderService';

interface OrderTrackingModalProps {
  isOpen: boolean;
  onClose: () => void;
}

export const OrderTrackingModal: React.FC<OrderTrackingModalProps> = ({ isOpen, onClose }) => {
  const [allOrders, setAllOrders] = useState<OrderRecord[]>([]);
  const [searchQuery, setSearchQuery] = useState('');
  const [matchingOrders, setMatchingOrders] = useState<OrderRecord[]>([]);
  const [selectedOrderId, setSelectedOrderId] = useState<string | null>(null);
  const [isSearching, setIsSearching] = useState(false);
  const [searchError, setSearchError] = useState<string | null>(null);

  // Subscribe to real-time orders on modal open
  useEffect(() => {
    if (!isOpen) return;
    const unsubscribe = subscribeToOrders((orders) => {
      // Sort newest first
      const sorted = [...orders].sort(
        (a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
      );
      setAllOrders(sorted);
    });
    return () => unsubscribe();
  }, [isOpen]);

  if (!isOpen) return null;

  const normalizePhone = (p: string) => {
    if (!p) return '';
    let digits = p.replace(/\D/g, '');
    if (digits.startsWith('92') && digits.length >= 11) {
      digits = '0' + digits.slice(2);
    }
    return digits;
  };

  const performSearch = (qRaw: string) => {
    const q = qRaw.trim();
    setSearchQuery(qRaw);
    setSearchError(null);

    if (!q) {
      setMatchingOrders([]);
      setSelectedOrderId(null);
      return;
    }

    const cleanDigits = q.replace(/\D/g, '');
    const cleanAlpha = q.toLowerCase().replace(/[\s\-\+\(\)]/g, '');

    if (cleanAlpha.length < 4 && cleanDigits.length < 4) {
      setMatchingOrders([]);
      setSelectedOrderId(null);
      setSearchError(
        'Please enter at least 4 digits or characters (e.g. TNL-849201 or complete mobile number 03001234567).'
      );
      return;
    }

    setIsSearching(true);
    const searchNormPhone = normalizePhone(q);

    const matches = allOrders.filter((o) => {
      const cleanId = (o.id || '').toLowerCase().replace(/[\s\-]/g, '');
      const rawPhone = o.customer?.phone || '';
      const customerNormPhone = normalizePhone(rawPhone);
      const cleanEmail = (o.customer?.email || '').toLowerCase();
      const cleanTracking = (o.courierInfo?.trackingNumber || '').toLowerCase();
      const cleanName = (o.customer?.name || '').toLowerCase();

      const phoneMatch =
        customerNormPhone &&
        searchNormPhone &&
        (customerNormPhone === searchNormPhone ||
          (searchNormPhone.length >= 7 && customerNormPhone.includes(searchNormPhone)));

      return (
        cleanId.includes(cleanAlpha) ||
        phoneMatch ||
        cleanEmail.includes(q.toLowerCase()) ||
        cleanTracking.includes(cleanAlpha) ||
        (cleanName.length >= 3 && cleanName.includes(q.toLowerCase()))
      );
    });

    matches.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());
    setIsSearching(false);

    if (matches.length > 0) {
      setMatchingOrders(matches);
      setSelectedOrderId(matches[0].id);
    } else {
      setMatchingOrders([]);
      setSelectedOrderId(null);
      setSearchError(`No orders found matching "${qRaw}". Please check your Order Reference ID or Mobile Number.`);
    }
  };

  const handleTrackSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    performSearch(searchQuery);
  };

  const handleSelectOrder = (orderId: string) => {
    setSelectedOrderId(orderId);
  };

  const selectedOrder = allOrders.find((o) => o.id === selectedOrderId) || matchingOrders.find((o) => o.id === selectedOrderId) || matchingOrders[0] || null;

  return (
    <div className="fixed inset-0 z-50 overflow-y-auto bg-black/75 backdrop-blur-xs flex items-center justify-center p-4 sm:p-6 animate-in fade-in duration-200">
      <div className="bg-[#FFFDFB] w-full max-w-2xl rounded-3xl shadow-2xl border border-[#F2E5D9] overflow-hidden flex flex-col max-h-[92vh]">
        
        {/* Header */}
        <div className="bg-[#1C1814] text-white p-5 flex items-center justify-between border-b border-amber-900/40">
          <div className="flex items-center gap-3">
            <div className="p-2.5 bg-[#C81E3D] rounded-xl text-white shadow-sm">
              <Truck className="w-5 h-5" />
            </div>
            <div>
              <h3 className="font-playfair font-bold text-lg text-amber-100">Live Order & Courier Tracking</h3>
              <p className="text-xs text-amber-200/70">Time N Life Express Shipping • Leopards & PostEx</p>
            </div>
          </div>
          <button
            onClick={onClose}
            className="p-1.5 rounded-full text-slate-400 hover:text-white hover:bg-white/10 transition-colors cursor-pointer"
          >
            <X className="w-5 h-5" />
          </button>
        </div>

        {/* Content */}
        <div className="p-6 space-y-6 overflow-y-auto">

          {/* Quick Courier Tracking Links */}
          <div className="bg-[#FAF5F0] border border-[#F2E5D9] p-4 rounded-2xl space-y-3">
            <span className="text-[11px] font-extrabold uppercase tracking-wider text-[#C81E3D] flex items-center gap-1.5">
              <Truck className="w-3.5 h-3.5" />
              <span>Official Courier Partners Tracking</span>
            </span>
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
              <a
                href="https://www.leopardscourier.com/leopards-tracking"
                target="_blank"
                rel="noopener noreferrer"
                className="p-3.5 bg-gradient-to-r from-amber-500 to-amber-600 hover:from-amber-600 hover:to-amber-700 text-slate-950 font-extrabold text-xs rounded-xl shadow-xs transition-all flex items-center justify-between group cursor-pointer"
              >
                <div className="flex items-center gap-2.5">
                  <div className="p-1.5 bg-slate-950 text-amber-400 rounded-lg">
                    <Truck className="w-4 h-4" />
                  </div>
                  <div className="text-left">
                    <div className="font-extrabold text-slate-950 leading-tight">Leopards Courier</div>
                    <div className="text-[10px] text-slate-900/80 font-normal">Track consignment live</div>
                  </div>
                </div>
                <ExternalLink className="w-4 h-4 text-slate-900 group-hover:translate-x-0.5 transition-transform" />
              </a>

              <a
                href="https://postex.pk/tracking"
                target="_blank"
                rel="noopener noreferrer"
                className="p-3.5 bg-gradient-to-r from-purple-700 to-indigo-800 hover:from-purple-800 hover:to-indigo-900 text-white font-extrabold text-xs rounded-xl shadow-xs transition-all flex items-center justify-between group cursor-pointer"
              >
                <div className="flex items-center gap-2.5">
                  <div className="p-1.5 bg-white/10 text-purple-200 rounded-lg">
                    <PackageCheck className="w-4 h-4" />
                  </div>
                  <div className="text-left">
                    <div className="font-extrabold text-white leading-tight">PostEx Courier</div>
                    <div className="text-[10px] text-purple-200 font-normal">Track consignment live</div>
                  </div>
                </div>
                <ExternalLink className="w-4 h-4 text-purple-200 group-hover:translate-x-0.5 transition-transform" />
              </a>
            </div>
          </div>

          {/* Assistance Support Card */}
          <div className="bg-amber-50/80 border border-amber-200 rounded-2xl p-3.5 text-xs flex flex-col sm:flex-row sm:items-center justify-between gap-3">
            <div className="space-y-0.5">
              <div className="flex items-center gap-1.5 text-amber-900 font-bold text-xs">
                <HelpCircle className="w-4 h-4 text-[#C81E3D]" />
                <span>Need Order Assistance?</span>
              </div>
              <p className="text-[11px] text-amber-950/80">
                Contact TimeNLife support team on WhatsApp at <span className="font-bold text-emerald-800">0331-3333400</span>.
              </p>
            </div>
            <a
              href="https://wa.me/923313333400?text=Hello%20TimeNLife%20Support%2C%20I%20need%20assistance%20with%20my%20order."
              target="_blank"
              rel="noopener noreferrer"
              className="px-3.5 py-1.5 bg-emerald-600 hover:bg-emerald-700 text-white font-bold text-xs rounded-xl transition-all inline-flex items-center gap-1.5 self-start sm:self-auto cursor-pointer shadow-2xs"
            >
              <span>WhatsApp Support</span>
            </a>
          </div>
          
          {/* Search Form */}
          <form onSubmit={handleTrackSubmit} className="space-y-2">
            <label className="block text-xs font-bold text-slate-800 uppercase tracking-wider">
              Enter Order Reference ID or Phone Number:
            </label>
            <div className="flex gap-2">
              <div className="relative flex-1">
                <Search className="w-4 h-4 text-slate-400 absolute left-3.5 top-3.5" />
                <input
                  type="text"
                  required
                  placeholder="e.g. TNL-849201 or 03001234567"
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                  className="w-full pl-10 pr-4 py-3 bg-white border border-slate-300 rounded-xl text-xs font-mono font-bold focus:ring-2 focus:ring-[#C81E3D] outline-none"
                />
              </div>
              <button
                type="submit"
                disabled={isSearching}
                className="px-5 py-3 bg-[#1C1814] hover:bg-slate-800 text-amber-100 font-bold text-xs uppercase tracking-wider rounded-xl transition-colors flex items-center gap-2 cursor-pointer disabled:opacity-50"
              >
                {isSearching ? <Loader2 className="w-4 h-4 animate-spin" /> : <span>SEARCH</span>}
              </button>
            </div>
          </form>



          {searchError && (
            <div className="p-4 bg-rose-50 border border-rose-200 text-rose-800 rounded-2xl text-xs font-medium">
              {searchError}
            </div>
          )}

          {/* MULTI MATCHING ORDERS SELECTOR (If search matched multiple orders e.g. by Phone number) */}
          {matchingOrders.length > 1 && (
            <div className="p-4 bg-amber-50/70 border border-amber-200/80 rounded-2xl space-y-3">
              <div className="flex items-center justify-between">
                <span className="text-xs font-bold text-amber-900 uppercase tracking-wider flex items-center gap-1.5">
                  <ShoppingBag className="w-4 h-4 text-[#C81E3D]" />
                  <span>Found {matchingOrders.length} Orders for this search (Newest First)</span>
                </span>
                <span className="text-[10px] text-amber-800/80 font-medium">Click any order to view details</span>
              </div>

              <div className="grid grid-cols-1 sm:grid-cols-2 gap-2 max-h-48 overflow-y-auto pr-1">
                {matchingOrders.map((ord) => {
                  const isSelected = selectedOrder?.id === ord.id;
                  return (
                    <button
                      key={ord.id}
                      type="button"
                      onClick={() => handleSelectOrder(ord.id)}
                      className={`p-3 rounded-xl border text-left transition-all cursor-pointer flex flex-col justify-between gap-1.5 ${
                        isSelected
                          ? 'bg-white border-[#C81E3D] ring-2 ring-[#C81E3D]/20 shadow-xs'
                          : 'bg-white/80 hover:bg-white border-amber-200/80 hover:border-amber-400'
                      }`}
                    >
                      <div className="flex items-center justify-between">
                        <span className="text-xs font-mono font-bold text-slate-900 flex items-center gap-1">
                          #{ord.id}
                          {isSelected && <CheckCircle2 className="w-3.5 h-3.5 text-[#C81E3D]" />}
                        </span>
                        <span
                          className={`text-[9px] font-extrabold uppercase px-2 py-0.5 rounded-full ${
                            ord.status === 'Booking'
                              ? 'bg-amber-100 text-amber-800'
                              : ord.status === 'Processing'
                              ? 'bg-blue-100 text-blue-800'
                              : ord.status === 'Dispatched'
                              ? 'bg-purple-100 text-purple-800'
                              : ord.status === 'Delivered'
                              ? 'bg-emerald-100 text-emerald-800'
                              : 'bg-slate-100 text-slate-700'
                          }`}
                        >
                          {ord.status}
                        </span>
                      </div>

                      <div className="flex items-center justify-between text-[11px] text-slate-600">
                        <span>{new Date(ord.createdAt).toLocaleDateString('en-PK')}</span>
                        <span className="font-bold text-[#C81E3D]">Rs {ord.totals?.grandTotal?.toLocaleString('en-PK')}</span>
                      </div>
                    </button>
                  );
                })}
              </div>
            </div>
          )}

          {/* ACTIVE SELECTED ORDER DETAILS */}
          {selectedOrder ? (
            <div className="space-y-5 animate-in fade-in duration-300">
              
              {/* Order Overview Header Card */}
              <div className="bg-[#FAF5F0] border border-[#F2E5D9] p-5 rounded-2xl space-y-4 shadow-2xs">
                <div className="flex items-center justify-between border-b border-[#E8D9CC] pb-3">
                  <div className="flex items-center gap-2">
                    <PackageCheck className="w-5 h-5 text-emerald-600" />
                    <div>
                      <span className="text-xs text-slate-500 font-medium block">Order Reference ID</span>
                      <span className="text-sm font-extrabold font-mono text-slate-900">
                        #{selectedOrder.id}
                      </span>
                    </div>
                  </div>
                  <span
                    className={`text-xs font-extrabold uppercase px-3.5 py-1 rounded-full shadow-2xs ${
                      selectedOrder.status === 'Booking'
                        ? 'bg-amber-100 text-amber-800 border border-amber-200'
                        : selectedOrder.status === 'Processing'
                        ? 'bg-blue-100 text-blue-800 border border-blue-200'
                        : selectedOrder.status === 'Dispatched'
                        ? 'bg-purple-100 text-purple-800 border border-purple-200'
                        : selectedOrder.status === 'Delivered'
                        ? 'bg-emerald-100 text-emerald-800 border border-emerald-200'
                        : 'bg-slate-100 text-slate-700'
                    }`}
                  >
                    {selectedOrder.status}
                  </span>
                </div>

                <div className="grid grid-cols-2 sm:grid-cols-4 gap-3 text-xs text-slate-700 pt-1">
                  <div>
                    <span className="text-slate-400 text-[10px] font-bold uppercase tracking-wider block">Customer</span>
                    <span className="font-bold text-slate-800 block truncate">{selectedOrder.customer.name}</span>
                    <span className="text-[11px] text-slate-500 font-mono">{selectedOrder.customer.phone}</span>
                  </div>
                  <div>
                    <span className="text-slate-400 text-[10px] font-bold uppercase tracking-wider block">Placed On</span>
                    <span className="font-medium">{new Date(selectedOrder.createdAt).toLocaleString('en-PK', { dateStyle: 'medium', timeStyle: 'short' })}</span>
                  </div>
                  <div>
                    <span className="text-slate-400 text-[10px] font-bold uppercase tracking-wider block">City</span>
                    <span className="font-semibold text-slate-800">{selectedOrder.customer.city}</span>
                  </div>
                  <div>
                    <span className="text-slate-400 text-[10px] font-bold uppercase tracking-wider block">Total Payable</span>
                    <span className="font-extrabold text-[#C81E3D] text-sm">Rs {selectedOrder.totals.grandTotal.toLocaleString('en-PK')}</span>
                  </div>
                </div>

                {/* Items List inside Order */}
                {selectedOrder.items && selectedOrder.items.length > 0 && (
                  <div className="border-t border-[#E8D9CC] pt-3 space-y-2">
                    <span className="text-[10px] font-extrabold uppercase tracking-wider text-slate-500 block">
                      Ordered Products ({selectedOrder.items.length}):
                    </span>
                    <div className="space-y-2 max-h-36 overflow-y-auto pr-1">
                      {selectedOrder.items.map((item, idx) => (
                        <div key={idx} className="flex items-center gap-3 bg-white p-2 rounded-xl border border-[#F2E5D9]">
                          {item.image && (
                            <img src={item.image} alt={item.productName} className="w-10 h-10 object-cover rounded-lg bg-slate-100 border border-slate-200" />
                          )}
                          <div className="flex-1 min-w-0 text-xs">
                            <div className="font-bold text-slate-900 truncate">{item.productName}</div>
                            <div className="text-[10px] text-slate-500">
                              Qty: <span className="font-bold text-slate-700">{item.quantity}</span> {item.packing ? `• ${item.packing}` : ''}
                            </div>
                          </div>
                          <div className="text-xs font-bold font-mono text-slate-800">
                            Rs {(item.totalPrice || item.unitPrice * item.quantity).toLocaleString('en-PK')}
                          </div>
                        </div>
                      ))}
                    </div>
                  </div>
                )}

                {/* Courier info if dispatched */}
                {selectedOrder.courierInfo && selectedOrder.courierInfo.trackingNumber && (
                  <div className="p-3.5 bg-purple-50 border border-purple-200 rounded-xl space-y-1.5 text-xs">
                    <div className="flex justify-between items-center">
                      <span className="font-bold text-purple-900">Courier Partner: {selectedOrder.courierInfo.courierName}</span>
                      <span className="font-mono font-extrabold text-[#C81E3D] bg-white px-2 py-0.5 rounded border border-purple-200">
                        CN #: {selectedOrder.courierInfo.trackingNumber}
                      </span>
                    </div>
                    {selectedOrder.courierInfo.trackingLink && (
                      <div>
                        <a
                          href={selectedOrder.courierInfo.trackingLink}
                          target="_blank"
                          rel="noopener noreferrer"
                          className="inline-flex items-center gap-1.5 text-xs font-bold text-purple-800 hover:text-purple-950 hover:underline pt-0.5"
                        >
                          <span>Open Live {selectedOrder.courierInfo.courierName} Tracking Page</span>
                          <ExternalLink className="w-3.5 h-3.5" />
                        </a>
                      </div>
                    )}
                  </div>
                )}
              </div>

              {/* Status Timeline */}
              <div className="space-y-3 bg-white border border-slate-200 p-4 rounded-2xl">
                <h4 className="text-xs font-bold text-slate-800 uppercase tracking-wider flex items-center gap-2">
                  <Clock className="w-4 h-4 text-[#C81E3D]" />
                  <span>Order Timeline & Status Progress</span>
                </h4>

                <div className="space-y-3 pl-2 border-l-2 border-[#C81E3D]/30 ml-2 pt-1">
                  {(selectedOrder.timeline || []).map((entry, idx) => (
                    <div key={idx} className="relative pl-4">
                      <div className="absolute -left-[21px] top-0.5 w-3 h-3 rounded-full bg-[#C81E3D] ring-4 ring-rose-100" />
                      <div className="text-xs font-bold text-slate-800">{entry.status}</div>
                      <div className="text-[11px] text-slate-600 pt-0.5">
                        {entry.note}
                      </div>
                      <div className="text-[10px] text-slate-400 font-mono mt-0.5">
                        {new Date(entry.timestamp).toLocaleString('en-PK')}
                      </div>
                    </div>
                  ))}
                </div>
              </div>

            </div>
          ) : (
            <div className="p-8 text-center bg-[#FAF5F0] rounded-2xl border border-dashed border-[#E8D9CC] space-y-2">
              <Truck className="w-10 h-10 text-amber-800/40 mx-auto" />
              <p className="text-xs font-bold text-slate-800">Track your order status instantly</p>
              <p className="text-[11px] text-slate-500 max-w-sm mx-auto">
                Enter your Order Reference ID (e.g. TNL-849201) or Mobile Phone number above to search and check real-time order history &amp; shipping updates.
              </p>
            </div>
          )}

        </div>

      </div>
    </div>
  );
};