baya-monorepo/client/src/app/[locale]/(private-routes)/admin/tickets/page.tsx

'use client';
import { Suspense } from 'react';
import { useRouter } from 'next/navigation';
import { useLocale, useTranslations } from 'next-intl';
import { Box, Chip, MenuItem, Skeleton, Stack, TextField } from '@mui/material';
import { AppButton, AppLoading, StatusChip } from '@/components';
import type { StatusKind } from '@/components';
import {
  AdminDataTable,
  AdminEmptyState,
  AdminErrorState,
  AdminPageHeader,
  AdminPager,
  type AdminTableColumn,
} from '@/components/admin';
import { adminTicketThreadPath } from '@/constants';
import { useAdminListState } from '@/hooks';
import { useAdminTickets } from '@/services/tickets';
import { TICKETS_PAGE_SIZE } from '@/services/tickets/constants';
import type { AdminTicketFilters, AdminTicketSummary, TicketCategory, TicketStatus } from '@/services/tickets/types';
import { formatShamsiDate } from '@/utils';

const STATUSES: readonly TicketStatus[] = ['open', 'closed'];
const CATEGORIES: readonly TicketCategory[] = ['coordination', 'support', 'refund', 'emergency'];
/** Queue status → chip color: an open ticket is pending work, a closed one is neutral (phase §5). */
const STATUS_KIND: Record<TicketStatus, StatusKind> = { open: 'pending', closed: 'neutral' };
const EMPTY: AdminTicketFilters = {};

function parseFilters(params: URLSearchParams): AdminTicketFilters {
  return {
    status: (params.get('status') as TicketStatus | null) ?? undefined,
    category: (params.get('category') as TicketCategory | null) ?? undefined,
    referenceCode: params.get('referenceCode') ?? undefined,
  };
}

function serializeFilters(filters: AdminTicketFilters): Record<string, string> {
  const record: Record<string, string> = {};
  if (filters.status) record.status = filters.status;
  if (filters.category) record.category = filters.category;
  if (filters.referenceCode) record.referenceCode = filters.referenceCode;
  return record;
}

/**
 * The admin global ticket queue (f15) — EVERY ticket across the platform (not one viewer's), the entry point
 * into a case. Filter by status/category/reference; a row opens the admin thread where internal notes and the
 * refund panel live. The filter **draft** commits to the query only on Apply, so typing a reference never
 * refetches; the applied filters + page are mirrored into the URL (`useAdminListState`, ui-phase-11) so
 * browser back/refresh/a pasted link all reproduce the exact same queue view. This surface is staff-only —
 * the server enforces the scope; the UI just routes here.
 */
export default function AdminTicketsPage() {
  return (
    <Suspense fallback={<AppLoading />}>
      <AdminTicketsQueue />
    </Suspense>
  );
}

