import { useState, type SubmitEvent } from 'react';
import CardLayout from './CardLayout';
import ListLayout from './ListLayout';

const App: React.FC = () => {
  const [prefs, setPrefs] = useState('');
  const [layout, setLayout] = useState<'card' | 'list' | null>(null);
  const [loading, setLoading] = useState(false);

  async function handleSubmit(e: SubmitEvent<HTMLFormElement>) {
    e.preventDefault();
    setLoading(true);

    const response = await fetch('http://localhost:3001/ui-personalize', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ prefs }),
    });

    const data = await response.json();
    setLayout(data.layout);
    setLoading(false);
  }

  return (
    <div>
      <h2>Personalisierte UI</h2>

      {!layout && (
        <form onSubmit={handleSubmit}>
          <label>
            Wie arbeitest du am liebsten?
            <textarea
              value={prefs}
              onChange={(e) => setPrefs(e.target.value)}
              placeholder="z.B. visuell, kompakt, viele Infos auf einmal..."
            />
          </label>

          <button type="submit" disabled={loading}>
            {loading ? 'Analysiere…' : 'UI personalisieren'}
          </button>
        </form>
      )}

      {layout === 'card' && <CardLayout />}
      {layout === 'list' && <ListLayout />}
    </div>
  );
};

export default App;

