import React, { useCallback, useEffect, useState } from 'react'
import {
  CreditCardOutlined,
  EditOutlined,
  MailOutlined,
} from '@ant-design/icons'
import { Api, Model } from '@web/domain'
import { PageLayout } from '@web/layouts/Page.layout'
import { useAuthentication } from '@web/modules/authentication'
import {
  Button,
  Card,
  Col,
  DatePicker,
  Form,
  Input,
  Row,
  Select,
  Space,
  Typography,
} from 'antd'
import dayjs from 'dayjs'
import { useParams, useRouter } from 'next/navigation'
import { useSnackbar } from 'notistack'
import { calculateCost } from '../utils/calculateCost'
import { fetchBookingData } from '../utils/fetchData'
import { getGeolocation } from '../utils/geolocation'
import { validateBookingData } from '../utils/bookingUtils'
import { BookingService } from '../services/booking.service'
import { CreateBookingDto } from '../dto/create-booking.dto'
import { useHttpQuery } from '@web/core/http/http.query.hook'
import { useHttpAction } from '@web/core/http/http.action.hook'
import { useAuthenticationToken } from '@web/domain/authentication/hooks/authentication.token.hook'
import { useAuthorization } from '@web/domain/authorization/authorization.hook'
import {
  sendUserNotification,
  sendDriverNotification,
} from '../utils/notifications'
import { useSocket } from '@web/core/socket'

const BookingConfirmationPage = () => {
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [errorMessage, setErrorMessage] = useState('')
  const [booking, setBooking] = useState<any>(null)
  const [isEditing, setIsEditing] = useState(false)
  const { params } = useParams()
  const router = useRouter()
  const { enqueueSnackbar } = useSnackbar()
  const { userId } = useAuthenticationToken()
  const socket = useSocket()

  const form = Form.useForm()[0]

  useEffect(() => {
    if (!params.bookingId) return

    const fetchBooking = async () => {
      try {
        const bookingData = await fetchBookingData(params.bookingId)
        setBooking(bookingData)
        form.setFieldsValue({
          serviceType: bookingData.serviceType,
          name: bookingData.name,
          email: bookingData.email,
          phone: bookingData.phone,
          vehicleBrand: bookingData.vehicleBrand,
          vehicleModel: bookingData.vehicleModel,
          dateTime: dayjs(bookingData.dateTime),
          distance: bookingData.distance,
        })
        setIsEditing(true)
      } catch (error) {
        enqueueSnackbar('Failed to fetch booking details', {
          variant: 'error',
        })
        throw error
      }
    }

    fetchBooking()
  }, [params.bookingId, form, enqueueSnackbar])

  const handleEmailSend = async () => {
    try {
      await sendUserNotification(userId, {
        title: 'Booking Confirmation',
        message: `Your booking details: ${JSON.stringify(booking, null, 2)}`,
        userId: userId,
      })
      enqueueSnackbar('Booking details sent via email', { variant: 'success' })
    } catch (error) {
      enqueueSnackbar('Failed to send booking details via email', {
        variant: 'error',
      })
      throw error
    }
  }

  const handleEdit = async (values: any) => {
    try {
      const bookingService = new BookingService()
      const updatedBooking = await bookingService.updateBooking(
        params.bookingId,
        {
          ...values,
          dateTime: values.dateTime.toISOString(),
        }
      )
      setBooking(updatedBooking)
      setIsEditing(false)
      enqueueSnackbar('Booking details updated successfully', {
        variant: 'success',
      })
      socket.emit('bookingUpdated', updatedBooking)
    } catch (error) {
      enqueueSnackbar('Failed to update booking details', { variant: 'error' })
      throw error
    }
  }

  return (
    <PageLayout>
      <div>
        <h1>Booking Confirmation</h1>
        <p>Your booking details have been confirmed.</p>
      </div>
      {isEditing && (
        <Form
          form={form}
          onFinish={handleEdit}
          layout="vertical"
          initialValues={booking}
        >
          <Form.Item
            label="Service Type"
            name="serviceType"
            rules={[{ required: true, message: 'Please select service type' }]}
          >
            <Select
              placeholder="Select service type"
              options={Model.ServiceTypes.map((serviceType) => ({
                label: serviceType,
                value: serviceType,
              }))}
            />
          </Form.Item>
        </Form>
      )}
    </PageLayout>
  )
}

export default BookingConfirmationPage
any error or no sense in the code ?