import { useCallback, useState } from 'react';
import { ActivityTimeline } from '@/features/documents/components/activity-timeline';
import type { DocumentActivityTimelineItem, DocumentDetail } from '@/features/documents/types';

type DocumentActivityTabProps = {
    document: DocumentDetail;
};

export function DocumentActivityTab({ document }: DocumentActivityTabProps) {
    const [items, setItems] = useState<DocumentActivityTimelineItem[]>(document.activity_timeline.data);
    const [hasMore, setHasMore] = useState(document.activity_timeline.has_more);
    const [currentPage, setCurrentPage] = useState(1);
    const [isLoadingMore, setIsLoadingMore] = useState(false);

    const handleLoadMore = useCallback(async () => {
        if (isLoadingMore || !hasMore) return;

        setIsLoadingMore(true);
        const nextPage = currentPage + 1;

        try {
            const res = await fetch(
                `/admin/documents/${document.id}/activity?page=${nextPage}`,
                { headers: { Accept: 'application/json' } },
            );

            if (!res.ok) return;

            const json = (await res.json()) as {
                data: DocumentActivityTimelineItem[];
                meta: { has_more: boolean; current_page: number };
            };

            setItems((prev) => [...prev, ...json.data]);
            setHasMore(json.meta.has_more);
            setCurrentPage(json.meta.current_page);
        } finally {
            setIsLoadingMore(false);
        }
    }, [isLoadingMore, hasMore, currentPage, document.id]);

    return (
        <div className="pb-2">
            <ActivityTimeline
                items={items}
                hasMore={hasMore}
                isLoadingMore={isLoadingMore}
                onLoadMore={handleLoadMore}
            />
        </div>
    );
}