"use client";

import {
  useEffect,
  useRef,
  useState,
  type ClipboardEvent,
  type FormEvent,
  type KeyboardEvent,
} from "react";
import { useRouter } from "next/navigation";
import dynamic from "next/dynamic";
import {
  ImagePlus,
  MessageCircle,
  ReplyIcon,
  SendHorizontal,
  SmilePlus,
  Trash2,
  X,
} from "lucide-react";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Alert, AlertDescription } from "@/components/ui/alert";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog";
import { Badge } from "@/components/ui/badge";
import { Bubble, BubbleContent } from "@/components/ui/bubble";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardAction,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import {
  Dialog,
  DialogContent,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import {
  Empty,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
} from "@/components/ui/empty";
import { Field, FieldGroup, FieldLabel } from "@/components/ui/field";
import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupTextarea,
} from "@/components/ui/input-group";
import {
  Message,
  MessageAvatar,
  MessageContent,
  MessageFooter,
  MessageGroup,
  MessageHeader,
} from "@/components/ui/message";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";
import { Skeleton } from "@/components/ui/skeleton";
import { cn } from "@/lib/utils";
import { parseCommissionMessageEvent } from "@/lib/commission/message-event";
import { keepCommissionTitle } from "./keep-title";

type ChatMessage = {
  id: string;
  authorId: string;
  authorName: string;
  text: string | null;
  authorImage: string | null;
  replyToId: string | null;
  imageUrls: string[];
  createdAt: Date;
  reactions: { userId: string; emoji: string }[];
};
type OptimisticMessage = {
  localId: string;
  serverId: string | null;
  text: string;
  imageUrls: string[];
  replyToId: string | null;
  status: "sending" | "sent";
};
type OptimisticReaction = { active: boolean; status: "sending" | "sent" };
const EmojiPicker = dynamic(() => import("emoji-picker-react"), { ssr: false });
const reactionKey = (messageId: string, emoji: string) =>
  `${messageId}:${emoji}`;
const padTime = (value: number) => String(value).padStart(2, "0");
const imageUrlsOf = (message: { imageUrls?: string[]; imageUrl?: string | null }) =>
  Array.isArray(message.imageUrls) ? message.imageUrls : message.imageUrl ? [message.imageUrl] : [];

function ReactionEmoji({ emoji }: { emoji: string }) {
  const [failed, setFailed] = useState(false);
  const unified = Array.from(emoji, (character) =>
    character.codePointAt(0)!.toString(16),
  ).join("-");
  if (failed) return <span aria-hidden="true">{emoji}</span>;
  // CDN images are already 64 px assets displayed at 16 px.
  // eslint-disable-next-line @next/next/no-img-element
  return (
    <img
      src={`https://cdn.jsdelivr.net/npm/emoji-datasource-apple/img/apple/64/${unified}.png`}
      alt=""
      width={16}
      height={16}
      loading="lazy"
      decoding="async"
      onError={() => setFailed(true)}
    />
  );
}

function ReplyPreview({ message }: { message: ChatMessage }) {
  return (
    <div className="max-w-full rounded-md bg-muted/50 px-2 py-1 text-xs">
      <span className="font-medium">{message.authorName}</span>
      <p className="truncate text-muted-foreground">
        {message.text || (imageUrlsOf(message).length ? "รูปภาพ" : "ข้อความ")}
      </p>
    </div>
  );
}

function CommissionMessageImage({ src, compact = false }: { src: string; compact?: boolean }) {
  const imageRef = useRef<HTMLImageElement>(null);
  const [state, setState] = useState<"loading" | "loaded" | "error">("loading");

  useEffect(() => {
    if (imageRef.current?.complete)
      setState(imageRef.current.naturalWidth > 0 ? "loaded" : "error");
  }, [src]);

  return (
    <Dialog>
      <DialogTrigger
        render={
          <button
            type="button"
            disabled={state !== "loaded"}
            className={cn("block cursor-zoom-in overflow-hidden rounded-md disabled:cursor-default",
              compact ? "relative aspect-square w-full" : "max-w-full")}
            aria-label="ขยายรูปภาพที่แนบ"
          />
        }
      >
        {state === "loading" && (
          <Skeleton
            className={compact ? "absolute inset-0 size-full rounded-none" : "h-40 w-48 max-w-full rounded-lg"}
            aria-label="กำลังโหลดรูปภาพ"
          />
        )}
        {state === "error" && (
          <span className={cn("block px-4 py-2.5 text-xs", compact &&
            "absolute inset-0 flex items-center justify-center p-1 text-center")}>โหลดรูปภาพไม่สำเร็จ</span>
        )}
        {/* eslint-disable-next-line @next/next/no-img-element */}
        <img
          ref={imageRef}
          src={src}
          alt="รูปภาพที่แนบในข้อความ"
          onLoad={() => setState("loaded")}
          onError={() => setState("error")}
          className={cn(
            compact ? "absolute inset-0 size-full object-cover" : "max-h-72 max-w-full object-contain",
            state === "loaded" ? "block" : "hidden",
          )}
        />
      </DialogTrigger>
      <DialogContent className="w-fit max-h-[90svh] max-w-[calc(100%-2rem)] p-2 sm:max-w-[calc(100%-2rem)]">
        <DialogTitle className="sr-only">รูปภาพที่แนบในข้อความ</DialogTitle>
        {/* eslint-disable-next-line @next/next/no-img-element */}
        <img
          src={src}
          alt="รูปภาพที่แนบในข้อความขนาดใหญ่"
          className="max-h-[calc(90svh-1rem)] max-w-full object-contain"
        />
      </DialogContent>
    </Dialog>
  );
}

