import React, { useState, useEffect } from 'react'
import { useRouter } from 'next/router'

// ** MUI Imports
import Box from '@mui/material/Box'
import Grid from '@mui/material/Grid'
import Card from '@mui/material/Card'
import CardContent from '@mui/material/CardContent'
import CardMedia from '@mui/material/CardMedia'
import Typography from '@mui/material/Typography'
import Button from '@mui/material/Button'
import Rating from '@mui/material/Rating'
import Chip from '@mui/material/Chip'
import Divider from '@mui/material/Divider'
import IconButton from '@mui/material/IconButton'
import TextField from '@mui/material/TextField'
import Alert from '@mui/material/Alert'
import Stepper from '@mui/material/Stepper'
import Step from '@mui/material/Step'
import StepLabel from '@mui/material/StepLabel'

// ** Icon Imports
import Icon from 'src/@core/components/icon'

// ** Dummy Data
import { packages } from '../dummyData'

// ** Toast
import toast from 'react-hot-toast'

interface PackageBookingProps {
  id: string
}

const PackageBooking = ({ id }: PackageBookingProps) => {
  const router = useRouter()
  const [packageData, setPackageData] = useState<any>(null)
  const [fullName, setFullName] = useState('')
  const [email, setEmail] = useState('')
  const [phone, setPhone] = useState('')
  const [travelers, setTravelers] = useState(2)
  const [isLoading, setIsLoading] = useState(false)

  useEffect(() => {
    const foundPackage = packages.find(p => p.id === id)
    setPackageData(foundPackage)
  }, [id])

  if (!packageData) return null

  const totalPrice = packageData.price * travelers

  const handleConfirmBooking = () => {
    if (!fullName || !email) {
      toast.error('Please fill in your details')
      return
    }
    
    setIsLoading(true)
    setTimeout(() => {
      toast.success(`Package booked successfully! Total: $${totalPrice}`)
      setIsLoading(false)
      router.push('/travel-booking')
    }, 2000)
  }

  return (
    <Box>
      <Box sx={{ display: 'flex', alignItems: 'center', mb: 4 }}>
        <IconButton onClick={() => router.back()} sx={{ mr: 2 }}>
          <Icon icon='tabler:arrow-left' />
        </IconButton>
        <Typography variant='h5'>Complete Your Package Booking</Typography>
      </Box>

      <Grid container spacing={4}>
        <Grid item xs={12} md={8}>
          <Card sx={{ mb: 4 }}>
            <CardContent>
              <Typography variant='h6' sx={{ mb: 3 }}>Package Details</Typography>
              <Box sx={{ display: 'flex', gap: 3, flexWrap: 'wrap', mb: 3 }}>
                <CardMedia component="img" sx={{ width: 200, height: 150, borderRadius: 2 }} image={packageData.image} alt={packageData.name} />
                <Box>
                  <Typography variant='h5' sx={{ mb: 1 }}>{packageData.name}</Typography>
                  <Rating value={packageData.rating} precision={0.5} readOnly sx={{ mb: 1 }} />
                  <Typography variant='body2' color='text.secondary' sx={{ mb: 0.5 }}>
                    <Icon icon='tabler:map-pin' fontSize={14} style={{ marginRight: 4 }} />
                    {packageData.destination}
                  </Typography>
                  <Typography variant='body2' color='text.secondary'>
                    <Icon icon='tabler:calendar' fontSize={14} style={{ marginRight: 4 }} />
                    {packageData.duration}
                  </Typography>
                </Box>
              </Box>

              <Typography variant='subtitle1' sx={{ fontWeight: 600, mb: 2 }}>What's Included</Typography>
              <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1, mb: 3 }}>
                {packageData.includes.map((item: string) => (
                  <Chip key={item} label={item} size="small" color="success" />
                ))}
              </Box>

              <Typography variant='subtitle1' sx={{ fontWeight: 600, mb: 2 }}>Itinerary</Typography>
              <Stepper orientation="vertical" sx={{ mb: 3 }}>
                {packageData.itinerary.map((item: any) => (
                  <Step key={item.day} active>
                    <StepLabel>
                      <Typography variant='subtitle2' sx={{ fontWeight: 600 }}>Day {item.day}: {item.title}</Typography>
                      <Typography variant='body2' color='text.secondary'>{item.description}</Typography>
                    </StepLabel>
                  </Step>
                ))}
              </Stepper>
            </CardContent>
          </Card>

          <Card>
            <CardContent>
              <Typography variant='h6' sx={{ mb: 3 }}>Traveler Information</Typography>
              <Grid container spacing={3}>
                <Grid item xs={12}>
                  <TextField fullWidth label='Full Name *' value={fullName} onChange={(e) => setFullName(e.target.value)} required />
                </Grid>
                <Grid item xs={12} sm={6}>
                  <TextField fullWidth label='Email *' type='email' value={email} onChange={(e) => setEmail(e.target.value)} required />
                </Grid>
                <Grid item xs={12} sm={6}>
                  <TextField fullWidth label='Phone Number' value={phone} onChange={(e) => setPhone(e.target.value)} />
                </Grid>
                <Grid item xs={12}>
                  <TextField fullWidth type='number' label='Number of Travelers' value={travelers} onChange={(e) => setTravelers(parseInt(e.target.value))} />
                </Grid>
              </Grid>
            </CardContent>
          </Card>
        </Grid>

        <Grid item xs={12} md={4}>
          <Card sx={{ position: 'sticky', top: 20 }}>
            <CardContent>
              <Typography variant='h6' sx={{ mb: 2 }}>Price Summary</Typography>
              
              <Box sx={{ mb: 2 }}>
                <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 1 }}>
                  <Typography variant='body2'>Package Price</Typography>
                  <Typography variant='body2'>${packageData.price}</Typography>
                </Box>
                <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 1 }}>
                  <Typography variant='body2'>x {travelers} traveler(s)</Typography>
                  <Typography variant='body2'>${packageData.price * travelers}</Typography>
                </Box>
              </Box>

              <Divider sx={{ my: 2 }} />

              <Box sx={{ mb: 3 }}>
                <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 1 }}>
                  <Typography variant='body2'>Taxes & Fees</Typography>
                  <Typography variant='body2'>Included</Typography>
                </Box>
                <Divider sx={{ my: 1 }} />
                <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
                  <Typography variant='h6'>Total</Typography>
                  <Typography variant='h6' sx={{ color: 'primary.main', fontWeight: 600 }}>${totalPrice}</Typography>
                </Box>
              </Box>

              <Button
                fullWidth
                variant='contained'
                size='large'
                onClick={handleConfirmBooking}
                disabled={isLoading}
              >
                {isLoading ? 'Processing...' : `Confirm Booking - $${totalPrice}`}
              </Button>

              <Alert severity="info" sx={{ mt: 2 }}>
                Free cancellation up to 7 days before departure
              </Alert>
            </CardContent>
          </Card>
        </Grid>
      </Grid>
    </Box>
  )
}

export default PackageBooking