import { useEffect, useState } from 'react'
import { Outlet, NavLink, useNavigate, useLocation } from 'react-router'
import { WelcomeDialog } from '../onboarding/WelcomeDialog'
import { useLayoutStore } from '../../stores/layoutStore'
import { useSessionStore } from '../../stores/sessionStore'
import { WorkspaceType } from '../../domain/enums'
import {
  Box,
  Drawer,
  Typography,
  Avatar,
  IconButton,
  Tooltip,
  Chip,
  Button,
  useTheme,
  useMediaQuery,
} from '@mui/material'
import {
  LayoutDashboard,
  Building2,
  Target,
  CheckSquare,
  Search,
  List,
  Columns2,
  Bookmark,
  ClipboardList,
  Activity,
  Shield,
  ChevronLeft,
  ChevronRight,
  Sparkles,
  Clock,
  Radar,
  ServerCog,
  GitBranch,
  MessageSquare,
  Menu,
  Kanban,
} from 'lucide-react'
import type { LucideIcon } from 'lucide-react'
import { OrganizationContextBadge } from './OrganizationContextBadge'
import { UserMenu } from './UserMenu'
import { NotificationButton } from './NotificationButton'
import { RightContextPanel } from './RightContextPanel'
import { CompareTray } from './CompareTray'
import { GlobalAIAssistantDrawer, GlobalAIAssistantButton } from '../assistant'
import { useAssistantStore } from '../../stores/assistantStore'
import { ToastProvider } from '../ui'

// ---------------------------------------------------------------------------
// Types
// ---------------------------------------------------------------------------

interface NavItem {
  path: string
  label: string
  icon: LucideIcon
}

interface WorkspaceConfig {
  label: string
  abbreviation: string
  icon: LucideIcon
  firstPath: string
  navItems: NavItem[]
  chipColor: string
}

// ---------------------------------------------------------------------------
// Workspace configuration
// ---------------------------------------------------------------------------

const WORKSPACE_CONFIG: Record<WorkspaceType, WorkspaceConfig> = {
  [WorkspaceType.SUPPLY]: {
    label: 'Verwaltung',
    abbreviation: 'VW',
    icon: Building2,
    firstPath: '/supply/dashboard',
    chipColor: '#1e3a5f',
    navItems: [
      { path: '/supply/dashboard', label: 'Übersicht', icon: LayoutDashboard },
      { path: '/supply/properties', label: 'Meine Objekte', icon: Building2 },
      { path: '/supply/anfragen', label: 'Anfragencenter', icon: MessageSquare },
      { path: '/supply/data-quality', label: 'Datenpflege', icon: CheckSquare },
      { path: '/supply/market-intelligence', label: 'Markt Intelligence', icon: Radar },
    ],
  },
  [WorkspaceType.DEMAND]: {
    label: 'Suche',
    abbreviation: 'SU',
    icon: Search,
    firstPath: '/demand/ai-search',
    chipColor: '#1a7a4a',
    navItems: [
      { path: '/demand/ai-search', label: 'Flächensuche', icon: Search },
      { path: '/demand/results', label: 'Ergebnisse', icon: List },
      { path: '/demand/compare', label: 'Vergleich', icon: Columns2 },
      { path: '/demand/shortlists', label: 'Shortlists', icon: Bookmark },
      { path: '/demand/pipeline', label: 'Deal Pipeline', icon: Kanban },
    ],
  },
  [WorkspaceType.OPERATIONS]: {
    label: 'Administration',
    abbreviation: 'ADM',
    icon: Shield,
    firstPath: '/ops/review-queue',
    chipColor: '#7c3aed',
    navItems: [
      { path: '/ops/review-queue', label: 'Review Queue', icon: ClipboardList },
      { path: '/ops/ai-monitoring', label: 'AI Monitoring', icon: Activity },
      { path: '/ops/governance', label: 'Governance', icon: Shield },
      { path: '/ops/source-monitoring', label: 'Source Monitoring', icon: ServerCog },
      { path: '/ops/signal-pipeline', label: 'Signal Pipeline', icon: GitBranch },
      { path: '/ops/activity-timeline', label: 'Aktivitäts-Timeline', icon: Clock },
    ],
  },
}

// Ordered list for rendering workspace tabs
const WORKSPACE_ORDER: WorkspaceType[] = [
  WorkspaceType.SUPPLY,
  WorkspaceType.DEMAND,
  WorkspaceType.OPERATIONS,
]

// ---------------------------------------------------------------------------
// Helpers
// ---------------------------------------------------------------------------

