/********************************************************************************
 * Copyright (c) 2026 Contributors to the Eclipse Foundation
 *
 * See the NOTICE file(s) distributed with this work for additional
 * information regarding copyright ownership.
 *
 * This program and the accompanying materials are made available under the
 * terms of the Eclipse Public License 2.0 which is available at
 * https://www.eclipse.org/legal/epl-2.0
 *
 * SPDX-License-Identifier: EPL-2.0
 ********************************************************************************/

import { useRef, useEffect, useState, FC } from 'react';
import { Box } from '@mui/material';
import { ExpandMore as ExpandMoreIcon } from '@mui/icons-material';
import { useTheme } from '@mui/material/styles';
import { DetailBadge } from './utils';
import { ScanCardExpandStripBadges } from './scan-card-expand-strip-badges';

interface ScanCardExpandStripProps {
    expanded: boolean;
    onExpandClick: () => void;
    badges: DetailBadge[];
    collapseComplete: boolean;
}

/**
 * Expandable strip at the bottom of the card
 * Shows validationFailure/threat badges (click to expand/show detail cards)
 */
export const ScanCardExpandStrip: FC<ScanCardExpandStripProps> = ({
    expanded,
    onExpandClick,
    badges,
    collapseComplete
}) => {
    const theme = useTheme();
    const [isHovering, setIsHovering] = useState(false);
    const wrapperRef = useRef<HTMLDivElement>(null);
    const [containerWidth, setContainerWidth] = useState(0);

    useEffect(() => {
        const updateWidth = () => {
            if (wrapperRef.current) {
                setContainerWidth(wrapperRef.current.offsetWidth);
            }
        };

        updateWidth();

        const resizeObserver = new ResizeObserver(() => {
            updateWidth();
        });

        if (wrapperRef.current) {
            resizeObserver.observe(wrapperRef.current);
        }

        return () => resizeObserver.disconnect();
    }, []);

    return (
        <Box
            ref={wrapperRef}
            onClick={onExpandClick}
            onMouseEnter={() => setIsHovering(true)}
            onMouseLeave={() => setIsHovering(false)}
            sx={{
                pb: 0,
                pt: 0.5,
                px: 5,
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'space-between',
                cursor: 'pointer',
                borderBottomRightRadius: expanded ? 0 : 8,
                minHeight: 40,
                backgroundColor: isHovering ? theme.palette.selected.hover : 'transparent',
                transition: 'background-color 0.2s',
                position: 'relative'
            }}>
            <Box sx={{ flex: 1 }} />
            <Box
                sx={{
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    position: 'absolute',
                    left: '50%',
                    transform: 'translateX(-50%)'
                }}>
                <ExpandMoreIcon
                    sx={{
                        fontSize: 36,
                        color: 'secondary.main',
                        transform: expanded ? 'rotate(180deg)' : 'rotate(0deg)',
                        transition: 'transform 0.3s'
                    }}
                />
            </Box>

            {!expanded && collapseComplete && (
                <ScanCardExpandStripBadges badges={badges} containerWidth={containerWidth} />
            )}
        </Box>
    );
};
