import React from 'react';
import styled from 'styled-components';
import {
  UI_BREAKPOINT_MOBILE,
  UI_BREAKPOINT_SMALL_LAPTOP,
} from '../../../constants/uiBreakpoints';
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;
    rightElement?: React.ReactNode;
  };
  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: 0.5rem;
  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: 0.25rem;
  min-height: 200px;
  max-height: 60vh;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;

  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.3) rgba(0, 0, 0, 0.2);

  @media (min-width: 360px) {
    padding: 0.5rem;
  }

  @media (min-width: 480px) {
    padding: 0.5rem;
  }

  &.grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
    align-items: start;
    justify-content: center;
    width: 100%;

    @media (min-width: 320px) {
      grid-template-columns: repeat(2, minmax(100px, 1fr));
    }

    @media (min-width: 400px) {
      grid-template-columns: repeat(2, minmax(120px, 1fr));
      gap: 0.75rem;
    }

    @media (min-width: 480px) {
      grid-template-columns: repeat(3, minmax(120px, 1fr));
      gap: 1rem;
    }

    @media (min-width: 768px) {
      grid-template-columns: repeat(4, minmax(120px, 1fr));
    }

    @media (min-width: ${UI_BREAKPOINT_MOBILE}) {
      grid-template-columns: repeat(
        ${props => Math.min(props.$gridColumns, 4)},
        minmax(120px, 1fr)
      );
    }

    @media (min-width: ${UI_BREAKPOINT_SMALL_LAPTOP}) {
      grid-template-columns: repeat(
        ${props => props.$gridColumns},
        minmax(120px, 1fr)
      );
    }

    .PaginatedContent-item {
      display: flex;
      align-items: flex-start;
      justify-content: center;
      height: ${props => props.$itemHeight ?? 'auto'};
      width: 100%;
      box-sizing: border-box;
      min-height: 120px;
    }
  }

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

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

  @media (min-width: 480px) {
    padding: 1rem;
  }
`;

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