'use client';

import { useState } from 'react';
import { useQuery } from '@tanstack/react-query';
import { Search, Eye, Star, BookOpen } from 'lucide-react';
import Link from 'next/link';
import Image from 'next/image';
import { Book, BookSearchFilters } from '@/lib/types';

async function fetchBooks(filters: BookSearchFilters & { page: number; pageSize: number }) {
  const params = new URLSearchParams();
  
  Object.entries(filters).forEach(([key, value]) => {
    if (value !== undefined && value !== '') {
      params.append(key, value.toString());
    }
  });

  const response = await fetch(`/api/books?${params}`);
  if (!response.ok) {
    throw new Error('Failed to fetch books');
  }
  return response.json();
}

export default function BooksPage() {
  const [searchFilters, setSearchFilters] = useState<BookSearchFilters>({});
  const [page, setPage] = useState(1);
  const pageSize = 12;

  const { data, isLoading, error } = useQuery({
    queryKey: ['books', searchFilters, page, pageSize],
    queryFn: () => fetchBooks({ ...searchFilters, page, pageSize }),
  });

  const handleSearch = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    setPage(1);
  };

  const handleInputChange = (field: keyof BookSearchFilters, value: string) => {
    setSearchFilters(prev => ({
      ...prev,
      [field]: value || undefined,
    }));
  };

  return (
    <div className="min-h-screen bg-gray-50">
      <div className="container mx-auto px-4 py-8">
        {/* Header */}
        <div className="mb-8">
          <h1 className="text-3xl font-bold text-gray-800 mb-2">图书检索</h1>
          <p className="text-gray-600">搜索和浏览图书馆藏书</p>
        </div>

        {/* Search Filters */}
        <div className="bg-white rounded-lg shadow-md p-6 mb-8">
          <form onSubmit={handleSearch} className="space-y-4">
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  书名
                </label>
                <input
                  type="text"
                  className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                  placeholder="输入书名关键词"
                  value={searchFilters.title || ''}
                  onChange={(e) => handleInputChange('title', e.target.value)}
                />
              </div>
              
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  作者
                </label>
                <input
                  type="text"
                  className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                  placeholder="输入作者姓名"
                  value={searchFilters.author || ''}
                  onChange={(e) => handleInputChange('author', e.target.value)}
                />
              </div>
              
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  ISBN
                </label>
                <input
                  type="text"
                  className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                  placeholder="输入ISBN号"
                  value={searchFilters.isbn || ''}
                  onChange={(e) => handleInputChange('isbn', e.target.value)}
                />
              </div>
              
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  分类号
                </label>
                <input
                  type="text"
                  className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                  placeholder="输入分类号"
                  value={searchFilters.classificationNo || ''}
                  onChange={(e) => handleInputChange('classificationNo', e.target.value)}
                />
              </div>
            </div>
            
            <div className="flex flex-col sm:flex-row gap-4 items-end">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  状态
                </label>
                <select
                  className="px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                  value={searchFilters.status || ''}
                  onChange={(e) => handleInputChange('status', e.target.value)}
                >
                  <option value="">全部状态</option>
                  <option value="normal">正常</option>
                  <option value="damaged">损坏</option>
                  <option value="removed">下架</option>
                </select>
              </div>
              
              <div className="flex items-center">
                <input
                  type="checkbox"
                  id="available"
                  className="mr-2"
                  checked={searchFilters.available || false}
                  onChange={(e) => handleInputChange('available', e.target.checked ? 'true' : '')}
                />
                <label htmlFor="available" className="text-sm font-medium text-gray-700">
                  仅显示可借图书
                </label>
              </div>
              
              <button
                type="submit"
                className="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-md flex items-center gap-2 transition-colors"
              >
                <Search className="h-4 w-4" />
                搜索
              </button>
            </div>
          </form>
        </div>

        {/* Results */}
        {isLoading ? (
          <div className="text-center py-12">
            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto"></div>
            <p className="mt-4 text-gray-600">加载中...</p>
          </div>
        ) : error ? (
          <div className="text-center py-12">
            <p className="text-red-600">加载失败，请重试</p>
          </div>
        ) : (
          <>
            {/* Results Header */}
            <div className="flex justify-between items-center mb-6">
              <p className="text-gray-600">
                找到 {data?.data?.total || 0} 本图书
              </p>
            </div>

            {/* Books Grid */}
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
              {data?.data?.data?.map((book: Book) => (
                <div key={book.bookId} className="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow">
                  <div className="h-48 bg-gray-200 flex items-center justify-center">
                    {book.coverUrl ? (
                      <img
                        src={`https://picsum.photos/300/300?random=${book.bookId}`}
                        alt={book.title}
                        width={192}
                        height={192}
                        className="h-full w-full object-cover"
                      />
                    ) : (
                      <BookOpen className="h-16 w-16 text-gray-400" />
                    )}
                  </div>
                  
                  <div className="p-4">
                    <h3 className="font-semibold text-lg mb-2 line-clamp-2">
                      {book.title}
                    </h3>
                    
                    <p className="text-gray-600 text-sm mb-2">
                      作者: {book.authors?.join(', ')}
                    </p>
                    
                    <p className="text-gray-600 text-sm mb-2">
                      出版社: {book.publisher}
                    </p>
                    
                    <div className="flex items-center justify-between mb-2">
                      <span className="text-sm text-gray-500">
                        可借: {book.availableCopies}/{book.totalCopies}
                      </span>
                      <span className={`px-2 py-1 rounded-full text-xs ${
                        book.status === 'normal' ? 'bg-green-100 text-green-800' :
                        book.status === 'damaged' ? 'bg-yellow-100 text-yellow-800' :
                        'bg-red-100 text-red-800'
                      }`}>
                        {book.status === 'normal' ? '正常' :
                         book.status === 'damaged' ? '损坏' : '下架'}
                      </span>
                    </div>
                    
                    <div className="flex justify-between items-center">
                      <div className="flex items-center text-yellow-500">
                        <Star className="h-4 w-4 fill-current" />
                        <span className="text-sm ml-1">4.5</span>
                      </div>
                      
                      <Link
                        href={`/books/${book.bookId}`}
                        className="bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded text-sm flex items-center gap-1 transition-colors"
                      >
                        <Eye className="h-3 w-3" />
                        详情
                      </Link>
                    </div>
                  </div>
                </div>
              ))}
            </div>

            {/* Pagination */}
            {data?.data?.totalPages > 1 && (
              <div className="flex justify-center mt-8">
                <div className="flex gap-2">
                  {page > 1 && (
                    <button
                      onClick={() => setPage(page - 1)}
                      className="px-4 py-2 border border-gray-300 rounded-md hover:bg-gray-50"
                    >
                      上一页
                    </button>
                  )}
                  
                  {[...Array(Math.min(5, data.data.totalPages))].map((_, i) => {
                    const pageNum = i + 1;
                    return (
                      <button
                        key={pageNum}
                        onClick={() => setPage(pageNum)}
                        className={`px-4 py-2 border rounded-md ${
                          page === pageNum
                            ? 'bg-blue-600 text-white border-blue-600'
                            : 'border-gray-300 hover:bg-gray-50'
                        }`}
                      >
                        {pageNum}
                      </button>
                    );
                  })}
                  
                  {page < data.data.totalPages && (
                    <button
                      onClick={() => setPage(page + 1)}
                      className="px-4 py-2 border border-gray-300 rounded-md hover:bg-gray-50"
                    >
                      下一页
                    </button>
                  )}
                </div>
              </div>
            )}
          </>
        )}
      </div>
    </div>
  );
}