"use client";

import type { ChatOrderSummary, OrderListBlock } from "@/lib/chat/types";
import { formatCurrency, formatDateShort } from "@/lib/utils";
import { useChatBlocks } from "../ChatBlockContext";
import { BlockCard, ChatLink, OrderStageChip, Thumb, secondaryButtonClass } from "./shared";

export function OrderSummaryCard({ order }: { order: ChatOrderSummary }) {
  const { copy, busy, sendAction } = useChatBlocks();
  const ref = order.order_id || order.rfq_ref || `#${order.id}`;
  const name = order.product?.name || ref;

  return (
    <li className="rounded-lg p-2 ring-1 ring-gray-100">
      <div className="flex items-start gap-2">
        <Thumb src={order.product?.thumbnail ?? null} alt={name} />
        <div className="min-w-0 flex-1">
          <div className="flex items-start justify-between gap-2">
            <p className="truncate font-semibold text-gray-900">{name}</p>
            <OrderStageChip stage={order.stage} label={order.status_label} />
          </div>
          <p className="mt-0.5 truncate text-[11px] text-gray-500">
            {ref}
            {order.brand ? ` · ${order.brand}` : ""}
            {order.created_at ? ` · ${formatDateShort(order.created_at)}` : ""}
          </p>
          {order.total_amount !== null || order.due_amount !== null ? (
            <p className="mt-0.5 text-[11px] text-gray-600">
              {order.total_amount !== null ? (
                <>
                  {copy.total}: <span className="font-semibold text-gray-900">{formatCurrency(order.total_amount)}</span>
                </>
              ) : null}
              {order.due_amount !== null && order.due_amount > 0 ? (
                <>
                  {" · "}
                  {copy.due}: <span className="font-semibold text-[#CC1414]">{formatCurrency(order.due_amount)}</span>
                </>
              ) : null}
            </p>
          ) : null}
          <div className="mt-1.5 flex items-center gap-3">
            <button
              type="button"
              disabled={busy}
              onClick={() =>
                void sendAction({ type: "order.status", payload: { id: order.id } }, { echo: `${copy.checkStatus}: ${ref}` })
              }
              className={secondaryButtonClass}
            >
              {copy.checkStatus}
            </button>
            <ChatLink href={order.href} className="text-[11px]" arrow>
              {copy.viewDetails}
            </ChatLink>
          </div>
        </div>
      </div>
    </li>
  );
}

export default function OrderList({ block }: { block: OrderListBlock }) {
  const { copy } = useChatBlocks();
  const orders = Array.isArray(block.orders) ? block.orders : [];

  return (
    <BlockCard>
      {orders.length === 0 ? (
        <p className="text-gray-500">{copy.noOrders}</p>
      ) : (
        <ul className="space-y-2">
          {orders.map((order) => (
            <OrderSummaryCard key={order.id} order={order} />
          ))}
        </ul>
      )}
      {block.view_all_href ? (
        <div className="mt-2 text-right">
          <ChatLink href={block.view_all_href} className="text-[11px]" arrow>
            {copy.viewAll}
          </ChatLink>
        </div>
      ) : null}
    </BlockCard>
  );
}