import { useState, useMemo, useEffect, useCallback, CSSProperties } from 'react';
import { Card, Row, Col, Input, Select, Button, Typography, Spin, Empty, Tag, Image, Breadcrumb, message } from 'antd';
import { useNavigate } from 'react-router-dom';
import { useApi } from '@/hooks/useApi';
import { CardCatalogService } from '@/services/cardCatalog';
import { parseError } from '@/utils/errorHandler';
import { ROUTES } from '@/constants/routes';

interface CardSet {
  id: string;
  name: string;
  series: string | null;
  release_date: string | null;
  total_cards: number | null;
  set_code: string | null;
  symbol_url: string | null;
  logo_url: string | null;
  created_at: string;
  updated_at: string;
}

type SortOption = 'release_date_desc' | 'release_date_asc' | 'name_asc' | 'name_desc';

const CardSetsBrowsePage = () => {
  const [messageApi, contextHolder] = message.useMessage();
  const navigate = useNavigate();

  const [cardSets, setCardSets] = useState<CardSet[]>([]);
  const [filterSeries, setFilterSeries] = useState<string>('');
  const [sortBy, setSortBy] = useState<SortOption>('release_date_desc');
  const [offset, setOffset] = useState<number>(0);

  const { data: fetchedSets, loading, error, execute: fetchCardSets } = useApi(CardCatalogService.getCardSets);

  useEffect(() => {
    const fetchData = async () => {
      try {
        await fetchCardSets({
          limit: 100,
          offset,
          ...(filterSeries && { series: filterSeries })
        });
      } catch (e) {
        const { message: errorMessage } = parseError(e);
        messageApi.error(errorMessage || 'Failed to load card sets. Please try again.');
      }
    };
    void fetchData();
  }, [fetchCardSets, offset, filterSeries, messageApi]);

  useEffect(() => {
    if (fetchedSets) {
      setCardSets(fetchedSets as CardSet[]);
    }
  }, [fetchedSets]);

  const hasActiveFilter = useMemo(() => filterSeries !== '', [filterSeries]);

  const sortedCardSets = useMemo(() => {
    const sorted = [...cardSets];
    switch (sortBy) {
      case 'release_date_desc':
        return sorted.sort((a, b) => {
          if (!a.release_date) return 1;
          if (!b.release_date) return -1;
          return new Date(b.release_date).getTime() - new Date(a.release_date).getTime();
        });
      case 'release_date_asc':
        return sorted.sort((a, b) => {
          if (!a.release_date) return 1;
          if (!b.release_date) return -1;
          return new Date(a.release_date).getTime() - new Date(b.release_date).getTime();
        });
      case 'name_asc':
        return sorted.sort((a, b) => a.name.localeCompare(b.name));
      case 'name_desc':
        return sorted.sort((a, b) => b.name.localeCompare(a.name));
      default:
        return sorted;
    }
  }, [cardSets, sortBy]);

  const handleSeriesFilterChange = useCallback((value: string) => {
    setFilterSeries(value);
    setOffset(0);
  }, []);

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

  const handleClearFilters = useCallback(() => {
    setFilterSeries('');
    setSortBy('release_date_desc');
    setOffset(0);
  }, []);

  const handleNavigateToSetSearch = useCallback((setId: string) => {
    navigate(`${ROUTES.SEARCH}?card_set_id=${setId}`);
  }, [navigate]);

  const handleNavigateToHome = useCallback(() => {
    navigate(ROUTES.HOME);
  }, [navigate]);

  const mainContainerStyle: CSSProperties = {
    minHeight: '100vh',
    height: '100%',
    width: '100%',
    display: 'flex',
    flexDirection: 'column',
    backgroundColor: '#f5f5f5'
  };

  const pageHeaderSectionStyle: CSSProperties = {
    background: 'linear-gradient(135deg, #E3350D 0%, #b52a0a 100%)',
    padding: '32px 24px',
    width: '100%'
  };

  const headerContentWrapperStyle: CSSProperties = {
    maxWidth: '1200px',
    margin: '0 auto',
    width: '100%'
  };

  const breadcrumbStyle: CSSProperties = {
    marginBottom: '16px',
    color: 'rgba(255,255,255,0.8)'
  };

  const pageTitleStyle: CSSProperties = {
    color: '#ffffff',
    margin: '0 0 8px 0',
    fontSize: '32px',
    fontWeight: '700'
  };

  const pageSubtitleStyle: CSSProperties = {
    color: 'rgba(255,255,255,0.85)',
    fontSize: '16px'
  };

  const contentSectionStyle: CSSProperties = {
    maxWidth: '1200px',
    margin: '0 auto',
    width: '100%',
    padding: '24px',
    flex: '1'
  };

  const filterBarStyle: CSSProperties = {
    marginBottom: '24px',
    borderRadius: '8px'
  };

  const filterBarInnerStyle: CSSProperties = {
    display: 'flex',
    flexWrap: 'wrap',
    gap: '16px',
    alignItems: 'center'
  };

  const filterSeriesWrapperStyle: CSSProperties = {
    display: 'flex',
    flexDirection: 'column',
    gap: '4px',
    flex: '1',
    minWidth: '200px'
  };

  const filterSeriesLabelStyle: CSSProperties = {
    fontSize: '13px',
    color: '#666'
  };

  const filterSeriesInputStyle: CSSProperties = {
    width: '100%'
  };

  const sortWrapperStyle: CSSProperties = {
    display: 'flex',
    flexDirection: 'column',
    gap: '4px',
    minWidth: '200px'
  };

  const sortLabelStyle: CSSProperties = {
    fontSize: '13px',
    color: '#666'
  };

  const sortSelectStyle: CSSProperties = {
    width: '200px'
  };

  const clearFiltersButtonStyle: CSSProperties = {
    alignSelf: 'flex-end'
  };

  const resultsSummaryStyle: CSSProperties = {
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: '16px'
  };

  const resultsCountTextStyle: CSSProperties = {
    color: '#666',
    fontSize: '14px'
  };

  const loadingSpinnerStyle: CSSProperties = {
    display: 'flex',
    justifyContent: 'center',
    padding: '80px 0'
  };

  const setCardItemStyle: CSSProperties = {
    borderRadius: '8px',
    overflow: 'hidden',
    height: '100%',
    cursor: 'pointer',
    transition: 'transform 0.2s, box-shadow 0.2s'
  };

  const setCardLogoWrapperStyle: CSSProperties = {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    height: '120px',
    backgroundColor: '#fafafa',
    borderRadius: '8px',
    marginBottom: '12px',
    padding: '16px'
  };

  const setCardLogoStyle: CSSProperties = {
    maxHeight: '88px',
    objectFit: 'contain'
  };

  const setCardBodyStyle: CSSProperties = {
    display: 'flex',
    flexDirection: 'column',
    gap: '8px'
  };

  const setCardNameStyle: CSSProperties = {
    margin: '0',
    fontSize: '15px',
    fontWeight: '600'
  };

  const setCardSeriesTagStyle: CSSProperties = {
    width: 'fit-content',
    fontSize: '11px'
  };

  const setCardMetaRowStyle: CSSProperties = {
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginTop: '4px'
  };

  const setCardReleaseDateStyle: CSSProperties = {
    fontSize: '12px'
  };

  const setCardTotalCardsStyle: CSSProperties = {
    fontSize: '11px'
  };

  const setCardViewLinkStyle: CSSProperties = {
    fontSize: '13px',
    color: '#E3350D',
    marginTop: '8px',
    fontWeight: '500'
  };

  const emptyStateStyle: CSSProperties = {
    padding: '80px 0'
  };

  const footerSectionStyle: CSSProperties = {
    textAlign: 'center',
    padding: '24px',
    borderTop: '1px solid #f0f0f0',
    backgroundColor: '#ffffff'
  };

  const footerTextStyle: CSSProperties = {
    fontSize: '13px'
  };

  return (
    <div style={mainContainerStyle}>
      {contextHolder}
      <div style={pageHeaderSectionStyle}>
        <div style={headerContentWrapperStyle}>
          <Breadcrumb style={breadcrumbStyle}>
            <Breadcrumb.Item>
              <Typography.Link onClick={handleNavigateToHome} style={{ color: 'rgba(255,255,255,0.8)' }}>
                Home
              </Typography.Link>
            </Breadcrumb.Item>
            <Breadcrumb.Item>
              <span style={{ color: 'rgba(255,255,255,0.8)' }}>Card Sets</span>
            </Breadcrumb.Item>
          </Breadcrumb>
          <Typography.Title level={1} style={pageTitleStyle}>
            Browse Card Sets
          </Typography.Title>
          <Typography.Text style={pageSubtitleStyle}>
            Explore all Pokémon TCG expansions and sets. Click on a set to browse available listings.
          </Typography.Text>
        </div>
      </div>

      <div style={contentSectionStyle}>
        <Card bordered={false} style={filterBarStyle}>
          <div style={filterBarInnerStyle}>
            <div style={filterSeriesWrapperStyle}>
              <Typography.Text strong style={filterSeriesLabelStyle}>
                Filter by Series
              </Typography.Text>
              <Input.Search
                placeholder="Search by series (e.g. Sword & Shield, Base Set...)"
                allowClear
                enterButton="Filter"
                size="large"
                value={filterSeries}
                onChange={(e) => handleSeriesFilterChange(e.target.value)}
                onSearch={handleSeriesFilterChange}
                style={filterSeriesInputStyle}
              />
            </div>
            <div style={sortWrapperStyle}>
              <Typography.Text strong style={sortLabelStyle}>
                Sort By
              </Typography.Text>
              <Select
                size="large"
                value={sortBy}
                onChange={handleSortChange}
                style={sortSelectStyle}
                options={[
                  { value: 'release_date_desc', label: 'Release Date (Newest)' },
                  { value: 'release_date_asc', label: 'Release Date (Oldest)' },
                  { value: 'name_asc', label: 'Name (A-Z)' },
                  { value: 'name_desc', label: 'Name (Z-A)' }
                ]}
              />
            </div>
            <Button type="text" size="large" onClick={handleClearFilters} style={clearFiltersButtonStyle}>
              Clear Filters
            </Button>
          </div>
        </Card>

        <div style={resultsSummaryStyle}>
          <Typography.Text style={resultsCountTextStyle}>
            {sortedCardSets.length} sets found
          </Typography.Text>
        </div>

        {loading && (
          <div style={loadingSpinnerStyle}>
            <Spin size="large" tip="Loading card sets..." />
          </div>
        )}

        {!loading && sortedCardSets.length === 0 && (
          <Empty
            description="No card sets found matching your filters. Try adjusting your search criteria."
            style={emptyStateStyle}
          />
        )}

        {!loading && sortedCardSets.length > 0 && (
          <Row gutter={[24, 24]}>
            {sortedCardSets.map((item) => (
              <Col xs={24} sm={12} md={8} lg={6} key={item.id}>
                <Card
                  hoverable
                  bordered
                  style={setCardItemStyle}
                  onClick={() => handleNavigateToSetSearch(item.id)}
                >
                  <div style={setCardLogoWrapperStyle}>
                    <Image
                      src={item.logo_url || undefined}
                      preview={false}
                      fallback="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAiIGhlaWdodD0iODAiIHZpZXdCb3g9IjAgMCA4MCA4MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iODAiIGhlaWdodD0iODAiIHJ4PSI4IiBmaWxsPSIjZjBmMGYwIi8+PHRleHQgeD0iNDAiIHk9IjQ1IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmaWxsPSIjYmZiZmJmIiBmb250LXNpemU9IjEyIj5ObyBJbWFnZTwvdGV4dD48L3N2Zz4="
                      style={setCardLogoStyle}
                      alt={item.name}
                    />
                  </div>
                  <div style={setCardBodyStyle}>
                    <Typography.Title level={5} ellipsis={{ rows: 2 }} style={setCardNameStyle}>
                      {item.name}
                    </Typography.Title>
                    {item.series && (
                      <Tag color="red" style={setCardSeriesTagStyle}>
                        {item.series}
                      </Tag>
                    )}
                    <div style={setCardMetaRowStyle}>
                      {item.release_date && (
                        <Typography.Text type="secondary" style={setCardReleaseDateStyle}>
                          {new Date(item.release_date).toLocaleDateString()}
                        </Typography.Text>
                      )}
                      {item.total_cards !== null && (
                        <Tag color="default" style={setCardTotalCardsStyle}>
                          {item.total_cards} cards
                        </Tag>
                      )}
                    </div>
                    <Typography.Link style={setCardViewLinkStyle}>
                      Browse Listings →
                    </Typography.Link>
                  </div>
                </Card>
              </Col>
            ))}
          </Row>
        )}
      </div>

      <div style={footerSectionStyle}>
        <Typography.Text type="secondary" style={footerTextStyle}>
          PokeResell — Your trusted Pokémon card marketplace
        </Typography.Text>
      </div>
    </div>
  );
};

export default CardSetsBrowsePage;