function getWorkspaceFromPath(pathname: string): WorkspaceType | null {
  if (pathname.startsWith('/supply')) return WorkspaceType.SUPPLY
  if (pathname.startsWith('/demand')) return WorkspaceType.DEMAND
  if (pathname.startsWith('/ops')) return WorkspaceType.OPERATIONS
  return null
}

function getPageNameFromPath(pathname: string): string {
  for (const ws of Object.values(WORKSPACE_CONFIG)) {
    for (const item of ws.navItems) {
      if (item.path === pathname) return item.label
    }
  }
  // Fallback: last segment, capitalised
  const segment = pathname.split('/').filter(Boolean).pop() ?? ''
  return segment.charAt(0).toUpperCase() + segment.slice(1).replace(/-/g, ' ')
}

function getUserInitials(name: string): string {
  return name
    .split(' ')
    .map((n) => n[0])
    .join('')
    .toUpperCase()
    .slice(0, 2)
}

// ---------------------------------------------------------------------------
// Sub-components
// ---------------------------------------------------------------------------

const SIDEBAR_BG = '#0f1923'
const DIVIDER_COLOR = 'rgba(255,255,255,0.08)'
const TEXT_MUTED = '#94a3b8'
const TEXT_WHITE = '#ffffff'
const ACTIVE_BG = 'rgba(255,255,255,0.1)'
const NAV_ACTIVE_BG = 'rgba(255,255,255,0.12)'
const NAV_HOVER_BG = 'rgba(255,255,255,0.06)'

interface SidebarProps {
  collapsed: boolean
  activeWorkspace: WorkspaceType
  allowedWorkspaces: WorkspaceType[]
  onWorkspaceClick: (workspace: WorkspaceType) => void
  onToggle: () => void
  onClose?: () => void
  userName: string
  orgName: string
}

