top-tickets/src/app/(admin)/tickets/[id]/ticket-thread.tsx

"use client";

import { useEffect, useRef, useState } from "react";
import Link from "next/link";
import { AnimatePresence, motion } from "framer-motion";
import { ArrowLeft, Send } from "lucide-react";
import { useTicketEvents } from "@/lib/events/use-ticket-events";
import { formatRelativeTime } from "@/lib/format";
import type { TicketDTO, MessageDTO, TicketStatus } from "@/lib/tickets/types";

const STATUS_LABEL: Record<TicketStatus, string> = {
  new: "Новая",
  open: "Открыта",
  pending: "В ожидании",
  closed: "Закрыта",
};

export function TicketThread({
  ticket: initialTicket,
  initialMessages,
  agents,
}: {
  ticket: TicketDTO;
  initialMessages: MessageDTO[];
  agents: { id: string; name: string }[];
}) {
  const [ticket, setTicket] = useState(initialTicket);
  const [messages, setMessages] = useState(initialMessages);
  const [draft, setDraft] = useState("");
  const [sending, setSending] = useState(false);
  const bottomRef = useRef<HTMLDivElement>(null);

  useTicketEvents("/api/events", (event) => {
    if (event.type === "ticket.updated" && event.ticket.id === ticket.id) {
      setTicket(event.ticket);
    }
    if (event.type === "message.created" && event.ticketId === ticket.id) {
      setMessages((prev) => (prev.some((m) => m.id === event.message.id) ? prev : [...prev, event.message]));
    }
  });

  useEffect(() => {
    bottomRef.current?.scrollIntoView({ behavior: "smooth" });
  }, [messages.length]);

  async function sendReply() {
    if (!draft.trim()) return;
    setSending(true);
    const res = await fetch(`/api/tickets/${ticket.id}/messages`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ body: draft }),
    });
    setSending(false);
    if (res.ok) setDraft("");
  }

  async function updateStatus(status: TicketStatus) {
    const res = await fetch(`/api/tickets/${ticket.id}`, {
      method: "PATCH",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ status }),
    });
    if (res.ok) {
      const { ticket: updated } = await res.json();
      setTicket(updated);
    }
  }

  async function updateAssignee(assigneeId: string) {
    const res = await fetch(`/api/tickets/${ticket.id}`, {
      method: "PATCH",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ assigneeId: assigneeId || null }),
    });
    if (res.ok) {
      const { ticket: updated } = await res.json();
      setTicket(updated);
    }
  }

  return (
    <div className="flex h-[calc(100vh-6.5rem)] flex-col">
      <div className="mb-4 flex items-start justify-between gap-4">
        <div className="min-w-0">
          <Link href="/dashboard" className="mb-1 flex items-center gap-1 text-xs text-text-muted hover:text-text">
            <ArrowLeft size={13} />
            Дашборд
          </Link>
          <h1 className="truncate text-lg font-bold">{ticket.subject}</h1>
          <p className="text-sm text-text-muted">{ticket.customerName}</p>
        </div>

        <div className="flex shrink-0 items-center gap-2">
          <select
            value={ticket.status}
            onChange={(e) => updateStatus(e.target.value as TicketStatus)}
            className="rounded-md border border-border bg-surface px-2 py-1.5 text-sm outline-none focus:border-accent"
          >
            {Object.entries(STATUS_LABEL).map(([value, label]) => (
              <option key={value} value={value}>
                {label}
              </option>
            ))}
          </select>
          <select
            value={ticket.assigneeId ?? ""}
            onChange={(e) => updateAssignee(e.target.value)}
            className="rounded-md border border-border bg-surface px-2 py-1.5 text-sm outline-none focus:border-accent"
          >
            <option value="">Не назначено</option>
            {agents.map((agent) => (
              <option key={agent.id} value={agent.id}>
                {agent.name}
              </option>
            ))}
          </select>
        </div>
      </div>

      <div className="card flex-1 overflow-y-auto p-4">
        <AnimatePresence initial={false}>
          {messages.map((message) => (
            <MessageBubble key={message.id} message={message} />
          ))}
        </AnimatePresence>
        <div ref={bottomRef} />
      </div>

      <div className="mt-3 flex gap-2">
        <textarea
          value={draft}
          onChange={(e) => setDraft(e.target.value)}
          onKeyDown={(e) => {
            if (e.key === "Enter" && !e.shiftKey) {
              e.preventDefault();
              sendReply();
            }
          }}
          rows={2}
          placeholder="Ответить клиенту…"
          className="flex-1 resize-none rounded-md border border-border bg-surface px-3 py-2 text-sm outline-none focus:border-accent"
        />
        <button onClick={sendReply} disabled={sending || !draft.trim()} className="btn btn-primary self-end">
          <Send size={15} />
        </button>
      </div>
    </div>
  );
}

function MessageBubble({ message }: { message: MessageDTO }) {
  const isAgent = message.authorType === "agent";
  const isSystem = message.authorType === "system";

  if (isSystem) {
    return (
      <p className="my-2 text-center text-xs text-text-faint">{message.body}</p>
    );
  }

  return (
    <motion.div
      layout
      initial={{ opacity: 0, y: 8 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.18 }}
      className={`mb-3 flex ${isAgent ? "justify-end" : "justify-start"}`}
    >
      <div className={`max-w-[75%] rounded-lg px-3 py-2 text-sm ${isAgent ? "bg-accent text-white" : "bg-surface-hover"}`}>
        <p className="mb-1 whitespace-pre-wrap">{message.body}</p>
        <p className={`text-[11px] ${isAgent ? "text-white/70" : "text-text-faint"}`}>
          {message.authorName} · {formatRelativeTime(message.createdAt)}
        </p>
      </div>
    </motion.div>
  );
}