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

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 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: [],
  });

  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>
      </div>

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

      {/* Phase 3 will replace this with module-table component */}
      <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>
  );
}