import React, { useState } from 'react';
import { Book, AppScreen } from '../types';

interface LibraryProps {
  books: Book[];
  onBookClick: (book: Book) => void;
  onAddClick: () => void;
}

export const Library: React.FC<LibraryProps> = ({ books, onBookClick, onAddClick }) => {
  const [search, setSearch] = useState('');

  const filteredBooks = books.filter(b => 
    b.title.toLowerCase().includes(search.toLowerCase()) || 
    b.author.toLowerCase().includes(search.toLowerCase())
  );

  return (
    <div className="flex flex-col h-full bg-background-dark">
      <header className="sticky top-0 z-30 bg-background-dark/95 backdrop-blur-md border-b border-white/5 pb-2 pt-4">
        <div className="flex items-center px-4 py-3 justify-between">
          <div className="w-10"></div>
          <h2 className="text-xl font-bold leading-tight tracking-tight flex-1 text-center">Книжная полка</h2>
          <div className="w-10 flex justify-end">
            <button className="text-white hover:text-primary transition-colors">
              <span className="material-symbols-outlined">notifications</span>
            </button>
          </div>
        </div>

        <div className="px-4 pb-2">
          <div className="flex w-full items-stretch rounded-xl h-12 bg-surface-highlight shadow-sm ring-1 ring-white/5 focus-within:ring-2 focus-within:ring-primary transition-all">
            <div className="text-text-muted flex items-center justify-center pl-4 pr-2">
              <span className="material-symbols-outlined text-[20px]">search</span>
            </div>
            <input
              className="flex w-full min-w-0 flex-1 bg-transparent text-white focus:outline-none placeholder:text-text-muted text-base font-normal"
              placeholder="Поиск по названию или автору..."
              value={search}
              onChange={(e) => setSearch(e.target.value)}
            />
          </div>
        </div>
      </header>

      <div className="px-4 pt-2 pb-24 flex-1">
        <div className="flex flex-col gap-4 mb-6">
          <div className="flex h-10 w-full items-center justify-center rounded-lg bg-surface-highlight p-1">
            <button className="flex-1 h-full rounded-md bg-background-dark shadow-sm text-sm font-medium text-white">Все книги</button>
            <button className="flex-1 h-full text-sm font-medium text-text-muted">Категории</button>
          </div>

          <div className="flex gap-3 overflow-x-auto no-scrollbar pb-1">
            <button className="flex h-9 items-center justify-center gap-x-2 rounded-full bg-surface-highlight border border-white/5 px-4">
              <span className="material-symbols-outlined text-[18px]">sort</span>
              <span className="text-white text-sm font-medium">Сортировка</span>
            </button>
            <button className="flex h-9 items-center justify-center gap-x-2 rounded-full bg-surface-highlight border border-white/5 px-4">
              <span className="material-symbols-outlined text-[18px]">filter_list</span>
              <span className="text-white text-sm font-medium">Фильтр</span>
            </button>
            <button className="flex h-9 items-center justify-center gap-x-2 rounded-full bg-surface-highlight border border-white/5 px-4 whitespace-nowrap">
              <span className="text-white text-sm font-medium">Непрочитанные</span>
            </button>
          </div>
        </div>

        <div className="grid grid-cols-2 gap-4">
          {filteredBooks.map((book) => (
            <div key={book.id} className="flex flex-col gap-2 group cursor-pointer" onClick={() => onBookClick(book)}>
              <div className="relative w-full aspect-[2/3] rounded-lg overflow-hidden shadow-md group-hover:shadow-xl transition-all duration-300 bg-surface-dark">
                <img src={book.coverUrl || 'https://picsum.photos/seed/placeholder/400/600'} className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105" alt={book.title} />
                
                {book.status === 'reading' && (
                  <div className="absolute bottom-0 left-0 right-0 h-1 bg-black/50">
                    <div className="h-full bg-primary" style={{ width: `${book.progress || 0}%` }}></div>
                  </div>
                )}
                
                {book.status === 'done' && (
                  <div className="absolute top-2 left-2 bg-primary/90 text-white text-[10px] font-bold px-2 py-0.5 rounded-full backdrop-blur-sm">DONE</div>
                )}

                {book.isFavorite && (
                  <div className="absolute top-2 right-2 bg-black/60 backdrop-blur-sm rounded-full p-1">
                    <span className="material-symbols-outlined text-white text-[14px] fill-current">favorite</span>
                  </div>
                )}
              </div>
              <div>
                <h3 className="text-white text-base font-semibold leading-tight line-clamp-1">{book.title}</h3>
                <p className="text-text-muted text-sm font-normal leading-normal line-clamp-1">{book.author}</p>
              </div>
            </div>
          ))}
        </div>
      </div>

      <button
        onClick={onAddClick}
        className="fixed bottom-24 right-5 z-40 bg-primary text-white w-14 h-14 rounded-full shadow-lg shadow-primary/40 flex items-center justify-center hover:scale-110 active:scale-95 transition-all"
      >
        <span className="material-symbols-outlined text-[28px]">add</span>
      </button>
    </div>
  );
};