// ─────────────────────────────────────────────────────────────────────────────
// Ultra Image Cropper 2.0 — Modal Overlay (5-zone layout)
// Header | ToolSidebar | CanvasArea | OptionsPanel | Footer
// ─────────────────────────────────────────────────────────────────────────────

import React, { useEffect, useRef } from 'react';
import type { UltraContext, ToolId, UILocale, UploadSuccessResult } from '@/types';
import { HeaderBar } from './HeaderBar';
import { ToolSidebar } from './ToolSidebar';
import { CanvasArea } from './CanvasArea';
import { OptionsPanel } from './OptionsPanel';
import { FooterBar } from './FooterBar';
import { useCanvasStore, useToastStore } from '@/store';

interface ModalOverlayProps {
  context: UltraContext;
  tools: ToolId[];
  canUseAI: boolean;
  watermark: boolean;
  watermarkPreset: string;
  uploadEndpoint?: string;
  onUploadSuccess?: (result: UploadSuccessResult) => void;
  onCancel?: () => void;
  onError?: (error: Error) => void;
  locale: UILocale;
  minWidth: number;
}

export const ModalOverlay: React.FC<ModalOverlayProps> = ({
  context,
  tools,
  canUseAI,
  watermark,
  watermarkPreset,
  uploadEndpoint,
  onUploadSuccess,
  onCancel,
  onError,
  locale,
  minWidth,
}) => {
  const overlayRef = useRef<HTMLDivElement>(null);
  const { sourceFile, isLoading, loadingMessage, outputFormat, quality, closeModal } = useCanvasStore();
  const { addToast } = useToastStore();

  // ── Keyboard shortcuts ────────────────────────────────────────────────────────
  useEffect(() => {
    const handleKey = (e: KeyboardEvent) => {
      if (e.key === 'Escape') {
        onCancel?.();
        closeModal();
      }
    };
    document.addEventListener('keydown', handleKey);
    return () => document.removeEventListener('keydown', handleKey);
  }, [onCancel, closeModal]);

  // ── Focus trap ────────────────────────────────────────────────────────────────
  useEffect(() => {
    overlayRef.current?.focus();
  }, []);

  // ── Body scroll lock ──────────────────────────────────────────────────────────
  useEffect(() => {
    const prev = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    return () => { document.body.style.overflow = prev; };
  }, []);

  // ── Upload handler ────────────────────────────────────────────────────────────
  const handleApplyAndUpload = async () => {
    if (!uploadEndpoint && !onUploadSuccess) {
      addToast('No upload endpoint configured. Use onUploadSuccess to handle the image.', 'warning');
      return;
    }

    useCanvasStore.getState().setLoading(true, 'Uploading image…');

    try {
      // The actual export is done in FooterBar via the engine
      // This is a stub — CanvasArea handles the actual export call
    } catch (err: unknown) {
      const error = err instanceof Error ? err : new Error('Upload failed');
      addToast(error.message, 'error');
      onError?.(error);
    } finally {
      useCanvasStore.getState().setLoading(false);
    }
  };

  return (
    <div
      className="ultra-modal-overlay"
      role="dialog"
      aria-modal="true"
      aria-label="Ultra Image Cropper 2.0 Editor"
      ref={overlayRef}
      tabIndex={-1}
    >
      <div className="ultra-modal-container">
        {/* Top: Header Bar */}
        <HeaderBar
          fileName={sourceFile?.name ?? 'image'}
          locale={locale}
          onClose={() => { onCancel?.(); closeModal(); }}
        />

        {/* Middle: 3-column layout */}
        <div className="ultra-modal-body">
          {/* Left: Tool Sidebar */}
          <ToolSidebar
            tools={tools}
            canUseAI={canUseAI}
            locale={locale}
          />

          {/* Centre: Canvas */}
          <CanvasArea
            context={context}
            minWidth={minWidth}
          />

          {/* Right: Options Panel */}
          <OptionsPanel
            tools={tools}
            canUseAI={canUseAI}
            locale={locale}
          />
        </div>

        {/* Bottom: Footer Bar */}
        <FooterBar
          uploadEndpoint={uploadEndpoint}
          watermark={watermark}
          watermarkPreset={watermarkPreset}
          onUploadSuccess={onUploadSuccess}
          onCancel={() => { onCancel?.(); closeModal(); }}
          onError={onError}
          locale={locale}
          minWidth={minWidth}
        />
      </div>

      {/* Loading overlay */}
      {isLoading && <LoadingOverlay message={loadingMessage} />}
    </div>
  );
};

const LoadingOverlay: React.FC<{ message: string }> = ({ message }) => (
  <div className="ultra-loading-overlay" role="status" aria-live="polite">
    <div className="ultra-spinner" />
    <p className="ultra-loading-message">{message || 'Processing…'}</p>
  </div>
);