import { useState } from 'react';
import type { TraceMetadata } from './types/engine';
import ImportConvert from './views/ImportConvert';
import DesignCanvas from './views/DesignCanvas';
import './App.css';

type ViewState = 'import' | 'canvas' | 'export';

function App() {
  const [view, setView] = useState<ViewState>('import');
  const [svgResult, setSvgResult] = useState<string | null>(null);
  const [traceMetadata, setTraceMetadata] = useState<TraceMetadata | null>(null);

  const handleUseThis = (svgOutput: string, metadata: TraceMetadata) => {
    setSvgResult(svgOutput);
    setTraceMetadata(metadata);
    setView('canvas');
  };

  return (
    <div id="app">
      {view === 'import' && <ImportConvert onUseThis={handleUseThis} />}
      {view === 'canvas' && (
        <DesignCanvas svgData={svgResult} traceMetadata={traceMetadata} />
      )}
      {view === 'export' && <div className="placeholder-view">View 3: Export</div>}
    </div>
  );
}

export default App;
