/**
 * Background Image Control Component
 * WordPress Gutenberg-style background image control with media upload,
 * focal point picker, and fixed background toggle
 *
 * Follows WordPress patterns from:
 * packages/block-editor/src/hooks/background.js
 * packages/block-editor/src/components/background-image-control/index.js
 */

import React, { useState, useRef } from "react";
// @ts-ignore - WordPress i18n package
import { __ } from "@wordpress/i18n";
// @ts-ignore - WordPress i18n package
import { sprintf } from "@wordpress/i18n";
import { useDispatch, useSelect } from "@wordpress/data";
import {
  useBlockEditContext,
  store as blockEditorStore,
} from "@wordpress/block-editor";
import {
  Button,
  FocalPointPicker,
  ToggleControl,
  DropZone,
  Spinner,
  VisuallyHidden,
  Dropdown,
  __experimentalVStack as VStack,
} from "@wordpress/components";
import { reset as resetIcon } from "@wordpress/icons";
import { isBlobURL } from "@wordpress/blob";
import { store as noticesStore } from "@wordpress/notices";
import { focus } from "@wordpress/dom";
import { getFilename } from "@wordpress/url";
import type { BackgroundImageControlProps } from "./types";

interface FocalPoint {
  x: number;
  y: number;
}

interface MediaObject {
  id?: number;
  url: string;
  alt?: string;
  media_type?: string;
  type?: string;
}

// MediaReplaceFlow component - access from global wp object
const MediaReplaceFlow =
  (window as any).wp.blockEditor?.MediaReplaceFlow || (() => null);

// Default values matching WordPress BACKGROUND_BLOCK_DEFAULT_VALUES

/**
 * Focuses the toggle button for accessibility after modal/dropdown closes
 * Uses requestAnimationFrame to ensure DOM updates are complete
 */
const focusToggleButton = (containerRef: React.RefObject<HTMLDivElement>) => {
  window.requestAnimationFrame(() => {
    if (containerRef.current) {
      const [toggleButton] = focus.tabbable.find(containerRef.current);
      toggleButton?.focus();
    }
  });
};

/**
 * Background Image Control Component
 * Provides media upload, focal point picker, and fixed background toggle
 * following WordPress Gutenberg patterns from the Cover block
 */
