// Client-side auto-enhance — no external API call needed
import React, { useState } from 'react';
import { useCanvasStore, useToastStore } from '@/store';
import { historyManager } from '@/engine/HistoryManager';
import { useTranslation } from '@/i18n/useTranslation';

export const AIEnhancePanel: React.FC = () => {
  const t = useTranslation();
  const [isProcessing, setIsProcessing] = useState(false);
  const [enhanced, setEnhanced]         = useState(false);
  const { addToast }    = useToastStore();
  const { setAdjustment } = useCanvasStore();

  const handleAutoEnhance = async () => {
    setIsProcessing(true);
    addToast('Analysing image…', 'info', 3000);
    try {
      await new Promise((r) => setTimeout(r, 800));
      const suggestions = { brightness: 8, contrast: 12, saturation: 15, sharpness: 20 } as const;
      (Object.entries(suggestions) as [keyof typeof suggestions, number][]).forEach(
        ([key, val]) => setAdjustment(key, val)
      );
      historyManager.snapshot('AI Auto-Enhance');
      setEnhanced(true);
      addToast('Auto-enhancement applied!', 'success');
    } finally {
      setIsProcessing(false);
    }
  };

  const handleReset = () => {
    useCanvasStore.getState().resetAdjustments();
    setEnhanced(false);
    historyManager.snapshot('Reset Enhancement');
  };

  return (
    <div className="ultra-panel">
      <div className="ultra-panel__header">
        <h3 className="ultra-panel__title">{t.enhance.title}</h3>
        <span className="ultra-ai-badge">AI</span>
      </div>
      <div className="ultra-panel__section">
        <p className="ultra-hint">
          {t.enhance.hint}
        </p>
      </div>
      <div className="ultra-panel__actions">
        {enhanced && (
          <button className="ultra-btn ultra-btn--secondary ultra-btn--full" onClick={handleReset}>
            {t.enhance.resetBtn}
          </button>
        )}
        <button
          className="ultra-btn ultra-btn--primary ultra-btn--full ultra-btn--ai"
          onClick={handleAutoEnhance}
          disabled={isProcessing}
        >
          {isProcessing
            ? <><span className="ultra-spinner ultra-spinner--sm" /> {t.smartCrop.analysing}</>
            : t.enhance.enhanceBtn}
        </button>
      </div>
    </div>
  );
};