import { Activity, Edit, Eye, MoreHorizontal, Pin, Trash2 } from 'lucide-react';
import { useMemo } from 'react';
import { Button } from '../ui/button';
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '../ui/dropdown-menu';
import { activityConfig } from './activityConfig';
import StatusBadges from './StatusBadges';
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 TimelineItem = ({ item, index, onPin, onDelete, onEdit, onView }: Props) => {
    const config = useMemo(() => activityConfig[item.type] || activityConfig.default, [item.type]);
    const IconComponent = config.icon || Activity;

    return (
        <div
            key={item.id}
            className="group/item relative pl-12"
            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>

            {/* Card - Premium Design */}
            <div
                className={`relative border border-slate-200/80 bg-white ${config.borderColor} cursor-pointer overflow-hidden rounded-xl border-t-2 transition-all duration-200 hover:border-slate-300/80 hover:shadow-sm`}
            >
                {/* Subtle gradient overlay */}
                <div className="pointer-events-none absolute inset-0 bg-gradient-to-br from-white via-transparent to-slate-50/30" />

                <div className="relative p-4">
                    {/* Header with better spacing */}
                    <div className="mb-2 flex items-start justify-between gap-3">
                        <div className="flex min-w-0 flex-1 items-center gap-2.5">
                            <span
                                className={`inline-flex items-center gap-1 text-[11px] font-extrabold ${config.accentColor} rounded-md border border-slate-100 bg-slate-50 px-2.5 py-1 tracking-widest uppercase`}
                            >
                                {config.label}
                            </span>
                        </div>
                        <DropdownMenu>
                            <DropdownMenuTrigger asChild>
                                <Button variant="ghost" size="sm" className="h-6 w-6 p-0">
                                    <MoreHorizontal className="h-4 w-4 text-gray-400" />
                                </Button>
                            </DropdownMenuTrigger>
                            <DropdownMenuContent align="end">
                                <DropdownMenuItem onClick={() => onView(item.id, item.type)}>
                                    <Eye className="mr-2 h-3 w-3" />
                                    View
                                </DropdownMenuItem>
                                <DropdownMenuItem onClick={() => onEdit(item.id, item.type)}>
                                    <Edit className="mr-2 h-3 w-3" />
                                    Edit
                                </DropdownMenuItem>
                                <DropdownMenuItem onClick={() => onPin(item.id)}>
                                    <Pin className="mr-2 h-3 w-3" />
                                    {item.isPinned ? 'Unpin' : 'Pin'}
                                </DropdownMenuItem>
                                <DropdownMenuItem className="text-red-600" onClick={() => onDelete(item.id, item.type)}>
                                    <Trash2 className="mr-2 h-3 w-3" />
                                    Delete
                                </DropdownMenuItem>
                            </DropdownMenuContent>
                        </DropdownMenu>
                    </div>

                    {/* Title - Better typography */}
                    <h4 className="mb-2 line-clamp-2 text-[15px] leading-snug font-semibold text-slate-900">{item.title}</h4>

                    {/* Description - Improved readability */}
                    {item.description && <p className="mb-2 line-clamp-3 text-[13px] leading-relaxed text-slate-600">{item.description}</p>}

                    {/* Metadata Pills - Enhanced design */}
                    {item.metadata && item.metadata.length > 0 && (
                        <div className="mb-2 flex flex-wrap gap-2">
                            {item.metadata.map((meta, metaIndex) => (
                                <div
                                    key={metaIndex}
                                    className="inline-flex items-center gap-1.5 rounded-lg border border-slate-200/60 bg-gradient-to-br from-slate-50 to-slate-100/50 px-3 py-1.5 text-[11px] shadow-sm"
                                >
                                    <span className="text-slate-400">{meta.icon}</span>
                                    <span className="font-bold text-slate-600">{meta.label}:</span>
                                    <span className="max-w-[200px] truncate font-bold text-slate-900">
                                        {typeof meta.value === 'object' && meta.value !== null ? JSON.stringify(meta.value) : meta.value}
                                    </span>
                                </div>
                            ))}
                        </div>
                    )}

                    {/* Status Content - Better separation */}
                    {item.content && <div className="mt-3 border-t border-slate-200/60 pt-4">{item.content}</div>}

                    <div className="flex items-end justify-between gap-3">
                        {/* Status Badges */}
                        <StatusBadges item={item} />

                        {/* Timestamp */}
                        <time
                            className="rounded bg-slate-50 px-2 py-0.5 text-[11px] font-semibold whitespace-nowrap text-slate-500"
                            dateTime={item.timestamp}
                        >
                            {item.date}
                        </time>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default TimelineItem;