import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
import { cn } from '@/lib/utils';
import { Calendar, Edit, Eye, MoreHorizontal, Pin, RotateCcw, Trash2 } from 'lucide-react';

export interface NoteCardProps {
    id: number;
    title: string;
    content: string;
    createdAt: string;
    tag?: string;
    tagColor?: string;
    borderTopColor?: string;
    creator?: {
        name: string;
        avatar?: string;
    };
    isPinned?: boolean;
    isTrash?: boolean;
    onEdit?: (id: number) => void;
    onView?: (id: number) => void;
    onTogglePin?: (id: number) => void;
    onDelete?: (id: number) => void;
    onRestore?: (id: number) => void;
}

export default function NoteCard({
    id,
    title,
    content,
    createdAt,
    tag,
    tagColor,
    borderTopColor = 'border-t-yellow-500',
    creator,
    isPinned = false,
    isTrash = false,
    onEdit,
    onView,
    onTogglePin,
    onDelete,
    onRestore,
}: NoteCardProps) {
    return (
        <div
            // onClick={() => onView?.(id)}
            className={cn(
                'group relative flex cursor-pointer flex-col rounded-2xl border border-t-2 border-gray-200 bg-white p-3 shadow-sm transition-shadow hover:shadow-md',
                borderTopColor,
            )}
        >
            {/* Tag Badge at Top */}
            <div className="mb-3 flex items-center justify-between">
                {tag && (
                    <Badge variant="secondary" className={cn('border text-xs font-medium', tagColor || 'border-gray-200 bg-gray-100 text-gray-800')}>
                        {tag}
                    </Badge>
                )}
                <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?.(id)}>
                            <Eye className="mr-2 h-3 w-3" />
                            View
                        </DropdownMenuItem>
                        <DropdownMenuItem onClick={() => onEdit(id)}>
                            <Edit className="mr-2 h-3 w-3" />
                            Edit
                        </DropdownMenuItem>

                        <DropdownMenuItem onClick={() => onTogglePin(id)}>
                            <Pin className="mr-2 h-3 w-3" />
                            {isPinned ? 'Unpin' : 'Pin'}
                        </DropdownMenuItem>

                        <DropdownMenuItem className="text-red-600" onClick={() => onDelete(id)}>
                            <Trash2 className="mr-2 h-3 w-3" />
                            Delete
                        </DropdownMenuItem>
                    </DropdownMenuContent>
                </DropdownMenu>
            </div>

            {/* Content */}
            <div className="mb-4 flex-1">
                <p className="line-clamp-4 text-sm leading-relaxed text-gray-600">{content}</p>
            </div>

            {/* Card Footer */}
            <div className="mt-auto flex items-center justify-between border-t border-gray-200 pt-3">
                <div className="flex items-center gap-2">
                    <Calendar className="h-3 w-3 text-gray-400" />
                    <span className="text-xs text-gray-500">{new Date(createdAt).toLocaleDateString()}</span>
                    {creator && (
                        <Avatar className="h-5 w-5 border border-white" title={creator.name}>
                            <AvatarImage src={creator.avatar || '/placeholder.svg'} />
                            <AvatarFallback className="text-xs">{creator.name.charAt(0).toUpperCase()}</AvatarFallback>
                        </Avatar>
                    )}
                </div>
                <div className="flex items-center gap-1">
                    {isTrash ? (
                        <>
                            <Button variant="ghost" size="sm" className="h-6 w-6 p-0" onClick={() => onRestore(id)} title="Restore">
                                <RotateCcw className="h-3 w-3 text-green-500 hover:text-green-600" />
                            </Button>

                            <Button variant="ghost" size="sm" className="h-6 w-6 p-0" onClick={() => onDelete(id)} title="Delete Permanently">
                                <Trash2 className="h-3 w-3 text-red-500 hover:text-red-600" />
                            </Button>
                        </>
                    ) : (
                        <>
                            <Button
                                variant="ghost"
                                size="sm"
                                className="h-6 w-6 p-0"
                                onClick={() => onTogglePin(id)}
                                title={isPinned ? 'Unpin' : 'Pin'}
                            >
                                <Pin className={cn('h-3 w-3', isPinned ? 'fill-yellow-500 text-yellow-500' : 'text-gray-400 hover:text-gray-600')} />
                            </Button>

                            {/* <Button
                                variant="ghost"
                                size="sm"
                                className="h-6 w-6 p-0"
                                onClick={() => onToggleFavorite(id)}
                                title={isFavorite ? 'Remove from favorites' : 'Add to favorites'}
                            >
                                <Star className={cn('h-3 w-3', isFavorite ? 'fill-amber-500 text-amber-500' : 'text-gray-400 hover:text-gray-600')} />
                            </Button> */}

                            <Button variant="ghost" size="sm" className="h-6 w-6 p-0" onClick={() => onDelete(id)} title="Delete">
                                <Trash2 className="h-3 w-3 text-gray-400 hover:text-red-500" />
                            </Button>
                        </>
                    )}
                </div>
            </div>
        </div>
    );
}