import { useState } from 'react';
import { Outlet, useLocation } from 'react-router-dom';
import { useDispatch, useSelector } from 'react-redux';
import Box from '@mui/material/Box';
import Popover from '@mui/material/Popover';
import MenuList from '@mui/material/MenuList';
import MenuItem from '@mui/material/MenuItem';
import ListItemIcon from '@mui/material/ListItemIcon';
import ListItemText from '@mui/material/ListItemText';
import GetAppIcon from '@mui/icons-material/GetApp';
import SettingsIcon from '@mui/icons-material/Settings';
import PageLayout from './PageLayout';
import { NAV_ITEMS, SUB_NAV } from '../nav';
import { isKategorienPath } from '../pages/artikel/categoryRoute';
import { selectRenameMode, setRenameMode } from '../store/categorySlice';
import { ActionElevatedPill, ToggleElevatedPill } from './ElevatedPill';
import { article, category } from '../api';

function triggerDownload(blob, filename) {
  const url = URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.href = url;
  link.download = filename;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
  URL.revokeObjectURL(url);
}

export default function SectionLayout({ sectionPath }) {
  const { pathname } = useLocation();
  const dispatch = useDispatch();
  const renameMode = useSelector(selectRenameMode);
  const [extrasAnchor, setExtrasAnchor] = useState(null);
  const title = NAV_ITEMS.find((item) => item.path === sectionPath)?.label ?? '';
  const subNav = SUB_NAV[sectionPath];
  const activeSub = subNav?.find((item) => {
    if (item.segment === 'kategorien') {
      return isKategorienPath(pathname);
    }
    const subPath = item.segment ? `${sectionPath}/${item.segment}` : sectionPath;
    return pathname === subPath || pathname === `${subPath}/`;
  });

  const knownSegments = new Set((subNav ?? []).map((item) => item.segment).filter(Boolean));
  const rest = pathname.slice(sectionPath.length).replace(/^\//, '').split('/')[0];
  const isArticleDetail =
    sectionPath === '/artikel' &&
    !isKategorienPath(pathname) &&
    rest &&
    !knownSegments.has(rest);

  const pageTitle = isArticleDetail
    ? title
    : (activeSub?.label ?? title);

  const showsRenameSwitch = activeSub?.segment === 'kategorien';

  const exportKategorien = async () => {
    setExtrasAnchor(null);
    triggerDownload(await category.exportZip(), 'kategorien.zip');
  };

  const exportArtikel = async () => {
    setExtrasAnchor(null);
    triggerDownload(await article.exportZip(), 'artikel.zip');
  };

  const titleAction = showsRenameSwitch ? (
    <Box sx={{ display: 'inline-flex', gap: 1 }}>
      <ToggleElevatedPill
        label="Editieren"
        checked={renameMode}
        onToggle={(checked) => dispatch(setRenameMode(checked))}
      />
      <ActionElevatedPill
        label="Extras"
        icon={<SettingsIcon sx={{ fontSize: 18 }} />}
        onClick={(event) => setExtrasAnchor(event.currentTarget)}
      />
      <Popover
        open={Boolean(extrasAnchor)}
        anchorEl={extrasAnchor}
        onClose={() => setExtrasAnchor(null)}
        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
        transformOrigin={{ vertical: 'top', horizontal: 'right' }}
      >
        <MenuList sx={{ py: 0.5 }}>
          <MenuItem onClick={exportArtikel}>
            <ListItemIcon>
              <GetAppIcon fontSize="small" />
            </ListItemIcon>
            <ListItemText>Artikel exportieren</ListItemText>
          </MenuItem>
          <MenuItem onClick={exportKategorien}>
            <ListItemIcon>
              <GetAppIcon fontSize="small" />
            </ListItemIcon>
            <ListItemText>Kategorien exportieren</ListItemText>
          </MenuItem>
        </MenuList>
      </Popover>
    </Box>
  ) : null;

  return (
    <PageLayout
      title={pageTitle}
      showTitle={!isArticleDetail}
      subNav={subNav}
      basePath={sectionPath}
      titleAction={titleAction}
    >
      <Outlet />
    </PageLayout>
  );
}