import { Link } from 'react-router-dom';
import { Search, BookOpen, Download, Server, Library } from 'lucide-react';
import { useStore } from '../store/useStore';

export function HomePage() {
  const { serverConnected } = useStore();

  return (
    <div className="page home-page">
      <div className="hero">
        <div className="hero-content">
          <h1>MangaDL</h1>
          <p className="hero-subtitle">Browse, read, and download manga from MangaKatana</p>
          
          <div className="hero-search">
            <Search className="search-icon-large" />
            <Link to="/search?q=" className="search-placeholder">
              Search for manga...
            </Link>
          </div>

          <div className="hero-features">
            <div className="feature">
              <BookOpen size={24} />
              <span>Browse Manga</span>
            </div>
            <div className="feature">
              <Download size={24} />
              <span>Download Chapters</span>
            </div>
            <div className="feature">
              <Library size={24} />
              <span>Read Online</span>
            </div>
            <div className="feature">
              <Server size={24} />
              <span>Self-hosted Backend</span>
            </div>
          </div>
        </div>
      </div>

      <div className="server-status-banner">
        <Server className={serverConnected ? 'online' : 'offline'} size={20} />
        <span>
          Backend: {serverConnected ? 'Connected' : 'Disconnected'}
          {!serverConnected && ' - Start ifetch server on port 8080'}
        </span>
      </div>

      <div className="getting-started">
        <h2>Getting Started</h2>
        <ol>
          <li>Run <code>ifetch --server --port 8080</code> to start the backend server</li>
          <li>Search for manga using the search bar above</li>
          <li>Click on a manga to view chapters and start reading</li>
        </ol>
      </div>
    </div>
  );
}