// ─────────────────────────────────────────────────────────────────────────────
// AI Upscale Panel — Stability AI / Replicate / local canvas upscale
// ─────────────────────────────────────────────────────────────────────────────

import React, { useState } 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 { useTranslation } from '@/i18n/useTranslation';

export const AIUpscalePanel: React.FC = () => {
  const t = useTranslation();
  const [scale, setScale]           = useState<2 | 4>(2);
  const [isProcessing, setIsProcessing] = useState(false);
  const [statusMsg, setStatusMsg]   = useState('');

  const { addToast }  = useToastStore();
  const { aiConfig }  = useAIConfigStore();
  const { engineRef } = useCanvas();
  const { canvasEl, imageWidth, imageHeight } = useCanvasStore();

  const outputW = imageWidth * scale;
  const outputH = imageHeight * scale;
  const exceeds8k = outputW > 8000 || outputH > 8000;

  const provider = aiConfig.upscaling?.provider ?? 'local';
  const providerLabel = provider === 'stabilityai' ? 'Stability AI'
    : provider === 'replicate' ? 'Replicate'
    : 'Local (canvas)';

  const handleUpscale = async () => {
    if (!canvasEl) return;

    setIsProcessing(true);
    setStatusMsg('Starting…');
    addToast(`Upscaling ${scale}×…`, 'info', 20000);

    const client = getAIClient(aiConfig);

    try {
      const result = await client.upscaleImage(canvasEl, {
        scale,
        onProgress: (msg) => setStatusMsg(msg),
      });

      const img = new Image();
      img.onload = () => {
        if (!canvasEl) return;
        const ctx = canvasEl.getContext('2d')!;
        canvasEl.width = img.naturalWidth;
        canvasEl.height = img.naturalHeight;
        ctx.drawImage(img, 0, 0);
        engineRef.current?.syncBaseFromCanvas();
        historyManager.snapshot(`AI Upscale ${scale}×`);
        addToast(`Upscaled to ${img.naturalWidth}×${img.naturalHeight}px!`, 'success');
        setIsProcessing(false);
        setStatusMsg('');
      };
      img.src = result.dataUrl;
    } catch (err) {
      const msg = err instanceof AIProviderError
        ? err.message
        : (err instanceof Error ? err.message : 'Upscale failed');
      addToast(msg, 'error', 6000);
      setIsProcessing(false);
      setStatusMsg('');
    }
  };

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

      <div className="ultra-panel__section">
        <p className="ultra-hint">Provider: <strong>{providerLabel}</strong></p>
      </div>

      <div className="ultra-panel__section">
        <label className="ultra-section-label">{t.upscale.scaleFactor}</label>
        <div className="ultra-btn-group">
          {([2, 4] as const).map((s) => (
            <button
              key={s}
              className={`ultra-btn ultra-btn--secondary ${scale === s ? 'ultra-btn--active' : ''}`}
              onClick={() => setScale(s)}
              aria-pressed={scale === s}
            >
              {s}×
            </button>
          ))}
        </div>
        <p className="ultra-hint">
          {t.upscale.outputSize}: {outputW} × {outputH}px
          {exceeds8k && <span className="ultra-warning"> {t.upscale.exceedsLimit}</span>}
        </p>
      </div>

      {isProcessing && statusMsg && (
        <div className="ultra-panel__section">
          <p className="ultra-hint-sm">{statusMsg}</p>
        </div>
      )}

      <div className="ultra-panel__actions">
        <button
          className="ultra-btn ultra-btn--primary ultra-btn--full ultra-btn--ai"
          onClick={handleUpscale}
          disabled={isProcessing || exceeds8k}
        >
          {isProcessing
            ? <><span className="ultra-spinner ultra-spinner--sm" /> {t.smartCrop.analysing}</>
            : `${t.upscale.upscaleBtn} ${scale}×`}
        </button>
      </div>
    </div>
  );
};