import React from "react";
import { NcTable, type Column, type TableAction } from "nc-table-react";
import i18n from "i18next";
import { I18nextProvider, initReactI18next } from "react-i18next";

// Minimal i18n setup
if (!i18n.isInitialized) {
  i18n
    .use(initReactI18next)
    .init({ lng: "en", resources: { en: { translation: {} } } });
}

type User = {
  id: number;
  name: string;
  email: string;
  status: "active" | "inactive";
};

const data: User[] = [
  { id: 1, name: "Ada Lovelace", email: "ada@example.com", status: "active" },
  { id: 2, name: "Alan Turing", email: "alan@example.com", status: "inactive" },
];

const columns: Column<User>[] = [
  { key: "name", header: "Name" },
  { key: "email", header: "Email" },
  { key: "status", header: "Status" },
];

const actions: TableAction<User>[] = [
  {
    label: "View",
    onClick: (u) => alert(`Viewing ${u.name}`),
    show: true, // Always show
  },
  {
    label: "Activate",
    onClick: (u) => alert(`Activating ${u.name}`),
    show: (u) => u.status === "inactive", // Only show for inactive users
  },
];

export default function App() {
  return (
    <I18nextProvider i18n={i18n}>
      <NcTable<User>
        id="my-table"
        data={data}
        columns={columns}
        actions={actions}
        idField="id"
        showSerialNumber={true}
      />
    </I18nextProvider>
  );
}

<NcTable
  data={data}
  columns={columns}
  showSerialNumber={true} // Default: true
  idField="id"
/>

<NcTable
  data={data}
  columns={columns}
  showSerialNumber={false} // Hide serial number column
  idField="id"
/>

<NcTable
  id="users-table" // Unique ID for this table instance
  data={data}
  columns={columns}
  idField="id"
/>

const actions: TableAction<User>[] = [
  {
    label: "Edit",
    icon: "Edit",
    onClick: (user) => console.log("Edit", user),
    show: true, // Always show
  },
  {
    label: "Archive",
    icon: "Archive",
    onClick: (user) => console.log("Archive", user),
    show: false, // Never show
  },
];

const actions: TableAction<User>[] = [
  {
    label: "Activate",
    icon: "User",
    onClick: (user) => console.log("Activate", user),
    show: (user) => user.status === "inactive", // Only show for inactive users
  },
  {
    label: "Deactivate",
    icon: "User",
    onClick: (user) => console.log("Deactivate", user),
    show: (user) => user.status === "active", // Only show for active users
  },
  {
    label: "Delete",
    icon: "Trash",
    onClick: (user) => console.log("Delete", user),
    variant: "destructive",
    show: (user) => user.role !== "Admin", // Hide delete for admins
  },
  {
    label: "Admin Actions",
    icon: "Settings",
    onClick: (user) => console.log("Admin Actions", user),
    show: (user) => user.role === "Admin", // Only show for admins
  },
];

<NcTable
  data={users} // ✅ Static array provided
  columns={columns}
  actions={actions}
  idField="id"
  // No handler needed
/>

<NcTable
  columns={columns}
  handler={fetchTableData} // ✅ Async function provided
  actions={actions}
  idField="id"
  // No data prop needed
/>

import type { NcTableProps } from "nc-table-react";

type Item = { id: number; name: string };

const handler: NcTableProps<Item>["handler"] = async (params) => {
  // params: { PageNumber, PageSize, Filter?, Order? }
  console.log("Received params:", params);

  // Example server request
  const response = await fetch("/api/items", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(params),
  });

  return response.json(); // Returns IApiResponse<Item[]>
};

// Usage
<NcTable<Item> columns={[{ key: "name", header: "Name" }]} handler={handler} />;

{
  key: "name",
  header: "Name",
  searchable: true,
  // No searchOverride needed - text is default
}

{
  key: "startDate",
  header: "Start Date",
  searchable: true,
  searchOverride: {
    dataType: "date"
  },
  render: (item) => new Date(item.startDate).toLocaleDateString(),
}

{
  key: "department",
  header: "Department",
  searchable: true,
  searchOverride: {
    dataType: "select",
    selectOptions: [
      { text: "Engineering", value: "Engineering" },
      { text: "Marketing", value: "Marketing" },
      { text: "Sales", value: "Sales" },
    ]
  }
}

{
  key: "isActive",
  header: "Is Active",
  searchable: true,
  searchOverride: {
    dataType: "boolean"
  },
  render: (item) => item.isActive ? "Yes" : "No",
}

{
  key: "hasAccess",
  header: "Has Access",
  searchable: true,
  searchOverride: {
    dataType: "YesOrNo"
  },
  render: (item) => item.hasAccess === 1 ? "Yes" : "No",
}

