import { Box, Divider, IconButton, Typography } from '@mui/material'
import { X } from 'lucide-react'
import { useLayoutStore } from '../../stores/layoutStore'
import type { RightPanelContentType } from '../../stores/layoutStore'

const PANEL_TITLES: Record<RightPanelContentType, string> = {
  ai_context: 'KI Kontext',
  detail_preview: 'Detail Vorschau',
  compare_preview: 'Vergleich Vorschau',
  activity_feed: 'Aktivitäts-Feed',
}

const PANEL_PLACEHOLDERS: Record<RightPanelContentType, string> = {
  ai_context: 'KI-Kontext wird geladen...',
  detail_preview: 'Kein Objekt ausgewählt.',
  compare_preview: 'Vergleichsvorschau nicht verfügbar.',
  activity_feed: 'Keine Aktivitäten vorhanden.',
}

export function RightContextPanel() {
  const isRightPanelOpen = useLayoutStore(s => s.isRightPanelOpen)
  const rightPanelContentType = useLayoutStore(s => s.rightPanelContentType)
  const closeRightPanel = useLayoutStore(s => s.closeRightPanel)

  const title = rightPanelContentType ? PANEL_TITLES[rightPanelContentType] : ''
  const placeholder = rightPanelContentType ? PANEL_PLACEHOLDERS[rightPanelContentType] : ''

  return (
    <Box
      sx={{
        position: 'fixed',
        right: 0,
        top: 56,
        height: 'calc(100vh - 56px)',
        width: 320,
        transform: isRightPanelOpen ? 'translateX(0)' : 'translateX(320px)',
        transition: 'transform 0.25s ease',
        bgcolor: '#fff',
        borderLeft: '1px solid #e2e8f0',
        boxShadow: '-4px 0 16px rgba(0,0,0,0.08)',
        zIndex: 1200,
        display: 'flex',
        flexDirection: 'column',
        overflow: 'hidden',
      }}
    >
      <Box
        sx={{
          height: 48,
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
          px: 2,
          flexShrink: 0,
        }}
      >
        <Typography variant="subtitle2" sx={{ fontWeight: 600 }}>{title}</Typography>
        <IconButton size="small" onClick={closeRightPanel} sx={{ color: '#64748b' }}>
          <X size={16} />
        </IconButton>
      </Box>

      <Divider />

      <Box sx={{ flex: 1, overflowY: 'auto', p: 2 }}>
        <Typography variant="body2" sx={{ color: 'text.secondary' }}>
          {placeholder}
        </Typography>
      </Box>
    </Box>
  )
}