import React, { useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { MangaGrid } from '../components/MangaGrid.jsx';
import { Layout } from '../components/Layout/Layout.jsx';
import { Toolbar } from '../components/Toolbar/Toolbar.jsx';
import { useManga } from '../context/MangaContext.jsx';
import { 
  faRefresh, 
  faSearch,
  faGear,
  faEye,
  faSort,
  faFilter
} from '@fortawesome/free-solid-svg-icons';

export function HomePage() {
  const navigate = useNavigate();
  const { collection, loading, error, loadCollection } = useManga();

  useEffect(() => {
    loadCollection();
  }, [loadCollection]);

  const handleMangaClick = (slug) => {
    navigate(`/manga/${slug}`);
  };

  const handleAddMangaClick = (query = '') => {
    navigate(`/add${query ? `?q=${encodeURIComponent(query)}` : ''}`);
  };

  const toolbarConfig = {
    leftSection: [
      { icon: faRefresh, label: 'Refresh', onClick: loadCollection },
      { icon: faSearch, label: 'Search', onClick: () => {} }
    ],
    rightSection: [
      { icon: faGear, onClick: () => {} },
      { icon: faEye, onClick: () => {} },
      { icon: faSort, onClick: () => {} },
      { icon: faFilter, onClick: () => {} }
    ]
  };

  if (loading) {
    return <div className="flex justify-center items-center h-screen">Loading...</div>;
  }

  if (error) {
    return <div className="text-red-500 text-center p-4">{error}</div>;
  }

  return (
    <Layout onMangaClick={handleMangaClick} onAddMangaClick={handleAddMangaClick}>
      <Toolbar {...toolbarConfig} className="sticky top-16 z-10" />
      <div className="container mx-auto px-4">
        <MangaGrid mangas={collection?.items || []} onMangaClick={handleMangaClick} />
      </div>
    </Layout>
  );
}