Timeline

import * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"
import { Check, CircleDashed, Info, X } from "lucide-react"
import { cn } from "cn"

import { Spinner } from "@/registry/paragon/ui/spinner"

/**
 * An ordered record of what happened and what comes next. Built for governed
 * execution: every step Telos takes, who approved it, and what is still waiting.
 */
function Timeline({ className, ...props }: React.ComponentProps<"ol">) {
  return <ol data-slot="timeline" className={cn("flex flex-col", className)} {...props} />
}

const markerVariants = cva(
  "relative z-10 flex size-6 shrink-0 items-center justify-center rounded-full ring-4 ring-background [&_svg:not([class*='size-'])]:size-3.5",
  {
    variants: {
      status: {
        complete: "bg-oasis text-white dark:bg-[#a8cf9f] dark:text-night",
        current: "bg-fjord/12 text-fjord outline-1 outline-fjord/40 dark:bg-fjord/30 dark:text-[#9db7dc]",
        upcoming: "bg-background text-muted-foreground outline-1 outline-dashed outline-foreground/25",
        error: "bg-destructive text-white dark:text-night",
        neutral: "bg-secondary text-muted-foreground",
      },
    },
    defaultVariants: {
      status: "neutral",
    },
  }
)

const DEFAULT_ICONS = {
  complete: <Check strokeWidth={2.5} />,
  current: <Spinner aria-hidden="true" role={undefined} className="size-3.5" />,
  upcoming: <CircleDashed className="opacity-0" />,
  error: <X strokeWidth={2.5} />,
  neutral: <Info />,
}

function TimelineItem({
  status = "neutral",
  icon,
  className,
  children,
  ...props
}: React.ComponentProps<"li"> &
  VariantProps<typeof markerVariants> & {
    /** Replaces the status icon. */
    icon?: React.ReactNode
  }) {
  const resolved = status ?? "neutral"

  return (
    <li
      data-slot="timeline-item"
      data-status={resolved}
      aria-current={resolved === "current" ? "step" : undefined}
      className={cn("group/timeline-item relative grid grid-cols-[1.5rem_1fr] gap-x-4 pb-7 last:pb-0", className)}
      {...props}
    >
      <span
        aria-hidden="true"
        className="absolute start-[calc(0.75rem-0.5px)] top-6 bottom-0 w-px bg-border group-last/timeline-item:hidden group-data-[status=complete]/timeline-item:bg-oasis/40"
      />
      <span className={markerVariants({ status: resolved })}>{icon ?? DEFAULT_ICONS[resolved]}</span>
      <div className="flex min-w-0 flex-col gap-1 pt-0.5">{children}</div>
    </li>
  )
}

function TimelineHeader({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="timeline-header"
      className={cn("flex flex-wrap items-baseline justify-between gap-x-4 gap-y-0.5", className)}
      {...props}
    />
  )
}

function TimelineTitle({ className, ...props }: React.ComponentProps<"p">) {
  return (
    <p
      data-slot="timeline-title"
      className={cn(
        "text-[0.9375rem] font-medium tracking-[-0.01em] group-data-[status=upcoming]/timeline-item:text-muted-foreground",
        className
      )}
      {...props}
    />
  )
}

function TimelineTime({ className, ...props }: React.ComponentProps<"time">) {
  return <time data-slot="timeline-time" className={cn("text-sm text-muted-foreground tabular-nums", className)} {...props} />
}

function TimelineDescription({ className, ...props }: React.ComponentProps<"p">) {
  return (
    <p
      data-slot="timeline-description"
      className={cn("text-sm leading-relaxed text-pretty text-muted-foreground", className)}
      {...props}
    />
  )
}

function TimelineContent({ className, ...props }: React.ComponentProps<"div">) {
  return <div data-slot="timeline-content" className={cn("mt-2 flex flex-wrap gap-2", className)} {...props} />
}

export { Timeline, TimelineItem, TimelineHeader, TimelineTitle, TimelineTime, TimelineDescription, TimelineContent }