import { useState } from 'preact/hooks';
import './Home.css';
import { route } from 'preact-router';
import { Sidebar } from '../components/Sidebar.js';
import { NewRecommendationModal } from '../components/NewRecommendationModal.js';
import { useRecommendationsContext } from '../context/RecommendationsContext.js';

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

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

  const handleCreateNew = async (body: {
    main_prompt: string;
    liked_series: string;
    disliked_series: string;
    themes: string;
    requirements?: string;
    avoid?: string;
    brainstorm_count?: number;
    media_type: import('../types/index.js').MediaType;
    use_web_search?: boolean;
    use_validator?: boolean;
    hard_requirements?: boolean;
    self_expansive?: boolean;
    expansive_passes?: number;
    expansive_mode?: 'soft' | 'extreme';
    generation_mode?: 'brainstorm' | 'continuous';
    total_count?: number;
    validate_results?: boolean;
  }) => {
    const id = await createNew(body);
    if (id) {
      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 or movie, powered by AI.</p>
        <button class="btn-gradient" onClick={() => setShowModal(true)}>
          Get Started →
        </button>
      </main>
      {showModal && (
        <NewRecommendationModal
          onClose={() => setShowModal(false)}
          onSubmit={handleCreateNew}
        />
      )}
    </div>
  );
}
