import { notFound, redirect } from "next/navigation";
import { getTranslations, getFormatter } from "next-intl/server";
import { getSessionUser } from "@/lib/session";
import {
  getSupportTicketById,
  listCommentsForTicket,
} from "@/lib/db";
import { Card } from "@/components/ui/card";
import { BackLink } from "@/components/ui/back-link";
import { TicketStatusBadge } from "@/components/support/ticket-status-badge";
import { TicketCategoryLabel } from "@/components/support/ticket-category-label";
import { TicketThread } from "@/components/support/ticket-thread";
import { TicketAdminControls } from "@/components/support/ticket-admin-controls";
import { formatDateTime } from "@/lib/format";

/**
 * /support/[id] — single ticket detail.
 *
 * Same UI for customer and admin; admin gets an extra
 * `<TicketAdminControls>` block for changing status/category. The
 * customer side gets a "Close ticket" link if they want to mark it
 * resolved themselves.
 *
 * Authorization mirrors the API: customer sees their own; platform
 * admin sees any. 404 (not 403) when a customer accesses someone
 * else's ticket — don't leak existence.
 */
export default async function TicketDetailPage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const user = await getSessionUser();
  if (!user) redirect("/login");
  const { id } = await params;
  const ticket = await getSupportTicketById(id);
  if (!ticket) notFound();
  if (!user.isPlatform && ticket.zitadelUserId !== user.id) {
    notFound();
  }
  const comments = await listCommentsForTicket(id);
  const t = await getTranslations("support");
  const f = await getFormatter();

  return (
    <main className="max-w-3xl mx-auto px-6 py-8">
      <div className="mb-6 animate-in">
        <BackLink href="/support" label={t("title")} />
        <div className="flex items-start justify-between gap-3 mt-2">
          <h1 className="font-display text-2xl font-semibold">
            {ticket.title}
          </h1>
          <TicketStatusBadge status={ticket.status} />
        </div>
        <div className="text-xs text-text-muted mt-2 flex items-center gap-2 flex-wrap">
          <TicketCategoryLabel category={ticket.category} />
          <span>·</span>
          <span>
            {t("openedBy", {
              name: ticket.contactName,
              when: formatDateTime(ticket.createdAt, f),
            })}
          </span>
          <span>·</span>
          <span className="font-mono">#{ticket.id.slice(0, 8)}</span>
        </div>
      </div>

      {/* Original ticket description, rendered as the first message
          in the thread. Visually distinct via the customer-author
          styling (handled inside <TicketThread>). */}
      <div className="space-y-4 animate-in animate-in-delay-1">
        <Card>
          <div className="flex items-center justify-between text-xs text-text-muted mb-2">
            <span className="font-medium text-text-primary">
              {ticket.contactName}
            </span>
            <span>{formatDateTime(ticket.createdAt, f)}</span>
          </div>
          <div className="text-sm text-text-primary whitespace-pre-wrap">
            {ticket.description}
          </div>
        </Card>

        <TicketThread
          ticketId={ticket.id}
          ticketStatus={ticket.status}
          comments={comments}
          isPlatform={user.isPlatform}
          isOwnTicket={ticket.zitadelUserId === user.id}
        />

        {user.isPlatform && (
          <TicketAdminControls
            ticketId={ticket.id}
            currentStatus={ticket.status}
            currentCategory={ticket.category}
          />
        )}
      </div>
    </main>
  );
}