"use client";

import React, { useState, useCallback, useTransition } from "react";
import { UsersOverview, columns } from "./columns";
import { EntityDetailPanel } from "@/components/dashboard/data-view/EntityDetailSheet";
import { useRouter } from "next/navigation";
import { DashboardPage } from "@/components/dashboard/DashboardPage";
import { EntityOverviewHeader } from "@/components/dashboard/EntityOverviewHeader";
import { MasterDetailLayout } from "@/components/dashboard/data-view/MasterDetailLayout";
import { PaginatedDataTable } from "@/components/dashboard/data-view/PaginatedDataTable";

interface UsersOverviewClientProps {
  initialData: {
    documents: UsersOverview[];
    total: number;
  };
  activePage: number;
  pageSize: number;
}

const UsersOverviewClient = React.memo(({
  initialData,
  activePage,
  pageSize,
}: UsersOverviewClientProps) => {
  const [selectedUser, setSelectedUser] = useState<UsersOverview | null>(null);
  const router = useRouter();
  const [isPending, startTransition] = useTransition();

  const handleRowClick = useCallback((user: UsersOverview) => {
    setSelectedUser(user);
  }, []);

  const handleDataChange = useCallback(() => {
    // In SSR, we use router.refresh() to sync with the server data
    startTransition(() => {
      router.refresh();
    });
  }, [router]);

  const handleCancel = useCallback(() => {
    setSelectedUser(null);
  }, []);

  return (
    <DashboardPage>
      <EntityOverviewHeader
        title="Benutzer"
        addHref="/dashboard/users/create"
        addLabel="Benutzer hinzufügen"
      />

      <MasterDetailLayout>
        <MasterDetailLayout.Master isPending={isPending}>
          <PaginatedDataTable
            columns={columns}
            data={initialData.documents}
            page={activePage}
            pageSize={pageSize}
            totalCount={initialData.total}
            onRowClick={handleRowClick}
          />
        </MasterDetailLayout.Master>

        <MasterDetailLayout.Detail>
          <EntityDetailPanel
            data={selectedUser}
            type="user"
            mode="panel"
            onDataChange={handleDataChange}
            onCancel={handleCancel}
          />
        </MasterDetailLayout.Detail>
      </MasterDetailLayout>
    </DashboardPage>
  );
});

UsersOverviewClient.displayName = "UsersOverviewClient";

export default UsersOverviewClient;