import { createGridNexa, type Column } from "@gridnexa/javascript";

interface Employee {
  id: number;
  name: string;
  department: string;
  city: string;
  score: number;
  adjustedScore: string;
}

const columns: Column<Employee>[] = [
  { id: "name", field: "name", headerName: "Name", sortable: true, filter: "text", editable: true },
  { id: "department", field: "department", headerName: "Department", filter: "set" },
  { id: "score", field: "score", headerName: "Score", filter: "number", editable: true },
  { id: "adjustedScore", field: "adjustedScore", headerName: "Adjusted" },
];

const rows: Employee[] = [
  { id: 1, name: "John Carter", department: "Operations", city: "London", score: 92, adjustedScore: "=score * 1.05" },
  { id: 2, name: "Alice Moreau", department: "Product", city: "Paris", score: 87, adjustedScore: "=score * 1.05" },
];

const grid = createGridNexa<Employee>(document.getElementById("grid")!, {
  columns,
  rows,
  rowNumbers: true,
  checkboxSelection: true,
  enableFillHandle: true,
  enableUndoRedo: true,
  pageSize: 20,
  theme: "light",
  density: "standard",
  getRowId: (row) => row.id,
});

grid.update({ quickFilterText: "finance" });

createGridNexa(document.getElementById("grid")!, {
  columns,
  rows,
  ai: {
    enabled: true,
    endpoint: "/api/gridnexa-ai",
    placeholder: "Ask AI to filter, sort, group, pivot, pin, hide, or export",
  },
});