buildmymcpserver/apps/web/app/admin/support/page.tsx

'use client';

import { apiFetch } from '@/lib/api';
import { Loader2 } from 'lucide-react';
import Link from 'next/link';
import { useEffect, useState } from 'react';

interface AdminTicketRow {
  ticket: {
    id: string;
    subject: string;
    status: 'awaiting_admin' | 'awaiting_user' | 'closed';
    guestEmail: string | null;
    createdAt: string;
    lastMessageAt: string;
  };
  userEmail: string | null;
  userName: string | null;
}

const STATUS_BADGE: Record<AdminTicketRow['ticket']['status'], string> = {
  awaiting_admin: 'bg-amber-500/20 text-amber-300',
  awaiting_user: 'bg-emerald-500/20 text-emerald-300',
  closed: 'bg-[--color-bg-subtle] text-[--color-fg-subtle]',
};

export default function AdminSupport() {
  const [rows, setRows] = useState<AdminTicketRow[] | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [filter, setFilter] = useState<'all' | 'awaiting_admin' | 'awaiting_user' | 'closed'>(
    'awaiting_admin',
  );

  useEffect(() => {
    apiFetch<{ tickets: AdminTicketRow[] }>('/v1/admin/support/tickets')
      .then((r) => setRows(r.tickets))
      .catch((e) => setError((e as Error).message));
  }, []);

  const filtered = (rows ?? []).filter(
    (r) => filter === 'all' || r.ticket.status === filter,
  );

  return (
    <div className="mx-auto max-w-6xl px-6 py-8">
      <div className="flex items-baseline justify-between">
        <div>
          <Link href="/admin" className="text-[12px] text-[--color-fg-muted] hover:text-[--color-fg]">
            ← Admin
          </Link>
          <h1 className="mt-1 text-[22px] font-semibold tracking-tight">Support tickets</h1>
        </div>
        <div className="flex gap-1">
          {(['awaiting_admin', 'awaiting_user', 'closed', 'all'] as const).map((s) => (
            <button
              type="button"
              key={s}
              onClick={() => setFilter(s)}
              className={`rounded-md px-2.5 py-1 text-[11.5px] transition-colors ${
                filter === s
                  ? 'bg-[--color-bg-subtle] text-[--color-fg]'
                  : 'text-[--color-fg-muted] hover:text-[--color-fg]'
              }`}
            >
              {s.replace('_', ' ')}
            </button>
          ))}
        </div>
      </div>

      {error && <p className="mt-4 text-[12.5px] text-[--color-danger]">{error}</p>}

      <div className="panel mt-6">
        {rows === null && (
          <div className="p-6 text-center">
            <Loader2 className="mx-auto animate-spin text-[--color-fg-muted]" size={18} />
          </div>
        )}
        {rows && filtered.length === 0 && (
          <div className="p-6 text-center text-[13px] text-[--color-fg-muted]">
            No tickets in this view.
          </div>
        )}
        {rows && filtered.length > 0 && (
          <table className="w-full text-[12.5px]">
            <thead className="border-b border-[--color-border] text-[--color-fg-subtle]">
              <tr>
                <th className="px-4 py-2 text-left font-medium">Subject</th>
                <th className="px-4 py-2 text-left font-medium">From</th>
                <th className="px-4 py-2 text-left font-medium">Status</th>
                <th className="px-4 py-2 text-left font-medium">Last activity</th>
              </tr>
            </thead>
            <tbody>
              {filtered.map((r) => (
                <tr
                  key={r.ticket.id}
                  className="border-b border-[--color-border] last:border-0 hover:bg-[--color-bg-subtle]"
                >
                  <td className="px-4 py-2.5">
                    <Link
                      href={`/admin/support/${r.ticket.id}`}
                      className="font-medium hover:text-[--color-accent]"
                    >
                      {r.ticket.subject}
                    </Link>
                  </td>
                  <td className="mono px-4 py-2.5 text-[--color-fg-muted]">
                    {r.userEmail ??
                      (r.ticket.guestEmail
                        ? `${r.ticket.guestEmail} (guest)`
                        : 'unknown')}
                  </td>
                  <td className="px-4 py-2.5">
                    <span
                      className={`rounded-full px-2 py-0.5 text-[10.5px] ${STATUS_BADGE[r.ticket.status]}`}
                    >
                      {r.ticket.status.replace('_', ' ')}
                    </span>
                  </td>
                  <td className="px-4 py-2.5 text-[--color-fg-muted]">
                    {new Date(r.ticket.lastMessageAt).toLocaleString()}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        )}
      </div>
    </div>
  );
}