import { useState } from 'react';
import { saveAs } from 'file-saver';
import React from 'react';
const ColumnBuilder = () => {
  const [columns, setColumns] = useState(['Column 1']);
  const [rows, setRows] = useState(['Row 1']);
  const [grid, setGrid] = useState([[false]]);
  const [showJsonModal, setShowJsonModal] = useState(false);

  const handleCheckboxChange = (rowIdx, colIdx) => {
    const newGrid = [...grid];
    newGrid[rowIdx][colIdx] = !newGrid[rowIdx][colIdx];
    setGrid(newGrid);
  };

  const addColumn = () => {
    setColumns([...columns, `Column ${columns.length + 1}`]);
    setGrid(grid.map(row => [...row, false]));
  };

  const addRow = () => {
    setRows([...rows, `Row ${rows.length + 1}`]);
    setGrid([...grid, Array(columns.length).fill(false)]);
  };

  const handleColumnTitleChange = (index, newTitle) => {
    const newColumns = [...columns];
    newColumns[index] = newTitle;
    setColumns(newColumns);
  };

  const handleRowTitleChange = (index, newTitle) => {
    const newRows = [...rows];
    newRows[index] = newTitle;
    setRows(newRows);
  };

  const exportJson = () => {
    const data = {
      columns,
      rows,
      grid,
    };
    const jsonString = JSON.stringify(data, null, 2);
    const blob = new Blob([jsonString], { type: 'application/json' });
    saveAs(blob, 'grid-data.json');
  };

  return (
    <div className="p-4">
      <h1 className="text-2xl mb-4">Column Builder</h1>
      <div className="flex justify-between mb-4">
        <button onClick={addColumn} className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">
          Add Column
        </button>
        <button onClick={addRow} className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">
          Add Row
        </button>
        <button onClick={() => setShowJsonModal(true)} className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">
          Show JSON
        </button>
        <button onClick={exportJson} className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">
          Export JSON
        </button>
      </div>
      <div className="overflow-auto max-w-full">
        <div className="inline-block min-w-full align-middle">
          <div className="shadow overflow-auto border-b border-gray-200 sm:rounded-lg">
            <table className="min-w-full divide-y divide-gray-200">
              <thead>
                <tr>
                  <th className="bg-gray-50 min-w-[100px]"></th>
                  {columns.map((col, colIdx) => (
                    <th key={colIdx} className="px-6 py-3 text-center bg-gray-50 text-xs font-medium text-gray-500 uppercase tracking-wider min-w-[100px]">
                      <input
                        type="text"
                        value={col}
                        onChange={(e) => handleColumnTitleChange(colIdx, e.target.value)}
                        className="w-full border p-1 text-center"
                      />
                    </th>
                  ))}
                </tr>
              </thead>
              <tbody className="bg-white divide-y divide-gray-200">
                {rows.map((row, rowIdx) => (
                  <tr key={rowIdx}>
                    <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 min-w-[100px]">
                      <input
                        type="text"
                        value={row}
                        onChange={(e) => handleRowTitleChange(rowIdx, e.target.value)}
                        className="w-full border p-1 text-center"
                      />
                    </td>
                    {columns.map((col, colIdx) => (
                      <td key={colIdx} className="px-6 py-4 whitespace-nowrap text-sm text-gray-500 text-center min-w-[100px] min-h-[50px]">
                        <input
                          type="checkbox"
                          checked={grid[rowIdx][colIdx]}
                          onChange={() => handleCheckboxChange(rowIdx, colIdx)}
                          className="form-checkbox h-5 w-5 text-blue-600"
                        />
                      </td>
                    ))}
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </div>
      {showJsonModal && (
        <div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50">
          <div className="bg-white p-4 rounded shadow-lg w-3/4">
            <div className="flex justify-between items-center mb-4">
              <h2 className="text-xl">Grid JSON</h2>
              <button onClick={() => setShowJsonModal(false)} className="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700">
                Close
              </button>
            </div>
            <pre className="bg-gray-200 p-4 rounded overflow-x-auto">
              {JSON.stringify({ columns, rows, grid }, null, 2)}
            </pre>
          </div>
        </div>
      )}
    </div>
  );
};

export default ColumnBuilder;

// Usage example:
// import React from 'react';
// import ReactDOM from 'react-dom';
// import ColumnBuilder from './ColumnBuilder';
// ReactDOM.render(<ColumnBuilder />, document.getElementById('root'));