import React from 'react';
import { Box, Typography, Collapse, IconButton } from '@mui/material';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import ExpandLessIcon from '@mui/icons-material/ExpandLess';
import { Decision } from '../hooks/useSession';

interface ResultsDisplayProps {
    decision: Decision;
}

const CategorySection: React.FC<{ title: string; desire: string; defaultExpanded?: boolean; borderColor?: string }>
    = ({ title, desire, defaultExpanded = true, borderColor = '#e0e0e0' }) => {
        const [expanded, setExpanded] = React.useState(defaultExpanded);

        if (!desire) {
            return null;
        }

        return (
            <Box sx={{ mt: 3, border: `1px solid ${borderColor}`, borderRadius: '4px', p: 2 }}>
                <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                    <Typography variant="h6" component="h2" gutterBottom>
                        {title}
                    </Typography>
                    <IconButton onClick={() => setExpanded(!expanded)} size="small">
                        {expanded ? <ExpandLessIcon /> : <ExpandMoreIcon />}
                    </IconButton>
                </Box>
                <Collapse in={expanded} timeout="auto" unmountOnExit>
                    <Typography variant="body1" sx={{ mt: 1 }}>
                        {desire}
                    </Typography>
                </Collapse>
            </Box>
        );
    };

const ResultsDisplay: React.FC<ResultsDisplayProps> = ({ decision }) => {
    if (!decision) {
        return <Typography>No decision available yet.</Typography>;
    }

    return (
        <Box sx={{ mt: 4 }}>
            <Typography variant="h5" component="h1" gutterBottom>
                Harmonized Desires
            </Typography>

            <CategorySection title="Go-to" desire={decision.goTo} borderColor="#a5d6a7" /> {/* Pale Green */}
            <CategorySection title="Also good" desire={decision.alsoGood} borderColor="#90caf9" /> {/* Pale Blue */}
            <CategorySection title="Considerable" desire={decision.considerable} defaultExpanded={true} /> {/* Grey (default) */}
            <CategorySection title="Needs discussion" desire={decision.needsDiscussion} borderColor="#ffe082" /> {/* Pale Yellow */}
            <CategorySection title="No-goes" desire={decision.noGoes} borderColor="#ef9a9a" /> {/* Pale Red */}
        </Box>
    );
};

export default ResultsDisplay;
