import { useState, useEffect, useRef, useCallback } from 'react'
import { Box, Button, useMediaQuery } from '@mui/material'
import { useTheme } from '@mui/material'
import { Outlet, useNavigate } from 'react-router-dom'
import { useI18nStore } from '../../stores/i18n.store'
import { useRedisStateStore } from '../../stores/redis-state.store'
import { navigateTo } from '../../stores/navigation.store'
import DatabaseHeader from './DatabaseHeader'
import DatabaseTreeControls from './DatabaseTreeControls'
import DatabaseTree from './DatabaseTree'
import ConsoleComponent from '../console/ConsoleComponent'
const RESIZE_MIN_WIDTH = 315
const CONSOLE_COLLAPSED_HEIGHT = 80
export default function DatabasePage() {
const strings = useI18nStore(s => s.strings)
const connection = useRedisStateStore(s => s.connection)
const connections = useRedisStateStore(s => s.connections)
const navigate = useNavigate()
const muiTheme = useTheme()
const isXs = useMediaQuery('(max-width: 599px)')
const hasConnection = !!connection
const hasConnections = (connections?.list?.length ?? 0) > 0
// Resize state
const [leftWidth, setLeftWidth] = useState(RESIZE_MIN_WIDTH)
const [isDragging, setIsDragging] = useState(false)
const [isHovering, setIsHovering] = useState(false)
const containerRef = useRef<HTMLDivElement>(null)
// Console expand/collapse state
const [consoleExpanded, setConsoleExpanded] = useState(false)
const consolePanelRef = useRef<HTMLDivElement>(null)
// Redirect to statistics on bare /database
useEffect(() => {
if (!connection) return
const path = location.pathname.replace(/^\/react/, '')
if (path === '/database' || path === '/database/') {
navigateTo('database.statistics')
}
}, [connection])
// --- Console click-outside-to-collapse (matches Angular onDocumentMouseDown) ---
useEffect(() => {
if (isXs || !hasConnection) return
const handler = (event: MouseEvent) => {
const panel = consolePanelRef.current
if (!panel) return
if (panel.contains(event.target as Node)) {
const actions = panel.querySelector('.p3xr-console-toolbar-actions')
if (actions && actions.contains(event.target as Node)) return
if (!consoleExpanded) {
setConsoleExpanded(true)
setTimeout(() => window.dispatchEvent(new Event('resize')), 50)
}
return
}
if (consoleExpanded) {
setConsoleExpanded(false)
setTimeout(() => window.dispatchEvent(new Event('resize')), 50)
}
}
document.addEventListener('mousedown', handler)
return () => document.removeEventListener('mousedown', handler)
}, [isXs, hasConnection, consoleExpanded])
// --- Drag resize handler ---
const handleMouseDown = useCallback((e: React.MouseEvent) => {
e.preventDefault()
setIsDragging(true)
document.documentElement.style.cursor = 'ew-resize'
document.body.classList.add('p3xr-not-selectable')
}, [])
useEffect(() => {
if (!isDragging) return
const handleMouseMove = (e: MouseEvent) => {
const container = containerRef.current
if (!container) return
const rect = container.getBoundingClientRect()
const newWidth = e.clientX - rect.left
if (newWidth < RESIZE_MIN_WIDTH || newWidth > rect.width - RESIZE_MIN_WIDTH) {
document.documentElement.style.cursor = 'not-allowed'
return
}
document.documentElement.style.cursor = 'ew-resize'
setLeftWidth(newWidth)
}
const handleMouseUp = () => {
setIsDragging(false)
document.documentElement.style.cursor = 'auto'
document.body.classList.remove('p3xr-not-selectable')
}
document.addEventListener('mousemove', handleMouseMove)
document.addEventListener('mouseup', handleMouseUp)
return () => {
document.removeEventListener('mousemove', handleMouseMove)
document.removeEventListener('mouseup', handleMouseUp)
}
}, [isDragging])
const isDark = muiTheme.palette.mode === 'dark'
const resizerFilter = isDragging
? (isDark ? 'brightness(1.6)' : 'brightness(0.7)')
: isHovering
? (isDark ? 'brightness(1.3)' : 'brightness(0.85)')
: 'none'
// Console height: collapsed = just header+input, expanded = 33% min 220px
const consoleHeight = consoleExpanded ? '33%' : `${CONSOLE_COLLAPSED_HEIGHT}px`
const consoleMinHeight = consoleExpanded ? 220 : CONSOLE_COLLAPSED_HEIGHT
return (
<Box sx={{ borderRadius: '4px 4px 0 0', overflow: 'hidden', flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column' }}>
<DatabaseHeader />
<Box sx={{
flex: 1, minHeight: 0,
bgcolor: 'background.paper',
color: 'text.primary',
overflow: 'hidden',
position: 'relative',
display: 'flex',
flexDirection: 'column',
}}>
{/* No connections message */}
{!hasConnections && !hasConnection && (
<Box sx={{ p: 2 }}>
<Button variant="text" onClick={() => navigateTo('settings')}
sx={{ textDecoration: 'underline', textTransform: 'none', color: 'inherit' }}>
{strings?.intention?.noConnections}
</Button>
</Box>
)}
{/* Has connections but not connected */}
{hasConnections && !hasConnection && (
<Box sx={{ p: 2, fontSize: 20, fontWeight: 400 }}>
{strings?.title?.main}
</Box>
)}
{/* Connected */}
{hasConnection && (
isXs ? (
/* Mobile: matches Angular exactly
- flex column, min-height 100%
- tree controls: flex 1 (natural height)
- tree: flex 1, viewport 20vh
- outlet: flex 1 (remaining)
- console: 33vh separate
*/
<Box sx={{
display: 'flex', flexDirection: 'column',
minHeight: '100%', overflowX: 'hidden',
}}>
<Box sx={{ flex: 1 }}>
<DatabaseTreeControls />
</Box>
<Box sx={{
flex: '1 1 auto', minHeight: 0,
height: '20vh',
minHeight: 100,
overflowY: 'auto', overflowX: 'auto',
}}>
<DatabaseTree />
</Box>
<Box sx={{ flex: 1 }}>
<Outlet />
</Box>
<Box sx={{
height: '33vh', minHeight: 220,
marginTop: 'auto',
borderTop: '1px solid rgba(255,255,255,0.16)',
overflowX: 'hidden',
}}>
<ConsoleComponent embedded />
</Box>
</Box>
) : (
/* Desktop: split pane + bottom console */
<Box ref={containerRef} sx={{
display: 'flex', flexDirection: 'column', flex: 1, minHeight: 0,
userSelect: isDragging ? 'none' : undefined,
}}>
{/* Main content area (tree + resizer + outlet) */}
<Box sx={{ display: 'flex', flex: 1, minHeight: 0, overflow: 'hidden' }}>
{/* Left: tree controls + tree */}
<Box sx={{
width: leftWidth, minWidth: RESIZE_MIN_WIDTH,
flexShrink: 0, display: 'flex', flexDirection: 'column', overflow: 'hidden',
}}>
<DatabaseTreeControls />
<Box sx={{ flex: 1, minHeight: 0, overflow: 'hidden' }}>
<DatabaseTree resizeSignal={consoleExpanded} />
</Box>
</Box>
{/* Resizer */}
<Box
onMouseDown={handleMouseDown}
onMouseEnter={() => setIsHovering(true)}
onMouseLeave={() => setIsHovering(false)}
sx={{
width: 5, flexShrink: 0, cursor: 'ew-resize',
bgcolor: muiTheme.p3xr.accordionBg,
filter: resizerFilter,
transition: 'filter 0.15s ease',
zIndex: 8,
}}
/>
{/* Right: key viewer / statistics */}
<Box sx={{ flex: 1, overflow: 'auto' }}>
<Outlet />
</Box>
</Box>
{/* Bottom console panel */}
<Box ref={consolePanelRef} id="p3xr-database-bottom-console-panel" sx={{
height: consoleHeight,
minHeight: consoleMinHeight,
maxHeight: consoleExpanded ? '50%' : CONSOLE_COLLAPSED_HEIGHT,
flexShrink: 0,
borderTop: '1px solid rgba(255,255,255,0.16)',
overflow: 'hidden',
boxSizing: 'border-box',
zIndex: 9,
}}>
<ConsoleComponent embedded collapsed={!consoleExpanded} />
</Box>
</Box>
)
)}
</Box>
</Box>
)
}