import React, { useEffect, useMemo, useState } from 'react';
import { TableBody, TooltipTrigger } from 'react-aria-components';
import { useNavigate } from 'react-router';
import { __ } from '@wordpress/i18n';
import BulkActionSelect from '@AC/BulkActionSelect';
import PageLayout from '@AC/PageLayout';
import { Button } from '@AC/ui/Button';
import { Cell, Column, Row, Table, TableHeader } from '@AC/ui/Table';
import { Tooltip } from '@AC/ui/Tooltip';
import FunnelWelcome from './FunnelWelcome';
import ArchiveSkeleton from '@AC/Skeleton/ArchiveSkeleton';
import { HideOnMobile } from '@Components/HideComponent';
import SvgLoader from '@Components/SvgLoader';
import useFunnelsStore from '@DataStore/funnels/funnelsStore';
import { useEntitlements } from '@AH/useEntitlements';
import { cn } from '@Utils/cn';
import { isPro } from '@Utils/isPro';
/**
* Funnel component displays a list of Chat Funnels.
* Includes bulk actions, table listing, pagination, and pro upgrade prompts.
*
* @component
* @returns {JSX.Element} The rendered Funnel component.
*/
export default function Funnel() {
const navigate = useNavigate();
const {
funnels: funnelList,
loading,
error,
loadFunnels,
removeFunnel,
cloneFunnel,
removeFunnels,
pagination,
resetFunnelWithDummyBlock,
resetLoading,
resetStore,
} = useFunnelsStore();
const { funnelLimits, hasFunnelsEntitlement, isPro: isProPlan } = useEntitlements();
const [selectedKeys, setSelectedKeys] = useState(new Set());
const [sortDescriptor, setSortDescriptor] = useState({ column: 'name', direction: 'ascending' });
const [selectedAction, setSelectedAction] = useState('bulk-actions');
const bulkActionOptions = useMemo(
() => [
{ value: 'bulk-actions', label: 'Bulk Actions' },
{ value: 'delete', label: 'Delete' },
],
[],
);
// Sorted items based on selected column and direction
const items = useMemo(() => {
const sorted = [...funnelList].sort(
(a, b) => a[sortDescriptor.column]?.localeCompare?.(b[sortDescriptor.column]) ?? 0,
);
return sortDescriptor.direction === 'descending' ? sorted.reverse() : sorted;
}, [sortDescriptor, funnelList]);
// Get selected item IDs
const selectedItems = useMemo(() => {
if (selectedKeys === 'all') return items.map((item) => item.id);
return items.filter((item) => selectedKeys.has(item.id)).map((item) => item.id);
}, [selectedKeys, items]);
/** Handle bulk action selection */
const handleSelectionChange = (key) => setSelectedAction(key);
/** Apply the selected bulk action */
const handleApply = async () => {
if (!selectedAction || selectedAction === 'bulk-actions')
return alert('Please select an action first.');
if (!selectedItems.length)
return alert('Please select at least one Funnel to apply the action.');
if (selectedAction === 'delete') await removeFunnels(selectedItems);
};
/** Delete a single funnel */
const handleDeleteFunnel = async (funnelId) => await removeFunnel(funnelId);
/** Clone a single funnel */
const handleCloneFunnel = async (funnelId) => {
// Check if user can create more funnels before cloning
if (!hasFunnelsEntitlement || !funnelLimits?.canCreateMore) {
setIsOpen(true);
return;
}
await cloneFunnel(funnelId);
};
/** Header buttons for creating new funnel */
const HeaderButtons = () => (
);
// Load funnels on component mount with proper cleanup
useEffect(() => {
// Reset store to ensure clean state when navigating from other routes
resetStore();
// Load funnels for the first page if user has entitlement
if (hasFunnelsEntitlement) {
loadFunnels(1);
}
// Cleanup function
return () => {
resetLoading();
};
}, []); // Empty dependency array - only run on mount
if (loading) return ;
// Show welcome screen for users without funnels entitlement or when no funnels exist
if (!hasFunnelsEntitlement || funnelList.length === 0) return ;
return (