import { useState, useMemo, useEffect, useCallback } from 'react';
import { Layout, Typography, Space, Badge, Button, Dropdown, Input, Card, Select, DatePicker, Row, Col, Tag, Carousel, Pagination, Spin, Empty, message } from 'antd';
import { BellOutlined, UserOutlined, SearchOutlined, FilterOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import { request } from '../api/client';
import { useAppContext } from '../store/AppContext';

interface BookAuthorResponse {
  author_id: string;
  author_order: number | null;
}

interface BookResponse {
  id: string;
  title: string;
  book_authors: BookAuthorResponse[];
  isbn?: string | null;
  publisher?: string | null;
  publication_date?: string | null;
  edition?: string | null;
  number_of_pages?: number | null;
  language?: string | null;
  description?: string | null;
  cover_image_url?: string | null;
}

interface CategoryResponse {
  id: string;
  name: string;
  description?: string | null;
  parent_category_id?: string | null;
  created_at: string;
  updated_at: string;
}

export default function PublicCatalogPage() {
  const [messageApi, contextHolder] = message.useMessage();
  const navigate = useNavigate();
  const { unreadNotificationCount, currentUser } = useAppContext();

  const [books, setBooks] = useState<BookResponse[]>([]);
  const [newArrivals, setNewArrivals] = useState<BookResponse[]>([]);
  const [popularBooks, setPopularBooks] = useState<BookResponse[]>([]);
  const [categories, setCategories] = useState<CategoryResponse[]>([]);
  const [searchQuery, setSearchQuery] = useState<string>('');
  const [selectedCategory, setSelectedCategory] = useState<string>('');
  const [authorFilter, setAuthorFilter] = useState<string>('');
  const [languageFilter, setLanguageFilter] = useState<string>('');
  const [yearRangeFilter, setYearRangeFilter] = useState<[string, string] | []>([]);
  const [sortBy, setSortBy] = useState<string>('relevance');
  const [currentPage, setCurrentPage] = useState<number>(1);
  const [totalResults, setTotalResults] = useState<number>(0);
  const [isSearching, setIsSearching] = useState<boolean>(false);
  const [loading, setLoading] = useState<boolean>(false);
  const [advancedFiltersVisible, setAdvancedFiltersVisible] = useState<boolean>(false);
  const [searchResults, setSearchResults] = useState<BookResponse[]>([]);

  const hasSearchResults = useMemo(() => {
    return searchResults.length > 0 || isSearching;
  }, [searchResults, isSearching]);

  const totalPages = useMemo(() => {
    return Math.ceil(totalResults / 20);
  }, [totalResults]);

  const categoryOptions = useMemo(() => {
    return categories.map(c => ({ label: c.name, value: c.id }));
  }, [categories]);

  useEffect(() => {
    const fetchInitialData = async () => {
      try {
        const booksRes = await request<BookResponse[]>({
          method: 'GET',
          path: '/catalog/books',
          query: { limit: 20, offset: 0 }
        });
        setBooks(booksRes.data);
      } catch (error) {
        messageApi.error('Failed to load books');
      }

      try {
        const categoriesRes = await request<CategoryResponse[]>({
          method: 'GET',
          path: '/catalog/categories',
          query: { limit: 50, offset: 0 }
        });
        setCategories(categoriesRes.data);
      } catch (error) {
        messageApi.error('Failed to load categories');
      }

      try {
        const newArrivalsRes = await request<BookResponse[]>({
          method: 'GET',
          path: '/catalog/books',
          query: { limit: 10, offset: 0 }
        });
        setNewArrivals(newArrivalsRes.data);
      } catch (error) {
        messageApi.error('Failed to load new arrivals');
      }

      try {
        const popularBooksRes = await request<BookResponse[]>({
          method: 'GET',
          path: '/catalog/books',
          query: { limit: 10, offset: 0 }
        });
        setPopularBooks(popularBooksRes.data);
      } catch (error) {
        messageApi.error('Failed to load popular books');
      }
    };

    fetchInitialData();
  }, [messageApi]);

  const searchBooks = useCallback(async () => {
    setIsSearching(true);
    setCurrentPage(1);
    setLoading(true);

    try {
      const queryParams: Record<string, string | number> = {
        limit: 20,
        offset: 0
      };

      if (searchQuery) queryParams.title = searchQuery;
      if (authorFilter) queryParams.author = authorFilter;
      if (selectedCategory) queryParams.category = selectedCategory;
      if (languageFilter) queryParams.language = languageFilter;

      const res = await request<BookResponse[]>({
        method: 'GET',
        path: '/catalog/books/search',
        query: queryParams
      });

      setSearchResults(res.data);
      setTotalResults(res.data.length);
    } catch (error) {
      messageApi.error('Failed to search books. Please try again.');
    } finally {
      setLoading(false);
    }
  }, [searchQuery, authorFilter, selectedCategory, languageFilter, messageApi]);

  const applyAdvancedFilters = useCallback(async () => {
    setIsSearching(true);
    setCurrentPage(1);
    setLoading(true);

    try {
      const queryParams: Record<string, string | number> = {
        limit: 20,
        offset: 0
      };

      if (searchQuery) queryParams.title = searchQuery;
      if (authorFilter) queryParams.author = authorFilter;
      if (selectedCategory) queryParams.category = selectedCategory;
      if (languageFilter) queryParams.language = languageFilter;

      const res = await request<BookResponse[]>({
        method: 'GET',
        path: '/catalog/books/search',
        query: queryParams
      });

      setSearchResults(res.data);
      setTotalResults(res.data.length);
    } catch (error) {
      messageApi.error('Failed to apply filters. Please try again.');
    } finally {
      setLoading(false);
    }
  }, [searchQuery, authorFilter, selectedCategory, languageFilter, messageApi]);

  const clearFilters = useCallback(() => {
    setSearchQuery('');
    setSelectedCategory('');
    setAuthorFilter('');
    setLanguageFilter('');
    setYearRangeFilter([]);
    setIsSearching(false);
    setCurrentPage(1);
    setSearchResults([]);
    messageApi.success('Filters cleared');
  }, [messageApi]);

  const navigateToBookDetail = useCallback((bookId: string) => {
    navigate(`/books/${bookId}`);
  }, [navigate]);

  const navigateToLogin = useCallback(() => {
    navigate('/login');
  }, [navigate]);

  const navigateToRegister = useCallback(() => {
    navigate('/register');
  }, [navigate]);

  const navigateToDashboard = useCallback(() => {
    navigate('/dashboard');
  }, [navigate]);

  const handleCategorySelect = useCallback((categoryId: string) => {
    setSelectedCategory(categoryId);
    setIsSearching(true);
    setCurrentPage(1);
  }, []);

  const handlePageChange = useCallback((page: number) => {
    setCurrentPage(page);
  }, []);

  const handleSortChange = useCallback((value: string) => {
    setSortBy(value);
  }, []);

  const toggleAdvancedFilters = useCallback(() => {
    setAdvancedFiltersVisible(!advancedFiltersVisible);
  }, [advancedFiltersVisible]);

  const userMenuItems = [
    { key: 'dashboard', label: 'My Dashboard', onClick: navigateToDashboard },
    { key: 'profile', label: 'My Profile' },
    { key: 'logout', label: 'Logout' }
  ];

  return (
    <div style={{ minHeight: '100vh', height: '100%', width: '100%', display: 'flex', flexDirection: 'column' }}>
      {contextHolder}
      <Layout style={{ minHeight: '100vh', width: '100%' }}>
        <Layout.Header style={{
          background: '#ffffff',
          padding: '0 24px',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
          boxShadow: '0 2px 8px rgba(0,0,0,0.06)',
          position: 'sticky',
          top: 0,
          zIndex: 100
        }}>
          <Typography.Title level={4} style={{ margin: 0, color: '#1677ff' }}>
            Library Management System
          </Typography.Title>
          <Space size="middle">
            <Badge count={unreadNotificationCount}>
              <BellOutlined style={{ fontSize: '20px' }} />
            </Badge>
            {!currentUser ? (
              <>
                <Button type="default" onClick={navigateToLogin}>Login</Button>
                <Button type="primary" onClick={navigateToRegister}>Register</Button>
              </>
            ) : (
              <Dropdown menu={{ items: userMenuItems }} trigger={['click']}>
                <Button icon={<UserOutlined />} shape="circle" />
              </Dropdown>
            )}
          </Space>
        </Layout.Header>

        <Layout.Content style={{ padding: '0' }}>
          <div style={{
            background: 'linear-gradient(135deg, #1677ff 0%, #4096ff 100%)',
            padding: '64px 24px',
            textAlign: 'center',
            color: '#ffffff'
          }}>
            <Typography.Title level={1} style={{ color: '#ffffff', marginBottom: '8px' }}>
              Welcome to the Library
            </Typography.Title>
            <Typography.Paragraph style={{ color: 'rgba(255,255,255,0.85)', fontSize: '18px', marginBottom: '32px' }}>
              Discover thousands of books, explore new worlds, and expand your knowledge
            </Typography.Paragraph>
            <div style={{ maxWidth: '700px', margin: '0 auto' }}>
              <Input.Search
                placeholder="Search by title, author, ISBN, or keyword..."
                size="large"
                enterButton
                allowClear
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                onSearch={searchBooks}
                style={{ width: '100%' }}
              />
              <Button
                type="link"
                size="small"
                onClick={toggleAdvancedFilters}
                style={{ color: 'rgba(255,255,255,0.85)', marginTop: '12px' }}
              >
                <FilterOutlined /> Advanced Filters
              </Button>
            </div>
          </div>

          <div style={{ maxWidth: '1200px', margin: '0 auto', padding: '32px 24px' }}>
            {advancedFiltersVisible && (
              <Card title="Advanced Search Filters" bordered style={{ marginBottom: '24px' }}>
                <Row gutter={[16, 16]}>
                  <Col xs={24} sm={12} md={6}>
                    <div>
                      <label style={{ display: 'block', marginBottom: '8px' }}>Author</label>
                      <Input
                        placeholder="Filter by author name"
                        value={authorFilter}
                        onChange={(e) => setAuthorFilter(e.target.value)}
                      />
                    </div>
                  </Col>
                  <Col xs={24} sm={12} md={6}>
                    <div>
                      <label style={{ display: 'block', marginBottom: '8px' }}>Category</label>
                      <Select
                        placeholder="Select category"
                        allowClear
                        options={categoryOptions}
                        value={selectedCategory || undefined}
                        onChange={(value) => setSelectedCategory(value || '')}
                        style={{ width: '100%' }}
                      />
                    </div>
                  </Col>
                  <Col xs={24} sm={12} md={6}>
                    <div>
                      <label style={{ display: 'block', marginBottom: '8px' }}>Language</label>
                      <Select
                        placeholder="Select language"
                        allowClear
                        value={languageFilter || undefined}
                        onChange={(value) => setLanguageFilter(value || '')}
                        options={[
                          { label: 'English', value: 'English' },
                          { label: 'Spanish', value: 'Spanish' },
                          { label: 'French', value: 'French' },
                          { label: 'German', value: 'German' }
                        ]}
                        style={{ width: '100%' }}
                      />
                    </div>
                  </Col>
                  <Col xs={24} sm={12} md={6}>
                    <div>
                      <label style={{ display: 'block', marginBottom: '8px' }}>Publication Year Range</label>
                      <DatePicker.RangePicker
                        picker="year"
                        placeholder={['From Year', 'To Year']}
                        style={{ width: '100%' }}
                      />
                    </div>
                  </Col>
                </Row>
                <Space style={{ marginTop: '16px' }}>
                  <Button type="primary" onClick={applyAdvancedFilters}>Apply Filters</Button>
                  <Button type="default" onClick={clearFilters}>Clear All</Button>
                </Space>
              </Card>
            )}

            {!isSearching && (
              <>
                <div style={{ marginBottom: '32px' }}>
                  <Typography.Title level={4} style={{ marginBottom: '16px' }}>Browse by Category</Typography.Title>
                  <Space wrap size="small">
                    {categories.map(category => (
                      <Tag
                        key={category.id}
                        color="blue"
                        style={{ cursor: 'pointer' }}
                        onClick={() => handleCategorySelect(category.id)}
                      >
                        {category.name}
                      </Tag>
                    ))}
                  </Space>
                </div>

                <div style={{ marginBottom: '40px' }}>
                  <Typography.Title level={3} style={{ marginBottom: '16px' }}>New Arrivals</Typography.Title>
                  <Row gutter={[16, 16]}>
                    {newArrivals.map(book => (
                      <Col key={book.id} xs={24} sm={12} md={8} lg={6}>
                        <Card
                          hoverable
                          cover={book.cover_image_url ? <img alt={book.title} src={book.cover_image_url} /> : null}
                          onClick={() => navigateToBookDetail(book.id)}
                          style={{ cursor: 'pointer' }}
                        >
                          <Card.Meta title={book.title} />
                        </Card>
                      </Col>
                    ))}
                  </Row>
                </div>

                <div style={{ marginBottom: '40px' }}>
                  <Typography.Title level={3} style={{ marginBottom: '16px' }}>Popular Books</Typography.Title>
                  <Row gutter={[16, 16]}>
                    {popularBooks.map(book => (
                      <Col key={book.id} xs={24} sm={12} md={8} lg={6}>
                        <Card
                          hoverable
                          cover={book.cover_image_url ? <img alt={book.title} src={book.cover_image_url} /> : null}
                          onClick={() => navigateToBookDetail(book.id)}
                          style={{ cursor: 'pointer' }}
                        >
                          <Card.Meta title={book.title} />
                        </Card>
                      </Col>
                    ))}
                  </Row>
                </div>
              </>
            )}

            {isSearching && (
              <div style={{ marginBottom: '40px' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '16px' }}>
                  <Typography.Title level={3} style={{ margin: 0 }}>Search Results</Typography.Title>
                  <Select
                    value={sortBy}
                    onChange={handleSortChange}
                    options={[
                      { label: 'Relevance', value: 'relevance' },
                      { label: 'Title A-Z', value: 'title_asc' },
                      { label: 'Title Z-A', value: 'title_desc' },
                      { label: 'Author', value: 'author' },
                      { label: 'Newest First', value: 'date_desc' },
                      { label: 'Oldest First', value: 'date_asc' }
                    ]}
                    style={{ width: '180px' }}
                  />
                </div>

                {loading ? (
                  <div style={{ display: 'flex', justifyContent: 'center', padding: '48px' }}>
                    <Spin size="large" />
                  </div>
                ) : searchResults.length > 0 ? (
                  <>
                    <Row gutter={[16, 16]}>
                      {searchResults.map(book => (
                        <Col key={book.id} xs={24} sm={12} md={8} lg={6}>
                          <Card
                            hoverable
                            cover={book.cover_image_url ? <img alt={book.title} src={book.cover_image_url} /> : null}
                            onClick={() => navigateToBookDetail(book.id)}
                            style={{ cursor: 'pointer' }}
                          >
                            <Card.Meta title={book.title} />
                          </Card>
                        </Col>
                      ))}
                    </Row>
                    <Pagination
                      current={currentPage}
                      pageSize={20}
                      total={totalResults}
                      showSizeChanger={false}
                      showQuickJumper
                      onChange={handlePageChange}
                      style={{ textAlign: 'center', marginTop: '24px' }}
                    />
                  </>
                ) : (
                  <Empty description="No books found matching your search criteria" style={{ padding: '48px' }} />
                )}
              </div>
            )}
          </div>
        </Layout.Content>

        <Layout.Footer style={{ background: '#f5f5f5', padding: '48px 24px' }}>
          <Row gutter={[32, 32]} style={{ maxWidth: '1200px', margin: '0 auto' }}>
            <Col xs={24} md={8}>
              <div>
                <Typography.Title level={5}>About the Library</Typography.Title>
                <Typography.Paragraph style={{ color: 'rgba(0,0,0,0.65)' }}>
                  Your community library providing access to knowledge, resources, and programs for all ages.
                </Typography.Paragraph>
              </div>
            </Col>
            <Col xs={24} md={8}>
              <div>
                <Typography.Title level={5}>Library Policies</Typography.Title>
                <Typography.Paragraph style={{ color: 'rgba(0,0,0,0.65)' }}>
                  Loan period: 14 days • Max renewals: 2 • Max loans: 5 • Overdue fine: $0.50/day
                </Typography.Paragraph>
              </div>
            </Col>
            <Col xs={24} md={8}>
              <div>
                <Typography.Title level={5}>Contact Us</Typography.Title>
                <Typography.Paragraph style={{ color: 'rgba(0,0,0,0.65)' }}>
                  Visit us at your nearest branch or reach out via email for assistance.
                </Typography.Paragraph>
              </div>
            </Col>
          </Row>
          <Typography.Text type="secondary" style={{ display: 'block', textAlign: 'center', marginTop: '24px' }}>
            © 2025 Library Management System. All rights reserved.
          </Typography.Text>
        </Layout.Footer>
      </Layout>
    </div>
  );
}