"use client";

import { useEffect, useState } from "react";

import Link from "next/link";

import { ChevronDown, Clock, Expand, Filter, MapPin, Package, Plus, Search, Truck } from "lucide-react";

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Sheet, SheetContent } from "@/components/ui/sheet";
import { NewOrderSheet } from "@/components/order-ticket/new-order-sheet";
import { OrderTicket } from "@/components/order-ticket/order-ticket";
import { StageBadge } from "@/components/order-ticket/stage-badge";
import { type AuthUser, getAuthUser } from "@/lib/auth";
import { useLanguage } from "@/lib/language-context";
import { STAGE_LABELS, type Order, type OrderStage, type OrderType } from "@/lib/order/types";
import { useOrdersStore } from "@/stores/orders/orders-store";

type StageFilter = "all" | OrderStage;
type TypeFilter = "all" | OrderType;

const ACTIVE_STAGES: OrderStage[] = [
  "confirmed",
  "held_before_kitchen",
  "sent_to_kitchen",
  "preparing",
  "ready",
  "assigned",
  "out_for_delivery",
];

export default function OrdersPage() {
  const [user, setUser] = useState<AuthUser | null>(null);
  const [selectedId, setSelectedId] = useState<string | null>(null);
  const [newOrderOpen, setNewOrderOpen] = useState(false);
  const [search, setSearch] = useState("");
  const [stageFilter, setStageFilter] = useState<StageFilter>("all");
  const [typeFilter, setTypeFilter] = useState<TypeFilter>("all");
  const [showCompleted, setShowCompleted] = useState(false);

  const orders = useOrdersStore((s) => s.orders);

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

  const selectedOrder = orders.find((o) => o.id === selectedId);

  const filtered = orders.filter((o) => {
    if (!showCompleted && o.stage === "completed") return false;
    if (stageFilter !== "all" && o.stage !== stageFilter) return false;
    if (typeFilter !== "all" && o.type !== typeFilter) return false;
    if (search) {
      const q = search.toLowerCase();
      return (
        o.id.toLowerCase().includes(q) ||
        o.customer.na.toLowerCase().includes(q) ||
        o.customer.mo.includes(q) ||
        (o.address?.ad.toLowerCase().includes(q) ?? false)
      );
    }
    return true;
  });

  const sortedOrders = [...filtered].sort((a, b) => {
    // Active orders first, then by orderedAt desc
    const aActive = ACTIVE_STAGES.includes(a.stage) ? 0 : 1;
    const bActive = ACTIVE_STAGES.includes(b.stage) ? 0 : 1;
    if (aActive !== bActive) return aActive - bActive;
    return new Date(b.orderedAt).getTime() - new Date(a.orderedAt).getTime();
  });

  const handleNavigate = (direction: "prev" | "next" | "prevHour" | "nextHour" | "prevDay" | "nextDay") => {
    if (!selectedId) return;

    const currentOrder = orders.find((o) => o.id === selectedId);
    if (!currentOrder) return;

    // For prev/next use the display-sorted list
    const idx = sortedOrders.findIndex((o) => o.id === selectedId);
    if (direction === "prev" && idx > 0) { setSelectedId(sortedOrders[idx - 1].id); return; }
    if (direction === "next" && idx < sortedOrders.length - 1) { setSelectedId(sortedOrders[idx + 1].id); return; }

    // For hour/day jumps use ALL orders sorted chronologically
    const byTime = [...orders].sort(
      (a, b) => new Date(a.orderedAt).getTime() - new Date(b.orderedAt).getTime(),
    );

    const HOUR = 60 * 60 * 1000;
    const DAY  = 24 * HOUR;
    const curTs   = new Date(currentOrder.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);

    if (direction === "prevHour") {
      // Most recent hour before current, then its first order
      const anchor = [...byTime].reverse().find((o) => hourOf(o) < curHour);
      if (anchor) {
        const h = hourOf(anchor);
        const first = byTime.find((o) => hourOf(o) === h);
        if (first) setSelectedId(first.id);
      }
    } else if (direction === "nextHour") {
      const anchor = byTime.find((o) => hourOf(o) > curHour);
      if (anchor) {
        const h = hourOf(anchor);
        const first = byTime.find((o) => hourOf(o) === h);
        if (first) setSelectedId(first.id);
      }
    } else if (direction === "prevDay") {
      const anchor = [...byTime].reverse().find((o) => dayOf(o) < curDay);
      if (anchor) {
        const d = dayOf(anchor);
        const first = byTime.find((o) => dayOf(o) === d);
        if (first) setSelectedId(first.id);
      }
    } else if (direction === "nextDay") {
      const anchor = byTime.find((o) => dayOf(o) > curDay);
      if (anchor) {
        const d = dayOf(anchor);
        const first = byTime.find((o) => dayOf(o) === d);
        if (first) setSelectedId(first.id);
      }
    }
  };

  const activeCounts = Object.fromEntries(
    ACTIVE_STAGES.map((s) => [s, orders.filter((o) => o.stage === s).length]),
  ) as Record<OrderStage, number>;

  return (
    <div className="flex h-full flex-col gap-4">
      {/* Page header */}
      <div className="flex flex-wrap items-center justify-between gap-3">
        <div>
          <h1 className="font-bold text-xl">Order List</h1>
          <p className="text-muted-foreground text-sm">
            {orders.filter((o) => ACTIVE_STAGES.includes(o.stage)).length} active orders
          </p>
        </div>
        <div className="flex items-center gap-2">
          <Button variant="outline" size="sm" onClick={() => setShowCompleted((v) => !v)}>
            {showCompleted ? "Hide completed" : "Show completed"}
          </Button>
          {(user?.role === "admin" || user?.role === "foh") && (
            <Button size="sm" className="gap-1.5" onClick={() => setNewOrderOpen(true)}>
              <Plus className="size-4" />
              New Order
            </Button>
          )}
        </div>
      </div>

      {/* Stage summary pills */}
      <div className="flex flex-wrap gap-2">
        {ACTIVE_STAGES.filter((s) => activeCounts[s] > 0).map((s) => (
          <button
            key={s}
            type="button"
            onClick={() => setStageFilter((prev) => (prev === s ? "all" : s))}
            className={`flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs transition-colors ${
              stageFilter === s
                ? "border-primary bg-primary text-primary-foreground"
                : "hover:border-primary/40 hover:bg-muted/50"
            }`}
          >
            <StageBadge stage={s} type="delivery" className="border-0 bg-transparent p-0 text-[10px]" />
            <span className="font-bold">{activeCounts[s]}</span>
          </button>
        ))}
      </div>

      {/* Filters row */}
      <div className="flex flex-wrap gap-2">
        <div className="relative flex-1 min-w-40">
          <Search className="absolute top-1/2 left-2.5 size-3.5 -translate-y-1/2 text-muted-foreground" />
          <Input
            placeholder="Search order, name, mobile…"
            value={search}
            onChange={(e) => setSearch(e.target.value)}
            className="h-8 pl-8 text-sm"
          />
        </div>
        <Select value={typeFilter} onValueChange={(v) => setTypeFilter(v as TypeFilter)}>
          <SelectTrigger className="h-8 w-36 text-sm">
            <SelectValue placeholder="All types" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="all">All types</SelectItem>
            <SelectItem value="delivery">Delivery</SelectItem>
            <SelectItem value="collection">Collection</SelectItem>
          </SelectContent>
        </Select>
      </div>

      {/* Order list */}
      <div className="flex-1 overflow-auto">
        <div className="space-y-1.5">
          {sortedOrders.length === 0 && (
            <div className="flex flex-col items-center justify-center py-16 text-muted-foreground">
              <Package className="size-10 mb-3 opacity-30" />
              <p className="text-sm">No orders match the current filters</p>
            </div>
          )}
          {sortedOrders.map((order) => (
            <OrderRow
              key={order.id}
              order={order}
              isSelected={selectedId === order.id}
              onClick={() => setSelectedId(order.id)}
            />
          ))}
        </div>
      </div>

      {/* Order ticket sheet */}
      <Sheet open={!!selectedOrder} onOpenChange={(open) => { if (!open) setSelectedId(null); }}>
        <SheetContent
          side="right"
          className="w-full w-[440px] max-w-[92vw] p-0 overflow-hidden flex flex-col"
        >
          {selectedOrder && user && (
            <OrderTicket
              order={selectedOrder}
              role={user.role}
              onNew={() => { setSelectedId(null); setNewOrderOpen(true); }}
              onNavigate={handleNavigate}
            />
          )}
        </SheetContent>
      </Sheet>

      {/* New order sheet */}
      <NewOrderSheet
        open={newOrderOpen}
        onClose={() => setNewOrderOpen(false)}
        onCreated={(id) => setSelectedId(id)}
      />
    </div>
  );
}

