// FolderModal.tsx
import React from 'react';
import { Box, Dialog, DialogTitle, DialogContent, DialogActions, Button, Grid, Card, CardMedia, IconButton, Typography } from '@mui/material';
import DeleteIcon from '@mui/icons-material/Delete';
import { WeddingPhoto } from './types';

type Props = {
    open: boolean;
    onClose: () => void;
    photos: WeddingPhoto[];
    onDeletePhoto: (id: number | string) => Promise<void>;
    deletingId?: number | string | null;
};

const FolderModal: React.FC<Props> = ({ open, onClose, photos, onDeletePhoto, deletingId }) => {
    return (
        <Dialog open={open} onClose={onClose} fullWidth maxWidth="md">
            <DialogTitle>Manage Photos ({photos.length})</DialogTitle>
            <DialogContent dividers>
                {photos.length === 0 ? (
                    <Typography variant="body2">No photos in this event.</Typography>
                ) : (
                    <Grid container spacing={2}>
                        {photos.map((p) => (
                            <Grid key={p.id}>
                                <Card>
                                    <Box sx={{ position: 'relative' }}>
                                        <CardMedia component="img" height="140" image={p.url} />
                                        <IconButton
                                            sx={{ position: 'absolute', top: 6, right: 6, bgcolor: 'rgba(255,255,255,0.8)' }}
                                            onClick={() => onDeletePhoto(p.id)}
                                            disabled={deletingId === p.id}
                                        >
                                            <DeleteIcon fontSize="small" />
                                        </IconButton>
                                    </Box>
                                    <Box sx={{ p: 1 }}>
                                        <Typography variant="caption" noWrap>{p.filename ?? p.title}</Typography>
                                    </Box>
                                </Card>
                            </Grid>
                        ))}
                    </Grid>
                )}
            </DialogContent>
            <DialogActions>
                <Button onClick={onClose} variant="outlined">Close</Button>
            </DialogActions>
        </Dialog>
    );
};

export default FolderModal;
