// ─────────────────────────────────────────────────────────────────────────────
// Background Removal Panel
// Supports: local ONNX model (no key), remove.bg API, custom endpoint.
// Provider is determined by the aiConfig.backgroundRemoval prop.
// ─────────────────────────────────────────────────────────────────────────────

import React, { useState, useEffect, useRef } from 'react';
import { useCanvasStore, useToastStore, useAIConfigStore } from '@/store';
import { historyManager } from '@/engine/HistoryManager';
import { useCanvas } from '@/hooks/useCanvas';
import { getAIClient } from '@/ai/AIClient';
import { AIProviderError } from '@/ai/types';
import { warmUpLocalModel, getLocalBgRemovalAvailability } from '@/ai/providers/LocalBgRemovalProvider';
import { useTranslation } from '@/i18n/useTranslation';

export const BackgroundRemovalPanel: React.FC = () => {
  const t = useTranslation();

  const BG_OPTIONS = [
    { value: 'transparent', label: t.bgRemoval.transparent },
    { value: 'white',       label: t.bgRemoval.white       },
    { value: 'black',       label: t.bgRemoval.black       },
    { value: 'blur',        label: t.bgRemoval.blurBg      },
  ];

  const [bgFill, setBgFill]             = useState('transparent');
  const [customColor, setCustomColor]   = useState('#ffffff');
  const [isProcessing, setIsProcessing] = useState(false);
  const [progress, setProgress]         = useState(0);
  const [statusLabel, setStatusLabel]   = useState('');
  const [qualityMode, setQualityMode]   = useState<'fast' | 'quality'>('fast');
  // null = still checking, true = package ready, false = not installed
  const [localPkgReady, setLocalPkgReady] = useState<boolean | null>(
    getLocalBgRemovalAvailability()
  );

  const cancelledRef = useRef(false);
  const { addToast }  = useToastStore();
  const canvasStore   = useCanvasStore();
  const { aiConfig }  = useAIConfigStore();
  const { engineRef } = useCanvas();

  const provider = aiConfig.backgroundRemoval?.provider ?? 'local';
  const isLocal  = provider === 'local';

  // Pre-warm ONNX model; update availability state once resolved
  useEffect(() => {
    if (!isLocal) return;
    warmUpLocalModel().then(() => setLocalPkgReady(getLocalBgRemovalAvailability()));
  }, [isLocal]);

  const handleCancel = () => {
    cancelledRef.current = true;
    setIsProcessing(false);
    setProgress(0);
    setStatusLabel('');
    addToast('Background removal cancelled', 'info');
  };

  const applyResultToCanvas = (blob: Blob) => {
    const { canvasEl } = canvasStore;
    if (!canvasEl) return;

    const url = URL.createObjectURL(blob);
    const origW = canvasEl.width;
    const origH = canvasEl.height;

    const fgImg = new Image();
    fgImg.onload = () => {
      if (cancelledRef.current) { URL.revokeObjectURL(url); return; }

      canvasEl.width  = origW;
      canvasEl.height = origH;
      const ctx = canvasEl.getContext('2d')!;
      ctx.clearRect(0, 0, origW, origH);

      if (bgFill === 'white') {
        ctx.fillStyle = '#ffffff'; ctx.fillRect(0, 0, origW, origH);
      } else if (bgFill === 'black') {
        ctx.fillStyle = '#000000'; ctx.fillRect(0, 0, origW, origH);
      } else if (bgFill === 'blur') {
        const origImg = canvasStore.sourceImage;
        if (origImg) { ctx.filter = 'blur(16px)'; ctx.drawImage(origImg, 0, 0, origW, origH); ctx.filter = 'none'; }
      } else if (bgFill !== 'transparent') {
        ctx.fillStyle = bgFill; ctx.fillRect(0, 0, origW, origH);
      }

      ctx.drawImage(fgImg, 0, 0, origW, origH);
      URL.revokeObjectURL(url);

      engineRef.current?.syncBaseFromCanvas();
      canvasStore.setImageDimensions(origW, origH);
      historyManager.snapshot('AI Background Removed');
      addToast('Background removed!', 'success');
      setIsProcessing(false);
      setProgress(0);
      setStatusLabel('');
    };
    fgImg.onerror = () => {
      addToast('Failed to apply result', 'error');
      setIsProcessing(false); setProgress(0); setStatusLabel('');
    };
    fgImg.src = url;
  };

  const handleRemoveBg = async () => {
    const { canvasEl } = canvasStore;
    if (!canvasEl) { addToast('Please upload an image first.', 'warning'); return; }

    cancelledRef.current = false;
    setIsProcessing(true);
    setProgress(0);
    setStatusLabel('Starting…');

    const client = getAIClient(aiConfig);

    try {
      const result = await client.removeBackground(canvasEl, {
        quality: qualityMode,
        onProgress: (phase, pct) => {
          if (cancelledRef.current) return;
          setStatusLabel(phase);
          setProgress(pct);
        },
      });

      if (cancelledRef.current) return;
      applyResultToCanvas(result.blob);
    } catch (err) {
      if (cancelledRef.current) return;
      const msg = err instanceof AIProviderError
        ? err.message
        : (err instanceof Error ? err.message : 'Background removal failed');
      addToast(msg, 'error', 8000);
      setIsProcessing(false);
      setProgress(0);
      setStatusLabel('');
    }
  };

  // While local model is still being checked show a brief spinner
  if (isLocal && localPkgReady === null) {
    return (
      <div className="ultra-panel">
        <div className="ultra-panel__header">
          <h3 className="ultra-panel__title">{t.bgRemoval.title}</h3>
          <span className="ultra-ai-badge">AI</span>
        </div>
        <div className="ultra-ai-disabled">
          <span className="ultra-spinner" />
          <p className="ultra-hint" style={{ marginTop: 12 }}>{t.bgRemoval.checking}</p>
        </div>
      </div>
    );
  }

  // Local package is not installed — show install instructions
  if (isLocal && localPkgReady === false) {
    return (
      <div className="ultra-panel">
        <div className="ultra-panel__header">
          <h3 className="ultra-panel__title">{t.bgRemoval.title}</h3>
          <span className="ultra-ai-badge">AI</span>
        </div>
        <div className="ultra-ai-disabled">
          <div className="ultra-ai-disabled__icon">📦</div>
          <h3 className="ultra-ai-disabled__title">{t.bgRemoval.notInstalled}</h3>
          <p className="ultra-ai-disabled__desc">
            {t.bgRemoval.notInstalledDesc}
          </p>
          <code className="ultra-ai-disabled__code">
            npm install @imgly/background-removal
          </code>
          <p className="ultra-hint" style={{ marginTop: 12 }}>
            All other editor tools continue to work without this package.
          </p>
        </div>
      </div>
    );
  }

  return (
    <div className="ultra-panel">
      <div className="ultra-panel__header">
        <h3 className="ultra-panel__title">{t.bgRemoval.title}</h3>
        <span className="ultra-ai-badge">AI</span>
      </div>

      <div className="ultra-panel__section">
        <p className="ultra-hint">
          {isLocal
            ? t.bgRemoval.noKeyNeeded
            : `Using provider: ${provider === 'removebg' ? 'remove.bg API' : 'Custom endpoint'}`}
        </p>
      </div>

      {/* Quality toggle — only for local provider */}
      {isLocal && (
        <div className="ultra-panel__section">
          <label className="ultra-section-label">{t.bgRemoval.speedQuality}</label>
          <div className="ultra-bg-options">
            {(['fast', 'quality'] as const).map((m) => (
              <button
                key={m}
                className={`ultra-bg-option ${qualityMode === m ? 'ultra-bg-option--active' : ''}`}
                onClick={() => setQualityMode(m)}
                disabled={isProcessing}
                aria-pressed={qualityMode === m}
              >
                {m === 'fast' ? t.common.fast : t.common.quality}
              </button>
            ))}
          </div>
        </div>
      )}

      {/* Background fill */}
      <div className="ultra-panel__section">
        <label className="ultra-section-label">{t.bgRemoval.bgReplace}</label>
        <div className="ultra-bg-options">
          {BG_OPTIONS.map((opt) => (
            <button
              key={opt.value}
              className={`ultra-bg-option ${bgFill === opt.value ? 'ultra-bg-option--active' : ''}`}
              onClick={() => setBgFill(opt.value)}
              aria-pressed={bgFill === opt.value}
            >
              {opt.label}
            </button>
          ))}
          <div className="ultra-bg-option" style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
            <label className="ultra-numeric-label">{t.common.custom}</label>
            <input
              type="color"
              className="ultra-color-picker"
              value={customColor}
              onChange={(e) => { setCustomColor(e.target.value); setBgFill(e.target.value); }}
              aria-label="Custom background color"
            />
          </div>
        </div>
      </div>

      {/* Progress bar */}
      {isProcessing && (
        <div className="ultra-panel__section">
          <div className="ultra-ai-progress-track">
            <div
              className="ultra-ai-progress-fill"
              style={{
                width: progress > 0 ? `${progress}%` : '100%',
                animation: progress === 0 ? 'ultra-indeterminate 1.4s ease infinite' : 'none',
              }}
            />
          </div>
          {statusLabel && <p className="ultra-hint-sm" style={{ marginTop: 4 }}>{statusLabel}</p>}
        </div>
      )}

      <div className="ultra-panel__actions">
        {isProcessing ? (
          <button className="ultra-btn ultra-btn--secondary ultra-btn--full" onClick={handleCancel}>
            {t.common.cancel}
          </button>
        ) : (
          <button
            className="ultra-btn ultra-btn--primary ultra-btn--full ultra-btn--ai"
            onClick={handleRemoveBg}
          >
            {t.bgRemoval.removeBtn}
          </button>
        )}
      </div>
    </div>
  );
};