// resources/assets/ts/ContactsPage/components/ContactsSidebar.tsx
import React, { useState } from 'react';
import useMediaQuery from '@mui/material/useMediaQuery';
import { useTheme } from '@mui/material/styles';
import Drawer from '@mui/material/Drawer';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import ListItemButton from '@mui/material/ListItemButton';
import ListItemIcon from '@mui/material/ListItemIcon';
import ListItemText from '@mui/material/ListItemText';
import Collapse from '@mui/material/Collapse';
import Box from '@mui/material/Box';
import { Trans } from '@lingui/macro';
import {
  Search as SearchIcon,
  PersonAdd as PersonAddIcon,
  KeyboardArrowDown,
  KeyboardArrowUp,
  Assignment as AssignmentIcon,
  Settings as SettingsIcon,
  CloudUpload as CloudUploadIcon,
  BadgeOutlined as BadgeOutlinedIcon,
  CorporateFare as CorporateFareIcon,
} from '@mui/icons-material';

const DRAWER_WIDTH = 256;

interface ContactsSidebarProps {
  activeView: 'search' | 'aufgaben' | 'addSingle' | 'addMultiple' | 'addEinstellungen' | 'addEmployeeSingle' | 'addEmployeeMultiple';
  onViewChange: (view: 'search' | 'aufgaben' | 'addSingle' | 'addMultiple' | 'addEinstellungen' | 'addEmployeeSingle' | 'addEmployeeMultiple') => void;
  mobileOpen: boolean;
  onMobileToggle: () => void;
}

const listItemButtonSx = {
  minHeight: '48px',
  padding: '12px 20px',
  color: 'text.secondary',
  alignItems: 'center',
  textAlign: 'left',
} as const;

const subItemButtonSx = {
  ...listItemButtonSx,
  padding: '12px 20px 12px 48px',
} as const;

