"use client";

import React, {
  useState,
  useCallback,
  memo,
  useTransition,
  useMemo,
} from "react";
import { ShipmentsOverview, columns } from "./columns";
import { EntityDetailPanel } from "@/components/dashboard/data-view/EntityDetailSheet";
import { Button } from "@/components/ui/button";
import { Plus, Package } from "lucide-react";
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";
import { EmptyState } from "@/components/dashboard/shared/EmptyState";
import { useRouter } from "next/navigation";

interface ShipmentsOverviewClientProps {
  initialData: { documents: ShipmentsOverview[]; total: number };
  activePage: number;
  pageSize: number;
}

/**
 * ⚡ Optimization: ShipmentsOverviewClient
 * Wrapped in React.memo to prevent unnecessary re-renders when parent state
 * (like navigation) changes but props remain stable.
 * Uses useCallback for the row click handler to maintain referential stability
 * for the memoized DataTable.
 */
const ShipmentsOverviewClientInner = ({
  initialData,
  activePage,
  pageSize,
}: ShipmentsOverviewClientProps) => {
  const [selectedShipment, setSelectedShipment] =
    useState<ShipmentsOverview | null>(null);
  const router = useRouter();
  const [isPending, startTransition] = useTransition();

  const handleRowClick = useCallback((shipment: ShipmentsOverview) => {
    setSelectedShipment(shipment);
  }, []);

  const handleDataChange = useCallback(() => {
    startTransition(() => {
      router.refresh();
    });
  }, [router]);

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

  const handleAddNew = useCallback(() => {
    setSelectedShipment({} as any);
  }, []);

  const emptyState = useMemo(
    () => (
      <EmptyState
        icon={Package}
        title="Keine Sendungen gefunden"
        description="Es wurden noch keine Sendungen angelegt oder Ihre Suche liefert keine Ergebnisse."
      />
    ),
    [],
  );

  return (
    <DashboardPage>
      <EntityOverviewHeader
        title="Sendungen"
        onAddClick={handleAddNew}
        addLabel="Neue Sendung"
      />

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

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

export const ShipmentsOverviewClient = memo(ShipmentsOverviewClientInner);