'use client'

import { useState, useEffect } from 'react'
import { useRouter, usePathname } from 'next/navigation'
import { useStore } from '@/lib/store'
import { LoginForm } from '@/components/auth/login-form'
import { Book, MessageCircle, Heart, Search, User, LogOut } from 'lucide-react'

export function Navigation() {
  const [showLogin, setShowLogin] = useState(false)
  const [activeTab, setActiveTab] = useState('bible')
  const { user, setUser } = useStore()
  const router = useRouter()
  const pathname = usePathname()

  // Sync navigation state with current route
  useEffect(() => {
    if (pathname === '/') {
      setActiveTab('bible')
    } else if (pathname.includes('/dashboard')) {
      // Extract tab from URL or local storage
      const savedTab = localStorage.getItem('activeTab')
      if (savedTab) {
        setActiveTab(savedTab)
      }
    }
  }, [pathname])

  // Initialize user from localStorage on component mount
  useEffect(() => {
    const token = localStorage.getItem('authToken')
    if (token && !user) {
      // Validate token and get user info
      fetch('/api/auth/me', {
        headers: {
          'Authorization': `Bearer ${token}`
        }
      })
      .then(res => res.json())
      .then(data => {
        if (data.user) {
          setUser(data.user)
        } else {
          localStorage.removeItem('authToken')
        }
      })
      .catch(() => {
        localStorage.removeItem('authToken')
      })
    }
  }, [user, setUser])

  const handleLogout = () => {
    setUser(null)
    localStorage.removeItem('authToken')
    localStorage.removeItem('activeTab')
    router.push('/')
  }

  const handleTabChange = (tabId: string) => {
    setActiveTab(tabId)
    localStorage.setItem('activeTab', tabId)

    // Navigate to dashboard if not already there
    if (pathname !== '/dashboard') {
      router.push('/dashboard')
    }

    // Emit custom event for tab change
    window.dispatchEvent(new CustomEvent('tabChange', { detail: { tab: tabId } }))
  }

  const navItems = [
    { id: 'bible', label: 'Biblia', icon: Book },
    { id: 'chat', label: 'Chat AI', icon: MessageCircle },
    { id: 'prayers', label: 'Rugăciuni', icon: Heart },
    { id: 'search', label: 'Căutare', icon: Search },
  ]

  return (
    <nav className="bg-white shadow-lg border-b sticky top-0 z-40">
      <div className="container mx-auto px-4">
        <div className="flex justify-between items-center h-16">
          <div className="flex items-center space-x-8">
            <button
              onClick={() => router.push('/')}
              className="text-xl font-bold text-blue-600 hover:text-blue-700 transition-colors"
            >
              Ghid Biblic
            </button>

            <div className="hidden md:flex space-x-4">
              {navItems.map((item) => {
                const Icon = item.icon
                return (
                  <button
                    key={item.id}
                    onClick={() => handleTabChange(item.id)}
                    className={`flex items-center space-x-2 px-3 py-2 rounded-md text-sm font-medium transition-colors ${
                      activeTab === item.id
                        ? 'bg-blue-100 text-blue-700'
                        : 'text-gray-600 hover:text-gray-900 hover:bg-gray-100'
                    }`}
                  >
                    <Icon className="w-4 h-4" />
                    <span>{item.label}</span>
                  </button>
                )
              })}
            </div>
          </div>

          <div className="flex items-center space-x-4">
            {user ? (
              <div className="flex items-center space-x-3">
                <span className="text-sm text-gray-700">
                  Bună, {user.name || user.email}!
                </span>
                <button
                  onClick={handleLogout}
                  className="flex items-center space-x-1 px-3 py-2 text-sm text-gray-600 hover:text-gray-900 rounded-md hover:bg-gray-100 transition-colors"
                >
                  <LogOut className="w-4 h-4" />
                  <span>Ieșire</span>
                </button>
              </div>
            ) : (
              <button
                onClick={() => setShowLogin(true)}
                className="flex items-center space-x-1 px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
              >
                <User className="w-4 h-4" />
                <span>Autentificare</span>
              </button>
            )}
          </div>
        </div>
      </div>

      {/* Mobile Navigation */}
      <div className="md:hidden border-t bg-gray-50">
        <div className="flex justify-around py-2">
          {navItems.map((item) => {
            const Icon = item.icon
            return (
              <button
                key={item.id}
                onClick={() => handleTabChange(item.id)}
                className={`flex flex-col items-center space-y-1 px-3 py-2 text-xs transition-colors ${
                  activeTab === item.id
                    ? 'text-blue-600'
                    : 'text-gray-600'
                }`}
              >
                <Icon className="w-5 h-5" />
                <span>{item.label}</span>
              </button>
            )
          })}
        </div>
      </div>

      {/* Login Modal */}
      {showLogin && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
          <div className="bg-white p-6 rounded-lg max-w-md w-full mx-4">
            <h2 className="text-xl font-bold mb-4">Autentificare</h2>
            <LoginForm onSuccess={() => setShowLogin(false)} />
            <div className="mt-4 text-center">
              <button
                onClick={() => setShowLogin(false)}
                className="text-gray-500 hover:text-gray-700 transition-colors"
              >
                Anulează
              </button>
            </div>
          </div>
        </div>
      )}
    </nav>
  )
}