// ─────────────────────────────────────────────────────────────────────────────
// AI Panel — routes to the correct AI tool panel based on active tool
// ─────────────────────────────────────────────────────────────────────────────

import React, { useState } from 'react';
import type { ToolId } from '@/types';
import { BackgroundRemovalPanel } from './BackgroundRemovalPanel';
import { AIEnhancePanel } from './AIEnhancePanel';
import { AIUpscalePanel } from './AIUpscalePanel';
import { useCanvasStore, useToastStore, useHistoryStore, useAIConfigStore } from '@/store';
import { useCanvas } from '@/hooks/useCanvas';
import { historyManager } from '@/engine/HistoryManager';
import { getAIClient } from '@/ai/AIClient';
import { AIProviderError } from '@/ai/types';
import { useTranslation } from '@/i18n/useTranslation';

interface AIPanelProps {
  tool: ToolId;
  canUseAI: boolean;
}

export const AIPanel: React.FC<AIPanelProps> = ({ tool, canUseAI }) => {
  const t = useTranslation();

  if (!canUseAI) {
    return (
      <div className="ultra-panel ultra-panel--locked">
        <div className="ultra-ai-locked">
          <div className="ultra-ai-locked__icon">⚙️</div>
          <h3 className="ultra-ai-locked__title">{t.aiPanel.notConfigured}</h3>
          <p className="ultra-ai-locked__desc">
            {t.aiPanel.notConfiguredDesc}
          </p>
        </div>
      </div>
    );
  }

  switch (tool) {
    case 'bg_remove':     return <BackgroundRemovalPanel />;
    case 'ai_enhance':    return <AIEnhancePanel />;
    case 'ai_upscale':    return <AIUpscalePanel />;
    case 'ai_smart_crop': return <SmartCropPanel />;
    default:              return null;
  }
};

// ── Smart Crop Panel (GPT-4o Vision or custom endpoint) ───────────────────────

const SmartCropPanel: React.FC = () => {
  const t = useTranslation();
  const [ratio, setRatio]         = useState('1:1');
  const [isAnalysing, setIsAnalysing] = useState(false);
  const [suggestion, setSuggestion]   = useState('');
  const [preCropIndex, setPreCropIndex] = useState<number | null>(null);

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

  const RATIOS = ['1:1', '4:3', '16:9', '3:2', '9:16', 'free'];

  const isConfigured = !!(aiConfig.smartCrop?.provider && (
    aiConfig.smartCrop.provider === 'custom' ||
    aiConfig.smartCrop.apiKey
  ));

  const handleAnalyse = async () => {
    if (!canvasEl) { addToast('Please upload an image first.', 'warning'); return; }
    if (!isConfigured) {
      addToast('smartCrop provider is not configured in aiConfig.', 'error', 6000);
      return;
    }

    setIsAnalysing(true);
    setSuggestion('');
    setPreCropIndex(null);
    addToast('Analysing image with AI…', 'info', 5000);

    const imageWidth  = canvasEl.width;
    const imageHeight = canvasEl.height;
    const client = getAIClient(aiConfig);

    try {
      const result = await client.smartCrop(canvasEl, { ratio, imageWidth, imageHeight });
      const indexBeforeCrop = useHistoryStore.getState().currentIndex;

      engineRef.current?.applyCrop({ x: result.x, y: result.y, width: result.width, height: result.height });
      const dims = engineRef.current?.getDimensions();
      if (dims) setCanvasDimensions(dims.width, dims.height);
      historyManager.snapshot('AI Smart Crop');

      setPreCropIndex(indexBeforeCrop);
      setSuggestion(result.description);
      addToast('Smart crop applied! Use Reset to undo.', 'success');
    } catch (err) {
      const msg = err instanceof AIProviderError
        ? err.message
        : (err instanceof Error ? err.message : 'Smart crop failed');
      addToast(msg, 'error', 6000);
    } finally {
      setIsAnalysing(false);
    }
  };

  const handleReset = () => {
    if (preCropIndex === null) return;
    const entry = useHistoryStore.getState().jumpTo(preCropIndex);
    if (!entry) return;
    historyManager.restoreImageData(entry.imageData);
    engineRef.current?.syncBaseFromCanvas();
    const dims = engineRef.current?.getDimensions() ?? { width: 0, height: 0 };
    setCanvasDimensions(dims.width, dims.height);
    setPreCropIndex(null);
    setSuggestion('');
    addToast('Smart crop reset.', 'info');
  };

  if (!isConfigured) {
    return (
      <div className="ultra-panel">
        <div className="ultra-panel__header">
          <h3 className="ultra-panel__title">{t.smartCrop.title}</h3>
          <span className="ultra-ai-badge">AI</span>
        </div>
        <div className="ultra-panel__section" style={{ textAlign: 'center', padding: '24px 0' }}>
          <div style={{ fontSize: 36, marginBottom: 12 }}>⚙️</div>
          <strong style={{ display: 'block', marginBottom: 8 }}>{t.smartCrop.notConfigured}</strong>
          <p className="ultra-hint">
            {t.smartCrop.notConfiguredDesc}
          </p>
          <pre className="ultra-hint" style={{ textAlign: 'left', marginTop: 12, fontSize: 10, overflow: 'auto' }}>
{`aiConfig={{
  smartCrop: {
    provider: "openai",
    apiKey: "sk-...",
    model: "gpt-4o-mini"
  }
}}`}
          </pre>
        </div>
      </div>
    );
  }

  return (
    <div className="ultra-panel">
      <div className="ultra-panel__header">
        <h3 className="ultra-panel__title">{t.smartCrop.title}</h3>
        <span className="ultra-ai-badge">AI</span>
      </div>
      <div className="ultra-panel__section">
        <p className="ultra-hint">
          {t.smartCrop.hint}
        </p>
      </div>
      <div className="ultra-panel__section">
        <label className="ultra-section-label">{t.smartCrop.targetRatio}</label>
        <div className="ultra-chip-group">
          {RATIOS.map((r) => (
            <button
              key={r}
              className={`ultra-chip ${ratio === r ? 'ultra-chip--active' : ''}`}
              onClick={() => setRatio(r)}
            >
              {r}
            </button>
          ))}
        </div>
      </div>
      {suggestion && (
        <div className="ultra-panel__section">
          <p className="ultra-hint" style={{ fontStyle: 'italic' }}>{suggestion}</p>
        </div>
      )}
      <div className="ultra-panel__actions">
        <button
          className="ultra-btn ultra-btn--primary ultra-btn--full ultra-btn--ai"
          onClick={handleAnalyse}
          disabled={isAnalysing}
        >
          {isAnalysing
            ? <><span className="ultra-spinner ultra-spinner--sm" /> {t.smartCrop.analysing}</>
            : t.smartCrop.analyseBtn}
        </button>
        {preCropIndex !== null && (
          <button
            className="ultra-btn ultra-btn--secondary ultra-btn--full"
            onClick={handleReset}
            style={{ marginTop: 8 }}
          >
            {t.smartCrop.resetCrop}
          </button>
        )}
      </div>
    </div>
  );
};