biblical-guide.com/app/dashboard/page.tsx

'use client'

import { useState, useEffect } from 'react'
import { BibleReader } from '@/components/bible/reader'
import { ChatInterface } from '@/components/chat/chat-interface'
import { PrayerWall } from '@/components/prayer/prayer-wall'

export default function Dashboard() {
  const [activeTab, setActiveTab] = useState('bible')

  // Listen for tab changes from navigation
  useEffect(() => {
    const handleTabChange = (event: CustomEvent) => {
      setActiveTab(event.detail.tab)
    }

    window.addEventListener('tabChange', handleTabChange as EventListener)

    // Initialize from localStorage
    const savedTab = localStorage.getItem('activeTab')
    if (savedTab) {
      setActiveTab(savedTab)
    }

    return () => {
      window.removeEventListener('tabChange', handleTabChange as EventListener)
    }
  }, [])

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

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

  const renderContent = () => {
    switch (activeTab) {
      case 'bible':
        return <BibleReader />
      case 'chat':
        return <ChatInterface />
      case 'prayers':
        return <PrayerWall />
      case 'search':
        return (
          <div className="bg-white rounded-lg shadow-md p-6">
            <h2 className="text-2xl font-bold mb-4">Căutare în Biblie</h2>
            <div className="space-y-4">
              <div>
                <label htmlFor="search-input" className="block text-sm font-medium text-gray-700 mb-2">
                  Caută în Scriptură
                </label>
                <div className="flex space-x-2">
                  <input
                    type="text"
                    id="search-input"
                    placeholder="Introdu termenul de căutare..."
                    className="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                  />
                  <button className="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
                    Caută
                  </button>
                </div>
              </div>
              <p className="text-gray-600">Funcția de căutare avansată va fi implementată în curând.</p>
            </div>
          </div>
        )
      default:
        return <BibleReader />
    }
  }

  const tabs = [
    { id: 'bible', label: 'Citește Biblia' },
    { id: 'chat', label: 'Chat AI' },
    { id: 'prayers', label: 'Rugăciuni' },
    { id: 'search', label: 'Căutare' },
  ]

  return (
    <main className="container mx-auto px-4 py-8">
      <div className="mb-6">
        <div className="flex space-x-4 border-b border-gray-200">
          {tabs.map((tab) => (
            <button
              key={tab.id}
              onClick={() => handleTabChange(tab.id)}
              className={`px-4 py-2 font-medium text-sm border-b-2 transition-colors ${
                activeTab === tab.id
                  ? 'border-blue-600 text-blue-600'
                  : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
              }`}
            >
              {tab.label}
            </button>
          ))}
        </div>
      </div>

      {renderContent()}
    </main>
  )
}