function Sidebar({
  collapsed,
  activeWorkspace,
  allowedWorkspaces,
  onWorkspaceClick,
  onToggle,
  onClose,
  userName,
  orgName,
}: SidebarProps) {
  const config = WORKSPACE_CONFIG[activeWorkspace]
  const width = collapsed ? 60 : 240
  const visibleWorkspaces = WORKSPACE_ORDER.filter((ws) => allowedWorkspaces.includes(ws))

  return (
    <Box
      component="nav"
      sx={{
        width,
        minWidth: width,
        flexShrink: 0,
        height: '100vh',
        backgroundColor: SIDEBAR_BG,
        display: 'flex',
        flexDirection: 'column',
        transition: 'width 0.2s ease',
        overflow: 'hidden',
      }}
    >
      {/* Logo area */}
      <Box
        sx={{
          height: 56,
          display: 'flex',
          alignItems: 'center',
          justifyContent: collapsed ? 'center' : 'flex-start',
          px: collapsed ? 0 : 2.5,
          borderBottom: `1px solid ${DIVIDER_COLOR}`,
          flexShrink: 0,
        }}
      >
        {collapsed ? (
          <Typography
            variant="subtitle1"
            sx={{ color: TEXT_WHITE, fontWeight: 700, letterSpacing: 0.5 }}
          >
            PM
          </Typography>
        ) : (
          <Box>
            <Typography
              variant="subtitle1"
              sx={{ color: TEXT_WHITE, fontWeight: 700, lineHeight: 1.2 }}
            >
              Property
            </Typography>
            <Typography
              variant="caption"
              sx={{
                color: '#64b5f6',
                fontWeight: 600,
                textTransform: 'uppercase',
                letterSpacing: 1,
                fontSize: '0.6rem',
              }}
            >
              Match
            </Typography>
          </Box>
        )}
      </Box>

      {/* Workspace tabs */}
      <Box
        sx={{
          borderBottom: `1px solid ${DIVIDER_COLOR}`,
          py: 0.5,
          px: 0.5,
          flexShrink: 0,
        }}
      >
        {visibleWorkspaces.map((ws) => {
          const wsConfig = WORKSPACE_CONFIG[ws]
          const Icon = wsConfig.icon
          const isActive = ws === activeWorkspace

          const tabContent = (
            <Box
              onClick={() => { onWorkspaceClick(ws); onClose?.() }}
              sx={{
                display: 'flex',
                alignItems: 'center',
                gap: 1.25,
                px: collapsed ? 0 : 1.5,
                py: 0.75,
                borderRadius: 1,
                cursor: 'pointer',
                justifyContent: collapsed ? 'center' : 'flex-start',
                backgroundColor: isActive ? ACTIVE_BG : 'transparent',
                '&:hover': {
                  backgroundColor: isActive ? ACTIVE_BG : NAV_HOVER_BG,
                },
                transition: 'background-color 0.15s ease',
              }}
            >
              <Icon size={16} color={isActive ? TEXT_WHITE : TEXT_MUTED} />
              {!collapsed && (
                <Typography
                  variant="body2"
                  sx={{
                    color: isActive ? TEXT_WHITE : TEXT_MUTED,
                    fontWeight: isActive ? 600 : 400,
                    fontSize: '0.8125rem',
                    whiteSpace: 'nowrap',
                  }}
                >
                  {wsConfig.label}
                </Typography>
              )}
            </Box>
          )

          return collapsed ? (
            <Tooltip key={ws} title={wsConfig.label} placement="right">
              {tabContent}
            </Tooltip>
          ) : (
            <Box key={ws}>{tabContent}</Box>
          )
        })}
      </Box>

      {/* Nav items */}
      <Box sx={{ flex: 1, overflowY: 'auto', py: 0.5 }}>
        {config.navItems.map((item) => {
          const Icon = item.icon

          const navContent = (
            <NavLink
              to={item.path}
              style={{ textDecoration: 'none', display: 'block' }}
              onClick={() => onClose?.()}
            >
              {({ isActive }) => (
                <Box
                  sx={{
                    display: 'flex',
                    alignItems: 'center',
                    gap: 1.25,
                    px: collapsed ? 0 : 1.5,
                    py: 0.75,
                    mx: 0.5,
                    borderRadius: 1,
                    justifyContent: collapsed ? 'center' : 'flex-start',
                    backgroundColor: isActive ? NAV_ACTIVE_BG : 'transparent',
                    '&:hover': {
                      backgroundColor: isActive ? NAV_ACTIVE_BG : NAV_HOVER_BG,
                    },
                    transition: 'background-color 0.15s ease',
                    cursor: 'pointer',
                  }}
                >
                  <Icon size={16} color={isActive ? TEXT_WHITE : TEXT_MUTED} />
                  {!collapsed && (
                    <Typography
                      variant="body2"
                      sx={{
                        color: isActive ? TEXT_WHITE : TEXT_MUTED,
                        fontWeight: isActive ? 500 : 400,
                        fontSize: '0.8125rem',
                        whiteSpace: 'nowrap',
                      }}
                    >
                      {item.label}
                    </Typography>
                  )}
                </Box>
              )}
            </NavLink>
          )

          return collapsed ? (
            <Tooltip key={item.path} title={item.label} placement="right">
              <Box>{navContent}</Box>
            </Tooltip>
          ) : (
            <Box key={item.path}>{navContent}</Box>
          )
        })}
      </Box>

      {/* Bottom section */}
      <Box
        sx={{
          borderTop: `1px solid ${DIVIDER_COLOR}`,
          px: collapsed ? 0 : 1.5,
          py: 1,
          display: 'flex',
          alignItems: 'center',
          gap: 1,
          justifyContent: collapsed ? 'center' : 'space-between',
          flexShrink: 0,
        }}
      >
        {!collapsed && (
          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, minWidth: 0 }}>
            <Avatar
              sx={{
                width: 32,
                height: 32,
                fontSize: '0.75rem',
                bgcolor: '#1e3a5f',
                flexShrink: 0,
              }}
            >
              {getUserInitials(userName)}
            </Avatar>
            <Box sx={{ minWidth: 0 }}>
              <Typography
                variant="body2"
                sx={{
                  color: TEXT_WHITE,
                  fontWeight: 500,
                  fontSize: '0.8125rem',
                  whiteSpace: 'nowrap',
                  overflow: 'hidden',
                  textOverflow: 'ellipsis',
                }}
              >
                {userName}
              </Typography>
              <Typography
                variant="caption"
                sx={{
                  color: '#64748b',
                  fontSize: '0.7rem',
                  whiteSpace: 'nowrap',
                  overflow: 'hidden',
                  textOverflow: 'ellipsis',
                  display: 'block',
                }}
              >
                {orgName}
              </Typography>
            </Box>
          </Box>
        )}

        <IconButton
          onClick={onToggle}
          size="small"
          sx={{ color: '#64748b', flexShrink: 0 }}
        >
          {collapsed ? <ChevronRight size={16} /> : <ChevronLeft size={16} />}
        </IconButton>
      </Box>
    </Box>
  )
}

interface TopBarProps {
  activeWorkspace: WorkspaceType
  pathname: string
  onMenuClick?: () => void
  isMobile?: boolean
}

