import { Check, Clock, X, Undo2 } from "lucide-react";
import { statusLabel, type SaleStatus } from "./sale-status";
import { useLanguage } from "@/hooks/use-language";

const FLOW: SaleStatus[] = ["pending", "confirmed", "processing", "ready_for_delivery", "delivered"];

export function SaleStatusTimeline({
  current,
  logs = [],
}: {
  current: string;
  logs?: Array<{ change_type: string; new_value: string | null; created_at: string }>;
}) {
  const { lang } = useLanguage();
  const isBn = lang === "bn";

  // Map: status -> when it happened (from logs)
  const stamps = new Map<string, string>();
  for (const l of logs) {
    if ((l.change_type === "status" || l.change_type === "created") && l.new_value) {
      if (!stamps.has(l.new_value)) stamps.set(l.new_value, l.created_at);
    }
  }

  const isTerminal = current === "cancelled" || current === "returned";
  const currentIdx = FLOW.indexOf(current as SaleStatus);

  if (isTerminal) {
    const isCancel = current === "cancelled";
    const Icon = isCancel ? X : Undo2;
    const cls = isCancel
      ? "bg-red-500/10 border-red-500/40 text-red-700 dark:text-red-400"
      : "bg-orange-500/10 border-orange-500/40 text-orange-700 dark:text-orange-400";
    const when = stamps.get(current);
    return (
      <div className={`rounded-xl border p-4 flex items-center gap-3 ${cls}`}>
        <div className={`h-10 w-10 rounded-full flex items-center justify-center ${isCancel ? "bg-red-500" : "bg-orange-500"} text-white`}>
          <Icon className="h-5 w-5" />
        </div>
        <div className="flex-1">
          <div className="font-semibold">{statusLabel(current, isBn)}</div>
          {when && <div className="text-xs opacity-80">{new Date(when).toLocaleString()}</div>}
        </div>
      </div>
    );
  }

  return (
    <div className="rounded-xl border border-border bg-card p-4">
      <div className="text-sm font-semibold mb-4">{isBn ? "অর্ডার অগ্রগতি" : "Order Progress"}</div>
      <div className="flex items-start justify-between gap-1 overflow-x-auto">
        {FLOW.map((s, i) => {
          const reached = currentIdx >= i && currentIdx >= 0;
          const isCurrent = currentIdx === i;
          const when = stamps.get(s);
          return (
            <div key={s} className="flex-1 min-w-[80px] flex flex-col items-center relative">
              {i > 0 && (
                <div
                  className={`absolute top-4 right-1/2 w-full h-0.5 ${
                    currentIdx >= i ? "bg-primary" : "bg-border"
                  }`}
                />
              )}
              <div
                className={`relative z-10 h-8 w-8 rounded-full flex items-center justify-center border-2 ${
                  reached
                    ? "bg-primary border-primary text-primary-foreground"
                    : "bg-card border-border text-muted-foreground"
                } ${isCurrent ? "ring-4 ring-primary/20" : ""}`}
              >
                {reached ? <Check className="h-4 w-4" /> : <Clock className="h-4 w-4" />}
              </div>
              <div className={`mt-2 text-[11px] text-center font-medium ${reached ? "text-foreground" : "text-muted-foreground"}`}>
                {statusLabel(s, isBn)}
              </div>
              {when && (
                <div className="text-[10px] text-muted-foreground text-center mt-0.5">
                  {new Date(when).toLocaleDateString()}
                </div>
              )}
            </div>
          );
        })}
      </div>
    </div>
  );
}