function AdminTicketsQueue() {
  const t = useTranslations('admin');
  const locale = useLocale();
  const router = useRouter();

  const { draft, setDraft, applied, page, apply, clear, goToPage } = useAdminListState<AdminTicketFilters>({
    parse: parseFilters,
    serialize: serializeFilters,
    empty: EMPTY,
  });

  const tickets = useAdminTickets(applied, page);
  const items = tickets.data?.items ?? [];
  const total = tickets.data?.total ?? 0;
  const pageCount = Math.max(1, Math.ceil(total / TICKETS_PAGE_SIZE));
  const from = items.length === 0 ? 0 : (page - 1) * TICKETS_PAGE_SIZE + 1;
  const to = items.length === 0 ? 0 : from + items.length - 1;

  const columns: AdminTableColumn<AdminTicketSummary>[] = [
    {
      key: 'ref',
      header: t('ticket_col_ref'),
      render: (row) => (
        <Box component="span" dir="ltr" sx={{ fontWeight: 700 }}>
          {row.referenceCode}
        </Box>
      ),
    },
    { key: 'subject', header: t('ticket_col_subject'), render: (row) => row.subject ?? '—' },
    {
      key: 'category',
      header: t('ticket_col_category'),
      render: (row) => <Chip size="small" label={t(`tcat_${row.category}`)} />,
    },
    {
      key: 'status',
      header: t('ticket_col_status'),
      render: (row) => <StatusChip status={STATUS_KIND[row.status]} label={t(`tstatus_${row.status}`)} />,
    },
    { key: 'booking', header: t('ticket_col_booking'), render: (row) => row.bookingId ?? '—' },
    {
      key: 'activity',
      header: t('ticket_activity_col'),
      minWidth: 140,
      render: (row) => formatShamsiDate(row.createdAt, locale),
    },
  ];

  return (
    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
      <AdminPageHeader title={t('ticket_title')} subtitle={t('ticket_subtitle')} />

      <Stack
        direction="row"
        sx={{ gap: 1.5, flexWrap: 'wrap', alignItems: 'center', p: 2, border: '1px solid', borderColor: 'divider', borderRadius: 2 }}
      >
        <TextField
          select
          size="small"
          label={t('ticket_col_status')}
          value={draft.status ?? ''}
          onChange={(e) => setDraft((d) => ({ ...d, status: (e.target.value || undefined) as TicketStatus | undefined }))}
          sx={{ minWidth: 140 }}
        >
          <MenuItem value="">{t('filter_all')}</MenuItem>
          {STATUSES.map((s) => (
            <MenuItem key={s} value={s}>
              {t(`tstatus_${s}`)}
            </MenuItem>
          ))}
        </TextField>
        <TextField
          select
          size="small"
          label={t('ticket_col_category')}
          value={draft.category ?? ''}
          onChange={(e) => setDraft((d) => ({ ...d, category: (e.target.value || undefined) as TicketCategory | undefined }))}
          sx={{ minWidth: 160 }}
        >
          <MenuItem value="">{t('filter_all')}</MenuItem>
          {CATEGORIES.map((c) => (
            <MenuItem key={c} value={c}>
              {t(`tcat_${c}`)}
            </MenuItem>
          ))}
        </TextField>
        <TextField
          size="small"
          label={t('ticket_col_ref')}
          placeholder={t('ticket_search_ref_ph')}
          value={draft.referenceCode ?? ''}
          onChange={(e) => setDraft((d) => ({ ...d, referenceCode: e.target.value || undefined }))}
          sx={{ minWidth: 220 }}
        />
        <AppButton variant="contained" color="primary" onClick={apply}>
          {t('apply')}
        </AppButton>
        <AppButton variant="text" color="inherit" onClick={clear}>
          {t('clear')}
        </AppButton>
      </Stack>

      {tickets.isLoading ? (
        <Stack sx={{ gap: 1 }}>
          {[0, 1, 2, 3].map((k) => (
            <Skeleton key={k} variant="rounded" height={48} />
          ))}
        </Stack>
      ) : tickets.isError ? (
        <AdminErrorState message={t('error_generic')} retryLabel={t('retry')} onRetry={() => tickets.refetch()} />
      ) : items.length === 0 ? (
        <AdminEmptyState icon="support" title={t('ticket_empty')} />
      ) : (
        <AdminDataTable
          columns={columns}
          rows={items}
          getRowKey={(row) => row.id}
          ariaLabel={t('ticket_title')}
          onRowClick={(row) => router.push(`/${locale}${adminTicketThreadPath(row.id)}`)}
          footer={t('showing_range', { from, to, total })}
        />
      )}

      <AdminPager
        page={page}
        pageCount={pageCount}
        onPrev={() => goToPage(Math.max(1, page - 1))}
        onNext={() => goToPage(Math.min(pageCount, page + 1))}
        prevLabel={t('prev_page')}
        nextLabel={t('next_page')}
        indicator={t('page_indicator', { page, total: pageCount })}
      />
    </Box>
  );
}