Fulfilment

"use client"

import { formatNumber, formatPercent } from "@/lib/format"
import { PercentageBar } from "@/components/ui/percentage-bar"
import { StatusBadge, type StatusVariant } from "@/components/ui/status-badge"
import { Widget } from "@/components/ui/widget"

// Status colour, not palette colour: a reader should be able to tell "shipped"
// from "money back" without consulting a legend key.
const PAINT: Record<string, string> = {
  fulfilled: "var(--success)",
  paid: "var(--info)",
  pending: "var(--warning)",
  refunded: "var(--danger)",
  cancelled: "var(--muted-foreground)",
}

const STATUS_MAP: Record<string, StatusVariant> = { refunded: "danger", fulfilled: "success" }

export type FulfilmentStatusProps = {
  segments: { label: string; value: number; status: string }[]
}

/** Where the whole book stands, as one bar and the five counts under it. */
export function FulfilmentStatus({ segments }: FulfilmentStatusProps) {
  const total = segments.reduce((sum, segment) => sum + segment.value, 0)
  const shipped = segments.find((segment) => segment.status === "fulfilled")?.value ?? 0

  return (
    <Widget
      data-widget="widget-ecommerce-orders-overview-fulfilment-status"
      title="Fulfilment"
      description="Every order on the book, by state"
      className="h-full"
      footer={
        <span className="flex items-center gap-2">
          <StatusBadge status="fulfilled" map={STATUS_MAP} />
          {`${formatPercent(shipped / total, { maximumFractionDigits: 1 })} of ${formatNumber(total, { maximumFractionDigits: 0 })} orders`}
        </span>
      }
    >
      <PercentageBar
        segments={segments.map((segment) => ({
          label: segment.label,
          value: segment.value,
          color: PAINT[segment.status],
        }))}
        format={(value, percent) =>
          `${formatNumber(value, { maximumFractionDigits: 0 })} · ${percent}%`
        }
      />
    </Widget>
  )
}