"use client";

import { Store } from "lucide-react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { useT } from "@/i18n";
import type { Order } from "@/types/order";

/**
 * Who sent this order, and the reference they will quote at us.
 *
 * The list has carried the shop's name and its `external_order_id` for a while; the detail page
 * — the screen support actually opens when a shop calls — carried neither, and never showed
 * `external_order_number` at all. That matters because the two are not the same thing: the id
 * is the handle their system uses, and the **number** is what their staff and their customer
 * read off a receipt. Asked "where is order 10427?", the id alone does not answer.
 *
 * A back-office order says so plainly rather than drawing an empty shop card.
 */
export function OrderOrigin({ order }: { order: Order }) {
  const t = useT();

  const fromStore = order.source === "store_api";

  return (
    <Card>
      <CardHeader>
        <CardTitle className="flex items-center gap-2">
          <Store className="h-4 w-4 text-primary" aria-hidden />
          {t("orders.source")}
        </CardTitle>
      </CardHeader>
      <CardContent className="space-y-2 text-sm">
        <p className="font-medium">
          {fromStore
            ? (order.store?.name ?? t("orders.source.store_api"))
            : t("orders.source.dashboard")}
        </p>

        {order.external_order_number ? (
          <Reference label={t("orders.externalNumber")} value={order.external_order_number} />
        ) : null}

        {order.external_order_id ? (
          <Reference label={t("orders.externalId")} value={order.external_order_id} />
        ) : null}
      </CardContent>
    </Card>
  );
}

function Reference({ label, value }: { label: string; value: string }) {
  return (
    <p className="flex flex-wrap items-baseline justify-between gap-2">
      <span className="text-muted-foreground">{label}</span>
      <span className="font-mono text-xs">{value}</span>
    </p>
  );
}