import React, { useState, useEffect } from 'react'
import { X, Columns } from 'lucide-react'

export default function GridInitialColumnModal({ isOpen, onClose, onConfirm, defaultColumns = 2 }) {
  const [columns, setColumns] = useState(defaultColumns)

  useEffect(() => {
    if (isOpen) {
      setColumns(defaultColumns)
    }
  }, [isOpen, defaultColumns])

  if (!isOpen) return null

  return (
    <div className="fixed inset-0 z-[2000] flex items-center justify-center bg-black/45 backdrop-blur-xs p-4">
      <div className="bg-white rounded-2xl p-5 w-full max-w-xs border border-slate-100 space-y-4 animate-scaleUp">
        <div className="flex items-center gap-2 border-b border-gray-100 pb-3">
          <div className="w-8 h-8 rounded-lg bg-gray-100 text-gray-800 flex items-center justify-center">
            <Columns className="w-4 h-4" />
          </div>
          <div>
            <h3 className="text-xs font-bold text-gray-900 uppercase">Select Columns</h3>
            <p className="text-[10px] text-gray-500">Configure grid partition count.</p>
          </div>
        </div>

        <div className="space-y-3">
          <div className="flex gap-2">
            {[2, 3, 4].map((num) => (
              <button
                key={num}
                onClick={() => setColumns(num)}
                className={`flex-1 py-3 border rounded-xl text-xs font-bold transition-all cursor-pointer ${
                  columns === num
                    ? 'border-gray-900 bg-gray-100 text-gray-900'
                    : 'border-gray-200 hover:border-gray-300 text-gray-500'
                }`}
              >
                {num} Columns
              </button>
            ))}
          </div>

          <div className="flex items-center gap-2">
            <label className="text-[10px] font-bold text-gray-600 uppercase">Custom Count:</label>
            <input
              type="number"
              min="1"
              max="12"
              value={columns}
              onChange={(e) => {
                const val = parseInt(e.target.value, 10)
                if (val > 0) setColumns(val)
              }}
              className="w-16 px-2 py-1 border border-gray-200 rounded text-xs focus:outline-none focus:border-gray-900 focus:ring-1 focus:ring-gray-900"
            />
          </div>
        </div>

        <div className="flex justify-end gap-2 text-xs pt-1">
          <button
            onClick={onClose}
            className="px-4 py-2 border border-gray-200 text-gray-600 rounded-lg font-semibold hover:bg-gray-50 cursor-pointer"
          >
            Cancel
          </button>
          <button
            onClick={() => onConfirm(columns)}
            className="px-4 py-2 bg-gray-900 text-white rounded-lg font-semibold hover:bg-black cursor-pointer shadow-xs"
          >
            Create
          </button>
        </div>
      </div>
    </div>
  )
}