"use client";

import Link from "next/link";
import type { OrderStatusCounts } from "./types";

export type OrderTabValue =
  | "all"
  | "incoming"
  | "print_queue"
  | "waiting_tracking"
  | "UNPAID"
  | "failed_today"
  | "payment_problem_today"
  | "delivery_problem_today"
  | "cancelled_returned_today"
  | "payment_problem"
  | "delivery_problem"
  | "cancelled_returned"
  | "need_print"
  | "printed_waiting_dispatch"
  | "pickup_ready"
  | "SHIPPED"
  | "TO_CONFIRM_RECEIVE"
  | "COMPLETED"
  | "problem"
  | "IN_CANCEL"
  | "CANCELLED";

function countFor(value: OrderTabValue, counts: OrderStatusCounts) {
  if (value === "all") return counts.total;
  if (value === "incoming") return counts.incoming;
  if (value === "print_queue") return counts.waitingTracking + counts.needPrint + counts.printedWaitingDispatch;
  if (value === "waiting_tracking") return counts.waitingTracking;
  if (value === "UNPAID") return counts.baru;
  if (value === "need_print") return counts.needPrint;
  if (value === "pickup_ready") return counts.siapKirim;
  if (value === "SHIPPED") return counts.shipped;
  if (value === "TO_CONFIRM_RECEIVE") return counts.toConfirmReceive;
  if (value === "COMPLETED") return counts.completed;
  if (value === "problem") return counts.problem;
  if (value === "CANCELLED" || value === "IN_CANCEL") return counts.cancelled;
  return 0;
}

const primaryTabs: Array<{ label: string; title: string; value: OrderTabValue }> = [
  { label: "Menunggu Pemrosesan", title: "Pesanan baru yang perlu diatur pengirimannya", value: "incoming" },
  { label: "Menunggu Dicetak", title: "Pesanan yang menunggu resi atau belum dicetak", value: "print_queue" },
  { label: "Menunggu Pick-Up", title: "Pesanan siap diserahkan ke kurir", value: "pickup_ready" },
  { label: "Dikirim", title: "Order sudah SHIPPED", value: "SHIPPED" },
  { label: "Perlu Ditinjau", title: "Pesanan batal, retur, atau bermasalah", value: "problem" },
  { label: "Selesai", title: "Pesanan selesai dan dapat dihitung sebagai profit riil", value: "COMPLETED" },
  { label: "Semua Pesanan", title: "Seluruh pesanan dari semua status", value: "all" },
];

function belongsToTab(current: OrderTabValue, tab: OrderTabValue) {
  if (tab === "print_queue") return ["print_queue", "waiting_tracking", "need_print", "printed_waiting_dispatch"].includes(current);
  return current === tab;
}

export default function OrderStatusTabs({
  value,
  hrefFor,
  counts,
}: {
  value: OrderTabValue;
  hrefFor: (value: OrderTabValue) => string;
  counts: OrderStatusCounts;
}) {
  return (
    <div className="min-w-0 w-full basis-full md:w-auto md:basis-auto md:flex-1">
      <div className="scrollbar-hide flex items-center gap-1.5 overflow-x-auto">
        {primaryTabs.map((tab) => {
          const active = belongsToTab(value, tab.value);
          return (
            <Link
              href={hrefFor(tab.value)}
              key={tab.value}
              title={tab.title}
              className={[
                "flex shrink-0 items-center gap-2 rounded-lg border px-3.5 py-2.5 text-[12px] font-semibold transition-colors",
                active ? "border-emerald-600 bg-emerald-600 text-white shadow-sm dark:border-emerald-400 dark:bg-emerald-400 dark:text-slate-950" : "border-transparent bg-slate-50 text-slate-600 hover:border-slate-200 hover:bg-white hover:text-slate-950 dark:bg-slate-800 dark:text-slate-300",
              ].join(" ")}
            >
              <span>{tab.label}</span><span className={active ? "rounded-full bg-white/15 px-1.5 py-0.5 text-[10px]" : "rounded-full bg-white px-1.5 py-0.5 text-[10px] text-slate-500 ring-1 ring-slate-200 dark:bg-slate-900 dark:ring-slate-700"}>{countFor(tab.value, counts)}</span>
            </Link>
          );
        })}
      </div>
    </div>
  );
}