buildmymcpserver/apps/web/app/admin/support/[id]/page.tsx

'use client';

import { Textarea } from '@/components/input';
import { Button } from '@/components/ui/button';
import { apiFetch } from '@/lib/api';
import { Loader2 } from 'lucide-react';
import Link from 'next/link';
import { useParams } from 'next/navigation';
import { useEffect, useState } from 'react';

interface Ticket {
  id: string;
  subject: string;
  status: 'awaiting_admin' | 'awaiting_user' | 'closed';
  guestEmail: string | null;
  createdAt: string;
  lastMessageAt: string;
}

interface Message {
  id: string;
  authorIsAdmin: boolean;
  body: string;
  createdAt: string;
}

interface Detail {
  ticket: Ticket;
  userEmail: string | null;
  userName: string | null;
  messages: Message[];
}

export default function AdminTicketDetail() {
  const params = useParams<{ id: string }>();
  const [data, setData] = useState<Detail | null>(null);
  const [reply, setReply] = useState('');
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState<string | null>(null);

  function load() {
    if (!params?.id) return;
    apiFetch<Detail>(`/v1/admin/support/tickets/${params.id}`)
      .then(setData)
      .catch((e) => setError((e as Error).message));
  }

  useEffect(load, [params?.id]);

  async function sendReply(e: React.FormEvent) {
    e.preventDefault();
    if (!params?.id || reply.trim().length === 0) return;
    setBusy(true);
    setError(null);
    try {
      await apiFetch(`/v1/admin/support/tickets/${params.id}/messages`, {
        method: 'POST',
        body: JSON.stringify({ body: reply }),
      });
      setReply('');
      load();
    } catch (err) {
      setError((err as Error).message);
    } finally {
      setBusy(false);
    }
  }

  async function setStatus(status: Ticket['status']) {
    if (!params?.id) return;
    setBusy(true);
    setError(null);
    try {
      await apiFetch(`/v1/admin/support/tickets/${params.id}/status`, {
        method: 'POST',
        body: JSON.stringify({ status }),
      });
      load();
    } catch (err) {
      setError((err as Error).message);
    } finally {
      setBusy(false);
    }
  }

  if (!data && !error) {
    return (
      <div className="mx-auto max-w-3xl px-6 py-12 text-center">
        <Loader2 className="mx-auto animate-spin text-[--color-fg-muted]" size={20} />
      </div>
    );
  }

  if (error || !data) {
    return (
      <div className="mx-auto max-w-3xl px-6 py-12">
        <p className="text-[13px] text-[--color-danger]">{error ?? 'Ticket not found.'}</p>
        <Link href="/admin/support" className="mt-3 inline-block text-[12px] text-[--color-fg-muted] hover:text-[--color-fg]">
          ← Back to tickets
        </Link>
      </div>
    );
  }

  const { ticket, messages, userEmail, userName } = data;
  const fromLabel = userEmail
    ? `${userName ? `${userName} · ` : ''}${userEmail}`
    : ticket.guestEmail
      ? `${ticket.guestEmail} (guest)`
      : 'unknown';

  return (
    <div className="mx-auto max-w-3xl px-6 py-10">
      <Link
        href="/admin/support"
        className="text-[12px] text-[--color-fg-muted] hover:text-[--color-fg]"
      >
        ← All tickets
      </Link>
      <div className="mt-3 flex items-baseline justify-between gap-3">
        <div className="min-w-0 flex-1">
          <h1 className="text-[22px] font-semibold tracking-tight">{ticket.subject}</h1>
          <p className="mt-1 text-[12px] text-[--color-fg-muted]">From: {fromLabel}</p>
        </div>
        <span className="mono text-[10.5px] uppercase tracking-wider text-[--color-fg-subtle]">
          {ticket.status.replace('_', ' ')}
        </span>
      </div>

      <div className="mt-6 space-y-3">
        {messages.map((m) => (
          <div
            key={m.id}
            className={`panel p-4 ${m.authorIsAdmin ? 'border-[--color-accent]/40' : ''}`}
          >
            <div className="flex items-baseline justify-between">
              <span
                className={`text-[11.5px] font-medium ${m.authorIsAdmin ? 'text-[--color-accent]' : 'text-[--color-fg]'}`}
              >
                {m.authorIsAdmin ? 'Admin' : 'User'}
              </span>
              <span className="text-[10.5px] text-[--color-fg-subtle]">
                {new Date(m.createdAt).toLocaleString()}
              </span>
            </div>
            <p className="mt-2 whitespace-pre-wrap text-[13px] leading-relaxed text-[--color-fg-muted]">
              {m.body}
            </p>
          </div>
        ))}
      </div>

      <form onSubmit={sendReply} className="panel mt-6 space-y-3 p-4">
        <Textarea
          value={reply}
          onChange={(e) => setReply(e.target.value)}
          rows={4}
          maxLength={10_000}
          placeholder="Reply to user…"
        />
        {error && <p className="text-[12.5px] text-[--color-danger]">{error}</p>}
        <div className="flex items-center justify-between gap-2">
          <div className="flex gap-1">
            <Button
              variant="ghost"
              size="sm"
              type="button"
              onClick={() => setStatus('closed')}
              disabled={busy || ticket.status === 'closed'}
            >
              Mark closed
            </Button>
            {ticket.status === 'closed' && (
              <Button
                variant="ghost"
                size="sm"
                type="button"
                onClick={() => setStatus('awaiting_admin')}
                disabled={busy}
              >
                Reopen
              </Button>
            )}
          </div>
          <Button
            variant="primary"
            size="md"
            type="submit"
            disabled={busy || reply.trim().length === 0}
          >
            {busy ? 'Sending…' : 'Send reply'}
          </Button>
        </div>
      </form>
    </div>
  );
}