import useAppStore from "../store/useAppStore";
import { getImageUrl } from "../util";
export default (editor, options = {}) => {
  const blockManager = editor.BlockManager;

  // Add Bootstrap and Icons when editor loads
  editor.on("load", () => {
    const frameHead = editor.Canvas.getDocument().head;
    // Add Bootstrap CSS
    const bootstrapCSS = document.createElement("link");
    bootstrapCSS.rel = "stylesheet";
    bootstrapCSS.href = "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css";
    frameHead.appendChild(bootstrapCSS);
    // Add Bootstrap Icons
    const iconsCSS = document.createElement("link");
    iconsCSS.rel = "stylesheet";
    iconsCSS.href = "https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css";
    frameHead.appendChild(iconsCSS);
  });

  // Adding custom booking block
  blockManager.add("booking-card-block", {
    label: `
      <div style="display: flex; flex-direction: column; align-items: center; gap: 5px;">
        <i class="bi bi-calendar-check" style="font-size: 2.5rem;"></i>
        <span>Booking Card</span>
      </div>
    `,
    category: { label: "Forms", open: false },
    draggable: false,
    content: {
      type: "booking-card",
      activeOnRender: true,
    },
  });

  editor.Commands.add("open-booking-modal", {
    run(ed) {
      const selected = ed.getSelected();
      if (selected && selected.is("booking-card") && selected.bookingSettingsModal) {
        selected.bookingSettingsModal();
      }
    },
  });

  editor.DomComponents.addType("booking-card", {
    model: {
      defaults: {
        attributes: {
          class: "booking-card-container",
        },
        traits: [
          {
            type: "button",
            label: "Settings",
            text: "Open Settings",
            full: true,
            name: "booking-settings",
            command: "open-booking-modal",
          },
        ],
        script: function () {
          document.addEventListener("DOMContentLoaded", function () {
            const submitBooking = async (event) => {
              event.preventDefault();
              const form = event.target;
              const bookingData = {
                name: form.querySelector("#name").value,
                email: form.querySelector("#email").value,
                persons: form.querySelector("#persons").value,
                date: form.querySelector("#date").value,
                time: form.querySelector("#time").value,
                contact: form.querySelector("#contact").value,
              };

              console.log("Booking Data:", bookingData);
              alert("Booking submitted! Check console for details.");
            };

            const card = document.querySelector('[data-type="booking-card"]');
            const form = card?.querySelector("form");

            if (form) {
              form.addEventListener("submit", submitBooking);
            } else {
              console.error("Booking form not found");
            }
          });
        },
      },
      init() {
        const editor = this.em;
        const component = this;
        let imageUrl = null;
        // Function to extract values from rendered HTML
        const getValuesFromRenderedHTML = function () {
          const bookingEl = component.getEl();
          return {
            title: bookingEl.querySelector(".booking-title")?.textContent || "",
            buttonText: bookingEl.querySelector(".booking-btn")?.textContent || "",
            bgImage: bookingEl.querySelector(".booking-bg-image")?.src || "",
          };
        };

        const openBookingSettingsModal = () => {
          const bookingSettingsModal = editor.Modal;
          bookingSettingsModal.setTitle("Booking Form Settings");

          // Get values from rendered HTML
          const currentValues = getValuesFromRenderedHTML();

          bookingSettingsModal.setContent(`
            <div class="booking-settings-modal psc">
              <style>
                .psc * {
                  box-sizing: border-box;
                  font-family: "Segoe UI", sans-serif;
                }
                
                .booking-settings-modal {
                  width: 100%;
                  background: white;
                  border-radius: 10px;
                  padding: 30px;
                  height: auto;
                  display: flex;
                  flex-direction: column;
                  gap: 20px;
                  animation: fadeIn 0.3s ease-in-out;
                }
                
                .section-sub-title {
                  color: #5a5858;
                  font-weight: 600;
                  font-size: 18px;
                  margin-bottom: 16px;
                  border-bottom: 1px solid #5a5858;
                  padding-bottom: 6px;
                }

                .input-group {
                  display: flex;
                  flex-direction: column;
                  margin-bottom: 16px;
                }

                .input-group label {
                  color: #494848;
                  font-weight: 600;
                  margin-bottom: 6px;
                }

                .input-group input[type="text"] {
                  padding: 8px;
                  border: 1px solid #ccc;
                  border-radius: 6px;
                  font-size: 14px;
                  color: #494848;
                }
                
                .image-options {
                  display: flex;
                  gap: 15px;
                  margin-top: 10px;
                }
                
                .image-option-btn {
                  flex: 1;
                  padding: 10px;
                  border: 1px solid #ddd;
                  border-radius: 6px;
                  background: #f9f9f9;
                  cursor: pointer;
                  text-align: center;
                }
                
                .image-option-btn:hover {
                  background: #f0f0f0;
                }

                @keyframes fadeIn {
                  from {
                    opacity: 0;
                    transform: scale(0.98);
                  }
                  to {
                    opacity: 1;
                    transform: scale(1);
                  }
                }
              </style>

              <div>
                <div class="section-sub-title">Content Settings</div>

                <div class="input-group">
                  <label for="bookingTitleInput">Form Title</label>
                  <input type="text" id="bookingTitleInput" placeholder="Enter form title" value="${
                    currentValues.title || "BOOK YOUR TABLE"
                  }" />
                </div>
                
                <div class="input-group">
                  <label for="bookingBtnText">Button Text</label>
                  <input type="text" id="bookingBtnText" placeholder="Enter button text" value="${
                    currentValues.buttonText || "BOOK TABLE"
                  }" />
                </div>
              </div>

              <div>
                <div class="section-sub-title">Background Image</div>
                
                <div class="image-options">
                  <div class="image-option-btn text-dark" id="browseImageBtn">
                    <i class="bi bi-folder2-open"></i> Browse
                  </div>
                  <div class="image-option-btn text-dark" id="chooseAssetBtn">
                    <i class="bi bi-image"></i> Choose from Assets
                  </div>
                </div>
              </div>

              <div class="w-100">
                <button id="bookingSave" class="btn btn-primary w-100">Save settings</button>
              </div>
            </div>
          `);

          bookingSettingsModal.open();

          // Add event listeners for image selection
          const browseImageBtn = bookingSettingsModal.getContentEl().querySelector("#browseImageBtn");
          const chooseAssetBtn = bookingSettingsModal.getContentEl().querySelector("#chooseAssetBtn");

          chooseAssetBtn.addEventListener("click", () => {
            useAppStore.getState().setIsMultiSelect(false);
            useAppStore.getState().setIsImageAssetsDialogVisible(true);
          });

          browseImageBtn.onclick = () => {
            const input = document.createElement("input");
            input.type = "file";
            input.accept = "image/*";
            input.onchange = async (e) => {
              const file = e.target.files[0];
              if (file) {
                imageUrl = await getImageUrl(file);
              }
            };
            input.click();
          };

          const saveBtn = bookingSettingsModal.getContentEl().querySelector("#bookingSave");

          saveBtn.onclick = () => {
            const modalEl = bookingSettingsModal.getContentEl();
            const titleInput = modalEl.querySelector("#bookingTitleInput");
            const btnTextInput = modalEl.querySelector("#bookingBtnText");

            const values = {
              title: titleInput.value,
              buttonText: btnTextInput.value,
              bgImage: imageUrl || useAppStore.getState().selectedImages[0] || null,
            };

            component.setBookingValues(values);
            bookingSettingsModal.close();
          };
        };

        this.bookingSettingsModal = openBookingSettingsModal;

        const renderBookingForm = () => {
          const dummyValues = {
            title: "BOOK YOUR TABLE",
            buttonText: "BOOK TABLE",
            bgImage:
              "https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80",
          };

          function getBookingComponents(values = dummyValues) {
            return [
              {
                tagName: "div",
                type: "text",
                copyable: false,
                draggable: false,
                removable: false,
                attributes: { class: "booking-card", "data-type": "booking-card" },
                components: [
                  {
                    tagName: "div",
                    attributes: { class: "booking-bg" },
                    components: [
                      {
                        tagName: "img",
                        attributes: {
                          class: "booking-bg-image",
                          src: values.bgImage,
                          alt: "Background",
                        },
                      },
                      {
                        tagName: "div",
                        attributes: { class: "booking-overlay" },
                      },
                    ],
                  },
                  {
                    tagName: "div",
                    attributes: { class: "booking-content" },
                    components: [
                      {
                        tagName: "h2",
                        attributes: { class: "booking-title" },
                        content: values.title,
                      },
                      {
                        tagName: "form",
                        attributes: { class: "booking-form" },
                        components: [
                          {
                            tagName: "div",
                            attributes: { class: "form-group" },
                            components: [
                              {
                                tagName: "label",
                                attributes: { for: "name" },
                                content: "Your Name",
                              },
                              {
                                tagName: "input",
                                attributes: {
                                  type: "text",
                                  id: "name",
                                  required: true,
                                  placeholder: "Your Name",
                                },
                              },
                            ],
                          },
                          {
                            tagName: "div",
                            attributes: { class: "form-group" },
                            components: [
                              {
                                tagName: "label",
                                attributes: { for: "email" },
                                content: "Your Email",
                              },
                              {
                                tagName: "input",
                                attributes: {
                                  type: "email",
                                  id: "email",
                                  required: true,
                                  placeholder: "Your Email",
                                },
                              },
                            ],
                          },
                          {
                            tagName: "div",
                            attributes: { class: "form-group" },
                            components: [
                              {
                                tagName: "label",
                                attributes: { for: "persons" },
                                content: "Total Person",
                              },
                              {
                                tagName: "input",
                                attributes: {
                                  type: "number",
                                  id: "persons",
                                  required: true,
                                  placeholder: "Total Person",
                                  min: "1",
                                },
                              },
                            ],
                          },
                          {
                            tagName: "div",
                            attributes: { class: "form-group" },
                            components: [
                              {
                                tagName: "label",
                                attributes: { for: "date" },
                                content: "Date",
                              },
                              {
                                tagName: "input",
                                attributes: {
                                  type: "date",
                                  id: "date",
                                  required: true,
                                  placeholder: "dd/mm/yyyy",
                                },
                              },
                            ],
                          },
                          {
                            tagName: "div",
                            attributes: { class: "form-group" },
                            components: [
                              {
                                tagName: "label",
                                attributes: { for: "contact" },
                                content: "Contact No.",
                              },
                              {
                                tagName: "input",
                                attributes: {
                                  type: "tel",
                                  id: "contact",
                                  required: true,
                                  placeholder: "Contact No.",
                                },
                              },
                            ],
                          },
                          {
                            tagName: "button",
                            attributes: {
                              type: "submit",
                              class: "booking-btn",
                            },
                            content: values.buttonText,
                          },
                        ],
                      },
                    ],
                  },
                ],
              },
              {
                tagName: "style",
                content: `
                  .booking-card-container {
                    margin: 20px auto;
                    max-width: 500px;
                  }
                  
                  .booking-card {
                    position: relative;
                    width: 100%;
                    border-radius: 10px;
                    overflow: hidden;
                    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
                  }
                  
                  .booking-bg {
                    position: absolute;
                    width: 100%;
                    height:100%;
                    z-index: -1;
                  }
                  
                  .booking-bg-image {
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                  }
                  
                  .booking-overlay {
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    background: rgba(0,0,0,0.5);
                  }
                  
                  .booking-content {
                    padding: 30px;
                    background: transparent;
                    position: relative;
                    z-index: 1;
                  }
                  
                  .booking-title {
                    text-align: center;
                    margin-bottom: 25px;
                   color: #eae8e8;
                    font-size: 1.8rem;
                    font-weight: bold;
                    text-transform: uppercase;
                  }
                  
                  .booking-form {
                    display: flex;
                    flex-direction: column;
                    gap: 15px;
                  }
                  
                  .form-group {
                    display: flex;
                    flex-direction: column;
                    gap: 8px;
                  }
                  
                  .form-group label {
                    font-weight: 600;
                    color: #eae8e8;
                  }
                  
                  .form-group input {
                    padding: 10px 15px;
                    border: 1px solid #ddd;
                    border-radius: 6px;
                    font-size: 1rem;
                    background-color: #eae8e8;
                  }
                  
                  .booking-btn {
                    background: #e63946;
                    color: white;
                    border: none;
                    padding: 10px;
                    font-size: 1rem;
                    font-weight: 600;
                    border-radius: 6px;
                    cursor: pointer;
                    transition: all 0.3s;
                    margin-top: 10px;
                  }
                  
                  .booking-btn:hover {
                    background: #c1121f;
                  }
                  
                  @media (max-width: 768px) {
                    .booking-card {
                      max-width: 100%;
                    }
                    
                    .booking-content {
                      padding: 20px;
                    }
                  }
                `,
              },
            ];
          }

          // Render with dummy values by default
          this.components(getBookingComponents());

          // Method to update with real values after save
          this.setBookingValues = (values) => {
            const currentValues = getValuesFromRenderedHTML();
            console.log("currentValues", currentValues);
            const mergedValues = {
              ...currentValues,
              ...values,
            };
            this.components(getBookingComponents(mergedValues));
          };
        };

        renderBookingForm();
      },
    },
  });
};


add time form field also as i need this for create my booking