myeasycms-v2/packages/features/fischerei/src/components/catch-books-data-table.tsx

'use client';

import { useCallback } from 'react';

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

import { Pencil } from 'lucide-react';

import { Badge } from '@kit/ui/badge';
import { Button } from '@kit/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@kit/ui/card';
import { useActionWithToast } from '@kit/ui/use-action-with-toast';

import {
  CATCH_BOOK_STATUS_LABELS,
  CATCH_BOOK_STATUS_COLORS,
} from '../lib/fischerei-constants';
import { deleteCatchBook } from '../server/actions/fischerei-actions';
import { DeleteConfirmButton } from './delete-confirm-button';

interface CatchBooksDataTableProps {
  data: Array<Record<string, unknown>>;
  total: number;
  page: number;
  pageSize: number;
  account: string;
  accountId: string;
}

const STATUS_OPTIONS = [
  { value: '', label: 'Alle Status' },
  { value: 'offen', label: 'Offen' },
  { value: 'eingereicht', label: 'Eingereicht' },
  { value: 'geprueft', label: 'Geprüft' },
  { value: 'akzeptiert', label: 'Akzeptiert' },
  { value: 'abgelehnt', label: 'Abgelehnt' },
] as const;

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

  const { execute: executeDelete, isPending: isDeleting } = useActionWithToast(
    deleteCatchBook,
    {
      successMessage: 'Fangbuch gelöscht',
      onSuccess: () => router.refresh(),
    },
  );

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

  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);
        }
      }
      if (!('page' in updates)) params.delete('page');
      router.push(`?${params.toString()}`);
    },
    [router, searchParams],
  );

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

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

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

  // Build year options from current year going back 5 years
  const thisYear = new Date().getFullYear();
  const yearOptions = Array.from({ length: 6 }, (_, i) => thisYear - i);

  return (
    <div className="space-y-4">
      {/* Toolbar */}
      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
        <div className="flex items-center gap-3">
          <select
            value={currentYear}
            onChange={handleYearChange}
            data-test="catchbooks-year-filter"
            className="border-input bg-background flex h-9 rounded-md border px-3 py-1 text-sm shadow-sm"
          >
            <option value="">Alle Jahre</option>
            {yearOptions.map((y) => (
              <option key={y} value={String(y)}>
                {y}
              </option>
            ))}
          </select>

          <select
            value={currentStatus}
            onChange={handleStatusChange}
            data-test="catchbooks-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>
        </div>
      </div>

      {/* Table */}
      <Card>
        <CardHeader>
          <CardTitle>Fangbücher ({total})</CardTitle>
        </CardHeader>
        <CardContent>
          {data.length === 0 ? (
            <div className="flex flex-col items-center justify-center rounded-lg border border-dashed p-12 text-center">
              <h3 className="text-lg font-semibold">
                Keine Fangbücher vorhanden
              </h3>
              <p className="text-muted-foreground mt-1 max-w-sm text-sm">
                Es wurden noch keine Fangbücher angelegt.
              </p>
            </div>
          ) : (
            <div className="rounded-md border">
              <table className="w-full text-sm">
                <thead>
                  <tr className="bg-muted/50 border-b">
                    <th scope="col" className="p-3 text-left font-medium">
                      Mitglied
                    </th>
                    <th scope="col" className="p-3 text-right font-medium">
                      Jahr
                    </th>
                    <th scope="col" className="p-3 text-right font-medium">
                      Angeltage
                    </th>
                    <th scope="col" className="p-3 text-right font-medium">
                      Fänge
                    </th>
                    <th scope="col" className="p-3 text-left font-medium">
                      Status
                    </th>
                    <th scope="col" className="p-3 text-right font-medium">
                      Aktionen
                    </th>
                  </tr>
                </thead>
                <tbody>
                  {data.map((cb) => {
                    const members = cb.members as Record<
                      string,
                      unknown
                    > | null;
                    const memberName = members
                      ? `${String(members.first_name ?? '')} ${String(members.last_name ?? '')}`.trim()
                      : String(cb.member_name ?? '—');
                    const status = String(cb.status ?? 'offen');

                    return (
                      <tr
                        key={String(cb.id)}
                        className="hover:bg-muted/30 cursor-pointer border-b"
                        onClick={() =>
                          router.push(
                            `/home/${account}/fischerei/catch-books/${String(cb.id)}`,
                          )
                        }
                      >
                        <td className="p-3 font-medium">{memberName}</td>
                        <td className="p-3 text-right">{String(cb.year)}</td>
                        <td className="p-3 text-right">
                          {String(cb.fishing_days_count ?? 0)}
                        </td>
                        <td className="p-3 text-right">
                          {String(cb.total_fish_caught ?? 0)}
                        </td>
                        <td className="p-3">
                          <Badge
                            variant={
                              (CATCH_BOOK_STATUS_COLORS[status] as
                                | 'secondary'
                                | 'default'
                                | 'outline'
                                | 'destructive') ?? 'secondary'
                            }
                          >
                            {CATCH_BOOK_STATUS_LABELS[status] ?? status}
                          </Badge>
                        </td>
                        <td className="p-3 text-right">
                          <div className="flex items-center justify-end gap-1">
                            <Button
                              variant="ghost"
                              size="sm"
                              aria-label="Fangbuch bearbeiten"
                              data-test="catchbook-edit-btn"
                              onClick={(e) => {
                                e.stopPropagation();
                                router.push(
                                  `/home/${account}/fischerei/catch-books/${String(cb.id)}`,
                                );
                              }}
                            >
                              <Pencil className="h-4 w-4" aria-hidden="true" />
                            </Button>
                            <DeleteConfirmButton
                              title="Fangbuch löschen"
                              description="Möchten Sie dieses Fangbuch wirklich löschen? Alle zugehörigen Fangeinträge werden ebenfalls gelöscht. Diese Aktion kann nicht rückgängig gemacht werden."
                              isPending={isDeleting}
                              onConfirm={() =>
                                executeDelete({
                                  catchBookId: String(cb.id),
                                  accountId,
                                })
                              }
                            />
                          </div>
                        </td>
                      </tr>
                    );
                  })}
                </tbody>
              </table>
            </div>
          )}

          {totalPages > 1 && (
            <div className="mt-4 flex items-center justify-between">
              <p className="text-muted-foreground text-sm">
                Seite {page} von {totalPages} ({total} Einträge)
              </p>
              <div className="flex gap-2">
                <Button
                  variant="outline"
                  size="sm"
                  disabled={page <= 1}
                  onClick={() => handlePageChange(page - 1)}
                >
                  Zurück
                </Button>
                <Button
                  variant="outline"
                  size="sm"
                  disabled={page >= totalPages}
                  onClick={() => handlePageChange(page + 1)}
                >
                  Weiter
                </Button>
              </div>
            </div>
          )}
        </CardContent>
      </Card>
    </div>
  );
}