"use client";

import { useEffect, useState } from "react";

import { stageLabel } from "@/lib/i18n";
import { useLanguage } from "@/lib/language-context";
import { type OrderStage, type OrderType } from "@/lib/order/types";
import { cn } from "@/lib/utils";

interface StageBadgeProps {
  stage: OrderStage;
  type: OrderType;
  className?: string;
  /** When true, alternates between stage label and remaining time every 2s */
  animated?: boolean;
  requestedAt?: string;
}

const STAGE_COLORS: Record<OrderStage, string> = {
  confirmed: "bg-blue-500/10 text-blue-700 border-blue-200 dark:text-blue-400",
  held_before_kitchen: "bg-yellow-500/10 text-yellow-700 border-yellow-200 dark:text-yellow-400",
  sent_to_kitchen: "bg-orange-500/10 text-orange-700 border-orange-200 dark:text-orange-400",
  preparing: "bg-orange-600/15 text-orange-800 border-orange-300 dark:text-orange-300",
  ready: "bg-green-500/10 text-green-700 border-green-200 dark:text-green-400",
  assigned: "bg-cyan-500/10 text-cyan-700 border-cyan-200 dark:text-cyan-400",
  out_for_delivery: "bg-violet-500/10 text-violet-700 border-violet-200 dark:text-violet-400",
  address_not_found: "bg-red-500/15 text-red-700 border-red-300 dark:text-red-400",
  completed: "bg-gray-500/10 text-gray-600 border-gray-200 dark:text-gray-400",
};

function formatRemainingTime(requestedAt: string): string {
  const diff = new Date(requestedAt).getTime() - Date.now();
  if (diff <= 0) return "Due now";
  const mins = Math.floor(diff / 60_000);
  if (mins < 60) return `${mins}m`;
  return `${Math.floor(mins / 60)}h ${mins % 60}m`;
}

export function StageBadge({ stage, type, className, animated = false, requestedAt }: StageBadgeProps) {
  const [showTime, setShowTime] = useState(false);
  const { lang } = useLanguage();

  useEffect(() => {
    if (!animated || !requestedAt) return;
    const interval = setInterval(() => {
      setShowTime((v) => !v);
    }, 2000);
    return () => clearInterval(interval);
  }, [animated, requestedAt]);

  const label = stageLabel(stage, type, lang);

  const displayLabel =
    animated && requestedAt && showTime
      ? formatRemainingTime(requestedAt)
      : label;

  return (
    <span
      className={cn(
        "inline-flex items-center rounded border px-2 py-0.5 font-medium text-xs transition-all",
        STAGE_COLORS[stage],
        className,
      )}
    >
      {displayLabel}
    </span>
  );
}