import { useState } from 'react'
import { getStorageMode, setStorageMode, type StorageMode } from '../db'

export function StorageConfig() {
  const [currentMode, setCurrentMode] = useState<StorageMode>(getStorageMode())
  const [showConfig, setShowConfig] = useState(false)

  const handleModeChange = (mode: StorageMode) => {
    setStorageMode(mode)
    setCurrentMode(mode)
    window.location.reload()
  }

  if (!showConfig) {
    return (
      <button 
        onClick={() => setShowConfig(true)}
        className="fixed bottom-4 right-4 bg-gray-200 hover:bg-gray-300 px-3 py-2 rounded text-sm"
      >
        ⚙️ Storage
      </button>
    )
  }

  return (
    <div className="fixed bottom-4 right-4 bg-white border rounded-lg shadow-lg p-4 min-w-64">
      <div className="flex justify-between items-center mb-3">
        <h3 className="font-medium">Storage Mode</h3>
        <button 
          onClick={() => setShowConfig(false)}
          className="text-gray-500 hover:text-gray-700"
        >
          ✕
        </button>
      </div>
      
      <div className="space-y-2">
        <label className="flex items-center space-x-2">
          <input
            type="radio"
            name="storage-mode"
            value="indexeddb"
            checked={currentMode === 'indexeddb'}
            onChange={() => handleModeChange('indexeddb')}
          />
          <span>IndexedDB (Local)</span>
        </label>
        
        <label className="flex items-center space-x-2">
          <input
            type="radio"
            name="storage-mode"
            value="database"
            checked={currentMode === 'database'}
            onChange={() => handleModeChange('database')}
          />
          <span>Database (Collaborative)</span>
        </label>
      </div>
      
      <div className="mt-3 text-xs text-gray-600">
        Current: {currentMode === 'indexeddb' ? 'Local storage' : 'Remote database'}
      </div>
    </div>
  )
}