"use client";

import React, { useState, useCallback, useTransition, memo, useMemo } from "react";
import { useRouter } from "next/navigation";
import { EntityDetailPanel } from "@/components/dashboard/data-view/EntityDetailSheet";
import { MasterDetailLayout } from "@/components/dashboard/data-view/MasterDetailLayout";
import { ColumnDef } from "@tanstack/react-table";
import { TaxClassesOverview, getColumns } from "./columns";
import { EntityOverviewHeader } from "@/components/dashboard/EntityOverviewHeader";

import { PaginatedDataTable } from "@/components/dashboard/data-view/PaginatedDataTable";

interface TaxClassesOverviewClientProps {
  initialData: { documents: TaxClassesOverview[]; total: number };
  page: number;
  pageSize: number;
}

/**
 * ⚡ Optimization: TaxClassesOverviewClient
 */
const TaxClassesOverviewClient = memo(({
  initialData,
  page,
  pageSize,
}: TaxClassesOverviewClientProps) => {
  const router = useRouter();
  const [isPending, startTransition] = useTransition();
  const [selectedTaxClass, setSelectedTaxClass] = useState<TaxClassesOverview | null>(null);

  const handleRowClick = useCallback((taxClass: TaxClassesOverview) => {
    setSelectedTaxClass(taxClass);
  }, []);

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

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

  const handleAddNew = useCallback(() => {
    setSelectedTaxClass({} as TaxClassesOverview);
  }, []);

  const columns = useMemo<ColumnDef<TaxClassesOverview>[]>(() => 
    getColumns(handleRowClick, router),
  [handleRowClick, router]);

  return (
    <>
      <EntityOverviewHeader
        title="Steuerklassen"
        description="Verwalten Sie Ihre Steuerklassen."
        onAddClick={handleAddNew}
        addLabel="Steuerklasse hinzufügen"
      />
      <MasterDetailLayout>
        <MasterDetailLayout.Master isPending={isPending}>
          <PaginatedDataTable
            columns={columns}
            data={initialData.documents}
            page={page}
            pageSize={pageSize}
            totalCount={initialData.total}
            onRowClick={handleRowClick}
          />
        </MasterDetailLayout.Master>

        <MasterDetailLayout.Detail>
          <EntityDetailPanel
            data={selectedTaxClass}
            type="tax-class"
            mode="panel"
            onDataChange={handleDataChange}
            onCancel={handleCancel}
          />
        </MasterDetailLayout.Detail>
      </MasterDetailLayout>
    </>
  );
});

TaxClassesOverviewClient.displayName = "TaxClassesOverviewClient";

export default TaxClassesOverviewClient;