'use client';

import React, { useState, useEffect, Suspense } from 'react';
import { useSearchParams } from 'next/navigation';
import Link from 'next/link';
import {
  Truck,
  Search,
  Package,
  CheckCircle2,
  Clock,
  MapPin,
  ExternalLink,
  Phone,
  Mail,
  ShieldCheck,
  Calendar,
  AlertCircle,
  Copy,
  Check,
  ChevronRight,
  ArrowRight,
  Sparkles,
  Info,
  HelpCircle,
} from 'lucide-react';
import api from '@/lib/api';
import { showToast } from '@/components/common/Toast';

interface TrackingData {
  orderNumber: string;
  trackingNumber: string;
  carrier: string;
  carrierSlug: string;
  carrierTrackingUrl: string;
  carrierInfo?: {
    name: string;
    supportPhone: string;
    supportEmail: string;
    averageDeliveryDays: string;
  };
  status: string;
  statusLabel: string;
  currentLocation: string;
  orderDate: string;
  shippedAt?: string;
  deliveredAt?: string;
  estimatedDelivery: string;
  signedBy?: string;
  destinationCity: string;
  destinationState: string;
  destinationPostalCode: string;
  destinationCountry: string;
  maskedRecipient: string;
  items: Array<{
    title: string;
    format: string;
    quantity: number;
    coverImage?: string;
  }>;
  timeline: Array<{
    id?: string;
    status: string;
    title: string;
    description?: string;
    location?: string;
    timestamp: string;
    source?: string;
  }>;
}

