import React, { useState, useEffect } from 'react';
import {
  Box,
  Typography,
  Paper,
  Button,
  Stepper,
  Step,
  StepLabel,
  Grid,
  Card,
  CardContent,
  CircularProgress,
  Alert,
  TextField,
  FormControlLabel,
  Checkbox,
  Radio,
  RadioGroup,
  FormControl,
  FormLabel,
  Chip,
  Divider,
  Dialog,
  DialogTitle,
  DialogContent,
  DialogActions,
  IconButton,
  List,
  ListItem,
  ListItemText,
  Tooltip,
  MenuItem,
  Select,
  InputLabel
} from '@mui/material';
import { 
  ArrowBack as ArrowBackIcon,
  Send as SendIcon,
  Schedule as ScheduleIcon,
  Preview as PreviewIcon,
  InfoOutlined as InfoIcon,
  WarningAmber as WarningIcon,
  CheckCircle as CheckCircleIcon
} from '@mui/icons-material';
import { useNavigate, useParams } from 'react-router-dom';
import { format, addHours, addDays, setHours, setMinutes } from 'date-fns';
import { 
  useEmailCampaign, 
  useMailingList, 
  useSendCampaign, 
  useScheduleCampaign,
  usePreviewCampaign
} from '@hooks/emailCampaignHooks';

