In transit

import {
  Avatar,
  AvatarFallback,
  Badge,
  Button,
  Card,
  CardContent,
  CardFooter,
  CardHeader,
  CardTitle,
  Separator,
  Timeline,
  TimelineContent,
  TimelineDescription,
  TimelineDot,
  TimelineItem,
  TimelineTime,
  TimelineTitle,
} from "@cronus-ui/ui";
import { ORDERS } from "../lib/demo-store.js";
import { Check, MapPin, Package, Truck } from "lucide-react";

function itemsLabel(items: { qty: number }[]): string {
  const count = items.reduce((sum, item) => sum + item.qty, 0);
  return count + (count === 1 ? " item" : " items");
}

const transitOrder = ORDERS[0];

export function OrderTrackingBlock() {
  return (
    <Card
      role="region"
      aria-label="Order tracking"
      className="mx-auto w-full max-w-2xl gap-0 shadow-md"
    >
      <CardHeader>
        <CardTitle className="font-display text-lg">Order {transitOrder?.id}</CardTitle>
        <p className="col-span-full text-sm text-fg-secondary">
          Placed {transitOrder?.date} · {itemsLabel(transitOrder?.items ?? [])} · {transitOrder?.total}
        </p>
        <div className="col-start-2 row-span-2 row-start-1 self-start justify-self-end">
          <Badge variant="info">{transitOrder?.status}</Badge>
        </div>
      </CardHeader>
      <CardContent className="flex flex-col gap-6 pt-2">
        <div className="flex items-center gap-3 rounded-xl bg-surface-inset p-4">
          <span className="flex size-10 shrink-0 items-center justify-center rounded-lg bg-primary/15">
            <Truck className="size-5 text-primary" aria-hidden="true" />
          </span>
          <div className="flex flex-col">
            <span className="text-sm font-medium text-fg">Arriving Thursday, Jul 16</span>
            <span className="text-sm text-fg-secondary">
              Out for delivery by 8:00 PM · Portland, OR
            </span>
          </div>
        </div>

        <Timeline>
          <TimelineItem>
            <TimelineDot tone="success" icon={<Check />} />
            <TimelineContent>
              <TimelineTitle>Order confirmed</TimelineTitle>
              <TimelineTime>Jul 9, 11:42 AM</TimelineTime>
              <TimelineDescription>Payment received and order accepted.</TimelineDescription>
            </TimelineContent>
          </TimelineItem>
          <TimelineItem>
            <TimelineDot tone="success" icon={<Package />} />
            <TimelineContent>
              <TimelineTitle>Packed and shipped</TimelineTitle>
              <TimelineTime>Jul 10, 4:15 PM</TimelineTime>
              <TimelineDescription>
                Handed to DHL Express at the Aurora warehouse.
              </TimelineDescription>
            </TimelineContent>
          </TimelineItem>
          <TimelineItem>
            <TimelineDot tone="primary" icon={<Truck />} />
            <TimelineContent>
              <TimelineTitle>In transit</TimelineTitle>
              <TimelineTime>Jul 13, 7:05 AM</TimelineTime>
              <TimelineDescription>
                Departed the Salt Lake City sorting facility.
              </TimelineDescription>
            </TimelineContent>
          </TimelineItem>
          <TimelineItem>
            <TimelineDot icon={<MapPin />} />
            <TimelineContent>
              <TimelineTitle>Delivered</TimelineTitle>
              <TimelineTime>Expected Jul 16</TimelineTime>
              <TimelineDescription>Signature may be required on delivery.</TimelineDescription>
            </TimelineContent>
          </TimelineItem>
        </Timeline>
      </CardContent>
      <Separator className="my-4" />
      <CardFooter className="flex-wrap items-center justify-between gap-3 pb-6">
        <div className="flex items-center gap-3">
          <Avatar>
            <AvatarFallback>DH</AvatarFallback>
          </Avatar>
          <div className="flex flex-col">
            <span className="text-sm font-medium text-fg">DHL Express</span>
            <span className="text-xs text-fg-tertiary">Tracking 1Z 999 AA1 0123 4567</span>
          </div>
        </div>
        <Button variant="outline" size="sm">
          Track with courier
        </Button>
      </CardFooter>
    </Card>
  );
}