function TrackingContent() {
  const searchParams = useSearchParams();
  const initialQuery = searchParams.get('q') || searchParams.get('query') || searchParams.get('order') || '';

  const [searchQuery, setSearchQuery] = useState(initialQuery);
  const [loading, setLoading] = useState(false);
  const [trackingData, setTrackingData] = useState<TrackingData | null>(null);
  const [error, setError] = useState('');
  const [copied, setCopied] = useState(false);

  const fetchTracking = async (query: string) => {
    if (!query.trim()) return;
    setLoading(true);
    setError('');

    try {
      const res = await api.get(`/tracking/${encodeURIComponent(query.trim())}`);
      if (res.data?.data) {
        setTrackingData(res.data.data);
      }
    } catch (err: any) {
      setTrackingData(null);
      setError(
        err?.response?.data?.message ||
          `No shipment found for “${query}”. Please verify your Order ID (e.g. IBW-98201) or Courier AWB number.`
      );
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    if (initialQuery) {
      fetchTracking(initialQuery);
    }
  }, [initialQuery]);

  const handleSearchSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    fetchTracking(searchQuery);
  };

  const handleCopyAwb = (text: string) => {
    navigator.clipboard.writeText(text);
    setCopied(true);
    showToast('Tracking number copied to clipboard', 'success');
    setTimeout(() => setCopied(false), 2000);
  };

  // Determine active step in 5-stage pipeline
  const getActiveStepIndex = (status: string) => {
    switch (status) {
      case 'ORDER_PLACED':
      case 'CONFIRMED':
        return 0;
      case 'PROCESSING':
        return 1;
      case 'DISPATCHED':
        return 2;
      case 'IN_TRANSIT':
        return 3;
      case 'OUT_FOR_DELIVERY':
        return 4;
      case 'DELIVERED':
        return 5;
      default:
        return 2;
    }
  };

  const steps = [
    { title: 'Order Confirmed', desc: 'Verified & Queued' },
    { title: 'Archival Packaging', desc: 'Quality Inspected' },
    { title: 'Dispatched', desc: 'Handed to Courier' },
    { title: 'In Transit', desc: 'Moving between Hubs' },
    { title: 'Out for Delivery', desc: 'With Courier Agent' },
    { title: 'Delivered', desc: 'Signed & Complete' },
  ];

  const currentStep = trackingData ? getActiveStepIndex(trackingData.status) : 0;

  return (
    <div className="min-h-screen bg-zinc-50 dark:bg-zinc-950 text-zinc-900 dark:text-zinc-100 py-12 px-4 sm:px-6 lg:px-8">
      <div className="max-w-5xl mx-auto space-y-10">
        {/* Header Title */}
        <div className="text-center space-y-3">
          <div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-rose-50 dark:bg-rose-950/60 text-[#701a08] dark:text-amber-500 font-extrabold text-xs uppercase tracking-wider border border-rose-100 dark:border-rose-900/40 shadow-sm">
            <Truck className="w-4 h-4 text-[#701a08]" /> Real-Time Courier Logistics
          </div>
          <h1 className="text-3xl sm:text-4xl font-extrabold tracking-tight">
            Track Your Consignment
          </h1>
          <p className="text-xs sm:text-sm text-zinc-500 max-w-xl mx-auto leading-relaxed">
            Enter your Indian Books Worldwide Order Number (e.g.{' '}
            <span className="font-mono font-bold text-zinc-700 dark:text-zinc-300">IBW-98201</span>) or Courier AWB Tracking Number.
          </p>
        </div>

        {/* Search Bar Container */}
        <div className="max-w-2xl mx-auto">
          <form onSubmit={handleSearchSubmit} className="relative flex items-center shadow-xl rounded-2xl overflow-hidden bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 p-1.5">
            <div className="pl-4 text-zinc-400">
              <Search className="w-5 h-5" />
            </div>
            <input
              type="text"
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              placeholder="e.g. IBW-98201 or DELHIVERY-89210..."
              className="w-full px-4 py-3.5 bg-transparent border-none text-sm font-semibold focus:outline-none text-zinc-900 dark:text-zinc-100 placeholder:text-zinc-400"
            />
            <button
              type="submit"
              disabled={loading || !searchQuery.trim()}
              className="px-6 py-3.5 rounded-xl bg-[#701a08] hover:bg-[#581406] text-white font-extrabold text-xs shadow-md transition-all flex items-center gap-2 shrink-0 disabled:opacity-40 cursor-pointer"
            >
              {loading ? (
                <span>Tracking...</span>
              ) : (
                <>
                  <span>Track Consignment</span>
                  <ArrowRight className="w-4 h-4" />
                </>
              )}
            </button>
          </form>

          {/* Quick Demo Search Chips */}
          <div className="flex flex-wrap items-center justify-center gap-2 mt-4 text-xs text-zinc-500">
            <span>Quick samples:</span>
            {['IBW-98201', 'IBW-98202', 'IBW-98203'].map((sample) => (
              <button
                key={sample}
                type="button"
                onClick={() => {
                  setSearchQuery(sample);
                  fetchTracking(sample);
                }}
                className="px-2.5 py-1 rounded-lg bg-zinc-200/60 dark:bg-zinc-800 hover:bg-zinc-300 dark:hover:bg-zinc-700 font-mono text-[11px] font-bold text-zinc-700 dark:text-zinc-300 transition-colors"
              >
                {sample}
              </button>
            ))}
          </div>
        </div>

        {/* Error Notification */}
        {error && (
          <div className="max-w-2xl mx-auto p-5 rounded-2xl bg-red-50 dark:bg-red-950/40 border border-red-200 dark:border-red-900/50 flex items-start gap-3 text-red-800 dark:text-red-300 text-xs">
            <AlertCircle className="w-5 h-5 shrink-0 mt-0.5" />
            <div className="space-y-1">
              <span className="font-bold block">Consignment Not Found</span>
              <p className="leading-relaxed">{error}</p>
            </div>
          </div>
        )}

        {/* Tracking Details View */}
        {trackingData && (
          <div className="space-y-8 animate-in fade-in duration-300">
            {/* Top Summary Banner */}
            <div className="bg-white dark:bg-zinc-900 rounded-3xl p-6 sm:p-8 border border-zinc-200 dark:border-zinc-800 shadow-sm space-y-6">
              <div className="flex flex-col md:flex-row md:items-center justify-between gap-4 border-b border-zinc-100 dark:border-zinc-800 pb-6">
                <div>
                  <div className="flex items-center gap-2">
                    <span className="font-mono text-lg font-extrabold text-[#701a08] dark:text-amber-500">
                      {trackingData.orderNumber}
                    </span>
                    <span className="px-3 py-1 rounded-full bg-emerald-50 dark:bg-emerald-950/60 text-emerald-700 dark:text-emerald-400 font-extrabold text-[11px]">
                      {trackingData.statusLabel}
                    </span>
                  </div>
                  <p className="text-xs text-zinc-500 mt-1">
                    Book Consignment dispatched via <span className="font-bold text-zinc-700 dark:text-zinc-300">{trackingData.carrier}</span>
                  </p>
                </div>

                <div className="flex items-center gap-2">
                  <div className="px-4 py-2 rounded-xl bg-zinc-100 dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 flex items-center gap-2">
                    <span className="text-[11px] text-zinc-400 font-bold uppercase">AWB:</span>
                    <span className="font-mono text-xs font-black">{trackingData.trackingNumber}</span>
                    <button
                      onClick={() => handleCopyAwb(trackingData.trackingNumber)}
                      className="p-1 rounded hover:bg-zinc-200 dark:hover:bg-zinc-700 text-zinc-500"
                      title="Copy AWB"
                    >
                      {copied ? <Check className="w-3.5 h-3.5 text-emerald-600" /> : <Copy className="w-3.5 h-3.5" />}
                    </button>
                  </div>

                  {trackingData.carrierTrackingUrl && (
                    <a
                      href={trackingData.carrierTrackingUrl}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="px-4 py-2 rounded-xl bg-[#701a08] hover:bg-[#581406] text-white text-xs font-bold flex items-center gap-1.5 shadow transition-colors"
                    >
                      <span>Carrier Portal</span>
                      <ExternalLink className="w-3.5 h-3.5" />
                    </a>
                  )}
                </div>
              </div>

              {/* Status Stepper */}
              <div className="py-4">
                <div className="grid grid-cols-2 sm:grid-cols-6 gap-3">
                  {steps.map((step, idx) => {
                    const isDone = idx <= currentStep;
                    const isCurrent = idx === currentStep;
                    return (
                      <div key={step.title} className="relative flex flex-col items-center text-center space-y-2">
                        <div
                          className={`w-9 h-9 rounded-full flex items-center justify-center font-bold text-xs transition-all ${
                            isCurrent
                              ? 'bg-[#701a08] text-white ring-4 ring-[#701a08]/20 shadow-lg'
                              : isDone
                              ? 'bg-emerald-600 text-white'
                              : 'bg-zinc-100 dark:bg-zinc-800 text-zinc-400'
                          }`}
                        >
                          {isDone && !isCurrent ? <CheckCircle2 className="w-4 h-4" /> : idx + 1}
                        </div>
                        <div>
                          <span
                            className={`block text-[11px] font-extrabold ${
                              isCurrent
                                ? 'text-[#701a08] dark:text-amber-500'
                                : isDone
                                ? 'text-zinc-800 dark:text-zinc-200'
                                : 'text-zinc-400'
                            }`}
                          >
                            {step.title}
                          </span>
                          <span className="text-[10px] text-zinc-400 hidden sm:block">{step.desc}</span>
                        </div>
                      </div>
                    );
                  })}
                </div>
              </div>

              {/* Metadata Cards Grid */}
              <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 pt-4 border-t border-zinc-100 dark:border-zinc-800 text-xs">
                <div className="p-4 rounded-2xl bg-zinc-50 dark:bg-zinc-800/40 space-y-1">
                  <span className="text-[10px] uppercase font-bold text-zinc-400 block flex items-center gap-1">
                    <Calendar className="w-3.5 h-3.5" /> Estimated Delivery
                  </span>
                  <p className="font-extrabold text-sm text-[#701a08] dark:text-amber-500">
                    {new Date(trackingData.estimatedDelivery).toLocaleDateString('en-IN', {
                      weekday: 'short',
                      day: 'numeric',
                      month: 'short',
                      year: 'numeric',
                    })}
                  </p>
                  <span className="text-[10px] text-zinc-500">Guaranteed Postal / Courier SLA</span>
                </div>

                <div className="p-4 rounded-2xl bg-zinc-50 dark:bg-zinc-800/40 space-y-1">
                  <span className="text-[10px] uppercase font-bold text-zinc-400 block flex items-center gap-1">
                    <MapPin className="w-3.5 h-3.5" /> Current Location
                  </span>
                  <p className="font-extrabold text-sm">{trackingData.currentLocation}</p>
                  <span className="text-[10px] text-zinc-500">
                    Destination: {trackingData.destinationCity}, {trackingData.destinationState} ({trackingData.destinationPostalCode})
                  </span>
                </div>

                <div className="p-4 rounded-2xl bg-zinc-50 dark:bg-zinc-800/40 space-y-1">
                  <span className="text-[10px] uppercase font-bold text-zinc-400 block flex items-center gap-1">
                    <ShieldCheck className="w-3.5 h-3.5" /> Consignment Manifest
                  </span>
                  <p className="font-extrabold text-sm">{trackingData.items.length} Title(s) in Package</p>
                  <span className="text-[10px] text-zinc-500">Receiver: {trackingData.maskedRecipient}</span>
                </div>
              </div>
            </div>

            {/* Split Section: Timeline & Carrier Details */}
            <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
              {/* Left Column: Detailed Check-in Timeline */}
              <div className="lg:col-span-2 bg-white dark:bg-zinc-900 rounded-3xl p-6 sm:p-8 border border-zinc-200 dark:border-zinc-800 shadow-sm space-y-6">
                <h3 className="font-extrabold text-base flex items-center gap-2">
                  <Clock className="w-4 h-4 text-[#701a08]" /> Check-in & Transit History
                </h3>

                <div className="relative pl-6 space-y-6 before:absolute before:left-2 before:top-2 before:bottom-2 before:w-0.5 before:bg-zinc-200 dark:before:bg-zinc-800">
                  {trackingData.timeline.map((event, idx) => (
                    <div key={event.id || idx} className="relative space-y-1 text-xs">
                      <div
                        className={`absolute -left-6 top-1 w-3 h-3 rounded-full border-2 bg-white dark:bg-zinc-900 ${
                          idx === 0
                            ? 'border-[#701a08] bg-[#701a08] ring-4 ring-[#701a08]/20'
                            : 'border-zinc-400 dark:border-zinc-600'
                        }`}
                      />
                      <div className="flex items-center justify-between">
                        <span className="font-extrabold text-zinc-900 dark:text-zinc-100">{event.title}</span>
                        <span className="text-[11px] text-zinc-400 font-mono">
                          {new Date(event.timestamp).toLocaleString('en-IN', {
                            dateStyle: 'short',
                            timeStyle: 'short',
                          })}
                        </span>
                      </div>
                      {event.location && (
                        <p className="text-zinc-500 flex items-center gap-1 text-[11px]">
                          <MapPin className="w-3 h-3" /> {event.location}
                        </p>
                      )}
                      {event.description && (
                        <p className="text-zinc-600 dark:text-zinc-400 text-xs leading-relaxed pt-0.5">
                          {event.description}
                        </p>
                      )}
                    </div>
                  ))}
                </div>
              </div>

              {/* Right Column: Carrier Information & Manifest */}
              <div className="space-y-6">
                {/* Carrier Contact Card */}
                {trackingData.carrierInfo && (
                  <div className="bg-white dark:bg-zinc-900 rounded-3xl p-6 border border-zinc-200 dark:border-zinc-800 shadow-sm space-y-4 text-xs">
                    <h3 className="font-extrabold text-sm flex items-center gap-2">
                      <Truck className="w-4 h-4 text-[#701a08]" /> Carrier Information
                    </h3>

                    <div className="space-y-3">
                      <div>
                        <span className="text-zinc-400 block text-[10px] uppercase font-bold">Partner Name</span>
                        <p className="font-extrabold">{trackingData.carrierInfo.name}</p>
                      </div>

                      <div>
                        <span className="text-zinc-400 block text-[10px] uppercase font-bold">Estimated SLA</span>
                        <p className="font-semibold text-zinc-700 dark:text-zinc-300">
                          {trackingData.carrierInfo.averageDeliveryDays}
                        </p>
                      </div>

                      <div className="pt-2 border-t border-zinc-100 dark:border-zinc-800 space-y-2">
                        <div className="flex items-center gap-2 text-zinc-600 dark:text-zinc-400">
                          <Phone className="w-3.5 h-3.5 text-[#701a08]" />
                          <span>{trackingData.carrierInfo.supportPhone}</span>
                        </div>
                        <div className="flex items-center gap-2 text-zinc-600 dark:text-zinc-400">
                          <Mail className="w-3.5 h-3.5 text-[#701a08]" />
                          <span>{trackingData.carrierInfo.supportEmail}</span>
                        </div>
                      </div>
                    </div>
                  </div>
                )}

                {/* Items in Consignment */}
                <div className="bg-white dark:bg-zinc-900 rounded-3xl p-6 border border-zinc-200 dark:border-zinc-800 shadow-sm space-y-4 text-xs">
                  <h3 className="font-extrabold text-sm flex items-center gap-2">
                    <Package className="w-4 h-4 text-[#701a08]" /> Books in Shipment ({trackingData.items.length})
                  </h3>

                  <div className="space-y-3">
                    {trackingData.items.map((item, i) => (
                      <div key={i} className="flex items-center gap-3 p-2 rounded-xl bg-zinc-50 dark:bg-zinc-800/30">
                        {item.coverImage ? (
                          <img src={item.coverImage} alt={item.title} className="w-10 h-14 object-cover rounded-lg shrink-0" />
                        ) : (
                          <div className="w-10 h-14 bg-zinc-200 dark:bg-zinc-700 rounded-lg flex items-center justify-center text-[9px] text-zinc-400 shrink-0">
                            Book
                          </div>
                        )}
                        <div className="min-w-0 flex-1 space-y-0.5">
                          <h4 className="font-bold text-xs line-clamp-1">{item.title}</h4>
                          <span className="text-[10px] text-zinc-400 block">{item.format} • Qty: {item.quantity}</span>
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            </div>
          </div>
        )}

        {/* Shipping Guarantee Footer */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 pt-6 border-t border-zinc-200 dark:border-zinc-800 text-xs text-zinc-500">
          <div className="flex items-start gap-3">
            <ShieldCheck className="w-5 h-5 text-[#701a08] shrink-0" />
            <div>
              <span className="font-extrabold text-zinc-900 dark:text-zinc-100 block">Moisture & Transit Protection</span>
              <p className="mt-0.5 text-[11px] leading-relaxed">Multi-layer bubble cushioning & archival grade waterproof wraps for all sacred texts.</p>
            </div>
          </div>

          <div className="flex items-start gap-3">
            <Truck className="w-5 h-5 text-[#701a08] shrink-0" />
            <div>
              <span className="font-extrabold text-zinc-900 dark:text-zinc-100 block">100% Insured Delivery</span>
              <p className="mt-0.5 text-[11px] leading-relaxed">Full coverage against damage or loss during domestic and global postal transit.</p>
            </div>
          </div>

          <div className="flex items-start gap-3">
            <HelpCircle className="w-5 h-5 text-[#701a08] shrink-0" />
            <div>
              <span className="font-extrabold text-zinc-900 dark:text-zinc-100 block">Customer Logistics Desk</span>
              <p className="mt-0.5 text-[11px] leading-relaxed">Questions regarding delivery? Email <span className="text-[#701a08] font-bold">support@indianbooksworldwide.com</span></p>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default function PublicOrderTrackingPage() {
  return (
    <Suspense fallback={<div className="min-h-screen py-20 text-center text-xs text-zinc-400">Loading Order Tracking Portal...</div>}>
      <TrackingContent />
    </Suspense>
  );
}