import React, { useState } from 'react';
import { Sidebar } from './components/layout/Sidebar';
import { BoardDashboard } from './components/pages/BoardDashboard';
import { MemberList } from './components/pages/MemberList';

function App() {
  const [currentPage, setCurrentPage] = useState('dashboard');

  const renderPage = () => {
    switch (currentPage) {
      case 'dashboard':
        return <BoardDashboard />;
      case 'members':
        return <MemberList />;
      case 'dues':
        return (
          <div className="flex items-center justify-center h-96">
            <div className="text-center space-y-4">
              <div className="w-24 h-24 bg-gradient-to-br from-red-100 to-red-200 rounded-full flex items-center justify-center mx-auto">
                <span className="text-4xl">🚧</span>
              </div>
              <h2 className="text-3xl font-bold text-gray-900">Dues Management</h2>
              <p className="text-gray-600 max-w-md">This premium feature is currently under development. Stay tuned for advanced dues tracking capabilities.</p>
            </div>
          </div>
        );
      case 'events':
        return (
          <div className="flex items-center justify-center h-96">
            <div className="text-center space-y-4">
              <div className="w-24 h-24 bg-gradient-to-br from-red-100 to-red-200 rounded-full flex items-center justify-center mx-auto">
                <span className="text-4xl">📅</span>
              </div>
              <h2 className="text-3xl font-bold text-gray-900">Events</h2>
              <p className="text-gray-600 max-w-md">Event management system coming soon with calendar integration and RSVP tracking.</p>
            </div>
          </div>
        );
      case 'reports':
        return (
          <div className="flex items-center justify-center h-96">
            <div className="text-center space-y-4">
              <div className="w-24 h-24 bg-gradient-to-br from-red-100 to-red-200 rounded-full flex items-center justify-center mx-auto">
                <span className="text-4xl">📊</span>
              </div>
              <h2 className="text-3xl font-bold text-gray-900">Reports</h2>
              <p className="text-gray-600 max-w-md">Advanced analytics and reporting dashboard in development.</p>
            </div>
          </div>
        );
      case 'documents':
        return (
          <div className="flex items-center justify-center h-96">
            <div className="text-center space-y-4">
              <div className="w-24 h-24 bg-gradient-to-br from-red-100 to-red-200 rounded-full flex items-center justify-center mx-auto">
                <span className="text-4xl">📄</span>
              </div>
              <h2 className="text-3xl font-bold text-gray-900">Documents</h2>
              <p className="text-gray-600 max-w-md">Document management system with secure file sharing capabilities.</p>
            </div>
          </div>
        );
      case 'notifications':
        return (
          <div className="flex items-center justify-center h-96">
            <div className="text-center space-y-4">
              <div className="w-24 h-24 bg-gradient-to-br from-red-100 to-red-200 rounded-full flex items-center justify-center mx-auto">
                <span className="text-4xl">🔔</span>
              </div>
              <h2 className="text-3xl font-bold text-gray-900">Notifications</h2>
              <p className="text-gray-600 max-w-md">Smart notification center with customizable alerts and reminders.</p>
            </div>
          </div>
        );
      case 'settings':
        return (
          <div className="flex items-center justify-center h-96">
            <div className="text-center space-y-4">
              <div className="w-24 h-24 bg-gradient-to-br from-red-100 to-red-200 rounded-full flex items-center justify-center mx-auto">
                <span className="text-4xl">⚙️</span>
              </div>
              <h2 className="text-3xl font-bold text-gray-900">Settings</h2>
              <p className="text-gray-600 max-w-md">System configuration and user preferences management.</p>
            </div>
          </div>
        );
      default:
        return <BoardDashboard />;
    }
  };

  return (
    <div className="flex min-h-screen bg-gradient-to-br from-red-50 via-white to-red-100/30 relative overflow-hidden">
      {/* Background Elements */}
      <div className="absolute top-0 left-1/4 w-96 h-96 bg-red-200/20 rounded-full blur-3xl animate-pulse-slow"></div>
      <div className="absolute bottom-0 right-1/4 w-64 h-64 bg-red-300/20 rounded-full blur-2xl animate-float"></div>
      
      <Sidebar currentPage={currentPage} onPageChange={setCurrentPage} />
      
      <div className="flex-1 overflow-hidden relative">
        <main className="max-w-7xl mx-auto px-10 py-12 relative z-10">
          {renderPage()}
        </main>
      </div>
    </div>
  );
}

export default App;