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 overflow-hidden">
        {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 && (
          <ul className="divide-y divide-[--color-border]">
            {filtered.map((r) => {
              const from = r.userEmail
                ? `${r.userName ? `${r.userName} · ` : ''}${r.userEmail}`
                : r.ticket.guestEmail
                  ? `${r.ticket.guestEmail} (guest)`
                  : 'unknown';
              return (
                <li key={r.ticket.id}>
                  {/* Whole row is the link — table-style layout via flex
                      so any pixel inside is clickable, not just the subject. */}
                  <Link
                    href={`/admin/support/${r.ticket.id}`}
                    className="grid grid-cols-[1fr_auto_auto] items-center gap-3 px-4 py-3 transition-colors hover:bg-[--color-bg-subtle]"
                  >
                    <div className="min-w-0">
                      <div className="truncate text-[13px] font-medium text-[--color-fg]">
                        {r.ticket.subject}
                      </div>
                      <div className="mono mt-0.5 truncate text-[11.5px] text-[--color-fg-subtle]">
                        {from}
                      </div>
                    </div>
                    <span
                      className={`mono shrink-0 rounded-full px-2 py-0.5 text-[10.5px] ${STATUS_BADGE[r.ticket.status]}`}
                    >
                      {r.ticket.status.replace('_', ' ')}
                    </span>
                    <span className="shrink-0 whitespace-nowrap text-[11px] text-[--color-fg-muted]">
                      {new Date(r.ticket.lastMessageAt).toLocaleString()}
                    </span>
                  </Link>
                </li>
              );
            })}
          </ul>
        )}
      </div>
    </div>
  );
}