// ─────────────────────────────────────────────────────────────────────────────
// Ultra Image Cropper 2.0 — Footer Bar
// Format selector | Quality slider | Dimensions | File size | CTA buttons
// ─────────────────────────────────────────────────────────────────────────────

import React, { useState } from 'react';
import type { UILocale, UploadSuccessResult, OutputFormat } from '@/types';
import { useCanvasStore, useToastStore } from '@/store';
import { useCanvas } from '@/hooks/useCanvas';
import { formatFileSize, estimateFileSize } from '@/utils/contextPresets';
import { useTranslation } from '@/i18n/useTranslation';

interface FooterBarProps {
  uploadEndpoint?: string;
  watermark: boolean;
  watermarkPreset: string;
  onUploadSuccess?: (result: UploadSuccessResult) => void;
  onCancel?: () => void;
  onError?: (error: Error) => void;
  locale: UILocale;
  minWidth: number;
}

const FORMAT_OPTIONS: { value: OutputFormat; label: string }[] = [
  { value: 'jpeg', label: 'JPEG' },
  { value: 'png',  label: 'PNG'  },
  { value: 'webp', label: 'WebP' },
  { value: 'avif', label: 'AVIF' },
];

export const FooterBar: React.FC<FooterBarProps> = ({
  uploadEndpoint,
  onUploadSuccess,
  onCancel,
  onError,
  minWidth,
}) => {
  const [isUploading, setIsUploading] = useState(false);
  const t = useTranslation();
  const { outputFormat, quality, setOutputFormat, setQuality, imageWidth, imageHeight, uploadProgress, setUploadProgress } = useCanvasStore();
  const { addToast } = useToastStore();
  const { exportBlob, exportDataURL, getDimensions } = useCanvas();

  const estimatedSize = estimateFileSize(imageWidth, imageHeight, outputFormat, quality);

  // ── Validate min dimensions ───────────────────────────────────────────────────
  const validateDimensions = (): boolean => {
    if (minWidth > 0 && imageWidth < minWidth) {
      addToast(`Image must be at least ${minWidth}px wide. Current: ${imageWidth}px`, 'warning');
      return false;
    }
    return true;
  };

  // ── Apply & Upload ─────────────────────────────────────────────────────────────
  const handleApplyAndUpload = async () => {
    if (!validateDimensions()) return;
    setIsUploading(true);
    setUploadProgress(0);

    try {
      const blob = await exportBlob();
      if (!blob) throw new Error('Export failed');

      const dims = getDimensions();

      if (uploadEndpoint) {
        const formData = new FormData();
        formData.append('image', blob, `image.${outputFormat}`);

        // Use native XHR for upload progress tracking
        const url: string = await new Promise((resolve, reject) => {
          const xhr = new XMLHttpRequest();
          xhr.upload.addEventListener('progress', (e) => {
            if (e.lengthComputable) setUploadProgress(Math.round((e.loaded / e.total) * 100));
          });
          xhr.addEventListener('load', () => {
            if (xhr.status >= 200 && xhr.status < 300) {
              try { resolve(JSON.parse(xhr.responseText)?.url ?? ''); } catch { resolve(''); }
            } else {
              reject(new Error(`Upload failed: ${xhr.status}`));
            }
          });
          xhr.addEventListener('error', () => reject(new Error('Network error during upload')));
          xhr.open('POST', uploadEndpoint);
          xhr.send(formData);
        });

        addToast('Image uploaded successfully!', 'success');
        onUploadSuccess?.({
          url,
          width: dims.width,
          height: dims.height,
          format: outputFormat,
          size: blob.size,
        });
      } else if (onUploadSuccess) {
        // No server — return data URL directly
        const dataUrl = exportDataURL();
        onUploadSuccess({
          url: dataUrl,
          width: dims.width,
          height: dims.height,
          format: outputFormat,
          size: blob.size,
        });
        addToast('Image ready!', 'success');
      } else {
        addToast('No uploadEndpoint or onUploadSuccess configured.', 'warning');
      }

      useCanvasStore.getState().closeModal();
    } catch (err: unknown) {
      const error = err instanceof Error ? err : new Error('Upload failed');
      addToast(error.message, 'error');
      onError?.(error);
    } finally {
      setIsUploading(false);
      setUploadProgress(0);
    }
  };

  // ── Save Locally ──────────────────────────────────────────────────────────────
  const handleSaveLocally = async () => {
    try {
      const dataUrl = exportDataURL();
      const link = document.createElement('a');
      link.download = `ultraimage-export.${outputFormat}`;
      link.href = dataUrl;
      link.click();
      addToast('Image saved to device!', 'success');
    } catch (err: unknown) {
      const error = err instanceof Error ? err : new Error('Save failed');
      addToast(error.message, 'error');
    }
  };

  return (
    <footer className="ultra-footer-bar">
      {/* Format selector */}
      <div className="ultra-footer-section">
        <label className="ultra-footer-label">{t.editor.format}</label>
        <div className="ultra-format-selector">
          {FORMAT_OPTIONS.map((opt) => (
            <button
              key={opt.value}
              className={`ultra-format-btn ${outputFormat === opt.value ? 'ultra-format-btn--active' : ''}`}
              onClick={() => setOutputFormat(opt.value)}
              aria-pressed={outputFormat === opt.value}
            >
              {opt.label}
            </button>
          ))}
        </div>
      </div>

      {/* Quality slider (hidden for PNG) */}
      {outputFormat !== 'png' && (
        <div className="ultra-footer-section">
          <label className="ultra-footer-label">
            {t.editor.qualityLabel} <span className="ultra-quality-value">{quality}%</span>
          </label>
          <input
            type="range"
            className="ultra-quality-slider"
            min={1}
            max={100}
            value={quality}
            onChange={(e) => setQuality(Number(e.target.value))}
            aria-label={`Quality ${quality}%`}
          />
        </div>
      )}

      {/* Output dimensions & file size estimate */}
      <div className="ultra-footer-info">
        {imageWidth > 0 && (
          <span className="ultra-footer-dims">{imageWidth} × {imageHeight}px</span>
        )}
        <span className="ultra-footer-size">~{formatFileSize(estimatedSize)}</span>
      </div>

      {/* Upload progress bar */}
      {isUploading && uploadProgress > 0 && (
        <div className="ultra-progress-bar">
          <div className="ultra-progress-fill" style={{ width: `${uploadProgress}%` }} />
        </div>
      )}

      {/* Action buttons */}
      <div className="ultra-footer-actions">
        <button
          className="ultra-btn ultra-btn--ghost"
          onClick={onCancel}
          disabled={isUploading}
        >
          {t.common.cancel}
        </button>
        <button
          className="ultra-btn ultra-btn--secondary"
          onClick={handleSaveLocally}
          disabled={isUploading}
        >
          {t.editor.saveLocally}
        </button>
        <button
          className="ultra-btn ultra-btn--primary"
          onClick={handleApplyAndUpload}
          disabled={isUploading}
        >
          {isUploading
            ? uploadProgress > 0 ? `${t.common.uploading} ${uploadProgress}%` : t.common.processing
            : t.editor.applyUpload
          }
        </button>
      </div>
    </footer>
  );
};