const ContactsSidebar: React.FC<ContactsSidebarProps> = ({ activeView, onViewChange, mobileOpen, onMobileToggle }) => {
  const theme = useTheme();
  const isDesktop = useMediaQuery(theme.breakpoints.up('lg'));
  const [addContactExpanded, setAddContactExpanded] = useState(false);

  React.useEffect(() => {
    const handleKeyDown = (event: KeyboardEvent) => {
      if (event.key === 'F2') {
        event.preventDefault();
        onViewChange('search');
      }
    };
    window.addEventListener('keydown', handleKeyDown);
    return () => window.removeEventListener('keydown', handleKeyDown);
  }, [onViewChange]);

  return (
    <Drawer
      variant={isDesktop ? 'permanent' : 'temporary'}
      open={isDesktop ? true : mobileOpen}
      onClose={onMobileToggle}
      sx={{
        width: DRAWER_WIDTH,
        flexShrink: 0,
        '& .MuiDrawer-paper': {
          width: DRAWER_WIDTH,
          // bgcolor, borderRight, borderColor, boxSizing, overflowY → handled by theme (MuiDrawer)
          marginTop: { xs: 0, lg: '64px' },
          top: 0,
          height: '100vh',
        },
      }}
    >
      <Box sx={{ overflow: 'auto', pt: 2 }}>
        <List>
          {/* 1. Kontakt Suchen -F2- */}
          <ListItem disablePadding>
            <ListItemButton
              selected={activeView === 'search'}
              onClick={() => onViewChange('search')}
              sx={listItemButtonSx}
            >
              <ListItemIcon sx={{ minWidth: '40px', color: 'inherit' }}>
                <SearchIcon />
              </ListItemIcon>
              <ListItemText
                primary={<Trans>Search contacts</Trans>}
                secondary="-F2-"
                slotProps={{
                  primary: { fontWeight: activeView === 'search' ? 600 : 500, fontSize: '14px' },
                  secondary: { fontSize: '12px' },
                }}
              />
            </ListItemButton>
          </ListItem>

          {/* 2. Kontakt Hinzufügen (Expandable) */}
          <ListItem disablePadding>
            <ListItemButton
              onClick={() => setAddContactExpanded(!addContactExpanded)}
              sx={listItemButtonSx}
            >
              <ListItemIcon sx={{ minWidth: '40px', color: 'inherit' }}>
                <PersonAddIcon />
              </ListItemIcon>
              <ListItemText
                primary={<Trans>Add contact</Trans>}
                slotProps={{ primary: { fontWeight: 500, fontSize: '14px' } }}
              />
              {addContactExpanded ? <KeyboardArrowUp /> : <KeyboardArrowDown />}
            </ListItemButton>
          </ListItem>

          <Collapse in={addContactExpanded} timeout="auto" unmountOnExit>
            <List component="div" disablePadding>
              <ListItemButton
                selected={activeView === 'addSingle'}
                onClick={() => onViewChange('addSingle')}
                sx={subItemButtonSx}
              >
                <ListItemIcon sx={{ minWidth: '32px', color: 'inherit' }}>
                  <CorporateFareIcon fontSize="small" />
                </ListItemIcon>
                <ListItemText
                  primary={<Trans>Add single company</Trans>}
                  slotProps={{ primary: { fontSize: '13px', fontWeight: 400 } }}
                />
              </ListItemButton>

              <ListItemButton
                selected={activeView === 'addMultiple'}
                onClick={() => onViewChange('addMultiple')}
                sx={subItemButtonSx}
              >
                <ListItemIcon sx={{ minWidth: '32px', color: 'inherit' }}>
                  <CloudUploadIcon fontSize="small" />
                </ListItemIcon>
                <ListItemText
                  primary={<Trans>Import multiple companies</Trans>}
                  slotProps={{ primary: { fontSize: '13px', fontWeight: 400 } }}
                />
              </ListItemButton>

              <ListItemButton
                selected={activeView === 'addEmployeeSingle'}
                onClick={() => onViewChange('addEmployeeSingle')}
                sx={subItemButtonSx}
              >
                <ListItemIcon sx={{ minWidth: '32px', color: 'inherit' }}>
                  <BadgeOutlinedIcon fontSize="small" />
                </ListItemIcon>
                <ListItemText
                  primary={<Trans>Add single employee</Trans>}
                  slotProps={{ primary: { fontSize: '13px', fontWeight: 400 } }}
                />
              </ListItemButton>

              <ListItemButton
                selected={activeView === 'addEmployeeMultiple'}
                onClick={() => onViewChange('addEmployeeMultiple')}
                sx={subItemButtonSx}
              >
                <ListItemIcon sx={{ minWidth: '32px', color: 'inherit' }}>
                  <CloudUploadIcon fontSize="small" />
                </ListItemIcon>
                <ListItemText
                  primary={<Trans>Import multiple employees</Trans>}
                  slotProps={{ primary: { fontSize: '13px', fontWeight: 400 } }}
                />
              </ListItemButton>
            </List>
          </Collapse>

          {/* 3. Meine Aufgaben */}
          <ListItem disablePadding>
            <ListItemButton
              selected={activeView === 'aufgaben'}
              onClick={() => onViewChange('aufgaben')}
              sx={listItemButtonSx}
            >
              <ListItemIcon sx={{ minWidth: '40px', color: 'inherit' }}>
                <AssignmentIcon />
              </ListItemIcon>
              <ListItemText
                primary={<Trans>My tasks</Trans>}
                slotProps={{ primary: { fontWeight: activeView === 'aufgaben' ? 600 : 500, fontSize: '14px' } }}
              />
            </ListItemButton>
          </ListItem>

          {/* 4. Angebote — disabled for now */}
          {/* <ListItem disablePadding>
            <ListItemButton sx={listItemButtonSx}>
              <ListItemIcon sx={{ minWidth: '40px', color: 'inherit' }}>
                <AttachMoneyIcon />
              </ListItemIcon>
              <ListItemText
                primary="Angebote"
                slotProps={{ primary: { fontWeight: 500, fontSize: '14px' } }}
              />
            </ListItemButton>
          </ListItem> */}

          {/* 5. Einstellungen */}
          <ListItem disablePadding>
            <ListItemButton
              selected={activeView === 'addEinstellungen'}
              onClick={() => onViewChange('addEinstellungen')}
              sx={listItemButtonSx}
            >
              <ListItemIcon sx={{ minWidth: '40px', color: 'inherit' }}>
                <SettingsIcon />
              </ListItemIcon>
              <ListItemText
                primary={<Trans>Settings</Trans>}
                slotProps={{ primary: { fontWeight: activeView === 'addEinstellungen' ? 600 : 500, fontSize: '14px' } }}
              />
            </ListItemButton>
          </ListItem>
        </List>
      </Box>
    </Drawer>
  );
};

export default ContactsSidebar;
export { DRAWER_WIDTH };