import { Card } from "@heroui/react";
import Link from "next/link";
import type { OrderStatus } from "@/lib/orders";

interface Props {
  carrier: string;
  shippingMethod: string;
  trackingNumber?: string;
  trackingUrl?: string;
  estimatedDelivery?: number;
  shippedAt?: number;
  actualDelivery?: number;
  status: OrderStatus;
}

function formatTimestamp(ts: number): string {
  return new Intl.DateTimeFormat("en-GB", {
    year: "numeric",
    month: "long",
    day: "numeric",
  }).format(new Date(ts));
}

export function OrderTrackingInfo({
  carrier,
  shippingMethod,
  trackingNumber,
  trackingUrl,
  estimatedDelivery,
  shippedAt,
  actualDelivery,
  status,
}: Props) {
  const isPending = status === "pending" || status === "confirmed";

  return (
    <Card className="rounded-xl p-5">
      <Card.Header>
        <Card.Title className="text-base">Shipping & Tracking</Card.Title>
      </Card.Header>
      <Card.Content className="space-y-2 text-sm">
        {carrier && (
          <p>
            <span className="font-medium text-[#1a2e2d]">Carrier:</span>{" "}
            <span className="text-gray-600">
              {carrier}
              {shippingMethod ? ` · ${shippingMethod}` : ""}
            </span>
          </p>
        )}

        {isPending && !trackingNumber ? (
          <p className="text-gray-500 italic">
            Tracking information will be available once your order ships.
          </p>
        ) : (
          <>
            {trackingNumber && (
              <p>
                <span className="font-medium text-[#1a2e2d]">
                  Tracking number:
                </span>{" "}
                {trackingUrl ? (
                  <Link
                    href={trackingUrl}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="text-[#38a99f] underline underline-offset-2 hover:text-[#236f6b]"
                  >
                    {trackingNumber}
                  </Link>
                ) : (
                  <span className="text-gray-600">{trackingNumber}</span>
                )}
              </p>
            )}
            {shippedAt && (
              <p>
                <span className="font-medium text-[#1a2e2d]">Shipped on:</span>{" "}
                <span className="text-gray-600">{formatTimestamp(shippedAt)}</span>
              </p>
            )}
            {estimatedDelivery && !actualDelivery && (
              <p>
                <span className="font-medium text-[#1a2e2d]">
                  Estimated delivery:
                </span>{" "}
                <span className="text-gray-600">
                  {formatTimestamp(estimatedDelivery)}
                </span>
              </p>
            )}
            {actualDelivery && (
              <p>
                <span className="font-medium text-[#1a2e2d]">
                  Delivered on:
                </span>{" "}
                <span className="text-gray-600">
                  {formatTimestamp(actualDelivery)}
                </span>
              </p>
            )}
          </>
        )}
      </Card.Content>
    </Card>
  );
}
