import { notFound } from "next/navigation";
import { getCommissionLabels } from "@/lib/commission/catalog";
import { getCommissionTicket } from "@/lib/commission/tickets";
import { publicMediaUrl } from "@/lib/media/storage";
import { HttpError } from "@/lib/security/http";
import { CommissionRequestSummary } from "./request-summary";
import { CommissionTicketChat } from "./ticket-chat";
import { CommissionSlipDialog } from "./slip-dialog";
import { CommissionTicketPanels } from "./ticket-panels";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";

export async function CommissionTicketDetail({ id, admin }: { id: string; admin: boolean }) {
  let data: Awaited<ReturnType<typeof getCommissionTicket>>;
  try {
    data = await getCommissionTicket(id);
  } catch (cause) {
    if (cause instanceof HttpError && (cause.status === 401 || cause.status === 403 || cause.status === 404))
      notFound();
    throw cause;
  }
  const catalog = await getCommissionLabels(data.checkout.request);
  return <div className="flex min-h-0 flex-1 flex-col gap-3">
    <CommissionTicketPanels summary={
      <Card className="h-full min-h-0"><CardHeader className="shrink-0"><CardTitle>รายละเอียดคำขอ - ฿{data.checkout.amountBaht}</CardTitle></CardHeader>
        <CardContent className="flex min-h-0 flex-1 flex-col gap-3 overflow-y-auto">{catalog && <CommissionRequestSummary request={data.checkout.request} catalog={catalog} amountBaht={data.checkout.amountBaht} />}
          <p className="text-sm text-muted-foreground">การชำระเงิน: {data.payment.transRef} - {data.payment.transferredAt.toLocaleString("th-TH")}</p>
          <CommissionSlipDialog src={publicMediaUrl(data.payment.slipObjectKey)} />
        </CardContent></Card>
    } chat={<CommissionTicketChat ticketId={id} ticketTitle={data.ticket.title || `Ticket #${id.slice(0, 8)}`}
        userId={data.currentUserId} status={data.ticket.status}
        messages={data.messages.map(({ imageObjectKey, imageObjectKeys, ...message }) => ({ ...message,
          imageUrls: [imageObjectKey, ...(imageObjectKeys ?? [])].filter((key): key is string => Boolean(key))
            .map(publicMediaUrl) }))} admin={admin} />}
    />
  </div>;
}