import { useState, useEffect, useRef } from 'react'
import { navigateToSpace, currentSpace } from '../store'
import { db } from '../db'
import { useStore } from '@nanostores/react'
import { generateShareLink, copyToClipboard } from '../utils/shareSpace'

interface NavigationConsoleProps {
  isOpen: boolean
  onClose: () => void
}

export function NavigationConsole({ isOpen, onClose }: NavigationConsoleProps) {
  const [input, setInput] = useState('')
  const [existingSpaces, setExistingSpaces] = useState<string[]>([])
  const [filteredSpaces, setFilteredSpaces] = useState<string[]>([])
  const [selectedIndex, setSelectedIndex] = useState(0)
  const [isSharing, setIsSharing] = useState(false)
  const inputRef = useRef<HTMLInputElement>(null)
  const space = useStore(currentSpace)

  useEffect(() => {
    const loadSpaces = async () => {
      const spaces = await db.getAllSpaceIds()
      setExistingSpaces(spaces)
    }
    if (isOpen) {
      loadSpaces()
    }
  }, [isOpen])

  useEffect(() => {
    if (isOpen && inputRef.current) {
      inputRef.current.focus()
    }
  }, [isOpen])

  useEffect(() => {
    if (input.trim() === '') {
      setFilteredSpaces(existingSpaces.slice(0, 8))
    } else {
      const filtered = existingSpaces.filter(space =>
        space.toLowerCase().includes(input.toLowerCase())
      ).slice(0, 8)

      if (filtered.length === 0 || !filtered.includes(input)) {
        filtered.unshift(input)
      }

      setFilteredSpaces(filtered)
    }
    setSelectedIndex(0)
  }, [input, existingSpaces])

  const handleShare = async () => {
    if (!space) {
return
}

    const shareLink = generateShareLink(space)
    const success = await copyToClipboard(shareLink)

    if (success) {
      setIsSharing(true)
      setTimeout(() => {
        onClose()
        setIsSharing(false)
      }, 1500)
    }
  }

  const handleKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === 'Escape') {
      onClose()
    } else if (e.key === 'Enter') {
      e.preventDefault()

      if (input.toLowerCase() === 'share') {
        handleShare()
        return
      }

      const targetSpace = filteredSpaces[selectedIndex] || input
      if (targetSpace.trim()) {
        navigateToSpace(sanitizeSpaceId(targetSpace.trim()))
        onClose()
      }
    } else if (e.key === 'ArrowDown') {
      e.preventDefault()
      setSelectedIndex(prev => (prev + 1) % filteredSpaces.length)
    } else if (e.key === 'ArrowUp') {
      e.preventDefault()
      setSelectedIndex(prev => (prev - 1 + filteredSpaces.length) % filteredSpaces.length)
    }
  }

  const sanitizeSpaceId = (input: string): string => {
    if (input.startsWith('http://') || input.startsWith('https://')) {
      try {
        const url = new URL(input)
        const path = url.pathname.slice(1) || url.hostname
        return path.toLowerCase().replace(/[^a-z0-9]/g, '-')
      } catch {
        return input.toLowerCase().replace(/[^a-z0-9]/g, '-')
      }
    }
    return input.toLowerCase().replace(/[^a-z0-9]/g, '-')
  }

  const handleItemClick = (space: string) => {
    navigateToSpace(sanitizeSpaceId(space))
    onClose()
  }

  if (!isOpen) {
return null
}

  return (
    <>
      <div
        style={{
          position: 'fixed',
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          background: 'rgba(0, 0, 0, 0.5)',
          zIndex: 2000
        }}
        onClick={onClose}
      />
      <div
        style={{
          position: 'fixed',
          top: '20%',
          left: '50%',
          transform: 'translateX(-50%)',
          background: '#1a1a1a',
          border: '1px solid #333',
          borderRadius: '4px',
          width: '400px',
          zIndex: 2001,
          fontFamily: 'monospace',
          fontSize: '14px'
        }}
      >
        <div style={{ padding: '8px' }}>
          {isSharing ? (
            <div style={{
              color: '#4CAF50',
              fontSize: '14px',
              fontFamily: 'monospace',
              padding: '4px 0'
            }}>
              ✓ Link copied to clipboard!
            </div>
          ) : (
            <input
              ref={inputRef}
              value={input}
              onChange={(e) => setInput(e.target.value)}
              onKeyDown={handleKeyDown}
              placeholder="Name a space"
              style={{
                width: '100%',
                background: 'transparent',
                border: 'none',
                outline: 'none',
                color: 'white',
                fontSize: '14px',
                fontFamily: 'monospace'
              }}
            />
          )}
        </div>
        {input.toLowerCase() === 'share' && (
          <div style={{
            borderTop: '1px solid #333',
            padding: '12px',
            color: '#4CAF50',
            fontSize: '13px'
          }}>
            Press Enter to share the current space.
          </div>
        )}
        {filteredSpaces.length > 0 && input.toLowerCase() !== 'share' && (
          <div style={{ borderTop: '1px solid #333', maxHeight: '200px', overflowY: 'auto' }}>
            {filteredSpaces.map((space, index) => {
              const isExisting = existingSpaces.includes(space)
              const isSelected = index === selectedIndex
              const isUrl = space.startsWith('http://') || space.startsWith('https://')

              return (
                <div
                  key={space}
                  onClick={() => handleItemClick(space)}
                  style={{
                    padding: '8px 12px',
                    cursor: 'pointer',
                    background: isSelected ? '#333' : 'transparent',
                    color: isExisting ? '#4CAF50' : (isUrl ? '#2196F3' : '#FFA726'),
                    borderLeft: isSelected ? '3px solid white' : '3px solid transparent'
                  }}
                >
                  {space}
                  {!isExisting && (
                    <span style={{ color: '#666', marginLeft: '8px', fontSize: '12px' }}>
                      (nouveau)
                    </span>
                  )}
                </div>
              )
            })}
          </div>
        )}
      </div>
    </>
  )
}