import { cn } from "@/lib/utils";
import { Check, Clock3 } from "lucide-react";
import { DetailCard } from "./detail-card";
import { formatDateTime } from "../../lib/format-utils";
import type { TimelineEvent } from "../../types";

interface OrderTimelineProps {
  events: TimelineEvent[];
}

/**
 * Vertical timeline of the order lifecycle. Completed events are solid;
 * upcoming events are dimmed with dashed connectors.
 */
export function OrderTimeline({ events }: OrderTimelineProps) {
  const hasUpcoming = events.some((e) => !e.completed);

  return (
    <DetailCard title="Order timeline" icon={<Clock3 className="h-4 w-4 text-muted-foreground" />}>
      <ol className="relative space-y-0">
        {events.map((event, index) => {
          const isLast = index === events.length - 1;
          const upcoming = !event.completed;

          return (
            <li key={event.id} className="relative flex gap-4 pb-6 last:pb-0">
              {/* Connector */}
              {!isLast && (
                <span
                  aria-hidden
                  className={cn(
                    "absolute top-7 left-[11px] h-[calc(100%-1.75rem)] w-px",
                    upcoming ? "border-l border-dashed border-border" : "bg-border",
                  )}
                />
              )}

              {/* Dot */}
              <span
                aria-hidden
                className={cn(
                  "mt-0.5 flex size-6 shrink-0 items-center justify-center rounded-full ring-4 ring-background",
                  event.completed
                    ? "bg-primary text-primary-foreground"
                    : "bg-muted text-muted-foreground",
                )}
              >
                {event.completed ? (
                  <Check className="h-3.5 w-3.5" />
                ) : (
                  <span className="size-1.5 rounded-full bg-current" />
                )}
              </span>

              {/* Copy */}
              <div className="min-w-0 flex-1">
                <div className="flex flex-wrap items-baseline justify-between gap-x-3">
                  <p
                    className={cn(
                      "text-sm font-medium",
                      upcoming && "text-muted-foreground",
                    )}
                  >
                    {event.title}
                  </p>
                  <span className="text-xs text-muted-foreground">
                    {formatDateTime(event.date)}
                  </span>
                </div>
                {event.description && (
                  <p className="mt-0.5 text-xs text-muted-foreground">
                    {event.description}
                  </p>
                )}
              </div>
            </li>
          );
        })}

        {hasUpcoming && (
          <li className="flex items-center gap-2 pt-1 text-xs text-muted-foreground">
            <span className="size-1.5 rounded-full bg-muted-foreground/40" />
            Additional updates will appear here as this order progresses.
          </li>
        )}
      </ol>
    </DetailCard>
  );
}