const BackgroundImageControl: React.FC<BackgroundImageControlProps> = ({
  label = __("Background Image", "sliderberg"),
}) => {
  const { clientId } = useBlockEditContext();
  const { updateBlockAttributes } = useDispatch("core/block-editor") as any;
  const { createErrorNotice } = useDispatch(noticesStore) as any;

  // State for upload tracking and UI feedback
  const [isUploading, setIsUploading] = useState(false);
  const containerRef = useRef<HTMLDivElement>(null);

  // Popover props for consistent positioning
  const BACKGROUND_POPOVER_PROPS = {
    placement: "left-start" as const,
    offset: 36,
    shift: true,
  };

  const { backgroundImage, focalPoint, isFixed, mediaUpload } = useSelect(
    (select: any) => {
      const blockEditor = select(blockEditorStore);
      const attributes = blockEditor.getBlockAttributes(clientId) as Record<
        string,
        any
      >;
      const settings = blockEditor.getSettings();
      return {
        backgroundImage: attributes.backgroundImage as MediaObject | null,
        focalPoint: attributes.focalPoint as FocalPoint,
        isFixed: attributes.isFixed as boolean,
        mediaUpload: settings.mediaUpload,
      };
    },
    [clientId],
  ) as {
    backgroundImage: MediaObject | null;
    focalPoint: FocalPoint;
    isFixed: boolean;
    mediaUpload: any;
  };

  const setAttributes = (newAttributes: Record<string, any>) =>
    updateBlockAttributes(clientId, newAttributes);

  /**
   * Handle upload errors with WordPress-native error notices
   */
  const onUploadError = (message: string) => {
    createErrorNotice(message, { type: "snackbar" });
    setIsUploading(false);
  };

  /**
   * Handle media selection from media library
   * Validates file types, handles blob URLs, and sets default position
   */
  const onSelectMedia = (media: MediaObject) => {
    if (!media || !media.url) {
      onRemoveImage();
      setIsUploading(false);
      return;
    }

    // Check if upload is still in progress (blob URL)
    if (isBlobURL(media.url)) {
      setIsUploading(true);
      return;
    }

    // Validate file type - only allow images
    const mediaType = (media as any).media_type || (media as any).type;
    if (mediaType && mediaType !== "image") {
      onUploadError(
        __("Only images can be used as a background image.", "sliderberg"),
      );
      return;
    }

    setAttributes({
      backgroundImage: {
        id: media.id,
        url: media.url,
        alt: media.alt || "",
      },
      // Set default position '50% 0' to increase chance focus point is visible
      focalPoint: focalPoint || { x: 0.5, y: 0 },
    });

    setIsUploading(false);
    // Return focus to toggle button after selection
    focusToggleButton(containerRef);
  };

  /**
   * Clear/remove background image
   */
  const onRemoveImage = () => {
    setAttributes({
      backgroundImage: null,
      focalPoint: { x: 0.5, y: 0.5 },
      isFixed: false,
    });
    // Return focus to toggle button after removal
    focusToggleButton(containerRef);
  };

  /**
   * Handle drag-and-drop file uploads
   * Restricts to single image file
   */
  const onFilesDrop = (filesList: File[]) => {
    if (!mediaUpload) {
      return;
    }

    mediaUpload({
      allowedTypes: ["image"],
      filesList,
      onFileChange([image]: MediaObject[]) {
        onSelectMedia(image);
      },
      onError: onUploadError,
      multiple: false,
    });
  };

  /**
   * Update focal point - converts picker coords to CSS background-position
   */
  const onChangeFocalPoint = (newFocalPoint: FocalPoint) => {
    setAttributes({
      focalPoint: newFocalPoint,
    });
  };

  /**
   * Toggle fixed background
   */
  const onToggleFixed = (value: boolean) => {
    setAttributes({ isFixed: value });
  };

  const imageLabel =
    backgroundImage?.alt || getFilename(backgroundImage?.url || "") || label;

  return (
    <div
      ref={containerRef}
      className="sliderberg-background-image-control"
      style={{ position: "relative" }}
    >
      {isUploading && (
        <div
          style={{
            position: "absolute",
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            backgroundColor: "rgba(255, 255, 255, 0.8)",
            zIndex: 1,
            borderRadius: "2px",
          }}
        >
          <Spinner />
        </div>
      )}

      {!backgroundImage ? (
        <>
          <MediaReplaceFlow
            mediaId={undefined}
            mediaURL={undefined}
            allowedTypes={["image"]}
            accept="image/*"
            onSelect={onSelectMedia}
            onError={onUploadError}
            name={label}
            renderToggle={(props: any) => (
              <Button
                {...props}
                __next40pxDefaultSize
                variant="secondary"
                style={{
                  width: "100%",
                  justifyContent: "center",
                  height: "40px",
                }}
              >
                {isUploading ? <Spinner /> : props.children}
              </Button>
            )}
          />
          <DropZone
            onFilesDrop={onFilesDrop}
            label={__("Drop to upload", "sliderberg")}
          />
        </>
      ) : (
        <div
          style={{
            border: "1px solid #ddd",
            borderRadius: "2px",
            position: "relative",
          }}
        >
          <Dropdown
            popoverProps={BACKGROUND_POPOVER_PROPS}
            renderToggle={({ onToggle, isOpen }) => (
              <>
                <button
                  type="button"
                  onClick={onToggle}
                  aria-expanded={isOpen}
                  aria-label={__("Background image options", "sliderberg")}
                  style={{
                    width: "100%",
                    display: "flex",
                    alignItems: "center",
                    padding: "12px",
                    background: isOpen ? "#f0f0f0" : "#fff",
                    border: "none",
                    cursor: "pointer",
                    transition: "background 0.1s ease",
                    gap: "12px",
                  }}
                  onMouseEnter={(e) => {
                    if (!isOpen) {
                      e.currentTarget.style.background = "#f9f9f9";
                    }
                  }}
                  onMouseLeave={(e) => {
                    if (!isOpen) {
                      e.currentTarget.style.background = "#fff";
                    }
                  }}
                >
                  <div
                    style={{
                      width: "32px",
                      height: "32px",
                      borderRadius: "50%",
                      overflow: "hidden",
                      flexShrink: 0,
                      backgroundImage: `url(${backgroundImage.url})`,
                      backgroundSize: "cover",
                      backgroundPosition: `${(focalPoint?.x || 0.5) * 100}% ${
                        (focalPoint?.y || 0.5) * 100
                      }%`,
                      border: "1px solid #ddd",
                    }}
                  />
                  <span
                    style={{
                      flex: 1,
                      textAlign: "left",
                      color: "#2271b1",
                      fontSize: "13px",
                      overflow: "hidden",
                    }}
                  >
                    {imageLabel}
                  </span>
                </button>
                <Button
                  __next40pxDefaultSize
                  label={__("Reset", "sliderberg")}
                  icon={resetIcon}
                  size="small"
                  onClick={() => {
                    onRemoveImage();
                    focusToggleButton(containerRef);
                  }}
                  style={{
                    position: "absolute",
                    top: "8px",
                    right: "8px",
                    minWidth: "auto",
                    padding: "4px",
                    zIndex: 1,
                  }}
                />
              </>
            )}
            renderContent={() => (
              <div
                style={{
                  padding: "16px",
                  minWidth: "320px",
                  maxWidth: "400px",
                }}
              >
                <VStack spacing={5}>
                  <div>
                    <div
                      style={{
                        fontSize: "11px",
                        fontWeight: 500,
                        textTransform: "uppercase",
                        color: "#1e1e1e",
                        marginBottom: "8px",
                        letterSpacing: "0.4px",
                      }}
                    >
                      {__("Focal Point", "sliderberg")}
                    </div>
                    <FocalPointPicker
                      url={backgroundImage.url}
                      value={focalPoint || { x: 0.5, y: 0.5 }}
                      onChange={onChangeFocalPoint}
                    />
                  </div>
                  <ToggleControl
                    label={__("Fixed background", "sliderberg")}
                    checked={isFixed}
                    onChange={onToggleFixed}
                  />
                </VStack>
              </div>
            )}
          />
          <DropZone
            onFilesDrop={onFilesDrop}
            label={__("Drop to upload", "sliderberg")}
          />
        </div>
      )}

      <VisuallyHidden as="span">
        {backgroundImage
          ? sprintf(__("Background image: %s", "sliderberg"), imageLabel)
          : __("No background image selected", "sliderberg")}
      </VisuallyHidden>
    </div>
  );
};

export default BackgroundImageControl;