import { Building, CalendarClock, ClipboardList, Edit, Eye, Mail, MoreHorizontal, NotebookPen, Pin, Trash2 } from 'lucide-react';
import NoteCard from './NoteCard';
import { TimelineItem } from './Timeline';
import { Button } from './ui/button';
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from './ui/dropdown-menu';

interface PinnedSectionProps {
    pinnedItems: TimelineItem[];
    onTaskPin: (id: number) => void;
    onTaskDelete: any;
    onTaskEdit: any;
    onTaskView?: any;
    getActivityConfig: (type: string) => any;
}

export default function PinnedSection({ pinnedItems, onTaskPin, onTaskDelete, onTaskEdit, onTaskView, getActivityConfig }: PinnedSectionProps) {
    if (pinnedItems.length === 0) {
        return null;
    }

    const pinnedNotes = pinnedItems.filter((item) => item.type === 'note');
    const pinnedOtherItems = pinnedItems.filter((item) => item.type !== 'note');

    return (
        <div className="relative">
            {/* Pinned Header */}
            <div className="sticky top-0 z-10 mx-2 mb-4 bg-white/95 backdrop-blur-sm">
                <div className="flex items-center justify-between">
                    <div className="flex items-center gap-3">
                        <Pin className="h-4 w-4 fill-amber-500 text-amber-500" />
                        <span className="text-sm font-bold tracking-wider text-slate-700 uppercase">Pinned</span>
                    </div>
                    <span className="rounded-md bg-amber-100 px-2.5 py-1 text-xs font-semibold text-amber-700">{pinnedItems.length}</span>
                </div>
            </div>

            {/* Pinned Notes Grid */}
            {pinnedNotes.length > 0 && (
                <div className="relative mb-8">
                    <div className="absolute top-0 bottom-0 left-4 w-px bg-gradient-to-b from-slate-200 via-slate-300 to-slate-200" />

                    <div className="relative pl-12">
                        <div className="absolute top-1 left-0 flex items-center justify-center">
                            <div className="absolute h-8 w-8 rounded-full bg-yellow-500 opacity-0 transition-all duration-300 hover:scale-125 hover:opacity-10" />
                            <div className="relative z-10 flex h-8 w-8 items-center justify-center rounded-full bg-yellow-500 shadow-lg ring-4 ring-white transition-transform duration-200">
                                <NotebookPen className="h-4 w-4 text-white" />
                            </div>
                        </div>

                        <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
                            {pinnedNotes.map((item, itemIndex) => {
                                const config = getActivityConfig(item.type);
                                return (
                                    <div key={`pinned-note-${item.id}`} style={{ animation: `fadeInUp 0.4s ease-out ${itemIndex * 0.05}s both` }}>
                                        <NoteCard
                                            id={item.id}
                                            title={item.title}
                                            content={item.description || ''}
                                            createdAt={item.timestamp}
                                            tag={config.label}
                                            tagColor="border-yellow-200 bg-yellow-50 text-yellow-800"
                                            borderTopColor={config.borderColor}
                                            isPinned={true}
                                            onTogglePin={() => onTaskPin(item.id)}
                                            onDelete={() => onTaskDelete(item.id, item.type)}
                                            onEdit={() => onTaskEdit(item.id, item.type)}
                                            onView={() => onTaskView?.(item.id, item.type)}
                                            creator={item.metadata?.[0] ? { name: String(item.metadata[0].value), avatar: undefined } : undefined}
                                        />
                                    </div>
                                );
                            })}
                        </div>
                    </div>
                </div>
            )}

            {/* Pinned Other Items */}
            {pinnedOtherItems.length > 0 && (
                <div className="relative">
                    <div className="absolute top-0 bottom-0 left-4 w-px bg-gradient-to-b from-slate-200 via-slate-300 to-slate-200" />
                    <div className="space-y-6">
                        {pinnedOtherItems.map((item, itemIndex) => {
                            const config = getActivityConfig(item.type);
                            const IconComponent = config.icon;
                            return (
                                <div
                                    key={`pinned-${item.id}`}
                                    className="group/item relative pl-12"
                                    style={{ animation: `fadeInUp 0.4s ease-out ${itemIndex * 0.05}s both` }}
                                >
                                    <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>
                                    <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`}
                                    >
                                        <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">
                                            <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 className="" onClick={() => onTaskPin(item.id)}>
                                                        <Pin className="h-3.5 w-3.5 fill-amber-500 text-amber-500" />
                                                    </div>
                                                </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={() => onTaskView?.(item.id, item.type)}>
                                                            <Eye className="mr-2 h-3 w-3" />
                                                            View
                                                        </DropdownMenuItem>
                                                        <DropdownMenuItem onClick={() => onTaskEdit(item.id, item.type)}>
                                                            <Edit className="mr-2 h-3 w-3" />
                                                            Edit
                                                        </DropdownMenuItem>
                                                        <DropdownMenuItem onClick={() => onTaskPin(item.id)}>
                                                            <Pin className="mr-2 h-3 w-3" />
                                                            Unpin
                                                        </DropdownMenuItem>
                                                        <DropdownMenuItem className="text-red-600" onClick={() => onTaskDelete(item.id, item.type)}>
                                                            <Trash2 className="mr-2 h-3 w-3" />
                                                            Delete
                                                        </DropdownMenuItem>
                                                    </DropdownMenuContent>
                                                </DropdownMenu>
                                            </div>
                                            <h4 className="mb-2 line-clamp-2 text-[15px] leading-snug font-semibold text-slate-900 transition-colors">
                                                {item.title}
                                            </h4>
                                            {item.description && (
                                                <p className="mb-2 line-clamp-3 text-[13px] leading-relaxed text-slate-600">{item.description}</p>
                                            )}
                                            {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">{meta.value}</span>
                                                        </div>
                                                    ))}
                                                </div>
                                            )}
                                            <div className="flex items-end justify-between gap-3">
                                                <div className="mt-3 flex flex-wrap gap-2">
                                                    {item.type === 'task' && (
                                                        <>
                                                            <span className="inline-flex items-center gap-1 rounded-full border border-blue-200 bg-blue-50 px-2.5 py-1 text-[10px] font-semibold text-blue-700">
                                                                <ClipboardList className="h-3 w-3" />
                                                                In Progress
                                                            </span>
                                                            <span className="inline-flex items-center gap-1 rounded-full border border-purple-200 bg-purple-50 px-2.5 py-1 text-[10px] font-semibold text-purple-700">
                                                                <CalendarClock className="h-3 w-3" />
                                                                High Priority
                                                            </span>
                                                        </>
                                                    )}
                                                    {item.type === 'email' && (
                                                        <>
                                                            <span className="inline-flex items-center gap-1 rounded-full border border-emerald-200 bg-emerald-50 px-2.5 py-1 text-[10px] font-semibold text-emerald-700">
                                                                <Mail className="h-3 w-3" />
                                                                Sent
                                                            </span>
                                                            <span className="inline-flex items-center gap-1 rounded-full border border-amber-200 bg-amber-50 px-2.5 py-1 text-[10px] font-semibold text-amber-700">
                                                                <Building className="h-3 w-3" />
                                                                Business
                                                            </span>
                                                        </>
                                                    )}
                                                </div>
                                                <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>
                            );
                        })}
                    </div>
                </div>
            )}
        </div>
    );
}