function TopBar({ activeWorkspace, pathname, onMenuClick, isMobile }: TopBarProps) {
  const config = WORKSPACE_CONFIG[activeWorkspace]
  const pageName = getPageNameFromPath(pathname)
  const openAssistant = useAssistantStore(s => s.open)

  return (
    <Box
      component="header"
      sx={{
        height: 56,
        flexShrink: 0,
        backgroundColor: '#ffffff',
        borderBottom: '1px solid #e2e8f0',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
        px: { xs: 1.5, sm: 3 },
      }}
    >
      {/* Left side */}
      <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
        {isMobile && (
          <IconButton size="small" onClick={onMenuClick} sx={{ mr: 0.5 }}>
            <Menu size={20} />
          </IconButton>
        )}
        <Chip
          label={config.label}
          size="small"
          sx={{
            backgroundColor: config.chipColor,
            color: '#ffffff',
            fontWeight: 600,
            fontSize: '0.7rem',
            height: 22,
          }}
        />
        <Typography
          variant="body1"
          sx={{ fontWeight: 500, color: '#1e293b', fontSize: { xs: '0.85rem', sm: '0.9375rem' } }}
        >
          {pageName}
        </Typography>
      </Box>

      {/* Right side */}
      <Box sx={{ display: 'flex', alignItems: 'center', gap: { xs: 0.5, sm: 1 } }}>
        <Box sx={{ display: { xs: 'none', sm: 'flex' } }}>
          <OrganizationContextBadge />
        </Box>
        <Button
          variant="outlined"
          size="small"
          startIcon={<Sparkles size={14} />}
          onClick={openAssistant}
          sx={{ textTransform: 'none', fontSize: '0.8125rem', display: { xs: 'none', md: 'flex' } }}
        >
          AI Assistent
        </Button>
        <IconButton size="small" onClick={openAssistant} sx={{ display: { xs: 'flex', md: 'none' } }}>
          <Sparkles size={18} />
        </IconButton>
        <NotificationButton />
        <UserMenu />
      </Box>
    </Box>
  )
}

// ---------------------------------------------------------------------------
// AppShell
// ---------------------------------------------------------------------------

export function AppShell() {
  const { activeWorkspace, sidebarCollapsed, setActiveWorkspace, toggleSidebar } =
    useLayoutStore()
  const { currentUser } = useSessionStore()
  const navigate = useNavigate()
  const location = useLocation()
  const theme = useTheme()
  const isMobile = useMediaQuery(theme.breakpoints.down('md'))
  const [mobileOpen, setMobileOpen] = useState(false)

  // Close mobile menu on route change
  useEffect(() => { setMobileOpen(false) }, [location.pathname])

  // Sync active workspace with URL
  useEffect(() => {
    const detected = getWorkspaceFromPath(location.pathname)
    if (detected && detected !== activeWorkspace) {
      setActiveWorkspace(detected)
    }
  }, [location.pathname, activeWorkspace, setActiveWorkspace])

  const handleWorkspaceClick = (workspace: WorkspaceType) => {
    setActiveWorkspace(workspace)
    navigate(WORKSPACE_CONFIG[workspace].firstPath)
  }

  const userName = currentUser?.name ?? 'User'
  const orgName = currentUser?.organizationName ?? ''
  const allowedWorkspaces = currentUser?.allowedWorkspaces ?? WORKSPACE_ORDER

  const sidebarContent = (
    <Sidebar
      collapsed={isMobile ? false : sidebarCollapsed}
      activeWorkspace={activeWorkspace}
      allowedWorkspaces={allowedWorkspaces}
      onWorkspaceClick={handleWorkspaceClick}
      onToggle={isMobile ? () => setMobileOpen(false) : toggleSidebar}
      onClose={isMobile ? () => setMobileOpen(false) : undefined}
      userName={userName}
      orgName={orgName}
    />
  )

  return (
    <Box sx={{ display: 'flex', height: '100vh', overflow: 'hidden' }}>
      {/* Desktop: permanent sidebar */}
      {!isMobile && sidebarContent}

      {/* Mobile: temporary drawer */}
      {isMobile && (
        <Drawer
          open={mobileOpen}
          onClose={() => setMobileOpen(false)}
          variant="temporary"
          ModalProps={{ keepMounted: true }}
          slotProps={{ paper: { sx: { width: 240, bgcolor: 'transparent', boxShadow: 'none' } } }}
        >
          {sidebarContent}
        </Drawer>
      )}

      <Box sx={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
        <TopBar
          activeWorkspace={activeWorkspace}
          pathname={location.pathname}
          isMobile={isMobile}
          onMenuClick={() => setMobileOpen(true)}
        />

        <Box component="main" sx={{ flex: 1, overflowY: 'auto' }}>
          <Outlet />
        </Box>

        <RightContextPanel />
      </Box>

      <CompareTray />
      <GlobalAIAssistantDrawer />
      <GlobalAIAssistantButton />
      <ToastProvider />
      <WelcomeDialog />
    </Box>
  )
}