"use client";

import { ClockIcon } from "lucide-react";
import { cn } from "@/lib/utils";
import { useNow } from "@/hooks/useNow";

function formatCountdown(ms: number): string {
  if (ms <= 0) return "Expired";
  const totalSeconds = Math.floor(ms / 1000);
  const days = Math.floor(totalSeconds / 86400);
  const hours = Math.floor((totalSeconds % 86400) / 3600);
  const minutes = Math.floor((totalSeconds % 3600) / 60);
  const seconds = totalSeconds % 60;

  if (days > 0) {
    return `${days}d ${hours}h`;
  }
  if (hours > 0) {
    return `${hours}h ${String(minutes).padStart(2, "0")}m`;
  }
  return `${String(minutes).padStart(2, "0")}:${String(seconds).padStart(2, "0")}`;
}

interface CountdownProps {
  expiresAt: string | null | undefined;
  className?: string;
}

export function Countdown({ expiresAt, className }: CountdownProps) {
  const now = useNow();

  if (!expiresAt) return null;

  const ms = new Date(expiresAt).getTime() - now;
  const urgent = ms > 0 && ms < 60 * 60 * 1000;

  return (
    <span
      className={cn(
        "inline-flex items-center gap-1 font-mono text-xs",
        ms <= 0 ? "text-red-400" : urgent ? "text-amber-400" : "text-muted-foreground",
        className,
      )}
      title={new Date(expiresAt).toLocaleString()}
    >
      <ClockIcon className="size-3" />
      {formatCountdown(ms)}
    </span>
  );
}