frontend/src/app.tsx

import { useState } from 'preact/hooks';
import { detectCars, type DetectResponse, type ModelType } from './api';
import { Upload } from './components/upload';
import { Results } from './components/results';

type AppState = 'idle' | 'loading' | 'results' | 'error';

export function App() {
  const [state, setState] = useState<AppState>('idle');
  const [data, setData] = useState<DetectResponse | null>(null);
  const [error, setError] = useState('');
  const [model, setModel] = useState<ModelType>('cars');

  const handleFile = async (file: File) => {
    setState('loading');
    setError('');
    try {
      const threshold = model === 'spots' ? 0.16 : 0.2;
      const result = await detectCars(file, threshold, model);
      setData(result);
      setState('results');
    } catch (e) {
      setError(e instanceof Error ? e.message : 'Detection failed');
      setState('error');
    }
  };

  const reset = () => {
    setState('idle');
    setData(null);
    setError('');
  };

  return (
    <div class="container">
      <h1>Parking Car Detection</h1>

      {state === 'idle' && (
        <>
          <div class="mode-toggle">
            <button
              class={model === 'cars' ? 'active' : ''}
              onClick={() => setModel('cars')}
            >
              Car Detection
            </button>
            <button
              class={model === 'spots' ? 'active' : ''}
              onClick={() => setModel('spots')}
            >
              Spot Occupancy
            </button>
          </div>
          <p class="beta-disclaimer">
            BETA: Models were quickly trained and not threshold-tested extensively.
          </p>
          <Upload onFile={handleFile} />
        </>
      )}

      {state === 'loading' && (
        <div class="loading">
          <div class="spinner" />
          <p>Running detection...</p>
        </div>
      )}

      {state === 'error' && (
        <div class="error-box">
          <p>Error: {error}</p>
          <button onClick={reset}>Try again</button>
        </div>
      )}

      {state === 'results' && data && (
        <Results data={data} onReset={reset} model={model} />
      )}
    </div>
  );
}