import React, { useState, useEffect } from "react";
import { Calendar, momentLocalizer } from "react-big-calendar";
import withDragAndDrop from "react-big-calendar/lib/addons/dragAndDrop";
import moment from "moment";
import "react-big-calendar/lib/css/react-big-calendar.css";
import "react-big-calendar/lib/addons/dragAndDrop/styles.css";
import { Button, Modal, Form, Input, Select, DatePicker, TimePicker, Checkbox, message, Row, Col } from "antd";

const { Option } = Select;
const localizer = momentLocalizer(moment);
const DragAndDropCalendar = withDragAndDrop(Calendar);

const MyCalendar = () => {
  const [doctors, setDoctors] = useState([]);
  const [selectedDoctor, setSelectedDoctor] = useState(null);
  const [customers, setCustomers] = useState([]);
  const [events, setEvents] = useState([]);
  const [newEventModalVisible, setNewEventModalVisible] = useState(false);
  const [selectedCustomer, setSelectedCustomer] = useState(null);

  // Fetch doctors from API
  const fetchDoctors = async () => {
    try {
      const response = await fetch("http://localhost:5151/v1/booking/getservices?pk=LSnlYqdIusc=");
      const data = await response.json();
      setDoctors(data.map((item) => ({
        id: item.id,
        title: item.title,
      })));
    } catch (error) {
      console.error("Error fetching doctors:", error);
    }
  };

  // Fetch customers (can be replaced with an actual API call)
  const fetchCustomers = async () => {
    // Mocked customers data
    setCustomers([
      { id: "1", name: "John Doe", email: "john1234@gmail.com", phone: "123-456-7890" },
      { id: "2", name: "Jane Doe", email: "jane1234@gmail.com", phone: "234-567-8901" },
    ]);
  };

  // Fetch events for the selected doctor
  const fetchEvents = async (doctorId) => {
    try {
      const response = await fetch(`http://localhost:5151/v1/booking/fetchBookingByService?pk=b0NlyFx7Cz0=&title=${doctorId}`);
      const data = await response.json();
      setEvents(data.map((event) => ({
        pk: event.pk,
        title: event.title || "No Title",
        start: new Date(event.bookedFrom),
        end: new Date(event.bookedTo),
        doctorId,
        customer: customers[Math.floor(Math.random() * customers.length)],
      })));
    } catch (error) {
      console.error("Error fetching events:", error);
    }
  };

  // Fetch data on initial load
  useEffect(() => {
    fetchDoctors();
    fetchCustomers();
  }, []);

  // Fetch events when a doctor is selected
  useEffect(() => {
    if (selectedDoctor) {
      fetchEvents(selectedDoctor);
    }
  }, [selectedDoctor, customers]); // Ensures fetchEvents is called when customers or selectedDoctor change

  // Handle doctor selection
  const handleDoctorChange = (value) => {
    setSelectedDoctor(value);
  };

  // Handle drag-and-drop event updates
  const onEventDrop = ({ event, start, end }) => {
    try {
      const updatedEvent = { ...event, start: new Date(start), end: new Date(end) };
      const updatedEvents = events.map((e) => (e.pk === event.pk ? updatedEvent : e));
      setEvents(updatedEvents);
      message.success("Event updated successfully!");
    } catch (error) {
      console.error("Error in onEventDrop:", error);
      message.error("Failed to update the event.");
    }
  };

  // Handle new event creation
  const handleNewEvent = (formData) => {
    try {
      const reminders = Array.from(document.querySelectorAll('input[name="reminder"]:checked')).map(
        (checkbox) => checkbox.value
      );
      const newEvent = {
        pk: (events.length + 1).toString(),
        title: formData.title,
        start: new Date(formData.date.format("YYYY-MM-DD") + "T" + formData.timeSlot[0].format("HH:mm:ss")),
        end: new Date(formData.date.format("YYYY-MM-DD") + "T" + formData.timeSlot[1].format("HH:mm:ss")),
        doctorId: selectedDoctor,
        customer: selectedCustomer,
        reminders,
      };

      setEvents([...events, newEvent]);
      message.success("New event created successfully!");
      setNewEventModalVisible(false);
    } catch (error) {
      console.error("Error creating new event:", error);
      message.error("Failed to create new event.");
    }
  };

  const openNewEventModal = () => setNewEventModalVisible(true);
  const closeNewEventModal = () => setNewEventModalVisible(false);

  return (
    <div style={{ backgroundColor: "#f9f9f9", minHeight: "100vh", padding: "0" }}>
      <Row gutter={[16, 16]} style={{ margin: "20px", alignItems: "center" }}>
        <Col xs={24} sm={12} md={8}>
          <Select
            value={selectedDoctor}
            onChange={handleDoctorChange}
            style={{ width: 200 }}
            placeholder="Select Doctor"
          >
            {doctors.map((doctor) => (
              <Option key={doctor.id} value={doctor.title}>
                {doctor.title}
              </Option>
            ))}
          </Select>
        </Col>
        <Col xs={24} sm={12} md={8}>
          <Button type="primary" block onClick={openNewEventModal}>
            Add New Event
          </Button>
        </Col>
        <Col xs={24} sm={12} md={8}>
          <Button type="primary" block>
            Customer
          </Button>
        </Col>
      </Row>

      <div
        style={{
          background: "#fff",
          borderRadius: "8px",
          boxShadow: "0 4px 10px rgba(0, 0, 0, 0.1)",
          margin: "20px",
          padding: "15px",
        }}
      >
        <DragAndDropCalendar
          localizer={localizer}
          events={events.filter((e) => e.doctorId === selectedDoctor)}
          onEventDrop={onEventDrop}
          selectable
          resizable
          style={{
            height: "calc(200vh - 400px)",
            borderRadius: "8px",
          }}
          defaultView="week"
        />
      </div>

      <Modal
        visible={newEventModalVisible}
        onCancel={closeNewEventModal}
        footer={null}
        title="Create New Event"
      >
        <Form onFinish={handleNewEvent} layout="vertical">
          <Form.Item name="title" label="Event Title" rules={[{ required: true }]}>
            <Input placeholder="Enter event title" />
          </Form.Item>
          <Form.Item name="customer" label="Select Customer" rules={[{ required: true }]}>
            <Select
              onChange={(value) =>
                setSelectedCustomer(customers.find((customer) => customer.id === value))
              }
              placeholder="Select a customer"
            >
              {customers.map((customer) => (
                <Option key={customer.id} value={customer.id}>
                  {customer.name}
                </Option>
              ))}
            </Select>
          </Form.Item>
          <Form.Item name="date" label="Date" rules={[{ required: true }]}>
            <DatePicker style={{ width: "100%" }} />
          </Form.Item>
          <Form.Item name="timeSlot" label="Time Slot" rules={[{ required: true }]}>
            <TimePicker.RangePicker style={{ width: "100%" }} format="HH:mm" />
          </Form.Item>
          <Form.Item name="reminder" label="Reminder">
            <Checkbox.Group>
              <Checkbox value="SMS">SMS</Checkbox>
              <Checkbox value="Email">Email</Checkbox>
            </Checkbox.Group>
          </Form.Item>
          <Button type="primary" htmlType="submit" block>
            Submit
          </Button>
        </Form>
      </Modal>
    </div>
  );
};

export default MyCalendar;