import type { FC } from 'react';
import { useState } from 'react';
import React from 'react';
import {
    Alert,
    Card,
    GridTable,
    InfoMessage,
    SearchInput,
    Select,
} from '@theorchard/suite-components';
import { paginate } from 'src/utils/pagination';
import { DateCell, LegacyStatusCell, TypeCell } from './tableCells';
import type { FormattedLegacyDeliveryHistory } from 'src/data/queries/orchardSoundRecording/selector';

export const CLASS_NAME = 'OsrPage-Views-LegacyDeliveryView';
const DEFAULT_PAGE_SIZE = 50;

const TYPE_OF_DELIVERY_OPTIONS = [
    { value: 'metadata_update', label: 'Metadata Update' },
    { value: 'takedown', label: 'Takedown' },
    { value: 'full_delivery', label: 'Full Delivery' },
];

interface Filter {
    value: string;
    label: string;
}

interface Props {
    legacyDeliveryHistory: FormattedLegacyDeliveryHistory[];
}

const LegacyDeliveryView: FC<Props> = ({ legacyDeliveryHistory }) => {
    const [page, setPage] = useState(0);
    const [pageSize, setPageSize] = useState(DEFAULT_PAGE_SIZE);
    const [searchQuery, setSearchQuery] = useState('');
    const [typeFilter, setTypeFilter] = useState<Filter | undefined>();

    const filtered = legacyDeliveryHistory.filter(entry => {
        const matchesSearch =
            !searchQuery.trim() ||
            entry.upc.toLowerCase().includes(searchQuery.toLowerCase()) ||
            entry.isrc.toLowerCase().includes(searchQuery.toLowerCase());
        const matchesType =
            !typeFilter ||
            (entry.type ?? '').toLowerCase().includes(typeFilter.value);
        return matchesSearch && matchesType;
    });

    const paginatedHistory = paginate(filtered, pageSize);

    const handleSearch = (value: string) => {
        setSearchQuery(value);
        setPage(0);
    };

    const handleTypeFilter = (type: Filter | undefined) => {
        setTypeFilter(type);
        setPage(0);
    };

    if (!legacyDeliveryHistory?.length)
        return (
            <Alert
                variant="error"
                text={$t('orchardSoundRecordings.deliveryView.legacy.noData')}
            />
        );

    return (
        <>
            <Alert
                variant="information"
                text={$t(
                    'orchardSoundRecordings.deliveryView.legacy.productNote'
                )}
            />
            <div className={`${CLASS_NAME}-filters`}>
                <SearchInput
                    expanded
                    onChange={handleSearch}
                    placeholder={$t(
                        'orchardSoundRecordings.deliveryView.legacy.searchPlaceholder'
                    )}
                    value={searchQuery}
                />
                <Select
                    menuWidth={200}
                    options={TYPE_OF_DELIVERY_OPTIONS}
                    hideFilter={true}
                    placeholder={$t(
                        'orchardSoundRecordings.deliveryView.legacy.typeFilterPlaceholder'
                    )}
                    compact
                    onChange={handleTypeFilter}
                />
            </div>
            <Card suite className={CLASS_NAME}>
                <Card.Body>
                    {filtered.length > 0 ? (
                        <GridTable
                            className={`${CLASS_NAME}-table`}
                            data={paginatedHistory[page]}
                            variant="zebra"
                            paginated
                            totalCount={filtered.length}
                            page={page}
                            pageSize={pageSize}
                            onPageChange={(pageNumber: number) =>
                                setPage(pageNumber)
                            }
                            onPageSizeChange={(pageNumber: number) =>
                                setPageSize(pageNumber)
                            }
                        >
                            <GridTable.Column
                                name="service"
                                title={$t(
                                    'orchardSoundRecordings.deliveryView.headers.service'
                                )}
                            />
                            <GridTable.Column
                                name="upc"
                                title={$t(
                                    'orchardSoundRecordings.deliveryView.headers.upc'
                                )}
                            />
                            <GridTable.Column
                                name="isrc"
                                title={$t(
                                    'orchardSoundRecordings.deliveryView.headers.isrc'
                                )}
                            />
                            <GridTable.Column
                                Cell={TypeCell}
                                className={`${CLASS_NAME}-table-column-type`}
                                name="type"
                                sortable
                                title={$t(
                                    'orchardSoundRecordings.deliveryView.headers.type'
                                )}
                            />
                            <GridTable.Column
                                Cell={DateCell}
                                name="dateDelivered"
                                sortable
                                title={$t(
                                    'orchardSoundRecordings.deliveryView.headers.creationDate'
                                )}
                            />
                            <GridTable.Column
                                Cell={LegacyStatusCell}
                                name="status"
                                sortable
                                title={$t(
                                    'orchardSoundRecordings.deliveryView.headers.status'
                                )}
                            />
                        </GridTable>
                    ) : (
                        <InfoMessage
                            title={$t(
                                'orchardSoundRecordings.deliveryView.filters.missingData'
                            )}
                            description={$t(
                                'orchardSoundRecordings.deliveryView.filters.reset'
                            )}
                            illustration="error"
                            size="sm"
                        />
                    )}
                </Card.Body>
            </Card>
        </>
    );
};

export default LegacyDeliveryView;