import { createFileRoute, Link } from "@tanstack/react-router";
import { Header } from "@/components/site/Header";
import { Footer } from "@/components/site/Footer";
import { SignInModal, CartDrawer, CheckoutFlow } from "@/components/site/Modals";
import { useState } from "react";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Package, Radio, ArrowRight } from "lucide-react";
import { useStore } from "@/lib/store";
import { LiveMapTracker } from "@/components/site/LiveMapTracker";

export const Route = createFileRoute("/track-order")({
  head: () => ({
    meta: [{ title: "Track Order — SulejaMarket Live Map Tracking" }],
  }),
  component: TrackOrderPage,
});

function TrackOrderPage() {
  const [signInOpen, setSignInOpen] = useState(false);
  const [cartOpen, setCartOpen] = useState(false);
  const [checkoutOpen, setCheckoutOpen] = useState(false);
  const [orderIdInput, setOrderIdInput] = useState("");
  
  const { orders } = useStore();
  const matchedOrder = orders.find((o) => o.id.toLowerCase() === orderIdInput.trim().toLowerCase());

  return (
    <div className="min-h-screen bg-neutral-50 flex flex-col">
      <SignInModal open={signInOpen} onOpenChange={setSignInOpen} />
      <CartDrawer open={cartOpen} onOpenChange={setCartOpen} onCheckout={() => { setCartOpen(false); setCheckoutOpen(true); }} />
      <CheckoutFlow open={checkoutOpen} onOpenChange={setCheckoutOpen} />
      <Header onOpenCart={() => setCartOpen(true)} onOpenSignIn={() => setSignInOpen(true)} />
      
      <main className="flex-1 max-w-[800px] w-full mx-auto px-4 py-12 space-y-6">
        <div className="bg-white p-8 rounded-xl border text-center space-y-4 shadow-sm">
          <div className="w-14 h-14 rounded-full bg-orange-100 text-orange-500 flex items-center justify-center mx-auto">
            <Radio className="w-7 h-7 animate-pulse" />
          </div>
          <div>
            <h1 className="text-2xl font-black text-neutral-900">Live Order Milestone Tracking</h1>
            <p className="text-neutral-500 text-xs mt-1">Enter your order ID (e.g. ORD-...) to track live package location on map.</p>
          </div>
          
          <div className="flex gap-2 max-w-md mx-auto">
            <Input 
              value={orderIdInput} 
              onChange={(e) => setOrderIdInput(e.target.value)} 
              placeholder="Enter Order ID (e.g. ORD-123)" 
              className="text-sm h-11"
            />
            {orderIdInput ? (
              <Link to="/orders/$id" params={{ id: orderIdInput.trim() }} className="shrink-0">
                <Button className="bg-orange-500 hover:bg-orange-600 h-11 px-5 gap-1 font-semibold">
                  Track <ArrowRight className="w-4 h-4" />
                </Button>
              </Link>
            ) : (
              <Button disabled className="shrink-0 bg-orange-500 opacity-50 h-11 px-5">Track</Button>
            )}
          </div>

          {orders.length > 0 && (
            <div className="pt-4 border-t text-left">
              <div className="text-xs font-bold text-neutral-500 uppercase tracking-wider mb-2">Recent Orders</div>
              <div className="flex flex-wrap gap-2">
                {orders.slice(0, 4).map((o) => (
                  <Link key={o.id} to="/orders/$id" params={{ id: o.id }}>
                    <span className="text-xs font-medium px-3 py-1.5 rounded-lg border bg-neutral-50 hover:bg-orange-50 hover:border-orange-300 text-neutral-800 flex items-center gap-1.5 transition">
                      <Package className="w-3.5 h-3.5 text-orange-500" /> {o.id} ({o.status})
                    </span>
                  </Link>
                ))}
              </div>
            </div>
          )}
        </div>

        {matchedOrder && (
          <LiveMapTracker
            orderId={matchedOrder.id}
            status={matchedOrder.status}
            destinationAddress={matchedOrder.address}
            driverPhone={matchedOrder.driverPhone}
          />
        )}
      </main>
      
      <Footer />
    </div>
  );
}
