/* @component-map
 * App — Main container, layout and header
 * JokeCard — Displays joke setup/punchline with reveal button
 * GroanMeter — Visual groan level indicator
 * BottomControls — Generate button and joke counter
 * FloatingEmoji — Animated emoji that floats up
 * @end-component-map */

import { JokeCard } from './components/JokeCard.jsx';
import { GroanMeter } from './components/GroanMeter.jsx';
import { BottomControls } from './components/BottomControls.jsx';

function App() {
  const [joke, setJoke] = useState(null);
  const [groanLevel, setGroanLevel] = useState(0);
  const [jokeCount, setJokeCount] = useState(0);
  const [generating, setGenerating] = useState(false);
  const [error, setError] = useState(false);

  const handleNewJoke = (newJoke) => {
    setJoke(newJoke);
    setGroanLevel(Math.min(10, Math.max(1, newJoke.groan_level || 5)));
    setJokeCount((c) => c + 1);
    setError(false);
  };

  const handleError = () => {
    setJoke(null);
    setError(true);
  };

  return (
    <div className="container">
      <div className="badge">AI-Powered</div>
      <h1>Dad Joke <span>Generator</span></h1>
      <p className="subtitle">Freshly baked groaners, courtesy of artificial intelligence</p>
      <JokeCard joke={joke} generating={generating} error={error} />
      <GroanMeter level={groanLevel} visible={joke !== null && !generating} />
      <BottomControls
        jokeCount={jokeCount}
        generating={generating}
        setGenerating={setGenerating}
        onNewJoke={handleNewJoke}
        onError={handleError}
      />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);