import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { HugeiconsIcon } from "@hugeicons/react"
import { ExternalLink } from "@hugeicons/core-free-icons"

interface Props {
  carrier: string
  shippingMethod: string
  shippingServiceCode: string
  trackingNumber?: string
  trackingUrl?: string
  labelUrl?: string
  returnLabelUrl?: string
  trackingStatus?: string
  estimatedDelivery?: number
  actualDelivery?: number
  status: string
}

function InfoRow({ label, children }: { label: string; children: React.ReactNode }) {
  return (
    <div className="flex items-start justify-between gap-4 text-sm">
      <span className="shrink-0 text-muted-foreground">{label}</span>
      <span className="text-right">{children}</span>
    </div>
  )
}

function ExternalLinkIcon() {
  return (
    <HugeiconsIcon
      icon={ExternalLink}
      strokeWidth={2}
      className="inline size-3 shrink-0"
      aria-hidden="true"
    />
  )
}

export function FulfilmentCard({
  carrier,
  shippingMethod,
  shippingServiceCode,
  trackingNumber,
  trackingUrl,
  labelUrl,
  returnLabelUrl,
  trackingStatus,
  estimatedDelivery,
  actualDelivery,
  status,
}: Props) {
  const isDelivered = status === "delivered" || !!actualDelivery

  return (
    <Card>
      <CardHeader>
        <CardTitle>Fulfilment</CardTitle>
      </CardHeader>
      <CardContent className="flex flex-col gap-2">
        {/* ── State A & B: carrier info always shown ─────────────────────── */}
        {carrier && <InfoRow label="Carrier">{carrier}</InfoRow>}
        {shippingMethod && (
          <InfoRow label="Service">{shippingMethod}</InfoRow>
        )}
        {shippingServiceCode && !isDelivered && !trackingNumber && (
          <InfoRow label="Method">{shippingServiceCode}</InfoRow>
        )}

        {/* ── State A: no label yet ──────────────────────────────────────── */}
        {!trackingNumber && (
          <p className="mt-1 text-sm text-muted-foreground">
            No label created yet.
          </p>
        )}

        {/* ── State B & C: tracking info ─────────────────────────────────── */}
        {trackingNumber && (
          <>
            <InfoRow label="Tracking">
              <span className="font-mono text-xs">{trackingNumber}</span>
              {trackingUrl && (
                <a
                  href={trackingUrl}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="ml-1.5 inline-flex items-center gap-0.5 text-xs text-muted-foreground hover:underline"
                >
                  Track <ExternalLinkIcon />
                </a>
              )}
            </InfoRow>

            {trackingStatus && (
              <InfoRow label="Status">
                <span className="font-mono text-xs uppercase">
                  {trackingStatus}
                </span>
              </InfoRow>
            )}

            {/* State B: estimated delivery */}
            {!isDelivered && estimatedDelivery && (
              <InfoRow label="Est. delivery">
                {new Date(estimatedDelivery).toLocaleDateString("en-GB", {
                  day: "numeric",
                  month: "short",
                  year: "numeric",
                })}
              </InfoRow>
            )}

            {/* State C: actual delivery */}
            {isDelivered && actualDelivery && (
              <InfoRow label="Delivered">
                {new Date(actualDelivery).toLocaleDateString("en-GB", {
                  day: "numeric",
                  month: "short",
                  year: "numeric",
                  hour: "2-digit",
                  minute: "2-digit",
                })}
              </InfoRow>
            )}

            {/* Label download — State B only */}
            {!isDelivered && labelUrl && (
              <InfoRow label={returnLabelUrl ? "Outbound label" : "Label"}>
                <a
                  href={labelUrl}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="inline-flex items-center gap-0.5 text-xs text-muted-foreground hover:underline"
                >
                  Download <ExternalLinkIcon />
                </a>
              </InfoRow>
            )}

            {/* Return label — shown when return has been accepted */}
            {returnLabelUrl && (
              <InfoRow label="Return label">
                <a
                  href={returnLabelUrl}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="inline-flex items-center gap-0.5 text-xs text-muted-foreground hover:underline"
                >
                  Download <ExternalLinkIcon />
                </a>
              </InfoRow>
            )}
          </>
        )}
      </CardContent>
    </Card>
  )
}
