import React from 'react';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import Paper from '@mui/material/Paper';
import LegalPage from './pages/LegalPage.js';
import CategoryBox from './components/CategoryBox.js';

const PrerenderCategoriesPage = ({ categoryData }) => {
    // Helper function to recursively collect all categories from the tree
    const collectAllCategories = (categoryNode, categories = [], level = 0) => {
        if (!categoryNode) return categories;

        // Add current category (skip root category 209)
        if (categoryNode.id !== 209 && categoryNode.seoName) {
            categories.push({
                id: categoryNode.id,
                name: categoryNode.name,
                seoName: categoryNode.seoName,
                level: level
            });
        }

        // Recursively add children
        if (categoryNode.children) {
            for (const child of categoryNode.children) {
                collectAllCategories(child, categories, level + 1);
            }
        }

        return categories;
    };

    // The categoryData passed prop is the root tree (id: 209)
    const rootTree = categoryData;

    const renderLevel1Section = (l1Node) => {
        // Collect all descendants (excluding the L1 node itself, which collectAllCategories would include first)
        const descendants = collectAllCategories(l1Node).slice(1);

        return (
            <Paper
                key={l1Node.id}
                elevation={1}
                sx={{
                    p: 2,
                    mb: 3,
                    display: 'flex',
                    flexDirection: { xs: 'column', md: 'row' },
                    alignItems: { xs: 'flex-start', md: 'flex-start' },
                    gap: 3
                }}
            >
                {/* Level 1 Header/Box */}
                <Box sx={{
                    minWidth: '150px',
                    display: 'flex',
                    flexDirection: 'column',
                    alignItems: 'center',
                    gap: 1
                }}>
                    <CategoryBox
                        id={l1Node.id}
                        name={l1Node.name}
                        seoName={l1Node.seoName}
                        sx={{
                            boxShadow: 4,
                            width: '150px',
                            height: '150px'
                        }}
                    />
                </Box>

                {/* Descendants area */}
                <Box sx={{ flex: 1 }}>
                    <Box sx={{
                        display: 'flex',
                        flexWrap: 'wrap',
                        gap: 2
                    }}>
                        {descendants.map((cat) => (
                            <CategoryBox
                                key={cat.id}
                                id={cat.id}
                                name={cat.name}
                                seoName={cat.seoName}
                                sx={{
                                    width: '100px',
                                    height: '100px',
                                    minWidth: '100px',
                                    minHeight: '100px',
                                    boxShadow: 1,
                                    fontSize: '0.9rem'
                                }}
                            />
                        ))}
                    </Box>
                </Box>
            </Paper>
        );
    };

    const content = (
        <Box>
            <Box>
                {rootTree && rootTree.children && rootTree.children.map((child) => (
                    renderLevel1Section(child)
                ))}
                {(!rootTree || !rootTree.children || rootTree.children.length === 0) && (
                    <Typography>Keine Kategorien gefunden.</Typography>
                )}
            </Box>
        </Box>
    );

    return <LegalPage title="Kategorien" content={content} />;
};

export default PrerenderCategoriesPage;