const CampaignSendPage = () => {
  const navigate = useNavigate();
  const { id } = useParams();
  
  // Stepper state
  const [activeStep, setActiveStep] = useState(0);
  const steps = ['Review Campaign', 'Select Delivery Options', 'Confirm & Send'];
  
  // Custom date time picker state
  const initialDate = addHours(new Date(), 1);
  const [scheduledDate, setScheduledDate] = useState(initialDate);
  const [selectedDate, setSelectedDate] = useState(format(initialDate, 'yyyy-MM-dd'));
  const [selectedHour, setSelectedHour] = useState(initialDate.getHours());
  const [selectedMinute, setSelectedMinute] = useState(initialDate.getMinutes());
  
  // Delivery options
  const [deliveryOption, setDeliveryOption] = useState('send_now');
  const [confirmChecked, setConfirmChecked] = useState(false);
  
  // Preview dialog
  const [previewDialogOpen, setPreviewDialogOpen] = useState(false);
  const [testEmailAddress, setTestEmailAddress] = useState('');
  
  // Fetch campaign and related data
  const { data: campaign, isLoading: campaignLoading, error: campaignError } = useEmailCampaign(id);
  
  // Load lists information for selected lists
  const { data: listData, isLoading: listLoading } = useMailingList(
    campaign?.list_ids?.length > 0 ? campaign.list_ids[0] : null
  );
  
  // Mutations
  const sendCampaign = useSendCampaign();
  const scheduleCampaign = useScheduleCampaign();
  const previewCampaign = usePreviewCampaign();
  
  // Generate hours and minutes for dropdowns
  const hours = Array.from({ length: 24 }, (_, i) => i);
  const minutes = Array.from({ length: 60 }, (_, i) => i);
  
  // Update the scheduledDate when date/time components change
  useEffect(() => {
    try {
      const dateObj = new Date(selectedDate);
      dateObj.setHours(selectedHour);
      dateObj.setMinutes(selectedMinute);
      setScheduledDate(dateObj);
    } catch (error) {
      console.error("Invalid date selection:", error);
    }
  }, [selectedDate, selectedHour, selectedMinute]);
  
  // Handle step changes
  const handleNext = () => {
    setActiveStep((prevStep) => Math.min(prevStep + 1, steps.length - 1));
  };
  
  const handleBack = () => {
    setActiveStep((prevStep) => Math.max(prevStep - 1, 0));
  };
  
  // Handle delivery option change
  const handleDeliveryOptionChange = (event) => {
    setDeliveryOption(event.target.value);
  };
  
  // Handle date change
  const handleDateChange = (event) => {
    setSelectedDate(event.target.value);
  };
  
  // Handle hour change
  const handleHourChange = (event) => {
    setSelectedHour(Number(event.target.value));
  };
  
  // Handle minute change
  const handleMinuteChange = (event) => {
    setSelectedMinute(Number(event.target.value));
  };
  
  // Handle preview
  const handleOpenPreview = () => {
    setPreviewDialogOpen(true);
  };
  
  // Send test email
  const handleSendTest = async () => {
    if (!testEmailAddress || !campaign) return;
    
    try {
      await previewCampaign.mutateAsync({
        campaignId: campaign.id,
        email: testEmailAddress
      });
      
      // Clear the field after successful send
      if (!previewCampaign.error) {
        setTestEmailAddress('');
      }
    } catch (error) {
      console.error('Failed to send test email:', error);
    }
  };
  
  // Handle final campaign send/schedule
  const handleSendCampaign = async () => {
    if (!campaign) return;
    
    try {
      if (deliveryOption === 'send_now') {
        await sendCampaign.mutateAsync(campaign.id);
      } else {
        await scheduleCampaign.mutateAsync({
          campaignId: campaign.id,
          scheduledDate: scheduledDate.toISOString()
        });
      }
      
      // Navigate back to campaigns list on success
      if (!sendCampaign.error && !scheduleCampaign.error) {
        navigate('/admin/email-campaigns');
      }
    } catch (error) {
      console.error('Failed to send/schedule campaign:', error);
    }
  };
  
  // Get estimated recipient count
  const getRecipientCount = () => {
    if (!campaign || !campaign.list_ids || campaign.list_ids.length === 0) {
      return 0;
    }
    return listData?.subscriber_count || 0;
  };
  
  // Format hour for display (add leading zero if needed)
  const formatTimeValue = (value) => {
    return value.toString().padStart(2, '0');
  };
  
  // Validate that selected date is in the future
  const isDateInPast = () => {
    const now = new Date();
    return scheduledDate < now;
  };
  
  // Loading state
  if (campaignLoading) {
    return <Box sx={{ display: 'flex', justifyContent: 'center', py: 4 }}><CircularProgress /></Box>;
  }
  
  // Error state
  if (campaignError) {
    return <Alert severity="error" sx={{ my: 2 }}>{campaignError.message}</Alert>;
  }
  
  // Campaign not found
  if (!campaign) {
    return (
      <Alert severity="warning" sx={{ my: 2 }}>
        Campaign not found. Please select a valid campaign.
      </Alert>
    );
  }
  
  return (
    <Box>
      {/* Header with back button */}
      <Box mb={3} display="flex" alignItems="center">
        <IconButton onClick={() => navigate(`/admin/email-campaigns/${id}`)} sx={{ mr: 1 }}>
          <ArrowBackIcon />
        </IconButton>
        <Typography variant="h4">
          Send Campaign: {campaign.name}
        </Typography>
      </Box>
      
      {/* Stepper */}
      <Stepper activeStep={activeStep} sx={{ mb: 4 }}>
        {steps.map((label) => (
          <Step key={label}>
            <StepLabel>{label}</StepLabel>
          </Step>
        ))}
      </Stepper>
      
      {/* Step content */}
      <Box mb={4}>
        {/* Step 1: Review Campaign */}
        {activeStep === 0 && (
          <Paper sx={{ p: 3 }}>
            <Typography variant="h6" gutterBottom>Review Campaign Details</Typography>
            
            <Grid container spacing={3}>
              <Grid item xs={12} md={6}>
                <Card variant="outlined" sx={{ height: '100%' }}>
                  <CardContent>
                    <Typography variant="subtitle1" fontWeight="bold" gutterBottom>
                      Campaign Details
                    </Typography>
                    
                    <Box sx={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 1 }}>
                      <Typography variant="body2" color="text.secondary">Name:</Typography>
                      <Typography variant="body2">{campaign.name}</Typography>
                      
                      <Typography variant="body2" color="text.secondary">Subject:</Typography>
                      <Typography variant="body2">{campaign.subject}</Typography>
                      
                      <Typography variant="body2" color="text.secondary">From:</Typography>
                      <Typography variant="body2">
                        {campaign.from_name} ({campaign.from_email})
                      </Typography>
                      
                      {campaign.preheader && (
                        <>
                          <Typography variant="body2" color="text.secondary">Preheader:</Typography>
                          <Typography variant="body2">{campaign.preheader}</Typography>
                        </>
                      )}
                    </Box>
                  </CardContent>
                </Card>
              </Grid>
              
              <Grid item xs={12} md={6}>
                <Card variant="outlined" sx={{ height: '100%' }}>
                  <CardContent>
                    <Typography variant="subtitle1" fontWeight="bold" gutterBottom>
                      Audience
                    </Typography>
                    
                    <Box sx={{ mb: 2 }}>
                      <Typography variant="body2" color="text.secondary" gutterBottom>
                        Mailing Lists:
                      </Typography>
                      
                      {listLoading ? (
                        <CircularProgress size={20} />
                      ) : (
                        <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1 }}>
                          <Chip 
                            label={`${listData?.name} (${listData?.subscriber_count || 0} subscribers)`} 
                            color="primary" 
                            size="small" 
                          />
                        </Box>
                      )}
                    </Box>
                    
                    <Box sx={{ mt: 3 }}>
                      <Typography variant="body2" gutterBottom>
                        <strong>Estimated Recipients:</strong> {getRecipientCount()}
                      </Typography>
                      
                      {getRecipientCount() === 0 && (
                        <Alert severity="warning" sx={{ mt: 1 }}>
                          No recipients in selected mailing lists. Your campaign won't be delivered to anyone.
                        </Alert>
                      )}
                    </Box>
                  </CardContent>
                </Card>
              </Grid>
            </Grid>
            
            <Box sx={{ mt: 4, display: 'flex', justifyContent: 'space-between' }}>
              <Button onClick={handleOpenPreview} startIcon={<PreviewIcon />}>
                Preview Campaign
              </Button>
              
              <Button 
                variant="contained" 
                onClick={handleNext} 
                disabled={getRecipientCount() === 0}
              >
                Next: Delivery Options
              </Button>
            </Box>
          </Paper>
        )}
        
        {/* Step 2: Delivery Options */}
        {activeStep === 1 && (
          <Paper sx={{ p: 3 }}>
            <Typography variant="h6" gutterBottom>Delivery Options</Typography>
            
            <FormControl component="fieldset" sx={{ mb: 4 }}>
              <FormLabel component="legend">When should this campaign be sent?</FormLabel>
              <RadioGroup
                value={deliveryOption}
                onChange={handleDeliveryOptionChange}
              >
                <FormControlLabel 
                  value="send_now" 
                  control={<Radio />} 
                  label="Send immediately" 
                />
                <FormControlLabel 
                  value="schedule" 
                  control={<Radio />} 
                  label="Schedule for later" 
                />
              </RadioGroup>
            </FormControl>
            
            {deliveryOption === 'schedule' && (
              <Box sx={{ mb: 4, ml: 4 }}>
                {/* Custom Date Time Picker */}
                <Grid container spacing={2}>
                  <Grid item xs={12} sm={6}>
                    <TextField
                      label="Select Date"
                      type="date"
                      fullWidth
                      value={selectedDate}
                      onChange={handleDateChange}
                      InputLabelProps={{ shrink: true }}
                      inputProps={{ min: format(new Date(), 'yyyy-MM-dd') }}
                    />
                  </Grid>
                  <Grid item xs={12} sm={6}>
                    <Grid container spacing={2}>
                      <Grid item xs={6}>
                        <FormControl fullWidth>
                          <InputLabel id="hour-select-label">Hour</InputLabel>
                          <Select
                            labelId="hour-select-label"
                            value={selectedHour}
                            onChange={handleHourChange}
                            label="Hour"
                          >
                            {hours.map((hour) => (
                              <MenuItem key={hour} value={hour}>
                                {formatTimeValue(hour)}
                              </MenuItem>
                            ))}
                          </Select>
                        </FormControl>
                      </Grid>
                      <Grid item xs={6}>
                        <FormControl fullWidth>
                          <InputLabel id="minute-select-label">Minute</InputLabel>
                          <Select
                            labelId="minute-select-label"
                            value={selectedMinute}
                            onChange={handleMinuteChange}
                            label="Minute"
                          >
                            {minutes.map((minute) => (
                              <MenuItem key={minute} value={minute}>
                                {formatTimeValue(minute)}
                              </MenuItem>
                            ))}
                          </Select>
                        </FormControl>
                      </Grid>
                    </Grid>
                  </Grid>
                </Grid>
                
                {isDateInPast() && (
                  <Alert severity="error" sx={{ mt: 2 }}>
                    Selected time is in the past. Please choose a future date and time.
                  </Alert>
                )}
                
                <Typography variant="body2" color="text.secondary" sx={{ mt: 2 }}>
                  Selected Date/Time: {format(scheduledDate, 'PPpp')}
                </Typography>
                
                <Typography variant="caption" color="text.secondary" display="block" mt={1}>
                  Campaigns are sent in your local timezone: {Intl.DateTimeFormat().resolvedOptions().timeZone}
                </Typography>
              </Box>
            )}
            
            <Divider sx={{ my: 3 }} />
            
            <Typography variant="subtitle1" gutterBottom>
              Send Test Email
            </Typography>
            
            <Typography variant="body2" paragraph>
              Send a test email to verify how your campaign will look before sending to your list.
            </Typography>
            
            <Box sx={{ display: 'flex', gap: 2, mb: 2 }}>
              <TextField
                label="Test Email Address"
                variant="outlined"
                size="small"
                fullWidth
                value={testEmailAddress}
                onChange={(e) => setTestEmailAddress(e.target.value)}
              />
              
              <Button 
                variant="outlined" 
                onClick={handleSendTest}
                disabled={!testEmailAddress || previewCampaign.isLoading}
              >
                {previewCampaign.isLoading ? <CircularProgress size={24} /> : 'Send Test'}
              </Button>
            </Box>
            
            {previewCampaign.isSuccess && (
              <Alert severity="success" sx={{ mb: 2 }}>
                Test email sent successfully!
              </Alert>
            )}
            
            {previewCampaign.error && (
              <Alert severity="error" sx={{ mb: 2 }}>
                {previewCampaign.error.message || 'Failed to send test email'}
              </Alert>
            )}
            
            <Box sx={{ mt: 4, display: 'flex', justifyContent: 'space-between' }}>
              <Button onClick={handleBack}>
                Back
              </Button>
              <Button 
                variant="contained" 
                onClick={handleNext}
                disabled={deliveryOption === 'schedule' && isDateInPast()}
              >
                Next: Review & Send
              </Button>
            </Box>
          </Paper>
        )}
        
        {/* Step 3: Confirm & Send */}
        {activeStep === 2 && (
          <Paper sx={{ p: 3 }}>
            <Typography variant="h6" gutterBottom>Confirm & Send</Typography>
            
            <Alert severity="info" sx={{ mb: 3 }}>
              <Typography variant="subtitle1">Please review your campaign before sending</Typography>
              <Typography variant="body2">
                Once a campaign is sent, it cannot be recalled or edited.
              </Typography>
            </Alert>
            
            <Box sx={{ mb: 4 }}>
              <Typography variant="subtitle1" gutterBottom>Sending Summary</Typography>
              
              <List disablePadding>
                <ListItem divider>
                  <ListItemText 
                    primary="Campaign" 
                    secondary={campaign.name} 
                  />
                </ListItem>
                <ListItem divider>
                  <ListItemText 
                    primary="Subject Line" 
                    secondary={campaign.subject} 
                  />
                </ListItem>
                <ListItem divider>
                  <ListItemText 
                    primary="From" 
                    secondary={`${campaign.from_name} (${campaign.from_email})`} 
                  />
                </ListItem>
                <ListItem divider>
                  <ListItemText 
                    primary="Recipients" 
                    secondary={`${getRecipientCount()} subscribers`} 
                  />
                </ListItem>
                <ListItem>
                  <ListItemText 
                    primary="Delivery" 
                    secondary={
                      deliveryOption === 'send_now' 
                        ? 'Send immediately' 
                        : `Scheduled for ${format(scheduledDate, 'PPpp')}`
                    } 
                  />
                </ListItem>
              </List>
            </Box>
            
            <Box sx={{ mb: 3 }}>
              <FormControlLabel
                control={
                  <Checkbox 
                    checked={confirmChecked} 
                    onChange={(e) => setConfirmChecked(e.target.checked)} 
                  />
                }
                label="I confirm that this campaign is ready to send"
              />
            </Box>
            
            <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
              <Button onClick={handleBack}>
                Back
              </Button>
              
              <Button 
                variant="contained" 
                color="primary"
                startIcon={deliveryOption === 'send_now' ? <SendIcon /> : <ScheduleIcon />}
                onClick={handleSendCampaign}
                disabled={!confirmChecked || sendCampaign.isLoading || scheduleCampaign.isLoading || (deliveryOption === 'schedule' && isDateInPast())}
              >
                {sendCampaign.isLoading || scheduleCampaign.isLoading ? (
                  <CircularProgress size={24} />
                ) : (
                  deliveryOption === 'send_now' ? 'Send Campaign' : 'Schedule Campaign'
                )}
              </Button>
            </Box>
            
            {(sendCampaign.error || scheduleCampaign.error) && (
              <Alert severity="error" sx={{ mt: 3 }}>
                {sendCampaign.error?.message || scheduleCampaign.error?.message || 'An error occurred'}
              </Alert>
            )}
          </Paper>
        )}
      </Box>
      
      {/* Preview Dialog */}
      <Dialog
        open={previewDialogOpen}
        onClose={() => setPreviewDialogOpen(false)}
        maxWidth="md"
        fullWidth
      >
        <DialogTitle>Campaign Preview</DialogTitle>
        <DialogContent>
          <Box sx={{ mb: 3 }}>
            <Typography variant="subtitle2" gutterBottom>Subject:</Typography>
            <Typography variant="body1">{campaign.subject}</Typography>
            
            {campaign.preheader && (
              <>
                <Typography variant="subtitle2" gutterBottom sx={{ mt: 2 }}>Preheader:</Typography>
                <Typography variant="body1">{campaign.preheader}</Typography>
              </>
            )}
            
            <Divider sx={{ my: 2 }} />
            
            <Typography variant="subtitle2" gutterBottom>Email Content:</Typography>
            <Box 
              sx={{ 
                border: '1px solid', 
                borderColor: 'divider', 
                p: 2, 
                maxHeight: '60vh', 
                overflow: 'auto',
                bgcolor: 'background.paper'
              }}
            >
              <Box dangerouslySetInnerHTML={{ __html: campaign.content }} />
            </Box>
          </Box>
        </DialogContent>
        <DialogActions>
          <Button onClick={() => setPreviewDialogOpen(false)}>Close</Button>
        </DialogActions>
      </Dialog>
    </Box>
  );
};

export default CampaignSendPage;