function OrderRow({
  order,
  isSelected,
  onClick,
}: {
  order: Order;
  isSelected: boolean;
  onClick: () => void;
}) {
  const { lang } = useLanguage();
  const isCompleted = order.stage === "completed";
  const requestedTime = order.requestedAt
    ? new Date(order.requestedAt).toLocaleTimeString("en-GB", { hour: "2-digit", minute: "2-digit" })
    : null;

  return (
    <button
      type="button"
      onClick={onClick}
      className={`w-full rounded-lg border p-3 text-left transition-all hover:border-primary/40 hover:shadow-sm ${
        isSelected ? "border-primary bg-primary/5" : "bg-card"
      } ${isCompleted ? "opacity-60" : ""}`}
    >
      <div className="flex items-start justify-between gap-3">
        <div className="min-w-0 flex-1">
          <div className="flex items-center gap-2 flex-wrap">
            <span className="font-mono font-bold text-sm">{order.id}</span>
            <span
              className={`rounded border px-1.5 py-0 text-[10px] font-medium ${
                order.type === "delivery"
                  ? "border-blue-200 bg-blue-500/10 text-blue-700 dark:text-blue-400"
                  : "border-green-200 bg-green-500/10 text-green-700 dark:text-green-400"
              }`}
            >
              {order.type}
            </span>
            <StageBadge stage={order.stage} type={order.type} />
          </div>

          <div className="mt-1 flex items-center gap-3 text-[13px]">
            <span className="font-medium">{order.customer.na}</span>
            <span className="text-muted-foreground font-mono text-[11px]">{order.customer.mo}</span>
          </div>

          {order.type === "delivery" && order.address && (
            <div className="mt-0.5 flex items-start gap-1 text-muted-foreground text-[12px]">
              <MapPin className="mt-0.5 size-3 shrink-0" />
              <span className="truncate">{order.address.ad}</span>
            </div>
          )}

          {/* Items summary */}
          <p className="mt-0.5 truncate text-muted-foreground text-[12px]">
            {order.items.map((i) => `${lang === "zh" ? i.chineseName : i.description} ×${i.qty}`).join(", ")}
          </p>
        </div>

        <div className="shrink-0 text-right">
          <p className="font-bold text-sm">£{order.charges.total.toFixed(2)}</p>
          <p
            className={`text-[11px] ${order.charges.paymentStatus === "paid" ? "text-green-600" : "text-red-500"}`}
          >
            {order.charges.paymentStatus}
          </p>
          {requestedTime && (
            <div className="mt-1 flex items-center gap-1 text-muted-foreground text-[11px]">
              <Clock className="size-3" />
              {requestedTime}
            </div>
          )}
          {order.type === "delivery" && order.address?.miles && (
            <div className="flex items-center gap-1 justify-end text-muted-foreground text-[11px]">
              <Truck className="size-3" />
              {order.address.miles} mi
            </div>
          )}
        </div>
      </div>

      {/* Full-view link — opens standalone OrderTicket page */}
      <div className="mt-2 border-t pt-2 flex justify-end">
        <Link
          href={`/orders/${order.id}`}
          onClick={(e) => e.stopPropagation()}
          className="flex items-center gap-1 text-[11px] text-muted-foreground hover:text-primary transition-colors"
        >
          <Expand className="size-3" />
          Full ticket view
        </Link>
      </div>
    </button>
  );
}