import { useState } from 'react';
import type { PresetConfig } from '../types/engine';
import FileUpload from '../components/FileUpload';
import PresetSelector from '../components/PresetSelector';
import styles from './ImportConvert.module.css';

interface ImportConvertProps {
  onUseThis: (svgOutput: string, metadata: unknown) => void;
}

export default function ImportConvert({ onUseThis: _onUseThis }: ImportConvertProps) {
  const [selectedFile, setSelectedFile] = useState<File | null>(null);
  const [_isSvgMode, setIsSvgMode] = useState(false);
  const [selectedPreset, setSelectedPreset] = useState('sign');
  const [_presetConfig, setPresetConfig] = useState<PresetConfig | null>(null);

  const handleFileSelect = (file: File, isSvg: boolean) => {
    setSelectedFile(file);
    setIsSvgMode(isSvg);
  };

  const handlePresetSelect = (name: string, config: PresetConfig) => {
    setSelectedPreset(name);
    setPresetConfig(config);
  };

  return (
    <div className={styles.container}>
      <div className={styles.leftPanel}>
        <FileUpload onFileSelect={handleFileSelect} selectedFile={selectedFile} />
        <PresetSelector
          selectedPreset={selectedPreset}
          onPresetSelect={handlePresetSelect}
        />
      </div>
      <div className={styles.rightPanel}>
        <div className={styles.previewPlaceholder}>
          {selectedFile
            ? 'Preview will appear here after tracing (T03)'
            : 'Upload an image to begin vectorization'}
        </div>
      </div>
    </div>
  );
}