Delivered

import {
  Alert,
  AlertDescription,
  AlertTitle,
  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, Package, PackageCheck, Star, 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 deliveredOrder = ORDERS[1];

export function OrderDeliveredBlock() {
  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 {deliveredOrder?.id}</CardTitle>
        <p className="col-span-full text-sm text-fg-secondary">
          Placed {deliveredOrder?.date} · {itemsLabel(deliveredOrder?.items ?? [])} ·{" "}
          {deliveredOrder?.total}
        </p>
        <div className="col-start-2 row-span-2 row-start-1 self-start justify-self-end">
          <Badge variant="success">{deliveredOrder?.status}</Badge>
        </div>
      </CardHeader>
      <CardContent className="flex flex-col gap-6 pt-2">
        <Alert variant="success">
          <PackageCheck aria-hidden="true" />
          <AlertTitle>Delivered on Wednesday, Jun 24</AlertTitle>
          <AlertDescription>
            Signed by A. Rivera at 2:48 PM · Left with the front desk.
          </AlertDescription>
        </Alert>

        <Timeline>
          <TimelineItem>
            <TimelineDot tone="success" icon={<Check />} />
            <TimelineContent>
              <TimelineTitle>Order confirmed</TimelineTitle>
              <TimelineTime>Jun 20, 9:18 AM</TimelineTime>
              <TimelineDescription>Payment received and order accepted.</TimelineDescription>
            </TimelineContent>
          </TimelineItem>
          <TimelineItem>
            <TimelineDot tone="success" icon={<Package />} />
            <TimelineContent>
              <TimelineTitle>Packed and shipped</TimelineTitle>
              <TimelineTime>Jun 21, 1:02 PM</TimelineTime>
              <TimelineDescription>
                Handed to DHL Express at the Aurora warehouse.
              </TimelineDescription>
            </TimelineContent>
          </TimelineItem>
          <TimelineItem>
            <TimelineDot tone="success" icon={<Truck />} />
            <TimelineContent>
              <TimelineTitle>Out for delivery</TimelineTitle>
              <TimelineTime>Jun 24, 8:31 AM</TimelineTime>
              <TimelineDescription>Loaded on the delivery vehicle in Portland.</TimelineDescription>
            </TimelineContent>
          </TimelineItem>
          <TimelineItem>
            <TimelineDot tone="success" icon={<PackageCheck />} />
            <TimelineContent>
              <TimelineTitle>Delivered</TimelineTitle>
              <TimelineTime>Jun 24, 2:48 PM</TimelineTime>
              <TimelineDescription>Signed by A. Rivera · front desk.</TimelineDescription>
            </TimelineContent>
          </TimelineItem>
        </Timeline>
      </CardContent>
      <Separator className="my-4" />
      <CardFooter className="flex-wrap items-center justify-between gap-3 pb-6">
        <div className="flex flex-col gap-1">
          <span className="text-sm font-medium text-fg">How was your order?</span>
          <div className="flex items-center gap-1">
            {[1, 2, 3, 4, 5].map((star) => (
              <Button key={star} variant="ghost" size="icon-sm">
                <Star className="size-4 text-warning" aria-hidden="true" />
                <span className="sr-only">Rate {star} of 5</span>
              </Button>
            ))}
          </div>
        </div>
        <Button variant="primary" size="sm">
          Leave a review
        </Button>
      </CardFooter>
    </Card>
  );
}