myeasycms-v2/packages/features/member-management/src/components/members-data-table.tsx

'use client';

import { useCallback } from 'react';

import { useRouter, useSearchParams } from 'next/navigation';

import { Download } from 'lucide-react';
import { useForm } from 'react-hook-form';

import { formatDate } from '@kit/shared/dates';
import { Badge } from '@kit/ui/badge';
import { Button } from '@kit/ui/button';
import { Input } from '@kit/ui/input';
import { useFileDownloadAction } from '@kit/ui/use-file-download-action';

import { STATUS_LABELS, getMemberStatusColor } from '../lib/member-utils';
import {
  exportMembers,
  exportMembersExcel,
} from '../server/actions/member-actions';

interface MembersDataTableProps {
  data: Array<Record<string, unknown>>;
  total: number;
  page: number;
  pageSize: number;
  account: string;
  accountId: string;
  duesCategories: Array<{ id: string; name: string }>;
}

const STATUS_OPTIONS = [
  { value: '', label: 'Alle' },
  { value: 'active', label: 'Aktiv' },
  { value: 'inactive', label: 'Inaktiv' },
  { value: 'pending', label: 'Ausstehend' },
  { value: 'resigned', label: 'Ausgetreten' },
] as const;

export function MembersDataTable({
  data,
  total,
  page,
  pageSize,
  account,
  accountId,
  duesCategories,
}: MembersDataTableProps) {
  const router = useRouter();
  const searchParams = useSearchParams();

  const currentSearch = searchParams.get('search') ?? '';
  const currentStatus = searchParams.get('status') ?? '';
  const totalPages = Math.max(1, Math.ceil(total / pageSize));

  const form = useForm({
    defaultValues: {
      search: currentSearch,
    },
  });

  const updateParams = useCallback(
    (updates: Record<string, string>) => {
      const params = new URLSearchParams(searchParams.toString());
      for (const [key, value] of Object.entries(updates)) {
        if (value) {
          params.set(key, value);
        } else {
          params.delete(key);
        }
      }
      // Reset to page 1 on filter change
      if (!('page' in updates)) {
        params.delete('page');
      }
      router.push(`?${params.toString()}`);
    },
    [router, searchParams],
  );

  const handleSearch = useCallback(
    (e: React.FormEvent) => {
      e.preventDefault();
      const search = form.getValues('search');
      updateParams({ search });
    },
    [form, updateParams],
  );

  const handleStatusChange = useCallback(
    (e: React.ChangeEvent<HTMLSelectElement>) => {
      updateParams({ status: e.target.value });
    },
    [updateParams],
  );

  const handlePageChange = useCallback(
    (newPage: number) => {
      updateParams({ page: String(newPage) });
    },
    [updateParams],
  );

  const handleRowClick = useCallback(
    (memberId: string) => {
      router.push(`/home/${account}/members-cms/${memberId}`);
    },
    [router, account],
  );

  const { execute: execCsvExport, isPending: isCsvExporting } =
    useFileDownloadAction(exportMembers, {
      successMessage: 'CSV-Export heruntergeladen',
      errorMessage: 'CSV-Export fehlgeschlagen',
    });

  const { execute: execExcelExport, isPending: isExcelExporting } =
    useFileDownloadAction(exportMembersExcel, {
      successMessage: 'Excel-Export heruntergeladen',
      errorMessage: 'Excel-Export fehlgeschlagen',
    });

  const isExporting = isCsvExporting || isExcelExporting;

  return (
    <div className="space-y-4">
      {/* Toolbar */}
      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
        <form onSubmit={handleSearch} className="flex gap-2">
          <Input
            placeholder="Mitglied suchen..."
            className="w-64"
            data-test="members-search-input"
            {...form.register('search')}
          />
          <Button
            type="submit"
            variant="outline"
            size="sm"
            data-test="members-search-btn"
          >
            Suchen
          </Button>
        </form>

        <div className="flex items-center gap-3">
          <select
            value={currentStatus}
            onChange={handleStatusChange}
            data-test="members-status-filter"
            className="border-input bg-background flex h-9 rounded-md border px-3 py-1 text-sm shadow-sm"
          >
            {STATUS_OPTIONS.map((opt) => (
              <option key={opt.value} value={opt.value}>
                {opt.label}
              </option>
            ))}
          </select>

          <Button
            variant="outline"
            size="sm"
            disabled={isExporting}
            onClick={() =>
              execCsvExport({
                accountId,
                status: currentStatus || undefined,
              })
            }
          >
            <Download className="mr-1 h-4 w-4" />
            CSV
          </Button>
          <Button
            variant="outline"
            size="sm"
            disabled={isExporting}
            onClick={() =>
              execExcelExport({
                accountId,
                status: currentStatus || undefined,
              })
            }
          >
            <Download className="mr-1 h-4 w-4" />
            Excel
          </Button>
          <Button
            size="sm"
            data-test="members-new-btn"
            onClick={() => router.push(`/home/${account}/members-cms/new`)}
          >
            Neues Mitglied
          </Button>
        </div>
      </div>

      {/* Table */}
      <div className="rounded-md border">
        <table className="w-full text-sm">
          <thead>
            <tr className="bg-muted/50 border-b">
              <th className="px-4 py-3 text-left font-medium">Nr</th>
              <th className="px-4 py-3 text-left font-medium">Name</th>
              <th className="px-4 py-3 text-left font-medium">E-Mail</th>
              <th className="px-4 py-3 text-left font-medium">Ort</th>
              <th className="px-4 py-3 text-left font-medium">Status</th>
              <th className="px-4 py-3 text-left font-medium">Eintritt</th>
            </tr>
          </thead>
          <tbody>
            {data.length === 0 ? (
              <tr>
                <td
                  colSpan={6}
                  className="text-muted-foreground px-4 py-8 text-center"
                >
                  Keine Mitglieder gefunden.
                </td>
              </tr>
            ) : (
              data.map((member) => {
                const memberId = String(member.id ?? '');
                const status = String(member.status ?? 'active');
                return (
                  <tr
                    key={memberId}
                    onClick={() => handleRowClick(memberId)}
                    className="hover:bg-muted/50 cursor-pointer border-b transition-colors"
                  >
                    <td className="px-4 py-3 font-mono text-xs">
                      {String(member.member_number ?? '—')}
                    </td>
                    <td className="px-4 py-3">
                      {String(member.last_name ?? '')},{' '}
                      {String(member.first_name ?? '')}
                    </td>
                    <td className="text-muted-foreground px-4 py-3">
                      {String(member.email ?? '—')}
                    </td>
                    <td className="px-4 py-3">{String(member.city ?? '—')}</td>
                    <td className="px-4 py-3">
                      <Badge variant={getMemberStatusColor(status)}>
                        {STATUS_LABELS[status] ?? status}
                      </Badge>
                    </td>
                    <td className="text-muted-foreground px-4 py-3">
                      {formatDate(member.entry_date as string)}
                    </td>
                  </tr>
                );
              })
            )}
          </tbody>
        </table>
      </div>

      {/* Pagination */}
      <div className="flex items-center justify-between">
        <p className="text-muted-foreground text-sm">
          {total} Mitglied{total !== 1 ? 'er' : ''} insgesamt
        </p>
        <div className="flex items-center gap-2">
          <Button
            variant="outline"
            size="sm"
            disabled={page <= 1}
            onClick={() => handlePageChange(page - 1)}
          >
            ← Zurück
          </Button>
          <span className="text-sm">
            Seite {page} von {totalPages}
          </span>
          <Button
            variant="outline"
            size="sm"
            disabled={page >= totalPages}
            onClick={() => handlePageChange(page + 1)}
          >
            Weiter →
          </Button>
        </div>
      </div>
    </div>
  );
}