"use client";

import type { Order, OrderStage } from "@/lib/order/types";
import { StageBadge } from "./stage-badge";

interface TicketStageStripProps {
  order: Order;
}

const STAGES: { key: OrderStage; short: string }[] = [
  { key: "confirmed",          short: "Conf" },
  { key: "held_before_kitchen", short: "Hold" },
  { key: "sent_to_kitchen",    short: "Sent" },
  { key: "preparing",          short: "Prep" },
  { key: "ready",              short: "Rdy" },
  { key: "assigned",           short: "Asgn" },
  { key: "out_for_delivery",   short: "OFD" },
  { key: "completed",          short: "Done" },
];

function formatDateTime(iso: string): string {
  return new Date(iso).toLocaleString("en-GB", {
    day: "2-digit", month: "short", year: "numeric",
    hour: "2-digit", minute: "2-digit",
  });
}

function formatRequestedTime(iso: string): string {
  const d = new Date(iso);
  const now = new Date();
  const isToday =
    d.getFullYear() === now.getFullYear() &&
    d.getMonth() === now.getMonth() &&
    d.getDate() === now.getDate();
  const timeStr = d.toLocaleTimeString("en-GB", { hour: "2-digit", minute: "2-digit" });
  return isToday ? `TODAY, ${timeStr}` : formatDateTime(iso);
}

export function TicketStageStrip({ order }: TicketStageStripProps) {
  const currentIdx = STAGES.findIndex((s) => s.key === order.stage);

  return (
    <div className="border-b bg-blue-100 dark:bg-blue-950/40">
      {/* Row 1: order ID · type · requested time · live stage badge */}
      <div className="flex flex-wrap items-center justify-between gap-x-3 gap-y-1 px-3 pt-2 pb-1">
        <div className="flex items-center gap-2">
          <span className="font-mono font-bold text-sm text-blue-900 dark:text-blue-100">{order.id}</span>
          <span
            className={`rounded border px-1.5 py-0.5 font-semibold text-[10px] uppercase ${
              order.type === "delivery"
                ? "border-blue-300 bg-blue-200 text-blue-800 dark:border-blue-700 dark:bg-blue-900/60 dark:text-blue-200"
                : "border-emerald-300 bg-emerald-100 text-emerald-800 dark:border-emerald-700 dark:bg-emerald-900/60 dark:text-emerald-200"
            }`}
          >
            {order.type}
          </span>
        </div>

        {order.requestedAt && (
          <span className="text-blue-700 text-xs dark:text-blue-300">
            Ready:{" "}
            <span className="font-semibold">{formatRequestedTime(order.requestedAt)}</span>
          </span>
        )}

        <StageBadge
          stage={order.stage}
          type={order.type}
          animated
          requestedAt={order.requestedAt}
        />
      </div>

      {/* Row 2: compact stage progress bar */}
      <div className="flex items-center gap-0.5 overflow-x-auto px-3 pb-1.5 no-scrollbar">
        {STAGES.map((s, i) => {
          const isPast    = i < currentIdx;
          const isCurrent = i === currentIdx;
          const isFuture  = i > currentIdx;
          return (
            <div key={s.key} className="flex items-center">
              <span
                className={`whitespace-nowrap rounded px-1 py-0.5 font-mono text-[9px] leading-none ${
                  isCurrent
                    ? "bg-blue-600 text-white font-bold dark:bg-blue-500"
                    : isPast
                    ? "bg-blue-300/60 text-blue-700 dark:bg-blue-800/60 dark:text-blue-300"
                    : isFuture
                    ? "text-blue-400/60 dark:text-blue-600"
                    : ""
                }`}
              >
                {s.short}
              </span>
              {i < STAGES.length - 1 && (
                <span className={`mx-0.5 text-[8px] ${i < currentIdx ? "text-blue-400" : "text-blue-300/40"}`}>›</span>
              )}
            </div>
          );
        })}
      </div>

      {/* Row 3: ordered-at timestamp */}
      <p className="px-3 pb-1 text-blue-600/70 text-[10px] dark:text-blue-400/60">
        Ordered: {formatDateTime(order.orderedAt)}
      </p>
    </div>
  );
}