pieced-portal/src/components/support/ticket-thread.tsx

"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { useTranslations, useFormatter } from "next-intl";
import { Card } from "@/components/ui/card";
import { formatDateTime } from "@/lib/format";
import type { SupportTicketComment, SupportTicketStatus } from "@/types";

interface Props {
  ticketId: string;
  ticketStatus: SupportTicketStatus;
  comments: SupportTicketComment[];
  isPlatform: boolean;
  /** True when the viewer is the customer who created this ticket. */
  isOwnTicket: boolean;
}

/**
 * Thread of comments + reply box. Customer-side viewers see a
 * "Close ticket" button as well, mapping to the customer-self-close
 * path on the PATCH endpoint.
 *
 * Reply submission: posts the comment, then router.refresh() so the
 * server-rendered page re-fetches and renders the new entry. Avoids
 * duplicating the comment-rendering logic on the client.
 *
 * Empty body submissions are blocked at HTML level (required) AND
 * by the API; we trust both layers.
 */
export function TicketThread({
  ticketId,
  ticketStatus,
  comments,
  isPlatform,
  isOwnTicket,
}: Props) {
  const t = useTranslations("support");
  const tCommon = useTranslations("common");
  const f = useFormatter();
  const router = useRouter();

  const [body, setBody] = useState("");
  const [submitting, setSubmitting] = useState(false);
  const [closing, setClosing] = useState(false);
  const [error, setError] = useState("");

  const onSubmitComment = async (e: React.FormEvent) => {
    e.preventDefault();
    setSubmitting(true);
    setError("");
    try {
      const res = await fetch(
        `/api/support/tickets/${encodeURIComponent(ticketId)}/comments`,
        {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ body }),
        }
      );
      if (!res.ok) {
        const data = await res.json().catch(() => ({}));
        throw new Error(data.error || t("commentFailed"));
      }
      setBody("");
      router.refresh();
    } catch (e: any) {
      setError(e.message);
    } finally {
      setSubmitting(false);
    }
  };

  // Customer-self-close: confirms because it's a state change, then
  // hits PATCH with status=resolved. The API allows this for
  // own-ticket regardless of role; the button only shows when the
  // ticket is in a non-resolved state.
  const onCustomerClose = async () => {
    if (!confirm(t("confirmClose"))) return;
    setClosing(true);
    setError("");
    try {
      const res = await fetch(
        `/api/support/tickets/${encodeURIComponent(ticketId)}`,
        {
          method: "PATCH",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ status: "resolved" }),
        }
      );
      if (!res.ok) {
        const data = await res.json().catch(() => ({}));
        throw new Error(data.error || t("closeFailed"));
      }
      router.refresh();
    } catch (e: any) {
      setError(e.message);
    } finally {
      setClosing(false);
    }
  };

  const isResolved = ticketStatus === "resolved";
  const canCustomerClose =
    isOwnTicket && !isResolved;

  return (
    <>
      {comments.map((c) => (
        <Card
          key={c.id}
          className={
            c.authorKind === "admin"
              ? "border-blue-400/30 bg-blue-400/5"
              : ""
          }
        >
          <div className="flex items-center justify-between text-xs text-text-muted mb-2">
            <span className="font-medium text-text-primary">
              {c.authorName}
              {c.authorKind === "admin" && (
                <span className="ml-2 text-blue-400 text-[10px] uppercase tracking-wider">
                  {t("authorTagAdmin")}
                </span>
              )}
            </span>
            <span>{formatDateTime(c.createdAt, f)}</span>
          </div>
          <div className="text-sm text-text-primary whitespace-pre-wrap">
            {c.body}
          </div>
        </Card>
      ))}

      {isResolved && (
        <Card className="border-success/30 bg-success/5">
          <p className="text-sm text-text-secondary text-center">
            {t("resolvedBanner")}
          </p>
        </Card>
      )}

      {/* Reply box. Visible regardless of status — customer can
          reply even on a resolved ticket (which auto-reopens it
          server-side). The semantic is "reply means the ticket is
          alive again", which is friendlier than blocking the reply. */}
      <Card>
        <form onSubmit={onSubmitComment} className="space-y-3">
          <label className="block text-xs uppercase tracking-wider text-text-muted">
            {t("replyLabel")}
          </label>
          <textarea
            required
            minLength={1}
            maxLength={10_000}
            rows={4}
            value={body}
            onChange={(e) => setBody(e.target.value)}
            placeholder={
              isResolved && isOwnTicket
                ? t("replyPlaceholderReopen")
                : t("replyPlaceholder")
            }
            className="w-full px-3 py-2 rounded-lg border border-border bg-surface-2 text-text-primary text-sm focus:outline-none focus:border-text-secondary"
          />

          {error && (
            <div className="text-xs text-red-400 bg-red-400/10 border border-red-400/20 rounded-lg px-3 py-2">
              {error}
            </div>
          )}

          <div className="flex items-center justify-between">
            {canCustomerClose ? (
              <button
                type="button"
                onClick={onCustomerClose}
                disabled={closing || submitting}
                className="text-xs text-text-secondary hover:text-text-primary transition-colors disabled:opacity-50"
              >
                {closing ? tCommon("loading") : t("closeTicket")}
              </button>
            ) : (
              <span />
            )}
            <button
              type="submit"
              disabled={submitting || closing || body.trim().length === 0}
              className="text-sm font-medium px-4 py-2 rounded-lg bg-accent text-white hover:bg-accent/90 transition-colors disabled:opacity-50"
            >
              {submitting ? tCommon("loading") : t("sendReply")}
            </button>
          </div>
        </form>
      </Card>
    </>
  );
}