import React from 'react';
import styled from 'styled-components';
import { usePagination } from '../../CraftBook/hooks/usePagination';
import { IOptionsProps } from '../../Dropdown';
import { Pagination } from '../Pagination/Pagination';
import { SearchHeader } from '../SearchHeader/SearchHeader';

interface IPaginatedContentProps<T> {
  items: T[];
  itemsPerPage?: number;
  renderItem: (item: T) => React.ReactNode;
  emptyMessage?: string;
  className?: string;
  filterOptions?: {
    options: IOptionsProps[];
    selectedOption: string;
    onOptionChange: (value: string) => void;
  };
  searchOptions?: {
    value: string;
    onChange: (value: string) => void;
    placeholder?: string;
  };
  dependencies?: any[];
  tabId?: string;
  layout?: 'grid' | 'list';
  gridColumns?: number;
  itemHeight?: string;
}

export const PaginatedContent = <T extends unknown>({
  items,
  itemsPerPage = 8,
  renderItem,
  emptyMessage = 'No items found',
  className,
  filterOptions,
  searchOptions,
  dependencies = [],
  tabId,
  layout = 'list',
  gridColumns = 4,
  itemHeight = '180px',
}: IPaginatedContentProps<T>): React.ReactElement => {
  const {
    currentPage,
    setCurrentPage,
    paginatedItems,
    totalPages,
  } = usePagination({
    items,
    itemsPerPage,
    dependencies: [...dependencies, tabId],
  });

  return (
    <Container className={className}>
      {(searchOptions || filterOptions) && (
        <SearchHeader
          searchOptions={searchOptions}
          filterOptions={filterOptions}
        />
      )}
      {items.length === 0 ? (
        <EmptyMessage>{emptyMessage}</EmptyMessage>
      ) : (
        <>
          <Content
            className={`PaginatedContent-content ${layout}`}
            $gridColumns={gridColumns}
            $itemHeight={itemHeight}
          >
            {paginatedItems.map((item, index) => (
              <div key={index} className="PaginatedContent-item">
                {renderItem(item)}
              </div>
            ))}
          </Content>
          <PaginationContainer className="PaginatedContent-pagination">
            <Pagination
              currentPage={currentPage}
              totalPages={totalPages}
              onPageChange={setCurrentPage}
            />
          </PaginationContainer>
        </>
      )}
    </Container>
  );
};

const Container = styled.div`
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: 400px;
  width: 100%;
`;

const Content = styled.div<{
  $gridColumns: number;
  $maxHeight?: string;
  $itemHeight?: string;
}>`
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
  padding: 1rem;
  min-height: 200px;
  max-height: ${props => props.$maxHeight};
  overflow-y: ${props => (props.$maxHeight ? 'auto' : 'visible')};

  &.grid {
    display: grid;
    grid-template-columns: repeat(
      ${props => props.$gridColumns},
      minmax(0, 1fr)
    );
    gap: 1rem;
    align-items: start;

    .PaginatedContent-item {
      display: flex;
      align-items: flex-start;
      height: ${props => props.$itemHeight ?? 'auto'};
    }
  }

  &.list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
`;

const PaginationContainer = styled.div`
  display: flex;
  justify-content: center;
  padding: 1rem;
`;

const EmptyMessage = styled.div`
  text-align: center;
  color: #9ca3af;
  padding: 2rem;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
`;
