import Link from 'next/link';

import { Plus } from 'lucide-react';

import { createModuleBuilderApi } from '@kit/module-builder/api';
import { getSupabaseServerClient } from '@kit/supabase/server-client';
import { Button } from '@kit/ui/button';

import { decodeFilters } from './_lib/filter-params';
import { ModuleSearchBar } from './module-search-bar';

interface ModuleDetailPageProps {
  params: Promise<{ account: string; moduleId: string }>;
  searchParams: Promise<Record<string, string | string[] | undefined>>;
}

export default async function ModuleDetailPage({
  params,
  searchParams,
}: ModuleDetailPageProps) {
  const { account, moduleId } = await params;
  const search = await searchParams;
  const client = getSupabaseServerClient();
  const api = createModuleBuilderApi(client);

  const moduleWithFields = await api.modules.getModuleWithFields(moduleId);

  if (!moduleWithFields) {
    return <div>Modul nicht gefunden</div>;
  }

  const page = Number(search.page) || 1;
  const pageSize =
    Number(search.pageSize) || moduleWithFields.default_page_size || 25;

  const filters = decodeFilters(search.f as string | undefined);

  const result = await api.query.query({
    moduleId,
    page,
    pageSize,
    sortField:
      (search.sort as string) ??
      moduleWithFields.default_sort_field ??
      undefined,
    sortDirection:
      (search.dir as 'asc' | 'desc') ??
      (moduleWithFields.default_sort_direction as 'asc' | 'desc') ??
      'asc',
    search: (search.q as string) ?? undefined,
    filters,
  });

  const fields = (
    moduleWithFields as unknown as {
      fields: Array<{
        name: string;
        display_name: string;
        show_in_filter: boolean;
        show_in_search: boolean;
      }>;
    }
  ).fields;

  return (
    <div className="flex flex-col gap-4">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold">
            {moduleWithFields.display_name}
          </h1>
          {moduleWithFields.description && (
            <p className="text-muted-foreground">
              {moduleWithFields.description}
            </p>
          )}
        </div>
        <Button asChild>
          <Link href={`/home/${account}/modules/${moduleId}/new`}>
            <Plus className="mr-2 h-4 w-4" />
            Neuer Datensatz
          </Link>
        </Button>
      </div>

      <ModuleSearchBar fields={fields} />

      <div className="text-muted-foreground text-sm">
        {result.pagination.total} Datensätze — Seite {result.pagination.page}{' '}
        von {result.pagination.totalPages}
      </div>

      <div className="rounded-lg border">
        <pre className="max-h-96 overflow-auto p-4 text-xs">
          {JSON.stringify(result.data, null, 2)}
        </pre>
      </div>
    </div>
  );
}