communitas 0.2.6

import React, { useState, useEffect } from 'react'
import {
  ThemeProvider,
  createTheme,
  CssBaseline,
  AppBar,
  Toolbar,
  Typography,
  Box,
  IconButton,
  Switch,
  FormControlLabel,
} from '@mui/material'
import { Menu as MenuIcon } from '@mui/icons-material'
import { NetworkHealth } from './types'

// Enhanced Navigation
import EnhancedNavigation from './components/navigation/EnhancedNavigation'

// WebRTC Communication
import { SimpleCommunicationHub } from './components/webrtc'

// Tab panels
import OverviewTab from './components/tabs/OverviewTab'
import OrganizationTab from './components/tabs/OrganizationTab'
import MessagesTab from './components/tabs/MessagesTab'
import FilesTab from './components/tabs/FilesTab'
import NetworkTab from './components/tabs/NetworkTab'
import StorageTab from './components/tabs/StorageTab'
import DiagnosticsTab from './components/tabs/DiagnosticsTab'
import IdentityTab from './components/tabs/IdentityTab'
import DocumentsTab from './components/tabs/DocumentsTab'
import CallingInterface from './components/calling/CallingInterface'
import WebsiteBuilder from './components/website/WebsiteBuilder'

interface TabPanelProps {
  children?: React.ReactNode
  index: number
  value: number
}

function TabPanel(props: TabPanelProps) {
  const { children, value, index, ...other } = props

  return (
    <div
      role="tabpanel"
      hidden={value !== index}
      {...other}
    >
      {value === index && (
        <Box sx={{ height: 'calc(100vh - 128px)', overflow: 'auto' }}>
          {children}
        </Box>
      )}
    </div>
  )
}

function App() {
  const [darkMode, setDarkMode] = useState(false)
  const [currentTab, setCurrentTab] = useState(0)
  const [sidebarOpen, setSidebarOpen] = useState(true)
  const [networkHealth, setNetworkHealth] = useState<NetworkHealth>({
    status: 'Disconnected',
    peer_count: 0,
    nat_type: 'Unknown',
    bandwidth_kbps: 0,
    avg_latency_ms: 0,
  })

  const theme = createTheme({
    palette: {
      mode: darkMode ? 'dark' : 'light',
    },
  })

  useEffect(() => {
    const mockHealth: NetworkHealth = {
      status: 'Connected',
      peer_count: 5,
      nat_type: 'Full Cone',
      bandwidth_kbps: 1500,
      avg_latency_ms: 45,
    }
    setNetworkHealth(mockHealth)
  }, [])

  const handleTabChange = (newValue: number) => {
    setCurrentTab(newValue)
  }

  const handleToggleSidebar = () => {
    setSidebarOpen(!sidebarOpen)
  }

  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <Box sx={{ display: 'flex', flexDirection: 'column', height: '100vh' }}>
        {/* Top App Bar */}
        <AppBar position="static" sx={{ zIndex: (theme) => theme.zIndex.drawer + 1 }}>
          <Toolbar>
            <IconButton
              color="inherit"
              edge="start"
              onClick={handleToggleSidebar}
              sx={{ mr: 2 }}
            >
              <MenuIcon />
            </IconButton>
            <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
              Communitas - P2P Collaboration Platform
            </Typography>
            <FormControlLabel
              control={
                <Switch
                  checked={darkMode}
                  onChange={(e) => setDarkMode(e.target.checked)}
                  color="default"
                />
              }
              label="Dark Mode"
            />
          </Toolbar>
        </AppBar>

        <Box sx={{ display: 'flex', flexGrow: 1 }}>
          {/* Enhanced Navigation */}
          <EnhancedNavigation
            currentTab={currentTab}
            onTabChange={handleTabChange}
            onToggleSidebar={handleToggleSidebar}
            sidebarOpen={sidebarOpen}
          />

          {/* Main content area */}
          <Box
            component="main"
            sx={{
              flexGrow: 1,
              display: 'flex',
              flexDirection: 'column',
              overflow: 'hidden',
            }}
          >
            <TabPanel value={currentTab} index={0}>
              <OverviewTab networkHealth={networkHealth} />
            </TabPanel>
            <TabPanel value={currentTab} index={1}>
              <OrganizationTab />
            </TabPanel>
            <TabPanel value={currentTab} index={2}>
              <MessagesTab />
            </TabPanel>
            <TabPanel value={currentTab} index={3}>
              <FilesTab />
            </TabPanel>
            <TabPanel value={currentTab} index={4}>
              <DocumentsTab />
            </TabPanel>
            <TabPanel value={currentTab} index={5}>
              <NetworkTab />
            </TabPanel>
            <TabPanel value={currentTab} index={6}>
              <StorageTab />
            </TabPanel>
            <TabPanel value={currentTab} index={7}>
              <DiagnosticsTab />
            </TabPanel>
            <TabPanel value={currentTab} index={8}>
              <CallingInterface />
            </TabPanel>
            <TabPanel value={currentTab} index={9}>
              <WebsiteBuilder />
            </TabPanel>
            <TabPanel value={currentTab} index={10}>
              <IdentityTab />
            </TabPanel>
          </Box>
        </Box>
      </Box>
      {/* WebRTC Communication Hub - Global overlay */}
      <SimpleCommunicationHub />
    </ThemeProvider>
  )
}

export default App