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 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'

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

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

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

interface CarBookingProps {
  id: string
}

const CarBooking = ({ id }: CarBookingProps) => {
  const router = useRouter()
  const { pickupDate, dropoffDate, pickupLocation } = router.query
  const [car, setCar] = useState<any>(null)
  const [fullName, setFullName] = useState('')
  const [email, setEmail] = useState('')
  const [phone, setPhone] = useState('')
  const [driverAge, setDriverAge] = useState('')
  const [isLoading, setIsLoading] = useState(false)

  useEffect(() => {
    const foundCar = cars.find(c => c.id === id)
    setCar(foundCar)
  }, [id])

  if (!car) return null

  const pickup = pickupDate ? new Date(pickupDate as string) : new Date()
  const dropoff = dropoffDate ? new Date(dropoffDate as string) : new Date(Date.now() + 3 * 24 * 60 * 60 * 1000)
  const days = Math.ceil((dropoff.getTime() - pickup.getTime()) / (1000 * 60 * 60 * 24))
  const totalPrice = car.pricePerDay * days

  const handleConfirmBooking = () => {
    if (!fullName || !email || !driverAge) {
      toast.error('Please fill in all required fields')
      return
    }
    
    setIsLoading(true)
    setTimeout(() => {
      toast.success(`Car 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 Car Rental</Typography>
      </Box>

      <Grid container spacing={4}>
        <Grid item xs={12} md={8}>
          <Card sx={{ mb: 4 }}>
            <CardContent>
              <Typography variant='h6' sx={{ mb: 3 }}>Car Details</Typography>
              <Box sx={{ display: 'flex', gap: 3, flexWrap: 'wrap' }}>
                <CardMedia component="img" sx={{ width: 200, height: 150, borderRadius: 2 }} image={car.image} alt={car.name} />
                <Box>
                  <Typography variant='h5' sx={{ mb: 1 }}>{car.name}</Typography>
                  <Box sx={{ display: 'flex', gap: 1, mb: 1, flexWrap: 'wrap' }}>
                    <Chip label={car.type} size="small" color="primary" />
                    <Chip label={`${car.seats} seats`} size="small" />
                    <Chip label={car.transmission} size="small" />
                    <Chip label={car.fuelType} size="small" />
                  </Box>
                  <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1 }}>
                    {car.features.map((feature: string) => (
                      <Chip key={feature} label={feature} size="small" variant="outlined" />
                    ))}
                  </Box>
                </Box>
              </Box>
            </CardContent>
          </Card>

          <Card>
            <CardContent>
              <Typography variant='h6' sx={{ mb: 3 }}>Driver 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="Driver's Age *" value={driverAge} onChange={(e) => setDriverAge(e.target.value)} required />
                </Grid>
              </Grid>
            </CardContent>
          </Card>
        </Grid>

        <Grid item xs={12} md={4}>
          <Card sx={{ position: 'sticky', top: 20 }}>
            <CardContent>
              <Typography variant='h6' sx={{ mb: 2 }}>Rental Summary</Typography>
              
              <Box sx={{ mb: 2 }}>
                <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 1 }}>
                  <Typography variant='body2' color='text.secondary'>Pickup Location</Typography>
                  <Typography variant='body2'>{pickupLocation || 'Same as dropoff'}</Typography>
                </Box>
                <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 1 }}>
                  <Typography variant='body2' color='text.secondary'>Pickup Date</Typography>
                  <Typography variant='body2'>{pickup.toLocaleDateString()}</Typography>
                </Box>
                <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 1 }}>
                  <Typography variant='body2' color='text.secondary'>Dropoff Date</Typography>
                  <Typography variant='body2'>{dropoff.toLocaleDateString()}</Typography>
                </Box>
                <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 1 }}>
                  <Typography variant='body2' color='text.secondary'>Duration</Typography>
                  <Typography variant='body2'>{days} days</Typography>
                </Box>
              </Box>

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

              <Box sx={{ mb: 2 }}>
                <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 1 }}>
                  <Typography variant='body2'>${car.pricePerDay} x {days} days</Typography>
                  <Typography variant='body2'>${car.pricePerDay * days}</Typography>
                </Box>
              </Box>

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

              <Box sx={{ mb: 3 }}>
                <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 1 }}>
                  <Typography variant='body2'>Insurance & 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 48 hours before pickup
              </Alert>
            </CardContent>
          </Card>
        </Grid>
      </Grid>
    </Box>
  )
}

export default CarBooking