import React, { useState } from "react";
import { Modal } from "antd";
import Cookies from "js-cookie";
import axios from "axios";
import toast, { Toaster } from "react-hot-toast";

export default function Messaging() {
  const [message, setMessage] = useState("");
  const [messageType, setMessageType] = useState("HomePage");
  const [isModalVisible, setIsModalVisible] = useState(false);

  const handleSubmit = (event: React.FormEvent) => {
    event.preventDefault();
    if (message.length > 10) {
      setIsModalVisible(true);
    } else {
      toast.error("Message length must be greater than 10 characters");
    }
  };

  async function sendMessage(message: string) {
    if (!message) return;
  
    const accessToken = Cookies.get("jazz_token");
    if (!accessToken) {
      throw new Error("No access token found");
    }
  
    try {
      await axios.post(
        'https://api.jazzagain.com/node/notification-token/v2/startTask',
        {
          message,
          messageType
        },
        {
          headers: {
            Authorization: `Bearer ${accessToken}`,
          },
        }
      );
      toast.success("Message Sent Successfuly!");
    } catch (error) {
      console.error("Error sending message:", error);
      toast.error("Error sending message");
    }
  }

  const handleConfirm = () => {
    setIsModalVisible(false);
    console.log('sending message:', message);
    sendMessage(message);
    setMessage('');
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };

  return (
    <form onSubmit={handleSubmit}>
      <Toaster
        toastOptions={{
          className: "",
          duration: 4000,
        }}
      />
      <div className="flex flex-col p-4 gap-1">
        <div className="flex flex-col min-w-full ">
          <label className="text-lg">Message:</label>
          <textarea
            value={message}
            onChange={(e) => setMessage(e.target.value)}
            className="border border-gray-400 rounded p-1 focus:outline-0 focus:ring-1 focus:ring-gray-300 w-[600px]"
            style={{ minHeight: "83px" }}
          />
        </div>
        <div>
          <div className="font-semibold text-neutral-800 mt-2">Type:</div>
          <select onChange={(e) => setMessageType(e.target.value)} defaultValue={messageType} className="border border-gray-400 rounded p-1 focus:outline-0 focus:ring-1 focus:ring-gray-300 w-[600px]">
            <option value="HomePage">HomePage</option>
            <option value="Instagram">Instagram</option>
            <option value="Facebook">Facebook</option>
            <option value="SignUp">SignUp</option>
            <option value="SellPage">SellPage</option>
          </select>
        </div>
        <div className="mt-2">
          <input
            type="submit"
            value="Send Message"
            className="rounded bg-red-500 text-white p-2 px-3 cursor-pointer"
          />
        </div>
      </div>

      <Modal
        title="Confirm"
        visible={isModalVisible}
        onCancel={handleCancel}
        footer={null}
      >
        <p>Are you sure you want to send this message?</p>
        <div className="font-semibold text-neutral-800 mt-2">Message:</div>
        <div className="mb-2 text-lg">{message}</div>
        <div className="mt-4 flex justify-end gap-3">
          <input
            type="button"
            value="Cancel"
            onClick={handleCancel}
            className="rounded bg-neutral-300 p-2 px-3 min-w-[90px] cursor-pointer text-lg"
          />
          <input
            type="submit"
            value="Send"
            onClick={handleConfirm}
            className="rounded bg-red-500 text-white min-w-[90px] p-2 px-3 cursor-pointer text-lg"
          />
        </div>
      </Modal>
    </form>
  );
}