"use client";

import { use, useEffect, useState } from "react";

import Link from "next/link";
import { useRouter } from "next/navigation";

import { ArrowLeft, ExternalLink } from "lucide-react";

import { OrderTicket } from "@/components/order-ticket/order-ticket";
import { type AuthUser, getAuthUser } from "@/lib/auth";
import { type Order } from "@/lib/order/types";
import { useOrdersStore } from "@/stores/orders/orders-store";

export default function OrderTicketPage({ params }: { params: Promise<{ orderId: string }> }) {
  const { orderId } = use(params);
  const router = useRouter();
  const [user, setUser] = useState<AuthUser | null>(null);

  const orders = useOrdersStore((s) => s.orders);
  const order = orders.find((o) => o.id === orderId);

  // Orders sorted chronologically for time-based navigation
  const byTime = [...orders].sort(
    (a, b) => new Date(a.orderedAt).getTime() - new Date(b.orderedAt).getTime(),
  );

  function navigate(dir: "prev" | "next" | "prevHour" | "nextHour" | "prevDay" | "nextDay") {
    if (!order) return;

    const HOUR = 60 * 60 * 1000;
    const DAY  = 24 * HOUR;
    const curTs   = new Date(order.orderedAt).getTime();
    const curHour = Math.floor(curTs / HOUR);
    const curDay  = Math.floor(curTs / DAY);
    const hourOf  = (o: Order) => Math.floor(new Date(o.orderedAt).getTime() / HOUR);
    const dayOf   = (o: Order) => Math.floor(new Date(o.orderedAt).getTime() / DAY);

    const go = (id: string) => router.push(`/orders/${id}`);

    if (dir === "prev" || dir === "next") {
      const idx = byTime.findIndex((o) => o.id === orderId);
      if (dir === "prev" && idx > 0) go(byTime[idx - 1].id);
      if (dir === "next" && idx < byTime.length - 1) go(byTime[idx + 1].id);
    } else if (dir === "prevHour") {
      const anchor = [...byTime].reverse().find((o) => hourOf(o) < curHour);
      if (anchor) { const first = byTime.find((o) => hourOf(o) === hourOf(anchor)); if (first) go(first.id); }
    } else if (dir === "nextHour") {
      const anchor = byTime.find((o) => hourOf(o) > curHour);
      if (anchor) { const first = byTime.find((o) => hourOf(o) === hourOf(anchor)); if (first) go(first.id); }
    } else if (dir === "prevDay") {
      const anchor = [...byTime].reverse().find((o) => dayOf(o) < curDay);
      if (anchor) { const first = byTime.find((o) => dayOf(o) === dayOf(anchor)); if (first) go(first.id); }
    } else if (dir === "nextDay") {
      const anchor = byTime.find((o) => dayOf(o) > curDay);
      if (anchor) { const first = byTime.find((o) => dayOf(o) === dayOf(anchor)); if (first) go(first.id); }
    }
  }

  useEffect(() => {
    setUser(getAuthUser());
  }, []);

  if (!order || !user) {
    return (
      <div className="flex flex-col items-center justify-center py-24 gap-4 text-muted-foreground">
        <p className="text-sm">Order {orderId} not found</p>
        <Link href="/orders" className="text-primary text-sm hover:underline flex items-center gap-1">
          <ArrowLeft className="size-3.5" /> Back to Order List
        </Link>
      </div>
    );
  }

  return (
    <div className="flex h-full flex-col">
      {/* Page top bar */}
      <div className="flex items-center justify-between pb-3">
        <Link
          href="/orders"
          className="flex items-center gap-1.5 text-muted-foreground text-sm hover:text-foreground transition-colors"
        >
          <ArrowLeft className="size-4" />
          Order List
        </Link>
        <a
          href={`/track/${orderId}`}
          target="_blank"
          rel="noopener noreferrer"
          className="flex items-center gap-1 text-muted-foreground text-xs hover:text-primary transition-colors"
          title="Customer tracking view"
        >
          <ExternalLink className="size-3.5" />
          Customer View
        </a>
      </div>

      {/* Ticket centred in a narrow column — matches wireframe receipt layout */}
      <div className="flex flex-1 justify-center overflow-hidden">
        <div className="w-full max-w-sm overflow-hidden rounded-xl border shadow-md flex flex-col">
          <OrderTicket
            order={order}
            role={user.role}
            onClose={() => router.push("/orders")}
            onNavigate={navigate}
          />
        </div>
      </div>
    </div>
  );
}