const columns: Column<Employee>[] = [
  {
    key: "statusDescription", // Display field: "Active Employee"
    header: "Status Description",
    searchable: true,
    searchOverride: {
      key: "Status", // 🎯 Backend field: sends "Status==1;"
      dataType: "select",
      selectOptions: [
        { text: "Active Employee", value: "1" },
        { text: "Inactive Employee", value: "0" },
        { text: "Pending Approval", value: "2" },
      ],
    },
  },
  {
    key: "departmentName", // Display field: "Engineering Dept"
    header: "Department Name",
    searchable: true,
    searchOverride: {
      key: "DeptId", // 🎯 Backend field: sends "DeptId==ENG;"
      dataType: "select",
      selectOptions: [
        { text: "Engineering Dept", value: "ENG" },
        { text: "Marketing Dept", value: "MKT" },
      ],
    },
  },
  {
    key: "name", // Same for display and backend
    header: "Name",
    searchable: true,
    // No key override - uses "name" for both display and backend
  },
];

import React, { useState } from "react";
import { NcTable, type Column, type TableAction } from "nc-table-react";

type Employee = {
  id: number;
  name: string;
  email: string;
  department: string;
  startDate: string;
  isActive: boolean;
  hasAccess: number;
  salary: number;
  status: "active" | "inactive" | "pending";
};

const columns: Column<Employee>[] = [
  {
    key: "name",
    header: "Name",
    searchable: true,
  },
  {
    key: "department",
    header: "Department",
    searchable: true,
    searchOverride: {
      dataType: "select",
      selectOptions: [
        { text: "Engineering", value: "Engineering" },
        { text: "Marketing", value: "Marketing" },
        { text: "Sales", value: "Sales" },
      ],
    },
  },
  {
    key: "startDate",
    header: "Start Date",
    searchable: true,
    searchOverride: { dataType: "date" },
    render: (emp) => new Date(emp.startDate).toLocaleDateString(),
  },
  {
    key: "isActive",
    header: "Is Active",
    searchable: true,
    searchOverride: { dataType: "boolean" },
    render: (emp) => (emp.isActive ? "Active" : "Inactive"),
  },
  {
    key: "salary",
    header: "Salary",
    searchable: true,
    render: (emp) => `$${emp.salary.toLocaleString()}`,
  },
];

const actions: TableAction<Employee>[] = [
  {
    label: "Edit",
    onClick: (emp) => console.log("Edit", emp),
    icon: "edit",
    show: true, // Always show
  },
  {
    label: "Activate",
    onClick: (emp) => console.log("Activate", emp),
    icon: "user",
    show: (emp) => emp.status === "inactive", // Only show for inactive employees
  },
  {
    label: "Deactivate",
    onClick: (emp) => console.log("Deactivate", emp),
    icon: "user",
    show: (emp) => emp.status === "active", // Only show for active employees
  },
  {
    label: "Delete",
    onClick: (emp) => console.log("Delete", emp),
    variant: "destructive",
    icon: "trash",
    show: (emp) => emp.role !== "Admin", // Hide delete for admins
  },
];

export default function AdvancedExample() {
  const [employees, setEmployees] = useState<Employee[]>([
    // ... your data
  ]);

  const handleAdvancedSearch = (filters) => {
    console.log("Search filters:", filters);
    // Handle filtering logic
  };

  const handleBulkAction = (
    action: string,
    selectedIds: (string | number)[]
  ) => {
    console.log(`Bulk ${action} on:`, selectedIds);
  };

  const handleExport = (format: string, selectedIds?: (string | number)[]) => {
    console.log(`Export as ${format}:`, selectedIds || "all");
  };

  const handleDelete = async (ids: (string | number)[]) => {
    // Delete implementation
    console.log("Deleting:", ids);
    return { Succeeded: true, Message: "Deleted successfully" };
  };

  return (
    <NcTable<Employee>
      // Data
      data={employees}
      columns={columns}
      actions={actions}
      idField="id"
      // Serial Numbers
      showSerialNumber={true}
      // Search & Filtering
      showAdvancedSearch={true}
      onAdvancedSearch={handleAdvancedSearch}
      enableInternalSearch={true}
      // Selection & Bulk Actions
      selectable={true}
      bulkActions={[
        { value: "export", label: "Export Selected" },
        { value: "archive", label: "Archive Selected" },
        { value: "delete", label: "Delete Selected", variant: "destructive" },
      ]}
      onBulkAction={handleBulkAction}
      // Export
      exportOptions={[
        { format: "csv", label: "Export as CSV" },
        { format: "excel", label: "Export as Excel" },
        { format: "pdf", label: "Export as PDF" },
      ]}
      onExport={handleExport}
      // CRUD Operations
      canDelete={true}
      removeItemHandler={handleDelete}
      // Pagination
      enableInternalPagination={true}
      pageSize={10}
      paginationProps={{
        showFirstLast: true,
        showEllipsis: true,
        maxVisiblePages: 5,
      }}
      // Settings
      enableInternalSettings={true}
      defaultSettings={{
        pageSize: 10,
        sortBy: "name",
        sortDirection: "Asc",
      }}
      // Customization
      searchPlaceholder="Search employees..."
      emptyStateMessage="No employees found"
      className="my-custom-table"
    />
  );
}

<NcTable
  className="my-custom-table"
  // ... other props
/>

// Add translations to your i18n resources
const resources = {
  en: {
    translation: {
      "Search...": "Search...",
      "No items found": "No items found",
      // ... other translations
    },
  },
};