"use client";

import { useState, useEffect, useCallback } from "react";
import { useRouter, useSearchParams, usePathname } from "next/navigation";
import { Button } from "../../ui/button";
import { Input } from "../../ui/input";
import { toast } from "sonner";
import { ArrowLeft, CheckCircle2, Clock, MapPin, Package, ShoppingBag, ArrowRight, RefreshCw } from "lucide-react";
import type { TrackOrderDetails } from "@/types";
import { trackOrderAction } from "@/actions/order/order.action";

export default function TrackOrder() {
  const [step, setStep] = useState<1 | 2 | 3>(1);
  const [orderNumber, setOrderNumber] = useState("");
  const [mobile, setMobile] = useState("");
  const [isLoading, setIsLoading] = useState(false);
  const [orderDetails, setOrderDetails] = useState<TrackOrderDetails | null>(null);

  const router = useRouter();
  const pathname = usePathname();
  const searchParams = useSearchParams();

  const urlOrderNumber = searchParams.get("orderNumber") || "";
  const urlMobile = searchParams.get("mobile") || "";

  const runTrack = useCallback(async (orderNum: string, mobileNum: string) => {
    setIsLoading(true);
    try {
      const res = await trackOrderAction(orderNum, mobileNum);
      if (res.success && res.data) {
        setOrderDetails(res.data);
        setStep(3);
      } else {
        toast.error(res.message || "Failed to find matching order details.");
        setStep(2);
      }
    } catch (err) {
      console.error(err);
      toast.error("An error occurred while tracking the order.");
      setStep(2);
    } finally {
      setIsLoading(false);
    }
  }, []);

  // Restore state from URL on load / change
  useEffect(() => {
    if (urlOrderNumber) {
      setOrderNumber(urlOrderNumber);
      if (urlMobile) {
        setMobile(urlMobile);
        runTrack(urlOrderNumber, urlMobile);
      } else {
        setStep(2);
        setIsLoading(false);
      }
    } else {
      setStep(1);
      // Keep orderNumber and mobile inputs preserved so the user doesn't have to re-type them
      setOrderDetails(null);
      setIsLoading(false);
    }
  }, [urlOrderNumber, urlMobile, runTrack]);

  const handleNextToMobile = (e: React.FormEvent) => {
    e.preventDefault();
    if (!orderNumber.trim()) {
      toast.error("Please enter your Order ID");
      return;
    }
    setIsLoading(true);
    const formattedOrder = orderNumber.trim().toUpperCase();
    router.push(`${pathname}?orderNumber=${formattedOrder}`, { scroll: false });
  };

  const handleTrack = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!mobile.trim()) {
      toast.error("Please enter your mobile number");
      return;
    }

    const formattedOrder = orderNumber.trim().toUpperCase();
    const cleanMobile = mobile.trim();
    if (formattedOrder === urlOrderNumber && cleanMobile === urlMobile) {
      runTrack(formattedOrder, cleanMobile);
    } else {
      setIsLoading(true);
      router.push(`${pathname}?orderNumber=${formattedOrder}&mobile=${cleanMobile}`, { scroll: false });
    }
  };

  const handleReset = () => {
    setStep(1);
    setOrderNumber("");
    setMobile("");
    setOrderDetails(null);
    router.push(pathname, { scroll: false });
  };

  const handleRefresh = async () => {
    if (!orderNumber || !mobile) return;
    setIsLoading(true);
    try {
      const formattedOrder = orderNumber.trim().toUpperCase();
      const cleanMobile = mobile.trim();
      const res = await trackOrderAction(formattedOrder, cleanMobile);

      if (res.success && res.data) {
        setOrderDetails(res.data);
        toast.success("Order status revalidated!");
      } else {
        toast.error(res.message || "Failed to revalidate order data.");
      }
    } catch (err) {
      console.error(err);
      toast.error("An error occurred while revalidating.");
    } finally {
      setIsLoading(false);
    }
  };

  const getStatusColor = (status: string) => {
    switch (status.toLowerCase()) {
      case "pending": return "bg-amber-100 text-amber-800 border-amber-200";
      case "confirmed": return "bg-blue-100 text-blue-800 border-blue-200";
      case "processing": return "bg-purple-100 text-purple-800 border-purple-200";
      case "dispatched": return "bg-indigo-100 text-indigo-800 border-indigo-200";
      case "delivered": return "bg-emerald-100 text-emerald-800 border-emerald-200";
      case "cancelled": return "bg-red-100 text-red-800 border-red-200";
      default: return "bg-gray-100 text-gray-800 border-gray-200";
    }
  };

  return (
    <section id="tracking" className="pt-6 pb-16 bg-white">
      <div className="container mx-auto px-6">

        {/* Header */}
        <div className="max-w-6xl mx-auto px-6 mb-16 text-center">
          <span className="text-xs uppercase tracking-widest font-black text-brand-accent mb-3 block">
            Order Status
          </span>
          <h2 className="text-3xl md:text-5xl font-black text-zinc-900 uppercase tracking-tight mb-4">
            Track Your Order
          </h2>
          <p className="text-zinc-650 text-sm md:text-base font-medium max-w-lg mx-auto">
            Enter your order number or tracking number along with your mobile number to track the delivery progress.
          </p>
        </div>

        {/* Minimal Stepper Progress Dots */}
        <div className="flex justify-center items-center gap-2 mb-8">
          {[1, 2, 3].map((s) => (
            <div
              key={s}
              className={`h-2 rounded-full transition-all duration-355 ${step === s
                ? "w-8 bg-brand-accent"
                : step > s
                  ? "w-2 bg-brand-accent/40"
                  : "w-2 bg-gray-250"
                }`}
            />
          ))}
        </div>

        {/* Container */}
        <div className={`mx-auto transition-all duration-300
          ${step === 3 ? "w-full max-w-4xl bg-white border border-gray-100 rounded-2xl p-4 sm:p-6 md:p-8 shadow-sm" : "max-w-md bg-transparent border-none shadow-none p-0"}`}>

          {/* STEP 1: Enter Order ID */}
          {step === 1 && (
            <div className="max-w-md mx-auto space-y-2">
              <label className="ml-1 text-xs font-bold text-zinc-500 uppercase tracking-wider block text-left">
                Step 1: Order ID or Tracking ID
              </label>
              <form onSubmit={handleNextToMobile} className="flex flex-col sm:flex-row gap-3 items-stretch sm:items-center w-full">
                <div className="flex-1">
                  <Input
                    value={orderNumber}
                    onChange={(e) => setOrderNumber(e.target.value)}
                    placeholder="Order ID or Tracking ID (e.g. ORD-1001 or TRK-12345)"
                    required
                    className="w-full h-12 bg-white border-gray-200 focus:border-brand-accent focus:bg-white text-base rounded-xl px-4"
                  />
                </div>
                <Button type="submit" disabled={isLoading} className="h-12 px-6 flex items-center justify-center gap-2 text-sm font-bold uppercase tracking-wider bg-brand-accent hover:bg-brand-accent-hover text-white border-none rounded-xl transition-all duration-300 shrink-0">
                  {isLoading ? (
                    <>
                      <RefreshCw className="w-4 h-4 animate-spin" />
                      Processing...
                    </>
                  ) : (
                    <>
                      Continue
                      <ArrowRight className="w-4 h-4" />
                    </>
                  )}
                </Button>
              </form>
            </div>
          )}

          {/* STEP 2: Enter Mobile Number */}
          {step === 2 && (
            <div className="max-w-md mx-auto space-y-2">
              <label className="ml-1 text-xs font-bold text-zinc-500 uppercase tracking-wider block text-left pl-12">
                Step 2: Mobile Number
              </label>
              <form onSubmit={handleTrack} className="flex flex-col sm:flex-row gap-2 items-stretch sm:items-center w-full">
                <button
                  type="button"
                  onClick={() => {
                    setStep(1);
                    router.push(pathname, { scroll: false });
                  }}
                  className="h-12 w-12 flex items-center justify-center text-gray-500 hover:text-brand-accent transition-colors shrink-0"
                  title="Back to Order ID / Tracking ID"
                >
                  <ArrowLeft className="w-5 h-5" />
                </button>
                <div className="flex-1">
                  <Input
                    value={mobile}
                    onChange={(e) => setMobile(e.target.value)}
                    type="tel"
                    placeholder="Mobile Number"
                    required
                    className="w-full h-12 bg-white border-gray-200 focus:border-brand-accent focus:bg-white text-base rounded-xl px-4"
                  />
                </div>
                <Button
                  type="submit"
                  disabled={isLoading}
                  className="h-12 px-8 flex items-center justify-center gap-2 text-sm font-bold uppercase tracking-wider bg-brand-accent hover:bg-brand-accent-hover text-white border-none rounded-xl transition-all duration-300 shrink-0"
                >
                  {isLoading ? (
                    <>
                      <RefreshCw className="w-4 h-4 animate-spin" />
                      Searching...
                    </>
                  ) : (
                    "Track"
                  )}
                </Button>
              </form>
            </div>
          )}

          {/* STEP 3: Show Order Details */}
          {step === 3 && orderDetails && (
            <div className="space-y-6 animate-fade-in">
              {/* Header Details */}
              <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 border-b border-gray-100 pb-4">
                {/* Left/Main Side: Order Number, Refresh, and Badges */}
                <div className="flex flex-wrap items-center gap-3 w-full sm:w-auto">
                  {/* Order ID */}
                  <h3 className="text-xl font-bold text-gray-900 tracking-tight whitespace-nowrap">
                    {orderDetails.order_number}
                  </h3>

                  {/* Status Badge */}
                  <span className={`px-2.5 py-0.5 rounded-full text-[10px] font-bold border ${getStatusColor(orderDetails.status)} uppercase tracking-wider shrink-0`}>
                    {orderDetails.status}
                  </span>

                  {/* Refresh Button */}
                  <button
                    onClick={handleRefresh}
                    disabled={isLoading}
                    className="flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-bold border border-brand-accent text-brand-accent hover:bg-brand-accent hover:text-white transition-colors disabled:opacity-50 shrink-0 bg-transparent cursor-pointer"
                    title="Refresh Order Status"
                  >
                    <RefreshCw className={`w-3.5 h-3.5 ${isLoading ? "animate-spin" : ""}`} />
                    Refresh
                  </button>

                  {/* Return Status (if exists) */}
                  {orderDetails.return_status && orderDetails.return_status !== "none" && (
                    <span className="px-2.5 py-0.5 rounded-full text-[10px] font-bold border bg-rose-100 text-rose-800 border-rose-200 uppercase tracking-wider shrink-0">
                      ↩ Returned ({orderDetails.return_status})
                    </span>
                  )}
                </div>

                {/* Right Side: Placed On Date */}
                <div className="flex sm:flex-col justify-between sm:justify-end items-center sm:items-end text-base w-full sm:w-auto border-t sm:border-t-0 border-gray-50 pt-2 sm:pt-0">
                  <span className="font-bold text-gray-900 sm:text-base sm:text-muted-foreground">Placed On</span>
                  <span className="text-gray-750 font-semibold mt-0.5">{new Date(orderDetails.placed_on).toLocaleDateString("en-US", {
                    year: "numeric", month: "short", day: "numeric"
                  })}</span>
                </div>
              </div>

              {/* Status Timeline */}
              <div className="bg-gray-50/50 border border-gray-100 rounded-xl p-4">
                <h4 className="text-xs uppercase tracking-wider font-bold text-muted-foreground mb-4">Shipment Timeline</h4>

                {/* Horizontal Timeline on Desktop */}
                <div className="hidden md:flex justify-between items-center relative py-2">
                  {/* Background Gray Line */}
                  <div className="absolute top-6 left-[10%] right-[10%] h-0.5 bg-gray-200 -translate-y-1/2 z-0" />

                  {/* Colored Progress Line */}
                  <div
                    className="absolute top-6 left-[10%] h-0.5 bg-brand-accent -translate-y-1/2 z-0 transition-all duration-500"
                    style={{
                      width: `${orderDetails.timeline.length > 1
                        ? ((orderDetails.timeline.filter(t => t.completed).length - 1) / (orderDetails.timeline.length - 1)) * 80
                        : 0
                        }%`
                    }}
                  />

                  {orderDetails.timeline?.map((t) => {
                    const stepLabels: Record<string, string> = {
                      pending: "Order Placed",
                      confirmed: "Order Confirmed",
                      processing: "Being Prepared",
                      dispatched: "Out for Delivery",
                      delivered: "Delivered",
                      cancelled: "Cancelled",
                      returned: "Returned"
                    };
                    const displayLabel = stepLabels[t.step] || t.label;

                    return (
                      <div key={t.step} className="flex flex-col items-center relative z-10 w-1/5 text-center">
                        <div className={`w-8 h-8 rounded-full border flex items-center justify-center transition-all duration-300
                          ${t.completed
                            ? "bg-brand-accent border-brand-accent text-white"
                            : t.active
                              ? "bg-white border-brand-accent text-brand-accent animate-pulse"
                              : "bg-white border-gray-200 text-gray-400"
                          }`}
                        >
                          {t.completed ? <CheckCircle2 className="w-4 h-4" /> : <Clock className="w-4 h-4" />}
                        </div>
                        <span className={`mt-2 text-[10px] uppercase tracking-wider font-bold block transition-colors
                          ${t.active ? "text-brand-accent" : t.completed ? "text-gray-800" : "text-gray-400"}`}
                        >
                          {displayLabel}
                        </span>
                      </div>
                    );
                  })}
                </div>

                {/* Vertical Timeline on Mobile */}
                <div className="md:hidden space-y-6 relative pl-6">
                  {/* Vertical Line */}
                  <div className="absolute top-2 bottom-2 left-2 w-0.5 bg-gray-200" />

                  {orderDetails.timeline?.map((t) => {
                    const stepLabels: Record<string, string> = {
                      pending: "Order Placed",
                      confirmed: "Order Confirmed",
                      processing: "Being Prepared",
                      dispatched: "Out for Delivery",
                      delivered: "Delivered",
                      cancelled: "Cancelled",
                      returned: "Returned"
                    };
                    const displayLabel = stepLabels[t.step] || t.label;

                    return (
                      <div key={t.step} className="flex gap-3 relative">
                        <div className={`absolute -left-[26px] w-5 h-5 rounded-full border flex items-center justify-center z-10 bg-white transition-all
                          ${t.completed
                            ? "border-brand-accent text-brand-accent"
                            : t.active
                              ? "border-brand-accent text-brand-accent animate-pulse scale-105"
                              : "border-gray-300 text-gray-400"
                          }`}
                        >
                          {t.completed ? <CheckCircle2 className="w-3 h-3" /> : <Clock className="w-3 h-3" />}
                        </div>
                        <span className={`text-xs uppercase font-bold tracking-wider ${t.active ? "text-brand-accent" : t.completed ? "text-gray-800" : "text-gray-400"}`}>
                          {displayLabel}
                        </span>
                      </div>
                    );
                  })}
                </div>
              </div>

              {/* Grid content: Items, Address, Summary */}
              <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 text-base">

                {/* Items */}
                <div className="space-y-4 border border-gray-100 rounded-xl p-4 sm:p-5">
                  <h4 className="font-bold text-gray-900 border-b border-gray-100 pb-3 flex items-center gap-2 text-base">
                    <ShoppingBag className="w-5 h-5 text-brand-accent" />
                    Items Ordered
                  </h4>
                  <div className="divide-y divide-gray-100 max-h-48 overflow-y-auto custom-scrollbar">
                    {orderDetails.items?.map((item, idx) => (
                      <div key={idx} className="py-3 flex justify-between items-start gap-4 first:pt-0 last:pb-0">
                        <div className="min-w-0 flex-1">
                          <p className="font-bold text-gray-900 text-base break-words">{item.name || item.product}</p>
                          <p className="text-sm text-gray-600 font-medium mt-1">Qty: {item.quantity} × ৳{parseFloat(item.price).toFixed(2)}</p>
                        </div>
                        <span className="font-bold text-gray-950 text-base shrink-0 pt-0.5">৳{parseFloat(item.total).toFixed(2)}</span>
                      </div>
                    ))}
                  </div>
                </div>

                {/* Delivery details & Summary */}
                <div className="space-y-4">

                  {/* Delivery Partner / Tracking info if available */}
                  {orderDetails.delivery_details && (
                    <div className="border border-gray-100 rounded-xl p-4 sm:p-5 space-y-3 bg-gray-50/10">
                      <h4 className="font-bold text-gray-900 text-base flex items-center gap-2">
                        <Package className="w-5 h-5 text-brand-accent" />
                        Delivery Information
                      </h4>
                      <div className="grid grid-cols-2 gap-2 text-sm">
                        <span className="text-gray-500 font-medium">Courier Partner:</span>
                        <span className="font-semibold text-gray-800 uppercase tracking-wider">
                          {orderDetails.delivery_details.partner_name || "-"}
                        </span>
                        <span className="text-gray-500 font-medium">Tracking Number:</span>
                        <span className="font-extrabold text-brand-accent font-mono tracking-wider select-all">
                          {orderDetails.delivery_details.tracking_number}
                        </span>
                      </div>
                    </div>
                  )}

                  {/* Address */}
                  {orderDetails.delivery_address && (
                    <div className="border border-gray-100 rounded-xl p-4 sm:p-5 space-y-3">
                      <h4 className="font-bold text-gray-900 text-base flex items-center gap-2">
                        <MapPin className="w-5 h-5 text-brand-accent" />
                        Delivery Address
                      </h4>
                      <p className="text-base text-gray-800 font-medium leading-relaxed break-words">{orderDetails.delivery_address.address}</p>
                      <p className="text-sm text-gray-600 font-semibold mt-1 break-words">{orderDetails.delivery_address.area}, {orderDetails.delivery_address.city}</p>
                    </div>
                  )}

                  {/* Pricing Summary */}
                  <div className="border border-gray-100 rounded-xl p-4 sm:p-5 space-y-3 bg-gray-50/50">
                    <div className="flex justify-between text-base text-gray-700">
                      <span>Subtotal</span>
                      <span className="font-bold text-gray-900">৳{parseFloat(orderDetails.subtotal).toFixed(2)}</span>
                    </div>
                    {parseFloat(orderDetails.discount_amount) > 0 && (
                      <div className="flex justify-between text-base text-gray-700">
                        <span>Discount</span>
                        <span className="font-bold text-emerald-600">-৳{parseFloat(orderDetails.discount_amount).toFixed(2)}</span>
                      </div>
                    )}
                    <div className="flex justify-between text-base text-gray-700">
                      <span>Delivery Charge</span>
                      <span className="font-bold text-gray-900">৳{parseFloat(orderDetails.delivery_charge).toFixed(2)}</span>
                    </div>
                    {parseFloat(orderDetails.total_refunded) > 0 && (
                      <div className="flex justify-between text-base text-red-600">
                        <span>Refunded</span>
                        <span className="font-bold">-৳{parseFloat(orderDetails.total_refunded).toFixed(2)}</span>
                      </div>
                    )}
                    <div className="border-t border-gray-200 pt-3 flex justify-between items-center">
                      <span className="font-bold text-gray-900 text-base">Total Amount</span>
                      <span className="font-black text-brand-accent text-xl">
                        ৳{(parseFloat(orderDetails.total_amount) - parseFloat(orderDetails.total_refunded || "0")).toFixed(2)}
                      </span>
                    </div>
                  </div>

                </div>

              </div>

              {/* Centered Reset Tracker Button */}
              <div className="flex justify-center pt-4">
                <Button
                  onClick={handleReset}
                  className="h-12 px-10 flex items-center justify-center gap-2 text-xs font-bold uppercase tracking-wider bg-brand-accent hover:bg-brand-accent-hover text-white border-none transition-all duration-300"
                >
                  Track Another Order
                </Button>
              </div>
            </div>
          )}

        </div>

      </div>
    </section>
  );
}