import React, { useState, useEffect } from 'react';
import {
  Search,
  Truck,
  PackageCheck,
  Loader2,
  ExternalLink,
  CheckCircle2,
  Clock,
  ShoppingBag,
  ArrowLeft,
  Home,
  ShieldCheck,
  MapPin,
  HelpCircle,
} from 'lucide-react';
import { subscribeToOrders, OrderRecord } from '../services/orderService';

interface OrderTrackingPageProps {
  onBackToHome: () => void;
  onNavigateShop?: () => void;
}

export const OrderTrackingPage: React.FC<OrderTrackingPageProps> = ({
  onBackToHome,
  onNavigateShop,
}) => {
  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);

  // Parse order ID from URL search params on mount (e.g. /track-order?id=TNL-849201)
  useEffect(() => {
    try {
      const urlParams = new URLSearchParams(window.location.search);
      const initialId = urlParams.get('id') || urlParams.get('order') || urlParams.get('cn');
      if (initialId) {
        setSearchQuery(initialId);
      }
    } catch {
      // ignore
    }
  }, []);

  // Subscribe to real-time orders
  useEffect(() => {
    const unsubscribe = subscribeToOrders((orders) => {
      const sorted = [...orders].sort(
        (a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
      );
      setAllOrders(sorted);
    });
    return () => unsubscribe();
  }, []);

  // Auto search when query is loaded from URL or set
  useEffect(() => {
    if (searchQuery && allOrders.length > 0 && matchingOrders.length === 0) {
      performSearch(searchQuery);
    }
  }, [allOrders, searchQuery]);

  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 formatPhoneDisplay = (p: string) => {
    if (!p) return '';
    const clean = p.trim();
    const digits = clean.replace(/\D/g, '');
    if (digits.length === 11 && digits.startsWith('03')) {
      return `${digits.slice(0, 4)}-${digits.slice(4)}`;
    }
    return clean;
  };

  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, '');

    // Prevent matching everything on 1 or 2 digits
    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 complete 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="min-h-screen bg-[#FAF7F4] text-slate-800 py-6 sm:py-10 px-4 sm:px-8 font-sans">
      <div className="max-w-4xl mx-auto space-y-6">
        
        {/* Breadcrumb Navigation */}
        <div className="flex items-center justify-between border-b border-[#E8D9CC] pb-4">
          <div className="flex items-center gap-2 text-xs sm:text-sm font-medium text-slate-600">
            <button
              onClick={onBackToHome}
              className="hover:text-[#C81E3D] flex items-center gap-1 transition-colors cursor-pointer"
            >
              <Home className="w-4 h-4" />
              <span>Home</span>
            </button>
            <span className="text-slate-300">/</span>
            <span className="font-bold text-[#C81E3D]">Track Order &amp; Courier Status</span>
          </div>

          <button
            onClick={onBackToHome}
            className="px-3.5 py-1.5 rounded-xl bg-white border border-slate-300 hover:border-amber-500 text-slate-700 text-xs font-bold transition-all flex items-center gap-1.5 cursor-pointer shadow-2xs"
          >
            <ArrowLeft className="w-4 h-4" />
            <span>Back to Store</span>
          </button>
        </div>

        {/* Page Hero Header */}
        <div className="bg-gradient-to-r from-[#1C1814] via-[#2A231D] to-[#1C1814] text-white p-6 sm:p-10 rounded-3xl shadow-xl border border-amber-900/40 relative overflow-hidden">
          <div className="absolute top-0 right-0 w-64 h-64 bg-amber-500/10 rounded-full blur-3xl pointer-events-none" />
          <div className="flex items-center gap-2 text-amber-400 text-xs font-bold uppercase tracking-widest mb-2">
            <Truck className="w-4 h-4 text-[#C81E3D]" />
            <span>Time N Life Express Courier Shipping</span>
          </div>
          <h1 className="text-2xl sm:text-4xl font-serif font-bold text-amber-50 leading-tight">
            Live Order &amp; Courier Tracking
          </h1>
          <p className="text-amber-200/80 mt-2 text-xs sm:text-sm max-w-2xl leading-relaxed">
            Track your order status instantly by entering your Order Reference ID or Phone Number. Access live Leopards Courier &amp; PostEx consignment tracking status anytime.
          </p>
        </div>

        {/* Main Content Layout */}
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
          
          {/* Left Column: Search & Courier Quick Links */}
          <div className="lg:col-span-1 space-y-6">
            
            {/* Search Box Card */}
            <div className="bg-white border border-[#E8D9CC] rounded-2xl p-5 shadow-sm space-y-4">
              <h3 className="text-sm font-bold text-slate-900 uppercase tracking-wider flex items-center gap-2 border-b border-slate-100 pb-3">
                <Search className="w-4 h-4 text-[#C81E3D]" />
                <span>Search Order</span>
              </h3>

              <form onSubmit={handleTrackSubmit} className="space-y-3">
                <div className="space-y-1.5">
                  <label className="block text-[11px] font-bold text-slate-700 uppercase tracking-wider">
                    Order ID or Phone Number:
                  </label>
                  <div className="relative">
                    <Search className="w-4 h-4 text-slate-400 absolute left-3.5 top-3" />
                    <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-3 py-2.5 bg-slate-50 border border-slate-300 rounded-xl text-xs font-mono font-bold focus:bg-white focus:ring-2 focus:ring-[#C81E3D] outline-none"
                    />
                  </div>
                </div>

                <button
                  type="submit"
                  disabled={isSearching}
                  className="w-full py-3 bg-[#1C1814] hover:bg-slate-800 text-amber-100 font-bold text-xs uppercase tracking-wider rounded-xl transition-all shadow-md flex items-center justify-center gap-2 cursor-pointer disabled:opacity-50"
                >
                  {isSearching ? (
                    <>
                      <Loader2 className="w-4 h-4 animate-spin" />
                      <span>Searching...</span>
                    </>
                  ) : (
                    <>
                      <Search className="w-4 h-4" />
                      <span>Track Order</span>
                    </>
                  )}
                </button>
              </form>
            </div>

            {/* Courier Partners Quick Tracking */}
            <div className="bg-white border border-[#E8D9CC] rounded-2xl p-5 shadow-sm space-y-3">
              <span className="text-xs font-bold uppercase tracking-wider text-[#C81E3D] flex items-center gap-1.5 border-b border-slate-100 pb-2">
                <Truck className="w-4 h-4" />
                <span>Courier Partners Portal</span>
              </span>

              <div className="space-y-2.5">
                <a
                  href="https://www.leopardscourier.com/leopards-tracking"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="p-3 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-2xs 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 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-2xs 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>

            {/* Help Card */}
            <div className="bg-amber-50/80 border border-amber-200 rounded-2xl p-4 text-xs space-y-3 shadow-2xs">
              <div className="flex items-center gap-2 text-amber-900 font-bold">
                <HelpCircle className="w-4 h-4 text-[#C81E3D]" />
                <span>Need Customer Support & Assistance?</span>
              </div>
              <p className="text-amber-950/80 leading-relaxed text-[11px]">
                If you have questions about your delivery status, courier updates, or need to modify your shipping address, please contact our support team on WhatsApp at <span className="font-bold text-emerald-800">0331-3333400</span>.
              </p>
              <a
                href="https://wa.me/923313333400?text=Hello%20TimeNLife%20Support%2C%20I%20need%20assistance%20with%20my%20order%20tracking."
                target="_blank"
                rel="noopener noreferrer"
                className="inline-flex items-center gap-2 px-3.5 py-2 bg-emerald-600 hover:bg-emerald-700 text-white font-bold text-xs rounded-xl shadow-xs transition-all cursor-pointer"
              >
                <span>WhatsApp Assistance: 0331-3333400</span>
              </a>
            </div>

          </div>

          {/* Right Column: Search Results / Selected Order Status */}
          <div className="lg:col-span-2 space-y-6">
            
            {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 */}
            {matchingOrders.length > 1 && (
              <div className="p-4 bg-amber-50/80 border border-amber-200 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</span>
                  </span>
                  <span className="text-[10px] text-amber-800 font-medium">Select an order:</span>
                </div>

                <div className="grid grid-cols-1 sm:grid-cols-2 gap-2 max-h-48 overflow-y-auto">
                  {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 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 Card */}
            {selectedOrder ? (
              <div className="bg-white border border-[#E8D9CC] rounded-3xl p-6 space-y-6 shadow-sm animate-in fade-in duration-300">
                
                {/* Order Overview Header Card */}
                <div className="bg-[#FAF5F0] border border-[#F2E5D9] p-5 rounded-2xl space-y-4">
                  <div className="flex items-center justify-between border-b border-[#E8D9CC] pb-3">
                    <div className="flex items-center gap-2.5">
                      <div className="p-2 bg-emerald-100 text-emerald-700 rounded-xl">
                        <PackageCheck className="w-5 h-5" />
                      </div>
                      <div>
                        <span className="text-[10px] text-slate-500 font-bold uppercase tracking-wider block">Order Reference ID</span>
                        <span className="text-base 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-4 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">Delivery 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 Items ({selectedOrder.items.length}):
                      </span>
                      <div className="space-y-2 max-h-48 overflow-y-auto pr-1">
                        {selectedOrder.items.map((item, idx) => (
                          <div key={idx} className="flex items-center gap-3 bg-white p-2.5 rounded-xl border border-[#F2E5D9]">
                            {item.image && (
                              <img src={item.image} alt={item.productName} className="w-11 h-11 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-4 bg-purple-50 border border-purple-200 rounded-2xl space-y-2 text-xs">
                      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-2">
                        <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.5 py-1 rounded-lg border border-purple-200 self-start sm:self-auto">
                          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-1"
                          >
                            <span>Open Live {selectedOrder.courierInfo.courierName} Consignment Page</span>
                            <ExternalLink className="w-3.5 h-3.5" />
                          </a>
                        </div>
                      )}
                    </div>
                  )}
                </div>

                {/* Status Timeline */}
                <div className="space-y-4 bg-white border border-slate-200 p-5 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 &amp; Delivery Progress</span>
                  </h4>

                  <div className="space-y-4 pl-3 border-l-2 border-[#C81E3D]/30 ml-2 pt-1">
                    {(selectedOrder.timeline || []).map((entry, idx) => (
                      <div key={idx} className="relative pl-5">
                        <div className="absolute -left-[23px] top-1 w-3.5 h-3.5 rounded-full bg-[#C81E3D] ring-4 ring-rose-100" />
                        <div className="text-xs font-bold text-slate-900">{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-10 text-center bg-white rounded-3xl border border-dashed border-[#E8D9CC] space-y-3 shadow-xs">
                <div className="w-14 h-14 bg-amber-50 text-amber-800 rounded-2xl flex items-center justify-center mx-auto">
                  <Truck className="w-7 h-7 text-[#C81E3D]" />
                </div>
                <h3 className="text-base font-bold text-slate-900">Track Order Progress</h3>
                <p className="text-xs text-slate-500 max-w-sm mx-auto leading-relaxed">
                  Enter your Order Reference ID (e.g. TNL-849201) or Mobile Phone number in the search box to check real-time order history, consignment tracking number, and delivery progress.
                </p>
                {onNavigateShop && (
                  <div className="pt-2">
                    <button
                      onClick={onNavigateShop}
                      className="px-5 py-2.5 bg-[#C81E3D] hover:bg-[#a0162e] text-white text-xs font-bold uppercase tracking-wider rounded-xl transition-all shadow-md cursor-pointer"
                    >
                      Browse Products
                    </button>
                  </div>
                )}
              </div>
            )}

          </div>

        </div>

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