function CommissionMediaGrid({ urls, pending = false }: { urls: string[]; pending?: boolean }) {
  if (!urls.length) return null;
  if (urls.length === 1)
    return <div className={cn(pending && "opacity-50")}><CommissionMessageImage src={urls[0]} /></div>;
  return <div className={cn("grid max-w-full gap-1 overflow-hidden rounded-lg",
    urls.length === 2 ? "w-[min(72vw,24rem)] grid-cols-2" : "w-[min(72vw,36rem)] grid-cols-3",
    pending && "opacity-50")}>
    {urls.map((url) => <CommissionMessageImage key={url} src={url} compact />)}
  </div>;
}

export function CommissionTicketChat({
  ticketId,
  ticketTitle,
  userId,
  status,
  messages,
  admin,
}: {
  ticketId: string;
  ticketTitle: string;
  userId: string;
  status: string;
  messages: ChatMessage[];
  admin: boolean;
}) {
  const router = useRouter();
  const scrollRef = useRef<HTMLDivElement>(null);
  const fileRef = useRef<HTMLInputElement>(null);
  const stayAtBottom = useRef(true);
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState("");
  const [text, setText] = useState("");
  const [images, setImages] = useState<File[]>([]);
  const [imagePreviews, setImagePreviews] = useState<string[]>([]);
  const imagePreviewsRef = useRef<string[]>([]);
  const optimisticImageUrls = useRef(new Set<string>());
  const [optimisticMessages, setOptimisticMessages] = useState<
    OptimisticMessage[]
  >([]);
  const nextOptimisticId = useRef(0);
  const [reactionFor, setReactionFor] = useState<string | null>(null);
  const [replyToId, setReplyToId] = useState<string | null>(null);
  const [closeConfirmOpen, setCloseConfirmOpen] = useState(false);
  const [closedAlertOpen, setClosedAlertOpen] = useState(false);
  const [statusBusy, setStatusBusy] = useState(false);
  const [optimisticReactions, setOptimisticReactions] = useState<
    Record<string, OptimisticReaction>
  >({});
  const pendingReactions = useRef(new Set<string>());
  const [deleteFor, setDeleteFor] = useState<string | null>(null);
  const [deletingId, setDeletingId] = useState<string | null>(null);
  const [deletedMessageIds, setDeletedMessageIds] = useState<Set<string>>(
    () => new Set(),
  );
  const [typing, setTyping] = useState<{ userId: string; name: string } | null>(
    null,
  );
  const lastTypingSent = useRef(0);
  const typingActive = useRef(false);
  const sendingRef = useRef(false);
  const deferredRefresh = useRef(false);
  const visibleOptimisticMessages = optimisticMessages.filter(
    (message) =>
      !message.serverId ||
      !messages.some((saved) => saved.id === message.serverId),
  ).map((message) => ({ ...message, imageUrls: imageUrlsOf(message) }));
  const visibleMessages = messages.filter(
    (message) => !deletedMessageIds.has(message.id),
  ).map((message) => ({ ...message, imageUrls: imageUrlsOf(message) }));
  const visibleMessageById = new Map(
    visibleMessages.map((message) => [message.id, message]),
  );
  const replyTarget = replyToId
    ? (visibleMessageById.get(replyToId) ?? null)
    : null;

  useEffect(
    () => () => {
      for (const url of imagePreviewsRef.current) URL.revokeObjectURL(url);
      for (const url of optimisticImageUrls.current) URL.revokeObjectURL(url);
    },
    [],
  );

  useEffect(() => {
    for (const message of optimisticMessages) {
      const urls = imageUrlsOf(message);
      if (
        message.serverId &&
        messages.some((saved) => saved.id === message.serverId) &&
        urls.some((url) => optimisticImageUrls.current.has(url))
      ) {
        for (const url of urls) {
          if (optimisticImageUrls.current.delete(url)) URL.revokeObjectURL(url);
        }
      }
    }
  }, [messages, optimisticMessages]);

  useEffect(() => {
    const originalTitle = document.title;
    let managedTitle = ticketTitle;
    let unread = 0;
    const stopKeepingTitle = keepCommissionTitle(() => managedTitle);
    const markRead = () => {
      if (document.hidden || !document.hasFocus()) return;
      unread = 0;
      managedTitle = ticketTitle;
      document.title = ticketTitle;
    };
    document.addEventListener("visibilitychange", markRead);
    window.addEventListener("focus", markRead);
    const source = new EventSource(
      `/api/commission/events?ticketId=${ticketId}`,
    );
    let typingTimeout: ReturnType<typeof setTimeout> | undefined;
    const refresh = () => {
      if (sendingRef.current) deferredRefresh.current = true;
      else router.refresh();
    };
    const receive = (event: Event) => {
      const value = (event as MessageEvent<string>).data;
      if (!value.startsWith("typing:")) {
        if (value === "status:closed" && !admin) setClosedAlertOpen(true);
        const message = parseCommissionMessageEvent(value);
        if (
          message &&
          message.authorId !== userId &&
          (document.hidden || !document.hasFocus())
        ) {
          unread += 1;
          managedTitle = `(${unread}) ${ticketTitle}`;
          document.title = managedTitle;
        }
        refresh();
        return;
      }
      try {
        const update = JSON.parse(value.slice(7)) as {
          userId: string;
          name: string;
          active: boolean;
        };
        if (
          update.userId === userId ||
          typeof update.name !== "string" ||
          typeof update.active !== "boolean"
        )
          return;
        if (typingTimeout) clearTimeout(typingTimeout);
        if (update.active) {
          setTyping({ userId: update.userId, name: update.name });
          typingTimeout = setTimeout(() => setTyping(null), 6000);
        } else
          setTyping((current) =>
            current?.userId === update.userId ? null : current,
          );
      } catch {
        /* Ignore malformed transient signals. */
      }
    };
    source.addEventListener("changed", receive);
    source.addEventListener("open", refresh);
    return () => {
      if (typingTimeout) clearTimeout(typingTimeout);
      source.removeEventListener("changed", receive);
      source.removeEventListener("open", refresh);
      source.close();
      document.removeEventListener("visibilitychange", markRead);
      window.removeEventListener("focus", markRead);
      stopKeepingTitle();
      if (document.title === managedTitle) document.title = originalTitle;
    };
  }, [ticketId, ticketTitle, userId, admin, router]);

  useEffect(() => {
    const viewport = scrollRef.current;
    if (viewport && stayAtBottom.current)
      viewport.scrollTop = viewport.scrollHeight;
  }, [messages, optimisticMessages]);

  useEffect(() => {
    const viewport = scrollRef.current;
    if (!viewport) return;
    const observer = new ResizeObserver(() => {
      if (stayAtBottom.current) viewport.scrollTop = viewport.scrollHeight;
    });
    observer.observe(viewport);
    return () => observer.disconnect();
  }, []);

  function sendTyping(active: boolean) {
    if (status !== "open") return;
    // eslint-disable-next-line react-hooks/purity -- This function runs only from input event handlers.
    const now = Date.now();
    if (active && typingActive.current && now - lastTypingSent.current < 4000)
      return;
    if (!active && !typingActive.current) return;
    typingActive.current = active;
    if (active) lastTypingSent.current = now;
    void fetch(`/api/commission/tickets/${ticketId}/typing`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ active }),
    }).catch(() => undefined);
  }

  function setAttachments(files: File[]) {
    for (const url of imagePreviewsRef.current) URL.revokeObjectURL(url);
    const previews = files.map((file) => URL.createObjectURL(file));
    imagePreviewsRef.current = previews;
    setImages(files);
    setImagePreviews(previews);
  }

  function chooseAttachments(files: File[]) {
    if (images.length + files.length > 10) {
      setError("แนบรูปภาพได้ไม่เกิน 10 รูปต่อข้อความ");
      return;
    }
    if (files.some((file) => file.size === 0 || file.size > 10 * 1024 * 1024 ||
      !["image/png", "image/jpeg", "image/webp"].includes(file.type))) {
      setError("แนบได้เฉพาะรูป PNG, JPEG หรือ WebP ขนาดไม่เกิน 10 MiB ต่อรูป");
      return;
    }
    setError("");
    setAttachments([...images, ...files]);
  }

  function handleComposerPaste(event: ClipboardEvent<HTMLTextAreaElement>) {
    const pastedImages = Array.from(event.clipboardData.items)
      .filter((item) => item.kind === "file" && item.type.startsWith("image/"))
      .map((item) => item.getAsFile()).filter((file): file is File => file !== null);
    if (!pastedImages.length) return;
    event.preventDefault();
    if (fileRef.current) fileRef.current.value = "";
    chooseAttachments(pastedImages);
  }

  async function send(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    if (busy || (!text.trim() && !images.length)) return;
    setBusy(true);
    setError("");
    sendingRef.current = true;
    const form = event.currentTarget;
    const originalText = text;
    const originalImages = images;
    const localId = String(++nextOptimisticId.current);
    const imageUrls = images.map((file) => URL.createObjectURL(file));
    for (const url of imageUrls) optimisticImageUrls.current.add(url);
    setOptimisticMessages((current) => [
      ...current.filter(
        (message) =>
          !message.serverId ||
          !messages.some((saved) => saved.id === message.serverId),
      ),
      {
        localId,
        serverId: null,
        text: text.trim(),
        imageUrls,
        replyToId: replyTarget?.id ?? null,
        status: "sending",
      },
    ]);
    stayAtBottom.current = true;
    try {
      const data = new FormData(form);
      data.set("text", text.trim());
      if (replyTarget) data.set("replyToId", replyTarget.id);
      else data.delete("replyToId");
      data.delete("image");
      for (const image of images) data.append("image", image);
      form.reset();
      setText("");
      setAttachments([]);
      setReplyToId(null);
      sendTyping(false);
      const response = await fetch(
        `/api/commission/tickets/${ticketId}/messages`,
        { method: "POST", body: data },
      );
      if (!response.ok) throw new Error("ส่งข้อความไม่สำเร็จ กรุณาลองอีกครั้ง");
      const result = (await response.json()) as { messageId: string };
      setOptimisticMessages((current) =>
        current.map((message) =>
          message.localId === localId
            ? { ...message, serverId: result.messageId, status: "sent" }
            : message,
        ),
      );
      stayAtBottom.current = true;
      sendingRef.current = false;
      deferredRefresh.current = false;
      router.refresh();
    } catch (cause) {
      for (const url of imageUrls) {
        URL.revokeObjectURL(url);
        optimisticImageUrls.current.delete(url);
      }
      setOptimisticMessages((current) =>
        current.filter((message) => message.localId !== localId),
      );
      setText(originalText);
      setAttachments(originalImages);
      setReplyToId(replyTarget?.id ?? null);
      setError(cause instanceof Error ? cause.message : "ส่งข้อความไม่สำเร็จ");
      sendingRef.current = false;
      if (deferredRefresh.current) {
        deferredRefresh.current = false;
        router.refresh();
      }
    } finally {
      setBusy(false);
    }
  }

  async function react(messageId: string, emoji: string) {
    setReactionFor(null);
    const key = reactionKey(messageId, emoji);
    if (pendingReactions.current.has(key)) return;
    const message = messages.find((item) => item.id === messageId);
    if (!message) return;
    const savedActive = message.reactions.some(
      (item) => item.emoji === emoji && item.userId === userId,
    );
    const previous = optimisticReactions[key];
    const currentActive =
      previous?.status === "sent" && previous.active === savedActive
        ? savedActive
        : (previous?.active ?? savedActive);
    pendingReactions.current.add(key);
    setError("");
    setOptimisticReactions((current) => ({
      ...current,
      [key]: { active: !currentActive, status: "sending" },
    }));
    try {
      const response = await fetch(
        `/api/commission/tickets/${ticketId}/reactions`,
        {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ messageId, emoji }),
        },
      );
      if (!response.ok) throw new Error();
      const result = (await response.json()) as { active: boolean };
      setOptimisticReactions((current) => ({
        ...current,
        [key]: { active: result.active, status: "sent" },
      }));
      router.refresh();
    } catch {
      setOptimisticReactions((current) => {
        const next = { ...current };
        delete next[key];
        return next;
      });
      setError("เปลี่ยนรีแอ็กชันไม่สำเร็จ กรุณาลองอีกครั้ง");
    } finally {
      pendingReactions.current.delete(key);
    }
  }

  async function deleteMessage(messageId: string) {
    if (deletingId) return;
    setDeleteFor(null);
    setDeletingId(messageId);
    setError("");
    try {
      const response = await fetch(
        `/api/commission/tickets/${ticketId}/messages/${messageId}`,
        { method: "DELETE" },
      );
      if (!response.ok) throw new Error();
      setDeletedMessageIds((current) => new Set(current).add(messageId));
      if (replyToId === messageId) setReplyToId(null);
      setReactionFor(null);
      router.refresh();
    } catch {
      setError("ลบข้อความไม่สำเร็จ กรุณาลองอีกครั้ง");
    } finally {
      setDeletingId(null);
    }
  }

  async function toggleStatus() {
    if (statusBusy) return;
    setStatusBusy(true);
    try {
      const response = await fetch(
        `/api/commission/tickets/${ticketId}/status`,
        {
          method: "PATCH",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({
            status: status === "open" ? "closed" : "open",
          }),
        },
      );
      if (!response.ok) throw new Error();
      setCloseConfirmOpen(false);
      router.refresh();
    } catch {
      setError("เปลี่ยนสถานะ Ticket ไม่สำเร็จ กรุณาลองอีกครั้ง");
    } finally {
      setStatusBusy(false);
    }
  }

  function handleComposerKeyDown(event: KeyboardEvent<HTMLTextAreaElement>) {
    if (
      event.key === "Enter" &&
      !event.shiftKey &&
      !event.nativeEvent.isComposing
    ) {
      event.preventDefault();
      event.currentTarget.form?.requestSubmit();
    }
  }

  return (
    <>
      <AlertDialog open={closedAlertOpen} onOpenChange={setClosedAlertOpen}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Ticket นี้ปิดแล้ว</AlertDialogTitle>
            <AlertDialogDescription>
              ทีมงานปิด Ticket นี้แล้ว คุณยังอ่านบทสนทนาเดิมได้
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogAction onClick={() => setClosedAlertOpen(false)}>
              รับทราบ
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
      <Card className="h-full min-h-0 min-w-0 gap-0 py-0">
        <CardHeader className="shrink-0 border-b py-3">
          <CardTitle>แชต{admin ? "กับลูกค้า" : "กับทีมงาน"}</CardTitle>
          {!admin && <CardDescription>สถานะนี้บอกว่าส่งข้อความได้หรือไม่ สอบถามความคืบหน้างานได้ในแชต</CardDescription>}
          <CardAction className="flex flex-wrap items-center gap-2">
            <Badge variant={status === "open" ? "outline" : "destructive"}
              className={status === "open" ? "border-success/30 bg-success/10 text-success" : undefined}>
              {admin ? (status === "open" ? "เปิดอยู่" : "ปิดแล้ว") : (status === "open" ? "แชตเปิดอยู่" : "แชตปิดแล้ว")}
            </Badge>
            {admin &&
              (status === "open" ? (
                <AlertDialog
                  open={closeConfirmOpen}
                  onOpenChange={setCloseConfirmOpen}
                >
                  <AlertDialogTrigger
                    render={
                      <Button
                        variant="outline"
                        size="sm"
                        disabled={statusBusy}
                      />
                    }
                  >
                    ปิด Ticket
                  </AlertDialogTrigger>
                  <AlertDialogContent>
                    <AlertDialogHeader>
                      <AlertDialogTitle>ปิด Ticket นี้?</AlertDialogTitle>
                      <AlertDialogDescription>
                        ลูกค้าจะได้รับแจ้งว่า Ticket ปิดแล้ว
                        และจะส่งข้อความเพิ่มไม่ได้จนกว่าจะเปิดอีกครั้ง
                      </AlertDialogDescription>
                    </AlertDialogHeader>
                    <AlertDialogFooter>
                      <AlertDialogCancel>ยกเลิก</AlertDialogCancel>
                      <AlertDialogAction onClick={() => void toggleStatus()}>
                        ยืนยันการปิด
                      </AlertDialogAction>
                    </AlertDialogFooter>
                  </AlertDialogContent>
                </AlertDialog>
              ) : (
                <Button
                  variant="outline"
                  size="sm"
                  disabled={statusBusy}
                  onClick={() => void toggleStatus()}
                >
                  เปิดอีกครั้ง
                </Button>
              ))}
          </CardAction>
        </CardHeader>
        {!admin && status === "closed" && (
          <Alert className="mx-3 mt-3 w-auto sm:mx-5">
            <AlertDescription>
              Ticket นี้ปิดแล้ว คุณยังอ่านบทสนทนาเดิมได้
            </AlertDescription>
          </Alert>
        )}
        <CardContent
          ref={scrollRef}
          role="log"
          aria-label="ข้อความใน Ticket"
          aria-live="polite"
          onScroll={(event) => {
            const viewport = event.currentTarget;
            stayAtBottom.current =
              viewport.scrollHeight -
                viewport.scrollTop -
                viewport.clientHeight <
              80;
          }}
          className="min-h-0 flex-1 overflow-x-hidden overflow-y-auto overscroll-y-contain bg-muted/20 px-3 py-5 sm:px-5"
        >
          {visibleMessages.length === 0 &&
          visibleOptimisticMessages.length === 0 ? (
            <Empty className="h-full">
              <EmptyHeader>
                <EmptyMedia variant="icon">
                  <MessageCircle />
                </EmptyMedia>
                <EmptyTitle>เริ่มบทสนทนา</EmptyTitle>
                <EmptyDescription>
                  ส่งข้อความหรือรูปภาพเพื่อพูดคุยเกี่ยวกับคำขอนี้
                </EmptyDescription>
              </EmptyHeader>
            </Empty>
          ) : (
            <MessageGroup className="gap-3">
              {visibleMessages.map((message, index) => {
                const mine = message.authorId === userId;
                const sentAt = new Date(message.createdAt);
                const previous = visibleMessages[index - 1];
                const showAuthor = !previous || previous.authorId !== message.authorId;
                const next = visibleMessages[index + 1];
                const showAvatar = !next || next.authorId !== message.authorId;
                const previousAt = previous ? new Date(previous.createdAt) : null;
                const showTime = !previousAt || sentAt.getFullYear() !== previousAt.getFullYear() ||
                  sentAt.getMonth() !== previousAt.getMonth() || sentAt.getDate() !== previousAt.getDate() ||
                  sentAt.getHours() !== previousAt.getHours();
                const parent = message.replyToId
                  ? visibleMessageById.get(message.replyToId)
                  : null;
                const emojiValues = new Set([
                  ...message.reactions.map((reaction) => reaction.emoji),
                  ...Object.keys(optimisticReactions)
                    .filter((key) => key.startsWith(`${message.id}:`))
                    .map((key) => key.slice(message.id.length + 1)),
                ]);
                const counts = [...emojiValues]
                  .map((emoji) => {
                    const savedCount = message.reactions.filter(
                      (reaction) => reaction.emoji === emoji,
                    ).length;
                    const savedActive = message.reactions.some(
                      (reaction) =>
                        reaction.emoji === emoji && reaction.userId === userId,
                    );
                    const update =
                      optimisticReactions[reactionKey(message.id, emoji)];
                    const visibleUpdate =
                      update &&
                      (update.status === "sending" ||
                        update.active !== savedActive)
                        ? update
                        : null;
                    const active = visibleUpdate?.active ?? savedActive;
                    const count =
                      savedCount +
                      (visibleUpdate && active !== savedActive
                        ? active
                          ? 1
                          : -1
                        : 0);
                    return {
                      emoji,
                      count,
                      active,
                      pending: update?.status === "sending",
                    };
                  })
                  .filter(({ count }) => count > 0);
                return (
                  <Message key={message.id} align={mine ? "end" : "start"}>
                    <MessageAvatar className={showAvatar ? undefined : "bg-transparent"}>
                      {showAvatar && (
                        <Avatar size="sm">
                          {message.authorImage && (
                            <AvatarImage src={message.authorImage} alt="" />
                          )}
                          <AvatarFallback>
                            {message.authorName.trim().charAt(0).toUpperCase() || "?"}
                          </AvatarFallback>
                        </Avatar>
                      )}
                    </MessageAvatar>
                    <MessageContent
                      className={cn(
                        "w-full gap-0.5",
                        mine ? "items-end" : "items-start",
                      )}
                    >
                      {showTime && (
                        <div
                          className={cn(
                            "w-full px-1 text-center text-xs font-medium text-muted-foreground",
                            mine ? "translate-x-5" : "-translate-x-5",
                          )}
                        >
                          <time dateTime={sentAt.toISOString()}>
                            {`${padTime(sentAt.getDate())}/${padTime(sentAt.getMonth() + 1)}/${sentAt.getFullYear()} ${padTime(sentAt.getHours())}:${padTime(sentAt.getMinutes())}`}
                          </time>
                        </div>
                      )}
                      {!mine && showAuthor && (
                        <MessageHeader className="px-1">{message.authorName}</MessageHeader>
                      )}
                      <div
                        className={cn(
                          "flex max-w-[min(82%,36rem)] items-center gap-1",
                          mine && "flex-row-reverse",
                        )}
                      >
                        <Bubble
                          variant={
                            message.imageUrls.length
                              ? "ghost"
                              : mine
                                ? "default"
                                : "secondary"
                          }
                          className="min-w-0 max-w-full"
                        >
                          <BubbleContent
                            className={cn(
                              "max-w-full",
                              message.imageUrls.length
                                ? "border-0 bg-transparent p-0 shadow-none"
                                : "px-4 py-2.5 shadow-sm",
                              mine ? "rounded-br-md" : "rounded-bl-md",
                            )}
                          >
                            {parent && <ReplyPreview message={parent} />}
                            {message.text && (
                              <p
                                className={cn(
                                  "whitespace-pre-wrap",
                                  mine && message.imageUrls.length && "text-foreground",
                                  message.imageUrls.length > 0 && "pb-2",
                                )}
                              >
                                {message.text}
                              </p>
                            )}
                            <CommissionMediaGrid urls={message.imageUrls} />
                          </BubbleContent>
                        </Bubble>
                        <div className="flex shrink-0 items-center gap-0.5 rounded-md bg-card/90 opacity-0 transition-opacity pointer-events-none group-hover/message:pointer-events-auto group-hover/message:opacity-100 group-focus-within/message:pointer-events-auto group-focus-within/message:opacity-100 [@media(hover:none)]:pointer-events-auto [@media(hover:none)]:opacity-100">
                          {status === "open" && (
                            <Popover
                              open={reactionFor === message.id}
                              onOpenChange={(open) =>
                                setReactionFor(open ? message.id : null)
                              }
                            >
                              <PopoverTrigger
                                render={
                                  <Button
                                    type="button"
                                    variant="ghost"
                                    size="icon-xs"
                                    aria-label="เพิ่มรีแอ็กชัน"
                                  />
                                }
                              >
                                <SmilePlus />
                              </PopoverTrigger>
                              <PopoverContent
                                align={mine ? "end" : "start"}
                                className="w-auto p-0"
                              >
                                <EmojiPicker
                                  lazyLoadEmojis
                                  onEmojiClick={(value) =>
                                    void react(message.id, value.emoji)
                                  }
                                />
                              </PopoverContent>
                            </Popover>
                          )}
                          {status === "open" && (
                            <Button
                              type="button"
                              variant="ghost"
                              size="icon-xs"
                              aria-label="ตอบกลับข้อความ"
                              onClick={() => {
                                setReplyToId(message.id);
                                document
                                  .getElementById("commission-message")
                                  ?.focus();
                              }}
                            >
                              <ReplyIcon />
                            </Button>
                          )}
                          {mine && status === "open" && (
                            <AlertDialog
                              open={deleteFor === message.id}
                              onOpenChange={(open) =>
                                setDeleteFor(open ? message.id : null)
                              }
                            >
                              <AlertDialogTrigger
                                render={
                                  <Button
                                    type="button"
                                    variant="ghost"
                                    size="icon-xs"
                                    aria-label="ลบข้อความ"
                                    disabled={Boolean(deletingId)}
                                  />
                                }
                              >
                                <Trash2 />
                              </AlertDialogTrigger>
                              <AlertDialogContent>
                                <AlertDialogHeader>
                                  <AlertDialogTitle>
                                    ลบข้อความนี้?
                                  </AlertDialogTitle>
                                  <AlertDialogDescription>
                                    ข้อความและรูปภาพที่แนบจะถูกลบถาวร
                                  </AlertDialogDescription>
                                </AlertDialogHeader>
                                <AlertDialogFooter>
                                  <AlertDialogCancel>ยกเลิก</AlertDialogCancel>
                                  <AlertDialogAction
                                    variant="destructive"
                                    onClick={() =>
                                      void deleteMessage(message.id)
                                    }
                                  >
                                    ลบข้อความ
                                  </AlertDialogAction>
                                </AlertDialogFooter>
                              </AlertDialogContent>
                            </AlertDialog>
                          )}
                        </div>
                      </div>
                      {counts.length > 0 && (
                        <div
                          className={cn(
                            "flex flex-wrap gap-1",
                            mine && "justify-end",
                          )}
                        >
                          {counts.map(({ emoji, count, active, pending }) => (
                            <Button
                              key={emoji}
                              type="button"
                              size="xs"
                              variant={active ? "secondary" : "outline"}
                              disabled={status !== "open" || pending}
                              aria-label={`${emoji} ${count} คน`}
                              aria-pressed={active}
                              onClick={() => react(message.id, emoji)}
                            >
                              <span
                                className={cn(
                                  "inline-flex items-center gap-1",
                                  pending
                                    ? "text-muted-foreground"
                                    : "text-foreground",
                                )}
                              >
                                <ReactionEmoji emoji={emoji} /> {count}
                              </span>
                            </Button>
                          ))}
                        </div>
                      )}
                    </MessageContent>
                  </Message>
                );
              })}
              {visibleOptimisticMessages.map((message) => (
                <Message key={message.localId} align="end">
                  <MessageContent className="w-full items-end gap-1">
                    <Bubble
                      variant={message.imageUrls.length ? "ghost" : "default"}
                      className="max-w-[min(82%,36rem)]"
                    >
                      <BubbleContent
                        className={cn(
                          "max-w-full",
                          message.imageUrls.length
                            ? "border-0 bg-transparent p-0 shadow-none"
                            : "px-4 py-2.5 shadow-sm",
                        )}
                      >
                        {message.replyToId &&
                          visibleMessageById.get(message.replyToId) && (
                            <ReplyPreview
                              message={
                                visibleMessageById.get(message.replyToId)!
                              }
                            />
                          )}
                        {message.text && (
                          <p
                            className={cn(
                              "whitespace-pre-wrap",
                              message.status === "sending" &&
                                (message.imageUrls.length ? "text-muted-foreground" : "text-primary-foreground/70"),
                              message.imageUrls.length > 0 && message.status !== "sending" && "text-foreground",
                              message.imageUrls.length > 0 && "pb-2",
                            )}
                          >
                            {message.text}
                          </p>
                        )}
                        <CommissionMediaGrid urls={message.imageUrls} pending={message.status === "sending"} />
                      </BubbleContent>
                    </Bubble>
                    {message.status === "sending" && <MessageFooter className="w-full justify-end gap-1 px-1">
                      กำลังส่ง...
                    </MessageFooter>}
                  </MessageContent>
                </Message>
              ))}
            </MessageGroup>
          )}
        </CardContent>
        <CardFooter className="block max-h-[50%] shrink-0 overflow-y-auto bg-card p-3 sm:p-4">
          {typing && status === "open" && (
            <p role="status" className="mb-2 text-xs text-muted-foreground">
              {typing.name} typing...
            </p>
          )}
          {status === "open" ? (
            <form onSubmit={send}>
              <FieldGroup className="gap-2">
                {replyTarget && (
                  <div className="flex items-start gap-2 rounded-lg border bg-muted/30 p-2">
                    <div className="min-w-0 flex-1">
                      <ReplyPreview message={replyTarget} />
                    </div>
                    <Button
                      type="button"
                      variant="ghost"
                      size="icon-xs"
                      aria-label="ยกเลิกการตอบกลับ"
                      onClick={() => setReplyToId(null)}
                    >
                      <X />
                    </Button>
                  </div>
                )}
                {images.length > 0 && (
                  <div>
                    <div className="grid max-w-md grid-cols-5 gap-1.5" aria-label={`รูปภาพที่แนบ ${images.length} รูป`}>
                      {imagePreviews.map((preview, index) => (
                        <div key={preview} className="relative aspect-square overflow-hidden rounded-md bg-muted">
                          {/* eslint-disable-next-line @next/next/no-img-element */}
                          <img src={preview} alt={`ตัวอย่างรูปภาพที่แนบ ${index + 1}`}
                            className="absolute inset-0 size-full object-cover" />
                          <Button type="button" variant="secondary" size="icon-xs"
                            aria-label={`นำรูปภาพที่ ${index + 1} ออก`}
                            className="absolute top-0.5 right-0.5 shadow-sm"
                            onClick={() => setAttachments(images.filter((_, position) => position !== index))}>
                            <X />
                          </Button>
                        </div>
                      ))}
                    </div>
                    <p className="mt-1 text-xs text-muted-foreground">{images.length}/10 รูป - สูงสุด 10 MiB ต่อรูป</p>
                  </div>
                )}
                <Field>
                  <FieldLabel htmlFor="commission-message" className="sr-only">
                    ข้อความ
                  </FieldLabel>
                  <InputGroup className="min-h-12 rounded-2xl">
                    <InputGroupAddon
                      align="inline-start"
                      className="self-end pb-1.5"
                    >
                      <InputGroupButton
                        type="button"
                        variant="ghost"
                        size="icon-sm"
                        disabled={busy || images.length >= 10}
                        aria-label="แนบรูปภาพ"
                        onClick={() => fileRef.current?.click()}
                      >
                        <ImagePlus />
                      </InputGroupButton>
                    </InputGroupAddon>
                    <InputGroupTextarea
                      id="commission-message"
                      name="text"
                      value={text}
                      onChange={(event) => {
                        const next = event.target.value;
                        setText(next);
                        sendTyping(Boolean(next.trim()));
                      }}
                      onBlur={() => sendTyping(false)}
                      onKeyDown={handleComposerKeyDown}
                      onPaste={handleComposerPaste}
                      placeholder="พิมพ์ข้อความ..."
                      maxLength={4000}
                      disabled={busy}
                      aria-describedby="commission-message-hint"
                      className="max-h-32 min-h-11 min-w-0 px-1.5 py-2.5"
                    />
                    <InputGroupAddon
                      align="inline-end"
                      className="self-end pb-1.5"
                    >
                      <InputGroupButton
                        type="submit"
                        variant="default"
                        size="sm"
                        aria-label={busy ? "กำลังส่งข้อความ" : "ส่งข้อความ"}
                        disabled={busy || (!text.trim() && !images.length)}
                      >
                        <SendHorizontal data-icon="inline-start" />
                        <span className="hidden sm:inline">
                          {busy ? "กำลังส่ง..." : "ส่ง"}
                        </span>
                      </InputGroupButton>
                    </InputGroupAddon>
                  </InputGroup>
                  <span id="commission-message-hint" className="sr-only">
                    กด Enter เพื่อส่ง หรือ Shift+Enter เพื่อขึ้นบรรทัดใหม่
                  </span>
                </Field>
                <input
                  ref={fileRef}
                  id="commission-image"
                  name="image"
                  type="file"
                  aria-label="แนบรูปภาพ"
                  className="sr-only"
                  accept="image/png,image/jpeg,image/webp"
                  multiple
                  onChange={(event) => {
                    chooseAttachments(Array.from(event.target.files ?? []));
                    event.target.value = "";
                  }}
                />
              </FieldGroup>
            </form>
          ) : (
            <p className="text-center text-sm text-muted-foreground">
              Ticket นี้ปิดแล้ว หากต้องการพูดคุยต่อ ให้ผู้ดูแลเปิด Ticket
              อีกครั้ง
            </p>
          )}
          {error && (
            <Alert variant="destructive" className="mt-3">
              <AlertDescription>{error}</AlertDescription>
            </Alert>
          )}
        </CardFooter>
      </Card>
    </>
  );
}