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

'use client';

import { useCallback } from 'react';
import { useForm } from 'react-hook-form';
import { useRouter, useSearchParams } from 'next/navigation';
import Link from 'next/link';

import { Plus } 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 { Input } from '@kit/ui/input';

import { WATER_TYPE_LABELS } from '../lib/fischerei-constants';

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

const WATER_TYPE_OPTIONS = [
  { value: '', label: 'Alle Typen' },
  { value: 'fluss', label: 'Fluss' },
  { value: 'bach', label: 'Bach' },
  { value: 'see', label: 'See' },
  { value: 'teich', label: 'Teich' },
  { value: 'weiher', label: 'Weiher' },
  { value: 'kanal', label: 'Kanal' },
  { value: 'stausee', label: 'Stausee' },
  { value: 'baggersee', label: 'Baggersee' },
  { value: 'sonstige', label: 'Sonstige' },
] as const;

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

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

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

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

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

  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="Gewässer suchen..."
            className="w-64"
            {...form.register('search')}
          />
          <Button type="submit" variant="outline" size="sm">
            Suchen
          </Button>
        </form>

        <div className="flex items-center gap-3">
          <select
            value={currentType}
            onChange={handleTypeChange}
            className="flex h-9 rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm"
          >
            {WATER_TYPE_OPTIONS.map((opt) => (
              <option key={opt.value} value={opt.value}>
                {opt.label}
              </option>
            ))}
          </select>

          <Link href={`/home/${account}/fischerei/waters/new`}>
            <Button size="sm">
              <Plus className="mr-2 h-4 w-4" />
              Neues Gewässer
            </Button>
          </Link>
        </div>
      </div>

      {/* Table */}
      <Card>
        <CardHeader>
          <CardTitle>Gewässer ({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 Gewässer vorhanden</h3>
              <p className="mt-1 max-w-sm text-sm text-muted-foreground">
                Erstellen Sie Ihr erstes Gewässer, um loszulegen.
              </p>
              <Link href={`/home/${account}/fischerei/waters/new`} className="mt-4">
                <Button>Neues Gewässer</Button>
              </Link>
            </div>
          ) : (
            <div className="rounded-md border">
              <table className="w-full text-sm">
                <thead>
                  <tr className="border-b bg-muted/50">
                    <th className="p-3 text-left font-medium">Name</th>
                    <th className="p-3 text-left font-medium">Kurzname</th>
                    <th className="p-3 text-left font-medium">Typ</th>
                    <th className="p-3 text-right font-medium">Fläche (ha)</th>
                    <th className="p-3 text-left font-medium">Ort</th>
                  </tr>
                </thead>
                <tbody>
                  {data.map((water) => (
                    <tr
                      key={String(water.id)}
                      className="cursor-pointer border-b hover:bg-muted/30"
                      onClick={() =>
                        router.push(
                          `/home/${account}/fischerei/waters/${String(water.id)}`,
                        )
                      }
                    >
                      <td className="p-3 font-medium">
                        <Link
                          href={`/home/${account}/fischerei/waters/${String(water.id)}`}
                          className="hover:underline"
                        >
                          {String(water.name)}
                        </Link>
                      </td>
                      <td className="p-3 text-muted-foreground">
                        {String(water.short_name ?? '—')}
                      </td>
                      <td className="p-3">
                        <Badge variant="secondary">
                          {WATER_TYPE_LABELS[String(water.water_type)] ??
                            String(water.water_type)}
                        </Badge>
                      </td>
                      <td className="p-3 text-right">
                        {water.surface_area_ha != null
                          ? `${Number(water.surface_area_ha).toLocaleString('de-DE')} ha`
                          : '—'}
                      </td>
                      <td className="p-3 text-muted-foreground">
                        {String(water.location ?? '—')}
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}

          {/* Pagination */}
          {totalPages > 1 && (
            <div className="mt-4 flex items-center justify-between">
              <p className="text-sm text-muted-foreground">
                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>
  );
}