import React from 'react';
import { Box, Button, Dialog, DialogActions, DialogContent, DialogTitle, Paper, TextField, Typography } from '@mui/material';

interface EditSectionModalProps {
  open: boolean;
  sceneNumber: number;
  editText: string;
  onChangeEditText: (val: string) => void;
  aiFeedback: string;
  onChangeAiFeedback: (val: string) => void;
  aiLoading: boolean;
  onGenerateSuggestions: () => void;
  suggestions: string[];
  onPickSuggestion: (index: number) => void;
  onClose: () => void;
  onSave: () => void;
}

const EditSectionModal: React.FC<EditSectionModalProps> = ({
  open,
  sceneNumber,
  editText,
  onChangeEditText,
  aiFeedback,
  onChangeAiFeedback,
  aiLoading,
  onGenerateSuggestions,
  suggestions,
  onPickSuggestion,
  onClose,
  onSave,
}) => {
  return (
    <Dialog
      open={open}
      onClose={onClose}
      maxWidth="md"
      fullWidth
      PaperProps={{
        sx: {
          backgroundColor: '#fff',
          borderRadius: 2,
          boxShadow: '0 24px 64px rgba(0,0,0,0.18)',
          border: '1px solid rgba(0,0,0,0.06)',
        },
      }}
    >
      <DialogTitle>Edit Section (Scene {sceneNumber})</DialogTitle>
      <DialogContent dividers>
        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
          <TextField
            label="Section Text"
            value={editText}
            onChange={(e) => onChangeEditText(e.target.value)}
            multiline
            minRows={6}
            fullWidth
          />
          <TextField
            label="Tell Alwrity what to improve (optional)"
            value={aiFeedback}
            onChange={(e) => onChangeAiFeedback(e.target.value)}
            multiline
            minRows={3}
            fullWidth
            helperText="Describe desired changes (tone, pacing, details). Generate to get 2 suggestions."
          />
          <Box sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>
            <Button variant="outlined" onClick={onGenerateSuggestions} disabled={aiLoading}>
              {aiLoading ? 'Generating...' : 'Generate AI Suggestions'}
            </Button>
          </Box>
          {suggestions.length > 0 && (
            <Box sx={{ display: 'grid', gridTemplateColumns: { xs: '1fr', md: '1fr 1fr' }, gap: 2 }}>
              {suggestions.map((s, i) => (
                <Paper key={i} sx={{ p: 2, border: '1px solid rgba(120,90,60,0.2)' }}>
                  <Typography variant="subtitle2" sx={{ mb: 1, fontWeight: 600 }}>
                    Suggestion {i + 1}
                  </Typography>
                  <Typography variant="body2" sx={{ whiteSpace: 'pre-wrap' }}>
                    {s}
                  </Typography>
                  <Box sx={{ mt: 1, display: 'flex', justifyContent: 'flex-end' }}>
                    <Button size="small" variant="text" onClick={() => onPickSuggestion(i)}>
                      Use this
                    </Button>
                  </Box>
                </Paper>
              ))}
            </Box>
          )}
        </Box>
      </DialogContent>
      <DialogActions>
        <Button onClick={onClose}>Cancel</Button>
        <Button variant="contained" onClick={onSave}>
          Save & Update
        </Button>
      </DialogActions>
    </Dialog>
  );
};

export default EditSectionModal;