"use client";
import { useParams, useRouter } from "next/navigation";
import { motion } from "framer-motion";
import {
  ArrowLeft,
  Truck,
  MapPin,
  Calendar,
  CheckCircle,
  Package,
  Home,
  ClipboardList,
  Star,
  Copy,
  Check,
} from "lucide-react";
import { useState, useCallback } from "react";
import { useOrders } from "@/lib/OrderContext";
import { OrderStatusBadge } from "./OrderStatusBadge";
import { formatOrderDate, formatOrderDateTime } from "./mockData";
import { useFormatPrice } from "@/hooks/useFormatPrice";

const PIPELINE = [
  { status: "placed", label: "Order Placed", icon: ClipboardList },
  { status: "confirmed", label: "Confirmed", icon: CheckCircle },
  { status: "packed", label: "Packed", icon: Package },
  { status: "shipped", label: "Shipped", icon: Truck },
  { status: "out_for_delivery", label: "Out for Delivery", icon: Truck },
  { status: "delivered", label: "Delivered", icon: Home },
  { status: "completed", label: "Completed", icon: Star },
];

const STEP_ORDER = PIPELINE.map((p) => p.status);

export function TrackingPage() {
  const params = useParams<{ id: string }>();
  const router = useRouter();
  const formatPrice = useFormatPrice();
  const { getOrderById } = useOrders();
  const order = getOrderById(params.id);
  const [copied, setCopied] = useState(false);

  const copyTracking = useCallback(() => {
    if (order?.shipping.trackingNumber) {
      navigator.clipboard.writeText(order.shipping.trackingNumber).catch(() => {});
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    }
  }, [order]);

  if (!order) {
    return (
      <div className="flex flex-col items-center justify-center h-full gap-4 px-4 py-20">
        <Truck size={48} className="text-[var(--text-muted)] opacity-40" />
        <p className="font-bold text-[var(--text-primary)]">Order Not Found</p>
        <button onClick={() => router.push("/orders")} className="text-sm text-[var(--accent)]">
          ← Back to Orders
        </button>
      </div>
    );
  }

  const currentStepIdx = STEP_ORDER.indexOf(order.status);
  const isTerminal = ["cancelled", "disputed"].includes(order.status);

  const pct = isTerminal
    ? 0
    : currentStepIdx < 0
    ? 0
    : Math.round((currentStepIdx / (PIPELINE.length - 1)) * 100);

  return (
    <div className="min-h-full pb-20" style={{ background: "var(--bg)" }}>
      <div className="max-w-6xl mx-auto px-4 py-6">
        {/* Back */}
        <div className="flex items-center gap-3 mb-6">
          <button
            onClick={() => router.back()}
            className="p-2 rounded-full hover:bg-[var(--card)] transition-colors"
          >
            <ArrowLeft size={18} className="text-[var(--text-muted)]" />
          </button>
          <h1 className="text-base font-black text-[var(--text-primary)]">Order Tracking</h1>
        </div>

        {/* Status hero */}
        <motion.div
          initial={{ opacity: 0, y: 16 }}
          animate={{ opacity: 1, y: 0 }}
          className="rounded-3xl overflow-hidden border border-[var(--border)] mb-6"
          style={{
            background: "linear-gradient(135deg, var(--deep) 0%, var(--card) 100%)",
          }}
        >
          <div className="p-6">
            <div className="flex items-center justify-between mb-4">
              <div>
                <p className="text-[10px] text-[var(--text-muted)] uppercase tracking-wider mb-1">
                  Current Status
                </p>
                <OrderStatusBadge
                  status={order.status}
                  size="md"
                  pulse={["shipped", "out_for_delivery"].includes(order.status)}
                />
              </div>
              {order.shipping.estimatedDelivery && !isTerminal && (
                <div className="text-right">
                  <p className="text-[10px] text-[var(--text-muted)]">Est. Delivery</p>
                  <p className="text-xs font-bold text-[var(--text-primary)]">
                    {formatOrderDate(order.shipping.estimatedDelivery)}
                  </p>
                </div>
              )}
            </div>

            {/* Progress bar */}
            {!isTerminal && (
              <div className="mb-2">
                <div className="flex items-center justify-between mb-1.5">
                  <span className="text-[10px] text-[var(--text-muted)]">Delivery Progress</span>
                  <span className="text-[10px] font-mono text-[var(--accent)]">{pct}%</span>
                </div>
                <div className="h-2 rounded-full overflow-hidden" style={{ background: "rgba(255,255,255,0.08)" }}>
                  <motion.div
                    initial={{ width: 0 }}
                    animate={{ width: `${pct}%` }}
                    transition={{ duration: 1.2, ease: [0.16, 1, 0.3, 1], delay: 0.3 }}
                    className="h-full rounded-full"
                    style={{ background: "linear-gradient(90deg, var(--accent), #f0c040)" }}
                  />
                </div>
              </div>
            )}

            {/* Pipeline steps */}
            {!isTerminal && (
              <div className="flex items-center justify-between mt-4 overflow-x-auto no-scrollbar gap-1">
                {PIPELINE.map((step, i) => {
                  const done = i <= currentStepIdx;
                  const active = i === currentStepIdx;
                  const Icon = step.icon;
                  return (
                    <div key={step.status} className="flex flex-col items-center gap-1 shrink-0">
                      <motion.div
                        animate={{
                          background: done ? "var(--accent)" : "rgba(255,255,255,0.06)",
                          scale: active ? 1.15 : 1,
                        }}
                        transition={{ duration: 0.3 }}
                        className="w-7 h-7 rounded-full flex items-center justify-center border border-transparent"
                        style={{
                          borderColor: done ? "var(--accent)" : "rgba(255,255,255,0.1)",
                        }}
                      >
                        <Icon size={12} style={{ color: done ? "#fff" : "rgba(255,255,255,0.3)" }} />
                      </motion.div>
                      <span
                        className="text-[8px] font-medium text-center leading-tight max-w-[44px]"
                        style={{ color: done ? "var(--text-primary)" : "rgba(255,255,255,0.3)" }}
                      >
                        {step.label}
                      </span>
                    </div>
                  );
                })}
              </div>
            )}
          </div>
        </motion.div>

        {/* Courier + tracking */}
        {order.shipping.trackingNumber && (
          <motion.div
            initial={{ opacity: 0, y: 12 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.15 }}
            className="rounded-2xl overflow-hidden border border-[var(--border)] mb-5"
            style={{ background: "var(--card)" }}
          >
            <div
              className="flex items-center gap-3 px-5 py-4 border-b border-[var(--border)]"
              style={{ background: "rgba(240,192,64,0.05)" }}
            >
              <div
                className="w-10 h-10 rounded-xl flex items-center justify-center font-black text-sm text-[var(--bg)]"
                style={{ background: "#f0c040" }}
              >
                {(order.shipping.courierName ?? "?").substring(0, 2).toUpperCase()}
              </div>
              <div className="flex-1">
                <p className="text-sm font-bold text-[var(--text-primary)]">
                  {order.shipping.courierName ?? "Courier"}
                </p>
                {order.shipping.currentLocation && (
                  <div className="flex items-center gap-1 mt-0.5">
                    <MapPin size={10} className="text-[var(--accent)]" />
                    <p className="text-[10px] text-[var(--text-muted)]">{order.shipping.currentLocation}</p>
                  </div>
                )}
              </div>
            </div>
            <div className="px-5 py-4">
              <p className="text-[10px] text-[var(--text-muted)] mb-1">Tracking Number</p>
              <div className="flex items-center gap-3 mb-3">
                <p className="font-mono text-sm font-bold text-[var(--text-primary)]">
                  {order.shipping.trackingNumber}
                </p>
                <button onClick={copyTracking} className="p-1.5 rounded-lg hover:bg-[var(--bg)]">
                  {copied ? (
                    <Check size={13} className="text-green-400" />
                  ) : (
                    <Copy size={13} className="text-[var(--text-muted)]" />
                  )}
                </button>
              </div>

              {/* Map placeholder */}
              <div
                className="h-32 rounded-xl flex items-center justify-center"
                style={{
                  background: "linear-gradient(135deg, rgba(15,52,96,0.8) 0%, rgba(22,33,62,0.8) 100%)",
                  border: "1px solid var(--border)",
                }}
              >
                <div className="flex flex-col items-center gap-2 opacity-50">
                  <MapPin size={24} className="text-[var(--accent)]" />
                  <p className="text-xs text-[var(--text-muted)]">Live map — Coming Soon</p>
                </div>
              </div>
            </div>
          </motion.div>
        )}

        {/* Shipping address */}
        <motion.div
          initial={{ opacity: 0, y: 12 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.2 }}
          className="rounded-2xl overflow-hidden border border-[var(--border)] mb-5"
          style={{ background: "var(--card)" }}
        >
          <div className="flex items-center gap-2 px-5 py-3 border-b border-[var(--border)]">
            <MapPin size={14} className="text-[var(--accent)]" />
            <span className="text-sm font-bold text-[var(--text-primary)]">Delivery Address</span>
          </div>
          <div className="p-5">
            <p className="text-sm font-semibold text-[var(--text-primary)] mb-1">{order.shipping.recipientName}</p>
            <p className="text-xs text-[var(--text-muted)] leading-relaxed">
              {order.shipping.address}
              <br />
              {order.shipping.city}, {order.shipping.pincode}
            </p>
            <p className="text-xs text-[var(--text-muted)] mt-1.5">{order.shipping.phone}</p>
          </div>
        </motion.div>

        {/* Product mini */}
        <motion.div
          initial={{ opacity: 0, y: 12 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.25 }}
          className="flex items-center gap-3 p-4 rounded-2xl border border-[var(--border)] mb-5"
          style={{ background: "var(--card)" }}
        >
          <img
            src={order.listingImage}
            alt={order.listingTitle}
            className="w-14 h-14 rounded-xl object-cover shrink-0"
          />
          <div className="flex-1 min-w-0">
            <p className="text-xs font-semibold text-[var(--text-primary)] line-clamp-1">{order.listingTitle}</p>
            <p className="text-[10px] text-[var(--text-muted)] mt-0.5">Order: {order.id}</p>
          </div>
          <p className="text-sm font-black text-[var(--accent)] shrink-0">{formatPrice(order.totalAmount)}</p>
        </motion.div>

        {/* Full details button */}
        <button
          onClick={() => router.push(`/orders/${order.id}`)}
          className="w-full py-3 rounded-xl text-sm font-semibold border border-[var(--border)] text-[var(--text-muted)] hover:text-[var(--text-primary)] transition-colors"
          style={{ background: "var(--card)" }}
        >
          View Full Order Details
        </button>
      </div>
    </div>
  );
}