"use client";

import type { ChatEnquirySummary, EnquiryListBlock } from "@/lib/chat/types";
import { formatDateShort } from "@/lib/utils";
import { useChatBlocks } from "../ChatBlockContext";
import { BlockCard, ChatLink, EnquiryStageChip, Thumb, formatQuantity, secondaryButtonClass } from "./shared";

export function EnquirySummaryCard({
  enquiry,
  showStatusButton = true,
}: {
  enquiry: ChatEnquirySummary;
  showStatusButton?: boolean;
}) {
  const { copy, busy, sendAction } = useChatBlocks();
  const ref = enquiry.ref || `#${enquiry.id}`;
  const name = enquiry.product?.name || ref;
  const qty = formatQuantity(enquiry.quantity, enquiry.unit_label);
  const facts = [qty, enquiry.delivery_city, enquiry.required_by].filter(Boolean).join(" · ");

  return (
    <div className="flex items-start gap-2">
      <Thumb src={enquiry.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>
          <EnquiryStageChip stage={enquiry.stage} />
        </div>
        <p className="mt-0.5 truncate text-[11px] text-gray-500">
          {ref}
          {enquiry.created_at ? ` · ${formatDateShort(enquiry.created_at)}` : ""}
        </p>
        {facts ? <p className="mt-0.5 truncate text-[11px] text-gray-600">{facts}</p> : null}
        <div className="mt-1.5 flex items-center gap-3">
          {showStatusButton ? (
            <button
              type="button"
              disabled={busy}
              onClick={() =>
                void sendAction(
                  { type: "enquiry.status", payload: { id: enquiry.id } },
                  { echo: `${copy.checkStatus}: ${ref}` }
                )
              }
              className={secondaryButtonClass}
            >
              {copy.checkStatus}
            </button>
          ) : null}
          <ChatLink href={enquiry.href} className="text-[11px]" arrow>
            {copy.viewDetails}
          </ChatLink>
        </div>
      </div>
    </div>
  );
}

export default function EnquiryList({ block }: { block: EnquiryListBlock }) {
  const { copy } = useChatBlocks();
  const enquiries = Array.isArray(block.enquiries) ? block.enquiries : [];

  return (
    <BlockCard>
      {enquiries.length === 0 ? (
        <p className="text-gray-500">{copy.noEnquiries}</p>
      ) : (
        <ul className="space-y-2">
          {enquiries.map((enquiry) => (
            <li key={enquiry.id} className="rounded-lg p-2 ring-1 ring-gray-100">
              <EnquirySummaryCard enquiry={enquiry} />
            </li>
          ))}
        </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>
  );
}