// ─────────────────────────────────────────────────────────────────────────────
// Ultra Image Cropper 2.0 — Options Panel (right column)
// Context-sensitive controls for the active tool
// ─────────────────────────────────────────────────────────────────────────────

import React from 'react';
import type { ToolId, UILocale } from '@/types';
import { useCanvasStore } from '@/store';
import { useTranslation } from '@/i18n/useTranslation';
import { AdjustPanel } from '../tools/AdjustPanel';
import { FilterPanel } from '../tools/FilterPanel';
import { CropPanel } from '../tools/CropPanel';
import { RotatePanel } from '../tools/RotatePanel';
import { ResizePanel } from '../tools/ResizePanel';
import { TextPanel } from '../tools/TextPanel';
import { OverlayPanel } from '../tools/OverlayPanel';
import { AIPanel } from '../ai/AIPanel';
import { DrawPanel } from '../tools/DrawPanel';
import { PerspectivePanel } from '../tools/PerspectivePanel';

interface OptionsPanelProps {
  tools: ToolId[];
  canUseAI: boolean;
  locale: UILocale;
}

const AI_TOOLS: ToolId[] = [
  'bg_remove', 'ai_smart_crop',
  'ai_enhance', 'ai_upscale', 'ai_inpaint',
];

export const OptionsPanel: React.FC<OptionsPanelProps> = ({ tools, canUseAI }) => {
  const { activeTool } = useCanvasStore();
  const t = useTranslation();

  const renderPanel = () => {
    if (activeTool === 'crop') return <CropPanel />;
    if (activeTool === 'rotate') return <RotatePanel />;
    if (activeTool === 'flip') return <RotatePanel showFlip />;
    if (activeTool === 'resize') return <ResizePanel />;
    if (activeTool === 'perspective') return <PerspectivePanel />;
    if (activeTool === 'draw') return <DrawPanel />;
    if (activeTool === 'adjust') return <AdjustPanel />;
    if (activeTool === 'filter') return <FilterPanel />;
    if (activeTool === 'text') return <TextPanel />;
    if (activeTool === 'overlay') return <OverlayPanel />;
    if (AI_TOOLS.includes(activeTool)) {
      return <AIPanel tool={activeTool} canUseAI={canUseAI} />;
    }
    return <DefaultPanel />;
  };

  return (
    <aside className="ultra-options-panel" role="complementary" aria-label="Tool options">
      <div className="ultra-options-panel__inner">
        {renderPanel()}
      </div>
    </aside>
  );
};

const DefaultPanel: React.FC = () => {
  const t = useTranslation();
  return (
    <div className="ultra-options-empty">
      <p>{t.editor.selectTool}</p>
    </div>
  );
};