import { Activity, BoomBox, Check, Eye } from 'lucide-react';
import { useMemo, useState } from 'react';
import { toast } from 'sonner';
import { Avatar, AvatarFallback, AvatarImage } from '../ui/avatar';
import { activityConfig } from './activityConfig';
import { TimelineItem as TimelineItemType } from './types';

interface Props {
    item: TimelineItemType;
    index: number;
    onPin: (id: number) => void;
    onDelete: (id: number, type: string) => void;
    onEdit: any;
    onView: any;
}

const ActivityTimelineItems = ({ item, index, onPin, onDelete, onEdit, onView }: Props) => {
    const config = useMemo(() => activityConfig[item.type] || activityConfig.default, [item.type]);
    console.log('🚀 ~ ActivityTimelineItems ~ config:', config);
    const IconComponent = config.icon || Activity;
    const [copiedField, setCopiedField] = useState<string | null>(null);
    const handleCopy = (text: string, field: string) => {
        navigator.clipboard
            .writeText(text)
            .then(() => {
                setCopiedField(field);
                setTimeout(() => {
                    setCopiedField(null);
                }, 500);
            })
            .catch(() => {
                toast.error('Failed to copy');
            });
    };
    return (
        <div
            key={item.id}
            className="group/item relative pl-16"
            style={{
                animation: `fadeInUp 0.4s ease-out ${index * 0.05}s both`,
            }}
        >
            {/* Timeline Dot - Enhanced with pulse */}
            <div className="absolute top-1 left-0 flex items-center justify-center">
                <div
                    className={`absolute h-8 w-8 ${config.iconBg} rounded-full opacity-0 transition-all duration-300 group-hover/item:scale-125 group-hover/item:opacity-10`}
                />
                <div
                    className={`relative h-8 w-8 ${config.iconBg} z-10 flex items-center justify-center rounded-full shadow-lg ring-4 ring-white transition-transform duration-200 group-hover/item:scale-105`}
                >
                    <IconComponent className="h-4 w-4 text-white" />
                </div>
                <div className="absolute left-8">
                    <hr className="w-8" />
                </div>
            </div>

            {/* Card - Premium Design */}
            <div className={`relative cursor-pointer overflow-hidden rounded-xl border bg-white transition-all duration-200`}>
                <div className="relative">
                    {/* Header with better spacing */}
                    <div className="mb-2 flex items-center justify-between gap-3 border-b pr-3">
                        <h2 className={`px-3 py-2 text-sm font-medium text-secondary`}>{config.label}</h2>

                        <time className="rounded px-2 py-0.5 text-[13px] font-medium whitespace-nowrap text-slate-500" dateTime={item.timestamp}>
                            {item.date}
                        </time>
                    </div>
                    <div className="flex items-start justify-between px-4 py-2">
                        <div className="flex items-center gap-3">
                            <div className={`ite h-9 w-3 rounded-2xl border-2 ${config.border}`}>
                                <div className={`mx-auto mt-0.5 h-7 w-[4px] rounded-full ${config.iconBg}`}></div>
                            </div>
                            <Avatar className="h-7 w-7 rounded-full ring-2 ring-slate-100">
                                <AvatarImage src={'https://i.pravatar.cc/400'} />
                                <AvatarFallback className="rounded-none bg-transparent">{'M'}</AvatarFallback>
                            </Avatar>
                            <div className="flex">
                                <div className="flex items-center gap-1">
                                    <span className="line-clamp-2 border-b border-dashed border-black text-[15px] leading-snug font-bold">
                                        {item?.data?.actor_name}
                                    </span>
                                    <span className="line-clamp-2 text-[15px] leading-snug">{item?.data?.description}</span>
                                </div>
                                <span
                                    onClick={() => handleCopy(item?.data?.actor?.uid, 'uid')}
                                    className="mx-2 flex items-center gap-1 rounded-md border bg-white px-2 py-1"
                                >
                                    <BoomBox className="h-4 w-4 text-secondary" />
                                    <p className="text-xs font-medium">{item?.data?.actor?.uid}</p>
                                </span>
                                {copiedField && (
                                    <div className="flex items-center gap-1 text-slate-600">
                                        <Check className="h-3 w-3" />
                                        <span className="text-xs font-medium">Copied</span>
                                    </div>
                                )}
                            </div>
                        </div>
                        <div className="rounded-xl border bg-white p-1" onClick={() => onView(item.id, item.type)}>
                            <Eye className="h-3.5 w-3.5" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default ActivityTimelineItems;