/**
 * Ticket Tailor Gutenberg Blocks
 * Enhanced with full-width control and dynamic columns
 */
(function (wp) {
  const { registerBlockType } = wp.blocks;
  const { InspectorControls, BlockControls, AlignmentToolbar } = wp.blockEditor;
  const { PanelBody, TextControl, ToggleControl, SelectControl, RangeControl } =
    wp.components;
  const { __ } = wp.i18n;
  const { createElement: el, Fragment } = wp.element;

  // Block 1: Event Widget (Original)
  registerBlockType("ticket-tailor/event-widget", {
    title: __("Ticket Tailor Event Widget", "ticket-tailor"),
    description: __("Embed a Ticket Tailor event widget", "ticket-tailor"),
    icon: "tickets-alt",
    category: "embed",
    keywords: [
      __("ticket", "ticket-tailor"),
      __("event", "ticket-tailor"),
      __("ticketing", "ticket-tailor"),
    ],
    supports: {
      align: ["wide", "full"],
    },
    attributes: {
      url: { type: "string", default: "" },
      minimal: { type: "boolean", default: false },
      bgFill: { type: "boolean", default: true },
      showLogo: { type: "boolean", default: true },
      ref: { type: "string", default: "website_widget" },
    },
    edit: function (props) {
      const { attributes, setAttributes } = props;
      const { url, minimal, bgFill, showLogo, ref } = attributes;

      return el(
        Fragment,
        {},
        el(
          InspectorControls,
          {},
          el(
            PanelBody,
            {
              title: __("Widget Settings", "ticket-tailor"),
              initialOpen: true,
            },
            el(ToggleControl, {
              label: __("Minimal Design", "ticket-tailor"),
              checked: minimal,
              onChange: (value) => setAttributes({ minimal: value }),
            }),
            el(ToggleControl, {
              label: __("Background Fill", "ticket-tailor"),
              checked: bgFill,
              onChange: (value) => setAttributes({ bgFill: value }),
            }),
            el(ToggleControl, {
              label: __("Show Logo", "ticket-tailor"),
              checked: showLogo,
              onChange: (value) => setAttributes({ showLogo: value }),
            }),
            el(TextControl, {
              label: __("Tracking Reference", "ticket-tailor"),
              value: ref,
              onChange: (value) => setAttributes({ ref: value }),
            }),
          ),
        ),
        el(
          "div",
          {
            className: "tt-block-placeholder",
            style: {
              border: "2px dashed #ccc",
              padding: "40px",
              textAlign: "center",
              background: "#f9f9f9",
            },
          },
          el("span", {
            className: "dashicons dashicons-tickets-alt",
            style: { fontSize: "48px", color: "#666" },
          }),
          !url
            ? el(
                "div",
                {},
                el(
                  "p",
                  { style: { marginBottom: "15px" } },
                  __("Ticket Tailor Event Widget", "ticket-tailor"),
                ),
                el(TextControl, {
                  label: __("Event URL", "ticket-tailor"),
                  placeholder: "https://www.tickettailor.com/events/...",
                  value: url,
                  onChange: (value) => setAttributes({ url: value }),
                }),
              )
            : el(
                "div",
                {},
                el("p", {}, __("Widget URL configured", "ticket-tailor")),
                el(
                  "button",
                  {
                    className: "button",
                    onClick: () => setAttributes({ url: "" }),
                  },
                  __("Change URL", "ticket-tailor"),
                ),
              ),
        ),
      );
    },
    save: function () {
      return null;
    },
  });

  // Block 2: Event Listing - ENHANCED WITH FULL WIDTH OPTIONS
  registerBlockType("ticket-tailor/event-listing", {
    title: __("Event Listing", "ticket-tailor"),
    description: __("Display a list of events", "ticket-tailor"),
    icon: "calendar-alt",
    category: "widgets",
    keywords: [
      __("events", "ticket-tailor"),
      __("listing", "ticket-tailor"),
      __("calendar", "ticket-tailor"),
    ],
    supports: {
      align: ["wide", "full"],
      customClassName: true,
    },
    attributes: {
      limit: { type: "number", default: 10 },
      layout: { type: "string", default: "grid" },
      columns: { type: "number", default: 3 },
      columnsMode: { type: "string", default: "fixed" }, // 'fixed' or 'responsive'
      showPast: { type: "boolean", default: false },
      showImage: { type: "boolean", default: true },
      imageType: { type: "string", default: "header" },
      fullWidth: { type: "boolean", default: true },
      maxCardWidth: { type: "string", default: "none" }, // 'none', 'small', 'medium', 'large'
    },
    edit: function (props) {
      const { attributes, setAttributes, className } = props;
      const {
        limit,
        layout,
        columns,
        columnsMode,
        showPast,
        showImage,
        imageType,
        fullWidth,
        maxCardWidth,
      } = attributes;

      return el(
        Fragment,
        {},
        el(
          InspectorControls,
          {},
          el(
            PanelBody,
            {
              title: __("Layout Settings", "ticket-tailor"),
              initialOpen: true,
            },
            el(SelectControl, {
              label: __("Layout", "ticket-tailor"),
              value: layout,
              options: [
                { label: __("Grid", "ticket-tailor"), value: "grid" },
                { label: __("List", "ticket-tailor"), value: "list" },
              ],
              onChange: (value) => setAttributes({ layout: value }),
            }),
            layout === "grid" &&
              el(
                Fragment,
                {},
                el(SelectControl, {
                  label: __("Columns Mode", "ticket-tailor"),
                  value: columnsMode,
                  options: [
                    {
                      label: __("Fixed Columns", "ticket-tailor"),
                      value: "fixed",
                    },
                    {
                      label: __("Responsive (Auto-fit)", "ticket-tailor"),
                      value: "responsive",
                    },
                  ],
                  onChange: (value) => setAttributes({ columnsMode: value }),
                  help: __(
                    "Responsive mode automatically adjusts columns based on available space",
                    "ticket-tailor",
                  ),
                }),
                el(RangeControl, {
                  label:
                    columnsMode === "fixed"
                      ? __("Number of Columns", "ticket-tailor")
                      : __("Maximum Columns", "ticket-tailor"),
                  value: columns,
                  onChange: (value) => setAttributes({ columns: value }),
                  min: 1,
                  max: 5,
                  help:
                    columnsMode === "responsive"
                      ? __(
                          "In responsive mode, columns will adjust automatically but won't exceed this number",
                          "ticket-tailor",
                        )
                      : null,
                }),
                el(SelectControl, {
                  label: __("Maximum Card Width", "ticket-tailor"),
                  value: maxCardWidth,
                  options: [
                    {
                      label: __("No Limit (Full Width)", "ticket-tailor"),
                      value: "none",
                    },
                    {
                      label: __("Small (300px)", "ticket-tailor"),
                      value: "small",
                    },
                    {
                      label: __("Medium (400px)", "ticket-tailor"),
                      value: "medium",
                    },
                    {
                      label: __("Large (500px)", "ticket-tailor"),
                      value: "large",
                    },
                  ],
                  onChange: (value) => setAttributes({ maxCardWidth: value }),
                  help: __(
                    "Set a maximum width for individual event cards",
                    "ticket-tailor",
                  ),
                }),
              ),
            el(ToggleControl, {
              label: __("Full Width Container", "ticket-tailor"),
              checked: fullWidth,
              onChange: (value) => setAttributes({ fullWidth: value }),
              help: __(
                "Make the event listing fill the width of its container",
                "ticket-tailor",
              ),
            }),
          ),
          el(
            PanelBody,
            {
              title: __("Display Settings", "ticket-tailor"),
              initialOpen: false,
            },
            el(RangeControl, {
              label: __("Number of Events", "ticket-tailor"),
              value: limit,
              onChange: (value) => setAttributes({ limit: value }),
              min: 1,
              max: 50,
            }),
            el(ToggleControl, {
              label: __("Show Past Events", "ticket-tailor"),
              checked: showPast,
              onChange: (value) => setAttributes({ showPast: value }),
            }),
            el(ToggleControl, {
              label: __("Show Event Images", "ticket-tailor"),
              checked: showImage,
              onChange: (value) => setAttributes({ showImage: value }),
            }),
            showImage &&
              el(SelectControl, {
                label: __("Image Type", "ticket-tailor"),
                value: imageType,
                options: [
                  {
                    label: __("Thumbnail (Square)", "ticket-tailor"),
                    value: "thumbnail",
                  },
                  {
                    label: __("Banner (16:9)", "ticket-tailor"),
                    value: "header",
                  },
                ],
                onChange: (value) => setAttributes({ imageType: value }),
              }),
          ),
        ),
        el(
          "div",
          {
            className: "tt-block-placeholder",
            style: {
              border: "2px dashed #ccc",
              padding: "40px",
              textAlign: "center",
              background: "#f9f9f9",
              width: fullWidth ? "100%" : "auto",
            },
          },
          el("span", {
            className: "dashicons dashicons-calendar-alt",
            style: { fontSize: "48px", color: "#666" },
          }),
          el(
            "p",
            {
              style: {
                fontSize: "16px",
                fontWeight: "bold",
                marginBottom: "10px",
              },
            },
            __("Event Listing", "ticket-tailor"),
          ),
          el(
            "p",
            { style: { fontSize: "14px", color: "#666" } },
            __("Showing ", "ticket-tailor") +
              limit +
              __(" events", "ticket-tailor"),
          ),
          el(
            "p",
            { style: { fontSize: "13px", color: "#888", marginTop: "10px" } },
            layout === "grid"
              ? columnsMode === "responsive"
                ? __("Responsive grid with max ", "ticket-tailor") +
                  columns +
                  __(" columns", "ticket-tailor")
                : columns + __(" column grid", "ticket-tailor")
              : __("List layout", "ticket-tailor"),
          ),
          fullWidth &&
            el(
              "p",
              {
                style: { fontSize: "12px", color: "#2271b1", marginTop: "5px" },
              },
              __("✓ Full width enabled", "ticket-tailor"),
            ),
        ),
      );
    },
    save: function () {
      return null;
    },
  });

  // Block 3: Single Event - ENHANCED WITH WIDTH OPTIONS
  registerBlockType("ticket-tailor/single-event", {
    title: __("Single Event", "ticket-tailor"),
    description: __("Display a specific event", "ticket-tailor"),
    icon: "megaphone",
    category: "widgets",
    keywords: [
      __("event", "ticket-tailor"),
      __("single", "ticket-tailor"),
      __("detail", "ticket-tailor"),
    ],
    supports: {
      align: ["wide", "full"],
    },
    attributes: {
      eventId: { type: "string", default: "" },
      showDescription: { type: "boolean", default: true },
      showTickets: { type: "boolean", default: true },
      showImage: { type: "boolean", default: true },
      imageType: { type: "string", default: "header" },
      fullWidth: { type: "boolean", default: false },
      maxWidth: { type: "string", default: "800px" },
    },
    edit: function (props) {
      const { attributes, setAttributes } = props;
      const {
        eventId,
        showDescription,
        showTickets,
        showImage,
        imageType,
        fullWidth,
        maxWidth,
      } = attributes;

      const eventOptions =
        window.ticketTailorData && window.ticketTailorData.events
          ? window.ticketTailorData.events
          : [{ value: "", label: __("Loading events...", "ticket-tailor") }];

      return el(
        Fragment,
        {},
        el(
          InspectorControls,
          {},
          el(
            PanelBody,
            { title: __("Event Settings", "ticket-tailor"), initialOpen: true },
            el(SelectControl, {
              label: __("Select Event", "ticket-tailor"),
              value: eventId,
              options: [
                { value: "", label: __("Select an event...", "ticket-tailor") },
              ].concat(eventOptions),
              onChange: (value) => setAttributes({ eventId: value }),
            }),
            el(ToggleControl, {
              label: __("Full Width Display", "ticket-tailor"),
              checked: fullWidth,
              onChange: (value) => setAttributes({ fullWidth: value }),
            }),
            !fullWidth &&
              el(TextControl, {
                label: __("Maximum Width", "ticket-tailor"),
                value: maxWidth,
                onChange: (value) => setAttributes({ maxWidth: value }),
                help: __("e.g. 800px, 100%, 60rem", "ticket-tailor"),
              }),
            el(ToggleControl, {
              label: __("Show Event Image", "ticket-tailor"),
              checked: showImage,
              onChange: (value) => setAttributes({ showImage: value }),
            }),
            showImage &&
              el(SelectControl, {
                label: __("Image Type", "ticket-tailor"),
                value: imageType,
                options: [
                  {
                    label: __("Banner (Wide)", "ticket-tailor"),
                    value: "header",
                  },
                  {
                    label: __("Thumbnail (Square)", "ticket-tailor"),
                    value: "thumbnail",
                  },
                ],
                onChange: (value) => setAttributes({ imageType: value }),
              }),
            el(ToggleControl, {
              label: __("Show Description", "ticket-tailor"),
              checked: showDescription,
              onChange: (value) => setAttributes({ showDescription: value }),
            }),
            el(ToggleControl, {
              label: __("Show Ticket Button", "ticket-tailor"),
              checked: showTickets,
              onChange: (value) => setAttributes({ showTickets: value }),
            }),
          ),
        ),
        el(
          "div",
          {
            className: "tt-block-placeholder",
            style: {
              border: "2px dashed #ccc",
              padding: "40px",
              textAlign: "center",
              background: "#f9f9f9",
            },
          },
          el("span", {
            className: "dashicons dashicons-megaphone",
            style: { fontSize: "48px", color: "#666" },
          }),
          !eventId
            ? el(
                "p",
                {},
                __("Please select an event from the sidebar", "ticket-tailor"),
              )
            : el(
                "div",
                {},
                el("p", {}, __("Single Event Display", "ticket-tailor")),
                el(
                  "p",
                  { style: { fontSize: "14px", color: "#666" } },
                  __("Event ID: ", "ticket-tailor") + eventId,
                ),
                fullWidth &&
                  el(
                    "p",
                    {
                      style: {
                        fontSize: "12px",
                        color: "#2271b1",
                        marginTop: "5px",
                      },
                    },
                    __("✓ Full width enabled", "ticket-tailor"),
                  ),
              ),
        ),
      );
    },
    save: function () {
      return null;
    },
  });

  // Block 4: Category Events - ENHANCED
  registerBlockType("ticket-tailor/category-events", {
    title: __("Category Events", "ticket-tailor"),
    description: __("Display events from a specific category", "ticket-tailor"),
    icon: "category",
    category: "widgets",
    keywords: [
      __("category", "ticket-tailor"),
      __("filter", "ticket-tailor"),
      __("events", "ticket-tailor"),
    ],
    supports: {
      align: ["wide", "full"],
    },
    attributes: {
      category: { type: "string", default: "" },
      limit: { type: "number", default: 10 },
      layout: { type: "string", default: "grid" },
      columns: { type: "number", default: 3 },
      columnsMode: { type: "string", default: "fixed" },
      showImage: { type: "boolean", default: true },
      imageType: { type: "string", default: "thumbnail" },
      fullWidth: { type: "boolean", default: true },
    },
    edit: function (props) {
      const { attributes, setAttributes } = props;
      const {
        category,
        limit,
        layout,
        columns,
        columnsMode,
        showImage,
        imageType,
        fullWidth,
      } = attributes;

      return el(
        Fragment,
        {},
        el(
          InspectorControls,
          {},
          el(
            PanelBody,
            {
              title: __("Category Settings", "ticket-tailor"),
              initialOpen: true,
            },
            el(TextControl, {
              label: __("Category", "ticket-tailor"),
              help: __(
                "Enter the category name (e.g., Music, Sports, Theatre)",
                "ticket-tailor",
              ),
              value: category,
              onChange: (value) => setAttributes({ category: value }),
            }),
            el(RangeControl, {
              label: __("Number of Events", "ticket-tailor"),
              value: limit,
              onChange: (value) => setAttributes({ limit: value }),
              min: 1,
              max: 50,
            }),
            el(SelectControl, {
              label: __("Layout", "ticket-tailor"),
              value: layout,
              options: [
                { label: __("Grid", "ticket-tailor"), value: "grid" },
                { label: __("List", "ticket-tailor"), value: "list" },
              ],
              onChange: (value) => setAttributes({ layout: value }),
            }),
            layout === "grid" &&
              el(
                Fragment,
                {},
                el(SelectControl, {
                  label: __("Columns Mode", "ticket-tailor"),
                  value: columnsMode,
                  options: [
                    {
                      label: __("Fixed Columns", "ticket-tailor"),
                      value: "fixed",
                    },
                    {
                      label: __("Responsive (Auto-fit)", "ticket-tailor"),
                      value: "responsive",
                    },
                  ],
                  onChange: (value) => setAttributes({ columnsMode: value }),
                }),
                el(RangeControl, {
                  label:
                    columnsMode === "fixed"
                      ? __("Columns", "ticket-tailor")
                      : __("Maximum Columns", "ticket-tailor"),
                  value: columns,
                  onChange: (value) => setAttributes({ columns: value }),
                  min: 1,
                  max: 5,
                }),
              ),
            el(ToggleControl, {
              label: __("Full Width Container", "ticket-tailor"),
              checked: fullWidth,
              onChange: (value) => setAttributes({ fullWidth: value }),
            }),
            el(ToggleControl, {
              label: __("Show Event Images", "ticket-tailor"),
              checked: showImage,
              onChange: (value) => setAttributes({ showImage: value }),
            }),
            showImage &&
              el(SelectControl, {
                label: __("Image Type", "ticket-tailor"),
                value: imageType,
                options: [
                  {
                    label: __("Thumbnail (Square)", "ticket-tailor"),
                    value: "thumbnail",
                  },
                  {
                    label: __("Banner (16:9)", "ticket-tailor"),
                    value: "header",
                  },
                ],
                onChange: (value) => setAttributes({ imageType: value }),
              }),
          ),
        ),
        el(
          "div",
          {
            className: "tt-block-placeholder",
            style: {
              border: "2px dashed #ccc",
              padding: "40px",
              textAlign: "center",
              background: "#f9f9f9",
              width: fullWidth ? "100%" : "auto",
            },
          },
          el("span", {
            className: "dashicons dashicons-category",
            style: { fontSize: "48px", color: "#666" },
          }),
          !category
            ? el(
                "div",
                {},
                el(
                  "p",
                  { style: { marginBottom: "15px" } },
                  __("Category Events Display", "ticket-tailor"),
                ),
                el(
                  "p",
                  { style: { fontSize: "14px", color: "#666" } },
                  __(
                    "Enter a category name in the sidebar to display filtered events",
                    "ticket-tailor",
                  ),
                ),
              )
            : el(
                "div",
                {},
                el(
                  "p",
                  { style: { marginBottom: "10px", fontWeight: "bold" } },
                  __("Category Events: ", "ticket-tailor") + category,
                ),
                el(
                  "p",
                  { style: { fontSize: "14px", color: "#666" } },
                  __("Showing ", "ticket-tailor") +
                    limit +
                    __(" events", "ticket-tailor"),
                ),
                fullWidth &&
                  el(
                    "p",
                    {
                      style: {
                        fontSize: "12px",
                        color: "#2271b1",
                        marginTop: "5px",
                      },
                    },
                    __("✓ Full width enabled", "ticket-tailor"),
                  ),
              ),
        ),
      );
    },
    save: function () {
      return null;
    },
  });
})(window.wp);