import { useState } from 'preact/hooks';
import { route } from 'preact-router';
import { Sidebar } from '../components/Sidebar.js';
import { NewRecommendationModal } from '../components/NewRecommendationModal.js';
import { useRecommendations } from '../hooks/useRecommendations.js';

export function Home() {
  const { list, createNew } = useRecommendations();
  const [showModal, setShowModal] = useState(false);

  const handleSelect = (id: string) => route(`/recom/${id}`);

  const handleCreateNew = async (body: {
    main_prompt: string;
    liked_shows: string;
    disliked_shows: string;
    themes: string;
  }) => {
    const id = await createNew(body);
    route(`/recom/${id}`);
  };

  return (
    <div class="landing-layout">
      <div class="landing-bg" />
      <Sidebar
        list={list}
        selectedId={null}
        onSelect={handleSelect}
        onNewClick={() => setShowModal(true)}
      />
      <main class="landing-main">
        <h1 class="landing-title">Recommender</h1>
        <p class="landing-tagline">Discover your next favorite show, powered by AI.</p>
        <button class="btn-gradient" onClick={() => setShowModal(true)}>
          Get Started →
        </button>
      </main>
      {showModal && (
        <NewRecommendationModal
          onClose={() => setShowModal(false)}
          onSubmit={handleCreateNew}
        />
      )}
    </div>
  );
}
