import { ref, computed, watch } from "vue";

export function useDataTableGrid(
  data,
  isMobile,
  isTablet,
  customColumns = null
) {
  let gridApi = ref(null);
  const rowData = ref([]);

  const statusCellRenderer = (params) => {
    const s = params.value;
    let label = "Applied";
    let colorClass = "info";

    if (s === 1) {
      label = "Current";
      colorClass = "primary";
    }
    if (s === 2) {
      label = "Professional";
      colorClass = "success";
    }
    if (s === 3) {
      label = "Rejected";
      colorClass = "error";
    }
    if (s === 4) {
      label = "Resigned";
      colorClass = "warning";
    }

    const chipSize = isMobile.value ? "x-small" : "small";
    const fontSize = isMobile.value ? "10px" : "12px";

    return `<div class="v-chip v-chip--size-${chipSize} v-chip--variant-flat bg-${colorClass}" 
      style="
        height:${isMobile.value ? "20px" : "24px"};
        padding:0 ${isMobile.value ? "6px" : "8px"};
        display:inline-flex;
        align-items:center;
        border-radius:12px;
        font-size:${fontSize};
        font-weight:500;
        color:white;
        border: inherit;
      ">${label}</div>`;
  };

  const statusCellEditor = () => {
    const statusOptions = [
      { value: 0, label: "Applied" },
      { value: 1, label: "Current" },
      { value: 2, label: "Professional" },
      { value: 3, label: "Rejected" },
      { value: 4, label: "Resigned" },
    ];
    let currentValue = 0;
    let selectElement = null;

    const editorObject = {
      init: (params) => {
        currentValue = params.value || 0;
        selectElement = document.createElement("select");
        selectElement.style.cssText =
          "width: 100%; height: 100%; border: none; outline: none; font-size: 12px; background: white; color: black; padding: 4px;";

        statusOptions.forEach((option) => {
          const optionElement = document.createElement("option");
          optionElement.value = option.value;
          optionElement.text = option.label;
          if (option.value == currentValue) {
            optionElement.selected = true;
          }
          selectElement.appendChild(optionElement);
        });

        selectElement.addEventListener("change", (e) => {
          currentValue = parseInt(e.target.value);
        });

        selectElement.addEventListener("keydown", (e) => {
          if (e.key === "Enter" || e.key === "Tab") {
            e.preventDefault();
            currentValue = parseInt(selectElement.value);
            params.stopEditing();
          }
          if (e.key === "Escape") {
            params.stopEditing(true);
          }
        });
      },

      getGui: () => selectElement,

      getValue: () => parseInt(currentValue),

      afterGuiAttached: () => {
        selectElement.focus();
        selectElement.click();
      },

      isPopup: () => false,
    };
    return editorObject;
  };

  const actionButtonsRenderer = (params) => {
    const iconSize = isMobile.value ? "14px" : "16px";
    const buttonSize = isMobile.value ? "24px" : "28px";
    const gap = isMobile.value ? "3px" : "4px";

    const rowIndex = params.node.rowIndex;
    const nodeId = params.node.id;

    return `
    <div style="display: flex; gap: ${gap}; align-items: center; justify-content: center; padding: 2px 0;">
      <button 
        class="action-btn details-btn" 
        style="
          background: rgba(var(--v-theme-primary), 0.15);
          backdrop-filter: blur(20px);
          -webkit-backdrop-filter: blur(20px);
          border: 1px solid rgba(var(--v-theme-primary), 0.3);
          color: rgb(var(--v-theme-primary));
          border-radius: 12px;
          width: ${buttonSize};
          height: ${buttonSize};
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
          box-shadow: 0 8px 32px rgba(var(--v-theme-primary), 0.12);
          position: relative;
          overflow: hidden;
        "
        onmouseover="
          this.style.transform='translateY(-2px) scale(1.05)';
          this.style.background='rgba(var(--v-theme-primary), 0.25)';
          this.style.borderColor='rgba(var(--v-theme-primary), 0.5)';
          this.style.boxShadow='0 12px 40px rgba(var(--v-theme-primary), 0.2)';
        "
        onmouseout="
          this.style.transform='translateY(0) scale(1)';
          this.style.background='rgba(var(--v-theme-primary), 0.15)';
          this.style.borderColor='rgba(var(--v-theme-primary), 0.3)';
          this.style.boxShadow='0 8px 32px rgba(var(--v-theme-primary), 0.12)';
        "
        onclick="handleShowDetails(${rowIndex}, '${nodeId}')"
        title="View Details"
      >
        <svg width="${iconSize}" height="${iconSize}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2">
          <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
          <circle cx="12" cy="12" r="3"></circle>
        </svg>
      </button>
      
      <button 
        class="action-btn edit-btn" 
        style="
          background: rgba(var(--v-theme-warning), 0.15);
          backdrop-filter: blur(20px);
          -webkit-backdrop-filter: blur(20px);
          border: 1px solid rgba(var(--v-theme-warning), 0.3);
          color: rgb(var(--v-theme-warning));
          border-radius: 12px;
          width: ${buttonSize};
          height: ${buttonSize};
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
          box-shadow: 0 8px 32px rgba(var(--v-theme-warning), 0.12);
          position: relative;
          overflow: hidden;
        "
        onmouseover="
          this.style.transform='translateY(-2px) scale(1.05)';
          this.style.background='rgba(var(--v-theme-warning), 0.25)';
          this.style.borderColor='rgba(var(--v-theme-warning), 0.5)';
          this.style.boxShadow='0 12px 40px rgba(var(--v-theme-warning), 0.2)';
        "
        onmouseout="
          this.style.transform='translateY(0) scale(1)';
          this.style.background='rgba(var(--v-theme-warning), 0.15)';
          this.style.borderColor='rgba(var(--v-theme-warning), 0.3)';
          this.style.boxShadow='0 8px 32px rgba(var(--v-theme-warning), 0.12)';
        "
        onclick="handleEditRow(${rowIndex}, '${nodeId}')"
        title="Edit Row"
      >
        <svg width="${iconSize}" height="${iconSize}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2">
          <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
          <path d="m18.5 2.5 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
        </svg>
      </button>
      
      <button 
        class="action-btn delete-btn" 
        style="
          background: rgba(var(--v-theme-error), 0.15);
          backdrop-filter: blur(20px);
          -webkit-backdrop-filter: blur(20px);
          border: 1px solid rgba(var(--v-theme-error), 0.3);
          color: rgb(var(--v-theme-error));
          border-radius: 12px;
          width: ${buttonSize};
          height: ${buttonSize};
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
          box-shadow: 0 8px 32px rgba(var(--v-theme-error), 0.12);
          position: relative;
          overflow: hidden;
        "
        onmouseover="
          this.style.transform='translateY(-2px) scale(1.05)';
          this.style.background='rgba(var(--v-theme-error), 0.25)';
          this.style.borderColor='rgba(var(--v-theme-error), 0.5)';
          this.style.boxShadow='0 12px 40px rgba(var(--v-theme-error), 0.2)';
        "
        onmouseout="
          this.style.transform='translateY(0) scale(1)';
          this.style.background='rgba(var(--v-theme-error), 0.15)';
          this.style.borderColor='rgba(var(--v-theme-error), 0.3)';
          this.style.boxShadow='0 8px 32px rgba(var(--v-theme-error), 0.12)';
        "
        onclick="handleDeleteRow(${rowIndex}, '${nodeId}')"
        title="Delete Row"
      >
        <svg width="${iconSize}" height="${iconSize}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2">
          <path d="M3 6h18"></path>
          <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6m3 0V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"></path>
          <line x1="10" y1="11" x2="10" y2="17"></line>
          <line x1="14" y1="11" x2="14" y2="17"></line>
        </svg>
      </button>
    </div>
  `;
  };

  const createDefaultColumns = () => [
    {
      headerName: "NAME",
      field: "fullName",
      sortable: true,
      filter: true,
      flex: 1,
      minWidth: 150,
      hide: false,
      editable: true,
      cellEditor: "agTextCellEditor",
      cellEditorParams: {
        maxLength: 50,
      },
    },
    {
      headerName: "EMAIL",
      field: "email",
      sortable: true,
      filter: true,
      flex: 1.5,
      minWidth: 200,
      hide: false,
      editable: true,
      cellEditor: "agTextCellEditor",
      cellEditorParams: {
        maxLength: 100,
      },
    },
    {
      headerName: "DATE",
      field: "startDate",
      sortable: true,
      filter: true,
      flex: 1,
      minWidth: 120,
      hide: false,
      editable: true,
      cellEditor: "agDateCellEditor",
      valueFormatter: (params) => {
        if (!params.value) return "";
        const date = new Date(params.value);
        if (isNaN(date.getTime())) return "";
        const day = date.getDate().toString().padStart(2, "0");
        const month = (date.getMonth() + 1).toString().padStart(2, "0");
        const year = date.getFullYear();
        return `${day}/${month}/${year}`;
      },
      valueParser: (params) => {
        if (!params.newValue) return null;
        const dateStr = params.newValue;
        if (typeof dateStr === "string" && dateStr.includes("/")) {
          const parts = dateStr.split("/");
          if (parts.length === 3) {
            const day = parseInt(parts[0]);
            const month = parseInt(parts[1]) - 1;
            const year = parseInt(parts[2]);
            const date = new Date(year, month, day);
            if (!isNaN(date.getTime())) {
              return date;
            }
          }
        }
        return new Date(dateStr);
      },
      filterParams: {
        buttons: ["reset"],
        closeOnApply: false,
        suppressAndOrCondition: true,
        comparator: (filterLocalDateAtMidnight, cellValue) => {
          if (!cellValue) return -1;
          const cellDate = new Date(cellValue);
          cellDate.setHours(0, 0, 0, 0);
          if (filterLocalDateAtMidnight.getTime() === cellDate.getTime()) {
            return 0;
          }
          return filterLocalDateAtMidnight < cellDate ? -1 : 1;
        },
      },
      onCellValueChanged: (params) => {
        if (
          params.newValue === "" ||
          params.newValue === null ||
          params.newValue === undefined
        ) {
          params.node.setDataValue(params.colDef.field, params.oldValue);
        }
        console.log("Date changed:", params.newValue);
      },
    },
    {
      headerName: "SALARY",
      field: "salary",
      sortable: true,
      filter: true,
      flex: 1,
      minWidth: 120,
      hide: false,
      editable: true,
      cellEditor: "agNumberCellEditor",
      cellEditorParams: {
        precision: 0,
      },
      filterParams: {
        buttons: ["reset"],
        closeOnApply: false,
        suppressAndOrCondition: true,
        inRangeInclusive: true,
        debounceMs: 200,
      },
      valueFormatter: (params) => {
        if (params.value) {
          const intValue = Math.floor(Number(params.value));
          return `$${intValue.toLocaleString()}`;
        }
        return "";
      },
      onCellValueChanged: (params) => {
        if (
          params.newValue !== null &&
          params.newValue !== undefined &&
          params.newValue !== ""
        ) {
          const numValue = parseInt(params.newValue);
          if (!isNaN(numValue)) {
            params.node.setDataValue(params.colDef.field, numValue);
          } else {
            params.node.setDataValue(params.colDef.field, params.oldValue);
          }
        } else {
          params.node.setDataValue(params.colDef.field, params.oldValue);
        }
        console.log("Salary changed:", params.newValue);
      },
    },
    {
      headerName: "AGE",
      field: "age",
      sortable: true,
      filter: true,
      flex: 0.7,
      minWidth: 80,
      hide: false,
      editable: true,
      cellEditor: "agNumberCellEditor",
      cellEditorParams: {
        precision: 0,
        showStepperButtons: false,
      },
      valueFormatter: (params) => {
        if (
          params.value === null ||
          params.value === undefined ||
          params.value === ""
        ) {
          return "";
        }
        const numValue = Number(params.value);
        return isNaN(numValue) ? "" : Math.floor(numValue).toString();
      },
      onCellValueChanged: (params) => {
        const newValue = params.newValue;

        if (newValue === null || newValue === undefined || newValue === "") {
          params.node.setDataValue(params.colDef.field, params.oldValue);
          return;
        }

        const cleanValue = String(newValue).trim();
        if (cleanValue === "") {
          params.node.setDataValue(params.colDef.field, params.oldValue);
          return;
        }

        const parsed = parseInt(cleanValue, 10);
        if (isNaN(parsed)) {
          console.warn("Age: Invalid number format:", cleanValue);
          params.node.setDataValue(params.colDef.field, params.oldValue);
          return;
        }

        if (parsed < 1 || parsed > 120) {
          console.warn("Age: Out of range (1-120):", parsed);
          params.node.setDataValue(params.colDef.field, params.oldValue);
          return;
        }

        params.node.setDataValue(params.colDef.field, parsed);
        console.log("Age changed from", params.oldValue, "to", parsed);
      },
    },
    {
      headerName: "STATUS",
      field: "status",
      sortable: true,
      filter: true,
      flex: 1,
      minWidth: 100,
      hide: false,
      editable: true,
      cellRenderer: statusCellRenderer,
      cellEditor: statusCellEditor,
      onCellValueChanged: (params) => {
        console.log("Status changed:", params.newValue);
      },
    },
    {
      headerName: "ACTION",
      field: "action",
      sortable: false,
      filter: false,
      flex: 1,
      minWidth: 100,
      hide: false,
      editable: false,
      cellRenderer: actionButtonsRenderer,
      suppressHeaderMenuButton: true,
    },
  ];

  const resolveColumns = () => {
    if (Array.isArray(customColumns)) return customColumns
    if (customColumns && Array.isArray(customColumns.value)) return customColumns.value
    return []
  }

 const processCustomColumns = (columns) => {
 if (!Array.isArray(columns) || columns.length === 0) {
   const base = createDefaultColumns();
   return ensureSingleSelectionColumn(base);
 }

 const processedColumns = columns.map(col => ({
   ...col,
   editable: col.field === 'action' ? false : (col.editable !== undefined ? col.editable : true),
   suppressHeaderMenuButton: col.suppressHeaderMenuButton !== undefined ? col.suppressHeaderMenuButton : false,
 }));

 const withSelection = ensureSingleSelectionColumn(processedColumns);
 
 const actionIndex = withSelection.findIndex(col => col.field === 'action');
 
 if (actionIndex !== -1) {
   const actionColumn = withSelection.splice(actionIndex, 1)[0];
   withSelection.push(actionColumn);
 } else {
   withSelection.push({
     headerName: "ACTION",
     field: "action",
     sortable: false,
     filter: false,
     flex: 1,
     minWidth: 100,
     hide: false,
     editable: false,
     cellRenderer: actionButtonsRenderer,
     suppressHeaderMenuButton: true,
   });
 }

 return withSelection;
};

  const columnDefs = computed(() => {
    const cols = resolveColumns()
    if (cols && Array.isArray(cols) && cols.length > 0) {
      const processed = processCustomColumns(cols);
      return processed;
    }
    const defaultCols = createDefaultColumns();
    return ensureSingleSelectionColumn(defaultCols);
  });

  const defaultColDef = computed(() => ({
    resizable: true,
    sortable: true,
    filter: true,
    floatingFilter: false,
    cellStyle: { display: "flex", alignItems: "center" },
    flex: 1,
    minWidth: isMobile.value ? 80 : 100,
    maxWidth: 400,
    wrapText: false,
    autoHeight: false,
    suppressHeaderMenuButton: false,
  }));

  // 🔥 FIX: Improved gridOptions with better pagination settings
  const gridOptions = computed(() => ({
    theme: "legacy",
    headerHeight: isMobile.value ? 48 : 56,
    rowHeight: isMobile.value ? 44 : 52,
    animateRows: true,
    getRowId: params => {
      const value = params.data && (params.data.id ?? params.data.ID ?? params.data._id)
      return value != null ? String(value) : String(params.rowIndex)
    },
    rowSelection: 'multiple',
    rowMultiSelectWithClick: true,
    suppressRowClickSelection: false,
    
    // 🔥 FIXED PAGINATION SETTINGS
    pagination: true,
    paginationPageSize: isMobile.value ? 10 : 20,
    paginationPageSizeSelector: [5, 10, 20, 50, 100],
    paginationAutoPageSize: false, // 🔥 KEY: Disable auto page sizing
    suppressPaginationPanel: false, // 🔥 KEY: Show pagination controls
    
    enableCellTextSelection: true,
    suppressHorizontalScroll: false,
    alwaysShowHorizontalScroll: false,
    suppressColumnVirtualisation: false,
    autoGroupColumnDef: {
      minWidth: 200,
      maxWidth: 400,
      flex: 1,
    },
    editType: "fullRow",
    stopEditingWhenCellsLoseFocus: true,
    enterNavigatesVertically: true,
    enterNavigatesVerticallyAfterEdit: true,
    singleClickEdit: false,
    suppressClickEdit: false,
    includeHiddenColumnsInQuickFilter: false,
    cacheQuickFilter: true,
    enableAdvancedFilter: false,
    includeHiddenColumnsInAdvancedFilter: false,
    maintainColumnOrder: true,
    suppressMenuHide: true,
    loading: false,
    suppressNoRowsOverlay: false,
  }));

  const updateColumnVisibility = () => {
    if (!gridApi.value) return;

    const columns = ['email', 'startDate', 'age'];
    
    try {
      columns.forEach(colId => {
        const column = gridApi.value.getColumn ? gridApi.value.getColumn(colId) : null;
        if (!column) return;

        let visible = true;
        if (isMobile.value) {
          visible = false;
        } else if (isTablet.value) {
          visible = colId !== 'startDate';
        }

        if (gridApi.value.setColumnVisible) {
          gridApi.value.setColumnVisible(colId, visible);
        } else if (gridApi.value.columnApi && gridApi.value.columnApi.setColumnVisible) {
          gridApi.value.columnApi.setColumnVisible(colId, visible);
        }
      });
    } catch (error) {
      console.warn('Column visibility update not supported in this AG Grid version');
    }
  };

  // 🔥 SIMPLIFIED UPDATE PAGINATION - Only for responsive page sizes
  const updatePagination = () => {
    if (!gridApi.value) return;

    try {
      // Simple responsive pagination size adjustment
      const newPageSize = isMobile.value ? 10 : 20;
      
      if (typeof gridApi.value.paginationSetPageSize === 'function') {
        gridApi.value.paginationSetPageSize(newPageSize);
      } else if (typeof gridApi.value.setGridOption === 'function') {
        gridApi.value.setGridOption('paginationPageSize', newPageSize);
      }
    } catch (error) {
      console.warn('Error updating pagination:', error);
    }
  };

  function onGridReady(params) {
    console.log('Grid ready called with params:', params)
    gridApi.value = params.api;
    console.log('Grid API set:', gridApi.value)

    updateColumnVisibility();
    // 🔥 FIX: Don't call updatePagination immediately - let AG Grid handle it
    
    setTimeout(() => {
      if (gridApi.value && gridApi.value.sizeColumnsToFit) {
        gridApi.value.sizeColumnsToFit();
      }
    }, 100);
  }

  function onCellValueChanged(params) {
    console.log("Cell value changed:", {
      field: params.colDef.field,
      oldValue: params.oldValue,
      newValue: params.newValue,
      data: params.data,
    });

    const dataIndex = rowData.value.findIndex((item) => {
      return (
        (item.id && item.id === params.data.id) ||
        (item.email && item.email === params.data.email) ||
        item.fullName === params.data.fullName
      );
    });

    if (dataIndex !== -1) {
      rowData.value[dataIndex] = { ...params.data };
    }
  }

  watch([isMobile, isTablet], () => {
    updateColumnVisibility();
    updatePagination(); // Only for responsive size changes
  });

  watch(data, (newData) => {
    console.log('Data watch triggered with:', newData)
    rowData.value = newData || [];
    console.log('rowData updated to:', rowData.value)
  }, { immediate: true, deep: true });

  return {
    gridApi,
    columnDefs,
    rowData,
    defaultColDef,
    gridOptions,
    onGridReady,
    onCellValueChanged,
    updateColumnVisibility,
    updatePagination,
  };
}

// Helpers
function ensureSingleSelectionColumn(columns) {
  if (!Array.isArray(columns)) return columns;

  const isSelectionCol = (c) => !!(c && (c.checkboxSelection || c.headerCheckboxSelection || c.field === '__selection__' || c.field === 'selection'));

  const firstIndex = columns.findIndex(isSelectionCol);
  if (firstIndex === -1) return columns;

  const unique = [];
  columns.forEach((c, idx) => {
    if (isSelectionCol(c)) {
      if (unique.some(isSelectionCol)) return; // skip duplicates
      unique.push({ ...c, pinned: 'left' });
    } else {
      unique.push(c);
    }
  });

  // Move the selection column to the first position
  const selIdx = unique.findIndex(isSelectionCol);
  if (selIdx > 0) {
    const [sel] = unique.splice(selIdx, 1);
    unique.unshift(sel);
  }

  return unique;
}