'use client';

import React, { memo } from 'react';
import { Music, UserCircle } from 'lucide-react';
import { cn } from '@/utils';
import type { InputAsset } from '../../types/node';
import { SecureImage } from '@/components/common/SecureImage';
import { SecureVideo } from '../../nodes/components/SecureVideo';

export interface ReferencedAssetsChipsProps {
    /** 当前已引用的素材列表（由父组件根据 prompt 文本解析得到） */
    assets: InputAsset[];
    className?: string;
}

/**
 * 已引用素材 chips：在输入框下方展示当前 prompt 中 @ 引用的素材，
 * 与普通输入视觉区分，且不参与输入框尺寸计算。
 */
export const ReferencedAssetsChips = memo(({ assets, className }: ReferencedAssetsChipsProps) => {
    if (assets.length === 0) return null;

    return (
        <div
            className={cn(
                'mt-1 px-2 flex flex-wrap gap-1 text-[11px] text-foreground/80',
                className
            )}
        >
            {assets.map((asset) => {
                const alias = asset.mentionAlias || asset.label || asset.id;
                return (
                    <div
                        key={asset.id}
                        className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-white/5 border border-white/10"
                    >
                        <div
                            className={cn(
                                'w-4 h-4 rounded-full overflow-hidden border border-white/20 flex items-center justify-center bg-black/40 shrink-0'
                            )}
                        >
                            {asset.type === 'video' ? (
                                <SecureVideo
                                    src={asset.src}
                                    className="w-full h-full object-cover"
                                    muted
                                    loop
                                    autoPlay
                                    playsInline
                                />
                            ) : asset.type === 'audio' ? (
                                <div
                                    className={cn(
                                        'w-full h-full flex items-center justify-center',
                                        asset.gender ? 'bg-black/40' : 'bg-cyan-500/20'
                                    )}
                                >
                                    {asset.gender ? (
                                        <UserCircle
                                            size={14}
                                            className={cn(
                                                asset.gender === '男' || asset.gender === 'male'
                                                    ? 'text-blue-400'
                                                    : 'text-pink-400'
                                            )}
                                        />
                                    ) : (
                                        <Music size={14} className="text-cyan-300" />
                                    )}
                                </div>
                            ) : (
                                <SecureImage
                                    src={asset.src}
                                    alt={alias}
                                    className="w-full h-full object-cover"
                                />
                            )}
                        </div>
                        <span className="truncate max-w-[80px]">@{alias}</span>
                    </div>
                );
            })}
        </div>
    );
});

ReferencedAssetsChips.displayName = 'ReferencedAssetsChips';
