import useAddOn from '@/hooks/use-addons';
import { CalendarClock } from 'lucide-react';
import { useEffect, useState } from 'react';
import ActivityTimelineItems from './ActivityTImelineItems';
import { createTimelineHandlers } from './timelineHandlers';
import { TimelineGroup, TimelineProps } from './types';

export default function ActivityTimeline({ groups, refetchData }: TimelineProps) {
    const [timelineData, setTimelineData] = useState<TimelineGroup[]>(groups);
    const { addOnOpen, addOnClose } = useAddOn();

    // Sync internal state with prop changes
    useEffect(() => {
        setTimelineData(groups);
    }, [groups]);

    // Create timeline handlers
    const { onTaskDelete, handleEditByType, handleViewByType, onTaskPin } = createTimelineHandlers({
        timelineData,
        setTimelineData,
        addOnOpen,
        addOnClose,
        refetchData,
    });

    // Filter out pinned items from regular groups
    const regularGroups = timelineData
        .map((group) => ({
            ...group,
            items: group.items.filter((item) => !item.isPinned),
        }))
        .filter((group) => group.items.length > 0);

    if (!groups || groups.length === 0) {
        return (
            <div className="flex flex-col items-center justify-center py-12 text-center">
                <div className="mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-slate-100">
                    <CalendarClock className="h-8 w-8 text-slate-400" />
                </div>
                <p className="text-sm font-medium text-slate-600">No data found!</p>
                <p className="mt-1 text-xs text-slate-500">Activity will appear here as it happens</p>
            </div>
        );
    }

    return (
        <div className="w-full">
            {regularGroups.map((group) => (
                <div key={group.label} className="relative pb-1 last:pb-0">
                    {/* Date Header - Clean & Minimal */}
                    <div className="sticky top-0 z-10 mx-2 my-4">
                        <div className="flex items-center justify-between">
                            <div className="flex items-center gap-3">
                                <CalendarClock className="h-4 w-4 text-slate-400" />
                                <span className="text-sm font-bold tracking-wider text-slate-700 uppercase">{group.label}</span>
                            </div>
                            {/* <span className="rounded-md bg-slate-100 px-2.5 py-1 text-xs font-semibold text-slate-500">{group.items.length}</span> */}
                        </div>
                    </div>

                    {/* Separate notes from other items */}
                    {(() => {
                        // const notes = group.items.filter((item) => item.type === 'note');
                        const otherItems = group.items;

                        return (
                            <>
                                {otherItems.length > 0 && (
                                    <div className="relative">
                                        {/* Vertical Timeline Line - Enhanced */}
                                        <div className="absolute top-0 bottom-0 left-4 w-px bg-slate-200" />
                                        {/* Activity Items */}
                                        <div className="space-y-6">
                                            {otherItems.map((item, index) => (
                                                <ActivityTimelineItems
                                                    key={item.id}
                                                    item={item}
                                                    index={index}
                                                    onPin={onTaskPin}
                                                    onDelete={onTaskDelete}
                                                    onEdit={handleEditByType}
                                                    onView={handleViewByType}
                                                />
                                            ))}
                                        </div>
                                    </div>
                                )}
                            </>
                        );
                    })()}
                </div>
            ))}
            {/* Animation styles */}
            <style>{`
                @keyframes fadeInUp {
                    from {
                        opacity: 0;
                        transform: translateY(20px);
                    }
                    to {
                        opacity: 1;
                        transform: translateY(0);
                    }
                }
            `}</style>
        </div>
    );
}